/* ============================================================
   Verde Abitare: v5 design layer (VA_V4 5.1.0)
   Wave 2: archive photo head, richer cards, taller hero with CTAs,
   photo category tiles, gallery mosaic, header CTA + sticky shadow.
   Loads after v5-mobile.css. Brand tokens only.
   ============================================================ */

/* ------------------------------------------------------------
   ARCHIVE: photographic search head
   ------------------------------------------------------------ */
.va-search__headband { width: 100%; position: relative; overflow: hidden; background-color: var(--va-stone-light); }
.va-search__head--photo { position: relative; min-height: 300px; background-size: cover; background-position: center; }
.va-search__head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-height: 300px; padding: 28px 32px; }
.va-search__head--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    /* v7.75: velo uniforme 20% su tutta l immagine + sfumatura originale in basso */
    background:
        linear-gradient(rgba(20,22,15,0.20), rgba(20,22,15,0.20)),
        linear-gradient(to top,
        rgba(20,22,15,0.72) 0%,
        rgba(20,22,15,0.20) 55%,
        transparent 100%);
}
.va-search__head--photo > * { position: relative; }
.va-search__head--photo .va-kicker { color: #E8D9B8; }
.va-search__head--photo .va-search__title {
    color: #FDFBF7;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.05;
    margin: 6px 0 0;
    text-shadow: 0 2px 14px rgba(20,22,15,0.45);
}
.va-search__head--photo .va-search__headsub {
    color: rgba(253,251,247,.85);
    font-size: .875rem;
    margin: 8px 0 0;
    max-width: 46ch;
}
.va-search__head--photo .va-unesco-badge {
    filter: drop-shadow(0 2px 8px rgba(20,22,15,0.40));
}

/* Filters card lifts over the photo head */
.va-search .va-filters {
    background: var(--va-white);
    border: 1px solid var(--va-border);
    border-radius: var(--va-r, 10px);
    box-shadow: var(--va-shadow-lg);
    padding: 14px 16px;
    margin-top: -46px;
    position: relative;
    z-index: 5;
}

@media (max-width: 768px) {
    .va-search__head--photo { min-height: 200px; } .va-search__headband { margin-bottom: 14px; } .va-search__head-row { padding: 18px; min-height: 200px; }
    .va-search__head--photo .va-unesco-badge { width: 84px; }
    /* on mobile the sheet takes over: no lift */
    html.js-v5 .va-search .va-filters { margin-top: 0; }
}

/* ------------------------------------------------------------
   CARDS: taller photo, display price, alt-photo hover
   ------------------------------------------------------------ */
.va-pcard__media { aspect-ratio: 4 / 3; }
.va-pcard__img--alt {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s ease;
}
.va-pcard:hover .va-pcard__img--alt { opacity: 1; }
.va-pcard:hover .va-pcard__img { transform: none; } /* alt photo replaces the zoom */

.va-pcard__price {
    font-family: var(--va-font-body);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--va-dark);
}
.va-pcard__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: normal;
    font-size: 1.3rem;
    line-height: 1.25;
}
.va-pcard__photos {
    position: absolute;
    bottom: 10px; right: 10px;
    z-index: 2;
    background: rgba(20,22,15,0.62);
    color: #FDFBF7;
    font-size: .625rem;
    padding: 4px 9px;
    border-radius: 999px;
    backdrop-filter: blur(3px);
}

/* ------------------------------------------------------------
   HOME HERO: taller, stronger type, CTA row
   ------------------------------------------------------------ */
.va-hero { min-height: 540px; }
.va-hero__overlay {
    background: linear-gradient(to bottom,
        rgba(20,22,15,0.18),
        rgba(20,22,15,0.62));
}
.va-hero__title {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.va-hero__subtitle { font-size: 1rem; max-width: 52ch; }
.va-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.va-hero__actions .va-btn { min-height: 46px; padding: 0 22px; font-size: .875rem; }
.va-hero__actions .va-btn--ghost {
    background: color-mix(in srgb, var(--va-white) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--va-white) 55%, transparent);
    color: #FDFBF7;
    backdrop-filter: blur(4px);
}
.va-hero__actions .va-btn--ghost:hover { background: color-mix(in srgb, var(--va-white) 26%, transparent); color: #FDFBF7; }

@media (max-width: 768px) {
    .va-hero { min-height: 420px; }
}

/* ------------------------------------------------------------
   CATEGORY TILES: real photos per tipologia
   ------------------------------------------------------------ */
.va-shortcode--categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.va-category-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 170px;
    padding: 16px;
    border-radius: var(--va-r, 10px);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--va-sage-pale);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.va-category-tile:hover { transform: translateY(-3px); box-shadow: var(--va-shadow-lg); }
.va-category-tile--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(20,22,15,0.68),
        transparent 62%);
}
.va-category-tile > * { position: relative; }
.va-category-tile--photo .va-category-tile__icon { display: none; }
.va-category-tile--photo .va-category-tile__label {
    color: #FDFBF7;
    font-family: var(--va-font-body);
    font-weight: 600;
    font-size: 1.1875rem;
}
.va-category-tile--photo .va-category-tile__count {
    color: color-mix(in srgb, var(--va-paper,#FDFBF7) 82%, transparent);
    font-size: .75rem;
}
@media (max-width: 900px) { .va-shortcode--categories { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
    .va-shortcode--categories { grid-template-columns: 1fr 1fr; gap: 10px; }
    .va-category-tile { min-height: 130px; padding: 12px; }
}

/* ------------------------------------------------------------
   SINGLE: gallery mosaic + stronger price
   ------------------------------------------------------------ */
.va-gallery--mosaic .va-gallery__wrap {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    border-radius: var(--va-radius-md, 10px);
    overflow: hidden;
}
.va-gallery--mosaic .va-gallery__main {
    grid-row: 1 / 3;
    aspect-ratio: auto;
    height: 100%;
    min-height: 420px;
    border-radius: 0;
}
.va-gallery__side {
    position: relative;
    padding: 0;
    border: none;
    cursor: pointer;
    background: var(--va-stone-light);
    overflow: hidden;
    min-height: 0;
}
.va-gallery__side img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.va-gallery__side:hover img { transform: scale(1.04); }
.va-gallery__all {
    position: absolute;
    bottom: 12px; left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--va-white) 94%, transparent);
    color: var(--va-dark);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--va-shadow);
}
@media (max-width: 900px) {
    .va-gallery--mosaic .va-gallery__wrap { display: block; }
    .va-gallery--mosaic .va-gallery__main { min-height: 0; aspect-ratio: 4/3; }
    .va-gallery__side { display: none; }
}

.va-detail-price {
    font-family: var(--va-font-body);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    color: var(--va-dark);
}

/* ------------------------------------------------------------
   HEADER: CTA + sticky shadow
   ------------------------------------------------------------ */
.va-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--va-sage);
    color: #FDFBF7;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease;
}
.va-header__cta:hover { background: color-mix(in srgb, var(--va-sage) 85%, var(--va-dark)); }

.va-header.is-stuck {
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: var(--va-shadow-lg);
}
.va-header { position: sticky; top: 0; z-index: 900; transition: box-shadow .2s ease; }

@media (max-width: 768px) {
    .va-header__cta { display: none; } /* mobile: CTA lives in bottom nav / sticky bar */
}