/* =====================================================================
   Layout — container, grid, sections
   ===================================================================== */

.aie-container {
    width: 100%;
    max-width: var(--aie-container);
    margin-inline: auto;
    padding-inline: var(--aie-gutter);
}

.aie-container--narrow {
    max-width: var(--aie-container-narrow);
}

.aie-section {
    padding: var(--aie-section-y) 0;
    background: var(--aie-bg);
    color: var(--aie-text);
    position: relative;
}

.aie-section--sm {
    padding: var(--aie-section-y-sm) 0;
}

.aie-section--lg {
    padding: var(--aie-section-y-lg) 0;
}

.aie-section--first {
    padding-top: var(--aie-section-y-first);
}

/* Adjacent same-surface sections — keep full padding (each section is its own
   zone with breathing room). The visual hairline between them comes from
   their own borders or background-inset variants, not from collapsed padding. */

/* Header offset for in-page anchors — matches the floating header's bottom edge */
[id] { scroll-margin-top: 120px; }

/* Grid utilities — used directly in templates */
.aie-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
}

.aie-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.aie-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.aie-grid--7-5 {
    grid-template-columns: 7fr 5fr;
}

.aie-grid--5-7 {
    grid-template-columns: 5fr 7fr;
}

.aie-grid--align-end { align-items: end; }
.aie-grid--align-center { align-items: center; }

@media (max-width: 880px) {
    .aie-grid--2,
    .aie-grid--3,
    .aie-grid--7-5,
    .aie-grid--5-7 {
        grid-template-columns: 1fr;
        gap: var(--aie-space-7);
    }
}

/* Stack utility — vertical rhythm helper */
.aie-stack > * + * { margin-top: var(--aie-space-4); }
.aie-stack-lg > * + * { margin-top: var(--aie-space-6); }
.aie-stack-xl > * + * { margin-top: var(--aie-space-7); }

/* Inline utility */
.aie-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aie-space-4);
}

/* Reading column — long-form text */
.aie-read {
    max-width: 68ch;
}

/* Image plate — hairline-bordered editorial frame */
.aie-plate {
    overflow: hidden;
    border: 1px solid var(--aie-hair);
    background: var(--aie-bg-inset);
    border-radius: var(--aie-radius);
}
.aie-plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.aie-plate--portrait { aspect-ratio: 4 / 5; }
.aie-plate--landscape { aspect-ratio: 4 / 3; }
.aie-plate--cinema { aspect-ratio: 21 / 9; }

/* Reveal — opacity + 22px Y-translate, 800ms with the brand ease curve.
   The fade duration is tuned for "settle" rather than "snap". */
.aie-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 900ms var(--aie-ease),
                transform 900ms var(--aie-ease);
}
.aie-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* When a revealed parent contains nested .aie-reveal children, stagger
   them slightly so the section "unfolds" from top to bottom. */
.aie-reveal.is-revealed .aie-reveal:nth-child(1) { transition-delay: 60ms; }
.aie-reveal.is-revealed .aie-reveal:nth-child(2) { transition-delay: 120ms; }
.aie-reveal.is-revealed .aie-reveal:nth-child(3) { transition-delay: 180ms; }
.aie-reveal.is-revealed .aie-reveal:nth-child(4) { transition-delay: 240ms; }
.aie-reveal.is-revealed .aie-reveal:nth-child(n+5) { transition-delay: 300ms; }

/* Eyebrow rule subtly grows in width on reveal — typographic flourish */
.aie-reveal .aie-rule {
    width: 0;
    transition: width 1200ms var(--aie-ease) 200ms;
}
.aie-reveal.is-revealed .aie-rule,
.is-revealed .aie-rule {
    width: 48px;
}

/* Parallax-ready images — sized larger than their container so JS can shift
   them ±4% on scroll without showing edges. JS adds .aie-parallax-ready
   only when the IntersectionObserver and reduce-motion checks pass. */
.aie-parallax-ready {
    height: 118% !important;
    margin-top: -9%;
    will-change: transform;
}

/* Hover micro-animations — subtle background/border transitions on
   card-style components. Kept under 600ms with the same single ease curve. */
.aie-screening__col,
.aie-timeline-card,
.aie-creds__row,
.aie-libretto,
.aie-chapter,
.aie-investment-detail,
.aie-faq-featured {
    transition: background-color 600ms var(--aie-ease),
                border-color 600ms var(--aie-ease);
}

.aie-creds__row:hover .aie-creds__year,
.aie-libretto:hover .aie-libretto__num,
.aie-chapter:hover .aie-chapter__num {
    color: var(--aie-gold);
    transition: color 600ms var(--aie-ease);
}

/* Plate images get a barely-perceptible scale on hover — 1500ms slow.
   Disabled on touch devices (no hover) and reduced-motion. */
@media (hover: hover) {
    .aie-plate {
        transition: border-color 600ms var(--aie-ease);
    }
    .aie-plate:not(:has(.aie-parallax-ready)) img {
        transition: transform 1800ms var(--aie-ease);
    }
    .aie-plate:not(:has(.aie-parallax-ready)):hover img {
        transform: scale(1.025);
    }
}

/* Buttons already have their own transitions in components.css; arrows
   move via a transform inside .aie-btn:hover .aie-btn__arrow. The link
   underline-grow effect is also already in components.css. */

@media (prefers-reduced-motion: reduce) {
    .aie-reveal { opacity: 1; transition: none; transform: none; }
    .aie-parallax-ready {
        height: 100% !important;
        margin-top: 0;
        transform: none !important;
        will-change: auto;
    }
    .aie-plate img,
    .aie-plate:hover img { transform: none !important; transition: none; }
}