/* ============================================================
   project-page.css — Project Detail & Golden Visa Components
   Project hero, gallery, invest-grid, KPI, units, GV listing,
   FAQ, data-table, floorplan, lightbox, location, neighbourhood
   Split from components.css — 2026-03-18
   ============================================================ */

.project-page { display: block; overflow-x: hidden; max-width: 100vw; }

/* Precise overflow protection — media elements only */
.project-page :is(img, video, iframe, svg, canvas, embed, object) { max-width: 100%; }
.project-page img, .project-page video { height: auto; }

/* Anchor offset for fixed nav — applies to all project pages, all viewports */
.project-page section[id] { scroll-margin-top: calc(var(--nav-height, 80px) + 1rem); }

.project-hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.project-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.project-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero BG fallback + hover (shared across all project pages) */
.project-hero__bg { background-color: #1A1916; }
.project-hero__bg:hover { transform: scale(1.04); }

.project-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
    z-index: 1;
}

.project-hero__content {
    position: relative;
    z-index: 2;
    color: var(--white);
    max-width: 900px;
    padding: 0 2rem;
}

.project-hero__eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
}

.project-hero__title {
    font-family: var(--display);
    font-size: clamp(2.2rem, 8vw, 3.5rem);
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

.project-hero__tagline {
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 300;
    font-style: italic;
    color: var(--gold);
    margin-bottom: 2rem;
}

.project-hero__badges {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.tagline {
    font-family: var(--display);
    font-size: 1.35rem;
    font-style: italic;
    color: var(--gold);
    margin: 0.5rem 0 1.5rem;
}

/* --- Project Content Grids --- */
.overview-grid,
.invest-grid,
.gv-section-content,
.floorplan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    max-width: var(--max-width);
    margin: 0 auto;
}

.project-page .section-intro + .location-content {
    margin-top: 2.5rem;
}

.location-content {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* --- Meta List --- */
.meta-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.meta-list__item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--stone);
}

.meta-list__label {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warm-gray);
}

.meta-list__value {
    font-size: 0.95rem;
    color: var(--dark);
    margin-top: 0.3rem;
}

.meta-list__value--sale {
    color: var(--gold-dark);
    font-weight: 500;
}

.meta-list__sale-unit,
.meta-list__sale-separator {
    color: var(--gold-dark);
    font-weight: 600;
}

.meta-list__sale-date {
    color: var(--dark);
    font-weight: 500;
}

.meta-list__toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: var(--white);
    border: 1px solid rgba(184, 168, 138, 0.45);
    border-radius: 999px;
    color: var(--gold-dark);
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.78rem 1rem;
    margin-top: 0.9rem;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.meta-list__toggle:hover,
.meta-list__toggle:focus-visible {
    border-color: var(--gold);
    background: rgba(184, 168, 138, 0.08);
    outline: none;
}

/* --- KPI Strip --- */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.kpi-strip--hero {
    max-width: 900px;
    margin: 2rem auto;
    grid-template-columns: repeat(4, 1fr);
}

.kpi-card {
    background: var(--white);
    border: 1px solid var(--stone);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition-all);
}

.kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: var(--shadow-1);
}

.kpi-card__value {
    font-family: var(--display);
    font-size: 2.2rem;
    font-weight: 450;
    color: var(--gold-ink, #5c4a30);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.01em;
}

.kpi-card__label {
    font-size: 0.72rem;
    color: var(--warm-gray);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.3rem;
}

.kpi-card--highlight {
    border-color: var(--gold);
    position: relative;
}

.kpi-card--highlight::before {
    content: '*';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--gold);
    font-size: 0.8rem;
}

/* --- Sales Progress --- */
.sales-progress { margin: 2rem 0; }

.sales-progress__bar {
    height: 8px;
    background: var(--stone);
    border-radius: 4px;
    overflow: hidden;
}

.sales-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-dark));
    border-radius: 4px;
    transition: width 1s ease-out;
}

.sales-progress__label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--warm-gray);
    margin-top: 0.5rem;
}

/* --- Stats Bar (Key Numbers strip) --- */
.project-page .stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
}
.project-page .stat-item {
    text-align: center;
    padding: 2.5rem 1rem;
    border-right: 1px solid rgba(184,168,138,0.2);
}
.project-page .stat-item:last-child { border-right: none; }

/* --- Yield Card --- */
.yield-card {
    background: var(--offwhite);
    border: 1px solid var(--stone);
    border-radius: var(--radius-md);
    padding: 2rem;
}

.yield-card__row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--stone);
    font-size: 0.9rem;
}

.yield-card__type { color: var(--charcoal); }
.yield-card__value { font-weight: 500; color: var(--gold-dark); }

/* --- GV Listing Card (golden-visa portfolio listing) ---
   Formerly .project-card in the GV context. Renamed to avoid
   collision with the homepage .project-card component.
   Backward-compat: selectors include .project-card-link .project-card
   until HTML is migrated. */
.project-card-link {
    text-decoration: none;
    display: block;
    margin-bottom: 3rem;
}

.gv-listing-card,
.project-card-link .project-card {
    border: 1px solid var(--stone);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.4s, box-shadow 0.4s;
}

.gv-listing-card:hover,
.project-card-link .project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.gv-listing-card__grid,
.project-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
}

.gv-listing-card__body,
.project-card__body {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gv-listing-card__badge,
.project-card__badge {
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
}

.gv-listing-card__title,
.project-card__title {
    font-family: var(--display);
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--dark);
    margin-bottom: 1rem;
}

.gv-listing-card__desc,
.project-card__desc {
    font-size: 0.95rem;
    color: var(--charcoal);
    line-height: 1.7;
}

.gv-listing-card__stats,
.project-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--stone);
    margin-top: 1.5rem;
}

.gv-listing-card__stats > div,
.project-card__stats > div {
    padding: 0.75rem;
    border-radius: 4px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.gv-listing-card__stats > div:hover,
.project-card__stats > div:hover {
    background: rgba(0,0,0,0.03);
    transform: translateY(-1px);
}

.gv-listing-card__stat-label,
.project-card__stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--warm-gray);
}

.gv-listing-card__stat-value,
.project-card__stat-value {
    font-family: var(--display);
    font-size: 1.2rem;
    color: var(--dark);
    margin-top: 0.3rem;
}

.gv-listing-card__cta-wrap,
.project-card__cta-wrap { margin-top: 2rem; }

.gv-listing-card__cta,
.project-card__cta {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-weight: 500;
}

/* --- Project Gallery --- */
.project-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.project-gallery__grid figure {
    margin: 0;
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

.project-gallery__grid img,
.project-gallery__grid figure > img,
.project-gallery__grid figure > .media-frame img {
    width: 100%;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-all);
}

.project-gallery__grid img:hover,
.project-gallery__grid figure > .media-frame img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-2);
}

.project-gallery__grid figcaption {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--warm-gray);
    font-style: italic;
}

/* --- Disclaimer --- */
.project-disclaimer {
    padding: 3rem;
    max-width: var(--max-width);
    margin: 0 auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.project-disclaimer__text {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--warm-gray);
    margin-bottom: 1rem;
}
.project-disclaimer__text:last-child { margin-bottom: 0; }

/* -- Map Embed -- */
.map-embed {
    margin-top: 2rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.map-embed iframe {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
}

/* --- Distance & Location --- */
.distance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.distance-item {
    border: 1px solid var(--stone);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    background: var(--white);
}

.distance-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.distance-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    border: 1px solid var(--stone);
    border-radius: var(--radius-sm);
}

.distance-list__place { font-size: 0.9rem; color: var(--dark); }
.distance-list__time { font-size: 0.85rem; font-weight: 500; color: var(--gold-dark); }
.place { color: var(--dark); }
.time { color: var(--gold-dark); font-weight: 500; }

/* --- Dining Row --- */
.dining-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.dining-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: var(--offwhite);
    border: 1px solid var(--stone);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
}

/* --- Feature Photo Strip (cross-width) --- */
.feature-photo-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-sm, 0.75rem);
}
.feature-photo-strip__item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-sm, 4px);
    aspect-ratio: 4 / 3;
    position: relative;
}
.feature-photo-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
}
.feature-photo-strip__item:hover img {
    transform: scale(1.04);
}
@media (max-width: 1024px) {
    .feature-photo-strip { grid-template-columns: repeat(3, 1fr); }
    .feature-photo-strip__item:nth-child(n+4) { display: none; }
}
@media (max-width: 640px) {
    /* Mobile: horizontal scroll-snap carousel showing all 5 photos */
    .feature-photo-strip {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--space-xs, 0.5rem);
        padding-bottom: 0.5rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .feature-photo-strip__item {
        flex: 0 0 70%;
        scroll-snap-align: start;
        min-width: 70%;
    }
    .feature-photo-strip__item:nth-child(n+4) { display: block; }
}

/* --- Mobile/Tablet: Feature strip appears BETWEEN overview text and meta-list --- */
/* Default: hide inline version (desktop uses standalone section) */
.feature-strip-inline { display: none; }

@media (max-width: 1024px) {
    /* Hide the standalone feature-strip section on mobile/tablet */
    section[data-section="feature-strip"] { display: none; }
    /* Show the inline version nested inside overview-grid */
    .feature-strip-inline { display: block; grid-column: 1 / -1; margin: 2rem 0; }
}

/* --- GV (Golden Visa) Section --- */
.gv-inline-badge { margin-top: 1.5rem; }

.gv-amount {
    font-family: var(--display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 450;
    color: var(--gold-ink, #5c4a30);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.gv-body-intro { margin-bottom: 1.25rem; }

.gv-features {
    list-style: none;
    display: grid;
    gap: 0.8rem;
}

.gv-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.gv-visual,
.invest-recommendation {
    background: var(--offwhite);
    border: 1px solid var(--stone);
    border-radius: var(--radius-md);
    padding: 2rem;
    margin-bottom: 2rem;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.gv-visual-label,
.gv-visual-sub,
.gv-visual-fact {
    font-size: inherit;
}

.gv-visual {
    color: #2C2A26;
}

.gv-visual-label,
.gv-visual-sub {
    color: #6B6660;
}

.gv-visual-amount {
    font-family: var(--display);
    font-size: 2.6rem;
    font-weight: 450;
    color: var(--gold-ink, #5c4a30);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.01em;
}

.gv-visual-fact {
    color: #2C2A26;
}

.gv-visual-divider {
    width: 100%;
    height: 1px;
    background: rgba(44, 42, 38, 0.18);
    margin: 1rem 0;
}

/* --- Floorplan Gallery --- */
.floorplan-gallery { margin-top: 3rem; }

.floorplan-gallery__heading {
    font-family: var(--serif);
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.floorplan-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.floorplan-gallery__card {
    background: var(--white);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.floorplan-gallery__card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
    aspect-ratio: auto;
    object-fit: contain;
    background: #f5f4f1;
}

.floorplan-gallery__card figcaption {
    margin-top: 0.8rem;
    color: var(--stone);
    font-size: 0.85rem;
}

.floorplan-item {
    border: 1px solid var(--stone);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    background: var(--white);
    color: var(--dark);
}
.floorplan-item h4 {
    color: var(--dark) !important;
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.floorplan-item p {
    color: var(--charcoal);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* --- Best Tag / Score --- */
.best-tag {
    display: inline-block;
    font-size: 0.78rem;
    padding: 0.3rem 0.8rem;
    background: rgba(184,168,138,0.15);
    color: var(--gold-dark);
    border-radius: 2px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.best-tag--highlight { color: var(--gold-dark); font-weight: 600; }

.score {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--gold);
    font-weight: 400;
}

.recommend-row { background: rgba(184,168,138,0.08); }

/* --- Data Table --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--warm-gray);
    padding: 0.8rem;
    border-bottom: 2px solid var(--stone);
    text-align: left;
    font-weight: 600;
}

.data-table td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--stone);
    color: var(--charcoal);
}

.data-table tr:hover td {
    background: rgba(184,168,138,0.05);
}

.data-table .highlight {
    background: rgba(184,168,138,0.08);
    font-weight: 500;
}

.data-table td.data-table__emphasis,
.data-table th.data-table__emphasis {
    background: var(--gold-ink-bg, rgba(92, 74, 48, 0.06));
    color: var(--night, #1a1916);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-left: 3px solid var(--gold-dark, #8b7744);
    padding-left: calc(0.8rem + 3px);
}

.data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Unit Table & Scroll Containers --- */
.project-page .unit-table { min-width: 700px; }
.project-page .data-table { min-width: 600px; }
.project-page .unit-table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.project-page .unit-table-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.85));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s;
}
.project-page .unit-table-wrap.scrolled-end::after { opacity: 0; }
.project-page .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- FAQ --- */
.faq-list {
    max-width: 800px;
    margin: 2rem auto 0;
}

.faq-item {
    border-bottom: 1px solid var(--stone);
    padding: 1.5rem 0;
}

.faq-question {
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--dark);
    list-style: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content: '>';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    transition: transform 0.2s;
    font-size: 1.2rem;
}

.faq-item[open] .faq-question::after {
    transform: translateY(-50%) rotate(90deg);
}

.faq-answer {
    margin-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--charcoal);
}

/* --- Tab Bar --- */
.tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--stone);
    flex-wrap: wrap;
}

.tab-btn {
    padding: 0.8rem 1.5rem;
    background: none;
    border: none;
    color: var(--warm-gray);
    font-family: var(--body);
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    white-space: nowrap;
    min-height: 44px;
}

.tab-btn:hover { color: var(--dark); }

.tab-btn.active {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
    font-weight: 500;
}

/* --- Lightbox Gallery --- */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lightbox-overlay.active { display: flex; }

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.lightbox-close:hover { opacity: 0.7; }

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox-caption {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    text-align: center;
    max-width: 600px;
}

.lightbox-counter {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}

/* ===========================================
   DARK THEME — PROJECT-PAGE COMPONENT OVERRIDES
   =========================================== */

.section--dark .meta-list__label,
.section--dark .sales-progress__label,
.section--dark .project-card__stat-label,
.section--dark .gv-listing-card__stat-label,
.bg-night .sales-progress__label,
.bg-dark .sales-progress__label {
    color: rgba(255,255,255,0.72);
}

/* KPI Card Dark */
.kpi-card--dark {
    background: rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.kpi-card--dark .kpi-card__value { color: var(--gold-light); font-size: 1.8rem; font-weight: 500; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.kpi-card--dark .kpi-card__label { color: rgba(255,255,255,0.85); }

/* KPI Card Dark — high specificity for Hero */
.project-hero .kpi-card--dark,
.project-page .kpi-card--dark {
    background: rgba(0,0,0,0.55);
    border-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.project-hero .kpi-card--dark .kpi-card__value,
.project-page .kpi-card--dark .kpi-card__value {
    color: var(--gold);
    font-size: 1.8rem;
}

.project-hero .kpi-card--dark .kpi-card__label,
.project-page .kpi-card--dark .kpi-card__label {
    color: rgba(255,255,255,0.9);
}

/* Floorplan Dark background invert */
.bg-dark .floorplan-gallery__card,
.section--dark .floorplan-gallery__card {
    border: 2px solid var(--gold);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    background: transparent;
}

.bg-dark .floorplan-gallery__card img,
.section--dark .floorplan-gallery__card img {
    filter: invert(0.88) hue-rotate(180deg) sepia(0.15) saturate(1.2);
    border-radius: var(--radius-sm);
}

/* Data Table dark */
.bg-night .data-table td,
.bg-dark .data-table td {
    color: var(--stone);
    border-bottom-color: rgba(255,255,255,0.08);
}

.bg-night .data-table th,
.bg-dark .data-table th {
    color: var(--gold);
    border-bottom-color: rgba(255,255,255,0.15);
}

.bg-night .data-table tr:hover td,
.bg-dark .data-table tr:hover td {
    background: rgba(255,255,255,0.05);
}

/* Best tag + Score dark */
.bg-night .best-tag,
.bg-dark .best-tag {
    background: rgba(184,168,138,0.3);
    color: var(--gold-light, #D4C4A0);
}

.bg-night .score,
.bg-dark .score {
    color: var(--gold-light, #D4C4A0);
}

/* Recommend row dark */
.bg-night .recommend-row,
.bg-dark .recommend-row {
    background: rgba(184,168,138,0.14);
}

.bg-night .recommend-row td,
.bg-dark .recommend-row td {
    color: #fff;
}

.bg-night .invest-recommendation,
.bg-dark .invest-recommendation { color: var(--dark); }

.bg-night .invest-recommendation p,
.bg-dark .invest-recommendation p,
.bg-night .invest-recommendation strong,
.bg-dark .invest-recommendation strong { color: var(--dark); }

/* ===========================================
   LIGHT SECTION — PROJECT-PAGE COMPONENT OVERRIDES
   .bg-offwhite / .bg-cream
   =========================================== */

.bg-offwhite .kpi-card__label, .bg-cream .kpi-card__label { color: var(--warm-gray); }
.bg-offwhite .kpi-card__value, .bg-cream .kpi-card__value { color: var(--gold-dark); }

.bg-offwhite .price-gold, .bg-cream .price-gold,
.bg-offwhite .unit-card__price, .bg-cream .unit-card__price,
.bg-offwhite .invest-score__number, .bg-cream .invest-score__number {
    color: var(--gold-dark);
}

/* ===========================================
   RESPONSIVE — PROJECT-PAGE COMPONENTS
   =========================================== */

@media (max-width: 1024px) {
    .project-gallery__grid { grid-template-columns: repeat(2, 1fr); }
    .project-page .stats-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Fix horizontal overflow only on hero */
    .project-hero { overflow-x: hidden; }
    .project-gallery__grid { grid-template-columns: 1fr; }
    .project-gallery__grid { gap: 0.75rem; }
    .project-gallery__grid figure { margin: 0; padding: 0; }
    .project-gallery__grid figure:not(.has-media-frame) > img { aspect-ratio: 16/10; object-fit: cover; max-height: 260px; width: 100%; display: block; }
    .floorplan-gallery__card img { object-fit: contain; }
    /* Bare images (no wrapper) — contain + cap height. Uses data-section
       to avoid interfering with images inside .media-frame, .location-images,
       .neighbourhood-grid, .content-image which have their own rules. */
    section[data-section="overview"] > div > img:not([class]),
    section[data-section="neighbourhood"] > div > img:not([class]) { max-height: 50vh; object-fit: contain; width: 100%; }
    .distance-list { grid-template-columns: 1fr; }
    /* GV listing card responsive */
    .gv-listing-card__grid { grid-template-columns: 1fr; }
    .overview-grid,
    .invest-grid,
    .gv-section-content,
    .floorplan-grid,
    .distance-grid,
    .floorplan-gallery__grid,
    .unit-card-grid { grid-template-columns: 1fr; }
    /* Allow grid children to shrink below content size so overflow-x: auto on .table-scroll works */
    .invest-grid > *,
    .overview-grid > *,
    .gv-section-content > * { min-width: 0; }
    .floorplan-grid { gap: 1rem; }
    .floorplan-gallery__grid { gap: 1rem; }
    .kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .kpi-strip--hero { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
    .rental-box { padding: 1.5rem !important; }
    .sales-progress__label {
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
    }
    .tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    /* Hero mobile */
    .project-hero { height: auto; min-height: auto; padding: 6rem 0 2rem; }
    .project-hero__content { padding: 0 1.5rem; }
    .project-hero__content h1 { font-size: 2rem; margin-bottom: 0.5rem; }
    .project-hero__content .tagline { font-size: 0.95rem; margin-bottom: 1rem; color: rgba(255,255,255,0.85); }
    .project-hero__content .t-label { font-size: 0.75rem; margin-bottom: 0.5rem; color: var(--gold); }
    .project-hero__content h1 { color: #FFFFFF; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
    .kpi-strip--hero { gap: 0.8rem; margin: 1rem auto; }
    .kpi-strip--hero .kpi-card { padding: 0.8rem; }
    .kpi-strip--hero .kpi-card__value { font-size: 1.3rem; }
    .kpi-strip--hero .kpi-card__label { font-size: 0.65rem; }
    /* Investment table mobile */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { font-size: 0.75rem; min-width: 550px; }
    .data-table th, .data-table td { padding: 0.5rem 0.4rem; }
    .best-tag { font-size: 0.65rem; padding: 0.15rem 0.4rem; white-space: nowrap; }
    /* Yield card mobile */
    .yield-card { padding: 1.2rem; }
    .yield-card__row { font-size: 0.82rem; gap: 0.5rem; }
    .yield-card__type { flex-shrink: 0; max-width: 55%; }
    .yield-card__value { text-align: right; word-break: break-word; }
    /* Meta list mobile */
    .meta-list { grid-template-columns: 1fr; }
    .meta-list__item--extra { display: none; }
    .meta-list__item--extra.show { display: flex; }
    .meta-list__toggle { display: inline-flex; }
    /* Merged project-card responsive (golden-visa context) */
    .project-disclaimer { padding: 2rem 1.5rem; }
    .map-embed iframe { height: 420px; }
    .floorplan-gallery__grid { grid-template-columns: 1fr; }
    .floorplan-gallery__card img { max-height: none; }
    /* Gallery spacing */
    .project-gallery--3col.std,
    section[data-section="gallery"].std { padding-top: 2rem; padding-bottom: 2rem; }
    .floorplan-gallery__grid { gap: 0.75rem; }
    .floorplan-gallery__card { margin: 0; padding: 0; }
    .floorplan-gallery__card img { object-fit: contain; width: 100%; }
    .floorplan-gallery__card figcaption { font-size: 0.75rem; margin-top: 0.25rem; }
    .floorplan-gallery { margin-top: 1rem; }
    .floorplan-gallery__heading { margin-bottom: 0.75rem; }
    .project-gallery__grid { gap: 0.75rem; }
    .project-gallery__grid figure { margin: 0; padding: 0; }
    .project-gallery__grid figure:not(.has-media-frame) > img { max-height: 220px; aspect-ratio: 16/10; object-fit: cover; width: 100%; display: block; }
    /* Property page shared responsive */
    .location-images { grid-template-columns: 1fr; }
    .neighbourhood-grid { grid-template-columns: 1fr; }
    .content-image { margin: 1.5rem auto 0; }
    .content-image img:hover, .location-images img:hover,
    .neighbourhood-grid img:hover, .project-gallery__grid figure > img:hover,
    .project-gallery__grid figure > .media-frame img:hover { transform: none; }
    .content-image__caption, .location-images figcaption,
    .neighbourhood-grid figcaption { font-size: max(0.7rem, 12px); }
    #project-map { height: 420px !important; }
    /* Stats bar + table mobile (was inline per-page) */
    .project-page .stats-bar { grid-template-columns: repeat(2, 1fr); }
    .project-page .unit-table { min-width: 600px; font-size: 0.8rem; }
    .project-page .invest-recommendation { padding: 1.5rem; margin-bottom: 2rem; overflow: hidden; }
    .project-page .invest-recommendation p,
    .project-page .yield-card,
    .project-page .yield-card__type,
    .project-page .yield-card__value { word-wrap: break-word; overflow-wrap: break-word; }
    .project-page .yield-card { overflow: hidden; }

    /* Luxury Villa Faliro: mobile readability pass for long light editorial sections. */
    .project-page--luxury-villa-faliro .std,
    .project-page--luxury-villa-faliro .std-lg {
        padding-left: 1.35rem;
        padding-right: 1.35rem;
    }

    .project-page--luxury-villa-faliro #overview {
        padding-top: 2.75rem;
    }

    .project-page--luxury-villa-faliro .project-hero__title,
    .project-page--luxury-villa-faliro .project-hero__tagline {
        color: #fff;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.62);
    }

    .project-page--luxury-villa-faliro .project-hero__tagline {
        opacity: 0.96;
    }

    .project-page--luxury-villa-faliro :is(.bg-offwhite, .bg-cream, section:not(.bg-dark):not(.bg-night)) .t-body,
    .project-page--luxury-villa-faliro :is(.bg-offwhite, .bg-cream, section:not(.bg-dark):not(.bg-night)) p,
    .project-page--luxury-villa-faliro :is(.bg-offwhite, .bg-cream, section:not(.bg-dark):not(.bg-night)) li,
    .project-page--luxury-villa-faliro .distance-item,
    .project-page--luxury-villa-faliro .meta-list__value,
    .project-page--luxury-villa-faliro .stat-label {
        color: #4f4a43;
    }

    .project-page--luxury-villa-faliro :is(#overview, #location, #units, #available, #investment, #development-upside, #neighbourhood) .t-body {
        font-size: 0.98rem;
        line-height: 1.72;
    }

    .project-page--luxury-villa-faliro .section-intro {
        text-align: left;
    }

    .project-page--luxury-villa-faliro .section-intro .t-label,
    .project-page--luxury-villa-faliro .section-intro .t-heading {
        text-align: center;
    }

    .project-page--luxury-villa-faliro .section-intro .t-body {
        margin-left: 0;
        margin-right: 0;
    }

    .project-page--luxury-villa-faliro .distance-item {
        background: #fff;
        border-color: rgba(92, 74, 48, 0.22);
    }
}

@media (max-width: 480px) {
    .kpi-strip:not(.kpi-strip--hero) { grid-template-columns: 1fr; }
    .kpi-strip--hero { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .kpi-strip--hero .kpi-card { padding: 0.6rem; }
    .kpi-strip--hero .kpi-card__value { font-size: 1.2rem; }
    .kpi-strip--hero .kpi-card__label { font-size: 0.6rem; }
    .project-page .stats-bar { grid-template-columns: 1fr; }
}

/* --- Golden Visa Property Pages: Shared Components --- */

/* Content images */
.content-image { margin: 3rem auto 0; border-radius: 8px; overflow: hidden; }
.content-image img { width: 100%; height: auto; display: block; border-radius: 8px; }
.content-image__caption { font-size: 0.8rem; color: var(--warm-gray); text-align: center; margin-top: 0.75rem; font-style: italic; }

/* Location 2-col images */
.location-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.location-images figure { margin: 0; overflow: hidden; border-radius: 8px; }
.location-images img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; }
.location-images figcaption { font-size: 0.75rem; color: var(--warm-gray); text-align: center; margin-top: 0.5rem; font-style: italic; }

/* Neighbourhood section intro centering */
#neighbourhood > .mx-auto {
    text-align: center;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Neighbourhood grid */
.neighbourhood-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; text-align: left; }
.neighbourhood-grid figure { margin: 0; overflow: hidden; border-radius: 8px; }
.neighbourhood-grid img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; }
.neighbourhood-grid figcaption { font-size: 0.75rem; color: var(--warm-gray); text-align: center; margin-top: 0.5rem; font-style: italic; }

/* Image polish: shadows & hover */
.content-image img, .location-images img, .neighbourhood-grid img {
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.content-image img:hover, .location-images img:hover, .neighbourhood-grid img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.project-gallery__grid figure > img,
.project-gallery__grid figure > .media-frame img {
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-gallery__grid figure > img:hover,
.project-gallery__grid figure > .media-frame img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* --- Leaflet Container Image Reset --- */
.project-page .leaflet-container :is(img, svg, canvas) { max-width: none; }
.project-page .leaflet-container img { aspect-ratio: unset; object-fit: unset; width: unset; }

/* --- Leaflet Map Label Overrides --- */
.poi-label {
    background: none !important; border: none !important; box-shadow: none !important;
    font-size: 11px; font-weight: 600; color: #3d3a37;
    text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff;
    padding: 0 !important;
}
.poi-label::before { display: none !important; }
.project-label {
    background: none !important; border: none !important; box-shadow: none !important;
    font-size: 13px; font-weight: 700; color: #B8A88A;
    text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff;
    padding: 0 !important;
}
.project-label::before { display: none !important; }

/* ===========================================
   EDITORIAL BAND / CINEMATIC HERO (Aurea Pro v2)
   =========================================== */
.editorial-band__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.editorial-hero {
  margin: 0;
  padding: 0;
}

.editorial-hero__frame {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  overflow: hidden;
  background: #1a1916;
}

.editorial-hero__media {
  width: 100%;
  height: clamp(220px, 56vw, 78vh);
  max-height: min(78vh, 900px);
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.editorial-hero__caption {
  max-width: var(--max-width, 1200px);
  margin: 0.75rem auto 0;
  padding: 0 2rem;
  font-size: 0.8rem;
  color: var(--warm-gray);
  text-align: center;
  font-style: italic;
}

.video-section__frame {
  position: relative;
}

.video-section__unmute {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

.project-video-library {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.project-video-library__heading {
  margin: 0.35rem 0 0;
  color: var(--dark);
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 300;
  line-height: 1.18;
}

.project-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  margin-top: 1.5rem;
}

.project-video-card {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

.project-video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #1a1916;
  object-fit: contain;
  box-shadow: 0 16px 36px rgba(26, 25, 22, 0.1);
}

.project-video-card--portrait {
  max-width: min(100%, 440px);
}

.project-video-card--portrait video {
  aspect-ratio: 9 / 16;
}

.project-video-card figcaption {
  color: var(--warm-gray);
  font-size: 0.9rem;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .editorial-hero__media {
    height: clamp(200px, 62vw, 420px);
    object-position: center 35%;
  }
  .editorial-band__header {
    margin-bottom: 1.5rem;
  }
  .project-video-grid {
    grid-template-columns: 1fr;
  }
  .project-video-card--portrait {
    max-width: min(100%, 360px);
  }
}

/* --- CTA Enhancements (Quiet Luxury) --- */
.project-page .cta-section:not(.bg-dark):not(.bg-night) .btn-primary,
.project-page section.bg-offwhite .btn-primary,
.project-page section.bg-cream .btn-primary {
  font-weight: 500;
  background: var(--white, #fff);
  box-shadow: 0 1px 0 rgba(44, 42, 38, 0.06), 0 8px 24px rgba(44, 42, 38, 0.08);
}

.project-page .cta-section:not(.bg-dark):not(.bg-night) .btn-primary:hover,
.project-page section.bg-offwhite .btn-primary:hover,
.project-page section.bg-cream .btn-primary:hover {
  box-shadow: 0 4px 20px rgba(44, 42, 38, 0.12);
  background: var(--dark);
}

.bg-dark .btn-primary,
.bg-night .btn-primary,
.cta-section.bg-dark .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Golden Visa project pages: long editorial sections need a wider desktop measure. */
@media (min-width: 1025px) {
  .project-page #location .section-intro > .t-body,
  .project-page #neighbourhood > .mx-auto > .t-body,
  .project-page #development-upside .container > .t-body {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    line-height: 1.78;
    text-align: left;
  }
}

/* Luxury Villa Faliro has extra-long editorial sections and anchor jumps. */
@media (min-width: 1025px) {
  .project-page--luxury-villa-faliro section[id] {
    scroll-margin-top: calc(var(--nav-height, 78px) + 2rem);
  }

  .project-page--luxury-villa-faliro :is(#location, #development-upside, #neighbourhood) .section-intro,
  .project-page--luxury-villa-faliro #development-upside .container,
  .project-page--luxury-villa-faliro #neighbourhood > .mx-auto {
    max-width: 1180px;
  }

  .project-page--luxury-villa-faliro #development-upside .container {
    text-align: center;
  }

  .project-page--luxury-villa-faliro #development-upside .t-subheading {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

.project-page--luxury-villa-faliro .project-hero__title,
.project-page--luxury-villa-faliro .project-hero__tagline {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.62);
}

.project-page--luxury-villa-faliro .project-hero__tagline {
  color: rgba(255, 255, 255, 0.96) !important;
  opacity: 1;
}

.project-page--luxury-villa-faliro #overview {
  padding-top: 2.75rem;
}

.project-page--luxury-villa-faliro #overview .fade-in {
  opacity: 1;
  transform: none;
}

/* Turkey citizenship detail block: single centered column, no duplicate threshold card. */
.gv-section-content--center {
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
    text-align: center;
}
.gv-section-content--center .gv-features {
    text-align: left;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.gv-citizenship-title {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
    .gv-citizenship-title {
        letter-spacing: 0.12em;
        font-size: clamp(1.45rem, 7vw, 2rem);
    }
}