/* =========================================================
 * VALORE24 — Responsive Additions (non-intrusive)
 * - Mantiene layout intatto su desktop
 * - Ottimizza mobile, rimuove hero slider sotto 768px
 * =======================================================*/

/* Fluid base */
img, video { max-width: 100%; height: auto; }
.container { width: min(1140px, 92%); margin-inline: auto; }
h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.2rem, 0.9rem + 1.2vw, 1.8rem); }

/* Grids common */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stack-on-mobile > * + * { margin-top: 16px; }
  .btn { width: 100%; }
}

/* === Remove/Hide hero slider on small screens ===
   Supporta varie librerie: Swiper, Slick, Glide, Splide, Owl, ecc. */
@media (max-width: 768px) {
  .hero, .hero-slider, .hero__slider, .slider-hero,
  .swiper, .swiper-container, .slick-slider, .glide, .glide__track,
  .splide, .owl-carousel {
    display: none !important;
  }

  /* Optional: compact top spacing when hero is removed */
  .header + .hero, .topbar + .hero { margin-top: 0 !important; }
  .main, main { padding-top: 12px; }
}

/* Utilities */
.hidden-mobile { display: block; }
@media (max-width: 768px) { .hidden-mobile { display: none !important; } }

.only-desktop { display: none; }
@media (min-width: 1024px) { .only-desktop { display: block; } }

/* Rimuovi eventuali mattoni "logo sotto i servizi" */
.services .services-logo-tile,
.services .services-logo-tile__overlay { display: none !important; }

/* ===== Mobile rules (≤768px) ===== */
@media (max-width: 768px) {

  /* Logo-pill: sempre fondo bianco, anche se attiva o hover */
  .pill-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fff !important;
    border: 2px solid var(--blue);
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
  }

  .pill-logo-img {
    height: 22px;
    width: auto;
    display: block;
  }

  /* Stati neutralizzati per non invertire i colori */
  .pill-logo:is(:hover, :focus, :active),
  .pill-logo.is-active,
  .pill-logo[aria-current="page"] {
    background: #fff !important;
    color: inherit;
    border-color: var(--blue);
  }

  /* Effetto ring leggero quando perde il focus */
  .pill-logo.blur-ring {
    animation: v24-blur-ring 220ms ease-out 1;
  }
  @keyframes v24-blur-ring {
    0%   { box-shadow: 0 0 0 0 rgba(11,44,87,0.35); }
    100% { box-shadow: 0 0 0 8px rgba(11,44,87,0); }
  }
}

/* Nascondiamo il logo-pill su desktop (ridondante ma chiaro) */
@media (min-width: 769px) {
  .pill-logo { display: none !important; }
}

/* Card corner arrows: nascondiamole su mobile */
@media (max-width: 768px) {
  .services .card .corner-arrow { 
    display: none !important;
  }
  /* se le frecce fossero generate via pseudo-elemento */
  .services .card .btn::after,
  .services .card::after {
    content: none !important;
  }
}
/* =====================================================
   SERVIZI — Mobile (≤768px)
   ===================================================== */
@media (max-width: 768px) {
  .svc { position: relative; }

  /* Riquadro smussato che contiene 3 paragrafi */
  .svc .svc-box {
    background: rgba(245, 247, 250, 0.95); /* grigietto in linea con index */
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    margin-bottom: .75rem;
  }

  .svc .svc-box h2 { margin: 0 0 .35rem 0; font-size: 1.1rem; }
  .svc .svc-box p { margin: .4rem 0; }
  .svc .svc-box p em { font-style: italic; color: var(--muted); }

  /* Area immagine: filigrana + contenitore overlay per bottone */
  .svc .svc-fig {
    position: relative;
    height: 210px;                 /* altezza stabile su mobile */
    border-radius: 12px;
    overflow: hidden;
    background-image: var(--svc-img);
    background-size: cover;
    background-position: center;
  }
  /* velo di filigrana sopra l'immagine */
  .svc .svc-fig::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.65); /* filigrana */
    backdrop-filter: blur(1px);
  }

  /* Bottone posizionato dentro e sopra l'immagine */
  .svc .btn-over-fig {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;                    /* sopra il velo di filigrana */
    display: inline-block;
    background: var(--blue);
    color: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: .9rem;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
  }

  /* Sul mobile nascondo il bottone dentro al testo (resta il testo CTA) */
  .svc .cta .button-link { display: none; }
}

/* =====================================================
   SERVIZI — Desktop (>=769px) (garantisce comportamento invariato)
   ===================================================== */
@media (min-width: 769px) {
  /* il bottone aggiunto in .svc-fig è solo per mobile */
  .svc .btn-over-fig { display: none !important; }
}