/* Medyca — /services (13.10.2026)
   Dopo stile.css. Solo due pezzi che nel foglio comune non ci sono, scritti con lo stesso linguaggio
   (variabili, raggi 8/24/40, pillole, filetti, niente ombre oltre a quelle dell'apertura e del bottone rosso):

   1. l'apertura «Navy pieno» con la FOTO PRIMA DEL TITOLO e DUE bottoni (a telefono:
      foto, titolo, sottotitolo, bottoni; a desktop il testo a sinistra e la foto a destra, come in home);
   2. la card di servizio con UNA foto sola, su fondo bianco, in riga o in tre. */

/* ---------- 1. Apertura: foto, titolo, sottotitolo, due bottoni ---------- */
/* La classe apertura--b porta tutto il resto (navy, croce al 6%, barretta rossa, cornice bianca della foto). Qui cambia
   solo come si dispongono i pezzi: la foto sta per prima nel codice, perché a telefono sta sopra il titolo. */
:is(.apertura--b.apertura--servizi .tondo):where([data-sezione^="services/"], [data-sezione^="services/"] *) { margin-top: 0; }
/* il taglio segue il viso: in questa foto sta a metà altezza, più in basso che nella foto della home */
:is(.apertura--b.apertura--servizi .tondo img):where([data-sezione^="services/"], [data-sezione^="services/"] *) { object-position: 50% 30%; }
@media (max-width: 37.49em) { :is(.apertura--b.apertura--servizi .tondo img):where([data-sezione^="services/"], [data-sezione^="services/"] *) { object-position: 50% 58%; } }
:is(.apertura--servizi .apertura-colonna):where([data-sezione^="services/"], [data-sezione^="services/"] *) { margin-top: 2rem; }
/* la frase sotto il titolo è un h2: resta un titolo, ma si legge come il sottotitolo della home (corpo da attacco, a capo senza bilanciare) */
:is(.apertura--servizi h2.attacco):where([data-sezione^="services/"], [data-sezione^="services/"] *) { text-wrap: pretty; }
:is(.apertura--servizi .apertura-azioni):where([data-sezione^="services/"], [data-sezione^="services/"] *) { display: grid; gap: .75rem; margin-top: 2rem; }
:is(.apertura--servizi .apertura-azioni .bottone):where([data-sezione^="services/"], [data-sezione^="services/"] *) { width: 100%; min-width: 0; }
/* sul navy il bottone secondario resta «a contorno», come sul bianco: fondo trasparente, filo e parole bianchi
   (una pillola bianca piena accanto a quella rossa le toglierebbe il primo posto) */
:is(.apertura--servizi .bottone--secondario):where([data-sezione^="services/"], [data-sezione^="services/"] *) { background: transparent; color: #fff; box-shadow: none; }
:is(.apertura--servizi .bottone--secondario:hover):where([data-sezione^="services/"], [data-sezione^="services/"] *) { background: #fff; color: var(--navy); }

/* tablet: la foto a sinistra, il testo a destra (come la home) */
@media (min-width: 37.5em) and (max-width: 63.99em) {
  :is(.apertura--b.apertura--servizi .apertura-griglia):where([data-sezione^="services/"], [data-sezione^="services/"] *) { grid-template-areas: "foto testo"; grid-template-rows: auto; align-items: center; }
  :is(.apertura--servizi .apertura-colonna):where([data-sezione^="services/"], [data-sezione^="services/"] *) { grid-area: testo; margin-top: 0; }
}

/* desktop: testo a sinistra, foto a destra appoggiata in basso (esce di 56px dalla fascia, come in home) */
@media (min-width: 64em) {
  :is(.apertura--b.apertura--servizi .apertura-griglia):where([data-sezione^="services/"], [data-sezione^="services/"] *) { grid-template-areas: "testo foto"; grid-template-rows: auto; }
  :is(.apertura--servizi .apertura-colonna):where([data-sezione^="services/"], [data-sezione^="services/"] *) { grid-area: testo; margin-top: 0; padding-bottom: 4.5rem; }
  :is(.apertura--servizi .apertura-azioni):where([data-sezione^="services/"], [data-sezione^="services/"] *) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; }
  /* la cornice non deve mai uscire dalla sua colonna (a 1024px la colonna è più stretta di 24rem) */
  :is(.apertura--b.apertura--servizi .tondo):where([data-sezione^="services/"], [data-sezione^="services/"] *) { width: min(24rem, 100%); height: auto; aspect-ratio: 4 / 5; }
}

/* ---------- 2. I servizi: card con una foto sola ---------- */
/* Nella home la card ha una foto grande e una piccola tonda, su fondo azzurro. Qui la sezione sta su bianco (subito
   sotto l'apertura navy non va mai una fascia azzurra) e la card prende il fondo azzurro, come la recensione su bianco. */
:is(.servizi--tre):where([data-sezione^="services/"], [data-sezione^="services/"] *) { gap: 1.5rem; }
:is(.servizi--tre .servizio):where([data-sezione^="services/"], [data-sezione^="services/"] *) { background: var(--cielo); }
/* le tre foto non hanno lo stesso rapporto (4:3, 5:3, 3:2): la foto riempie sempre il suo riquadro 3:2, qualunque sia il file */
:is(.servizi--tre .servizio-foto):where([data-sezione^="services/"], [data-sezione^="services/"] *) { overflow: hidden; }
:is(.servizi--tre .servizio-foto .grande):where([data-sezione^="services/"], [data-sezione^="services/"] *) { position: absolute; inset: 0; }
:is(.servizi--tre .servizio-corpo):where([data-sezione^="services/"], [data-sezione^="services/"] *) { padding: var(--scheda); }
@media (min-width: 80em) { :is(.servizi--tre .servizio-corpo > :is(h3, .h3)):where([data-sezione^="services/"], [data-sezione^="services/"] *) { min-height: 2lh; } }   /* affiancate, il testo parte alla stessa altezza */
:is(.servizi--tre .servizio-corpo p):where([data-sezione^="services/"], [data-sezione^="services/"] *) { max-width: var(--colonna); }   /* a tutta larghezza (fino a 767px) il testo non supera mai i 40rem */
:is(.servizi--tre .servizio-corpo p + p):where([data-sezione^="services/"], [data-sezione^="services/"] *) { margin-top: 1.25em; }
:is(.servizi--tre .servizio-corpo p:last-of-type):where([data-sezione^="services/"], [data-sezione^="services/"] *) { margin-bottom: 1.5rem; }
:is(.servizi--tre .servizio-corpo p + .bottone):where([data-sezione^="services/"], [data-sezione^="services/"] *) { margin-top: auto; }
:is(.servizi--tre .servizio-corpo .bottone):where([data-sezione^="services/"], [data-sezione^="services/"] *) { align-self: stretch; width: 100%; min-width: 0; }
/* il file della foto della tiroide ha una riga scura di 1px sul bordo basso (è nel file): un ingrandimento dell'1,5% la ritaglia */
:is(.servizi--tre .servizio-foto .ritaglia):where([data-sezione^="services/"], [data-sezione^="services/"] *) { transform: scale(1.015); }
/* il bottone di tutta la sezione (strutture alberghiere) sta sotto le card, non dentro una */
:is(.servizi-fondo):where([data-sezione^="services/"], [data-sezione^="services/"] *) { margin-top: 2.5rem; }

/* telefono grande: la foto un po' più bassa del 3:2, perché a tutta larghezza diventerebbe enorme */
@media (min-width: 37.5em) and (max-width: 47.99em) {
  :is(.servizi--tre .servizio-foto):where([data-sezione^="services/"], [data-sezione^="services/"] *) { aspect-ratio: 2 / 1; }
}

/* da 768px a 1279px: una card per riga, la foto a sinistra e il testo a destra (tre card affiancate sarebbero strette) */
@media (min-width: 48em) and (max-width: 79.99em) {
  :is(.servizi--tre):where([data-sezione^="services/"], [data-sezione^="services/"] *) { grid-template-columns: minmax(0, 1fr); }
  :is(.servizi--tre .servizio):where([data-sezione^="services/"], [data-sezione^="services/"] *) { flex-direction: row; }
  :is(.servizi--tre .servizio-foto):where([data-sezione^="services/"], [data-sezione^="services/"] *) { flex: 0 0 44%; aspect-ratio: auto; }
  :is(.servizi--tre .servizio-corpo):where([data-sezione^="services/"], [data-sezione^="services/"] *) { justify-content: center; }
  :is(.servizi--tre .servizio-corpo .bottone):where([data-sezione^="services/"], [data-sezione^="services/"] *) { align-self: flex-start; display: inline-flex; width: auto; }
}

/* desktop largo: tre card affiancate, i bottoni allineati in fondo */
@media (min-width: 80em) {
  :is(.servizi--tre):where([data-sezione^="services/"], [data-sezione^="services/"] *) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}