/* ==========================================================================
   Responsive — Landing + Dashboard (tablet & mobile)
   Load last in main.php and dashboard.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utilities (used in dashboard layout & views)
   -------------------------------------------------------------------------- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.text-center { text-align: center; }
.text-muted,
.text-secondary { color: var(--color-text-muted); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.tracking-wide { letter-spacing: 0.06em; }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Global — prevent horizontal scroll
   -------------------------------------------------------------------------- */
html {
  overflow-x: clip;
}

body.page-landing,
body.dashboard-portal {
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* Dashboard: keep icons & avatars at designed sizes */
body.dashboard-portal .form-field__icon svg {
  max-width: 20px;
  max-height: 20px;
  width: 20px;
  height: 20px;
}

body.dashboard-portal .profile-avatar__img {
  max-width: none;
  height: 100%;
}

body.dashboard-portal .profile-avatar svg {
  max-width: 100%;
  width: 100%;
  height: 100%;
}

body.dashboard-portal .live-video-icon__svg {
  max-width: none;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Landing — layout & hero spacing
   -------------------------------------------------------------------------- */
body.page-landing #main-content {
  padding-top: 0;
}

body.page-landing .hero.hero--premium {
  padding-top: calc(var(--header-height) + var(--space-8) + var(--space-4));
  min-height: auto;
  min-height: min(100dvh, 100svh);
}

@media (max-width: 767px) {
  body.page-landing .hero.hero--premium {
    padding-top: calc(56px + var(--space-5) + env(safe-area-inset-top, 0px));
    padding-bottom: var(--space-8);
    padding-inline: max(var(--space-3), env(safe-area-inset-left, 0px))
      max(var(--space-3), env(safe-area-inset-right, 0px));
    min-height: auto;
    overflow: visible;
  }

  .hero--premium .hero__inner {
    padding-inline: 0;
    gap: var(--space-5);
  }

  .hero--premium .hero__content {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    width: 100%;
    box-sizing: border-box;
  }

  .hero--premium .hero__arabic-line,
  .hero--premium .hero__bismillah {
    font-size: clamp(1.1rem, 4.5vw, 1.35rem);
    line-height: 1.55;
  }

  .hero--premium .hero__eyebrow {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }

  .hero--premium .hero__title {
    font-size: clamp(1.625rem, 6.5vw, 2.1rem);
    line-height: 1.15;
  }

  .hero--premium .hero__desc {
    font-size: var(--text-sm);
    line-height: 1.65;
  }

  .hero--premium .hero__metrics {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    justify-content: flex-start;
  }

  .hero--premium .hero__metric-value {
    font-size: var(--text-base);
  }

  .hero--premium .hero__metric-label {
    font-size: 0.625rem;
  }

  .hero--premium .hero__visual {
    margin-top: 0;
    width: 100%;
  }

  .hero--premium .hero__portal {
    max-width: 100%;
    margin-inline: auto;
  }

  .hero--premium .hero__media-frame,
  .hero--premium .hero__media-frame--video {
    max-width: 100%;
    margin-inline: auto;
  }

  .hero--premium .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .hero--premium .hero__actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .hero--premium .hero__chips {
    justify-content: flex-start;
    gap: var(--space-2);
  }

  .hero--premium .hero__chip {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }

  .hero--premium .hero__trust-logos {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    width: 100%;
    align-items: center;
  }

  .hero--premium .hero__trust-logos-label {
    width: 100%;
    font-size: var(--text-xs);
  }

  .hero--premium .hero__trust-logo {
    font-size: var(--text-xs);
  }

  .quran-marquee--premium {
    margin-inline: calc(var(--space-3) * -1);
  }

  .quran-marquee__track {
    transform: none;
  }
}

@media (max-width: 380px) {
  .navbar__logo-text {
    max-width: min(7rem, 32vw);
    font-size: 0.6875rem;
  }

  .navbar__logo .brand-logo {
    --logo-size: 36px;
    --logo-svg: 32px;
    --logo-bleed: 9px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero--premium .hero__inner {
    gap: var(--space-8);
  }
}

/* Section rhythm on small screens */
@media (max-width: 767px) {
  .section {
    padding-block: clamp(2.5rem, 8vw, 4rem);
  }

  .section-header__title {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
  }

  .section-lead {
    font-size: var(--text-sm);
  }
}

/* Features / courses grids */
@media (max-width: 639px) {
  .features--premium .features__grid,
  .courses--premium .courses__grid {
    gap: var(--space-4);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .features--premium .features__grid,
  .courses--premium .courses__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pricing — 2 columns on tablet */
@media (min-width: 600px) and (max-width: 1023px) {
  .pricing-regional__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-regional__grid > .pricing-regional-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 599px) {
  .pricing-regional__toolbar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    border-radius: var(--radius-xl);
    max-width: none;
  }

  .pricing-regional__detected {
    justify-content: center;
  }
}

/* Contact */
@media (max-width: 899px) {
  .contact--premium .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .contact--premium .contact__info-card {
    position: static;
  }
}

/* CTA */
@media (max-width: 899px) {
  .cta-banner--premium .cta-banner__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-banner__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Footer & contact bar */
@media (max-width: 639px) {
  .footer--premium .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer--premium .footer__columns {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .contact-bar__inner {
    grid-template-columns: 1fr;
  }

  .contact-bar__item {
    text-align: center;
    align-items: center;
  }
}

/* Teachers swiper — contain overflow */
@media (max-width: 1023px) {
  .teachers-swiper--premium {
    overflow: hidden;
    padding-inline: var(--space-1);
  }

  .teachers--premium .swiper-nav {
    display: none;
  }
}

/* Testimonials stage */
@media (max-width: 767px) {
  .testimonials-swiper__stage::before,
  .testimonials-swiper__stage::after {
    display: none;
  }
}

/* Showcase */
@media (max-width: 1023px) {
  .showcase--premium .showcase__grid {
    grid-template-columns: 1fr;
  }

  .showcase--premium .showcase__stage {
    order: -1;
  }
}

/* How it works */
@media (max-width: 767px) {
  .timeline--premium .timeline__step {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-5);
  }

  .timeline--premium .timeline__progress-line {
    display: none;
  }
}

/* Scroll top — safe area */
@media (max-width: 767px) {
  .scroll-top-premium {
    right: max(var(--space-4), env(safe-area-inset-right, 0px));
    bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   Navbar — mobile & tablet
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .navbar {
    top: max(var(--space-3), env(safe-area-inset-top, 0px));
    left: max(var(--space-3), env(safe-area-inset-left, 0px));
    right: max(var(--space-3), env(safe-area-inset-right, 0px));
    border-radius: var(--radius-lg);
    max-width: none;
    width: auto;
  }

  .navbar__inner {
    padding: var(--space-2) var(--space-3);
    min-height: 60px;
    gap: var(--space-2);
    overflow: visible;
  }

  .navbar {
    overflow: visible;
  }

  .navbar__logo {
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
    align-items: center;
  }

  .navbar__logo-text {
    font-size: 0.75rem;
    max-width: min(8.5rem, 38vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar__actions {
    flex-shrink: 0;
    gap: var(--space-1);
  }

  /* CTAs in drawer — navbar-mobile-premium.css */
}

/* Landing — stack chrome above 3D scene */
body.page-landing .navbar,
body.page-landing .mobile-nav-backdrop,
body.page-landing .mobile-nav {
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  backdrop-filter: blur(var(--glass-blur-heavy));
}

body.page-landing.nav-open .scroll-top-premium {
  z-index: calc(var(--z-fixed) + 5);
}

/* Full-screen mobile menu */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-fixed) - 2);
  background: rgba(15, 23, 42, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-backdrop--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile drawer layout — see navbar-mobile-premium.css */

@media (min-width: 768px) {
  .mobile-nav-backdrop {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Dashboard — tablet (768–1023) permanent feel
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid-2 {
    grid-template-columns: 1fr;
  }

  .dashboard__content {
    padding: var(--space-5) var(--section-px) var(--space-10);
  }
}

/* Dashboard overlay stacking */
@media (max-width: 1023px) {
  .dashboard__overlay {
    z-index: calc(var(--z-sticky) + 1);
  }

  .dashboard__sidebar {
    z-index: calc(var(--z-sticky) + 2);
  }

  body.dashboard-nav-open {
    overflow: hidden;
    touch-action: none;
  }
}

/* Dashboard — mobile */
@media (max-width: 767px) {
  .dashboard__sidebar {
    width: min(300px, 88vw);
  }

  .dashboard__header {
    flex-wrap: wrap;
    padding: var(--space-3) var(--section-px);
    gap: var(--space-3);
  }

  .dashboard__header > .flex {
    flex: 1 1 100%;
    min-width: 0;
  }

  .dashboard__header-title {
    font-size: clamp(1.05rem, 4.5vw, 1.25rem);
    line-height: 1.3;
  }

  .dashboard__header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .dashboard__header-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    max-width: 140px;
  }

  .dashboard__content {
    padding: var(--space-4) var(--section-px) var(--space-10);
  }

  .dashboard-stat-grid {
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .dashboard-stat {
    padding: var(--space-4);
  }

  .dashboard-panel {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .dashboard-panel__header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .dashboard-panel__header .btn-group,
  .dashboard-panel__header form {
    width: 100%;
  }

  .dashboard-panel__header .btn-group .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .dash-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .dash-page-header__title {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  .dash-page-header .btn-group {
    width: 100%;
  }

  .dash-page-header .btn-group .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .dashboard-list__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .dashboard-list__item .btn {
    width: 100%;
    justify-content: center;
  }

  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

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

  .dashboard-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .dashboard-tabs::-webkit-scrollbar {
    display: none;
  }

  .dashboard-tabs .dashboard-tab {
    flex-shrink: 0;
  }

  /* Tables — scroll + readable cells */
  .data-table-wrap {
    margin-inline: calc(var(--section-px) * -1);
    padding-inline: var(--section-px);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .data-table {
    font-size: var(--text-xs);
  }

  .data-table th,
  .data-table td {
    padding: var(--space-3) var(--space-3);
    white-space: nowrap;
  }

  .dash-user-cell {
    min-width: 180px;
  }

  /* Unwrapped tables — force scroll container */
  .dashboard__content > .dashboard-panel > table.data-table,
  .dashboard__content > table.data-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 479px) {
  .dashboard__sidebar-brand span:not(.dashboard__sidebar-brand-icon) {
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .portal-stat__value,
  .dashboard-stat__value {
    font-size: 1.5rem;
  }
}

/* Auth welcome on small phones */
@media (max-width: 699px) {
  body.auth-page--welcome .auth-layout__panel,
  body.auth-page .auth-layout__panel {
    padding-top: var(--space-3);
  }

  body.auth-page--welcome .auth-shell--welcome .auth-card--premium {
    padding: var(--space-5);
  }
}

/* Checkout */
@media (max-width: 899px) {
  .checkout-premium__grid {
    grid-template-columns: 1fr;
  }
}

/* Safe areas */
@supports (padding: max(0px)) {
  .dashboard__content {
    padding-bottom: max(var(--space-12), env(safe-area-inset-bottom));
  }

  body.page-landing .footer--premium {
    padding-bottom: max(var(--space-10), env(safe-area-inset-bottom));
  }
}