/* whatsapp: il CSS delle composizioni, una parte per composizione (<variante>.php). Portato dagli <style> del sito Astro. */

/* breve */
.whatsapp-breve { position: relative; padding: clamp(104px, 20vh, 200px) var(--margine) clamp(72px, 14vh, 140px); }
.whatsapp-breve .chat-corpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 88px); align-items: start; }
.whatsapp-breve .chat-titolo { grid-row: 1 / span 3; font-size: clamp(2.6rem, 5.6vw, var(--scala-6)); text-wrap: balance; }
.whatsapp-breve .chat-corpo > :not(.chat-titolo) { grid-column: 2; }
.whatsapp-breve .scelte { margin: 26px 0 28px; }
@media (max-width: 860px) {
  .whatsapp-breve .chat-corpo { grid-template-columns: minmax(0, 1fr); }
  .whatsapp-breve .chat-titolo { grid-row: auto; margin-bottom: .5em; }
  .whatsapp-breve .chat-corpo > :not(.chat-titolo) { grid-column: 1; }
}

/* ritratto */
.whatsapp-ritratto { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: calc(100svh - var(--testata)); }
.whatsapp-ritratto[data-fondo="chiaro"] { background: var(--fondo-alt); }
.whatsapp-ritratto .foto { height: calc(100svh - var(--testata)); aspect-ratio: 9 / 19; background: transparent; }
.whatsapp-ritratto .foto img { object-position: 50% 30%; }
.whatsapp-ritratto .chat-corpo { align-self: center; padding: 64px var(--margine) 64px clamp(24px, 4vw, 56px); }
.whatsapp-ritratto .chat-titolo { font-size: clamp(2.6rem, 6vw, var(--scala-6)); margin-bottom: .5em; color: var(--titoli); }
.whatsapp-ritratto[data-fondo="chiaro"] .nuvola { background: var(--fondo); }
.whatsapp-ritratto[data-fondo="scuro"] .chat-titolo { color: inherit; }
.whatsapp-ritratto:not(:has(.foto)) { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .whatsapp-ritratto { grid-template-columns: 1fr; }
  .whatsapp-ritratto .foto { height: 46svh; width: 100%; aspect-ratio: auto; }
  .whatsapp-ritratto .foto img { object-position: 50% 12%; }
  .whatsapp-ritratto .chat-corpo { padding: 40px var(--margine) 56px; }
}

/* vetrina */
/* .chat.whatsapp-vetrina: il margine deve battere ".wp-block-post-content > *" di FD Base (margin 0). */
.chat.whatsapp-vetrina { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) 1.2fr; min-height: 100svh; margin-top: -48px; }
.whatsapp-vetrina .foto { height: 100%; min-height: 70svh; }
.whatsapp-vetrina .chat-corpo { align-self: center; padding: 64px var(--margine); }
.whatsapp-vetrina .chat-titolo { font-size: clamp(2.6rem, 6vw, var(--scala-6)); margin-bottom: .5em; }
.chat.whatsapp-vetrina:not(:has(.foto)) { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .chat.whatsapp-vetrina { grid-template-columns: 1fr; }
  .whatsapp-vetrina .foto { min-height: 52svh; }
}