/* ============================================================
   SOPAN — responsive.css
   Mobile-first refinements & breakpoint overrides.
   Breakpoints: 1200 / 1024 / 900 / 768 / 600 / 420
============================================================ */

/* ---------- ≤ 1200px : large laptops ---------- */
@media (max-width: 1200px){
  :root{ --gut: 22px; }

  .hero__glass--1{ left:-2%; }
  .hero__glass--2{ right:-2%; }
  .masonry{ columns:3; }
}

/* ---------- ≤ 1024px : tablets landscape ---------- */
@media (max-width: 1024px){
  :root{ --header-h: 76px; }

  /* Header → burger */
  .nav{ display:none; }
  .burger{ display:block; }

  .hero{ padding-bottom:96px; }
  .hero__grid{
    grid-template-columns:1fr;
    gap:56px;
    text-align:left;
  }
  .hero__visual{ max-width:520px; margin-inline:auto; width:100%; }
  .hero__scroll{ display:none; }
  .blob--a{ width:400px; height:400px; right:-14%; top:2%; }
  .blob--b{ display:none; }
  .shape--ring{ right:6%; top:6%; width:110px; height:110px; }

  .about__grid{ grid-template-columns:1fr; gap:48px; }
  .about__copy p{ max-width:100%; }

  .why__grid{ grid-template-columns:repeat(2,1fr); }
  .courses__grid{ grid-template-columns:repeat(2,1fr); }
  .course--featured{ grid-column:span 2; }
  .course__title{ min-height:auto; }

  .timeline{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .timeline::before{ display:none; }

  .stats__grid{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .stat:nth-child(3)::before{ display:none; }

  .contact__grid{ grid-template-columns:1fr; }

  .footer__grid{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
}

/* ---------- ≤ 900px ---------- */
@media (max-width: 900px){
  .masonry{ columns:2; }
  .hero__meta{ gap:28px; }
}

/* ---------- ≤ 768px : tablets portrait / large phones ---------- */
@media (max-width: 768px){
  :root{
    --gut: 20px;
    --sec-y: clamp(60px, 12vw, 88px);
    --r-xl: 26px;
    --r-lg: 20px;
  }

  body{ line-height:1.68; }

  .header__cta{ display:none; }
  .brand__text small{ display:none; }
  .brand__logo{ height:40px; }

  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 36px); padding-bottom:80px; }
  .hero__title{ font-size:clamp(2.25rem,9vw,3rem); }
  .hero__text{ margin-bottom:30px; }
  .hero__actions .btn{ width:100%; }
  .hero__meta{ margin-top:42px; justify-content:space-between; }
  .hero__meta strong{ font-size:1.4rem; }
  .hero__glass{ padding:11px 15px; font-size:.75rem; }
  .hero__glass--1{ left:0; top:32%; }
  .hero__glass--2{ right:0; bottom:2%; }

  .hero__visual{ padding:8px; max-width:440px; }
  .hero__grid-pattern{ background-size:20px 20px; opacity:.35; }
  .blob--c{ display:none; }
  .illo-chip-v{ font-size:14px; }
  .divider{ height:56px; }

  .about__cards{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .feature{ padding:22px 18px; }

  .why__grid{ grid-template-columns:1fr; gap:18px; }
  .glass-card{ padding:30px 26px; }

  .courses__grid{ grid-template-columns:1fr; }
  .course--featured{ grid-column:auto; }
  .course{ padding:30px 24px; }

  .timeline{ grid-template-columns:1fr; row-gap:0; text-align:left; }
  .timeline__item{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:20px;
    text-align:left;
    padding-bottom:34px;
    position:relative;
  }
  .timeline__item:last-child{ padding-bottom:0; }
  .timeline__item::before{
    content:"";
    position:absolute; left:27px; top:56px; bottom:6px;
    width:2px;
    background:linear-gradient(var(--red),rgba(176,19,39,.12));
  }
  .timeline__item:last-child::before{ display:none; }
  .timeline__dot{ margin:0; grid-row:span 2; align-self:start; }
  .timeline__item p{ margin-inline:0; max-width:100%; }

  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:34px 20px; }
  .stat + .stat::before{ display:none; }

  .quote{ padding:26px 22px; }

  .cta p{ margin-bottom:28px; }
  .cta__actions{ flex-direction:column; }
  .cta__actions .btn{ width:100%; }

  .contact__form-wrap{ padding:26px 20px; }
  .map{ height:200px; }

  .footer__grid{ grid-template-columns:1fr; row-gap:38px; padding-bottom:40px; }
  .footer__bottom{ flex-direction:column; text-align:center; gap:8px; }

  .to-top{ right:16px; bottom:16px; width:46px; height:46px; }

  /* Perf: disable heavy blur on small devices */
  .mesh{ filter:blur(60px); opacity:.32; }
  .cursor-glow{ display:none; }
}

/* ---------- ≤ 600px : phones ---------- */
@media (max-width: 600px){
  .masonry{ columns:1; }
  .tile{ margin-bottom:14px; }

  .section__head{ margin-bottom:38px; }
  .eyebrow{ padding-left:0; }
  .eyebrow::before{ display:none; }

  .about__cards{ grid-template-columns:1fr; }

  .hero__meta{ gap:16px; }
  .hero__meta span{ font-size:.68rem; letter-spacing:.1em; }

  .course__ribbon{ font-size:.58rem; padding:6px 40px; }
  .course__meta > div{ flex-direction:column; align-items:flex-start; gap:2px; }
  .course__meta dd{ text-align:left; }

  .quote{ width:min(340px,88vw); }
  .lightbox{ padding:18px; }
  .lightbox__close{ top:12px; right:16px; font-size:2.2rem; }
}

/* ---------- ≤ 420px : compact phones ---------- */
@media (max-width: 420px){
  .brand__text strong{ font-size:1.02rem; }
  .stats__grid{ grid-template-columns:1fr; }
  .hero__meta{ flex-wrap:wrap; row-gap:20px; }
  .hero__meta li{ flex:1 0 40%; }
  .hero__glass--2{ display:none; }
  .btn{ padding:14px 24px; }
}

/* ---------- Landscape phones : shorter hero ---------- */
@media (max-height: 560px) and (orientation: landscape){
  .hero{ min-height:auto; padding-block:120px 60px; }
}

/* ---------- Very wide screens ---------- */
@media (min-width: 1600px){
  :root{ --max: 1320px; }
  .masonry{ columns:4; }
}

/* ---------- Print ---------- */
@media print{
  .header,.mobile-menu,.to-top,.scroll-progress,.cursor-glow,
  .mesh-bg,.preloader,.hero__blobs,.marquee,.map{ display:none !important; }
  body{ background:#fff; color:#000; }
  .reveal{ opacity:1 !important; transform:none !important; }
}