:root{
  --black:#0f0f0f;
  --text-primary:#0c0e10;
  --text-grey:#6b6b6b;
  --border-grey:#d1d1d1;
  --cream:#f9eddc;
  --cream-2:#f2decc;
  --white:#ffffff;
  --radius-card:12px;
  --radius-btn:8px;
  --maxw:1440px;
  --side-pad:105px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans', Arial, sans-serif;
  color:var(--text-primary);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
.top-bar{width:100%;height:10px;background:#F06565;flex:none;}
img{max-width:100%;display:block;}
a{color:inherit;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--black);
  color:var(--white);
  border:1px solid var(--black);
  border-radius:var(--radius-btn);
  padding:16px 24px;
  font-weight:700;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  min-height:56px;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.btn:hover{background:#2a2a2a;}
.btn--outline{background:var(--black);border-color:var(--white);}

/* dotted pattern background used behind hero + course grid */
.pattern-bg{
  background-image: radial-gradient(circle, #d9d9d9 1px, transparent 1.4px);
  background-size: 12px 12px;
  background-position: top left;
  background-color:#ffffff;
}

/* ---------- HERO ---------- */
.hero-section{padding:68px 16px 32px;}
.hero-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:40px;align-items:center;}
.hero-top{display:flex;gap:16px;align-items:center;width:100%;max-width:1242px;flex-wrap:nowrap;}
.hero-title-block{flex:1 1 55%;max-width:676px;display:flex;flex-direction:column;gap:24px;align-items:flex-start;}
.hero-title-block h1{
  font-size:52px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:0.56px;
  max-width:680px;
}
.hero-desc{flex:1 1 45%;text-align:left;font-size:20px;line-height:1.4;max-width:546px;}
.hero-image-frame{
  position:relative;
  width:100%;
  max-width:1242px;
}
.hero-image{
  position:relative;
  width:100%;
  height:371px;
  border:1px solid var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:32px 105px 44px;
}
.hero-image img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;}
.hero-image-frame .anchor{
  position:absolute;
  width:16px;
  height:16px;
  background:#fff;
  border:2px solid var(--black);
  z-index:3;
  pointer-events:none;
}
.hero-image-frame .anchor.tl{top:0;left:0;transform:translate(-50%,-50%);}
.hero-image-frame .anchor.tr{top:0;right:0;transform:translate(50%,-50%);}
.hero-image-frame .anchor.bl{bottom:0;left:0;transform:translate(-50%,50%);}
.hero-image-frame .anchor.br{bottom:0;right:0;transform:translate(50%,50%);}

/* ---------- DARK INFO BAR ---------- */
.info-bar{
  background:var(--black);
  color:var(--white);
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:center;
  padding:24px var(--side-pad);
  flex-wrap:wrap;
  text-align:center;
}
.info-bar .item{display:flex;gap:12px;align-items:center;font-size:16px;}
.info-bar .item b{font-weight:700;}
.info-bar .sep{width:1px;height:32px;background:#3a3a3a;}
.icon{width:32px;height:32px;flex:none;}

/* ---------- IN EVIDENZA ---------- */
.featured-section{
  background:var(--cream);
  padding:60px var(--side-pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.featured-section h2{font-size:40px;line-height:1.3;font-weight:700;align-self:center;width:100%;max-width:1230px;}
.featured-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:30px;
  width:100%;
  max-width:1230px;
}
.featured-cards .card{width:100%;}

/* ---------- CARD FORMAZIONE ---------- */
.card{
  background:var(--white);
  border:1px solid rgba(15,15,15,0.2);
  border-radius:var(--radius-card);
  padding:12px;
  width:285px;
  height:367px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:none;
}
.card .thumb{width:100%;height:80px;border-radius:8px;overflow:hidden;flex:none;background:#eee;}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .body{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-height:0;word-break:break-word;}
.card .body h3{font-size:20px;line-height:1.1;font-weight:700;}
.card .body .author{font-family:'DM Sans', Arial, sans-serif;font-style:italic;font-size:14px;line-height:1.5;}
.card .body p.desc{font-size:14px;line-height:1.3;overflow:hidden;}
.card .btn{width:100%;font-size:14px;}

/* ---------- COURSE GRID / ACCORDION ---------- */
.courses-section{
  padding:32px var(--side-pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
}
.courses-grid-wrap{
  width:100%;
  max-width:1230px;
  overflow:hidden;
  transition:max-height .5s ease;
  max-height:397px; /* one row visible (367 card + gap) */
}
.courses-grid-wrap.is-open{
  max-height:8000px; /* abbondante per contenere tutte le righe a qualunque numero di colonne, incluso l'1 colonna da mobile */
}
.courses-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:30px;
  width:100%;
}
.courses-grid .card{width:100%;}

.divider{width:100%;max-width:1230px;height:1px;background:var(--border-grey);}

.toggle-wrap{display:flex;justify-content:center;width:100%;}
#toggleBtn{width:246px;}
#toggleBtn .chev{display:inline-block;margin-left:8px;transition:transform .25s ease;}
#toggleBtn.is-open .chev{transform:rotate(180deg);}

/* ---------- CTA / NEED HELP ---------- */
.cta-section{
  background:var(--black);
  color:var(--white);
  padding:120px var(--side-pad);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:32px;
}
.cta-section .eyebrow{font-size:20px;}
.cta-section h2{font-size:56px;line-height:1.3;font-weight:700;letter-spacing:0.56px;margin-top:16px;margin-bottom:16px;}
.cta-section .btn{border-color:var(--white);width:246px;}

/* ---------- CONTACT STRIP ---------- */
.contact-strip-outer{background:var(--cream-2);}
.contact-strip{
  background:var(--white);
  padding:32px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  text-align:center;
}
.contact-strip h3{font-size:24px;line-height:1.5;font-weight:700;max-width:810px;}
.contact-strip .actions{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;}

/* ---------- FOOTER ---------- */
footer{
  background:var(--white);
  border-top:1px solid var(--border-grey);
  padding:24px 16px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
footer .foot-logo{height:52px;}
footer .legal-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--text-primary);
}
footer .legal-links a{text-decoration:underline;}
footer .legal-links .sep{width:1px;height:16px;background:var(--text-primary);}

@media (max-width:1279px){
  :root{--side-pad:32px;}
}
@media (max-width:1024px){
  :root{--side-pad:32px;}
  .courses-grid{grid-template-columns:repeat(2,1fr);}
  .courses-grid-wrap{max-height:764px;}
  .featured-cards{grid-template-columns:repeat(2,1fr);}
  .hero-title-block h1{font-size:40px;}
  .hero-top{flex-wrap:nowrap;}
  .hero-title-block{flex:1 1 55%;max-width:none;}
  .hero-desc{flex:1 1 45%;max-width:none;text-align:left;}
  .cta-section h2{font-size:36px;}
}
@media (max-width:768px){
  .hero-top{flex-direction:column;align-items:center;gap:40px;}
  .hero-title-block{flex:0 0 auto;align-items:center;text-align:center;max-width:100%;gap:32px;}
  .hero-desc{flex:0 0 auto;text-align:center;max-width:100%;}
}
@media (max-width:640px){
  :root{--side-pad:16px;}
  .courses-grid{grid-template-columns:1fr;}
  .featured-cards{grid-template-columns:1fr;}
  .card{width:100%;}
  .hero-image{padding:24px;height:auto;aspect-ratio:4/3;}
  .courses-grid-wrap{max-height:397px;}
  .info-bar .sep{display:none;}
  .contact-strip .actions a[href^="mailto"]{font-size:10px;padding-left:12px;padding-right:12px;letter-spacing:0.5px;}
}