/* =========================================================================
   Gallery Punto Dolce
   Riquadri tutti uguali (4:5, la foto ritagliata al centro): con le foto dei
   clienti, scattate come capita, un mosaico libero diventa un muro storto.
   La foto intera si vede aperta.
   ========================================================================= */

.pd-gal { --pd-gal-gap: clamp(8px, 1.6vw, 18px); }

/* La pagina di contenuto stringe il testo a una colonna da leggere (68ch) e
   mette un pallino a ogni voce d'elenco: alla galleria serve tutta la
   larghezza, e i riquadri non sono un elenco puntato. */
.pd-con-gallery .pd-prosa { max-inline-size: none; }
.pd-gal .pd-gal__griglia, .pd-gal .pd-gal__voce { padding-inline-start: 0; }
.pd-gal .pd-gal__griglia > .pd-gal__voce::before { content: none; }
.pd-gal__lead { font-size: var(--pd-t-guida, 1.125rem); max-inline-size: 62ch; }
.pd-gal__azioni { margin-block: var(--pd-space-4) var(--pd-space-8); }

.pd-gal__barra {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pd-space-3);
  margin-block-end: var(--pd-space-5);
}
.pd-gal__filtri, .pd-gal__ordine, .pd-gal__cerca { display: flex; flex-wrap: wrap; gap: var(--pd-space-2); }
.pd-gal__filtri { flex: 1 1 100%; }
.pd-gal__cerca { flex: 1 1 420px; }
.pd-gal__cerca input, .pd-gal__cerca select {
  font: inherit; font-size: var(--pd-size-sm, .875rem); min-block-size: 44px; padding: 0 var(--pd-space-4);
  border: 1px solid var(--pd-line, rgba(0,0,0,.18)); border-radius: 999px;
  background: var(--pd-bianco, #fff); color: var(--pd-ink, #1e1a17);
}
.pd-gal__cerca input { flex: 1 1 220px; min-inline-size: 0; }
.pd-gal__cerca select { flex: 0 1 260px; min-inline-size: 0; }
.pd-gal__conteggio { flex: 1 1 100%; margin: 0; font-size: var(--pd-size-sm, .875rem); color: var(--pd-ink-soft, #6b625a); }
.pd-gal__filtro, .pd-gal__ord {
  font: inherit; font-size: var(--pd-size-sm, .875rem);
  min-block-size: 40px; padding: 0 var(--pd-space-4);
  border: 1px solid var(--pd-line, rgba(0,0,0,.18)); border-radius: 999px;
  background: transparent; color: var(--pd-ink, #1e1a17); cursor: pointer;
  transition: background var(--pd-dur-fast, .15s), color var(--pd-dur-fast, .15s);
}
.pd-gal__filtro[aria-pressed="true"], .pd-gal__ord[aria-pressed="true"] {
  background: var(--pd-nero, #1e1a17); border-color: var(--pd-nero, #1e1a17); color: var(--pd-bianco, #fff);
}

.pd-gal .pd-gal__griglia {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--pd-gal-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .pd-gal .pd-gal__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pd-gal .pd-gal__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pd-gal__voce { position: relative; display: flex; flex-direction: column; min-inline-size: 0; }
.pd-gal__voce[hidden] { display: none; }
.pd-gal__apri {
  display: block; padding: 0; border: 0; background: var(--pd-sabbia, #efe6da);
  border-radius: var(--pd-radius-md, 12px); overflow: hidden; cursor: zoom-in;
  aspect-ratio: 4 / 5;
}
.pd-gal__apri img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform var(--pd-dur-slow, .5s) var(--pd-ease, ease);
}
@media (hover: hover) { .pd-gal__apri:hover img { transform: scale(1.04); } }
.pd-gal__apri:focus-visible { outline: 3px solid var(--pd-fucsia, #d6246e); outline-offset: 3px; }

.pd-gal__dida { padding-block: var(--pd-space-2) 0; padding-inline-end: 64px; }
.pd-gal__nome { margin: 0; font-weight: 600; line-height: var(--pd-lh-snug, 1.3); overflow-wrap: anywhere; }
.pd-gal__chi  { margin: 0; font-size: var(--pd-size-sm, .875rem); color: var(--pd-ink-soft, #6b625a); }

.pd-gal__cuore {
  font: inherit; font-size: var(--pd-size-sm, .875rem);
  display: inline-flex; align-items: center; gap: 4px;
  min-block-size: 40px; min-inline-size: 40px; padding: 0 var(--pd-space-2);
  border: 0; background: none; color: var(--pd-ink-soft, #6b625a); cursor: pointer;
}
.pd-gal__voce > .pd-gal__cuore { position: absolute; inset-inline-end: 0; inset-block-end: 0; }
.pd-gal__cuore span[aria-hidden] { font-size: 1.25em; line-height: 1; transition: transform var(--pd-dur-fast, .15s); }
.pd-gal__cuore[aria-pressed="true"] { color: var(--pd-fucsia, #d6246e); }
.pd-gal__cuore.is-battito span[aria-hidden] { transform: scale(1.35); }

.pd-gal__altre { text-align: center; margin-block: var(--pd-space-8) 0; }
.pd-gal__vuota { padding: var(--pd-space-8) 0; color: var(--pd-ink-soft, #6b625a); }

/* --- La foto grande ---------------------------------------------------- */
.pd-gal__vista {
  inline-size: min(1100px, calc(100vw - 32px)); max-block-size: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--pd-radius-lg, 16px);
  background: var(--pd-paper, #fffaf4); color: var(--pd-ink, #1e1a17); overflow: auto;
}
.pd-gal__vista::backdrop { background: rgba(20, 16, 14, .72); }
.pd-gal__chiudi-f { position: sticky; inset-block-start: 0; display: flex; justify-content: flex-end; block-size: 0; z-index: 1; }
.pd-gal__chiudi {
  margin: 8px; inline-size: 44px; block-size: 44px; border-radius: 50%; border: 0;
  background: var(--pd-paper, #fffaf4); color: var(--pd-ink, #1e1a17); font-size: 28px; line-height: 1; cursor: pointer;
  box-shadow: var(--pd-shadow-sm, 0 1px 4px rgba(0,0,0,.15));
}
.pd-gal__fig { margin: 0; display: grid; }
.pd-gal__fig img { display: block; inline-size: 100%; max-block-size: 70dvh; object-fit: contain; background: var(--pd-sabbia, #efe6da); }
.pd-gal__fig figcaption { padding: var(--pd-space-5); }
.pd-gal__vnome { margin: 0 0 var(--pd-space-1); font-size: var(--pd-size-xl, 1.5rem); }
.pd-gal__vchi { margin: 0; color: var(--pd-ink-soft, #6b625a); }
.pd-gal__vracconto { margin: var(--pd-space-3) 0 0; }
.pd-gal__vracconto:empty, .pd-gal__vdett:empty { display: none; }
.pd-gal__vdett { margin: var(--pd-space-3) 0 0; white-space: pre-line; font-size: var(--pd-size-sm, .875rem); color: var(--pd-ink-soft, #6b625a); }
.pd-gal__vazioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-3); margin: var(--pd-space-5) 0 0; }
.pd-gal__condividi { font: inherit; border: 0; background: none; text-decoration: underline; cursor: pointer; min-block-size: 44px; color: inherit; }
@media (min-width: 900px) {
  .pd-gal__fig { grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); }
  .pd-gal__fig img { max-block-size: calc(100dvh - 32px); block-size: 100%; }
  .pd-gal__fig figcaption { align-self: center; }
}

/* --- La tua torta nella Gallery: si manda per email ------------------- */
.pd-gal__pubblica {
  margin-block-start: var(--pd-space-16, 64px); padding: clamp(20px, 4vw, 48px);
  border-radius: var(--pd-radius-blocco, 20px); background: var(--pd-sabbia, #efe6da);
}
.pd-gal__pubblica > h2 { margin-block-start: 0; }
.pd-gal__pubblica .pd-gal__azioni {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-3) var(--pd-space-5);
  margin-block-end: 0;
}
.pd-gal__email { color: var(--pd-ink-soft, #6b625a); }

@media (prefers-reduced-motion: reduce) {
  .pd-gal__apri img, .pd-gal__cuore span[aria-hidden] { transition: none; }
}

/* Il menu a tendina del tema ha un carattere suo: qui si allinea alla ricerca. */
.pd-gal .pd-gal__cerca select { font-size: var(--pd-size-sm, .875rem); }

/* Su telefono dieci occasioni andavano a capo in quattro righe, e le foto
   cominciavano sotto lo schermo: le occasioni scorrono di lato, in una riga. */
@media (max-width: 699px) {
  .pd-gal__filtri {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pd-gutter, 20px)); padding-inline: var(--pd-gutter, 20px);
    scroll-padding-inline: var(--pd-gutter, 20px);
  }
  .pd-gal__filtri::-webkit-scrollbar { display: none; }
  .pd-gal__filtro { flex: 0 0 auto; }
  .pd-gal .pd-gal__cerca select { flex: 1 1 100%; }
}