/* =================================================================
   Accademia Italiana Chef — Pisa
   Stili dei custom post type (ricette, rassegna stampa, tecniche,
   testimonial, portfolio, team).

   File STATICO, servito direttamente e accodato da app/setup.php:
   NON passa da Vite, quindi non richiede un build con Node.
   Usa gli stessi token di resources/css/app.css e aggiunge solo cio'
   che li' non esiste (tipografia dei contenuti, schede, paginazione).
   Al prossimo build in locale queste regole si possono spostare
   dentro app.css e questo file eliminato.
   ================================================================= */

/* ---- utilita' che il tema non definisce -------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- hero compatto per archivi e schede -------------------------- */
/* Specificita' alta di proposito: app.css viene caricato dopo. */

.hero.cpt-hero .hero-inner {
  min-height: 0;
  max-width: 900px;
  padding-block: clamp(46px, 7vw, 92px);
}

.hero.cpt-hero h1 {
  font-size: clamp(32px, 5.4vw, 62px);
  margin-top: 20px;
}

.hero.cpt-hero .photo {
  background-position: center 42%;
}

.hero.cpt-hero.no-photo {
  background: var(--teal-2);
}

.hero.cpt-hero .note {
  margin-top: 20px;
}

/* riga di metadati sotto il titolo dell'hero */
.cpt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 24px;
  font-size: 14px;
  color: rgba(243, 233, 216, .82);
}

.cpt-meta .mi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cpt-meta svg {
  width: 15px;
  height: 15px;
  opacity: .7;
  flex: none;
}

.cpt-meta a:hover {
  color: var(--gold-soft);
}

/* ---- corpo editoriale ------------------------------------------- */
/* Il tema imposta p{margin:0} e h1-h4{margin:0}: senza queste regole
   il contenuto dell'editor esce come un muro di testo. */

.prose {
  max-width: 74ch;
  font-size: 17.5px;
  color: var(--ink-soft);
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h2,
.prose h3,
.prose h4 {
  color: var(--ink);
}

.prose h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  margin-top: 1.7em;
}

.prose h3 {
  font-size: clamp(21px, 2.6vw, 27px);
  margin-top: 1.5em;
}

.prose h4 {
  font-size: 19px;
  margin-top: 1.4em;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  color: var(--accent-deep);
}

.prose strong {
  color: var(--ink);
}

/* Il preflight di Tailwind imposta ol,ul,menu{list-style:none}: senza queste
   dichiarazioni gli elenchi dell'editor uscirebbero senza pallini/numeri. */
.prose ul,
.prose ol {
  padding-left: 1.35em;
  list-style-position: outside;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose ul ul {
  list-style-type: circle;
}

.prose ol ol {
  list-style-type: lower-alpha;
}

.prose li::marker {
  color: var(--ink-faint);
}

.prose li + li {
  margin-top: .45em;
}

.prose img,
.prose figure img {
  border-radius: 4px;
}

.prose figure {
  margin: 0;
}

.prose figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.prose blockquote {
  margin: 0;
  padding-left: 22px;
  border-left: 3px solid var(--accent-2);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.18em;
  color: var(--ink);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}

.prose th,
.prose td {
  border: 1px solid var(--line);
  padding: 10px 13px;
  text-align: left;
}

.prose th {
  background: var(--cream-2);
  color: var(--ink);
  font-weight: 600;
}

.prose code {
  background: var(--cream-2);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: .9em;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 2.2em;
}

/* ---- impaginazione della scheda --------------------------------- */

.entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, .9fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 26px 26px 28px;
}

.panel + .panel {
  margin-top: 20px;
}

.panel h3 {
  font-size: 20px;
}

.panel .loc-rows {
  margin-top: 12px;
}

.panel .loc-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.panel .btn {
  margin-top: 20px;
  width: 100%;
  justify-content: center;
}

/* ---- pillole dei termini ---------------------------------------- */

.term-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.term-pills a {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--cream);
  transition: border-color .2s, color .2s;
}

.term-pills a:hover {
  border-color: var(--accent-2);
  color: var(--accent);
}

/* ---- schede in griglia ------------------------------------------ */

.course .thumb.empty {
  background: var(--cream-2);
}

.course .thumb.empty .ph {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-faint);
  opacity: .45;
}

.course h3 a,
.tcard .who .nm a {
  color: inherit;
}

.course:hover h3 a {
  color: var(--accent);
}

.tcard .who a:hover .nm {
  color: var(--accent);
}

/* ---- elenco allegati -------------------------------------------- */

.dl-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.dl {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--cream);
  transition: border-color .2s, transform .2s;
}

.dl:hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
}

.dl .ico {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  display: grid;
  place-items: center;
}

.dl .ico svg {
  width: 17px;
  height: 17px;
}

.dl .nm {
  display: block;
  font-weight: 600;
  font-size: 15px;
  word-break: break-word;
}

.dl .sub {
  display: block;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ---- galleria / slider del portfolio ---------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.gallery-grid figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--paper);
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.gallery-grid .embed {
  aspect-ratio: 16/9;
}

.gallery-grid .embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.gallery-grid figcaption {
  padding: 11px 15px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ---- profilo del membro del team -------------------------------- */

.profile {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.profile .portrait {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream-2);
}

.profile .portrait img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.profile .role {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 25px);
  color: var(--accent);
  margin-top: 10px;
}

.social-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.social-list a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: background .2s, color .2s, border-color .2s;
}

.social-list a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.social-list svg {
  width: 16px;
  height: 16px;
}

/* ---- valutazione a stelle --------------------------------------- */

.rating {
  display: inline-flex;
  gap: 3px;
  color: var(--accent-2);
  font-size: 17px;
  line-height: 1;
}

.rating .off {
  color: var(--line);
}

/* ---- citazione grande (testimonial) ----------------------------- */

.pull-quote {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 38px);
  font-style: italic;
  line-height: 1.28;
  color: var(--ink);
  max-width: 26ch;
}

.pull-quote::before {
  content: "\201C";
  display: block;
  font-size: 2.2em;
  line-height: .5;
  color: var(--accent-2);
  margin-bottom: 14px;
}

/* ---- paginazione ------------------------------------------------ */

.pagination {
  margin-top: clamp(38px, 5vw, 62px);
  display: flex;
  justify-content: center;
}

.pagination .nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.pagination .page-numbers {
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: border-color .2s, color .2s, background .2s;
}

.pagination .page-numbers:hover {
  border-color: var(--accent-2);
  color: var(--accent);
}

.pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* ---- navigazione fra schede ------------------------------------- */

.entry-nav {
  margin-top: clamp(40px, 5vw, 66px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.entry-nav .link-arrow .arr {
  display: inline-block;
}

.entry-nav .prev .arr {
  transform: scaleX(-1);
}

.entry-nav .prev:hover .arr {
  transform: scaleX(-1) translateX(5px);
}

/* ---- stato vuoto ------------------------------------------------ */

.empty-state {
  text-align: center;
  padding-block: clamp(36px, 6vw, 72px);
}

.empty-state h2 {
  font-size: clamp(26px, 3.4vw, 36px);
}

.empty-state p {
  margin-top: 12px;
  color: var(--ink-soft);
}

.empty-state .btn {
  margin-top: 26px;
}

/* ---- responsive -------------------------------------------------- */

@media (max-width: 980px) {
  .entry-grid,
  .profile {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- ritratto e ruolo dentro un pannello ------------------------ */

.panel .portrait {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 18px;
}

.panel .portrait img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.panel .role,
.profile .role {
  font-family: var(--display);
  font-style: italic;
  color: var(--accent);
  margin-top: 6px;
}

.panel .role {
  font-size: 18px;
}

.panel .social-list {
  margin-top: 18px;
}

/* ---- riga di condivisione --------------------------------------- */

.share {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.share .lbl {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}

.share .social-list {
  margin-top: 12px;
}

/* ---- navigazione paginata dentro il contenuto ------------------- */

.prose .page-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-faint);
}

/* profilo senza immagine in evidenza: niente colonna vuota */
.profile.no-portrait {
  grid-template-columns: 1fr;
}

/* ---- pagina "Dove siamo": schede referenti e corsi ---------------- */

.cred p small {
  display: inline-block;
  margin-top: 6px;
  color: var(--ink-faint);
  font-size: 13px;
}

a.cred {
  display: flex;
  flex-direction: column;
  color: inherit;
}

a.cred h3 {
  color: var(--ink);
}

a.cred:hover h3 {
  color: var(--accent);
}

a.cred .link-arrow {
  margin-top: auto;
  padding-top: 16px;
}

/* l'avviso "dati dimostrativi" usa il componente alert di Sage */
.wrap > [class*="bg-yellow"] {
  border-radius: 4px;
  padding: 14px 18px;
}

/* ---- pagina corso: dati in evidenza ------------------------------ */

.corso-evidenza {
  padding-block: clamp(28px, 4vw, 48px);
  background: var(--cream-2);
}

.fact-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.fact {
  background: var(--paper);
  padding: 22px 24px;
  text-align: center;
}

.fact .lbl {
  display: block;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}

.fact .val {
  display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.15;
  color: var(--ink);
}

@media (max-width: 720px) {
  .fact-strip {
    grid-template-columns: 1fr;
  }
}

/* ---- video di presentazione -------------------------------------- */

.video-corso {
  background: var(--alt);
}

.embed-16-9 {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--teal-2);
  max-width: 940px;
  margin-inline: auto;
}

.embed-16-9 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- informazioni generali: i due riquadri ------------------------ */

.info-corso {
  background: var(--cream);
}

/* Le due schede partono dallo stesso bordo superiore e arrivano alla stessa
   altezza: "stretch" e' il default della griglia, "start" le faceva collassare
   ognuna sulla propria altezza. Il contenuto resta in alto, il pulsante in
   fondo, e lo spazio che avanza si raccoglie fra i due. */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

.info-grid .panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* .panel + .panel serve ai pannelli impilati in colonna (colonna laterale delle
   schede): dentro la griglia i due riquadri sono fratelli adiacenti e quel
   margine faceva partire il secondo 20px piu' in basso del primo. */
.info-grid .panel + .panel {
  margin-top: 0;
}

/* Il pulsante resta ancorato in fondo al riquadro: lo spazio che avanza nel
   riquadro piu' corto si raccoglie sopra il pulsante, cosi' le due CTA sono
   allineate fra loro. Il margine sulle righe garantisce una distanza minima
   quando invece il riquadro e' pieno e non avanza spazio. */
.info-grid .panel .loc-rows {
  margin-bottom: 22px;
}

.info-grid .panel .btn {
  margin-top: auto;
}

.panel-wide {
  margin-top: 24px;
}

.requisiti {
  margin: 14px 0 0;
  padding-left: 1.3em;
  list-style-type: disc;
  color: var(--ink-soft);
}

.requisiti li + li {
  margin-top: .5em;
}

.requisiti li::marker {
  color: var(--accent-2);
}

@media (max-width: 980px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- programma --------------------------------------------------- */

.programma-corso {
  background: var(--alt);
}

.programma-corso .section-head {
  margin-bottom: 24px;
}

/* la sezione iscrizioni riusa .final: il kicker centrato ha bisogno di spazio */
.final .kicker.center {
  display: flex;
  justify-content: center;
}

/* ---- date del corso (dal pannello) -------------------------------- */

.date-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

.date-grid .panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.date-grid .panel + .panel {
  margin-top: 0;
}

.date-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.date-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.date-list li:last-child {
  border-bottom: 0;
}

.date-list .giorno {
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink);
}

.date-list li.prima .giorno {
  color: var(--accent);
}

.date-list .spec {
  font-size: 13.5px;
  color: var(--ink-faint);
}

/* i posti residui: la barra verticale che arriva dal pannello la disegna il CSS */
.posti {
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--accent-2);
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.posti.esaurito {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cal-lezioni {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-faint);
  line-height: 1.65;
}

.section.final .posti-evidenza {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--gold-soft);
  letter-spacing: .04em;
}

.section.final .posti-evidenza.esaurito {
  opacity: .7;
  text-transform: uppercase;
}

/* nel calendario i posti vanno sotto la data, non di fianco */
.cal-data .posti {
  display: block;
  margin-top: 3px;
  padding-left: 0;
  border-left: 0;
  font-size: 12.5px;
}

@media (max-width: 780px) {
  .date-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- pagina corso: sezione testo + foto -------------------------- */
/* Riusa .feature della home; il modificatore inverte le due colonne. */

.feature.media-right .grid > *:first-child {
  order: 2;
}

.feature .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature .kicker {
  margin-bottom: 14px;
}

/* ---- le fasi del percorso: indice visivo ------------------------- */

.fasi {
  background: var(--cream);
}

.fasi-lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.fase {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}

.fase:hover {
  transform: translateY(-5px);
  border-color: var(--accent-2);
  box-shadow: 0 30px 60px -42px rgba(34, 26, 18, .5);
}

.fase .thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.fase .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fase .step {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
}

.fase h3 {
  padding: 18px 20px 22px;
  font-size: 19px;
  line-height: 1.2;
}

@media (max-width: 980px) {
  .fasi-lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .fasi-lista {
    grid-template-columns: 1fr;
  }
}

}