/* ============================================================
   EduGuru — Fluid Proportional Scale System
   ============================================================
   Reference viewport : 460px  (design looks PERFECT here)
   Minimum viewport   : 320px  (hard floor)

   Formula:
     preferred_vw = (value ÷ 460) × 100
     At 360px → value × 0.7826   (22% smaller — proportional)
     At 375px → value × 0.8152
     At 390px → value × 0.8478
     At 460px → value × 1.0000   (full design size)

   Method:
     Override CSS variables in :root with clamp()
     Scale hardcoded-px components with matching clamp()
     Pure CSS — zero JS, zero reflows, zero resize loops
   ============================================================ */

/* ── 1. FLUID SPACING VARIABLES ──────────────────────────── */
:root {
  --space-xs:  clamp(3px,   0.87vw,  4px);    /* 4  → 3.1px  @ 360 */
  --space-sm:  clamp(6px,   1.74vw,  8px);    /* 8  → 6.3px  @ 360 */
  --space-md:  clamp(11px,  3.48vw,  16px);   /* 16 → 12.5px @ 360 */
  --space-lg:  clamp(17px,  5.22vw,  24px);   /* 24 → 18.8px @ 360 */
  --space-xl:  clamp(22px,  6.96vw,  32px);   /* 32 → 25.1px @ 360 */
  --space-2xl: clamp(33px,  10.43vw, 48px);   /* 48 → 37.6px @ 360 */
}

/* ── 2. FLUID BORDER RADIUS VARIABLES ────────────────────── */
:root {
  --radius-sm:  clamp(6px,  1.74vw,  8px);    /* 8  → 6.3px  @ 360 */
  --radius-md:  clamp(9px,  2.61vw,  12px);   /* 12 → 9.4px  @ 360 */
  --radius-lg:  clamp(12px, 3.48vw,  16px);   /* 16 → 12.5px @ 360 */
  --radius-xl:  clamp(15px, 4.35vw,  20px);   /* 20 → 15.7px @ 360 */
  --radius-2xl: clamp(18px, 5.22vw,  24px);   /* 24 → 18.8px @ 360 */
}

/* ── 3. FLUID TYPOGRAPHY VARIABLES ───────────────────────── */
:root {
  --text-xs:   clamp(9px,   2.39vw, 11px);    /* 11 → 8.6px  → 9px  @ 360 */
  --text-sm:   clamp(10px,  2.83vw, 13px);    /* 13 → 10.2px        @ 360 */
  --text-base: clamp(11.5px,3.26vw, 15px);    /* 15 → 11.7px        @ 360 */
  --text-md:   clamp(12px,  3.48vw, 16px);    /* 16 → 12.5px        @ 360 */
  --text-lg:   clamp(14px,  3.91vw, 18px);    /* 18 → 14.1px        @ 360 */
  --text-xl:   clamp(15px,  4.35vw, 20px);    /* 20 → 15.7px        @ 360 */
  --text-2xl:  clamp(18px,  5.22vw, 24px);    /* 24 → 18.8px        @ 360 */
  --text-3xl:  clamp(21px,  6.09vw, 28px);    /* 28 → 21.9px        @ 360 */
  --text-4xl:  clamp(24px,  6.96vw, 32px);    /* 32 → 25.1px        @ 360 */
}

/* ── 4. FLUID LAYOUT HEIGHTS ──────────────────────────────── */
:root {
  --topbar-h:    clamp(52px, 13.04vw, 60px);  /* 60 → 47px → 52px  @ 360 */
  --bottomnav-h: clamp(56px, 14.78vw, 68px);  /* 68 → 53px → 56px  @ 360 */
}

/* ── 5. TOP BAR ───────────────────────────────────────────── */

/* Logo */
.top-bar__logo,
.top-bar__logo img {
  width:  clamp(34px, 9.13vw, 42px);   /* 42 → 32.9px → 34px */
  height: clamp(34px, 9.13vw, 42px);
}

/* Brand name */
.top-bar__name {
  font-size: clamp(14px, 3.91vw, 18px);
}

/* Icon buttons (refresh + bell) */
.icon-btn {
  width:  clamp(32px, 8.70vw, 40px);   /* 40 → 31.3px → 32px */
  height: clamp(32px, 8.70vw, 40px);
}
.icon-btn svg {
  width:  clamp(16px, 4.35vw, 20px);
  height: clamp(16px, 4.35vw, 20px);
}

/* Notification badge dot */
.notification-badge {
  top:    clamp(4px, 1.09vw, 6px);
  right:  clamp(4px, 1.09vw, 6px);
  width:  clamp(7px, 1.96vw, 9px);
  height: clamp(7px, 1.96vw, 9px);
}

/* ── 6. BOTTOM NAVIGATION ─────────────────────────────────── */

.bottom-nav {
  height:        clamp(54px, 13.91vw, 64px);  /* 64 → 50.1px → 54px */
  border-radius: clamp(20px, 6.09vw,  28px);  /* 28 → 21.9px        */
}

/* Nav icons */
.nav-item svg {
  width:  clamp(18px, 4.78vw, 22px);
  height: clamp(18px, 4.78vw, 22px);
}

/* Nav labels */
.nav-item span {
  font-size: clamp(8.5px, 2.17vw, 10px);
}

/* Active pill shape */
.nav-item.active:not(.nav-item--create)::before {
  inset:         clamp(1px, 0.43vw, 2px) clamp(4px, 1.30vw, 6px);
  border-radius: clamp(13px, 3.48vw, 16px);
}

/* Centre create button */
.nav-item--create {
  flex: 0 0 clamp(44px, 12.17vw, 56px);
}
.nav-item--create .nav-create-btn {
  width:  clamp(38px, 10.43vw, 48px);
  height: clamp(38px, 10.43vw, 48px);
}
.nav-item--create .nav-create-btn svg {
  width:  clamp(18px, 4.78vw, 22px);
  height: clamp(18px, 4.78vw, 22px);
}

/* ── 7. BUTTONS ───────────────────────────────────────────── */

.btn {
  padding:     clamp(10px, 2.61vw, 12px) clamp(18px, 5.22vw, 24px);
  font-size:   clamp(11px, 2.83vw, 13px);
  border-radius: clamp(99px, 99vw, 9999px); /* keep full pill */
}
.btn--sm {
  padding: clamp(6px, 1.74vw, 8px) clamp(12px, 3.48vw, 16px);
}
.btn--lg {
  padding: clamp(12px, 3.48vw, 16px) clamp(24px, 6.96vw, 32px);
  font-size: clamp(13px, 3.48vw, 16px);
}

/* ── 8. FORM INPUTS ───────────────────────────────────────── */

.form-input,
.form-select {
  height:    clamp(44px, 11.30vw, 52px);  /* 52 → 40.7px → 44px */
  font-size: var(--text-base);
}

.form-textarea {
  font-size: var(--text-base);
}

/* Input icon offset scales with input height */
.input-wrap .input-icon {
  left:   clamp(12px, 3.48vw, 16px);
  width:  clamp(15px, 3.91vw, 18px);
  height: clamp(15px, 3.91vw, 18px);
}
.input-wrap .form-input {
  padding-left: clamp(36px, 9.57vw, 44px);
}

/* ── 9. SEARCH BAR ────────────────────────────────────────── */

.search-bar {
  height:    clamp(44px, 11.30vw, 52px);
  font-size: var(--text-base);
}

/* ── 10. TAB BUTTONS ──────────────────────────────────────── */

.tab-btn {
  padding:   clamp(6px, 1.74vw, 8px) clamp(14px, 3.91vw, 18px);
  font-size: var(--text-sm);
}

/* ── 11. COURSE CARDS ─────────────────────────────────────── */

/* Horizontal scroll row card width */
.scroll-row .course-card {
  min-width: clamp(148px, 39.13vw, 180px); /* 180 → 141px → 148px */
}

/* Card body padding */
.course-card__body {
  padding: clamp(10px, 2.61vw, 12px) clamp(11px, 3.48vw, 16px);
}

/* CTA button */
.course-card__cta {
  padding:   clamp(5px, 1.30vw, 6px) clamp(10px, 3.04vw, 14px);
  font-size: clamp(9.5px, 2.39vw, 11px);
}

/* ── 12. CATEGORY CARDS ───────────────────────────────────── */

.category-icon {
  width:     clamp(38px, 10.43vw, 48px);
  height:    clamp(38px, 10.43vw, 48px);
  font-size: clamp(18px, 4.78vw,  22px);
  border-radius: var(--radius-lg);
}

/* ── 13. AVATARS ──────────────────────────────────────────── */

.avatar-sm { width: clamp(26px, 6.96vw,  32px); height: clamp(26px, 6.96vw,  32px); }
.avatar-md { width: clamp(35px, 9.57vw,  44px); height: clamp(35px, 9.57vw,  44px); }
.avatar-lg { width: clamp(44px, 12.17vw, 56px); height: clamp(44px, 12.17vw, 56px); }
.avatar-xl { width: clamp(63px, 17.39vw, 80px); height: clamp(63px, 17.39vw, 80px); }

/* ── 14. NOTIFICATION PANEL ───────────────────────────────── */

.notif-icon {
  width:  clamp(28px, 7.83vw, 36px);
  height: clamp(28px, 7.83vw, 36px);
}
.notif-icon svg {
  width:  clamp(13px, 3.48vw, 16px);
  height: clamp(13px, 3.48vw, 16px);
}

/* ── 15. CHIPS & TAGS ─────────────────────────────────────── */

.chip {
  padding:   clamp(3px, 0.87vw, 4px) clamp(9px, 2.61vw, 12px);
  font-size: var(--text-xs);
}

/* ── 16. LESSON ITEMS ─────────────────────────────────────── */

.lesson-icon {
  width:  clamp(26px, 6.96vw, 32px);
  height: clamp(26px, 6.96vw, 32px);
}
.lesson-icon svg {
  width:  clamp(11px, 3.04vw, 14px);
  height: clamp(11px, 3.04vw, 14px);
}

/* ── 17. EMPTY STATE ──────────────────────────────────────── */

.empty-state__icon {
  width:  clamp(62px, 17.39vw, 80px);
  height: clamp(62px, 17.39vw, 80px);
}
.empty-state__icon svg {
  width:  clamp(28px, 7.83vw, 36px);
  height: clamp(28px, 7.83vw, 36px);
}

/* ── 18. MODAL SHEET ──────────────────────────────────────── */

.modal-sheet {
  padding:        clamp(18px, 5.22vw, 24px);
  border-radius:  clamp(18px, 5.22vw, 24px) clamp(18px, 5.22vw, 24px) 0 0;
}
.modal-title {
  font-size: var(--text-xl);
}

/* ── 19. SECTION HEADERS ──────────────────────────────────── */

.section-header {
  padding: clamp(18px, 5.22vw, 24px) clamp(11px, 3.48vw, 16px) clamp(6px, 1.74vw, 8px);
}
.section-title {
  font-size: var(--text-lg);
}

/* ── 20. FEATURED SPOTLIGHT CAROUSEL ─────────────────────── */

.feature-wrap {
  padding: clamp(11px, 3.48vw, 16px);
}
.feature-dots { margin-top: clamp(7px, 2.17vw, 10px); }
.feature-dot  { width: clamp(5px, 1.30vw, 6px); height: clamp(5px, 1.30vw, 6px); }
.feature-dot.active { width: clamp(15px, 4.35vw, 20px); }

/* ── 21. COURSES GRID SPACING ─────────────────────────────── */

.courses-grid {
  gap:     clamp(10px, 3.48vw, 16px);
  padding: 0 clamp(11px, 3.48vw, 16px);
}

/* ── 22. OVERFLOW GUARD (320dp floor) ─────────────────────── */

@media (max-width: 340px) {
  .courses-grid          { grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 8px; }
  .scroll-row            { padding: 0 8px; gap: 8px; }
  .scroll-row .course-card { min-width: 140px; }
  .categories-grid       { gap: 6px; padding: 0 8px; }
  .tab-btn               { padding: 6px 10px; font-size: 10px; }
}

/* ── Desktop: disable fluid scaling above 480px ───────────── */
/* (design is already perfect there — clamp() max values handle this) */