/* ------------------------------------------------------------------
 * La Toxica V4 Appendix FF — Layout Overhaul Utilities
 * Reusable wrap + bleed primitives that let colour bands ship full-bleed
 * while content sections breathe inside ergonomic max-widths. Builds on
 * the brand custom properties already declared in reviews-marquee.css
 * (priority 20). This file enqueues at priority 25 so it cascades after
 * Tailwind and after the marquee tokens.
 *
 * Sections covered:
 *   - Brand custom props (extended)
 *   - .latoxica-wrap utility family (default / wide / narrow)
 *   - .latoxica-bleed escape hatch (full viewport width)
 *   - .latoxica-testimonials-marquee full-bleed override
 *   - .latoxica-apropos asymmetric grid
 *   - .latoxica-contact 3-column grid + accent strip
 *   - .latoxica-pill, .latoxica-button utilities for GG/HH
 *   - .latoxica-ticker vertical label utility
 *   - Mobile collapse to single column at 768 px
 *   - prefers-reduced-motion: reduce respect for new animations
 * ------------------------------------------------------------------ */

:root {
    --latoxica-content-max:    1440px;
    --latoxica-content-wide:   1680px;
    --latoxica-content-narrow: 880px;
    --latoxica-gutter:         clamp(1.25rem, 3vw, 3rem);
}

/* ------- Wrap utilities (centered, gutter-aware) ----------------- */

.latoxica-wrap {
    width: min(100% - calc(var(--latoxica-gutter) * 2), var(--latoxica-content-max));
    margin-inline: auto;
}

.latoxica-wrap--wide {
    max-width: var(--latoxica-content-wide);
}

.latoxica-wrap--narrow {
    max-width: var(--latoxica-content-narrow);
}

/* ------- Full-bleed escape hatch -------------------------------- */
/* Lets a child of a constrained container break out to 100vw without
 * triggering horizontal overflow. Combine with an inner .latoxica-wrap
 * so the painted band is full-width but the content column stays
 * legible. */

.latoxica-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* ------- Testimonials marquee full-bleed override --------------- */
/* The marquee already paints a cream band; ensure it spans the full
 * viewport on screens wider than the inner container max. Header
 * stays centered and narrow for readability. */

.latoxica-testimonials-marquee {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.latoxica-testimonials-marquee__header {
    width: min(100% - calc(var(--latoxica-gutter) * 2), 720px);
    margin-inline: auto;
}

/* ------- À propos asymmetric grid ------------------------------- */
/* Photo on the left bleeds into the gutter at 1680 px and up; copy
 * column on the right stays inside a 60ch reading measure. Single
 * column on mobile (<= 768 px). */

.latoxica-apropos {
    background: var(--latoxica-ink, #1A1A1A);
    color: var(--latoxica-cream, #F2EAD6);
    padding-block: clamp(3rem, 6vw, 6rem);
}

.latoxica-apropos__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    width: min(100% - calc(var(--latoxica-gutter) * 2), var(--latoxica-content-wide));
    margin-inline: auto;
}

.latoxica-apropos__media {
    position: relative;
}

.latoxica-apropos__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.latoxica-apropos__copy {
    max-width: 60ch;
}

.latoxica-apropos__copy h2,
.latoxica-apropos__copy h3 {
    font-family: var(--latoxica-font-display);
    color: var(--latoxica-cream, #F2EAD6);
    margin-bottom: 1.25rem;
}

.latoxica-apropos__copy p {
    font-family: var(--latoxica-font-sans, "Roboto", sans-serif);
    line-height: 1.65;
    margin-bottom: 1rem;
}

@media (min-width: 1680px) {
    .latoxica-apropos__media {
        margin-left: calc((100vw - var(--latoxica-content-wide)) / -2);
    }
}

/* ------- Contact 3-column grid + accent ------------------------- */
/* Three columns of equal width with a narrow pink accent strip on
 * the right edge (decorative, not content). Collapses to single
 * column on mobile, with the accent strip hidden. */

.latoxica-contact {
    background: var(--latoxica-ink, #1A1A1A);
    color: var(--latoxica-cream, #F2EAD6);
    padding-block: clamp(3rem, 6vw, 6rem);
}

.latoxica-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 6px;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: min(100% - calc(var(--latoxica-gutter) * 2), var(--latoxica-content-wide));
    margin-inline: auto;
}

.latoxica-contact__column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.latoxica-contact__column h3 {
    font-family: var(--latoxica-font-display);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    color: var(--latoxica-cream, #F2EAD6);
    margin-bottom: 0.5rem;
}

.latoxica-contact__column p,
.latoxica-contact__column a {
    font-family: var(--latoxica-font-sans, "Roboto", sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--latoxica-cream, #F2EAD6);
}

.latoxica-contact__column a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.latoxica-contact__column a:hover {
    color: var(--or-cierge);
}

.latoxica-contact__note {
    font-size: 0.875rem;
    opacity: 0.78;
    font-style: italic;
}

.latoxica-contact__accent {
    background: var(--or-cierge);
    width: 6px;
    align-self: stretch;
    min-height: 100%;
}

/* ------- Pill utilities (for GG step) --------------------------- */

.latoxica-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-family: var(--latoxica-font-sans, "Roboto", sans-serif);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

.latoxica-pill--pink {
    background: var(--or-cierge);
    color: var(--latoxica-cream, #F2EAD6);
}

.latoxica-pill--ink {
    background: var(--latoxica-ink, #1A1A1A);
    color: var(--latoxica-cream, #F2EAD6);
}

/* ------- Button utilities (for GG / HH steps) ------------------- */

.latoxica-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    font-family: var(--latoxica-font-sans, "Roboto", sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.latoxica-button--primary {
    background: var(--or-cierge);
    color: var(--latoxica-cream, #F2EAD6);
}

.latoxica-button--primary:hover {
    background: var(--latoxica-cream, #F2EAD6);
    color: var(--latoxica-ink, #1A1A1A);
}

.latoxica-button--ghost {
    background: transparent;
    color: var(--latoxica-cream, #F2EAD6);
    border-color: var(--latoxica-cream, #F2EAD6);
}

.latoxica-button--ghost:hover {
    background: var(--latoxica-cream, #F2EAD6);
    color: var(--latoxica-ink, #1A1A1A);
}

/* ------- Vertical ticker label --------------------------------- */

.latoxica-ticker {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--latoxica-font-sans, "Roboto", sans-serif);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--or-cierge);
    line-height: 1;
}

/* ------- Mobile collapse (<= 768 px) --------------------------- */

@media (max-width: 768px) {
    .latoxica-apropos__grid,
    .latoxica-contact__grid {
        grid-template-columns: 1fr;
    }
    .latoxica-contact__accent {
        display: none;
    }
    .latoxica-apropos__media {
        margin-left: 0;
    }
}

/* ------- Reduced motion respect ------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .latoxica-button,
    .latoxica-button--primary,
    .latoxica-button--ghost {
        transition: none;
    }
}