/* apertura: CSS delle composizioni, portato dallo <style> dei componenti Astro (src/sezioni/apertura/) e limitato alla classe della sezione. */

/* apertura/Insegna.astro → .b-apertura-insegna */
  .ap.b-apertura-insegna { position: relative; padding: 0 var(--margine); }
  .b-apertura-insegna .ap-testo { position: sticky; top: var(--testata); z-index: 1; padding-top: clamp(16px, 3vh, 36px); }
  .b-apertura-insegna .ap-righe { display: flex; justify-content: space-between; gap: 16px; }
  .b-apertura-insegna .ap-righe p:last-child { text-align: right; }
  /* max-content: così apertura-insegna misura il nome e non il blocco, e lo allarga fino a riempire la riga.
     La misura di partenza è già quasi quella finale (il nome in Bricolage 800 è largo circa 8,4 volte il corpo):
     al caricamento il nome non salta. */
  .b-apertura-insegna .ap-nome { width: max-content; font-size: calc((100vw - 2 * var(--margine)) / 8.5); line-height: .86; letter-spacing: -0.035em; white-space: nowrap; margin: .06em 0 .14em -0.04em; }
  .b-apertura-insegna .ap-azione { display: flex; justify-content: flex-end; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
  .b-apertura-insegna .ap-sotto { margin-right: auto; max-width: 40ch; color: var(--testo-secondario); }
  .b-apertura-insegna .ap-foto { position: relative; z-index: 2; margin: clamp(20px, 4vh, 48px) calc(-1 * var(--margine)) 0; height: min(100svh, 62vw); }
  .b-apertura-insegna .ap-foto img { object-position: 50% 58%; }
  @media (max-width: 700px) {
    .b-apertura-insegna .ap-righe { flex-direction: column; gap: 2px; }
    .b-apertura-insegna .ap-righe p:last-child { text-align: left; }
    .b-apertura-insegna .ap-foto { height: 78svh; }
    .b-apertura-insegna .ap-azione { justify-content: flex-start; }
  }

/* apertura/Ritratto.astro → .b-apertura-ritratto */
  .ciao.b-apertura-ritratto { position: relative; min-height: calc(100svh - var(--testata)); padding: 2vh var(--margine) 32px; display: grid; place-items: center; overflow: hidden; }
  .b-apertura-ritratto h1 { position: relative; width: 100%; font-size: 13vw; line-height: .84; letter-spacing: -0.045em; color: var(--titoli); }
  .b-apertura-ritratto .r1, .b-apertura-ritratto .r2 { display: block; position: relative; }
  .b-apertura-ritratto .r1 { z-index: 1; display: flex; justify-content: space-between; }
  .b-apertura-ritratto .r2 { z-index: 3; text-align: right; color: var(--fondo-scuro); }
  .b-apertura-ritratto .ciao-figura { position: absolute; z-index: 2; left: 50%; top: 46%; width: min(27vw, 46svh); aspect-ratio: 9 / 16; translate: -50% -50%; border-radius: 999px 999px 24px 24px; }
  .b-apertura-ritratto .ciao-figura img { object-position: 50% 25%; }
  .b-apertura-ritratto .ciao-nota { position: absolute; left: var(--margine); bottom: 36px; z-index: 4; max-width: 24ch; color: var(--testo-secondario); }
  .b-apertura-ritratto .ciao-azioni { position: absolute; right: var(--margine); bottom: 32px; z-index: 4; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }

  /* Tablet in verticale: niente schermo pieno, se no il titolo galleggia in mezzo al vuoto. */
  @media (orientation: portrait) and (min-width: 701px) {
    .ciao.b-apertura-ritratto { min-height: 0; padding-top: clamp(96px, 12vh, 160px); padding-bottom: 200px; }
  }
  /* Fino a 860 px c'è il WhatsApp fisso in basso a destra: il pulsante va a sinistra, sotto il sottotitolo. */
  @media (max-width: 860px) and (min-width: 701px) {
    .b-apertura-ritratto .ciao-nota { bottom: 104px; max-width: 18ch; }
    .b-apertura-ritratto .ciao-azioni { left: var(--margine); right: auto; justify-content: flex-start; }
  }
  @media (max-width: 700px) {
    .ciao.b-apertura-ritratto { display: flex; flex-direction: column; align-items: stretch; padding-top: 24px; }
    .b-apertura-ritratto h1 { font-size: 16vw; }
    .b-apertura-ritratto .r1 { display: block; }
    .b-apertura-ritratto .ciao-figura { position: relative; left: auto; top: auto; translate: none; width: 58vw; margin: 20px auto 0; }
    .b-apertura-ritratto .ciao-nota, .b-apertura-ritratto .ciao-azioni { position: static; }
    .b-apertura-ritratto .ciao-nota { margin-top: 20px; max-width: 30ch; }
    .b-apertura-ritratto .ciao-azioni { justify-content: flex-start; margin-top: 16px; }
  }

/* apertura/Scheda.astro → .b-apertura-scheda */
  .scheda.b-apertura-scheda { padding: clamp(28px, 6vh, 64px) var(--margine) 0; }
  .b-apertura-scheda .briciola { color: var(--testo-secondario); }
  .b-apertura-scheda .briciola a { text-underline-offset: 3px; }
  .b-apertura-scheda .sopra { margin-top: 10px; color: var(--testo-secondario); }
  .scheda.b-apertura-scheda h1 { font-size: clamp(3.4rem, 10vw, 10rem); line-height: .86; letter-spacing: -0.035em; color: var(--titoli); margin: .1em 0 0 -0.04em; }
  .b-apertura-scheda .descr { font-size: var(--scala-1); line-height: 1.35; max-width: 34ch; margin: .6em 0 1.4em; }
  .b-apertura-scheda .fatti { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1.5px solid var(--testo); }
  .b-apertura-scheda .fatti dl { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-self: stretch; margin: 0; }
  .b-apertura-scheda .fatto { padding: 16px 20px 18px 0; margin-right: 20px; border-right: 1.5px solid var(--extra-salvia); }
  .b-apertura-scheda .fatto dt { display: block; margin-bottom: 6px; color: var(--testo-secondario); }
  .b-apertura-scheda .fatto dd { margin: 0; font-weight: 600; }
  .b-apertura-scheda .fatti:not(:has(.azioni)) .fatto:last-child { border-right: 0; }
  .b-apertura-scheda .azioni { display: flex; flex-wrap: wrap; gap: 10px; }
  .scheda.b-apertura-scheda .foto { margin: 28px calc(-1 * var(--margine)) 0; height: min(52vw, 70svh); }
  /* Le foto dei servizi sono di formati diversi (il barboncino è verticale): il punto alto tiene dentro la testa. */
  .scheda.b-apertura-scheda .foto img { object-position: 50% 25%; }
  @media (max-width: 860px) {
    .b-apertura-scheda .fatti { grid-template-columns: 1fr; }
    .b-apertura-scheda .fatti dl { grid-template-columns: 1fr 1fr; column-gap: 20px; }
    .b-apertura-scheda .fatto { margin-right: 0; border-right: 0; border-bottom: 1px solid var(--extra-salvia); }
    /* Il pulsante non va a tutta riga: a destra resta libero il posto del WhatsApp fisso. */
    .b-apertura-scheda .azioni { margin-top: 20px; }
    .scheda.b-apertura-scheda .foto { height: 72vw; }
  }