/*
 * homepage.css — Pink Vision Ottica
 * Design system: directory of truth / design-system.md
 *
 * REGOLE:
 *  - Zero HEX hardcodati — solo token CSS
 *  - Testo scelto dalla tabella contrasti (§3 design-system.md)
 *  - Poppins 300 body / 600 titoli
 *  - Focus-visible 3px solid var(--color-primary)
 *  - prefers-reduced-motion: rispettato su ticker e transizioni
 */

/* ═══════════════════════════════════════════════════════════════════════
   0. DESIGN SYSTEM TOKENS (specchio da design-system.md)
═══════════════════════════════════════════════════════════════════════ */
:root {
    /* Colori brand */
    --color-primary:        #bc4e90!important;
    --color-primary-light:  #f7e8e2;
    --color-primary-dark:   #962c76;
    --color-primary-aa:     #c73d9e;
    --color-bg-blue:        #d1e2eb;
    --color-white:          #ffffff;
    --color-bg-warm:        #faf7f5;
    --color-surface:        #f2ebe8;
    --color-border:         #e0cfc9;
    --color-text-dark:      #2b1f22;
    --color-text-body:      #4a3840;
    --color-text-muted:     #7a6870;

    /* Tipografia */
    --font-primary:         'Poppins', sans-serif;
    --font-weight-light:    300;
    --font-weight-semibold: 600;
    --text-h1:   clamp(1.75rem, 4vw, 2.75rem);
    --text-h2:   clamp(1.375rem, 3vw, 2rem);
    --text-h3:   clamp(1.125rem, 2.5vw, 1.5rem);
    --text-h4:   clamp(1rem, 2vw, 1.25rem);
    --text-body: clamp(0.9375rem, 1.5vw, 1.0625rem);
    --text-sm:   0.875rem;
    --leading-tight:  1.2;
    --leading-normal: 1.6;

    /* Spaziatura */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
}

/* Google Font (se non già caricato da Divi) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');


/* ═══════════════════════════════════════════════════════════════════════
   1. BASE / UTILITY
═══════════════════════════════════════════════════════════════════════ */

.hp {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size:   var(--text-body);
    line-height: var(--leading-normal);
    color:       var(--color-text-body);
    background:  var(--color-bg-warm);
}

/* Visually hidden — accessibile agli screen reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Container centrato */
.hp__container {
    width: min(90%, 1200px);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* Sezione generica */
.hp__section {
    padding-block: var(--space-20);
}

/* Header di sezione */
.hp__section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.hp__section-title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size:   var(--text-h2);
    line-height: var(--leading-tight);
    color:       var(--color-text-dark);
    margin: 0 0 var(--space-3);
}

.hp__section-lead {
    font-size:   var(--text-body);
    color:       var(--color-text-body);
    max-width:   60ch;
    margin-inline: auto;
}

/* Sezioni alternate (classi dal design-system) */
.section-alt  { background: var(--color-surface);       color: var(--color-text-body); }
.section-pink { background: var(--color-primary-light); color: var(--color-text-body); }
.section-blue { background: var(--color-bg-blue);       color: var(--color-text-body); }
.section-alt h2, .section-pink h2, .section-blue h2 { color: var(--color-text-dark); }

/* Focus accessibile (WCAG 2.4.7) */
.hp *:focus-visible {
    outline:        3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius:  4px;
}
.hp *:focus:not(:focus-visible) { outline: none; }

/* Pulsante primario */
.btn-primary {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--space-2);
    background:     var(--color-primary);
    color:          var(--color-white);
    font-family:    var(--font-primary);
    font-weight:    var(--font-weight-semibold);
    font-size:      1rem;
    padding:        0.75rem 1.75rem;
    border-radius:  2rem;
    border:         none;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor:         pointer;
    transition:     background 0.2s, transform 0.15s;
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--color-primary-dark);
    color:      var(--color-white);
    transform:  translateY(-1px);
}

/* Card base */
.card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: 1rem;
    padding:       var(--space-6);
    color:         var(--color-text-body);
}
.card h3 {
    color:     var(--color-text-dark);
    font-size: var(--text-h4);
}


/* ═══════════════════════════════════════════════════════════════════════
   2. HERO
   Sfondo: --color-primary-dark  |  Testo: --color-white (AAA 7.2:1)
═══════════════════════════════════════════════════════════════════════ */

.hp__hero {
    position:        relative;
    background:      var(--color-primary-dark);
    color:           var(--color-white);
    padding-block:   var(--space-20);
    overflow:        hidden;
}

.hp__hero--has-bg {
    background-image:    var(--hero-bg);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}

/* Overlay scuro per garantire contrasto su immagine */
.hp__hero-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(43, 31, 34, 0.62); /* --color-text-dark @ 62% */
    z-index:    0;
}

.hp__hero-inner {
    position:   relative;
    z-index:    1;
    display:    flex;
    flex-direction: column;
    align-items: flex-start;
    gap:         var(--space-6);
    max-width:   700px;
}

.hp__hero-title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size:   var(--text-h1);
    line-height: var(--leading-tight);
    color:       var(--color-white);
    margin:      0;
}

.hp__hero-sub {
    font-size:   var(--text-body);
    color:       var(--color-primary-light); /* --color-primary-light su dark: 5.8:1 AA */
    margin:      0;
    max-width:   55ch;
    line-height: var(--leading-normal);
}

.hp__hero-cta {
    margin-top: var(--space-2);
}


/* ═══════════════════════════════════════════════════════════════════════
   3. TICKER — testo scorrevole
   Sfondo: --color-primary (decorativo, nessun testo corpo)
   Testo: --color-white (grande/semibold — AA grande 3.1:1)
═══════════════════════════════════════════════════════════════════════ */

.hp__ticker-wrap {
    position:   relative;
    background: var(--color-primary);
    overflow:   hidden;
    padding-block: var(--space-3);
    display:    flex;
    align-items: center;
}

.hp__ticker {
    flex:     1;
    overflow: hidden;
}

.hp__ticker-track {
    display:    flex;
    align-items: center;
    gap:        var(--space-6);
    width:      max-content;
    animation:  ticker-scroll calc(var(--ticker-count, 4) * 5s) linear infinite;
    will-change: transform;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Rispetta la preferenza di riduzione del movimento (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .hp__ticker-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.hp__ticker-item {
    font-family:    var(--font-primary);
    font-weight:    var(--font-weight-semibold);
    font-size:      1.0625rem; /* >= 18px equiv — AA grande OK */
    color:          var(--color-white);
    white-space:    nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hp__ticker-sep {
    color:       var(--color-primary-light);
    font-size:   0.75rem;
    flex-shrink: 0;
}

/* Pulsante pausa */
.hp__ticker-pause {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       2.25rem;
    height:      2.25rem;
    margin-inline: var(--space-4);
    background:  transparent;
    border:      2px solid var(--color-white);
    border-radius: 50%;
    color:       var(--color-white);
    cursor:      pointer;
    font-size:   0.7rem;
    transition:  background 0.2s;
    line-height: 1;
}

.hp__ticker-pause:hover,
.hp__ticker-pause:focus-visible {
    background: rgba(255, 255, 255, 0.2);
}

/* Icone play/pause — visibilità alternata */
.hp__ticker-pause-icon { display: block; }
.hp__ticker-pause-icon--play  { display: none; }
.hp__ticker-pause[aria-pressed="true"] .hp__ticker-pause-icon--play  { display: block; }
.hp__ticker-pause[aria-pressed="true"] .hp__ticker-pause-icon--pause { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   4. SERVIZI
   Sfondo: --color-bg-warm (avorio)
═══════════════════════════════════════════════════════════════════════ */

.hp__servizi {
    background: var(--color-bg-warm);
}

.hp__servizi-grid {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:        var(--space-6);
}

.hp__servizio-card {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-3);
    transition:     box-shadow 0.2s, transform 0.2s;
}

.hp__servizio-card:hover {
    box-shadow: 0 4px 24px rgba(43, 31, 34, 0.10);
    transform:  translateY(-3px);
}

.hp__servizio-icon {
    font-size: 2rem;
    line-height: 1;
}

.hp__servizio-title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size:   var(--text-h4);
    color:       var(--color-text-dark);
    margin:      0;
}

.hp__servizio-desc {
    font-size: var(--text-body);
    color:     var(--color-text-body);
    margin:    0;
    line-height: var(--leading-normal);
}


/* ═══════════════════════════════════════════════════════════════════════
   5. CATEGORIE — Donna / Uomo / Bambino
   Sfondo: --color-surface (cipria)
═══════════════════════════════════════════════════════════════════════ */

.hp__categorie {
    background: var(--color-surface);
}

.hp__cat-grid {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    grid;
    grid-template-columns: repeat(3, 1fr);
    gap:        var(--space-6);
}

.hp__cat-item {
    border-radius: 1rem;
    overflow:      hidden;
}

.hp__cat-link {
    display:  block;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    text-decoration: none;
    aspect-ratio: 3 / 4;
    background: var(--color-border);
}

.hp__cat-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.4s ease;
}

.hp__cat-link:hover .hp__cat-img,
.hp__cat-link:focus-visible .hp__cat-img {
    transform: scale(1.05);
}

.hp__cat-placeholder {
    width:      100%;
    height:     100%;
    background: var(--color-border);
}

.hp__cat-label {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    var(--space-4) var(--space-6);
    background: linear-gradient(to top, rgba(43, 31, 34, 0.75) 0%, transparent 100%);
    color:      var(--color-white);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size:  var(--text-h3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════════
   6. NOVITÀ
   Sfondo: --color-primary-light (rosa salmone)
   Layout: 50% testo | 50% immagine
═══════════════════════════════════════════════════════════════════════ */

.hp__novita {
    background: var(--color-primary-light);
}

.hp__novita-inner {
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       var(--space-16);
    align-items: center;
}

.hp__novita-content {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

.hp__novita-content .hp__section-title {
    text-align: left;
    margin:     0;
}

.hp__novita-testo {
    font-size:   var(--text-body);
    color:       var(--color-text-body);
    line-height: var(--leading-normal);
}

/* Stili WYSIWYG interni */
.hp__novita-testo p  { margin-bottom: var(--space-4); }
.hp__novita-testo a  { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.hp__novita-testo a:hover { color: var(--color-text-dark); }

.hp__novita-placeholder {
    color:      var(--color-text-muted);
    font-size:  var(--text-sm);
    font-style: italic;
}

.hp__novita-media {
    border-radius: 1rem;
    overflow:      hidden;
}

.hp__novita-img {
    width:         100%;
    height:        auto;
    display:       block;
    border-radius: 1rem;
    object-fit:    cover;
    aspect-ratio:  4 / 3;
}

.hp__novita-img-placeholder {
    width:         100%;
    aspect-ratio:  4 / 3;
    background:    var(--color-border);
    border-radius: 1rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   6b. CHI SIAMO — breve presentazione
   Sfondo: bianco
═══════════════════════════════════════════════════════════════════════ */

/* Chi Siamo — Group block con classe aggiuntiva "hp-chi-siamo-block" */
.hp-chi-siamo-block {
    background:    var(--color-white) !important;
    text-align:    center;
    padding-block: var(--space-20);
}

.hp-chi-siamo-block h2 {
    font-family:   var(--font-primary);
    font-size:     var(--text-h2);
    font-weight:   var(--font-weight-semibold);
    line-height:   var(--leading-tight);
    color:         var(--color-text-heading);
    max-width:     720px;
    margin-inline: auto;
}

.hp-chi-siamo-block > p,
.hp-chi-siamo-block > .wp-block-group__inner-container > p {
    font-family:   var(--font-primary);
    font-size:     var(--text-body);
    font-weight:   var(--font-weight-light);
    line-height:   var(--leading-normal);
    color:         var(--color-text-body);
    max-width:     700px;
    margin-inline: auto;
    margin-top:    var(--space-6);
}

.hp-chi-siamo-block .wp-block-buttons {
    justify-content: center;
    margin-top:      var(--space-8);
}

.hp-chi-siamo-block .wp-block-button__link {
    font-family:      var(--font-primary) !important;
    font-size:        var(--text-sm) !important;
    font-weight:      var(--font-weight-semibold) !important;
    color:            var(--color-white) !important;
    background:       var(--color-primary) !important;
    border-radius:    2rem !important;
    padding:          0.75rem 2rem !important;
    text-decoration:  none !important;
    transition:       background 0.2s, transform 0.2s !important;
}

.hp-chi-siamo-block .wp-block-button__link:hover,
.hp-chi-siamo-block .wp-block-button__link:focus-visible {
    background: var(--color-primary-dark) !important;
    transform:  translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════════════
   6b. MARCHI — Group block con classe "hp-marchi-block"
   Sfondo: bianco
═══════════════════════════════════════════════════════════════════════ */

.hp-marchi-block {
    background:    var(--color-white) !important;
    text-align:    center;
    padding-block: var(--space-20);
}

.hp-marchi-block h2 {
    font-family:   var(--font-primary);
    font-size:     var(--text-h2);
    font-weight:   var(--font-weight-semibold);
    line-height:   var(--leading-tight);
    color:         var(--color-text-heading);
}

.hp-marchi-block .wp-block-columns {
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.hp-marchi-block .wp-block-columns:last-child {
    margin-bottom: 0;
}

.hp-marchi-block .wp-block-image {
    aspect-ratio:  16 / 9;
    overflow:      hidden;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    margin:        0;
}

.hp-marchi-block .wp-block-image img {
    width:         100%;
    height:        100%;
    object-fit:    contain;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. ORARI NEGOZIO
   Sfondo: --color-bg-warm
═══════════════════════════════════════════════════════════════════════ */

.hp__orari {
    background:  var(--color-bg-warm);
    border-top:  1px solid var(--color-border);
}

.hp__orari-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:                   var(--space-3) var(--space-8);
    max-width:             900px;
    margin-inline:         auto;
}

.hp__orari-row {
    display:     flex;
    align-items: baseline;
    gap:         var(--space-3);
    padding:     var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.hp__orari-row--chiuso .hp__orari-giorno,
.hp__orari-row--chiuso .hp__orari-fasce {
    color: var(--color-text-muted);
}

.hp__orari-giorno {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size:   var(--text-body);
    color:       var(--color-text-dark);
    min-width:   7rem;
    flex-shrink: 0;
}

.hp__orari-fasce {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--space-2) var(--space-4);
    font-size:   var(--text-body);
    color:       var(--color-text-body);
}

.hp__orari-fascia {
    white-space: nowrap;
}

.hp__orari-fascia + .hp__orari-fascia::before {
    content: '·';
    margin-right: var(--space-4);
    color: var(--color-text-muted);
}

.hp__orari-chiuso,
.hp__orari-nd {
    color:      var(--color-text-muted);
    font-size:  var(--text-sm);
    font-style: italic;
}

.hp__orari-appuntamento {
    color:       var(--color-primary-dark); /* AAA su --color-bg-blue */
    font-weight: var(--font-weight-semibold);
    font-size:   var(--text-sm);
}


/* ═══════════════════════════════════════════════════════════════════════
   8. BLOCCHI GUTENBERG — override e stili custom
═══════════════════════════════════════════════════════════════════════ */

/* Wrapper: azzera margini/gap di WP core e Divi */
.hp__blocks-area {
    margin:  0;
    padding: 0;
    overflow-x: hidden;
}
.hp__blocks-area > * {
    margin-block-start: 0 !important;
    margin-block-end:   0 !important;
}

/* ── Pulsante brand ─────────────────────────────────────────────────── */
.hp-btn-primary .wp-block-button__link {
    background:      var(--color-primary) !important;
    color:           var(--color-white) !important;
    border-radius:   2rem !important;
    font-family:     var(--font-primary);
    font-weight:     var(--font-weight-semibold);
    font-size:       1rem;
    padding:         0.75rem 1.75rem !important;
    letter-spacing:  0.04em;
    border:          none !important;
    box-shadow:      none !important;
    text-decoration: none;
    transition:      background 0.2s, transform 0.15s;
}
.hp-btn-primary .wp-block-button__link:hover,
.hp-btn-primary .wp-block-button__link:focus-visible {
    background: var(--color-primary-dark) !important;
    color:      var(--color-white) !important;
    transform:  translateY(-1px);
}

/* ── Hero (layout: default — no Gutenberg constrained) ──────────────── */
.wp-block-group.hp-hero-block {
    background-color:    var(--color-primary-dark);
    background-image:    var(--hero-bg-image, none);
    background-size:     cover;
    background-position: center;
    position:            relative;
    color:               var(--color-white);
    padding-block:       var(--space-20);
    /* Padding laterale auto-adattivo: centra 1200px di contenuto */
    padding-inline:      max(var(--space-6), calc((100% - 1200px) / 2 + var(--space-8)));
}

/* Overlay scuro quando c'è un'immagine di sfondo */
.wp-block-group.hp-hero-block:has(> .wp-block-group.hp-hero-inner)::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background:       linear-gradient(135deg, rgba(150, 44, 118, 0.82) 0%, rgba(43, 31, 34, 0.55) 100%);
    pointer-events:   none;
}
.wp-block-group.hp-hero-block .wp-block-group.hp-hero-inner {
    position: relative;
    z-index:  1;
}

/* Il div .hp-hero-inner evita che i child block siano troppo larghi */
.hp-hero-block .hp-hero-inner {
    max-width:      700px;
    margin-inline:  0 !important;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

/* Gutenberg constrained layout forza margin auto sui figli — override */
.hp-hero-block .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    margin-left:  0 !important;
    margin-right: 0 !important;
}

.hp-hero-block h1,
.hp-hero-block .hp-hero-title {
    font-family:  var(--font-primary);
    font-weight:  var(--font-weight-semibold);
    font-size:    var(--text-h1);
    line-height:  var(--leading-tight);
    color:        var(--color-white);
    margin:       0;
}

.hp-hero-block .hp-hero-sub {
    color:       var(--color-primary-light);
    font-size:   var(--text-body);
    max-width:   55ch;
    line-height: var(--leading-normal);
    margin:      0;
}

/* ── Ticker wrapper ─────────────────────────────────────────────────── */
.wp-block-group.hp-ticker-wrapper {
    padding:            0 !important;
    margin:             0 !important;
    margin-top:         0 !important;
    margin-block-start: 0 !important;
    margin-block-end:   0 !important;
    overflow:           hidden;
}
.hp-ticker-wrapper p{
    display:none!important;
}
/* Specificità alta (0,3,0): batte .is-layout-flow > :not(:first-child) (0,2,0) */
.wp-block-group.hp-hero-block + .wp-block-group.hp-ticker-wrapper,
.is-layout-flow > .wp-block-group.hp-ticker-wrapper,
.is-layout-constrained > .wp-block-group.hp-ticker-wrapper,
.hp__blocks-area > .wp-block-group.hp-ticker-wrapper {
    margin-top:         0 !important;
    margin-block-start: 0 !important;
}
/* Nascondi il wrapper se il ticker è vuoto (shortcode non ha prodotto output) */
.wp-block-group.hp-ticker-wrapper:not(:has(.hp__ticker-wrap)) {
    display: none !important;
}
.hp-ticker-wrapper .hp__ticker-wrap {
    max-width: none;
    width:     100%;
}

/* ── Collezione — sfondo scuro, layout constrained (come Servizi) ────── */
.wp-block-group.hp-categorie {
    background:    var(--color-primary-dark);
    padding-block: var(--space-20);
}
/* Override max-width Gutenberg → 1200px (come Servizi) */
.hp-categorie.is-layout-constrained > * {
    max-width: min(90%, 1200px) !important;
}
.hp-categorie > .wp-block-heading {
    font-family: var(--font-primary);
    font-size:   var(--text-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    color:       var(--color-white);
}
.hp-categorie .hp__section-lead {
    color: rgba(255, 255, 255, 0.75);
}

/* Griglia colonne */
.wp-block-columns.hp-cat-grid {
    margin-top:  var(--space-8) !important;
    gap:         var(--space-6) !important;
    align-items: stretch;
}

/* Card colonna */
.wp-block-column.hp-cat-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-6);
    padding:        var(--space-8) var(--space-6);
    text-align:     center;
    background:     rgba(255, 255, 255, 0.10);
    border:         1px solid rgba(255, 255, 255, 0.20);
    border-radius:  1rem;
    min-width:      0;
}

/* Immagine */
.hp-cat-item .wp-block-image,
.hp-cat-item .hp-cat-image {
    width:         100%;
    margin:        0;
    overflow:      hidden;
    border-radius: 0.75rem;
}
.hp-cat-item .hp-cat-image img {
    width:         100%;
    aspect-ratio:  5 / 4;
    object-fit:    cover;
    display:       block;
    border-radius: 0.75rem;
    background:    rgba(255, 255, 255, 0.15);
}
.hp-cat-item .hp-cat-image figure {
    margin: 0;
}

/* Titolo e testi colonna */
.hp-cat-item .wp-block-heading,
.hp-cat-item h3 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size:   var(--text-h3);
    color:       var(--color-white);
    margin:      0;
}
.hp-cat-item p {
    color: rgba(255, 255, 255, 0.80);
}

/* ── Servizi — sfondo bianco, card colorate ──────────────────────────── */
.wp-block-group.hp-servizi {
    background:    var(--color-white);
    padding-block: var(--space-20);
}

/* Allinea la larghezza a hp__container (min(90%, 1200px)) */
.hp-servizi.is-layout-constrained > * {
    max-width: min(90%, 1200px) !important;
}

.hp-servizi > .wp-block-heading {
    font-family: var(--font-primary);
    font-size:   var(--text-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    color:       var(--color-text-dark);
}

.hp-servizi .hp__section-lead {
    color:         var(--color-text-body);
    max-width:     60ch;
    margin-inline: auto;
}

.wp-block-columns.hp-servizi-grid {
    gap:         var(--space-6) !important;
    margin-top:  var(--space-8) !important;
    align-items: stretch;
}

/* Card — colori ruotati dal design system */
.wp-block-group.hp-card {
    border-radius:   1rem;
    border:          1px solid var(--color-border);
    background:      var(--color-bg-warm);
    padding:         var(--space-8) var(--space-6);
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             var(--space-3);
    height:          100%;
    transition:      box-shadow 0.2s, transform 0.2s;
}
.wp-block-group.hp-card:hover {
    box-shadow: 0 4px 24px rgba(43, 31, 34, 0.10);
    transform:  translateY(-3px);
}


.hp-card-icon {
    display:       block;
    width:         3rem;
    height:        3rem;
    object-fit:    contain;
    margin-bottom: var(--space-2);
    margin-inline: auto;
}

.hp-card .wp-block-heading,
.hp-card h3 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size:   var(--text-h4);
    color:       var(--color-text-dark);
    margin:      0;
}

.hp-card p {
    font-size:   var(--text-body);
    color:       var(--color-text-body);
    margin:      0;
    line-height: var(--leading-normal);
}

/* ── Novità label ────────────────────────────────────────────────────── */
.hp__novita-label {
    font-family:    var(--font-primary);
    font-weight:    var(--font-weight-semibold);
    font-size:      var(--text-sm);
    color:          var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin:         0;
}


/* ═══════════════════════════════════════════════════════════════════════
   9. RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

/* Tablet ≤ 980px */
@media (max-width: 980px) {

    .hp__section {
        padding-block: var(--space-16);
    }

    /* Gutenberg block sections */
    .wp-block-group.hp-servizi {
        padding-block: var(--space-16);
    }
    .wp-block-group.hp-hero-block {
        padding-block: var(--space-16);
        padding-inline: var(--space-6);
    }

    /* Categorie: 3 col → stack verticale su tablet */
    .wp-block-columns.hp-cat-grid {
        flex-wrap: wrap;
    }
    .wp-block-column.hp-cat-item {
        flex-basis: 100% !important;
    }
    .wp-block-group.hp-categorie {
        padding-block: var(--space-16);
    }
    .wp-block-group.hp-chi-siamo-block {
        padding-block: var(--space-16);
    }
    .wp-block-group.hp-marchi-block {
        padding-block: var(--space-16);
    }

    .hp__novita-inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .hp__novita-media {
        order: -1;
    }
}

/* Mobile ≤ 600px */
@media (max-width: 600px) {

    .hp__section {
        padding-block: var(--space-12);
    }

    .hp__section-header {
        margin-bottom: var(--space-8);
    }

    /* Gutenberg block sections */
    .wp-block-group.hp-servizi {
        padding-block: var(--space-12);
    }
    .wp-block-group.hp-hero-block {
        padding-block: var(--space-12);
        padding-inline: var(--space-4);
    }

    /* Servizi: 1 colonna su mobile */
    .wp-block-columns.hp-servizi-grid {
        flex-direction: column !important;
    }

    .wp-block-columns.hp-servizi-grid > .wp-block-column {
        flex-basis: 100% !important;
        flex-grow: 0;
    }

    /* Categorie: 1 colonna per ciascuna su mobile */
    .wp-block-column.hp-cat-item {
        flex-basis: 100% !important;
    }
    .wp-block-group.hp-chi-siamo-block {
        padding-block: var(--space-12);
    }
    .wp-block-group.hp-marchi-block {
        padding-block: var(--space-12);
    }
    .hp-marchi-block .wp-block-columns {
        flex-direction: column !important;
    }

    .hp__orari-grid {
        grid-template-columns: 1fr;
    }

    .hp__orari-grid {
        grid-template-columns: 1fr;
    }

    .hp__orari-row {
        flex-direction: column;
        gap: var(--space-1);
    }

    .hp__ticker-pause {
        margin-inline: var(--space-2);
    }

    .hp-hero-block .hp-hero-inner {
        max-width: 100%;
    }
}