/* =============================================================================
   Domovita Area Guide - editorial visual treatment
   Scoped to com_domovita's areaguide view (loaded by site/src/View/Areaguide).
   Replaces the prior unstyled .dv-ag-* fall-throughs with a structured layout:
   hero band with key-stat strip, gold eyebrow section labels, school cards,
   POI icon tiles, sold-prices striped table, listings grid, nearby chips.
   ========================================================================= */

/* ---- CSS variables (scoped to area guide so we don't collide with site) ---- */
.dv-ag {
    --ag-navy:        #0c1f3d;
    --ag-navy-soft:   #1f3a5f;
    --ag-gold:        #d3a55a;
    --ag-gold-soft:   #f4ede0;
    --ag-orange:      #e76f3a;
    --ag-chalk:       #f6f8fc;
    --ag-line:        #e2e8f0;
    --ag-line-soft:   #eef1f6;
    --ag-text:        #1a2533;
    --ag-text-muted:  #5a6878;
    --ag-radius:      12px;
    --ag-radius-sm:   8px;
    --ag-shadow:      0 1px 2px rgba(12,31,61,0.04), 0 4px 14px rgba(12,31,61,0.06);
    --ag-shadow-lift: 0 2px 6px rgba(12,31,61,0.08), 0 12px 28px rgba(12,31,61,0.10);
}

/* ---- Container override (the global .dv-ag rule sets max-width and padding;
        we drop padding so the hero can bleed full-width, then individual
        sections add their own .dv-wrap inset) ---- */
.dv-ag {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    color: var(--ag-text);
}
.dv-ag .dv-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* =============================================================================
   1. Hero
   ========================================================================= */
.dv-ag-hero {
    background:
        radial-gradient(circle at 80% -20%, rgba(211,165,90,0.22) 0%, rgba(12,31,61,0) 55%),
        linear-gradient(160deg, var(--ag-navy) 0%, #14305e 60%, #1f3a5f 100%);
    color: var(--ag-gold-soft);
    padding: 64px 0 56px;
    position: relative;
    overflow: hidden;
}
.dv-ag-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    opacity: 0.6;
}
.dv-ag-hero > * { position: relative; z-index: 1; }
.dv-ag-hero .dv-ag-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}
.dv-ag-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ag-gold);
    margin-bottom: 14px;
}
.dv-ag-hero-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--ag-gold);
    display: inline-block;
}
.dv-ag-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.1;
    margin: 0 0 18px;
    color: var(--ag-gold-soft);
    font-weight: 500;
    letter-spacing: -0.01em;
}
.dv-ag-hero h1 em {
    color: var(--ag-gold);
    font-style: italic;
}
.dv-ag-intro {
    max-width: 720px;
    margin: 0 0 32px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(244,237,224,0.78);
}

/* Key stats strip directly under hero (renders as 4 inline pills) */
.dv-ag-key-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}
.dv-ag-key-stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--ag-radius);
    padding: 16px 18px;
}
.dv-ag-key-stat-value {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    color: var(--ag-gold-soft);
    margin-bottom: 4px;
}
.dv-ag-key-stat-label {
    display: block;
    font-size: 12px;
    color: rgba(244,237,224,0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
@media (max-width: 720px) {
    .dv-ag-hero { padding: 40px 0 32px; }
    .dv-ag-key-stats { grid-template-columns: 1fr 1fr; }
    .dv-ag-key-stat-value { font-size: 22px; }
}

/* ---- Content body wrapper (everything except the hero bleeds-band) ---- */
.dv-ag-body {
    background: #fff;
    padding: 8px 0;
}
/* If the wrapper isn't present (older template), fall back to giving the
   first section after the hero its own white card via a sibling selector. */
.dv-ag-hero + .dv-ag-section {
    background: #fff;
    border-top: 0;
}

/* =============================================================================
   2. Section primitives
   ========================================================================= */
.dv-ag-section {
    padding: 56px 24px;
    border-top: 1px solid var(--ag-line-soft);
    background: #fff;
}
.dv-ag-section > * {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.dv-ag-section:first-of-type { border-top: 0; }
.dv-ag-section h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1.2;
    color: var(--ag-navy);
    margin: 0 0 8px;
    font-weight: 500;
}
.dv-ag-section h2 em {
    color: var(--ag-orange);
    font-style: italic;
}
.dv-ag-section h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--ag-navy);
    margin: 28px 0 12px;
    text-transform: none;
    letter-spacing: 0;
}
.dv-ag-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ag-orange);
    margin-bottom: 10px;
}
.dv-ag-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--ag-orange);
    display: inline-block;
}
.dv-ag-section-lead {
    max-width: 680px;
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ag-text-muted);
}
.dv-ag-attribution {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--ag-text-muted);
    font-style: italic;
}

/* =============================================================================
   3. Market summary (existing stat cards + by-type table)
   ========================================================================= */
.dv-ag-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.dv-ag-stat-card {
    background: #fff;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    padding: 22px 24px;
    box-shadow: var(--ag-shadow);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dv-ag-stat-value {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1;
    color: var(--ag-navy);
    font-weight: 600;
}
.dv-ag-stat-label {
    font-size: 13px;
    color: var(--ag-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dv-ag-stat-badges {
    align-items: flex-start;
}
.dv-ag-stat-badges .dv-ag-stat-label { margin-top: 8px; }

.dv-ag-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dv-ag-badge-green  { background: #dcfce7; color: #166534; }
.dv-ag-badge-blue   { background: #dbeafe; color: #1e40af; }
.dv-ag-badge-purple { background: #ede9fe; color: #6d28d9; }
.dv-ag-badge-grey   { background: #f3f4f6; color: #4b5563; }

/* =============================================================================
   4. Tables (Sold Prices, By Type)
   ========================================================================= */
.dv-ag-table-wrap {
    background: #fff;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    overflow: hidden;
    box-shadow: var(--ag-shadow);
}
.dv-ag-table {
    width: 100%;
    border-collapse: collapse;
}
.dv-ag-table thead th {
    background: var(--ag-chalk);
    color: var(--ag-navy);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ag-line);
}
.dv-ag-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ag-line-soft);
    font-size: 14px;
    color: var(--ag-text);
}
.dv-ag-table tbody tr:nth-child(odd) td { background: #fbfcfe; }
.dv-ag-table tbody tr:last-child td { border-bottom: 0; }
.dv-ag-table tbody tr:hover td { background: var(--ag-gold-soft); }

/* =============================================================================
   5. Schools (Ofsted pills)
   ========================================================================= */
.dv-ag-ofsted {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(0,0,0,0.04);
    color: inherit !important; /* override the inline color attribute - we set bg by rating */
}
.dv-ag-table tr td .dv-ag-ofsted[style*="166534"] { background: #dcfce7; color: #166534 !important; }
.dv-ag-table tr td .dv-ag-ofsted[style*="2563eb"] { background: #dbeafe; color: #1e40af !important; }
.dv-ag-table tr td .dv-ag-ofsted[style*="d97706"] { background: #fef3c7; color: #92400e !important; }
.dv-ag-table tr td .dv-ag-ofsted[style*="dc2626"] { background: #fee2e2; color: #991b1b !important; }
.dv-ag-ofsted-na {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #f3f4f6;
    color: #6b7280;
}

/* =============================================================================
   6. Weather (Met Office)
   ========================================================================= */
.dv-ag-weather-tiles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.dv-ag-weather-tile {
    background: linear-gradient(180deg, #f6f8fc 0%, #eaf0fa 100%);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    padding: 16px 8px 14px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dv-ag-weather-tile:hover { transform: translateY(-2px); box-shadow: var(--ag-shadow-lift); }
.dv-ag-weather-day {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ag-text-muted);
    margin-bottom: 8px;
}
.dv-ag-weather-icon { font-size: 28px; margin: 2px 0 6px; line-height: 1; }
.dv-ag-weather-label {
    font-size: 12px;
    color: var(--ag-text);
    margin-bottom: 6px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dv-ag-weather-temps { display: flex; justify-content: center; gap: 8px; }
.dv-ag-weather-max { font-weight: 700; color: var(--ag-navy); font-size: 16px; }
.dv-ag-weather-min { color: var(--ag-text-muted); font-size: 14px; }
@media (max-width: 720px) {
    .dv-ag-weather-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================================
   7. Local Amenities (POI cards)
   ========================================================================= */
.dv-ag-poi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.dv-ag-poi-group {
    background: #fff;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    padding: 20px 22px;
    box-shadow: var(--ag-shadow);
}
.dv-ag-poi-group h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ag-navy);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ag-line-soft);
}
.dv-ag-poi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ag-gold-soft);
    color: var(--ag-navy);
    flex-shrink: 0;
}
.dv-ag-poi-icon svg { width: 16px; height: 16px; }
.dv-ag-poi-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dv-ag-poi-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--ag-line-soft);
    font-size: 14px;
}
.dv-ag-poi-list li:last-child { border-bottom: 0; }
.dv-ag-poi-name { color: var(--ag-text); flex: 1; min-width: 0; }
.dv-ag-poi-dist {
    color: var(--ag-text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--ag-line-soft);
    border-radius: 999px;
    flex-shrink: 0;
}

/* =============================================================================
   8. IMD (Area Profile)
   ========================================================================= */
.dv-ag-imd {
    background: #fff;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    padding: 24px;
    box-shadow: var(--ag-shadow);
}
.dv-ag-imd-overall {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.dv-ag-imd-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    padding: 0 14px;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}
.dv-ag-imd-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--ag-navy);
}
.dv-ag-imd-decile {
    font-size: 13px;
    color: var(--ag-text-muted);
    background: var(--ag-chalk);
    padding: 4px 12px;
    border-radius: 999px;
}
.dv-ag-details {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ag-line-soft);
}
.dv-ag-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ag-orange);
    list-style: none;
    padding: 4px 0;
}
.dv-ag-details summary::-webkit-details-marker { display: none; }
.dv-ag-details summary::after { content: " ↓"; }
.dv-ag-details[open] summary::after { content: " ↑"; }
.dv-ag-details > .dv-ag-table-wrap { margin-top: 14px; }

/* =============================================================================
   9. Planning & Heritage
   ========================================================================= */
.dv-ag-planning {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.dv-ag-planning-item {
    background: var(--ag-chalk);
    border-left: 3px solid var(--ag-orange);
    border-radius: var(--ag-radius-sm);
    padding: 14px 18px;
    font-size: 14px;
    color: var(--ag-text);
}
.dv-ag-planning-item strong {
    display: block;
    font-size: 12px;
    color: var(--ag-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    font-weight: 700;
}

/* =============================================================================
   10. Browse Properties (listing cards)
   ========================================================================= */
.dv-ag-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.dv-ag-listing-card {
    background: #fff;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    overflow: hidden;
    box-shadow: var(--ag-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}
.dv-ag-listing-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ag-shadow-lift);
    border-color: var(--ag-navy-soft);
    text-decoration: none;
}
.dv-ag-listing-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #e8eef7 center / cover no-repeat;
}
.dv-ag-listing-noimg {
    background:
        linear-gradient(135deg, var(--ag-chalk) 0%, #d8e2f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dv-ag-listing-noimg::after {
    content: "🏠";
    font-size: 32px;
    opacity: 0.4;
}
.dv-ag-listing-info {
    display: flex;
    flex-direction: column;
    padding: 14px 18px 16px;
    gap: 4px;
}
.dv-ag-listing-price {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--ag-navy);
}
.dv-ag-listing-title {
    font-size: 14px;
    line-height: 1.35;
    color: var(--ag-text);
    margin-top: 2px;
}
.dv-ag-listing-meta {
    font-size: 12px;
    color: var(--ag-text-muted);
    margin-top: 4px;
}

/* CTA button shared by Browse + County views */
.dv-ag-cta {
    text-align: center;
    margin: 24px 0 0;
}
.dv-ag-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--ag-orange);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.dv-ag-cta-btn:hover {
    background: #cf5d2c;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

/* =============================================================================
   11. Nearby Areas (chip grid)
   ========================================================================= */
.dv-ag-nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.dv-ag-nearby-card {
    background: #fff;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    padding: 14px 18px;
    text-decoration: none;
    color: var(--ag-text);
    transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    display: block;
}
.dv-ag-nearby-card:hover {
    border-color: var(--ag-navy);
    transform: translateY(-1px);
    box-shadow: var(--ag-shadow);
    text-decoration: none;
    color: var(--ag-text);
}
.dv-ag-nearby-card h3 {
    font-family: inherit;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ag-navy) !important;
    margin: 0 0 4px !important;
    text-transform: none;
}
.dv-ag-nearby-county {
    display: block;
    font-size: 12px;
    color: var(--ag-text-muted);
    margin-bottom: 6px;
}
.dv-ag-nearby-dist {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ag-orange);
    background: rgba(231,111,58,0.10);
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =============================================================================
   12. Index + County views (town card grids)
   ========================================================================= */
.dv-ag-town-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.dv-ag-town-card {
    background: #fff;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    padding: 18px 22px;
    text-decoration: none;
    color: var(--ag-text);
    transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    display: block;
    box-shadow: var(--ag-shadow);
}
.dv-ag-town-card:hover {
    border-color: var(--ag-navy);
    transform: translateY(-2px);
    box-shadow: var(--ag-shadow-lift);
    text-decoration: none;
}
.dv-ag-town-card h3 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    color: var(--ag-navy) !important;
    margin: 0 0 6px !important;
    font-weight: 600 !important;
}
.dv-ag-town-county {
    font-size: 12px;
    color: var(--ag-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dv-ag-index .dv-ag-intro,
.dv-ag-county .dv-ag-intro {
    margin: 0 0 32px;
}

/* The index/county views also use .dv-ag-hero - reapply the inset there */
.dv-ag-index > h1,
.dv-ag-index > p.dv-ag-intro,
.dv-ag-index > h2 {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
.dv-ag-index > .dv-ag-town-grid {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.dv-ag-county > .dv-ag-hero {
    background: linear-gradient(160deg, var(--ag-navy) 0%, #14305e 100%);
    color: var(--ag-gold-soft);
    padding: 48px 24px;
}
.dv-ag-county > .dv-ag-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 4vw, 42px);
    color: var(--ag-gold-soft);
    margin: 0 0 12px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
.dv-ag-county > .dv-ag-hero .dv-ag-intro {
    color: rgba(244,237,224,0.8);
    max-width: 1180px;
    margin: 0 auto;
}

/* =============================================================================
   13. Card-missing (fallback states for soft-fail sections)
   ========================================================================= */
.dv-ag .dv-card-missing {
    background: var(--ag-chalk);
    border: 1px dashed var(--ag-line);
    border-radius: var(--ag-radius);
    padding: 24px;
    text-align: center;
    color: var(--ag-text-muted);
    font-size: 14px;
    font-style: italic;
}