/* ==========================================================================
   Scuola Edile Modena — Design System
   Porting del design system "Scuola Edile Modena" (Claude Design) in CSS
   statico, senza dipendenze da React/Tailwind.

   Sorgente: progetto Claude Design "Scuola Edile sito riporto"
     _ds/scuola-edile-modena-design-system-afc64b18.../
       tokens/{colors,typography,fonts,spacing,effects,base}.css
       _ds_bundle.js  (componenti: Icon, LogoLockup, Button, Badge, Card,
                       IconTile, SectionHeading, AreaCard, CourseCard,
                       ServiceCard, FlashTicker, SiteHeader, SiteFooter)

   Regola cromatica del sistema: 70% neutro, 25% navy, 5% terracotta.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Token — colori
   -------------------------------------------------------------------------- */
:root {
  /* Brand core */
  --navy: #1E3A5F;
  --navy-mid: #2A4A6F;
  --navy-hover: #163051;
  --terracotta: #D97941;
  --terracotta-light: #E68A5C;
  --terracotta-hover: #C16835;
  --gold: #B8860B;
  --gold-light: #DAA520;

  /* Superfici */
  --warm-white: #FAFAF8;
  --warm-sand: #F5F1E8;
  --white: #FFFFFF;
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-300: #CBD5E1;

  /* Testo */
  --text-dark: #2A2A2A;
  --text-medium: #666666;
  --text-light: #999999;
  --foreground: #0F172A;

  /* Linee */
  --border-light: #E5E7EB;

  /* Stati semantici */
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --destructive-surface: #FEE2E2;
  --success: #059669;
  --success-strong: #10B981;
  --success-foreground: #FFFFFF;
  --warning: #D97706;
  --warning-strong: #F59E0B;
  --warning-foreground: #FFFFFF;

  /* Accenti aree formative */
  --area-16ore: #F59E0B;        --area-16ore-tint: #FEF3C7;
  --area-sicurezza: #2563EB;    --area-sicurezza-tint: #DBEAFE;
  --area-professionale: #10B981; --area-professionale-tint: #D1FAE5;
  --area-digitale: #F97316;
  --area-finanziati: #0891B2;   --area-finanziati-tint: #CFFAFE;
  --area-seminari: #8B5CF6;     --area-seminari-tint: #EDE9FE;

  /* Tinte dei riquadri servizio */
  --tint-navy: #E2EAF4;
  --tint-terracotta: #FAE8D9;

  /* Gradienti — esattamente tre, tutti a 135° */
  --gradient-primary: linear-gradient(135deg, #1E3A5F 0%, #2A4A6F 100%);
  --gradient-secondary: linear-gradient(135deg, #D97941 0%, #E68A5C 100%);
  --gradient-gold: linear-gradient(135deg, #B8860B 0%, #DAA520 100%);

  /* Alias semantici */
  --surface-page: var(--warm-white);
  --surface-alt: var(--warm-sand);
  --surface-card: var(--white);
  --surface-inverse: var(--navy);
  --surface-input: #F8FAFC;
  --text-body: var(--text-dark);
  --text-muted: var(--text-medium);
  --text-meta: var(--text-light);
  --text-heading: var(--navy);
  --text-on-inverse: #FFFFFF;
  --accent: var(--terracotta);
  --ring: var(--navy);
  --primary: var(--navy);
  --primary-foreground: #FFFFFF;
  --secondary: var(--terracotta);
  --secondary-foreground: #FFFFFF;
  --muted: var(--warm-sand);
  --muted-foreground: var(--text-medium);
  --border: var(--border-light);
  --background: var(--white);
  --card: var(--white);
}

/* --------------------------------------------------------------------------
   2. Token — tipografia
   -------------------------------------------------------------------------- */
:root {
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --font-display: var(--font-heading);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-size: 16px;

  --text-h1: 48px;  --lh-h1: 1.2;  --fw-h1: 700;
  --text-h2: 36px;  --lh-h2: 1.3;  --fw-h2: 600;
  --text-h3: 24px;  --lh-h3: 1.4;  --fw-h3: 600;
  --text-h4: 18px;  --lh-h4: 1.5;  --fw-h4: 600;
  --text-body-md: 16px; --lh-body: 1.6; --fw-body: 400;
  --text-label: 14px;   --lh-label: 1.5; --fw-label: 500;
  --text-button: 16px;

  --text-10: 10px;
  --text-11: 11px;
  --text-xs: 12px;
  --text-13: 13px;
  --text-sm: 14px;
  --text-15: 15px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  --text-7xl: 72px;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --tracking-eyebrow: 0.05em;
  --tracking-hero: 0.2em;
  --tracking-tight: -0.02em;
}

/* --------------------------------------------------------------------------
   3. Token — spaziature e ritmo
   -------------------------------------------------------------------------- */
:root {
  --spacing-section: 120px;
  --spacing-section-mobile: 80px;
  --spacing-element: 24px;
  --max-width: 1280px;
  --max-width-wide: 1600px;
  --grid-gutter: 24px;

  --pad-container: 16px;
  --pad-container-lg: 32px;
  --pad-hero: 24px;
  --pad-hero-lg: 48px;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --section-py-tight: 48px;
  --section-py: 64px;
  --section-py-loose: 96px;
}

/* --------------------------------------------------------------------------
   4. Token — forma, ombre, movimento
   -------------------------------------------------------------------------- */
:root {
  --radius-button: 6px;
  --radius-input: 6px;
  --radius-card: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-header: 32px;
  --radius-pill: 9999px;

  --shadow-subtle: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-card: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-header: 0 20px 25px -5px rgba(0,0,0,0.05);

  --transition-smooth: 200ms ease-out;
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-hero: 1200ms;
  --ease-out: ease-out;
  --ease-expo: cubic-bezier(0.22, 1, 0.36, 1);

  --hover-lift: -5px;
  --hover-lift-sm: -4px;
  --hover-scale: 1.05;
  --press-scale: 0.95;
  --hover-opacity: 0.8;

  --overlay-scrim: rgba(0,0,0,0.30);
  --overlay-blur: blur(12px);
  --glass-white: rgba(255,255,255,0.15);
  --glass-white-strong: rgba(255,255,255,0.25);
  --hairline-on-navy: rgba(255,255,255,0.10);
}

/* --------------------------------------------------------------------------
   5. Base — default degli elementi
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--font-size); }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--warm-white);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-h2); }
h1 { font-size: var(--text-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--text-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--text-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--text-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); }
p  { font-size: var(--text-body-md); font-weight: var(--fw-body); line-height: var(--lh-body); }
label  { font-size: var(--text-label); font-weight: var(--fw-label); line-height: var(--lh-label); }
button { font-size: var(--text-button); font-weight: var(--fw-medium); line-height: 1.5; font-family: inherit; }
input, textarea, select { font-size: var(--text-body-md); font-weight: var(--fw-normal); line-height: 1.5; font-family: inherit; }

a {
  color: var(--terracotta);
  text-decoration: none;
  transition: color var(--transition-smooth), opacity var(--transition-smooth);
}
a:hover { color: var(--terracotta-hover); }

img { max-width: 100%; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. Layout — contenitori e sezioni
   -------------------------------------------------------------------------- */
.se-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: clamp(20px, 3vw, 32px);
}
.se-container--wide { max-width: var(--max-width-wide); padding-inline: var(--pad-container-lg); }
.se-container--narrow { max-width: 1152px; }

.se-section { padding-block: var(--section-py); }
.se-section--tight { padding-block: var(--section-py-tight); }
.se-section--loose { padding-block: var(--section-py-loose); }
.se-section--white { background: var(--white); }
.se-section--sand  { background: var(--warm-sand); }
.se-section--navy  { background: var(--navy); }
.se-section--page  { background: var(--warm-white); }

/* Griglie ricorrenti: 5-up aree, 4-up servizi, 3-up corsi e feature, 2-up contatti */
.se-grid { display: grid; gap: 16px; }
.se-grid--areas    { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.se-grid--services { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.se-grid--courses  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.se-grid--features { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.se-grid--contact  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }

.se-center { text-align: center; }

/* --------------------------------------------------------------------------
   7. Icon — glifi Lucide da sprite <symbol>, ereditano currentColor
   -------------------------------------------------------------------------- */
.se-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.se-icon--12 { width: 12px; height: 12px; }
.se-icon--14 { width: 14px; height: 14px; }
.se-icon--16 { width: 16px; height: 16px; }
.se-icon--18 { width: 18px; height: 18px; }
.se-icon--20 { width: 20px; height: 20px; }
.se-icon--22 { width: 22px; height: 22px; }
.se-icon--24 { width: 24px; height: 24px; }
.se-icon--28 { width: 28px; height: 28px; }
.se-icon--32 { width: 32px; height: 32px; }

/* --------------------------------------------------------------------------
   8. Button
   Varianti: primary, gradient, outline, ghost, pill, glass, accent, underline
   Dimensioni: sm, md, lg
   -------------------------------------------------------------------------- */
.se-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              gap var(--duration-base) var(--ease-out);
}
.se-btn:hover { transform: scale(var(--hover-scale)); }
.se-btn:active { transform: scale(var(--press-scale)); }
.se-btn[disabled], .se-btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.se-btn--sm { padding: 8px 16px; font-size: var(--text-13); gap: 6px; }
.se-btn--md { padding: 12px 24px; font-size: var(--text-sm); gap: 8px; }
.se-btn--lg { padding: 14px 32px; font-size: var(--text-body-md); gap: 8px; }

.se-btn--full { display: flex; width: 100%; }
.se-btn--full:active { transform: scale(0.98); }

.se-btn--primary {
  background: var(--navy); color: #fff;
  border: 1px solid var(--navy);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  font-weight: var(--fw-bold);
}
.se-btn--primary:hover { color: #fff; box-shadow: var(--shadow-lg); }

.se-btn--gradient {
  background: var(--gradient-primary); color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  font-weight: var(--fw-bold);
}
.se-btn--gradient:hover { color: #fff; box-shadow: var(--shadow-lg); }

.se-btn--outline {
  background: var(--white); color: var(--terracotta);
  border: 2px solid var(--terracotta);
  border-radius: var(--radius-card);
  font-weight: var(--fw-bold);
}
.se-btn--outline:hover { color: var(--terracotta-hover); border-color: var(--terracotta-hover); }

.se-btn--ghost {
  background: transparent; color: var(--text-medium);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-weight: var(--fw-medium);
}
.se-btn--ghost:hover { color: var(--navy); background: var(--slate-100); }

.se-btn--pill {
  background: var(--navy); color: #fff;
  border: 1px solid var(--navy);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.se-btn--pill:hover { color: #fff; }

/* La pill "Area Riservata" porta il gradiente navy */
.se-btn--pill-gradient { background: var(--gradient-primary); border-color: transparent; }

.se-btn--glass {
  background: var(--glass-white); color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-button);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-weight: var(--fw-semibold);
}
.se-btn--glass:hover { color: #fff; background: var(--glass-white-strong); }

.se-btn--accent {
  background: var(--terracotta); color: #fff;
  border: 1px solid var(--terracotta);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.se-btn--accent:hover { color: #fff; background: var(--terracotta-hover); border-color: var(--terracotta-hover); }

.se-btn--underline {
  background: transparent; color: var(--navy);
  border: none;
  border-bottom: 2px solid var(--terracotta);
  border-radius: 0;
  padding: 0 0 4px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* Le frecce scorrono di 4px all'hover */
.se-btn:hover .se-btn__after { transform: translateX(4px); }
.se-btn__after { transition: transform var(--duration-base) var(--ease-out); }

/* --------------------------------------------------------------------------
   9. Badge
   -------------------------------------------------------------------------- */
.se-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  white-space: nowrap;
  background: rgba(217,121,65,0.125);
  color: var(--terracotta);
}
.se-badge--square { padding: 4px 10px; border-radius: var(--radius-button); }
.se-badge--terracotta { background: rgba(217,121,65,0.125); color: var(--terracotta); }
.se-badge--navy { background: var(--tint-navy); color: var(--navy); }
.se-badge--live { background: var(--destructive); color: #fff; }
.se-badge--sand { background: var(--warm-sand); color: var(--text-dark); }
.se-badge--on-navy { background: rgba(255,255,255,0.2); color: #fff; }

/* --------------------------------------------------------------------------
   10. Card
   -------------------------------------------------------------------------- */
.se-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--white);
  color: var(--text-dark);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.se-card--card   { border-radius: var(--radius-card); }
.se-card--xl     { border-radius: var(--radius-xl); }
.se-card--pillow { border-radius: var(--radius-2xl); }
.se-card--flat   { box-shadow: none; }
.se-card--elevated { box-shadow: var(--shadow-xl); }
.se-card--outline-strong { border: 2px solid var(--border-light); }
.se-card--navy {
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-xl);
}

/* Barra colore da 8px sul bordo superiore — mai un bordo laterale colorato */
.se-card__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
}

/* --------------------------------------------------------------------------
   11. IconTile
   -------------------------------------------------------------------------- */
.se-icontile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--radius-xl);
  background: var(--tint-navy);
  color: var(--navy);
  transition: transform var(--duration-base) var(--ease-out);
}
.se-icontile--40 { width: 40px; height: 40px; border-radius: var(--radius-lg); }
.se-icontile--48 { width: 48px; height: 48px; }
.se-icontile--solid { color: #fff; box-shadow: var(--shadow-lg); }
.se-icontile--glass {
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* --------------------------------------------------------------------------
   12. SectionHeading
   -------------------------------------------------------------------------- */
.se-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.se-heading--left { align-items: flex-start; text-align: left; }

.se-heading__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--terracotta);
}
.se-heading__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--navy);
}
.se-heading__subtitle {
  margin: 0;
  max-width: 640px;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: var(--text-medium);
  text-wrap: pretty;
}
.se-heading--on-navy .se-heading__title { color: #fff; }
.se-heading--on-navy .se-heading__subtitle { color: rgba(255,255,255,0.7); }

/* --------------------------------------------------------------------------
   13. AreaCard / ServiceCard (variante compatta)
   -------------------------------------------------------------------------- */
.se-tile { display: block; height: 100%; text-decoration: none; }

.se-tile__card {
  height: 100%;
  border: none;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-2xl);
  padding: 0;
}
.se-tile:hover .se-tile__card {
  box-shadow: var(--shadow-xl);
  transform: translateY(var(--hover-lift));
}
.se-tile:hover .se-icontile { transform: scale(1.1); }

.se-tile__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 24px 24px;
  height: 100%;
}
.se-tile__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  text-align: center;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   14. ServiceCard — variante "feature" (sezione "Dedicato a…")
   -------------------------------------------------------------------------- */
.se-feature__card {
  height: 100%;
  border: 1px solid var(--border-light);
  background: var(--warm-sand);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-2xl);
  padding: 0;
}
.se-tile:hover .se-feature__card {
  box-shadow: var(--shadow-xl);
  transform: translateY(-8px);
}

.se-feature__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  height: 100%;
}
.se-feature__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--navy);
  transition: transform var(--duration-base) var(--ease-out);
}
.se-tile:hover .se-feature__title { transform: translateX(8px); }

.se-feature__desc {
  margin: 0;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: var(--text-medium);
}
.se-feature__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  transition: gap var(--duration-base) var(--ease-out);
}
.se-tile:hover .se-feature__cta { gap: 12px; }

/* La "Dedicato a" porta un cerchio decorativo al 10% nell'angolo */
.se-feature__blob {
  position: absolute;
  top: -32px; right: -32px;
  width: 128px; height: 128px;
  border-radius: 50%;
  opacity: 0.1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   15. CourseCard + DateBadge
   -------------------------------------------------------------------------- */
.se-course { display: block; height: 100%; text-decoration: none; }
/* `display:block` sopra batte il [hidden] dello UA stylesheet: va riqualificato */
.se-course[hidden] { display: none; }

.se-course__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  height: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: none;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.se-course:hover .se-course__row {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.se-course__main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.se-course__text { min-width: 0; }

.se-course__title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--navy);
}
.se-course__meta { display: flex; align-items: center; gap: 6px; }
.se-course__duration {
  font-size: var(--text-10);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--text-medium);
}

.se-course__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: var(--radius-button);
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out);
}
.se-course:hover .se-course__chip { transform: translateX(4px); }

.se-datebadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  flex: 0 0 auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-light);
  background: var(--warm-white);
}
.se-datebadge__month {
  font-size: var(--text-10);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 2px;
  line-height: 1;
}
.se-datebadge__day {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   16. FlashTicker — marquee navy con marcatore rosso
   -------------------------------------------------------------------------- */
@keyframes se-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.se-ticker {
  display: flex;
  align-items: center;
  height: 40px;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--navy-mid);
  box-shadow: var(--shadow-md);
}
.se-ticker__marker {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px;
  background: var(--destructive);
  flex: 0 0 auto;
  z-index: 2;
  box-shadow: 4px 0 12px rgba(0,0,0,0.1);
}
.se-ticker__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.se-ticker__label {
  font-size: var(--text-11);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
}
/* min-width:0 esplicito: l'overflow:hidden già azzera la min-size automatica
   del flex item, ma dichiararlo protegge il marquee da regressioni se un
   domani l'overflow dovesse cambiare (il track è white-space:nowrap). */
.se-ticker__viewport { flex: 1; min-width: 0; overflow: hidden; position: relative; height: 100%; }
.se-ticker__track {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: se-ticker var(--ticker-speed, 50s) linear infinite;
  will-change: transform;
}
.se-ticker:hover .se-ticker__track { animation-play-state: paused; }
.se-ticker__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60%;
  padding: 0 24px;
  border-right: 1px solid var(--hairline-on-navy);
  text-decoration: none;
}
.se-ticker__item span {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
}
/* Il marquee sfuma nel navy su 48px invece di tagliare */
.se-ticker__fade {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 48px;
  pointer-events: none;
  background: linear-gradient(to left, var(--navy), transparent);
}

/* --------------------------------------------------------------------------
   17. LogoLockup
   -------------------------------------------------------------------------- */
.se-lockup { display: flex; align-items: center; gap: 20px; }
.se-lockup__mark { height: 72px; width: auto; display: block; }
.se-lockup__rule {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--slate-300), transparent);
}
.se-lockup__cpt { height: 50px; width: auto; display: block; }

.se-lockup--inverse .se-lockup__mark { filter: brightness(0) invert(1); }
.se-lockup--inverse .se-lockup__cpt  { filter: brightness(0) invert(1); opacity: 0.8; }
.se-lockup--inverse .se-lockup__rule { background: var(--hairline-on-navy); }

/* --------------------------------------------------------------------------
   18. SiteHeader — guscio bianco flottante, raggio 32px, 98% di larghezza
   -------------------------------------------------------------------------- */
.se-header { padding: 16px 1%; width: 100%; }

.se-header__shell {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-header);
  box-shadow: var(--shadow-header);
  border: 1px solid rgba(255,255,255,0.2);
}
.se-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 96px;
  padding: 0 40px;
}
.se-header__nav { display: flex; align-items: center; gap: 0; }
.se-header__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: var(--text-13);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  color: #374151;
  background: transparent;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.se-header__link:hover,
.se-header__link.is-active { color: var(--navy); background: var(--slate-100); }
.se-header__link .se-icon { color: var(--text-light); }
.se-header__link:hover .se-icon,
.se-header__link.is-active .se-icon { color: var(--terracotta); }

.se-header__actions { display: flex; align-items: center; gap: 12px; }

.se-header__globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
}
.se-header__globe:hover { background: var(--slate-100); }

.se-header__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  border: 1px solid var(--slate-300);
  color: var(--navy);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.se-header__search:hover { color: var(--navy); background: var(--white); }

/* Header mobile: barra sticky bianca + drawer a tutto schermo */
.se-header-mobile {
  position: sticky;
  top: 0;
  z-index: 45;
  padding: 12px 16px;
  background: var(--white);
  box-shadow: var(--shadow-header);
}
.se-header-mobile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.se-header-mobile__logo { display: flex; align-items: center; }
.se-header-mobile__logo img { height: 44px; width: auto; display: block; }
.se-header-mobile__actions { display: flex; align-items: center; gap: 8px; }
.se-header-mobile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  color: var(--navy);
  cursor: pointer;
}
.se-header-mobile__icon--primary { background: var(--navy); color: #fff; }
.se-header-mobile__icon:active { transform: scale(0.95); }

.se-drawer {
  position: fixed;
  inset: 0;
  z-index: 44;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 88px 20px 24px;
  background: var(--warm-white);
}
.se-drawer[hidden] { display: none; }
.se-drawer__nav { display: flex; flex-direction: column; gap: 4px; }
.se-drawer__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 16px;
  font-size: var(--text-body-md);
  font-weight: var(--fw-medium);
  color: var(--navy);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border-light);
  text-decoration: none;
}
.se-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   19. Hero — immagine unica a tutta larghezza, inserita in un box arrotondato
   -------------------------------------------------------------------------- */
.se-hero {
  position: relative;
  height: 450px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.se-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity var(--duration-hero) var(--ease-expo),
              transform var(--duration-hero) var(--ease-expo);
}
.se-hero__slide.is-active { opacity: 1; transform: scale(1); }

/* Ogni immagine hero porta uno scrim scuro: il testo bianco non tocca mai la foto */
.se-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(30,58,95,0.4), rgba(0,0,0,0.4));
}
.se-hero__lift {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,58,95,0.6), transparent 60%);
}

.se-hero__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  padding: 32px 48px;
}
.se-hero__eyebrows { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.se-hero__kicker {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-hero);
  color: rgba(255,255,255,0.8);
}
.se-hero__counter {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--terracotta);
}
.se-hero__titles { max-width: 896px; }
.se-hero__title,
.se-hero__subtitle {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(34px, 6vw, 60px);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.se-hero__title { color: #fff; margin-bottom: 8px; }
.se-hero__subtitle { color: rgba(255,255,255,0.6); }
.se-hero__cta { margin-top: 64px; }

.se-hero__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 20;
}
.se-hero__dot {
  display: block;
  height: 4px;
  width: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: width var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}
.se-hero__dot.is-active { width: 48px; background: var(--terracotta); }

/* --------------------------------------------------------------------------
   20. Sezione contatti — due blob sfocati al 20%, l'unica decorazione ammessa
   -------------------------------------------------------------------------- */
.se-contact { position: relative; overflow: hidden; }
.se-contact__blob {
  position: absolute;
  width: 384px; height: 384px;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.2;
  pointer-events: none;
}
.se-contact__blob--tl { top: 0; right: 0; background: var(--gradient-primary); }
.se-contact__blob--br { bottom: 0; left: 0; background: var(--gradient-secondary); }

.se-contact__card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
}
.se-contact__card--primary { background: var(--gradient-primary); color: #fff; }
.se-contact__card--plain { background: #fff; border: 2px solid var(--border-light); }
.se-contact__glow {
  position: absolute;
  top: 0; right: 0;
  width: 256px; height: 256px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  filter: blur(48px);
}
.se-contact__title {
  margin: 24px 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
}
.se-contact__list { display: flex; flex-direction: column; gap: 16px; }
.se-contact__label {
  font-size: var(--text-10);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.se-contact__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: #fff;
}
.se-contact__value:hover { color: #fff; opacity: var(--hover-opacity); }

.se-hours { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.se-hours--ruled { border-bottom: 1px solid var(--border-light); }
.se-hours__day { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-medium); }
.se-hours__time { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--navy); }
.se-hours__time--closed { color: var(--text-light); }

.se-note {
  margin-top: 24px;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--warm-sand);
  border: 1px solid var(--terracotta);
}
.se-note p { margin: 0; font-size: var(--text-xs); line-height: var(--lh-body); color: var(--text-dark); }
.se-note strong { color: var(--terracotta); }

/* --------------------------------------------------------------------------
   21. Link testuale sottolineato su navy ("Vedi calendario completo")
   -------------------------------------------------------------------------- */
.se-underline-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 2px solid rgba(255,255,255,0.6);
  padding-bottom: 4px;
}
.se-underline-link:hover { color: #fff; opacity: var(--hover-opacity); }

/* --------------------------------------------------------------------------
   22. SiteFooter
   -------------------------------------------------------------------------- */
.se-footer { position: relative; background: var(--navy); color: #fff; }
.se-footer__rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-secondary);
}
.se-footer__inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 64px 32px;
}
.se-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.se-footer__coltitle {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--terracotta);
}
.se-footer p { margin: 0; }
.se-footer__stack { display: flex; flex-direction: column; gap: 8px; font-size: var(--text-sm); }
.se-footer__hours { display: flex; flex-direction: column; gap: 24px; font-size: var(--text-sm); }
.se-footer__legalnums {
  padding-top: 16px;
  font-size: var(--text-xs);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.se-footer__closed { margin-top: 4px; font-style: italic; color: var(--terracotta); }

.se-footer__input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline-on-navy);
  background: rgba(255,255,255,0.1);
  color: #fff;
  outline: none;
}
.se-footer__input::placeholder { color: rgba(255,255,255,0.6); }
.se-footer__input:focus { border-color: var(--terracotta); }

.se-footer__social { display: flex; gap: 16px; margin-bottom: 32px; }
.se-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.se-footer__social a:hover { background: rgba(255,255,255,0.2); color: #fff; }

.se-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.se-footer__legal a {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: #D1D5DB;
}
.se-footer__legal a:hover { color: #fff; }

.se-footer__hairline { height: 1px; background: var(--hairline-on-navy); margin-bottom: 32px; }
.se-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.se-footer__partner { display: flex; align-items: center; gap: 16px; }
/* Il design system invertirebbe anche questo marchio (brightness(0) invert(1)),
   ma logo_cpt.png ha il disco interno opaco bianco: invertendolo diventa un
   cerchio bianco pieno e la dicitura "CPT MODENA" sparisce. Finché non arriva
   una versione line-art trasparente, lo lasciamo nei colori originali. */
.se-footer__partner img { height: 32px; opacity: 0.9; border-radius: 50%; }
.se-footer__partner span { font-size: var(--text-xs); color: #9CA3AF; }
.se-footer__credit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: #9CA3AF;
}

/* --------------------------------------------------------------------------
   23. Rivelazione allo scroll — opacity 0→1 con y 20→0, una volta sola
   -------------------------------------------------------------------------- */
.se-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-expo),
              transform var(--duration-slow) var(--ease-expo);
}
.se-reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */
/* Il design system commuta header desktop/mobile a 1250px */
.se-only-desktop { display: block; }
.se-only-mobile { display: none; }

@media (max-width: 1250px) {
  .se-only-desktop { display: none; }
  .se-only-mobile { display: block; }
}

@media (max-width: 1100px) {
  .se-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

@media (max-width: 900px) {
  :root { --section-py-loose: 64px; --section-py: 48px; }
  .se-hero { height: 380px; }
  .se-hero__content { padding: 24px; }
  .se-hero__cta { margin-top: 32px; }
  .se-feature__body { padding: 24px; }
}

@media (max-width: 640px) {
  .se-footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .se-footer__inner { padding: 48px 20px; }
  .se-footer__bottom { justify-content: flex-start; }
  .se-hero { height: 340px; }
  .se-heading__title { font-size: var(--text-3xl); }
  .se-contact__card { padding: 24px; }
  .se-grid--areas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .se-reveal { opacity: 1; transform: none; }
  .se-ticker__track { animation: none; }
}