/* ══════════════════════════════════════════════════════════════════
   MOBILE.CSS — all viewport-conditional rules for the site live here.
   Loaded LAST on every page (after style.css and pages.css), so these
   rules reliably win the cascade instead of being silently overridden
   by an unconditional rule elsewhere in the file order — the exact bug
   that kept recurring when mobile rules were mixed into style.css/
   pages.css. Keep it that way: nothing in style.css/pages.css should
   declare an unconditional override for anything handled here.

   Primary breakpoint: 768px (phone/small tablet).
   Nav collapse breakpoint: 960px (matches the existing desktop pill
   design, where center nav + right buttons have room to live).
   ══════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   HEADER — collapse to hamburger + logo only
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .site-header-center,
  .site-header-right {
    display: none;
  }
}


/* ────────────────────────────────────────────────────────────────
   NAV DRAWER — full-screen on mobile instead of the desktop
   floating two-column pill drawer
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Override the desktop clip-path reveal mechanism entirely —
     on mobile the drawer is full-screen and uses opacity+pointer-events
     instead of clip-path so it doesn't get clipped off-screen */
  .nav-drawer {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    border-radius: 0;
    grid-template-columns: 1fr;
    clip-path: none !important;
    transform: none !important;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9998;
  }

  .nav-drawer.open {
    clip-path: none !important;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  /* Header sits above the drawer so it's always visible;
     hamburger turns to X on top of the open dark overlay */
  .site-header {
    z-index: 9999 !important;
  }

  /* Contact/image panel: hidden on mobile */
  .nd-panel {
    display: none;
  }

  .nd-links {
    padding: 100px 32px 120px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Contact link at bottom of mobile drawer */
  .nd-mobile-contact {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .nd-mobile-contact a {
    font-family: var(--sans);
    font-size: 15px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .nd-mobile-contact a:hover { color: #fff; }

  .nd-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  .nd-nav a {
    font-size: 26px;
    padding: 14px 0;
  }

  /* Hamburger → white X when drawer open on mobile */
  .hamburger.open span {
    background: #ffffff;
  }

  /* Envelope contact icon: only on mobile header */
  .hdr-contact-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--dark);
    text-decoration: none;
    flex-shrink: 0;
  }
}


/* ────────────────────────────────────────────────────────────────
   MOBILE STICKY BOTTOM BAR — Apply Now / Member Login
   Only shown below the nav-collapse breakpoint, since desktop has
   the header buttons instead.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .mobile-sticky-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: #1a1815;
  }
}

@media (min-width: 961px) {
  .mobile-sticky-bar {
    display: none;
  }
}

.msb-btn {
  flex: 1;
  text-align: center;
  padding: 16px 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.msb-btn-dark {
  background: #ffffff;
  color: #1a1815;
}

.msb-btn-ghost {
  background: #1a1815;
  color: #ffffff;
  border-left: 1px solid rgba(255,255,255,0.15);
}

/* Give the page bottom padding on mobile so the sticky bar never
   covers the footer/last section content */
@media (max-width: 960px) {
  body {
    padding-bottom: 54px;
  }
}


/* ────────────────────────────────────────────────────────────────
   SITE-WIDE FULL-BLEED — hero, footer, page wrapper go edge to
   edge on mobile instead of the desktop rounded-card treatment
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page {
    padding: 8px 0;
    gap: 8px;
  }
  .hero-bg {
    border-radius: 0;
  }
  .site-footer {
    border-radius: 0;
    padding: 56px 20px 40px;
  }
  .page-hero,
  .page-hero--dark {
    border-radius: 0 0 12px 12px;
    padding-left: 24px;
    padding-right: 24px;
  }
}


/* ────────────────────────────────────────────────────────────────
   HOW-IT-WORKS — page-specific mobile treatment
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hero title: relax the desktop nowrap, drop to a size that fits */
  .page-hero-title { font-size: 34px; }
  .page-hero-title--nowrap { white-space: normal; }

  /* contact.php / apply.php use their own hero-headline classes instead
     of .page-hero-title — same treatment so they match every other
     inner-page hero on mobile instead of staying at their fixed 80px. */
  .contact-headline,
  .apply-headline {
    font-size: 34px;
  }

  /* Hero background image: shift crop left so the building on the left
     side of the source photo stays visible instead of being cropped
     off when the wide desktop image is cover-cropped on a phone. */
  .hiw-hero-img {
    object-position: left center !important;
  }

  /* CTA title: keep nowrap but shrink to fit instead of overflowing */
  .cta-block-title {
    font-size: clamp(20px, 6.8vw, 34px);
  }

  /* Appreciation heading: force onto one line by shrinking rather than wrapping */
  .section-appreciation .section-intro {
    white-space: nowrap;
    font-size: clamp(9px, 3.6vw, 15px);
    max-width: 100%;
  }

  /* Every section on this page carries the desktop 80px/64px
     padding — cut side padding down across the board */
  .section-steps,
  .section-portal,
  .section-asset-case,
  .section-cta-block {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Step numbers above text instead of beside it */
  .step-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .step-number {
    font-size: 32px;
  }

  /* Featured Application step: stack number/text/image, image full width */
  .step-item--featured {
    grid-template-columns: 1fr;
  }
  .step-featured-img {
    min-height: 0;
    height: 200px;
    margin-top: 8px;
  }

  /* Steps 02–07: single column instead of 2-across */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .steps-grid .step-item:nth-last-child(-n+2) {
    border-bottom: 1px solid rgba(27,24,21,0.08);
  }
  .steps-grid .step-item:last-child {
    border-bottom: none;
  }

  /* Member Portal cards: single column instead of 3-across */
  .portal-grid {
    grid-template-columns: 1fr;
  }

  /* Asset Class Case cards: same — single column, full-width heading */
  .asset-grid {
    grid-template-columns: 1fr;
  }
  .section-asset-case .section-intro {
    max-width: 100%;
  }

  /* Preconstruction Appreciation (chart section): remove on mobile */
  .section-appreciation {
    display: none;
  }
}

/* ── Desktop: hide mobile-only elements ── */
@media (min-width: 769px) {
  .hdr-contact-mobile { display: none; }
  .nd-mobile-contact  { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE BORDER-RADIUS & PADDING — consistent treatment on mobile
   Containers: 4px | Cards: 8px
   All text sections: 24px left/right padding
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Containers (section-level boxes) → 4px ── */
  .hero,
  .section-steps,
  .section-tiles,
  .section-stats,
  .section-member-access,
  .section-profiles,
  .section-portal,
  .section-asset-case,
  .section-cta-block,
  .section-content,
  .section-profiles-page,
  .section-news,
  .avatar-nav-section,
  .section-appreciation,
  .contact-body,
  .contact-hero,
  .apply-hero,
  .apply-body,
  .site-footer {
    border-radius: 4px !important;
  }

  /* ── Cards → 8px ── */
  .tile,
  .stat-block,
  .profile-tile,
  .portal-card,
  .asset-card,
  .profile-page-card,
  .news-featured,
  .news-card,
  .step-featured-img,
  .hero-img-frame {
    border-radius: 8px !important;
  }

  /* ── Consistent 16px left/right padding on all text-carrying sections ── */
  .hero,
  .section-steps,
  .section-tiles,
  .section-stats,
  .section-member-access,
  .section-profiles,
  .section-portal,
  .section-asset-case,
  .section-cta-block,
  .section-content,
  .section-profiles-page,
  .section-news,
  .section-steps,
  .contact-body,
  .contact-hero,
  .apply-hero,
  .apply-body {
    padding: 40px 16px !important;
  }

  /* avatar-nav-section ("Other Profiles") is a tight link strip on desktop
     (8px 0 4px), not a full padded section — give it the same 16px side
     margins as everything else but keep it close top/bottom instead of
     stacking a full 40px on top of the CTA block's own 40px above it. */
  .avatar-nav-section {
    padding: 16px 16px 32px !important;
  }

  /* apply-hero / contact-hero use a min-height + negative-margin bleed
     technique that doesn't need the full 550px on a phone screen */
  .apply-hero,
  .contact-hero {
    min-height: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL CONTENT STACKING — all multi-column layouts go to 1 column
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Cancel ALL white-space: nowrap across the whole site on mobile ──
     This is the primary cause of horizontal overflow on phone screens.
     Every nowrap declaration — on hero titles, buttons, nav links,
     taglines, CTA titles — must be relaxed here. */
  .page-hero-title,
  .page-hero-title--nowrap,
  .cta-block-title,
  .contact-headline,
  .apply-headline,
  .hdr-nav-links a,
  .hdr-tagline,
  .btn,
  .btn-ghost,
  .btn-white,
  .hdr-btn-ghost,
  .hdr-btn-dark,
  .footer-btn-white,
  .tab-btn,
  .hero-bg-tagline,
  .member-access-title,
  .section-intro,
  h1, h2, h3, h4, p {
    white-space: normal !important;
  }

  /* ── Homepage hero: dead center on mobile ── */
  .hero-bg-bottom {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: none;
    text-align: center;
  }
  .hero-bg-bottom h2 {
    font-size: clamp(32px, 9vw, 60px);
  }
  .hero-bg-tagline {
    font-size: clamp(16px, 4.5vw, 22px);
  }

  /* ── Homepage hero: stack text above image ── */
  .hero {
    flex-direction: column;
    max-height: none;
    min-height: 0;
    padding: 32px 24px;
  }
  .hero-left {
    flex: none;
    width: 100%;
    padding: 0 0 32px;
  }
  .hero-right {
    flex: none;
    width: 100%;
    max-height: 300px;
    padding: 0;
  }
  .hero-img-frame {
    height: 300px;
  }

  /* ── Tile grid: 3-col → 1-col ── */
  .tiles-grid {
    grid-template-columns: 1fr;
  }

  /* ── Stats grid: 2-col → 1-col, no overflow ── */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* ── Profiles grid (homepage 4 tiles): → 1-col ── */
  .profiles-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* ── Track record: stack copy above stats ── */
  .track-record-inner {
    flex-direction: column;
    gap: 32px;
  }
  .track-record-copy {
    flex: none;
    max-width: 100%;
  }
  .track-record-inner .stats-grid {
    flex: none;
    width: 100%;
    grid-template-columns: 1fr;
  }

  /* ── Member access: fix max-width and body text on mobile ── */
  .section-member-access {
    min-height: 0;
    padding: 48px 24px;
  }
  .member-access-content {
    max-width: 100% !important;
    padding: 48px 0 0 0;
  }
  .member-access-body {
    max-width: 100% !important;
    line-height: 1.65;
  }

  /* ── Content split: 2-col → 1-col ── */
  .content-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .content-split-right {
    padding-top: 0 !important;
  }

  /* ── Profile page grids (investors/referral etc): 2-col → 1-col ── */
  .profile-page-grid {
    grid-template-columns: 1fr;
  }
  .profile-page-card {
    padding: 32px 24px;
  }

  /* ── Portal / asset grids: → 1-col ── */
  .portal-grid,
  .asset-grid {
    grid-template-columns: 1fr;
  }

  /* ── News: featured card stack, grid → 1-col ── */
  .news-featured {
    grid-template-columns: 1fr;
  }
  .news-featured-img {
    height: 220px;
  }
  .news-featured-body {
    padding: 24px;
  }
  .news-grid {
    grid-template-columns: 1fr;
  }

  /* ── Contact split: → 1-col, name row → 1-col ── */
  .contact-split,
  .apply-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }

  /* ── Footer inner: stack columns ── */
  .footer-inner {
    flex-direction: column;
    gap: 40px;
  }
  .footer-nav {
    flex-wrap: wrap;
    gap: 32px 24px;
  }
  .footer-ctas-col {
    flex-direction: column;
    width: 100%;
  }
  .footer-ctas-col a {
    width: 100%;
    justify-content: center;
  }

  /* ── Section padding: 64px sides → 24px, border-radius reduced ── */
  .section-content,
  .section-tiles,
  .section-profiles-page,
  .section-news,
  .contact-body {
    padding-left: 24px !important;
    padding-right: 24px !important;
    border-radius: 12px;
  }

  /* ── Appreciation chart: hidden on mobile ── */
  .section-appreciation {
    display: none;
  }

  /* ── CTA block: reduce padding, let title wrap ── */
  .section-cta-block {
    padding: 48px 24px;
    border-radius: 12px;
  }
  .cta-block-title {
    font-size: clamp(26px, 7vw, 36px);
  }
  .cta-block-inner {
    max-width: 100%;
  }
}

/* ── Body copy: 17px desktop → 15px mobile ── */
@media (max-width: 768px) {
  .content-body,
  .step-body,
  .tile-body,
  .member-access-body,
  .track-record-body,
  .portal-body,
  .asset-body,
  .cta-block-sub,
  .page-hero-sub,
  .hero-sub,
  .stat-desc,
  .profile-tile-body,
  .profile-page-body,
  .news-card-title,
  p {
    font-size: 15px !important;
    line-height: 1.7;
  }
  .footer-disclaimer {
    font-size: 12px !important;
    line-height: 1.6;
  }
}

/* ── Tile cards: kill the desktop min-height + margin-top:auto combo
   that was pushing label/heading/body down to the bottom of a tall
   card, creating a huge empty gap up top. Also gives the heading its
   own mobile size instead of matching the body-copy 15px above. ── */
@media (max-width: 768px) {
  .tile {
    min-height: 0;
    padding: 32px 28px;
  }
  .tile-heading {
    margin-top: 16px;
    margin-bottom: 10px;
    font-size: 22px !important;
  }
  .tiles-grid {
    gap: 12px;
  }
}

/* ── Section headings: consistent size on mobile. section-intro and
   hero-headline both bottom out at 30px via clamp(); member-access-title
   and news-title were outliers still clamping to 36px / 28px minimums. ── */
@media (max-width: 768px) {
  .member-access-title {
    font-size: 30px !important;
    line-height: 1.2;
  }
  .news-title {
    font-size: 30px !important;
  }
}

/* ── Mobile header: 5px from top when scrolled ── */
@media (max-width: 960px) {
  .site-header.scrolled {
    top: 5px;
  }
  /* When drawer open, header stays at 5px from top with white pill intact */
  .site-header.drawer-open {
    top: 5px;
  }
  /* Hamburger spans turn white so X is readable against dark drawer */
  .site-header.drawer-open .hamburger span {
    background: #1b1815;
  }
  /* The desktop "State 3" tagline (shown centered over the header when
     the drawer opens from a scrolled state) has no room on mobile and
     overlaps the logo text. Nav links are already hidden on mobile
     (site-header-center display:none above), so this tagline serves
     no purpose here — keep it hidden in every state. */
  .site-header.scrolled.drawer-expanded .hdr-tagline,
  .hdr-tagline {
    display: none !important;
  }
}

/* ── Avatar pages (/group/*.php): Why-grid + Relationship flow ──
   Desktop CSS (avatar-sections.css) uses fixed minimums (420px grid
   columns, 210px flow-steps) with 60px section padding — all of which
   force horizontal overflow below ~900px. Collapse to single column
   and site-standard mobile section padding. ── */
@media (max-width: 768px) {
  .section-avatar-why,
  .section-avatar-relationship {
    padding: 40px 16px;
  }

  .section-avatar-why h2,
  .section-avatar-relationship h2 {
    font-size: 30px;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .relationship-flow {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin: 40px 0 40px;
  }

  .flow-step {
    width: auto;
    max-width: 240px;
  }

  /* Connector lines only make sense running horizontally between
     steps — hide them once steps stack vertically */
  .flow-line {
    display: none;
  }

  /* "Other Profiles" nav grid was still running its desktop 4-column
     layout on mobile with no collapse rule at all — cards were
     overflowing off the right edge of the screen. */
  .avatar-nav-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}