/* =========================================================
   R+B Design System — Homepage
   -----------------------------------------------------------
   Homepage-specific rules ONLY. Foundation (tokens, eyebrow,
   project-name/loc, quiet-link) lives in rb-tokens.css and
   loads before this file.

   Scoped to .rb-page--home so nothing here can leak.

   Source of truth for the design:
     https://rb-website-omega.vercel.app/homepage.html
   ========================================================= */

/* ============ THEME OVERRIDES (front page only) ============ */
/* Theme uses a fixed <header class="banner"> and offsets every page
   with `body { padding-top: 90px }` to make room for it. On the
   homepage we want the hero to fill from the very top of the viewport
   with the fixed header floating over it. Kill the body padding and
   every wrapper padding above the hero. */
body.home {
    padding-top: 0 !important;
}
body.home #app,
body.home main#main,
body.home main.main,
body.home .rb-page,
body.home .rb-page--home {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Kill sub-nav / breadcrumbs / any empty element the theme renders */
body.home .page-nav,
body.home .page-navigation,
body.home .breadcrumbs,
body.home .breadcrumb-wrap,
body.home #breadcrumbs {
    display: none !important;
}

/* ============ HERO ============
   Fixed-height immersive container. Image fills via object-fit: cover,
   which crops top/bottom or left/right as needed depending on the
   image's natural aspect. Adjust height / min-height / max-height
   values below to change how tall the hero feels. */
.rb-page--home .hero {
    position: relative;
    width: 100%;
    height: 92vh;              /* fills 92% of viewport height */
    min-height: 720px;         /* never shorter than 720px */
    max-height: 1100px;        /* never taller than 1100px on huge monitors */
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    line-height: 0;
    background: transparent;
}
.rb-page--home .hero .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
}

/* ============ SELECTED WORK — magazine grid ============ */
.rb-page--home .work {
    max-width: none;
    padding: 40px 0 56px;
    margin: 0;
}
.rb-page--home .work-eyebrow {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px 16px;
}
.rb-page--home .work-eyebrow .eyebrow { margin-bottom: 0; }
.rb-page--home .work-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(40px, auto);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}
.rb-page--home .work-grid > a {
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
/* Padding-bottom trick to enforce aspect ratio.
   4:3 = height is 75% of width. More reliable than aspect-ratio
   when theme CSS may override img heights. */
.rb-page--home .project-image {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 75%;
    background-color: var(--rb-bg-alt);
    overflow: hidden;
    transition: opacity 0.4s ease;
}
.rb-page--home .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;
}
/* p-full uses 16:9 → height is 56.25% of width */
.rb-page--home .p-full .project-image { padding-bottom: 56.25%; aspect-ratio: auto; }
.rb-page--home .p-tall .project-image { padding-bottom: 133.33%; aspect-ratio: auto; } /* 3:4 */
.rb-page--home .work-grid > a:hover .project-image { opacity: 0.9; }
.rb-page--home .project-meta {
    padding-top: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
}
.rb-page--home .p-full       { grid-column: span 12; }
.rb-page--home .p-full .project-image { aspect-ratio: 16/9; }
.rb-page--home .p-half       { grid-column: span 6; }
.rb-page--home .p-third      { grid-column: span 4; }
.rb-page--home .p-two-thirds { grid-column: span 8; }
.rb-page--home .p-tall .project-image { aspect-ratio: 3/4; }

/* ============ PRACTICE ============ */
.rb-page--home .practice {
    max-width: 1400px;
    margin: 0 auto;
    padding: 56px 48px;
}
.rb-page--home .practice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.rb-page--home .practice-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}
.rb-page--home .practice-image {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 133.33%; /* 3:4 portrait */
    background-color: var(--rb-bg-alt);
    overflow: hidden;
    margin-bottom: 16px;
    transition: opacity 0.4s ease;
}
.rb-page--home .practice-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--home .practice-tile:hover .practice-image { opacity: 0.9; }
.rb-page--home .practice-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rb-ink);
}

/* ============ STUDIO + MONOGRAPH PAIR ============ */
.rb-page--home .quiet-pair {
    max-width: 1400px;
    margin: 0 auto;
    padding: 56px 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}
/* .quiet-card is now an <a> — make it behave like a block card
   and inherit color so the copy inside doesn't turn link-blue. */
.rb-page--home .quiet-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.4s ease;
}
.rb-page--home .quiet-card:hover { opacity: 0.85; }
.rb-page--home .quiet-card .eyebrow { margin-bottom: 24px; }
.rb-page--home .quiet-image {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 75%; /* 4:3 */
    background-color: var(--rb-bg-alt);
    overflow: hidden;
    margin-bottom: 24px;
}
.rb-page--home .quiet-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--home .quiet-copy {
    font-size: 14px;
    color: var(--rb-ink-soft);
    max-width: 460px;
    line-height: 1.65;
    margin: 0;
}

/* ============ IN THE PRESS — adaptive 4-col grid ============ */
.rb-page--home .press {
    max-width: 1400px;
    margin: 0 auto;
    padding: 56px 48px;
}
.rb-page--home .press-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    align-items: start;
    /* The theme's Customizer CSS targets .press-grid for the /press/
       page with `padding: 40px 100px 60px; column-count: 3; column-gap: 40px`.
       We override each of those explicitly so the homepage grid matches
       the Practice grid exactly. */
    padding: 0 !important;
    column-count: unset !important;
    gap: 24px !important;
    row-gap: 24px !important;
    column-gap: 24px !important;
}
.rb-page--home .press-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}
/* Uniform 4:5 portrait tile using padding-bottom trick.
   object-fit: cover fills the entire tile with the image — all
   four boxes render at identical dimensions. Some edge cropping
   is inevitable when images have different natural aspects. 4:5
   was chosen because it matches most magazine cover/spread aspects
   used as press featured images, keeping cropping minimal. */
.rb-page--home .press-tile__image {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 125%; /* 4:5 portrait */
    background-color: var(--rb-bg-alt);
    overflow: hidden;
    margin-bottom: 12px;
    transition: opacity 0.4s ease;
}
.rb-page--home .press-tile__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--home .press-tile:hover .press-tile__image { opacity: 0.9; }
.rb-page--home .press-outlet {
    font-size: 12px; /* matches .project-name size on Selected Work tiles */
    font-weight: 500;
    letter-spacing: 0.08em; /* also matches .project-name spacing */
    text-transform: uppercase;
    color: var(--rb-ink);
    margin-bottom: 6px;
}
.rb-page--home .press-title {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--rb-ink);
}

/* (Newsletter footer fixes moved to rb-global.css so they apply
   site-wide, not just on the homepage.) */

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    /* Hero — desktop min-height was 720px which is way too tall on
       mobile. Cap to a comfortable phone-friendly range. */
    .rb-page--home .hero {
        height: 60vh !important;
        min-height: 380px !important;
        max-height: 560px !important;
    }
    .rb-page--home .work { padding: 32px 0; }
    .rb-page--home .work-eyebrow,
    .rb-page--home .work-grid { padding-left: 24px; padding-right: 24px; }
    .rb-page--home .work-grid { grid-template-columns: 1fr; gap: 32px; }
    .rb-page--home .p-full,
    .rb-page--home .p-half,
    .rb-page--home .p-third,
    .rb-page--home .p-two-thirds { grid-column: span 1; }
    .rb-page--home .p-full .project-image { aspect-ratio: 4/3; }
    .rb-page--home .practice { padding: 32px 24px; }
    .rb-page--home .practice-grid { grid-template-columns: repeat(2, 1fr); }
    .rb-page--home .quiet-pair {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 32px 24px;
    }
    .rb-page--home .press { padding: 32px 24px; }
    /* Force 2×2 grid on mobile — base rule uses !important, so we
       need !important here too to override. */
    .rb-page--home .press-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}