/*
 * Layout System
 * Pritika — Editorial Personal Portfolio
 */

/* ── Container ── */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}

/* ── Narrow reading column ── */
.content-narrow {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

/* ── Sections with generous vertical spacing ── */
.section {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
}

.section--sm {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
}

.section--lg {
    padding-top: var(--space-128);
    padding-bottom: var(--space-128);
}

/* ── Section with top border ── */
.section--bordered {
    border-top: var(--border-thin);
}

/* ── Two-column asymmetric layout ── */
.layout-split {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-64);
    align-items: start;
}

/* ── Experience timeline layout ── */
.layout-timeline {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-32);
    align-items: start;
}

/* ── Page header ── */
.page-header {
    padding-top: var(--space-80);
    padding-bottom: var(--space-64);
}

.page-header__title {
    margin-bottom: var(--space-16);
}

.page-header__subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-body-lg);
    color: var(--color-text-muted);
    max-width: 540px;
    line-height: var(--leading-body);
}

/* ── Scroll reveal animation ── */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 40ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 120ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 200ms; }

/* Reduced motion: keep opacity, remove transform */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        transform: none;
        transition: opacity 200ms ease;
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .section {
        padding-top: var(--space-64);
        padding-bottom: var(--space-64);
    }

    .section--lg {
        padding-top: var(--space-80);
        padding-bottom: var(--space-80);
    }

    .layout-split {
        grid-template-columns: 1fr;
        gap: var(--space-32);
    }

    .layout-timeline {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .page-header {
        padding-top: var(--space-48);
        padding-bottom: var(--space-48);
    }
}