/* ==========================================================================
   Easy Skill Up — Responsive layer
   Breakpoints: 1920 · 1440 · 1199 · 1024 · 991 · 768 · 575 · 430 · 375 · 320
   ========================================================================== */

/* Large desktop (1920) */
@media (min-width: 1600px) {
  .container { max-width: 1360px; }
  .hero { padding-block: 7rem 10rem; }
  .hero-visual { max-width: 640px; }
}

/* Laptop (≤1440) */
@media (max-width: 1440px) {
  .fc-2 { right: -2%; }
}

/* ≤1199 */
@media (max-width: 1199.98px) {
  .main-nav .nav-link { padding: .5rem .65rem !important; font-size: .9rem; }
  .main-nav .nav-link::after { left: .65rem; right: .65rem; }
  .benefit-item { padding: 1.5rem 1.1rem; gap: .8rem; }
  .benefit-icon { flex-basis: 46px; height: 46px; font-size: 1.2rem; }
  .audience-wrap { grid-template-columns: 290px 1fr; }
  .detail-layout { grid-template-columns: 1fr 330px; }
  .method-timeline { grid-template-columns: repeat(4, 1fr); }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet landscape & below: collapsed nav (≤991) */
@media (max-width: 991.98px) {
  :root { --header-h: 72px; }
  .brand-logo, .site-header.is-scrolled .brand-logo { height: 44px; }
  .main-nav .navbar-collapse {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--esu-line);
    box-shadow: 0 24px 40px -20px rgba(11, 31, 66, .3); padding: 1rem 1rem 1.5rem; max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav .nav-link { padding: .85rem .5rem !important; font-size: 1rem; border-bottom: 1px solid var(--esu-bg); }
  .main-nav .nav-link::after { display: none; }
  .main-nav .nav-link.active { color: var(--esu-blue); box-shadow: inset 3px 0 0 var(--esu-red); padding-left: .9rem !important; }
  .main-nav .dropdown-toggle { display: flex; justify-content: space-between; align-items: center; }
  .main-nav .dropdown-menu { box-shadow: none; border: 0; background: var(--esu-bg); margin: .25rem 0 .5rem !important; min-width: 0; }
  .header-cta { margin-top: 1rem; width: 100%; }
  .header-cta .btn { width: 100%; }

  .hero { padding-bottom: 8rem; text-align: left; }
  .hero-visual { margin-top: 3rem; max-width: 560px; }
  .benefits-card { grid-template-columns: repeat(2, 1fr); }
  .benefit-item:nth-child(3)::before { display: none; }
  .benefit-item:nth-child(n+3) { border-top: 1px solid var(--esu-line); }

  .about-visual { margin-bottom: 2.5rem; max-width: 620px; }
  .why-intro-img { max-width: 560px; }
  .bento { margin-top: 2.5rem; }

  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .steps::before, .steps .progress-line { display: none; }

  .audience-wrap { grid-template-columns: minmax(0, 1fr); }
  .audience-tabs { grid-template-columns: repeat(2, 1fr); }
  .audience-tab i { display: none; }

  .practice-grid { grid-template-columns: 1fr 1fr; }
  .practice-center { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
  .practice-item.left, .practice-item.right, .practice-item.full-right { grid-column: auto; grid-row: auto; }
  .practice-item.left::after, .practice-item.right::after { display: none; }

  .enquiry-wrap { grid-template-columns: 1fr; }
  .detail-layout { grid-template-columns: 1fr; }
  .sticky-aside { position: static; }
  .founder-card { grid-template-columns: 220px 1fr; gap: 1.5rem; }
  .method-row, .method-row.flip { grid-template-columns: 1fr; }
  .method-row.flip .method-media { order: 0; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
  .cta-band .cta-accent { display: none; }
}

/* Tablet portrait (≤768) */
@media (max-width: 767.98px) {
  body { font-size: .975rem; }
  .topbar { display: none; }
  .hero-actions .btn { flex: 1 1 200px; }
  .fc-1 { left: -2%; } .fc-2 { right: -2%; }
  .mini-dash { width: 52%; }
  .audience-panel.is-active { grid-template-columns: 1fr; }
  .audience-panel .ap-media { min-height: 220px; aspect-ratio: 16/9; }
  .practice-grid { grid-template-columns: 1fr; }
  .check-list.cols-2 { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .why-list { grid-template-columns: 1fr; }
  .audience-chips { grid-template-columns: repeat(2, 1fr); }
  .founder-card { grid-template-columns: 1fr; }
  .founder-photo { max-width: 240px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .method-timeline { grid-template-columns: repeat(2, 1fr); }
  .stepper li { font-size: 0; }
  .stepper li.is-active { font-size: .75rem; }
  .cta-band { border-radius: 26px; }
  .lb-prev, .lb-next { top: auto; bottom: 1.25rem; transform: none; }
  .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); }
}

/* Mobile (≤575) */
@media (max-width: 575.98px) {
  .container { padding-inline: 16px; }
  .row.g-5 { --bs-gutter-x: 1.5rem; }
  .section-head { margin-bottom: 2rem; }
  .hero-visual { padding: 1rem .25rem 2rem .75rem; }
  .hero-frame { border-radius: 24px; }
  .float-card { padding: .55rem .7rem; gap: .5rem; border-radius: 12px; }
  .float-card .fc-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
  .float-card strong { font-size: .8rem; }
  .float-card small { display: none; }
  .fc-3 { bottom: 4%; left: 0; }
  .mini-dash { width: 56%; padding: .75rem; border-radius: 14px; }
  .mini-bars { height: 50px; }
  .mini-formula { display: none; }
  .hero-shape-1 { width: 90px; height: 90px; }

  .benefits-card { grid-template-columns: 1fr; border-radius: 22px; }
  .benefit-item + .benefit-item::before { display: none; }
  .benefit-item + .benefit-item { border-top: 1px solid var(--esu-line); }
  .benefit-item { padding: 1.15rem 1.25rem; }

  .about-visual { padding: 0 1.25rem 2.25rem 0; }
  .about-badge { left: -.25rem; bottom: .25rem; max-width: 190px; padding: .9rem 1rem; }
  .about-badge p { display: none; }

  .bento-item, .bento-item.third { grid-column: span 6; }
  .bento-item.wide { flex-direction: column; align-items: flex-start; }

  .steps { grid-template-columns: 1fr; row-gap: 2.25rem; }
  .audience-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .audience-tab .at-title { overflow-wrap: anywhere; line-height: 1.3; }
  .audience-tab { padding: .85rem .9rem; gap: .5rem; }
  .audience-tab .at-title { font-size: .95rem; }
  .audience-tab .at-num { display: none; }

  .course-actions .btn { flex: 1 1 100%; }
  .form-card::before { left: 1.5rem; right: 1.5rem; }
  .cta-band .btn { width: 100%; }
  .contact-cards { grid-template-columns: 1fr; }
  .audience-chips { grid-template-columns: 1fr 1fr; }
  .g-item.wide { grid-column: span 2; }
  .page-banner .shape { display: none; }
  .qr-box { width: 200px; height: 200px; }
  .pay-summary dl { grid-template-columns: 1fr; }
  .pay-summary dd { text-align: left; margin-bottom: .4rem; }
}

/* Small phones (≤430 / 375) */
@media (max-width: 430px) {
  .hero-title { font-size: 2.3rem; }
  .hero-note { gap: .6rem 1rem; font-size: .85rem; }
  .fc-2 { top: 38%; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .g-item.wide, .g-item.tall { grid-column: auto; grid-row: auto; }
}
@media (max-width: 375px) {
  .brand-logo, .site-header.is-scrolled .brand-logo { height: 38px; }
  .hero-title { font-size: 2.05rem; }
  .audience-tabs { grid-template-columns: 1fr; }
  .float-card strong { font-size: .74rem; }
  .mini-dash { display: none; }
  .method-timeline { grid-template-columns: 1fr 1fr; gap: .5rem; }
}

/* Very small (320) */
@media (max-width: 340px) {
  .container { padding-inline: 14px; }
  .hero-title { font-size: 1.85rem; }
  .btn { padding: .8rem 1.1rem; font-size: .9rem; }
  .fc-2 { display: none; }
  .audience-chips { grid-template-columns: 1fr; }
  .stepper li::before { width: 28px; height: 28px; }
}

/* Mobile: slide-in animations move vertically only (prevents sideways scroll) */
@media (max-width: 991.98px) {
  .js .reveal.reveal-left, .js .reveal.reveal-right { transform: translateY(26px); }
  .js .reveal.is-visible { transform: none; }
}
html { overflow-x: hidden; overflow-x: clip; }