/* ===================================================================
   Article + aside page layout stylesheet.
   The full visual treatment for the two-column article/aside shell: the page
   background, the .detail-left / .detail-right lift, the .hero-section banner,
   the .detail-page-header / .detail-content__body identity cards, and the
   breadcrumb band.
   Loaded by app/views/webfront/templates/listing_2040/layouts/article-aside-layout.volt
   (headStyles), so every rule here is automatically scoped to pages using that
   layout (listing detail + microsite detail).
   =================================================================== */

/* Page background — soft light grey so the lifted white cards
   (.detail-left card / .detail-content__body / contact sidebar) read as
   distinct layers instead of melting into a white page. Scoped automatically:
   this stylesheet only loads via article-aside-layout.volt. */
body {
    background-color: var(--color-neutral-100); /* #f3f4f6 */
}

/* === Hero shell metrics — COUPLED, read the constraint =====================
   The band height and how far the content column lifts up into it are linked:
   the title sits at (band_bottom − lift), so the band must stay tall enough that
   the title clears the breadcrumb pinned at the band's top. Shortening
   --hero-band-h pulls the title UP toward the breadcrumb — that overlap is why
   the article's compact band has a ~45vh floor on desktop (article-detail.css)
   and reverts to 60vh on mobile, where the article lift is larger (-25rem).
   Tune these here, not inline. ============================================== */
:root {
    --hero-band-h: 60vh;           /* hero band / banner min-height */
    --detail-lift: -22rem;         /* desktop: base column + sidebar lift */
    --detail-article-lift: -29rem; /* desktop: article/microsite column (lifts higher) */
    --lift-reserve: 2rem;          /* hero__inner bottom padding — reserves the lift */
}
@media (min-width: 1024px) {
    :root { --lift-reserve: 11rem; }
}
@media (max-width: 1023px) {
    :root { --detail-article-lift: -25rem; }
}

.hero-section {
    position: relative;
    min-height: var(--hero-band-h);
    background-size: cover;
    background-position: center;
    background-color: #9ca3af; /* fallback grey when no bg image */
}

/* ===================================================================
   Empty-state (displayHeroSection OFF) — IDENTICAL to the image hero,
   just a SOLID brand-color background instead of a photo. It inherits the
   shell height, the article lift, the transparent header over it, and the
   body card from the base rules below — nothing special. */
.hero-section--band {
    background-image: none !important;
    background-color: var(--brand-primary, var(--primaryColor, #0f1a2c));
}
/* Photos button auto-hides (no images); share button still works if present. */

/* Mobile: tighten the gap between hero and breadcrumb.
   Hero markup uses Tailwind `mb-16` (4rem) which is right for desktop side-by-
   side layout but too airy on mobile stacked layout. */
@media (max-width: 1023px) {
    .hero-section.mb-16 { margin-bottom: 1rem; }
}

/* Entity nav bar — match the site header's wrapper (16px edge padding, no
   max-width constraint) so its logo aligns with the site header logo. */
.tab-scroll-nav .container {
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
}

/* ===================================================================
   Desktop: nav-bar logo becomes a large white "plaque" that overflows
   downward into the hero banner. Anchored at top of the nav; extends
   below the nav baseline so the brand mark visually spans both zones.
   Mobile/tablet: logo stays as a normal small mark inside the nav. */
@media (min-width: 1024px) {
    /* Let the logo plaque escape the nav-bar's clipping. On desktop the menu
       fits without horizontal scroll, so overflow:visible is safe here. */
    .tab-scroll-nav { overflow: visible; }

    /* Logo wrapper: anchor only — reserves horizontal space so the menu
       beside it doesn't collapse leftward when we absolute-position the <a>. */
    .tab-scroll-nav .h-full.shrink-0.py-1 {
        position: relative;
        min-width: 280px;
        padding: 0;
    }

    /* The white plaque itself: vertically CENTERED on the nav's bottom border
       so the divider line cuts exactly through its middle. `top: 100%` puts
       its top at the nav baseline, then `translateY(-50%)` shifts it up by
       half its own height. Half visually sits in the nav, half overflows into
       the hero — like a hanging-tag effect. */
    .tab-scroll-nav .h-full.shrink-0.py-1 > a {
        position: absolute;
        top: 100%;
        left: 0;
        transform: translateY(-50%);
        height: auto;
        align-items: center;
        background: #fff;
        padding: 1rem 1.5rem;
        border-radius: .5rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
        z-index: 30;
        transition: top .3s ease, transform .3s ease, padding .3s ease,
                    box-shadow .3s ease, background-color .3s ease;
    }

    /* Logo image — break free of the h-full constraint to actually grow. */
    .tab-scroll-nav .h-full.shrink-0.py-1 img {
        height: auto !important;
        max-width: 260px !important;
        max-height: 96px !important;
        transition: max-width .3s ease, max-height .3s ease;
    }

    /* Collapsed state — toggled by JS when window.scrollY > threshold.
       Plaque shrinks AND re-centers itself inside the nav (top: 50% instead of
       100%) so the whole logo sits within the nav baseline, no longer overflowing. */
    .tab-scroll-nav.is-scrolled .h-full.shrink-0.py-1 > a {
        top: 50%;
        padding: .25rem .5rem;
        box-shadow: none;
        background: transparent;
    }
    .tab-scroll-nav.is-scrolled .h-full.shrink-0.py-1 img {
        max-width: 150px !important;
        max-height: 48px !important;
    }

}


.hero-section__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 40%, transparent 70%);
}

/* Action buttons (share + favorite) — pinned to the banner's FAR RIGHT edge
   (the markup is a direct child of .hero-section, so `right` anchors to the
   banner, not the centered container). Symmetric with the plaque +
   breadcrumb on the far LEFT edge: 1.5rem from the edge matches the
   breadcrumb band's side padding. z-index 20 keeps it above the breadcrumb
   gradient band (z-index 15). Scrolls out with the banner (not pinned). */
.hero-section__actions {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 20;
    display: flex;
    /* Vertical stack — share on top, favorite heart below, both hugging the
       right edge. (Pages with a single action, e.g. listing detail's photos
       button, are unaffected by the direction.) */
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

.hero-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    background: rgba(255, 255, 255, .95);
    color: #1a1a1a;
    border: none;
    border-radius: 9999px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background-color .2s, transform .2s;
}

.hero-action-btn:hover {
    background: #fff;
    transform: translateY(-1px);
}

/* The share button is its own .share partial — we just style the inner
   .share-trigger to match the pill look of the other hero-action-btn. */
.hero-action-btn--share { padding: 0; background: transparent; box-shadow: none; }
.hero-action-btn--share:hover { background: transparent; transform: none; }

.hero-action-btn--share .share-trigger {
    padding: .5rem;            /* equal padding → icon-only circle */
    background: rgba(255, 255, 255, .95);
    color: #1a1a1a;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background-color .2s, transform .2s;
}

.hero-action-btn--share .share-trigger:hover {
    background: #fff;
    color: #1a1a1a;
    transform: translateY(-1px);
}

/* Icon only — hide the "Share" label. */
.hero-action-btn--share .share-trigger span { display: none; }

/* Favorite heart in the banner action row — the component's base styling
   (favorite.css) pins .favorite absolutely to a card's corner; here it sits
   in-flow next to the share button, sized to match the 40px share circle. */
.hero-action-btn--favorite .favorite {
    position: static;
    width: 40px;
    height: 40px;
    padding: 8px;
}

/* "View all photos" when rendered in the page header (below the fact
   pills) instead of the banner's action row. */
.detail-page-header__photos { margin-top: 1rem; }

.hero-action-btn svg {
    flex-shrink: 0;
}

.hero-section__inner {
    position: relative;
    min-height: var(--hero-band-h);
    padding-top: 1rem;
    padding-bottom: var(--lift-reserve);  /* 2rem mobile, 11rem desktop (see :root) */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2rem;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .hero-section__inner {
        padding-top: 1.5rem;
        /* padding-bottom comes from var(--lift-reserve) → 11rem on desktop (see :root) */
    }
}

/* (Banner identity-text rules removed — the hero is image-only; identity
   renders in the article via .detail-page-header. See partials/page-header.volt.) */


/* === Breadcrumb band — top-left of banner ===============================
   Full-width gradient strip across the TOP of the hero banner; breadcrumb
   LEFT-aligned (reading order). Lives inside .hero-section (position:
   relative) so it pins cleanly to the banner's top edge — no negative-top
   hacks. White text on a subtle dark-to-transparent gradient so it reads
   over any banner image. */
.hero-section__breadcrumb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
    padding: .875rem 1.5rem 2.5rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
.hero-section__breadcrumb > * { pointer-events: auto; }

/* Override the global breadcrumb chrome: kill its own padding (band pads
   already) and let it overflow (no clipping). Left-aligned by default. */
.hero-section__breadcrumb .breadcrumb { padding: 0; }
.hero-section__breadcrumb .breadcrumb-list { overflow: visible; }

/* White text + faded links so the trail reads over the banner image. */
.hero-section__breadcrumb a,
.hero-section__breadcrumb span {
    color: #fff;
}
.hero-section__breadcrumb a {
    text-decoration: none;
    opacity: .9;
    transition: opacity .2s;
}
.hero-section__breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.hero-section__breadcrumb svg { color: rgba(255, 255, 255, .7); }

/* Desktop: the nav-bar logo plaque hangs ~64px down into the banner's
   top-left. Clear it VERTICALLY (same treatment as 2047): the trail keeps
   its natural left-edge position, sitting just below the hanging plaque.
   Scoped with body:has(.detail-nav) — when the nav bar is hidden (menu-less
   microsite) there is no plaque to clear, so the breadcrumb stays at the
   banner's top edge. Mobile keeps the logo in the nav (no overflow), no
   clearance needed. */
@media (min-width: 1024px) {
    body:has(.tab-scroll-nav.detail-nav) .hero-section__breadcrumb {
        padding-top: 84px;
    }
}

/* Mobile: the share + heart stack occupies the banner's top-right
   (right: 1.5rem, ~40px wide) — reserve just enough on the breadcrumb's
   right to clear it, and let long trails WRAP onto a second row instead of
   clipping. */
@media (max-width: 1023px) {
    .hero-section__breadcrumb { padding-right: 4.5rem; }
    /* One line: the parent crumbs (Home › Articles ›) keep their size and the
       last crumb (current page name) shrinks + ellipsizes — so a long title no
       longer wraps onto a second row and collides with the H1 below. */
    .hero-section__breadcrumb .breadcrumb-list {
        flex-wrap: nowrap;
        overflow: hidden;
        align-items: center;
    }
    .hero-section__breadcrumb .breadcrumb-list > li { flex-shrink: 0; }
    .hero-section__breadcrumb .breadcrumb-list > li:last-child {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    .hero-section__breadcrumb .breadcrumb-list > li:last-child span {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* === Brand plaque — banner top-left (menu-less microsites) ==============
   The immersive logo card for microsites whose nav bar is hidden (no menu
   items). Sits below the breadcrumb band, mirroring the nav plaque's
   white-card look. Scrolls with the banner. */
.hero-section__brand-plaque {
    position: absolute;
    top: 3.5rem;
    left: 1.5rem;
    z-index: 16;               /* above the breadcrumb gradient band (15) */
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: .75rem 1rem;
    border-radius: .5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.hero-section__brand-plaque img {
    height: auto !important;
    width: auto !important;
    max-height: 56px !important;
    max-width: 170px !important;
    object-fit: contain !important;
}
@media (min-width: 1024px) {
    /* The plaque only renders when the nav bar is hidden — and in that case
       the breadcrumb sits at the banner's top edge (no 84px clearance), so
       the plaque tucks right below the compact breadcrumb row. */
    .hero-section__brand-plaque { top: 4.5rem; left: 2rem; padding: 1rem 1.5rem; }
    .hero-section__brand-plaque img { max-height: 88px !important; max-width: 240px !important; }
}

/* Overlap guard: the plaque anchors from the banner's TOP while the page
   title lifts up from its BOTTOM — with the banner at a viewport-relative
   60vh, short screens let the two collide. When the plaque renders, enforce
   a minimum banner height = lift + plaque bottom edge + breathing gap, so
   the title can never ride into the plaque.
     mobile : 24rem lift + ~8.5rem plaque zone + gap → 34rem
     desktop: 29rem lift + ~12rem  plaque zone + gap → 43rem */
@media (max-width: 1023px) {
    .hero-section:has(.hero-section__brand-plaque) { min-height: max(var(--hero-band-h), 34rem); }
}
@media (min-width: 1024px) {
    .hero-section:has(.hero-section__brand-plaque) { min-height: max(var(--hero-band-h), 43rem); }
}


/* Lift content UP into the hero — DESKTOP ONLY.
   Mobile: no lift. Hero ends, breadcrumb (with its own white .breadcrumb pill)
   appears cleanly below it, then title + content on the page background.
   Desktop: both .detail-left and .detail-right lift to sit side-by-side over
   the hero. On listing detail pages .detail-left gets one white card (whole
   column); on microsite pages it splits into transparent header (over banner)
   + white body card (below) — see overrides further down. */
@media (min-width: 1024px) {
    .hero-section ~ section.tab-scroll > .container > .detail-left,
    .hero-section ~ section.tab-scroll > .container > .detail-right {
        margin-top: var(--detail-lift);
        position: relative;
        z-index: 10;
    }
    .hero-section ~ section.tab-scroll > .container > .detail-left {
        background: #fff;
        border-radius: .75rem;
        padding: 2rem;
        box-shadow: 0 -2px 16px rgba(0, 0, 0, .08);
    }
    /* Microsite pages (image hero AND solid-bg empty-state): lift the ARTICLE
       column ~30% higher into the shell (-22rem → -29rem) so more of its
       transparent header reads over the banner/solid background. The SIDEBAR
       (.detail-right) deliberately keeps -22rem — it is NOT pulled up with
       the article. */
    .hero-section ~ section.tab-scroll > .container > .detail-left:has(#detail-content) {
        margin-top: var(--detail-article-lift);
    }
    /* Microsite override: don't card-wrap the whole .detail-left — its first
       child (.detail-page-header) needs to stay transparent over the banner.
       The card moves to .detail-content__body below the header.
       Also: position:static so the breadcrumb's absolute positioning escapes
       to section.tab-scroll (the next positioned ancestor) and can reach the
       top of the banner via negative top offset. */
    .hero-section ~ section.tab-scroll > .container > .detail-left:has(#detail-content) {
        background: transparent;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
        position: static;
    }
}

/* Mobile: mirror the desktop treatment in a single column. Lift the article
   high so the FIRST section (header) overlays the banner with white text, and
   make the SECOND section (body) a full-bleed white panel — edge-to-edge,
   Airbnb-style. */
@media (max-width: 1023px) {
    /* Lift the whole header (title + subtitle + pills) up so it ALL sits over
       the banner — the body white panel begins at the banner's bottom edge.
       Header text colour/shadow comes from the base rules (white). */
    .hero-section ~ section.tab-scroll > .container > .detail-left:has(#detail-content) {
        /* -25rem: enough lift that the banner image continues comfortably
           past the white sheet's top — the rounded-corner notches must sit
           fully ON the image (Airbnb look), never across the banner's
           bottom edge. */
        margin-top: var(--detail-article-lift);  /* -25rem on mobile (see :root) */
        position: relative;
        z-index: 10;
        background: transparent;
        /* style.css sets .detail-left { overflow: hidden } (legacy
           page-builder guard) — that CLIPS the sheet's 100vw breakout to the
           container width, so the sheet never reached the viewport edges and
           the banner peeked through the side gutters. Lift the clip here;
           the template's html/body overflow-x:hidden baseline still guards
           page-level horizontal overflow. */
        overflow: visible;
    }
    /* First section (header): full-bleed & transparent over the banner. */
    .detail-page-header {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 0 1.25rem 1.25rem;
    }
    /* fact pills keep their base white-on-banner look (no grey override) */

    /* Second section (body): full-bleed white panel, edge-to-edge. Breaks out
       of the container's horizontal padding via the 100vw / calc margins.
       Airbnb-style sheet: generous rounded top corners with the banner image
       showing through the corner notches (no border, no white backing — the
       image continuing behind the sheet IS the look). */
    .detail-content__body {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        background: #fff;
        border-radius: 1.5rem 1.5rem 0 0;
        padding: 1.5rem 1rem;
    }
}


/* === Microsite page header + body (inside <article>) ====================
   The hero overlay used to carry H1 + pageContext suffix + subtitle + fact
   pills. They now live outside the hero overlay. The visual remains "text on
   banner image": the
   article column lifts high, the header section stays TRANSPARENT (so the
   banner image shows through behind H1), and the body section below gets
   the white card. */

/* Header — transparent so banner image shows through. Mobile uses dark text
   (no banner overlap on mobile — appears on page background). Desktop
   switches to white text + shadow so it reads on the banner image. */
.detail-page-header {
    padding: 2rem 2rem .75rem;
}

/* Tighten the gap between the header (photos button row) and the white body
   card. The article's `space-y-8` utility puts margin-top: 2rem on the body;
   the ID selector out-specifies it (the utility's `.space-y-8 > :not() ~
   :not()` selector is (0,3,0)). Together with the header's .75rem bottom
   padding the gap is ~half of the previous 3.5rem. */
#detail-content > .detail-content__body {
    margin-top: 1rem;
}

.detail-page-header__title {
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.detail-page-header__suffix {
    display: block;
    margin-top: .25rem;
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

@media (min-width: 768px) {
    .detail-page-header__title  { font-size: 2rem; }
    .detail-page-header__suffix { font-size: 1.125rem; }
}

.detail-page-header__subtitle {
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    font-size: 1.125rem;
    margin: .5rem 0 0;
}

.detail-page-header__facts {
    display: flex;
    flex-wrap: nowrap;          /* single row */
    gap: .5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;           /* scroll horizontally when pills overflow */
    scrollbar-width: none;      /* hide scrollbar (Firefox) */
    -ms-overflow-style: none;   /* hide scrollbar (IE/old Edge) */
}
.detail-page-header__facts::-webkit-scrollbar { display: none; } /* hide scrollbar (Chrome/Safari) */

.detail-page-header__facts li {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    background: rgba(255, 255, 255, .95);
    color: #1a1a1a;
    border-radius: 9999px;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;             /* keep pill size — overflow (scroll), don't squeeze */
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* Desktop — larger type (text colour/shadow now comes from the base rules,
   which are white because the header always sits over a banner/solid shell). */
@media (min-width: 1024px) {
    .detail-page-header__title  { font-size: 2.5rem; }
    .detail-page-header__suffix { font-size: 1.375rem; margin-top: .375rem; }
    .detail-page-header__facts li { padding: .625rem 1.25rem; font-size: 1rem; }

    /* Flush the header (title / subtitle / fact pills) to the column's LEFT
       edge so it lines up with the white body card's left edge and the byline
       pill — instead of sitting 2rem in. The card keeps its own inner padding,
       so the body text stays indented; only the over-banner header is flush.
       Applies to article / listing / project detail (shared .detail-page-header). */
    .detail-page-header {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Breathing room above the first form field — it used to sit flush under the
   brand heading and read as clipped. Scoped to the aside panel (detail-aside-
   frame) so the full-width contact section is untouched. */
.detail-aside-frame .contact-section-form {
    padding-top: 16px;
}

/* Body — actual page content. Gets the white card only on desktop (matches
   the listing-detail .detail-left treatment). Mobile flows naturally. */
.detail-content__body { }

@media (min-width: 1024px) {
    .detail-content__body {
        background: #fff;
        border-radius: .75rem;
        padding: 2rem;
        box-shadow: 0 -2px 16px rgba(0, 0, 0, .08);
    }
}

/* Development factsheet table (Developments::getFactsheetTableHtml) — rendered
   on detail pages and inside page-builder content. Label/value rows, striped. */
.property-factsheet {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}
.property-factsheet th,
.property-factsheet td {
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    padding: .625rem 1rem;
    text-align: left;
    vertical-align: top;
}
.property-factsheet th {
    width: 40%;
    font-weight: 600;
    color: #374151;
    background: var(--color-neutral-50, #f9fafb);
}
.property-factsheet tr:nth-child(even) td {
    background: var(--color-neutral-50, #f9fafb);
}
.property-factsheet a {
    color: var(--color-primary, #1d4ed8);
    text-decoration: underline;
    font-weight: 600;
}
.property-factsheet a:hover { text-decoration: none; }