/* =========================================================
   R+B Design System — Single Project Page
   -----------------------------------------------------------
   Applies to any post in the `project` custom post type
   served by template-project.php.

   Source of truth for design:
     https://rb-website-omega.vercel.app/mountain-retreat-v2.html

   Loaded after rb-tokens.css by rb-redesign.php.
   All rules scoped to .rb-page--project.
   ========================================================= */

/* ---- Kill theme wrappers that push content down ---- */
body.single-project main#main,
body.single-project main.main,
body.single-project .rb-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ---- Reduce body padding-top for single projects — the hero
       sits right under the fixed header, no need for buffer. */
body.single-project {
    padding-top: 0 !important;
}
/* Header remains fixed and floats over the hero for immersion. */

/* ============ HERO ============
   Full-viewport lead image. Sizing mirrors the homepage hero
   so both feel like part of the same visual family. */
.rb-page--project .project-hero {
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 720px;
    max-height: 1100px;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    line-height: 0;
    background: transparent;
}
.rb-page--project .project-hero__img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
}

/* ============ TITLE BLOCK ============
   Project name + location on the left, lede paragraph on the right.
   Two-column at desktop, stacked on mobile. */
.rb-page--project .project-title-block {
    max-width: 1200px; /* narrower than the gallery/info sections so
                          title + lede sit indented from screen edges */
    margin: 0 auto;
    padding: 56px 48px 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start; /* title and lede share the top baseline */
}
.rb-page--project .project-title-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Theme sets h1..h6 { color: var(--brand-primary) !important;
   text-transform: uppercase; font-weight: 500 }. Override each
   with !important + hardcoded hex + maximum specificity so the
   project title renders as editorial sentence-case, weight 300,
   near-black ink — matching the Vercel spec (~22–36px range). */
html body.single-project .rb-page--project .project-title-block .project-title,
html body.single .rb-page--project .project-title-block .project-title,
.rb-page--project .project-title-block .project-title,
.rb-page--project .project-title {
    /* Sized to match theme's h4 exactly (21.33px / 1.333rem @ 1920px)
       so titling reads consistently across the site even though this
       is semantically an h1. Slight responsive scale down for narrow
       viewports. */
    font-size: clamp(1.125rem, 1.1vw, 1.333rem) !important; /* ~18–21px */
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    letter-spacing: 0.094em !important;                     /* = h4's 2px at 21px */
    text-transform: uppercase !important;
    color: #767676 !important;                              /* soft gray — matches sitewide heading color */
}
/* Location text — sentence case to match homepage + practice pages.
   Kept as a small quiet subtitle under the H1 project title. */
.rb-page--project .project-title-block .project-loc {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--rb-ink-soft, #6b6b6b);
    margin: 0;
}
/* Kill the theme's `.project-loc::before { content: "-" }` decoration
   everywhere it appears on our redesigned project pages — title
   block, related-work tiles, and any future context. The stray dash
   looks like a punctuation mark before the location. */
.rb-page--project .project-loc::before,
.rb-page--project .project-loc::after {
    content: none !important;
    display: none !important;
}
.rb-page--project .project-lede {
    font-size: 15px;
    line-height: 1.75;
    color: var(--rb-ink);
    max-width: 520px;
    margin: 0;
}

/* ============ GALLERY — same magazine rhythm as Practice ============
   .t-full / .t-twothirds / .t-third / .t-half / .t-tall come from the
   12-column grid. Aspect ratios use the padding-bottom trick so images
   render at uniform, theme-resistant proportions. */
.rb-page--project .project-gallery {
    max-width: 1400px;
    margin: 0 auto;
    /* Bottom padding pairs with .project-narrative's top padding to
       set the gap between the last image and the body copy.
       32 + 28 = 60px total (was 64 + 56 = 120px). */
    padding: 24px 48px 32px;
}
.rb-page--project .project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(40px, auto);
    gap: 28px;
}
/* Tile height comes from its span class (fixed per-class aspect so
   tiles in the same row are always the same height — no gaps).
   Smart-pairing in PHP matches image orientation to slot to minimize
   actual cropping. */
.rb-page--project .project-gallery-grid .project-image {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 75%; /* default 4:3, per-class overrides below */
    background-color: var(--rb-bg-alt, #eee);
    overflow: hidden;
    transition: opacity 0.4s ease;
}
.rb-page--project .project-gallery-grid .project-image img {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    display: block !important;
}

/* Grid span classes — column widths + fixed aspect per class so
   tiles in the same row always share a height. */
.rb-page--project .t-full      { grid-column: span 12; }
.rb-page--project .t-full      .project-image { padding-bottom: 56.25%; }  /* 16:9 */

.rb-page--project .t-twothirds { grid-column: span 8; }
.rb-page--project .t-twothirds .project-image { padding-bottom: 75%; }     /* 4:3 */

.rb-page--project .t-half      { grid-column: span 6; }
.rb-page--project .t-half      .project-image { padding-bottom: 75%; }     /* 4:3 */

.rb-page--project .t-third     { grid-column: span 4; }
.rb-page--project .t-third     .project-image { padding-bottom: 66.67%; }  /* 3:2 landscape */
.rb-page--project .t-tall      .project-image { padding-bottom: 133.33%; } /* 3:4 portrait */

/* Lone final-row tile — centered half so it doesn't dominate as a
   full-width photo. Applied by rb_project_fix_orphans() in PHP. */
.rb-page--project .t-solo-center { grid-column: 4 / span 6; }

/* ============ NARRATIVE ============
   Comfortable reading measure, generous line-height. */
.rb-page--project .project-narrative {
    max-width: 760px; /* narrower than title-block — comfortable reading
                         measure, matches the Vercel spec */
    margin: 0 auto;
    /* Top padding pairs with .project-gallery's bottom padding.
       28 + 32 = 60px total gap above the narrative (was 56 + 64). */
    padding: 28px 48px 24px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--rb-ink);
}
.rb-page--project .project-narrative p {
    margin: 0 0 1.35em;
}
.rb-page--project .project-narrative p:last-child {
    margin-bottom: 0;
}

/* ============ PROJECT INFO — dynamic column grid ============
   PHP sets --info-col-count based on how many columns have data
   (1–5). Each column has a fixed intrinsic width and the whole
   group is centered horizontally on the page — so 3 columns sit
   in the middle rather than stretching edge-to-edge, and adding
   a 4th or 5th just widens the centered group. */
.rb-page--project .project-info {
    max-width: 1500px;
    margin: 0 auto;
    padding: 48px 48px 96px;
    display: grid;
    grid-template-columns: repeat(var(--info-col-count, 4), minmax(180px, 260px));
    justify-content: center;
    gap: 40px;
    align-items: start;
}
/* Explicit fallback classes for older browsers / preview panes that
   don't honor the CSS variable in the inline style. */
.rb-page--project .info-cols--1 { grid-template-columns: minmax(180px, 260px); }
.rb-page--project .info-cols--2 { grid-template-columns: repeat(2, minmax(180px, 260px)); }
.rb-page--project .info-cols--3 { grid-template-columns: repeat(3, minmax(180px, 260px)); }
.rb-page--project .info-cols--4 { grid-template-columns: repeat(4, minmax(180px, 260px)); }
.rb-page--project .info-cols--5 { grid-template-columns: repeat(5, minmax(180px, 260px)); }

/* Info column — label (H5) sits above value (H6 items). */
.rb-page--project .info-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Column label — theme's h5 default is 500 uppercase teal, which is
   what we want visually so most properties align. Force color to
   ink (theme uses teal !important) and re-assert size/spacing. */
.rb-page--project .info-col__label {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--rb-ink) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}
/* Value H6 (single or list item) — weight 400, sentence case,
   ink color. Overrides the theme's uppercase teal H6 defaults.
   overflow-wrap + hyphens let long titles (publications, awards)
   break gracefully inside narrow columns instead of overflowing. */
.rb-page--project .info-col h6,
.rb-page--project .info-col__value {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.55 !important;
    color: var(--rb-ink) !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    overflow-wrap: break-word;
    hyphens: auto;
}
/* Link inside an H6 value — inherit the H6's styling exactly so
   links to publications/awards articles look like regular text
   with a subtle underline. */
.rb-page--project .info-col h6 a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: opacity 0.2s ease;
}
.rb-page--project .info-col h6 a:hover {
    opacity: 0.6;
}
.rb-page--project .info-col__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rb-page--project .info-col__list li {
    margin: 0 0 4px;
    padding: 0;
}
.rb-page--project .info-col__list li:last-child {
    margin-bottom: 0;
}
/* Team column — role is bold, name follows on the same line. */
.rb-page--project .info-col__list--team .team-role {
    font-weight: 500;
}
/* Publications column — italic per design. */
.rb-page--project .info-col--italic h6,
.rb-page--project .info-col--italic li,
.rb-page--project .info-col--italic .info-col__value {
    font-style: italic;
}

/* ============ RELATED WORK ============
   3-tile grid, uniform aspect, subtle hover. */
.rb-page--project .project-related {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 48px 96px;
    border-top: 1px solid var(--rb-hairline, rgba(22, 21, 19, 0.12));
}
.rb-page--project .project-related__heading {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rb-ink);
    margin: 32px 0 24px;
}
.rb-page--project .project-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.rb-page--project .project-related__tile {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.4s ease;
}
.rb-page--project .project-related__tile:hover {
    opacity: 0.9;
}
.rb-page--project .project-related__tile .project-image {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 66.67%; /* 3:2 landscape */
    background-color: var(--rb-bg-alt, #eee);
    overflow: hidden;
    margin-bottom: 12px;
}
.rb-page--project .project-related__tile .project-image img {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    display: block !important;
}
.rb-page--project .project-related__tile .project-name {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rb-ink);
    margin: 0 0 4px;
}
.rb-page--project .project-related__tile .project-loc {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--rb-ink-soft, #6b6b6b);
    margin: 0;
}

/* ============ RESPONSIVE ============
   Info-col grid stays centered as viewport narrows — wraps to fewer
   columns rather than stretching. Group always sits in the middle. */
@media (max-width: 1180px) {
    .rb-page--project .project-info,
    .rb-page--project .info-cols--4,
    .rb-page--project .info-cols--5 {
        grid-template-columns: repeat(3, minmax(160px, 200px));
        gap: 40px;
        padding: 40px 40px 72px;
    }
}
@media (max-width: 820px) {
    .rb-page--project .project-info,
    .rb-page--project .info-cols--3,
    .rb-page--project .info-cols--4,
    .rb-page--project .info-cols--5 {
        grid-template-columns: repeat(2, minmax(160px, 220px));
        gap: 32px;
        padding: 32px 32px 64px;
    }
}

@media (max-width: 900px) {
    /* Hero — desktop uses tall vh values that force a portrait
       container on phones and severely crop landscape photos. Switch
       to a fixed 3:2 LANDSCAPE aspect ratio derived from viewport
       width. Landscape hero photos now render with minimal cropping. */
    .rb-page--project .project-hero {
        height: auto !important;
        aspect-ratio: 3 / 2 !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    /* Because the hero is now short on mobile, the fixed header covers
       its top portion. Override the desktop `body.single-project {
       padding-top: 0 }` rule so the hero sits BELOW the header
       instead of under it. Matches other pages' mobile offsets. */
    body.single-project {
        padding-top: 90px !important;
    }
    body.single-project.admin-bar {
        padding-top: 136px !important;
    }
    .rb-page--project .project-title-block {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 40px 24px 24px;
    }
    /* Bottom padding pairs with the narrative's mobile top padding.
       24 + 12 = 36px total (was 48 + 24 = 72px). */
    .rb-page--project .project-gallery {
        padding: 16px 24px 24px;
    }
    .rb-page--project .project-gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .rb-page--project .t-full,
    .rb-page--project .t-twothirds,
    .rb-page--project .t-half,
    .rb-page--project .t-third { grid-column: span 1; }
    .rb-page--project .t-full .project-image,
    .rb-page--project .t-twothirds .project-image { padding-bottom: 66.67%; }
    .rb-page--project .t-half .project-image { padding-bottom: 75%; }
    .rb-page--project .t-third .project-image,
    .rb-page--project .t-tall .project-image { padding-bottom: 125%; }

    /* Top padding halved to match the gallery's reduced bottom. */
    .rb-page--project .project-narrative {
        padding: 12px 24px 32px;
    }
    /* True mobile — stack all cols to a single column below 600px */
    .rb-page--project .project-info {
        gap: 28px;
        padding: 32px 24px 56px;
    }
    .rb-page--project .project-related {
        padding: 24px 24px 72px;
    }
    .rb-page--project .project-related__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}