/* ============================================================
   Guitar Academy — Sezioni di pagina
   ============================================================ */

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--cream-2);
  background:
    radial-gradient(48% 90% at 90% -10%, rgba(224, 138, 46, .18), transparent 60%),
    radial-gradient(40% 70% at -10% 110%, rgba(224, 138, 46, .08), transparent 55%),
    var(--dark);
  padding-block: clamp(48px, 8vw, 108px) clamp(56px, 9vw, 120px);
}
.hero__grid { display: grid; grid-template-columns: 1.08fr .86fr; gap: clamp(36px, 5.5vw, 80px); align-items: center; }
.hero__badge { margin-bottom: clamp(20px, 3vw, 28px); }
.hero h1 { color: var(--cream); margin-bottom: clamp(16px, 2.6vw, 26px); font-weight: 800; }
.hero h1 em { color: var(--amber); font-size: 1.06em; }
.hero__sub { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--cream-2); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: clamp(26px, 3.6vw, 40px); }
.hero__facts {
  margin-top: clamp(32px, 4vw, 52px); padding-top: 28px;
  border-top: 1px solid var(--dark-line);
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3.4vw, 52px);
}
.hero__media { position: relative; }
.hero__media .ph-media { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); }
.hero__media::before {
  content: ""; position: absolute; inset: 16px -14px -14px 16px;
  border: 1px solid rgba(224, 138, 46, .35); border-radius: var(--r-3);
  pointer-events: none;
}
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 560px; }
  .hero__media .ph-media { aspect-ratio: 16 / 10; }
}
@media (max-width: 960px) { .hero__media::before { inset: 10px -8px -8px 10px; } }

/* ---------- Hero pagine interne ---------- */
.page-hero { background: var(--dark); color: var(--cream-2); padding-block: clamp(36px, 5vw, 64px) clamp(44px, 6vw, 80px); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 110% at 88% -20%, rgba(224, 138, 46, .16), transparent 60%);
}
.page-hero .crumbs a { color: var(--cream-2); }
.page-hero .crumbs a:hover { color: var(--amber); }
.page-hero .crumbs [aria-current] { color: var(--cream); }
.page-hero h1 { color: var(--cream); font-size: var(--fs-display-2); margin-bottom: var(--s-4); }
.page-hero .lede { color: var(--cream-2); font-size: var(--fs-lead); max-width: 62ch; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: clamp(22px, 3vw, 32px); }

/* ---------- Griglia percorsi ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr)); gap: clamp(18px, 2.4vw, 26px); }
.course-grid > *, .why-grid > *, .teachers-grid > *, .icon-list > *, .data-row > * { min-width: 0; }

/* ---------- Perché Guitar Academy ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 3vw, 36px); }
.why-item { display: grid; gap: 14px; padding: 6px 0; }
.why-item h3 { font-size: 1.2rem; }
.why-item p { color: var(--cream-2); font-size: .97rem; max-width: 44ch; }
.why-item p strong { color: var(--cream); font-weight: 600; }
.why-note { margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--dark-line); padding-top: 26px; display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: center; justify-content: space-between; }
.why-note p { color: var(--cream-2); font-size: var(--fs-small); max-width: 60ch; }
.why-note .btn--link { white-space: normal; text-align: left; }
@media (max-width: 560px) {
  .why-note { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- Split Accademia (home) ---------- */
.split { display: grid; grid-template-columns: 1.05fr .8fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--rev .split__media { order: -1; } }
.split__media .ph-media { box-shadow: var(--sh-2); }

/* ---------- Docenti ---------- */
.teachers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: clamp(20px, 3vw, 34px); }
.teacher-card { display: grid; gap: 12px; align-content: start; }
.teacher-card .ph-media { box-shadow: var(--sh-1); transition: transform var(--t-med), box-shadow var(--t-med); }
.teacher-card:hover .ph-media { transform: translateY(-5px); box-shadow: var(--sh-2); }
.teacher-card h3 { font-size: 1.16rem; }
.teacher-role { font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); }
.teacher-bio { font-size: .93rem; color: var(--ink-2); }
.teacher-cta { font-size: .9rem; font-weight: 700; color: var(--amber-deep); text-decoration: none; display: inline-flex; gap: 7px; align-items: center; justify-self: start; border-bottom: 2px solid transparent; }
.teacher-cta:hover { border-color: var(--amber); }
.teacher-cta .ico { width: 15px; height: 15px; }

/* ---------- Tabella comparativa ---------- */
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
table.tbl { width: 100%; min-width: 780px; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 15px 18px; border-top: 1px solid var(--line); font-size: .93rem; }
.tbl thead th { border-top: 0; }
.tbl th.course-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; }
.tbl th .pill { margin-top: 8px; }
.tbl td.feat { font-weight: 600; color: var(--muted); font-size: .8rem; letter-spacing: .02em; width: 190px; }
.tbl td.dim { color: var(--muted); }
.tbl tbody tr:first-child th, .tbl tbody tr:first-child td { border-top: 0; }
.tbl a.course-mini { text-decoration: none; color: var(--amber-deep); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tbl a.course-mini:hover { text-decoration: underline; }

/* ---------- News / righe archivio ---------- */
.news-list { display: grid; }
.news-row { display: flex; align-items: baseline; gap: var(--s-5); padding: 20px 4px; border-bottom: 1px solid var(--line); }
.news-row:last-child { border-bottom: 0; }
.news-row time { font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: var(--amber-deep); white-space: nowrap; }
.news-row h3 { font-size: 1.04rem; }
.news-row p { font-size: .92rem; color: var(--ink-2); margin-top: 4px; }
.news-row .news-where { margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) { .news-row { flex-wrap: wrap; gap: 6px var(--s-4); } .news-row .news-where { margin-left: 0; } }

/* ---------- Layout a 2 colonne (dettagli corso) ---------- */
.layout-detail { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 940px) { .layout-detail { grid-template-columns: minmax(0, 1fr); } }
.sticky { position: sticky; top: calc(var(--head-h) + 28px); display: grid; gap: var(--s-5); }
@media (max-width: 940px) { .sticky { position: static; } }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-top: 1.6em; }
.prose h3 { font-size: 1.12rem; margin-top: 1.4em; }
.prose ul { padding-left: 0; }
.prose li { margin-bottom: 10px; }

/* ---------- Riga lezioni (chips materia) ---------- */
.lesson-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lesson-chips .pill { letter-spacing: .06em; text-transform: none; font-size: .85rem; padding: 9px 16px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.lesson-chips .pill .ico { width: 15px; height: 15px; color: var(--amber-deep); }

/* ---------- CTA finale (home) ---------- */
.cta-final {
  position: relative; overflow: hidden; background: var(--dark); color: var(--cream-2);
  padding-block: clamp(56px, 9vw, 110px);
}
.cta-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 100% at 12% 0%, rgba(224, 138, 46, .16), transparent 55%),
    radial-gradient(40% 80% at 100% 100%, rgba(224, 138, 46, .1), transparent 55%);
}
.cta-final__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
@media (max-width: 940px) { .cta-final__grid { grid-template-columns: 1fr; } }
.cta-final h2 { color: var(--cream); max-width: 18ch; }
.cta-final .lede { color: var(--cream-2); max-width: 52ch; margin-top: var(--s-4); }
.cta-final .form-card { background: var(--surface); color: var(--ink); border-radius: var(--r-3); padding: clamp(24px, 3.4vw, 36px); box-shadow: 0 40px 90px -45px rgba(0, 0, 0, .9); }
.cta-final .form-card h3 { font-size: 1.35rem; }
.cta-final .form-card .form-note { font-size: .82rem; }
.cta-final__contacts { display: grid; gap: 16px; margin-top: clamp(26px, 3vw, 36px); }
.cta-line { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--cream); font-weight: 700; font-size: 1.05rem; }
.cta-line .tile { background: var(--dark-2); border: 1px solid var(--dark-line); }
.cta-line small { display: block; font-weight: 500; color: var(--cream-2); font-size: .8rem; }
.cta-line:hover { color: var(--amber); }

/* ---------- Sedi ---------- */
.sedi-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sedi-chips .pill { letter-spacing: .04em; text-transform: none; font-size: .92rem; font-weight: 600; padding: 9px 18px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); }
.sedi-chips .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.section--dark .sedi-chips .pill { background: var(--dark-2); border-color: var(--dark-line); color: var(--cream-2); }

/* ---------- Design system (pagina) ---------- */
.ds-block { margin-bottom: clamp(48px, 7vw, 88px); }
.ds-sub { font-size: var(--fs-lead); color: var(--ink-2); margin: 6px 0 0; max-width: 70ch; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-4); }
.swatch { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--surface); }
.swatch__chip { height: 88px; display: grid; place-items: center; }
.swatch__chip span { background: rgba(255, 255, 255, .85); color: #000; padding: 2px 8px; border-radius: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; }
.swatch__chip--ink span, .swatch__chip--dark span { background: rgba(0, 0, 0, .55); color: #fff; }
.swatch__meta { padding: 10px 12px; border-top: 1px solid var(--line); font-size: .78rem; }
.swatch__meta strong { display: block; font-family: var(--font-display); font-size: .8rem; }
.swatch__meta code { color: var(--muted); font-size: .72rem; }
.type-spec { display: grid; gap: 0; }
.type-row { display: grid; grid-template-columns: 130px 1fr; gap: var(--s-5); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.type-row .t-label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.type-row .t-demo { font-family: var(--font-display); }
.demo-zone { display: grid; gap: var(--s-4); }