/* =========================================================
   R+B Design System — Practice / Collection Grid Page
   -----------------------------------------------------------
   Applies to any Page assigned the "Practice Grid (R+B)"
   template. Used on:
     /residential/  /hospitality/  /commercial/  /interior/

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

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

/* ---- Kill theme wrappers that push content down (keep .page-nav —
   that's the RESIDENTIAL | HOSPITALITY | COMMERCIAL | INTERIORS
   sub-nav bar the theme renders on each practice page) ---- */
body.page-template-rb-practice main#main,
body.page-template-rb-practice main.main,
body.page-template-rb-practice .rb-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* (Sub-nav sticky-top offset fix lives in rb-global.css so it
   applies site-wide — every page that has a sub-nav needs it,
   not just Practice pages.) */

/* ---- Page title band ----
   Kept as a visually-hidden H1 for SEO/accessibility only — the
   sub-nav's active item already tells the user which page they're
   on visually, so no need to repeat it as a big heading. */
.rb-page--practice .page-title {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Optional intro paragraph above the grid ---- */
.rb-page--practice .page-intro {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 48px 24px;
}
.rb-page--practice .page-intro p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--rb-ink);
    margin: 0;
}

/* ---- Magazine grid — 12 columns ----
   Top padding is 0 — the theme's .page-nav already has bottom
   padding, so any extra here creates an obvious gap between the
   sub-nav and the first tile. ---- */
.rb-page--practice .collection {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px 96px;
}

/* Kill the sub-nav's bottom padding so the first tile sits close
   under it, matching the tight spacing on the current live site.
   Theme's Customizer CSS sets `.page-nav__menu { padding: 20px 0 !important }`
   — we override with higher specificity + !important. */
html body.page-template-rb-practice .page-nav,
html body.page-template-rb-practice .page-nav__menu,
html body.page-template-rb-practice nav.page-nav ul.page-nav__menu {
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
}

/* Nuke every wrapper that could be adding vertical space between
   the sub-nav and the first collection tile. Cover Sage layout
   wrappers (#app, .wrap, .container) plus the standard theme
   wrappers (main, .rb-page). */
/* Narrowed to specific wrappers so we don't accidentally zero out
   padding/margin on the site header or the sub-nav — both live as
   direct children of #app and would otherwise be flattened by the
   old `#app > *` selector, which broke header height and the
   sub-nav's `is-visible` margin-top offset. */
html body.page-template-rb-practice #app,
html body.page-template-rb-practice .wrap,
html body.page-template-rb-practice .container,
html body.page-template-rb-practice main#main,
html body.page-template-rb-practice main.main,
html body.page-template-rb-practice .rb-page,
html body.page-template-rb-practice .rb-page--practice,
html body.page-template-rb-practice .page-nav + *,
html body.page-template-rb-practice main#main > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Final defense — pull the collection grid up if any residual gap
   remains from something we haven't targeted. Small negative margin
   is safe; it won't cover the sub-nav (which is sticky at top: 118px). */
html body.page-template-rb-practice .rb-page--practice .collection {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.rb-page--practice .collection-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(40px, auto);
    gap: 28px;
}
.rb-page--practice .collection-grid > a {
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* ---- Tile image container — padding-bottom trick for uniform,
       theme-resistant aspect ratios (same pattern as homepage) ---- */
.rb-page--practice .project-image {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 75%; /* default 4:3 */
    background-color: var(--rb-bg-alt);
    overflow: hidden;
    transition: opacity 0.4s ease;
}
.rb-page--practice .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--practice .collection-grid > a:hover .project-image { opacity: 0.9; }

/* ---- Tile meta (name + location) — inherits .project-name / .project-loc
       styling from rb-tokens.css ---- */
.rb-page--practice .project-meta {
    padding-top: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
}

/* ---- Grid-span classes — magazine rhythm ---- */
.rb-page--practice .t-full        { grid-column: span 12; }
.rb-page--practice .t-full .project-image        { padding-bottom: 56.25%; } /* 16:9 */

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

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

.rb-page--practice .t-third       { grid-column: span 4; }
/* Default .t-third is landscape (3:2) — most R+B featured images are
   horizontal architecture shots and a portrait crop cuts too much off
   the top and bottom. Rows of three thirds now render as a landscape
   trio that respects the source photography. */
.rb-page--practice .t-third .project-image       { padding-bottom: 66.67%; } /* 3:2 landscape */

/* ---- Tall modifier — combine with .t-third for a portrait accent
   in the magazine spread rows (e.g. .t-twothirds + .t-third.t-tall).
   Overrides the .t-third default aspect above. ---- */
.rb-page--practice .t-tall .project-image        { padding-bottom: 133.33%; } /* 3:4 */

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    .rb-page--practice .page-title { padding: 36px 24px 20px; }
    .rb-page--practice .page-intro { padding: 0 24px 20px; }
    .rb-page--practice .collection { padding: 12px 24px 64px; }
    .rb-page--practice .collection-grid { gap: 20px; grid-template-columns: 1fr; }
    .rb-page--practice .t-full,
    .rb-page--practice .t-half,
    .rb-page--practice .t-third,
    .rb-page--practice .t-twothirds { grid-column: span 1; }
    .rb-page--practice .t-full .project-image,
    .rb-page--practice .t-twothirds .project-image { padding-bottom: 66.67%; } /* 3:2 landscape */
    .rb-page--practice .t-half .project-image { padding-bottom: 75%; }         /* 4:3 landscape */
    .rb-page--practice .t-third .project-image { padding-bottom: 66.67%; }     /* 3:2 landscape */
    /* Only tiles explicitly marked t-tall stay portrait on mobile —
       plain t-third tiles keep the landscape aspect their photos want. */
    .rb-page--practice .t-tall .project-image { padding-bottom: 125%; }        /* 4:5 portrait */
}