/* =====================================================================
   PAGINA GALLERY — dalla schermata Stitch "Gallery" (misure a 1280px). Header, footer e CTA finale: quelli del sito.
   La griglia dei post e i filtri di Stitch NON sono realizzati: al loro posto il feed Instagram di Smash Balloon
   (plugin instagram-feed), inserito dall'utente al posto del paragrafo segnaposto "spazio per gallery IG".
   Spazi come Stitch: testata 96px sopra (+8 di stacco dall'header) e sotto, 64 sotto da 1024px;
   gallery e box promemoria 64px sotto ciascuno; poi la CTA.
   Vedi design/DESIGN.md › Components › Pagina Gallery.
   ===================================================================== */

/* --- 1. TESTATA: pillola alta 24px (pallino 8px che pulsa), H1 display 800 su 8 colonne, barra del profilo --- */
.wp-block-group.mm-section.mm-intro.mm-gallery-intro { padding-block: 72px 64px; }
.wp-block-group.mm-gallery-intro > .mm-eyebrow--chip { gap: 8px; margin-bottom: 24px; padding: 6px 14px; letter-spacing: .05em; }
.mm-gallery-intro > .mm-eyebrow--chip::before { width: 8px; height: 8px; }
.wp-block-group.mm-gallery-intro > .mm-intro__title { max-width: 790px; margin-bottom: 20px; }
.wp-block-group.mm-gallery-intro > .mm-intro__text { margin-bottom: 32px; }
@media (prefers-reduced-motion: no-preference) {
  .mm-gallery-intro > .mm-eyebrow--chip::before { animation: mm-pulse 2s ease-in-out infinite; }
}
@media (min-width: 1024px) {
  .wp-block-group.mm-section.mm-intro.mm-gallery-intro { padding-block: 104px 96px; }
}

/* Barra del profilo: card bianca 16px; icona fotocamera in riquadro sfumato 48px, nome e sottotitolo; bottone a destra */
.wp-block-group.mm-ig-profilo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 672px;
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.wp-block-group.mm-ig-profilo > *,
.wp-block-group.mm-ig-profilo__account > * { margin: 0; }
.wp-block-group.mm-ig-profilo__account {
  --mm-tile-size: 48px;
  --mm-tile-radius: 12px;
  --mm-tile-inset: calc(50% - 24px) auto auto 12px;
  --mm-tile-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  --mm-ico-size: 26px;
  --mm-ico-color: var(--wp--preset--color--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  padding: 0 12px 0 74px; /* 12 + riquadro 48 + 14 */
}
.mm-ig-profilo__account::before {
  background-image: linear-gradient(to top right, var(--wp--preset--color--primary), var(--wp--preset--color--primary-bright));
}
.mm-ig-profilo__name {
  color: var(--wp--preset--color--on-surface);
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--title);
  font-weight: 700;
  line-height: 1.25;
}
.mm-ig-profilo__sub { line-height: 1.55; }
.wp-block-buttons.mm-ig-profilo__actions { margin-left: auto; padding: 0 4px 0 12px; }
.wp-block-button.mm-ig-profilo__btn { --mm-ico-size: 18px; --mm-ico-gap: 8px; }
.wp-block-button.mm-ig-profilo__btn > .wp-block-button__link { padding: 10px 20px; }

/* --- 2. GALLERY: sezione semplice a tutta larghezza (il feed di Smash Balloon si adatta al contenitore).
   Il segnaposto (bordo tratteggiato) sparisce quando il paragrafo viene sostituito dal feed --- */
.wp-block-group.mm-section.mm-gallery-feed { padding-block: 0 64px; }
.mm-gallery-feed__segnaposto {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  margin: 0;
  border: 2px dashed var(--wp--preset--color--outline);
  border-radius: 24px;
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--on-surface-variant);
  text-align: center;
}

/* --- 3. BOX PROMEMORIA: card Ghiaccio 24px, icona SMS in riquadro bianco 64px; a destra grafica 80px + bottone.
   In colonna sotto 1024px; grafica nascosta e bottone a tutta larghezza sotto 640px (come Stitch) --- */
.wp-block-group.mm-section.mm-gallery-promemoria { padding-block: 0 64px; }
.mm-gallery-promemoria + .wp-block-group.mm-section.mm-cta { padding-top: 0; }
.wp-block-group.mm-promemoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 32px;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.wp-block-group.mm-promemoria > *,
.wp-block-group.mm-promemoria__text > *,
.wp-block-group.mm-promemoria__actions > * { margin: 0; }
.wp-block-group.mm-promemoria__text {
  --mm-tile-size: 64px;
  --mm-tile-bg: var(--wp--preset--color--surface);
  --mm-tile-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  --mm-ico-size: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 672px;
  min-height: 64px;
  padding-left: 84px; /* riquadro 64 + 20 */
}
.wp-block-group.mm-promemoria__text > .mm-contatti__label { margin-bottom: 4px; line-height: 16px; }
.wp-block-group.mm-promemoria__text > .mm-promemoria__title { margin-bottom: 8px; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
.mm-promemoria__desc { line-height: 1.625; }
.wp-block-group.mm-promemoria__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  width: 100%;
}
.mm-promemoria__actions > .wp-block-buttons,
.mm-promemoria__actions .wp-block-button { width: 100%; }
.mm-promemoria__actions .wp-block-button__link { justify-content: center; width: 100%; padding: 14px 24px; }
.mm-promemoria__actions .wp-block-button.mm-ico { --mm-ico-size: 20px; }
.mm-promemoria__actions .mm-ico > .wp-block-button__link { gap: 8px; }
.wp-block-image.mm-promemoria__img { display: none; flex: none; }
.mm-promemoria__img img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
@media (min-width: 640px) {
  .wp-block-group.mm-promemoria__actions { flex-direction: row; }
  .wp-block-image.mm-promemoria__img { display: block; }
  .mm-promemoria__actions > .wp-block-buttons,
  .mm-promemoria__actions .wp-block-button,
  .mm-promemoria__actions .wp-block-button__link { width: auto; }
}
@media (min-width: 768px) {
  .wp-block-group.mm-promemoria__text { --mm-tile-inset: calc(50% - 32px) auto auto 0; }
}
@media (min-width: 1024px) {
  .wp-block-group.mm-promemoria { flex-direction: row; justify-content: space-between; padding: 40px; }
  .wp-block-group.mm-promemoria__actions { flex: none; width: auto; }
}