/* Scavi di Pompei — home responsive 1:1 col design */

/* H1 hero: clamp del design a tutte le larghezze sotto il desktop pieno */
@media (max-width: 980px) {
  .elementor-element-7dd14e5 .elementor-heading-title {
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem) !important;
    line-height: 1.18 !important;
  }
  /* h2 sezioni */
  .elementor-element-ffc2dc0 .elementor-heading-title,
  .elementor-element-9163ab0 .elementor-heading-title,
  .elementor-element-6d8268d .elementor-heading-title,
  .elementor-element-fda3beb .elementor-heading-title,
  .elementor-element-b0b4f3c .elementor-heading-title,
  .elementor-element-43a2c44 .elementor-heading-title {
    font-size: clamp(1.5rem, 1.3rem + 1vw, 2.15rem) !important;
  }
}

/* ===== ≤860: photo-row 1 colonna, gallery 2 col, guide 1 colonna ===== */
@media (max-width: 860px) {
  .elementor-element-f9ffac5.e-con > .e-con-inner,
  .elementor-element-3371802.e-con > .e-con-inner {
    flex-direction: column !important;
  }
  .elementor-element-75e9f77.e-con, .elementor-element-2dd7b9e.e-con,
  .elementor-element-d8d582d.e-con, .elementor-element-a36f813.e-con {
    width: 100% !important; max-width: 100% !important;
  }
  /* gallery (e-grid): 2 colonne, wide su 2 tracce, righe 280px */
  .elementor-element-85e7c98.e-con { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: 280px !important; }
  .elementor-element-2fd2174.e-con, .elementor-element-f8cae7c.e-con { grid-column: span 2 !important; }
  .elementor-element-2fd2174.e-con, .elementor-element-d7afb8b.e-con, .elementor-element-b9223ea.e-con, .elementor-element-f8cae7c.e-con { width: auto !important; max-width: none !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important; }
  /* guide: colonne impilate */
  .elementor-element-2353c86.e-con > .e-con-inner { flex-direction: column !important; }
  .elementor-element-3c1854a.e-con, .elementor-element-3dd5d01.e-con, .elementor-element-0023b0f.e-con { width: 100% !important; max-width: 100% !important; }
}

/* ===== ≤640: base 16px, CTA full width, stats centrate, ticket 1 colonna ===== */
@media (max-width: 640px) {
  body { font-size: 16px; }
  /* CTA hero e CTA finale: larghezza piena centrata */
  .elementor-element-04445af .elementor-button,
  .elementor-element-d725f8d .elementor-button {
    width: 100% !important; display: flex !important; justify-content: center !important;
  }
  /* stats hero: centrate */
  .elementor-element-197f7ee.e-con > .e-con-inner { justify-content: center !important; }
  .elementor-element-72cbc92.e-con, .elementor-element-cb7bfd9.e-con,
  .elementor-element-6e3dc5e.e-con, .elementor-element-c710ba0.e-con { align-items: center !important; text-align: center !important; }
  .elementor-element-72cbc92 .elementor-heading-title, .elementor-element-cb7bfd9 .elementor-heading-title,
  .elementor-element-6e3dc5e .elementor-heading-title, .elementor-element-c710ba0 .elementor-heading-title { text-align: center !important; }
  /* ticket cards: 1 colonna */
  .elementor-element-7a1e1dd.e-con > .e-con-inner { flex-direction: column !important; }
  .elementor-element-d1e7493.e-con, .elementor-element-96631df.e-con,
  .elementor-element-8768283.e-con, .elementor-element-5379d36.e-con { width: 100% !important; max-width: 100% !important; }
}

/* ===== ≤560: gallery 1 colonna, aspetto 4/3 ===== */
@media (max-width: 560px) {
  .elementor-element-85e7c98.e-con { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
  .elementor-element-2fd2174.e-con, .elementor-element-d7afb8b.e-con, .elementor-element-b9223ea.e-con, .elementor-element-f8cae7c.e-con { grid-column: span 1 !important; aspect-ratio: 4/3 !important; height: auto !important; }
  .elementor-element-85e7c98 .elementor-widget-image img,
  .elementor-element-85e7c98 [style*='background-image'] { aspect-ratio: 4/3; }
}
/* Ticket cards: 2 colonne fino a 980 (design cols-2), 1 colonna sotto 640 */
@media (max-width: 980px) and (min-width: 641px) {
  .elementor-element-7a1e1dd.e-con > .e-con-inner { flex-wrap: wrap !important; flex-direction: row !important; }
  .elementor-element-d1e7493.e-con, .elementor-element-96631df.e-con,
  .elementor-element-8768283.e-con, .elementor-element-5379d36.e-con {
    width: calc(50% - 13px) !important; max-width: calc(50% - 13px) !important; flex: 0 0 auto !important;
  }
}
/* Guide: 3 colonne uguali fino a 861, 1 colonna sotto (già presente) */
@media (max-width: 1120px) and (min-width: 861px) {
  .elementor-element-2353c86.e-con > .e-con-inner { flex-wrap: nowrap !important; }
  .elementor-element-3c1854a.e-con, .elementor-element-3dd5d01.e-con, .elementor-element-0023b0f.e-con {
    width: calc(33.333% - 19px) !important; max-width: calc(33.333% - 19px) !important; flex: 1 1 0 !important;
  }
}

/* ===== Gutter laterale omogeneo su mobile: tutte le sezioni top allineate all'hero (34px) ===== */
@media (max-width: 767px) {
  .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .e-con.e-con-full {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }
  .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .e-con.e-con-full > .e-con-boxed {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* photo-row colonne annidate (Giardino/Anfiteatro): niente gutter extra */
  .elementor-element-75e9f77.e-con, .elementor-element-2dd7b9e.e-con,
  .elementor-element-d8d582d.e-con, .elementor-element-a36f813.e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* Photo-row colonne (Giardino/Anfiteatro): niente gutter interno a tutte le larghezze (allinea a 273 desktop / 34 mobile) */
.elementor-element-75e9f77.e-con, .elementor-element-2dd7b9e.e-con,
.elementor-element-d8d582d.e-con, .elementor-element-a36f813.e-con {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ============================================================================
   BOX ARTICOLO STANDARD nella sezione "Guida alla visita" della home
   (15/08/2026 — etnaescursione.com)

   PRIMA: quattro riquadri costruiti a mano con un widget icon-list, cioe'
   soltanto un'icona e il titolo dentro un box da 250px. Nessuna foto, nessun
   testo, nessuna CTA: sembravano segnaposto, non contenuto.

   ORA: il widget nativo `posts` con skin classic, gli stessi identici parametri
   dell'archivio di categoria (thumbnail in alto, excerpt 22 parole, CTA
   "Leggi la guida →"). Vantaggio oltre all'aspetto: le card seguono i post,
   non vanno aggiornate a mano quando l'articolo cambia titolo o immagine.

   Lo stile qui sotto ricalca .cat-grid di category-archive.css, che sulla home
   NON e' caricato. Stessi token, stesso risultato visivo.
   ========================================================================== */

.home-guide-grid .elementor-posts-container { gap: 28px; }

.home-guide-grid .elementor-post {
  background: var(--bg, #F6F3EE);
  border: 1px solid var(--border, #DBD5CB);
  border-radius: var(--radius, 2px);
  box-shadow: var(--shadow-card, 0 1px 0 0 rgba(26,21,18,0.08));
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
  display: flex;
  flex-direction: column;
}
.home-guide-grid .elementor-post:hover {
  box-shadow: var(--shadow-card-hover, 0 4px 12px -4px rgba(26,21,18,0.18));
  transform: translateY(-2px);
}

/* Il rapporto 3:2 va messo sull'IMMAGINE, non sul contenitore: con
   aspect-ratio sul contenitore l'altezza resta "automatica" e un height:100%
   sull'img si risolve a 0 (misurato: img alta 2px). Cosi' invece l'immagine
   ha un'altezza propria e definita. !important perche' responsive-home.css
   e' accodato prima del CSS del widget Elementor. */
.home-guide-grid .elementor-post__thumbnail {
  overflow: hidden !important;
  height: auto !important;
  aspect-ratio: auto !important;
}
.home-guide-grid .elementor-post__thumbnail img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
}

.home-guide-grid .elementor-post__text {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.home-guide-grid .elementor-post__title,
.home-guide-grid .elementor-post__title a {
  font-family: var(--font-display, 'Zilla Slab', Georgia, serif);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.25;
  color: var(--text, #1A1512);
  margin: 0 0 8px;
  text-decoration: none;
}
.home-guide-grid .elementor-post__title a:hover { color: var(--accent-dark, #9C2E10); }

.home-guide-grid .elementor-post__excerpt p {
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-muted, #736C63);
  margin: 0 0 14px;
}

/* la CTA resta ancorata in basso: card di altezza diversa restano allineate */
.home-guide-grid .elementor-post__read-more {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink, #9C2E10);
  text-decoration: none;
  margin-top: auto;
}
.home-guide-grid .elementor-post__read-more:hover {
  color: var(--accent-dark, #9C2E10);
  text-decoration: underline;
}