/* ==========================================================================
   Hero listing — E / F / G variants
   Spec: docs/superpowers/specs/2026-05-04-hero-aspect-ratio-design.md
   Cache-bust via wp_enqueue_style version arg.
   ========================================================================== */

/* ---- Self-hosted fonts ---- */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../../fonts/CormorantGaramond-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/CormorantGaramond-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/CormorantGaramond-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/CormorantGaramond-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Var Listing';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../../fonts/Inter-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Var Listing';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/Inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Var Listing';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/Inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Var Listing';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/Inter-600.woff2') format('woff2');
}

/* ---- Brand tokens (scoped to .osc-hero so we don't pollute globals) ---- */
.osc-hero {
    --osc-cream: #E4E0DB;
    --osc-cream-light: #F2EFEA;
    --osc-navy: #011B31;
    --osc-red: #B22F2F;
    --osc-gold: #C8A24A;
    --osc-ink: #1a1a1a;
    --osc-muted: #6b6760;
    position: relative;
    box-sizing: border-box;
    font-family: 'Inter Var Listing', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--osc-ink);
}
.osc-hero *, .osc-hero *::before, .osc-hero *::after { box-sizing: border-box; }

/* ---- Listing badge (top-left "For Sale" / "For Lease") ---- */
.osc-hero__listing-badge {
    position: absolute;
    top: 12px;
    left: 32px;
    z-index: 5;
}
.osc-hero__listing-badge a {
    color: var(--osc-navy);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* The legacy .slide_down rule (style.css:201, margin-top:180px) compensated for
   the absolutely-positioned .block_page card overhang in the default hero. In E/F/G
   the hero is self-contained — no overhang — so kill that 180px gap.
   Use general sibling (~) not adjacent (+): the toggle pill div + a script tag
   sit between .osc-hero and .slide_down in the DOM, breaking adjacent matching. */
.osc-hero ~ .slide_down {
    margin-top: 0 !important;
}

/* ---- Shared image frame (Inner card with padding + soft shadow) ---- */
.osc-hero__imageframe-inner {
    background: #fff;
    padding: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.12);
    position: relative;
}
.osc-hero__image {
    display: block;
    width: 100%;
    height: auto;
    /* No object-fit; image renders at natural aspect ratio. */
}

/* ---- Badges (under contract / call for offers) — scoped to .osc-hero ---- */
.osc-hero__badge {
    position: absolute;
    z-index: 4;
    left: 24px;
}
.osc-hero__badge img {
    height: 36px !important;
    width: auto !important;
    display: block;
}
.osc-hero__badge--under-contract { top: 24px; }
.osc-hero__badge--call-for-offers { top: 72px; }

/* ==========================================================================
   Variant E — Editorial Header
   Title block on cream, framed image plate below
   ========================================================================== */
.osc-hero--e {
    background: var(--osc-cream-light);
}
.osc-hero--e .osc-hero__header {
    padding: 56px 32px 32px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.osc-hero--e .osc-hero__eyebrow {
    margin: 0 0 24px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--osc-gold);
    text-transform: uppercase;
}
.osc-hero--e .osc-hero__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--osc-navy);
    margin: 0 0 14px;
}
.osc-hero--e .osc-hero__addr {
    margin: 0 0 28px;
    font-size: 0.92rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--osc-muted);
}
.osc-hero--e .osc-hero__addr-seg + .osc-hero__addr-seg::before {
    content: ' · ';
    margin: 0 0.25em;
}
.osc-hero--e .osc-hero__divider {
    display: block;
    width: 60px;
    height: 1px;
    background: var(--osc-gold);
    margin: 0 auto 28px;
}
.osc-hero--e .osc-hero__priceblock {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 22px;
    margin-bottom: 36px;
}
.osc-hero--e .osc-hero__pricelabel {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--osc-muted);
}
.osc-hero--e .osc-hero__price {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 500;
    color: var(--osc-navy);
    line-height: 1;
}
.osc-hero--e .osc-banner-ctas {
    margin-bottom: 0;
}
.osc-hero--e .osc-hero__imageframe {
    background: var(--osc-cream-light);
    padding: 0 32px 56px;
    margin: 0;
}
.osc-hero--e .osc-hero__imageframe-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* ---- Mobile (E) ---- */
@media (max-width: 768px) {
    .osc-hero--e .osc-hero__header { padding: 40px 24px 32px; }
    .osc-hero--e .osc-hero__priceblock { gap: 16px; flex-direction: column; align-items: center; }
    .osc-hero--e .osc-hero__priceblock .osc-hero__pricelabel { margin-bottom: -6px; }
    .osc-hero--e .osc-hero__imageframe { padding: 0 18px 40px; }
    .osc-hero--e .osc-hero__imageframe-inner { padding: 8px; }
    .osc-hero__listing-badge { left: 18px; top: 8px; }
    .osc-hero__badge--under-contract { top: 18px; left: 18px; }
    .osc-hero__badge--call-for-offers { top: 56px; left: 18px; }
    .osc-hero__badge img { height: 28px !important; }
}

/* ==========================================================================
   Variant F — Magazine Two-Column
   ========================================================================== */
.osc-hero--f {
    background: var(--osc-cream-light);
}
.osc-hero--f .osc-hero__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    min-height: 560px;
}
.osc-hero--f .osc-hero__header {
    padding: 80px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}
.osc-hero--f .osc-hero__eyebrow {
    margin: 0 0 28px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--osc-gold);
    text-transform: uppercase;
}
.osc-hero--f .osc-hero__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.95rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--osc-navy);
    margin: 0 0 16px;
}
.osc-hero--f .osc-hero__addr {
    margin: 0 0 28px;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--osc-muted);
}
.osc-hero--f .osc-hero__addr-seg + .osc-hero__addr-seg::before {
    content: ' · ';
    margin: 0 0.25em;
}
.osc-hero--f .osc-hero__divider {
    display: block;
    width: 50px;
    height: 1px;
    background: var(--osc-gold);
    margin: 0 0 28px;
}
.osc-hero--f .osc-hero__priceblock {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
}
.osc-hero--f .osc-hero__pricelabel {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--osc-muted);
}
.osc-hero--f .osc-hero__price {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 500;
    color: var(--osc-navy);
    line-height: 1;
}
.osc-hero--f .osc-banner-ctas {
    margin-bottom: 0;
}
.osc-hero--f .osc-hero__imageframe {
    padding: 64px 64px 64px 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.osc-hero--f .osc-hero__imageframe-inner {
    max-width: 100%;
}
.osc-hero--f .osc-hero__image {
    max-height: 480px;
    width: auto;
    margin: 0 auto;
}

/* ---- Mobile (F) — collapses to stacked ---- */
@media (max-width: 768px) {
    .osc-hero--f .osc-hero__grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .osc-hero--f .osc-hero__header { padding: 40px 24px 28px; }
    .osc-hero--f .osc-hero__imageframe { padding: 22px 18px 40px; }
    .osc-hero--f .osc-hero__image { max-height: none; }
}

/* ==========================================================================
   Variant G — Gallery Print
   ========================================================================== */
.osc-hero--g {
    background: linear-gradient(180deg, var(--osc-cream-light) 0%, var(--osc-cream-light) 60%, #fff 60%, #fff 100%);
}
.osc-hero--g .osc-hero__gallery {
    padding-top: 64px;
}
.osc-hero--g .osc-hero__imageframe {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
}
.osc-hero--g .osc-hero__imageframe-inner {
    padding: 14px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.16);
}
.osc-hero--g .osc-hero__detailstrip {
    background: #fff;
    padding: 56px 32px 80px;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
}
.osc-hero--g .osc-hero__detailstrip-id {
    text-align: left;
}
.osc-hero--g .osc-hero__eyebrow {
    margin: 0 0 14px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--osc-gold);
}
.osc-hero--g .osc-hero__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    line-height: 1.1;
    color: var(--osc-navy);
    margin: 0 0 6px;
}
.osc-hero--g .osc-hero__addr {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--osc-muted);
}
.osc-hero--g .osc-hero__addr-seg + .osc-hero__addr-seg::before {
    content: ' · ';
    margin: 0 0.25em;
}
.osc-hero--g .osc-hero__detailstrip-price {
    text-align: right;
    border-left: 1px solid #e6e1da;
    padding-left: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.osc-hero--g .osc-hero__pricelabel {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--osc-muted);
}
.osc-hero--g .osc-hero__price {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 500;
    color: var(--osc-navy);
    line-height: 1;
    margin-bottom: 16px;
}
.osc-hero--g .osc-banner-ctas {
    margin-top: 4px;
}

/* ---- Mobile (G) ---- */
@media (max-width: 768px) {
    .osc-hero--g .osc-hero__gallery { padding-top: 32px; }
    .osc-hero--g .osc-hero__imageframe { padding: 0 18px; }
    .osc-hero--g .osc-hero__imageframe-inner { padding: 8px; }
    .osc-hero--g .osc-hero__detailstrip {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px 22px 36px;
        text-align: center;
    }
    .osc-hero--g .osc-hero__detailstrip-id,
    .osc-hero--g .osc-hero__detailstrip-price {
        text-align: center;
        border-left: 0;
        padding-left: 0;
        align-items: center;
    }
}

/* ==========================================================================
   E-active body scope — tighten inter-section vertical rhythm
   Selector pair: :has(.osc-hero--e) handles the current theme (header.php
   hardcodes class="sitebody"), .osc-hero-active-e handles the future case
   where header.php is converted to use WordPress body_class(). Either path
   triggers the same overrides. Collapses Bootstrap .my-md-5 and .mt-5 utility
   margins (3rem/48px) that compound with section py-md-5 padding to leave too
   much air between content blocks. Internal section padding is left intact so
   each section retains substance.
   ========================================================================== */
body:has(.osc-hero--e) .my-md-5,
body.osc-hero-active-e .my-md-5 {
    margin-top: 1rem !important;    /* 16px from 48px */
    margin-bottom: 1rem !important;
}
body:has(.osc-hero--e) .mt-5,
body.osc-hero-active-e .mt-5 {
    margin-top: 1.5rem !important;  /* 24px from 48px */
}