/* ============================================================
   Verde Abitare: Shortcodes CSS
   Styling for all va_* shortcode template-parts
   ============================================================ */

/* ---- va_featured / grid wrapper ---- */
.va-shortcode--featured { margin-top: 8px; }

/* ---- va_map ---- */
.va-shortcode--map {
    width: 100%;
    height: 340px;
    background-color: var(--va-stone-light);
    border-radius: var(--va-radius-md);
    border: 0.5px solid var(--va-border);
    position: relative;
    overflow: hidden;
}

/* ---- va_categories ---- */
.va-shortcode--categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.va-category-tile {
    background: var(--va-white);
    border: 0.5px solid var(--va-border);
    border-radius: var(--va-radius-md);
    padding: var(--va-space-md);
    text-align: center;
    transition: box-shadow 0.2s, transform 0.15s;
}

.va-category-tile:hover {
    box-shadow: var(--va-shadow-sm);
    transform: translateY(-2px);
}

.va-category-tile__icon { color: var(--va-sage); margin-bottom: 8px; }
.va-category-tile__label { font-size: 0.75rem; font-weight: 500; color: var(--va-dark); }
.va-category-tile__count { font-size: 0.625rem; color: var(--va-warm-light); }

/* ---- va_mortgage_calc ---- */
.va-shortcode--mortgage-calc {
    background: var(--va-sage-pale);
    border-radius: var(--va-radius-md);
    padding: var(--va-space-lg);
}

.va-mortgage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--va-space-sm);
}

.va-mortgage-result {
    background: var(--va-white);
    border-radius: var(--va-radius-sm);
    padding: var(--va-space-md);
    text-align: center;
    margin-top: var(--va-space-md);
}

.va-mortgage-result__value { font-size: 1.5rem; font-weight: 600; color: var(--va-sage); }

/* ---- va_cta_reserved (dark block) ---- */
.va-shortcode--cta-reserved {
    background: linear-gradient(135deg, #1C1A17 0%, #2A2722 55%, #3A352C 100%);
    border: 0.5px solid var(--va-gold);
    border-radius: var(--va-radius-lg);
    padding: var(--va-space-2xl) var(--va-space-lg);
    text-align: center;
    color: rgba(255,255,255,0.7);
}
.va-shortcode--cta-reserved h2 { color: #fff; }

.va-cta-reserved__perks {
    list-style: none;
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    margin: var(--va-space-lg) auto;
}
.va-cta-reserved__perks li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.85);
}
.va-cta-reserved__perks li svg { color: var(--va-gold); flex-shrink: 0; }

/* ---- va_atelier (light/dark variants: verticalization) ---- */
.va-shortcode--atelier {
    border-radius: var(--va-radius-lg);
    padding: var(--va-space-xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--va-space-lg);
    align-items: center;
}

.va-atelier--light {
    background: var(--va-sage-pale);
    border: 0.5px solid var(--va-sage-light);
}

.va-atelier--dark {
    background: linear-gradient(120deg, #14120F 0%, #221F1A 45%, #35301F 100%);
    border: 0.5px solid var(--va-gold);
    color: rgba(255,255,255,0.65);
}
.va-atelier--dark h2, .va-atelier--dark h3 { color: #fff; }

/* ---- va_reviews ---- */
.va-shortcode--reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--va-space-md);
    margin-top: 12px;
}

.va-review-card {
    background: var(--va-white);
    border: 0.5px solid var(--va-border);
    border-radius: var(--va-radius-md);
    padding: var(--va-space-md);
}
.va-review-card__stars { color: var(--va-gold); font-size: 0.75rem; }
.va-review-card__text { font-size: 0.75rem; color: var(--va-warm); margin: 8px 0; }
.va-review-card__author { font-size: 0.6875rem; font-weight: 500; color: var(--va-dark); }

/* ---- va_contact_form ---- */
.va-shortcode--contact-form .va-field { margin-bottom: var(--va-space-sm); }

/* ---- va_compare_bar (floating) ---- */
.va-shortcode--compare-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--va-ink);
    color: #fff;
    padding: var(--va-space-sm) var(--va-space-lg);
    display: none;
    align-items: center;
    justify-content: space-between;
    z-index: 90;
}
.va-shortcode--compare-bar.is-active { display: flex; }

/* ---- va_prop_specs ---- */
.va-shortcode--prop-specs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--va-space-sm);
    background: var(--va-sage-pale);
    border-radius: var(--va-radius-md);
    padding: var(--va-space-md);
    margin: var(--va-space-md) 0;
}
.va-spec-item { text-align: center; }
.va-spec-item__value { font-size: 0.875rem; font-weight: 600; color: var(--va-dark); }
.va-spec-item__label { font-size: 0.5625rem; color: var(--va-warm-light); text-transform: uppercase; }

/* ---- va_energy_class ---- */
.va-shortcode--energy-class { display: flex; gap: 2px; }
.va-energy-bar {
    flex: 1;
    padding: 6px 0;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: #fff;
    opacity: 0.3;
}
.va-energy-bar.is-active { opacity: 1; }

/* ---- va_share_save ---- */
.va-shortcode--share-save { display: flex; gap: var(--va-space-sm); }

/* ---- va_poi_map ---- */
.va-shortcode--poi-map {
    width: 100%;
    height: 300px;
    background-color: var(--va-stone-light);
    border-radius: var(--va-radius-md);
    position: relative;
    overflow: hidden;
}
.va-poi-legend {
    display: flex;
    gap: var(--va-space-md);
    flex-wrap: wrap;
    margin-top: var(--va-space-sm);
    font-size: 0.625rem;
    color: var(--va-warm-light);
}

/* ---- va_cta_appointment ---- */
.va-shortcode--cta-appointment { background: var(--va-cream); padding: var(--va-space-2xl) 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .va-shortcode--categories { grid-template-columns: repeat(2, 1fr); }
    .va-shortcode--atelier { grid-template-columns: 1fr; }
    .va-shortcode--reviews { grid-template-columns: 1fr; }
    .va-shortcode--prop-specs { grid-template-columns: repeat(3, 1fr); }
}