/* Digital Muffin — Core.
   Solo struttura: griglie, proporzioni, ritmo verticale.
   I colori arrivano dalle variabili del tema (--dm-*): il plugin resta neutro
   e il brand si cambia in un punto solo, nel tema. */

.dm-griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.dm-griglia__scheda {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dm-griglia__media {
  display: block;
  line-height: 0;
}
.dm-griglia__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}
.dm-griglia__media--cover img { aspect-ratio: 3 / 2; object-fit: cover; }
.dm-griglia__media--ritratto img { aspect-ratio: 4 / 5; object-fit: cover; }
.dm-griglia__media:hover img {
  box-shadow: var(--dm-ombra-media, 0 4px 12px rgba(16, 80, 112, .10));
}

.dm-griglia__titolo {
  margin: 0;
  font-size: var(--dm-corpo-sottotitolo, 1.375rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
.dm-griglia__titolo a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
  transition: color 200ms cubic-bezier(.4, 0, .2, 1);
}
.dm-griglia__titolo a:hover { color: var(--dm-magenta, #d6007a); }

.dm-griglia__ruolo {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--dm-pavone, #0f5070);
}

.dm-griglia__riassunto,
.dm-griglia__meta {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--dm-grigio-testo, #5b636b);
}

.dm-griglia__vuota {
  padding: 24px;
  border: 1px dashed var(--dm-grigio-bordo, #e5e7ea);
  border-radius: 12px;
  color: var(--dm-grigio-testo, #5b636b);
}

/* Variante a scheda: superficie bianca con bordo, come le card del design */
.dm-griglia__scheda--card {
  gap: 0;
  background: var(--dm-bianco, #fff);
  border: 1px solid var(--dm-grigio-bordo, #e5e7ea);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--dm-ombra-soft, 0 1px 2px rgba(20, 24, 27, .06));
  transition: box-shadow 200ms cubic-bezier(.4, 0, .2, 1);
}
.dm-griglia__scheda--card:hover { box-shadow: var(--dm-ombra-media, 0 4px 12px rgba(16, 80, 112, .10)); }
.dm-griglia__scheda--card .dm-griglia__media img { border-radius: 0; }
.dm-griglia__corpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}

.dm-griglia__tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}
.dm-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--dm-tiffany-chiaro, #eef9fa);
  color: var(--dm-pavone, #0f5070);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .dm-griglia * { transition-duration: .01ms !important; }
}

/* =========================================================================
   Percorso a passi (widget dm-percorso)
   Struttura e movimento. I colori arrivano dalle variabili --dm-* del tema,
   con un ripiego in chiaro se il tema non c'e.
   ========================================================================= */
.dm-percorso {
  --dm-percorso-spazio: 26px;
  --dm-percorso-colonna: 84px;
  --dm-percorso-binario: var(--dm-grigio-bordo, #e5e7ea);
  --dm-percorso-linea: var(--dm-tiffany, #4fb0c4);
  --dm-percorso-linea-fine: var(--dm-pavone, #0f5070);
  --dm-percorso-bolla: var(--dm-tiffany, #4fb0c4);
  position: relative;
}
.dm-percorso::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: var(--dm-percorso-binario);
  border-radius: 2px;
}
.dm-percorso__riempi {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 0;
  transform: translateX(-50%);
  background: linear-gradient(var(--dm-percorso-linea), var(--dm-percorso-linea-fine));
  border-radius: 2px;
  will-change: height;
}
.dm-percorso--statico .dm-percorso__riempi { height: 100%; }

.dm-percorso__passi { list-style: none; margin: 0; padding: 0; }
.dm-percorso__passo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--dm-percorso-colonna) 1fr;
  align-items: center;
  margin-bottom: var(--dm-percorso-spazio);
}
.dm-percorso__passo:last-child { margin-bottom: 0; }

.dm-percorso__bolla {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--dm-bianco, #fff);
  border: 3px solid var(--dm-percorso-binario);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  color: var(--dm-grigio-testo, #5b636b);
  z-index: 2;
  transition: background .4s var(--dm-ease, ease), border-color .4s var(--dm-ease, ease),
              color .4s var(--dm-ease, ease), transform .4s var(--dm-ease, ease);
}
.dm-percorso__bolla--punto { width: 22px; height: 22px; }
.dm-percorso__passo.e-viva .dm-percorso__bolla,
.dm-percorso--statico .dm-percorso__bolla {
  background: var(--dm-percorso-bolla);
  border-color: var(--dm-percorso-bolla);
  color: var(--dm-bianco, #fff);
  transform: scale(1.06);
}

.dm-percorso__scheda {
  background: var(--dm-bianco, #fff);
  border: 1px solid var(--dm-grigio-bordo, #e5e7ea);
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: var(--dm-ombra-media, 0 4px 12px rgba(16, 80, 112, .10));
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--dm-ease, ease), transform .5s var(--dm-ease, ease);
}
.dm-percorso__passo.e-viva .dm-percorso__scheda,
.dm-percorso--statico .dm-percorso__scheda { opacity: 1; transform: none; }

.dm-percorso--alterna .dm-percorso__passo--sx .dm-percorso__scheda { grid-column: 1; grid-row: 1; text-align: right; }
.dm-percorso--alterna .dm-percorso__passo--dx .dm-percorso__scheda { grid-column: 3; grid-row: 1; }
.dm-percorso:not(.dm-percorso--alterna) .dm-percorso__scheda { grid-column: 3; grid-row: 1; }

.dm-percorso__titolo {
  margin: 0 0 6px;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--dm-pavone, #0f5070);
}
.dm-percorso__testo { margin: 0; color: var(--dm-grigio-testo, #5b636b); }

@media (max-width: 900px) {
  .dm-percorso::before,
  .dm-percorso__riempi { left: 26px; transform: none; }
  .dm-percorso__passo { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
  .dm-percorso__bolla { grid-column: 1; justify-self: start; width: 52px; height: 52px; }
  .dm-percorso__bolla--punto { width: 20px; height: 20px; margin-left: 16px; }
  .dm-percorso--alterna .dm-percorso__passo--sx .dm-percorso__scheda,
  .dm-percorso--alterna .dm-percorso__passo--dx .dm-percorso__scheda,
  .dm-percorso:not(.dm-percorso--alterna) .dm-percorso__scheda { grid-column: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-percorso * { transition-duration: .01ms !important; }
  .dm-percorso__scheda { opacity: 1; transform: none; }
}

/* =========================================================================
   Mosaico servizi (widget dm-mosaico)
   Tessere di larghezza diversa, foto a tutta tessera e testo sopra.
   Senza foto resta la sfumatura: la pagina si monta prima delle fotografie.
   ========================================================================= */
.dm-mosaico {
  --dm-mosaico-spazio: 18px;
  --dm-mosaico-altezza: 330px;
  --dm-mosaico-raggio: 18px;
  --dm-mosaico-tinta: var(--dm-pavone-scuro, #0a3346);
  --dm-mosaico-riga: var(--dm-magenta, #d6007a);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--dm-mosaico-spazio);
}

.dm-tess {
  --dm-tess-velo: 1;
  --dm-tess-ritaglio: center center;
  --dm-tess-a: #0a3346;
  --dm-tess-b: #4fb0c4;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: var(--dm-mosaico-altezza);
  border-radius: var(--dm-mosaico-raggio);
  background: linear-gradient(135deg, var(--dm-tess-a), var(--dm-tess-b));
  grid-column: span 3;
  text-decoration: none;
  transition: transform .35s var(--dm-ease, ease), box-shadow .35s var(--dm-ease, ease);
}
.dm-tess--2 { grid-column: span 2; }
.dm-tess--3 { grid-column: span 3; }
.dm-tess--4 { grid-column: span 4; }

.dm-tess__media { position: absolute; inset: 0; overflow: hidden; }
.dm-tess__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--dm-tess-ritaglio);
  transition: transform .6s var(--dm-ease, ease);
}

/* Velatura: scurimento neutro in basso, piu una tinta del brand su tutto.
   L'intensita si regola per tessera, perche una foto chiara ne chiede di piu. */
.dm-tess__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 24, 27, 0) 0%, rgba(20, 24, 27, .42) 48%, rgba(20, 24, 27, .8) 100%);
  opacity: var(--dm-tess-velo);
  transition: opacity .4s var(--dm-ease, ease);
}
.dm-tess__velo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dm-mosaico-tinta);
  opacity: .28;
}

.dm-tess__corpo { position: relative; z-index: 2; padding: 26px; }
.dm-tess__n {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--dm-tiffany-tenue, #7bcdd8);
  margin-bottom: 8px;
}
.dm-tess__titolo { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.2; color: var(--dm-bianco, #fff); }
.dm-tess__testo { display: block; font-size: .9375rem; color: rgba(255, 255, 255, .87); }
.dm-tess__tag { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dm-tag--chiaro { background: rgba(255, 255, 255, .16); color: var(--dm-bianco, #fff); }

.dm-tess__riga {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  background: var(--dm-mosaico-riga);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--dm-ease, ease);
}

.dm-tess:hover,
.dm-tess:focus-visible { transform: translateY(-6px); box-shadow: var(--dm-ombra-alta, 0 16px 40px rgba(16, 80, 112, .16)); }
.dm-tess:hover .dm-tess__media img,
.dm-tess:focus-visible .dm-tess__media img { transform: scale(1.06); }
.dm-tess:hover .dm-tess__riga,
.dm-tess:focus-visible .dm-tess__riga { transform: scaleX(1); }
.dm-tess:hover .dm-tess__velo,
.dm-tess:focus-visible .dm-tess__velo { opacity: calc(var(--dm-tess-velo) * 1.12); }
.dm-tess--cliccabile:focus-visible { outline: 3px solid var(--dm-tiffany, #4fb0c4); outline-offset: 3px; }

@media (max-width: 900px) {
  .dm-mosaico { grid-template-columns: 1fr; }
  .dm-tess,
  .dm-tess--2, .dm-tess--3, .dm-tess--4 { grid-column: span 1; min-height: 290px; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-tess, .dm-tess__media img, .dm-tess__riga, .dm-tess__velo { transition-duration: .01ms !important; }
}

/* --- Mosaico: testo in alto (predefinito) o in basso ---------------------
   Nel DOM il titolo resta prima delle etichette, per lettori di schermo e
   struttura della pagina; a spostarle in cima ci pensa l'ordine flex. */
.dm-tess__corpo { display: flex; flex-direction: column; }

.dm-mosaico--alto .dm-tess { justify-content: flex-start; }
.dm-mosaico--alto .dm-tess__tag { order: -1; margin-top: 0; margin-bottom: 14px; }
.dm-mosaico--alto .dm-tess__velo {
  background: linear-gradient(180deg,
    rgba(20, 24, 27, .82) 0%,
    rgba(20, 24, 27, .5) 45%,
    rgba(20, 24, 27, .18) 78%,
    rgba(20, 24, 27, 0) 100%);
}
.dm-mosaico--alto .dm-tess__velo::after { opacity: .22; }

/* =========================================================================
   Comparsa allo scorrimento (dm-rivela.js)
   La classe sulla radice la mette il JavaScript: senza JavaScript, o se
   lo script non parte, nessuna di queste regole si attiva e il contenuto
   resta visibile.
   ========================================================================= */
.dm-rivela-attivo .dm-rivela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--dm-ease, cubic-bezier(.4, 0, .2, 1)),
              transform 600ms var(--dm-ease, cubic-bezier(.4, 0, .2, 1));
  will-change: opacity, transform;
}
.dm-rivela-attivo .dm-rivela.e-visibile {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .dm-rivela-attivo .dm-rivela {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Le schede bianche si sollevano al passaggio del mouse. */
.dm-griglia__scheda--card,
.dm-card {
  transition: transform 200ms var(--dm-ease, cubic-bezier(.4, 0, .2, 1)),
              box-shadow 200ms var(--dm-ease, cubic-bezier(.4, 0, .2, 1));
}
@media (hover: hover) {
  .dm-griglia__scheda--card:hover,
  .dm-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dm-ombra-media, 0 4px 12px rgba(16, 80, 112, .10));
  }
}
@media (prefers-reduced-motion: reduce) {
  .dm-griglia__scheda--card,
  .dm-card { transition: none; }
  .dm-griglia__scheda--card:hover,
  .dm-card:hover { transform: none; }
}

/* =========================================================================
   Schede obiettivo (widget dm-obiettivi) — pagina Ricette
   Stesso aspetto delle tessere del mosaico di Servizi: sfumatura a 135 gradi,
   velatura scura sotto il titolo, riga colorata che scorre al passaggio del
   mouse. In piu, una velatura leggera in basso: li c'e l'elenco dei lavori,
   e senza il testo piccolo non si leggerebbe sulle sfumature chiare.
   ========================================================================= */
.dm-obiettivi {
  --dm-ob-colonne: 3;
  --dm-ob-spazio: 18px;
  --dm-ob-altezza: 330px;
  --dm-ob-raggio: 18px;
  --dm-ob-riga: var(--dm-magenta, #d6007a);
  display: grid;
  grid-template-columns: repeat(var(--dm-ob-colonne), minmax(0, 1fr));
  gap: var(--dm-ob-spazio);
}

.dm-ob {
  --dm-ob-a: #0a3346;
  --dm-ob-b: #4fb0c4;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: var(--dm-ob-altezza);
  padding: 26px;
  border-radius: var(--dm-ob-raggio);
  color: var(--dm-bianco, #fff);
  background: linear-gradient(135deg, var(--dm-ob-a), var(--dm-ob-b));
  transition: transform .35s var(--dm-ease, ease), box-shadow .35s var(--dm-ease, ease);
}
.dm-ob::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20, 24, 27, .82) 0%,
      rgba(20, 24, 27, .5) 42%,
      rgba(20, 24, 27, .32) 68%,
      rgba(20, 24, 27, .38) 100%),
    linear-gradient(rgba(10, 51, 70, .22), rgba(10, 51, 70, .22));
}
.dm-ob > * { position: relative; z-index: 2; }
.dm-ob::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  background: var(--dm-ob-riga);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--dm-ease, ease);
}

.dm-obiettivi .dm-ob__n {
  display: block;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .12em;
  color: var(--dm-tiffany-tenue, #7bcdd8);
}
.dm-obiettivi .dm-ob .dm-ob__titolo {
  margin: 0 0 24px;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--dm-bianco, #fff);
}
.dm-obiettivi .dm-ob__lavori {
  list-style: none;
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.dm-obiettivi .dm-ob__lavori li { margin: 0; padding: 5px 0; list-style: none; }
.dm-obiettivi .dm-ob__cliente {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--dm-bianco, #fff);
}
.dm-obiettivi .dm-ob__servizi {
  display: block;
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .87);
}

@media (hover: hover) {
  .dm-obiettivi .dm-ob:hover {
    transform: translateY(-6px);
    box-shadow: var(--dm-ombra-alta, 0 16px 40px rgba(16, 80, 112, .16));
  }
  .dm-obiettivi .dm-ob:hover::after { transform: scaleX(1); }
}

@media (max-width: 1000px) {
  .dm-obiettivi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dm-obiettivi { grid-template-columns: 1fr; }
  .dm-ob { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-ob, .dm-ob::after { transition-duration: .01ms !important; }
  .dm-obiettivi .dm-ob:hover { transform: none; }
}