/* ============================================================
   Il Caffettino — mario.css
   Pagina Mario Moroni (Figma 445:2 desktop · 755:870 mobile).
   Mobile-first: le misure base sono quelle del frame 390,
   il blocco finale porta a quelle del frame 1440.
   ============================================================ */

.pagina-mario { background: var(--color-bg-canvas); }

/* Eyebrow grigia delle sezioni chiare */
.mm-eyebrow { color: var(--color-text-secondary); }

.mm-hero__inner,
.mm-chi__inner,
.mm-libri__inner,
.mm-contatti__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ---------- Hero ---------- */

/* Ordine di sovrapposizione: due immagini escono dal loro riquadro (la foto
   di Mario sotto la fascia scura, la copertina del fumetto sopra e sotto il
   box). Senza questi z-index le sezioni successive, che nel DOM vengono
   dopo, ci dipingerebbero sopra. */
.mm-hero {
  position: relative;
  z-index: 3;
  padding: 104px var(--container-pad) 40px;
  background: var(--color-bg-inverse);
}
.mm-hero__texture {
  position: absolute;
  inset: 0;
  opacity: 0.43;
  overflow: hidden;
  pointer-events: none;
}
.mm-hero__texture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mm-hero__inner {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.mm-hero__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mm-hero__eyebrow { color: var(--color-accent); }
.mm-hero__title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.02;
  color: var(--color-text-on-inverse);
}
.mm-hero__ruolo {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--color-text-on-inverse);
}
.mm-hero__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-on-inverse);
}
.mm-hero__foto {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 16px;
}

/* ---------- Chi è ---------- */

.mm-chi {
  position: relative;
  z-index: 2;
  padding: 56px var(--container-pad) 0;
}
.mm-chi__inner,
.mm-chi__head,
.mm-chi__bio {
  display: flex;
  flex-direction: column;
}
.mm-chi__inner { gap: 24px; }
.mm-chi__head { gap: 10px; }
.mm-chi__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.mm-chi__row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mm-chi__bio { gap: 16px; }
.mm-chi__lead {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
}
.mm-chi__bio p:not(.mm-chi__lead) {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Numeri: su mobile una card grigia, su desktop una colonna a filetti */
.mm-numeri {
  margin: 0;
  padding: 8px 24px;
  list-style: none;
  border-radius: 16px;
  background: var(--color-bg-subtle);
}
.mm-numero {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
}
.mm-numero + .mm-numero { border-top: 1px solid var(--color-border-default); }
.mm-numero__cifra {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.mm-numero__label {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ---------- Libri ---------- */

.mm-libri {
  position: relative;
  z-index: 1;
  padding: 56px var(--container-pad);
}
.mm-libri__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.mm-libri__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.mm-libri__row {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.mm-libro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mm-libro__cover {
  display: block;
  width: 100%;
  height: 498px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.mm-libro__col,
.mm-libro__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-libro__titolo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.mm-libro__testo {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.mm-libro__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
}
.mm-libro__cta:hover { text-decoration: underline; }
/* Freccia come accento, mai testo giallo: è un'icona */
.mm-freccia {
  color: var(--color-accent);
  transition: transform 160ms ease;
}
.mm-libro__cta:hover .mm-freccia,
.mm-fumetto__cta:hover .mm-freccia { transform: translateX(3px); }

/* ---------- Box fumetto ---------- */

.mm-fumetto {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px;
  border-radius: 20px;
  background: #151618;
}
.mm-fumetto__col { display: contents; }
.mm-fumetto__chip { order: 1; }
.mm-fumetto__titolo { order: 2; }
.mm-fumetto__sub { order: 3; }
.mm-fumetto__slot { order: 4; }
.mm-fumetto__testo { order: 5; }
.mm-fumetto__cta-row { order: 6; }

.mm-fumetto__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: var(--radius-full);
  background: #97db03;
  color: #17171c;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mm-fumetto__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #17181d;
}
.mm-fumetto__titolo {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #f0f0eb;
}
.mm-fumetto__sub {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: #97db03;
}
.mm-fumetto__slot {
  width: 100%;
  height: 404px;
}
.mm-fumetto__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.mm-fumetto__testo {
  font-size: 1rem;
  line-height: 1.6;
  color: #f0f0eb;
}
.mm-fumetto__cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.mm-fumetto__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #f0f0eb;
}
.mm-fumetto__cta .mm-freccia { color: #97db03; }
.mm-fumetto__cta:hover { text-decoration: underline; }
.mm-fumetto__meta {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* ---------- Contatti ---------- */

.mm-contatti {
  position: relative;
  z-index: 0;
  padding: 0 var(--container-pad) 64px;
}
.mm-contatti__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mm-contatti__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-contatti__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.mm-contatti__mail {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.mm-contatti__azioni {
  display: flex;
  align-items: center;
  gap: 18px;
}
.mm-contatti__social {
  display: flex;
  gap: 9px;
}
.mm-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-default);
  border-radius: 18px;
  transition: background-color 160ms ease;
}
.mm-social-btn:hover { background: var(--color-border-default); }
.mm-contatti__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-full);
  background: var(--color-bg-accent);
  color: var(--color-text-on-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color 160ms ease;
}
.mm-contatti__cta:hover { background: #f5e000; }

/* ============================================================
   Desktop (frame 1440)
   ============================================================ */

@media (min-width: 1024px) {
  /* ---- Hero ---- */
  .mm-hero { padding: 234px var(--container-pad) 77px; }
  .mm-hero__texture img {
    inset: auto;
    top: -119.29%;
    left: -54.17%;
    width: 208.33%;
    height: 338.57%;
    max-width: none;
    object-fit: fill;
  }
  .mm-hero__inner { display: block; }
  .mm-hero__text {
    max-width: 785px;
    gap: 22px;
  }
  .mm-hero__title {
    font-size: 4.75rem;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .mm-hero__ruolo { font-size: 1.5rem; }
  .mm-hero__lead {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
  }
  /* Foto ancorata al bordo destro della colonna: sfora sotto la fascia
     scura ed entra nella sezione bianca, come nel disegno. */
  .mm-hero__foto {
    position: absolute;
    top: -54px;
    right: 0;
    width: 430px;
    height: 540px;
    border-radius: var(--radius-lg);
  }

  /* ---- Chi è ---- */
  .mm-chi { padding: 100px var(--container-pad) 72px; }
  .mm-chi__inner { gap: 44px; }
  .mm-chi__head { gap: 14px; }
  .mm-chi__title {
    font-size: 3.25rem;
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  .mm-chi__row {
    flex-direction: row;
    align-items: flex-start;
    gap: 72px;
  }
  .mm-chi__bio {
    flex: 1;
    min-width: 0;
    gap: 20px;
  }
  .mm-chi__lead { font-size: 1.25rem; }
  .mm-chi__bio p:not(.mm-chi__lead) {
    font-size: 1.125rem;
    line-height: 1.72;
  }
  .mm-numeri {
    flex: 0 0 360px;
    width: 360px;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .mm-numero { gap: 6px; }
  .mm-numero__cifra {
    font-size: 3.25rem;
    letter-spacing: -0.02em;
  }

  /* ---- Libri ---- */
  .mm-libri { padding: 0 var(--container-pad); }
  .mm-libri__inner { gap: 44px; }
  .mm-libri__title {
    font-size: 3.25rem;
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  .mm-libri__row {
    flex-direction: row;
    gap: 24px;
  }
  .mm-libro {
    flex: 1;
    min-width: 0;
    flex-direction: row;
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
  }
  .mm-libro__cover {
    flex: 0 0 150px;
    width: 150px;
    height: 225px;
  }
  .mm-libro__col {
    flex: 1;
    min-width: 0;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
  }
  .mm-libro__titolo {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .mm-libro__cta {
    font-size: 0.9375rem;
    gap: 4px;
  }
  /* Su desktop la freccia fa parte del testo, non è un accento a sé */
  .mm-libro__cta .mm-freccia { color: inherit; }

  /* ---- Box fumetto ---- */
  .mm-fumetto {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 24px 32px 24px 24px;
    border: 1px solid rgba(151, 219, 3, 0.35);
  }
  .mm-fumetto__col {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
  }
  /* La copertina esce dal riquadro sopra e sotto: il posto che occupa
     resta quello del riquadro (296×280), l'immagine sfora. */
  .mm-fumetto__slot {
    order: 0;
    position: relative;
    flex: 0 0 296px;
    width: 296px;
    height: 280px;
  }
  .mm-fumetto__cover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 296px;
    height: 383px;
    object-fit: contain;
    border-radius: 13px;
  }
  .mm-fumetto__chip {
    padding: 6px 14px 6px 12px;
    font-size: 0.6875rem;
  }
  .mm-fumetto__titolo {
    font-size: 2.5rem;
    letter-spacing: -0.015em;
  }
  .mm-fumetto__sub {
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .mm-fumetto__testo { color: rgba(240, 240, 235, 0.6); }
  .mm-fumetto__cta-row { padding-top: 6px; }
  .mm-fumetto__cta {
    font-size: 0.9375rem;
    color: var(--color-text-on-inverse);
    gap: 4px;
  }

  /* ---- Contatti ---- */
  .mm-contatti { padding: 16px var(--container-pad) 72px; }
  .mm-contatti__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 40px 44px;
    border-radius: 24px;
    background: var(--color-bg-subtle);
  }
  .mm-contatti__text { gap: 8px; }
  .mm-contatti__title {
    font-size: 1.875rem;
    font-weight: 700;
  }
  .mm-contatti__azioni { gap: 24px; }
  .mm-contatti__cta {
    gap: 12px;
    padding: 12px 10px 12px 22px;
  }
  .mm-contatti__cta-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--color-bg-inverse);
    color: var(--color-bg-accent);
  }
}