/* Academy of Arts – sito web · tema "Palcoscenico" */
:root {
  --sfondo: #0f0d11;
  --superficie: #1d171f;
  --superficie-2: #151117;
  --bordo: #3a2c3b;
  --testo: #f4eef2;
  --tenue: #b9a8b5;
  --rosa: #e0467c;
  --rosa-scuro: #b8325f;
  --oro: #e8b86a;
  --raggio: 22px;
  --larghezza: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--oro); }
a:hover { color: #f3cf8d; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(38px, 6vw, 68px); }
h1 em { color: var(--oro); font-style: italic; }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }

.contenitore { width: min(var(--larghezza), 100% - 32px); margin-inline: auto; }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 16px; top: 16px; z-index: 100; background: var(--rosa); color: #fff; padding: 10px 14px; border-radius: 10px; }

.etichetta { font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--rosa); margin-bottom: 10px; }
.nota { color: var(--tenue); font-style: italic; font-size: 15px; }
.piccolo { font-size: 13px; color: var(--tenue); }

/* Pulsanti */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border-radius: 14px;
  font: 700 16px/1 'DM Sans', sans-serif; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.pulsante:hover { transform: translateY(-1px); }
.pulsante-rosa { background: var(--rosa); color: #fff; border: 0; }
.pulsante-rosa:hover { background: var(--rosa-scuro); color: #fff; }
.pulsante-contorno { border: 1px solid var(--oro); color: var(--oro); background: transparent; }
.pulsante-contorno:hover { background: rgba(232, 184, 106, .1); color: var(--oro); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* Testata */
.testata { position: sticky; top: 0; z-index: 50; background: rgba(15, 13, 17, .92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.testata.scorrimento { border-bottom-color: var(--bordo); }
.testata-riga { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.marchio img { width: 140px; height: auto; }
.menu { display: flex; align-items: center; gap: 26px; }
.menu a { color: var(--testo); text-decoration: none; font-size: 15px; font-weight: 500; }
.menu a:hover { color: var(--oro); }
.menu .pulsante { min-height: 42px; padding: 0 18px; font-size: 14px; color: var(--oro); }
.apri-menu { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--bordo); background: var(--superficie); color: var(--oro); cursor: pointer; place-items: center; }

/* Apertura */
.apertura { position: relative; overflow: hidden; padding: 28px 0 40px; }
.nastri { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.copertina { position: relative; margin: 0 0 44px; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.copertina img { width: 100%; height: auto; }
.apertura-griglia { position: relative; display: grid; grid-template-columns: 1fr; max-width: 860px; text-align: center; justify-items: center; }
.apertura-griglia .sottotitolo { margin-inline: auto; }
.apertura-griglia .azioni { justify-content: center; }
.sottotitolo { font-size: 19px; color: #d8cad4; max-width: 560px; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.apertura-foto { margin: 0; border-radius: 28px; overflow: hidden; border: 1px solid var(--bordo); aspect-ratio: 1; }
.apertura-foto img { width: 100%; height: 100%; object-fit: cover; }
.numeri { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 52px; }
.numeri div { padding: 18px 20px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--bordo); }
.numeri strong { display: block; font-family: 'Playfair Display', serif; font-size: 34px; color: var(--oro); line-height: 1.1; }
.numeri span { font-size: 14px; color: var(--tenue); }

/* Sezioni */
.sezione { padding: 88px 0; }
.sezione-scura { background: var(--superficie-2); border-block: 1px solid #241c26; }
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.intro { color: var(--tenue); }

.valori { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.valori li { display: flex; gap: 16px; padding: 18px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--bordo); }
.valori strong { display: block; font-size: 17px; }
.valori span { color: var(--tenue); font-size: 15px; }
.icona { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; background: rgba(232, 184, 106, .12); display: grid; place-items: center; }
.icona svg, .contatti-lista svg { width: 22px; height: 22px; fill: none; stroke: var(--oro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Manifesto */
.manifesto { padding: 40px 0 88px; }
.manifesto-griglia { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 56px; align-items: center; }
.manifesto-foto { margin: 0; border-radius: 26px; overflow: hidden; border: 1px solid var(--bordo); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.manifesto-foto img { width: 100%; height: auto; }
.manifesto-titolo { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; }
.manifesto-titolo em { color: var(--oro); }
.manifesto p:not(.etichetta) { color: #d8cad4; font-size: 18px; max-width: 520px; }

/* Corsi */
.schede-corsi { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 22px; }
.scheda-corso { min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--bordo); background: transparent; color: var(--testo); font: 500 15px 'DM Sans', sans-serif; cursor: pointer; }
.scheda-corso.attiva { background: var(--rosa); border-color: var(--rosa); color: #fff; font-weight: 700; }
.descrizione { color: #d8cad4; max-width: 760px; }
.griglia-orari { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.orario { padding: 18px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--bordo); }
.orario h3 { font-size: 19px; color: var(--oro); margin-bottom: 8px; }
.orario p { margin: 0; font-size: 15px; }
.avviso-orari { margin-top: 22px; font-size: 14px; color: var(--tenue); }

/* Insegnanti */
.griglia-maestri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; max-width: 860px; }
.maestro { border-radius: var(--raggio); overflow: hidden; background: var(--superficie); border: 1px solid var(--bordo); }
.maestro img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; }
.maestro > div { padding: 18px 20px 22px; }
.maestro h3 { margin-bottom: 2px; }
.ruolo { color: var(--rosa); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.maestro p:last-child { color: var(--tenue); font-size: 15px; margin: 0; }

/* Storia dei maestri */
.storia { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; margin-top: 56px; padding: 32px; border-radius: var(--raggio); background: var(--superficie); border: 1px solid var(--bordo); }
.storia-foto { margin: 0; }
.storia-foto img { width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: top; border-radius: 18px; filter: sepia(.15); }
.storia-foto figcaption { margin-top: 10px; text-align: center; font-family: 'Playfair Display', serif; font-style: italic; color: var(--oro); }
.titolo-storia { font-size: clamp(24px, 3vw, 32px); }
.storia p { color: #d8cad4; }
.maestro p:not(.ruolo) { color: var(--tenue); font-size: 15px; margin: 0 0 10px; }

/* Traguardi */
.traguardi { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 28px; }
.traguardo { display: flex; gap: 18px; padding: 24px; border-radius: var(--raggio); background: var(--superficie); border: 1px solid var(--bordo); }
.traguardo:first-child { border-color: var(--oro); }
.traguardo-icona { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; background: rgba(232, 184, 106, .14); display: grid; place-items: center; }
.traguardo-icona svg { width: 26px; height: 26px; fill: none; stroke: var(--oro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.traguardo h3 { font-size: 22px; }
.traguardo p:not(.etichetta) { color: #d8cad4; font-size: 15px; }
.traguardo .motto { font-family: 'Playfair Display', serif; font-style: italic; color: var(--oro) !important; font-size: 17px !important; margin: 0; }

/* Galleria ed eventi */
.galleria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 12px; margin-top: 28px; }
.galleria figure { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--bordo); }
.galleria .grande { grid-column: span 2; grid-row: span 2; }
.galleria .alta { grid-row: span 2; }
.galleria.singola { display: block; max-width: 900px; }
.galleria.singola img { height: auto; display: block; }
/* Galleria: riquadri tutti uguali e allineati; la foto intera si apre al clic */
.galleria.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
.galleria.mosaico figure { margin: 0; display: flex; flex-direction: column; }
.galleria.mosaico figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; display: block; cursor: zoom-in; transition: transform .25s ease, filter .25s ease; }
.galleria.mosaico figure:hover img { filter: brightness(1.08); }
.galleria.mosaico .video, .galleria.mosaico .video-link { grid-column: span 1; }
@media (max-width: 820px) { .galleria.mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Foto ingrandita */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8, 6, 10, .94); display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 56px 12px 18px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox p { margin: 12px 0 0; color: var(--testo); text-align: center; font-size: 15px; max-width: 700px; }
.lightbox button { position: absolute; border: 1px solid rgba(255,255,255,.25); background: rgba(29,23,31,.85); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lightbox button:hover { border-color: var(--oro); color: var(--oro); }
.lightbox .chiudi { top: 12px; right: 12px; }
.lightbox .precedente { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox .successiva { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox .contatore { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); color: var(--tenue); font-size: 14px; margin: 0; }
@media (max-width: 600px) { .lightbox .precedente, .lightbox .successiva { top: auto; bottom: 14px; transform: none; } .lightbox { padding-bottom: 76px; } }
.monogramma { height: 150px; display: grid; place-items: center; font-family: 'Playfair Display', Georgia, serif; font-size: 54px; font-style: italic; letter-spacing: 2px; color: var(--oro); background: radial-gradient(circle at 50% 120%, rgba(224,70,124,.35), transparent 65%), var(--superficie-2); border-bottom: 1px solid var(--bordo); }
.galleria img { width: 100%; height: 100%; object-fit: cover; }
.segnaposto { display: grid; place-items: center; background: var(--superficie); color: #7d6c79; font-size: 13px; text-align: center; padding: 10px; }
.eventi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.evento { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--bordo); }
.evento .data { flex: 0 0 auto; width: 74px; padding: 10px 6px; border-radius: 14px; background: var(--rosa); color: #fff; text-align: center; font-weight: 700; font-size: 13px; line-height: 1.2; }
.evento h3 { font-size: 19px; margin-bottom: 2px; }
.evento p { margin: 0; color: var(--tenue); font-size: 15px; }

/* Contatti */
.contatti-lista { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; }
.contatti-lista li { display: flex; align-items: center; gap: 12px; }
.contatti-lista li > svg { flex: 0 0 auto; }
.contatti-lista li > span { min-width: 0; line-height: 1.5; }
.contatto-etichetta { color: var(--tenue); font-weight: 700; }
.contatto-etichetta::after { content: ':'; }
.mappa { min-height: 220px; border-radius: 18px; border: 1px solid var(--bordo); }
.mappa iframe { width: 100%; height: 260px; border: 0; border-radius: 18px; }
.modulo { padding: 28px; border-radius: var(--raggio); background: var(--superficie); border: 1px solid var(--bordo); display: grid; gap: 14px; }
.modulo h3 { font-size: 26px; }
.modulo label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--tenue); }
.modulo input, .modulo select, .modulo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--bordo); background: var(--superficie-2); color: var(--testo);
  font: 400 16px 'DM Sans', sans-serif;
}
.modulo textarea { resize: vertical; }
.modulo .pulsante { width: 100%; margin-top: 4px; }

/* Piede */
.piede { padding: 46px 0 34px; border-top: 1px solid var(--bordo); text-align: center; }
.piede-griglia { display: grid; justify-items: center; gap: 10px; }
.piede img { width: 150px; height: auto; }
.piede p { margin: 0; color: var(--tenue); font-size: 15px; }

/* ===== Tablet ===== */
@media (max-width: 1000px) {
  .griglia-orari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eventi { grid-template-columns: 1fr; }
}

/* ===== Smartphone ===== */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .apri-menu { display: grid; }
  .menu {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 16px 20px; background: rgba(15, 13, 17, .98); border-bottom: 1px solid var(--bordo);
    transform: translateY(-120%); transition: transform .25s ease; visibility: hidden;
  }
  .menu.aperto { transform: none; visibility: visible; }
  .menu a { padding: 15px 4px; border-bottom: 1px solid #241c26; font-size: 17px; }
  .menu .pulsante { margin-top: 14px; border-bottom: 1px solid var(--oro); min-height: 50px; }
  .marchio img { width: 118px; }
  .apertura { padding-top: 14px; }
  .copertina { border-radius: 18px; margin-bottom: 28px; }
  .apertura-griglia, .due-colonne { grid-template-columns: 1fr; gap: 32px; }
  .apertura-foto { aspect-ratio: 4 / 3; }
  .azioni .pulsante { flex: 1 1 100%; }
  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .sezione { padding: 64px 0; }
  .schede-corsi { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .scheda-corso { flex: 0 0 auto; }
  .griglia-orari { grid-template-columns: 1fr; }
  .griglia-maestri { grid-template-columns: 1fr; }
  .maestro img { aspect-ratio: 4 / 3; }
  .storia { grid-template-columns: 1fr; padding: 20px; gap: 24px; margin-top: 36px; }
  .storia-foto img { max-height: 420px; object-fit: cover; object-position: top; }
  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .traguardi { grid-template-columns: 1fr; }
  .manifesto { padding: 8px 0 64px; }
  .manifesto-griglia { grid-template-columns: 1fr; gap: 28px; }
  .manifesto-foto { max-width: 420px; margin-inline: auto; }
  .traguardo { padding: 18px; gap: 14px; }
  .modulo { padding: 20px; }
}

/* Didascalie e video della galleria (gestiti dal pannello /gestione) */
.galleria figcaption { padding: 8px 12px 10px; font-size: 13px; color: var(--tenue); background: var(--superficie); }
.galleria.mosaico .video, .galleria.mosaico .video-link { background: var(--superficie); }
.video-cornice { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-cornice.verticale { aspect-ratio: 9 / 16; }
.video-cornice.instagram { aspect-ratio: 4 / 6; }
.video-cornice iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-link a { display: block; padding: 28px 16px; text-align: center; color: var(--oro); font-weight: 700; }

/* Colori scelti dal pannello di gestione */
.c-oro { color: var(--oro); }
.c-rosa { color: var(--rosa); }
.c-bianco { color: #fff; }
.c-grigio { color: var(--tenue); }

/* Titoli di studio dei maestri */
.maestro p.formazione { color: var(--testo); background: rgba(232, 184, 106, .08); border-left: 3px solid var(--oro); padding: 9px 12px; border-radius: 8px; font-size: 14px; line-height: 1.55; margin: 6px 0 12px; }
.maestro p.formazione strong { color: var(--oro); }