/* ================================================================
   MODULES.CSS
   Photography-editorial style — images at natural ratio, never cropped
   Noto Sans only — accent var(--raul)
   ================================================================ */


/* ----------------------------------------------------------------
   BASE
   ---------------------------------------------------------------- */

.mod-page {
    font-family: "Noto Sans", sans-serif;
    color: var(--dark);
    padding: max(3vw, 32px) 0 max(8vw, 80px);
}

.mod-page * { box-sizing: border-box; }

/* Images always at natural ratio — never cropped */
.mod-page img {
    display: block;
    width: 100%;
    height: auto;
}

.mod-page video {
    display: block;
    width: 100%;
    height: auto;
}

.mod-page p {
    margin: 0 0 1.1em;
    line-height: 1.75;
}

.mod-page p:last-child { margin-bottom: 0; }

.mod-page a { color: var(--raul); text-decoration: none; }
.mod-page a:hover { text-decoration: underline; }


/* ----------------------------------------------------------------
   MODULE RHYTHM
   ---------------------------------------------------------------- */

.mod-section-label,
.mod-hero,
.mod-intro,
.mod-text,
.mod-pull-quote,
.mod-stats,
.mod-feature,
.mod-image-full,
.mod-image-2,
.mod-image-3,
.mod-gallery,
.mod-video,
.mod-divider,
.mod-tags,
.mod-cta,
.mod-table,
.mod-timeline {
    margin-bottom: max(6vw, 64px);
}


/* ----------------------------------------------------------------
   1. SECTION LABEL — museum caption style
   ---------------------------------------------------------------- */

.mod-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: max(2vw, 20px);
}

.mod-section-label span {
    font-size: max(0.8vw, 10px);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(6,6,20,0.35);
}

.mod-section-label em {
    font-size: max(0.8vw, 10px);
    font-weight: 400;
    font-style: normal;
    color: rgba(6,6,20,0.25);
    letter-spacing: 0.06em;
}


/* ----------------------------------------------------------------
   2. HERO — full-width image or video with optional text
   ---------------------------------------------------------------- */

.mod-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--dark);
}

/* Hero with overlay needs a min-height so text is visible */
.mod-hero:has(.mod-hero__overlay) {
    min-height: 50vw;
}

.mod-hero img { width: 100%; height: auto; }

.mod-hero video {
    width: 100%;
    height: 56vw; /* 16:9 approximation for autoplay hero */
    max-height: 85vh;
    object-fit: cover;
}

.mod-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,6,20,0.65) 0%, rgba(6,6,20,0.05) 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: max(3vw, 32px);
    color: #fff;
}

.mod-hero__overlay h2 {
    font-size: max(5vw, 36px);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: #fff;
}

.mod-hero__overlay p {
    font-size: max(1.2vw, 13px);
    font-weight: 400;
    line-height: 1.6;
    opacity: 0.65;
    max-width: 480px;
    color: #fff;
    margin: 0;
}


/* ----------------------------------------------------------------
   3. INTRO — large opener
   ---------------------------------------------------------------- */

.mod-intro { max-width: 800px; }

.mod-intro p {
    font-size: max(2vw, 20px);
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: -0.01em;
    color: var(--dark);
}

.mod-intro strong { font-weight: 700; }


/* ----------------------------------------------------------------
   4. TEXT — body copy
   ---------------------------------------------------------------- */

.mod-text {
    max-width: 640px;
    font-size: max(1.3vw, 14px);
    font-weight: 400;
    line-height: 1.8;
    color: rgba(6,6,20,0.65);
}


/* ----------------------------------------------------------------
   5. PULL QUOTE
   ---------------------------------------------------------------- */

.mod-pull-quote { max-width: 840px; }

.mod-pull-quote blockquote {
    font-size: max(3vw, 28px);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--dark);
    margin: 0 0 16px;
}

.mod-pull-quote cite {
    font-size: max(0.85vw, 10px);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--raul);
    font-style: normal;
}


/* ----------------------------------------------------------------
   6. STATS
   ---------------------------------------------------------------- */

.mod-stats {
    display: flex;
    flex-wrap: wrap;
    gap: max(4vw, 40px);
    padding-top: max(2vw, 24px);
    border-top: 1px solid rgba(6,6,20,0.1);
}

.mod-stat__number {
    display: block;
    font-size: max(6vw, 52px);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--dark);
    margin-bottom: 6px;
}

.mod-stat__number em {
    font-style: normal;
    color: var(--raul);
}

.mod-stat__label {
    display: block;
    font-size: max(0.8vw, 10px);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(6,6,20,0.35);
}


/* ----------------------------------------------------------------
   7. FEATURE — image + text, image at natural ratio
   ---------------------------------------------------------------- */

.mod-feature {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: max(5vw, 56px);
    align-items: start;
}

.mod-feature--flip { grid-template-columns: 2fr 3fr; }
.mod-feature--flip .mod-feature__image { order: 2; }
.mod-feature--flip .mod-feature__body  { order: 1; }

/* Image shows at natural ratio */
.mod-feature__image {}
.mod-feature__image img { width: 100%; height: auto; }

.mod-feature__body {
    padding-top: max(1vw, 8px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mod-feature__label {
    font-size: max(0.8vw, 10px);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--raul);
}

.mod-feature__title {
    font-size: max(2.2vw, 22px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--dark);
}

.mod-feature__text {
    font-size: max(1.3vw, 14px);
    line-height: 1.75;
    color: rgba(6,6,20,0.6);
}

@media (max-width: 768px) {
    .mod-feature,
    .mod-feature--flip { grid-template-columns: 1fr; }
    .mod-feature--flip .mod-feature__image { order: 0; }
    .mod-feature--flip .mod-feature__body  { order: 0; }
}


/* ----------------------------------------------------------------
   8. IMAGES — natural ratio, no cropping
   ---------------------------------------------------------------- */

/* Full width */
.mod-image-full {}

.mod-image-full img { width: 100%; height: auto; }

.mod-image-full figcaption {
    font-size: max(0.8vw, 10px);
    font-weight: 400;
    letter-spacing: 0.06em;
    color: rgba(6,6,20,0.3);
    padding: 10px 0 0;
    font-style: italic;
}


/* 2 columns — images at their own natural height, aligned to top */
.mod-image-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: max(2vw, 20px);
    align-items: start;
}

.mod-image-2 figure { margin: 0; }
.mod-image-2 img { width: 100%; height: auto; }

.mod-image-2 figcaption {
    font-size: max(0.8vw, 10px);
    color: rgba(6,6,20,0.3);
    padding: 8px 0 0;
    font-style: italic;
}

@media (max-width: 560px) {
    .mod-image-2 { grid-template-columns: 1fr; }
}


/* 3 columns */
.mod-image-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: max(1.5vw, 14px);
    align-items: start;
}

.mod-image-3 figure { margin: 0; }
.mod-image-3 img { width: 100%; height: auto; }

@media (max-width: 640px) {
    .mod-image-3 { grid-template-columns: 1fr 1fr; }
}


/* ----------------------------------------------------------------
   9. GALLERY — responsive, natural ratio
   ---------------------------------------------------------------- */

.mod-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: max(1.5vw, 14px);
    align-items: start;
}

.mod-gallery figure { margin: 0; }
.mod-gallery img { width: 100%; height: auto; }

/* Wide — 2 cols only */
.mod-gallery--wide { grid-template-columns: repeat(2, 1fr); }

/* Span utilities */
.mod-gallery figure.wide { grid-column: span 2; }

.mod-gallery figcaption {
    font-size: max(0.8vw, 10px);
    color: rgba(6,6,20,0.3);
    padding: 6px 0 0;
    font-style: italic;
}


/* ----------------------------------------------------------------
   10. VIDEO
   ---------------------------------------------------------------- */

.mod-video { background: #000; }

/* Autoplay / looping b-roll — fills width naturally */
.mod-video video { width: 100%; height: auto; display: block; }

/* Embed (16:9) — for iframes */
.mod-video--embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.mod-video--embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}


/* ----------------------------------------------------------------
   11. DIVIDER
   ---------------------------------------------------------------- */

.mod-divider {
    border: none;
    border-top: 1px solid rgba(6,6,20,0.08);
    margin-top: 0;
}

.mod-divider--label {
    border-top: none;
    display: flex;
    align-items: center;
    gap: 16px;
}

.mod-divider--label::before,
.mod-divider--label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(6,6,20,0.08);
}

.mod-divider--label span {
    font-size: max(0.8vw, 10px);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(6,6,20,0.2);
    white-space: nowrap;
}


/* ----------------------------------------------------------------
   12. TAGS
   ---------------------------------------------------------------- */

.mod-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mod-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: max(0.8vw, 10px);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(6,6,20,0.15);
    color: rgba(6,6,20,0.45);
}

.mod-tag--filled { background: var(--dark); color: #fff; border-color: var(--dark); }
.mod-tag--accent { background: var(--raul); color: #fff; border-color: var(--raul); }


/* ----------------------------------------------------------------
   13. CTA
   ---------------------------------------------------------------- */

.mod-cta {
    background: var(--dark);
    padding: max(5vw, 56px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: max(4vw, 40px);
    align-items: center;
}

.mod-cta__label {
    display: block;
    font-size: max(0.8vw, 10px);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--raul);
    margin-bottom: 10px;
}

.mod-cta__title {
    font-size: max(2.8vw, 26px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.mod-cta__text {
    font-size: max(1.2vw, 13px);
    color: rgba(255,255,255,0.4);
    line-height: 1.7;
    margin: 0;
}

.mod-cta__action { flex-shrink: 0; }

.mod-cta a,
.mod-cta button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--raul);
    color: #fff;
    padding: 14px 26px;
    font-size: max(0.8vw, 11px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

.mod-cta a:hover,
.mod-cta button:hover { opacity: 0.8; text-decoration: none; }

@media (max-width: 680px) {
    .mod-cta { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------
   14. TABLE
   ---------------------------------------------------------------- */

.mod-table { overflow-x: auto; }

.mod-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: max(1.2vw, 13px);
}

.mod-table thead { border-bottom: 1px solid rgba(6,6,20,0.15); }

.mod-table th {
    text-align: left;
    font-size: max(0.8vw, 10px);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(6,6,20,0.35);
    padding: 0 20px 12px 0;
}

.mod-table td {
    padding: 14px 20px 14px 0;
    border-bottom: 1px solid rgba(6,6,20,0.06);
    color: var(--dark);
    vertical-align: top;
    line-height: 1.5;
}

.mod-table tr:last-child td { border-bottom: none; }
.mod-table td strong { font-weight: 700; }
.mod-table td em { color: rgba(6,6,20,0.35); font-style: normal; }


/* ----------------------------------------------------------------
   15. TIMELINE
   ---------------------------------------------------------------- */

.mod-timeline { max-width: 640px; }

.mod-timeline ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mod-timeline li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 20px;
    padding: max(1.8vw, 20px) 0;
    border-top: 1px solid rgba(6,6,20,0.08);
}

.mod-timeline__num {
    font-size: max(1.8vw, 18px);
    font-weight: 200;
    color: var(--raul);
    line-height: 1.2;
    padding-top: 2px;
}

.mod-timeline__title {
    font-size: max(1.4vw, 15px);
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 5px;
    line-height: 1.2;
}

.mod-timeline__text {
    font-size: max(1.1vw, 12px);
    line-height: 1.7;
    color: rgba(6,6,20,0.5);
    margin: 0;
}