/* ═══════════════════════════════════════════════════════════════════════════
   Diako Academy — Unified Responsive System
   Breakpoints (project-wide):
     ≤375px   mobile-xs
     376–480  mobile
     481–768  tablet
     >768     desktop
   Load AFTER design-system.css and page stylesheets.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bp-mobile-xs: 375px;
  --bp-mobile: 480px;
  --bp-tablet: 768px;

  --container-pad: 16px;
  --container-width: min(1200px, calc(100% - (var(--container-pad) * 2)));
  --section-pad-y: clamp(2.5rem, 6vw, 4.5rem);
  --touch-min: 44px;

  --fs-hero: clamp(1.875rem, 5.2vw, 3.5rem);      /* 30–56 */
  --fs-section: clamp(1.5rem, 3.2vw, 1.875rem);   /* 24–30 */
  --fs-card-title: clamp(1.125rem, 2.2vw, 1.375rem); /* 18–22 */
  --fs-body: clamp(0.875rem, 1.8vw, 1.0625rem);   /* 14–17 */
}

/* ── Global media / overflow guards ─────────────────────────────────────── */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

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

img,
video {
  object-fit: cover;
}

/* Prefer contain for logos / icons that already set object-fit */
.site-header__logo-img,
.site-logo,
.brand-logo,
.exam-logo {
  object-fit: contain !important;
}

/* ── Standard containers ────────────────────────────────────────────────── */
.container,
.container-lg,
.showcase-inner,
.intexams__container,
.promo-section__inner,
.footer-inner,
.lead-page__inner,
.pl-section .container-lg {
  width: var(--container-width);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

.section {
  padding-block: var(--section-pad-y);
}

/* ── Typography helpers ─────────────────────────────────────────────────── */
.section-title,
.showcase-title,
.showcase-title--dark,
.intexams__title,
.promo-section__title,
.pl-section__title,
.pl-cta__title {
  font-size: var(--fs-section) !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dh-hero__title {
  font-size: var(--fs-hero) !important;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dh-hero__sub,
.intexams__subtitle,
.promo-section__sub,
.pl-section__sub,
.path-card__sub,
.promo-card__subtitle {
  font-size: var(--fs-body) !important;
  line-height: 1.75;
}

.path-card__title,
.promo-card__title,
.exam-thumb__name,
.pl-feat__title,
.pl-level__name {
  font-size: var(--fs-card-title) !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ── Buttons / touch targets ────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-secondary,
.btn-hero-primary,
.btn-hero-outline,
.btn-promo,
.pl-start-btn,
.site-header__learn-btn,
.site-header__auth-pill,
.site-header__portal,
.path-pill,
.path-pill--lg,
.plreg-submit,
.membership-modal__submit,
.auth-modal__submit {
  min-height: var(--touch-min);
  box-sizing: border-box;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
input,
select,
textarea,
.form-control,
.plreg-field input,
.membership-modal__field input,
.membership-modal__field select,
.auth-modal input,
.lead-form input,
.lead-form textarea {
  font-size: 16px !important;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET ≤768
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --container-pad: 16px;
    --section-pad-y: 2.75rem;
    --sh-h: 64px;
    --fs-hero: clamp(1.875rem, 7.5vw, 2.25rem); /* ~30–36 */
  }

  body {
    padding-top: calc(var(--sh-h) + env(safe-area-inset-top, 0px));
  }

  .site-header {
    height: calc(var(--sh-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }

  .site-header__inner {
    width: 100%;
    max-width: none;
    padding: 0 12px;
    gap: 8px;
    align-items: center;
  }

  /* Single-row: logo | actions | hamburger */
  .site-header__brand {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    order: 1;
    flex: 0 0 auto;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 !important;
    background: transparent !important;
  }

  .site-header__logo-img,
  .site-header--exam-logo-contrast .exam-logo {
    height: var(--logo-size-mobile, 44px) !important;
    width: var(--logo-size-mobile, 44px) !important;
    max-height: none !important;
    max-width: none !important;
  }

  .site-header--exam-logo-contrast .exam-logo-wrapper {
    padding: 2px 6px !important;
    border-radius: 8px;
  }

  .site-header__utils {
    order: 2;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }

  .site-header__phone,
  .site-header__portal--learner {
    display: none !important;
  }

  .site-header__learn-btn,
  .site-header__auth-pill {
    font-size: 0.72rem !important;
    padding: 0 10px !important;
    min-height: 36px;
    border-radius: 8px;
    white-space: nowrap;
  }

  .site-header__toggle {
    order: 3;
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .nav-toggle {
    min-height: 36px;
    min-width: 36px;
    padding: 6px 8px;
  }

  .nav-toggle__label {
    display: none;
  }

  /* Hero */
  .dh-hero,
  .pl-hero,
  .video-hero {
    min-height: calc(100svh - var(--sh-h) - env(safe-area-inset-top, 0px)) !important;
    min-height: calc(100dvh - var(--sh-h) - env(safe-area-inset-top, 0px)) !important;
    max-height: none;
    align-items: center;
  }

  .dh-hero::after {
    height: 72px;
  }

  .dh-hero__img,
  .dh-hero__video {
    object-fit: cover;
    object-position: center 30%;
  }

  .dh-hero__body {
    padding: 1rem 16px calc(24px + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
  }

  .dh-hero__buttons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 18px;
  }

  .dh-hero__buttons .btn,
  .dh-hero__buttons .btn-hero-primary,
  .dh-hero__buttons .btn-hero-outline {
    width: 100%;
    max-width: none;
    min-height: var(--touch-min);
    justify-content: center;
  }

  .dh-hero__lang-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 320px);
    max-width: 100%;
    gap: 8px;
    margin-top: 12px;
  }

  .dh-lang-card {
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 8px 6px;
    border-radius: 12px;
  }

  .dh-lang-card__flag { font-size: 1.1rem; }
  .dh-lang-card__fa { font-size: 0.8rem; }
  .dh-lang-card__en { font-size: 0.62rem; }

  /* Promo / حضوری آنلاین */
  .promo-section {
    padding: 28px 0 32px;
  }

  .promo-section + .section,
  .promo-section + section {
    padding-top: 36px;
  }

  .promo-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .promo-card {
    width: 100%;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    box-shadow: 0 4px 18px -6px rgba(15, 23, 42, 0.16);
  }

  .promo-card:hover {
    transform: none;
  }

  .promo-card__badge {
    top: 10px;
    right: 10px;
    font-size: 0.7rem;
    padding: 3px 10px;
  }

  .promo-card__body {
    padding: 40px 14px 16px;
    gap: 6px;
    align-items: center !important;
    text-align: center !important;
  }

  .promo-card__title {
    font-size: 1.15rem !important;
  }

  .btn-promo {
    margin-inline: auto;
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.82rem;
  }

  /* International exams */
  .intexams {
    min-height: 0 !important;
    padding: 40px 0 44px;
  }

  .intexams__title {
    font-size: clamp(1.5rem, 6vw, 1.75rem) !important;
    margin-bottom: 8px;
  }

  .intexams__subtitle {
    margin-bottom: 20px !important;
  }

  .intexams__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100%;
    max-width: 100%;
    justify-content: stretch;
  }

  .exam-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    min-height: 0;
  }

  .exam-thumb__name {
    font-size: 0.8rem !important;
    padding: 0 6px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .exam-decor { display: none !important; }

  /* Learning path */
  .showcase-section--lp {
    padding: 40px 0 48px;
  }

  .showcase-header,
  .showcase-header--light {
    margin-bottom: 24px;
  }

  .path-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .path-card {
    padding: 20px 16px 18px;
    border-radius: 16px;
  }

  .path-card__icon {
    font-size: 1.75rem;
    margin-bottom: 10px;
  }

  .path-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  .path-pill,
  .path-pill--lg {
    width: 100% !important;
    height: auto !important;
    min-height: var(--touch-min);
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  /* Cards / grids shared */
  .card-grid,
  .split-grid,
  .detail-grid,
  .hero-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .card,
  .course-card,
  .pl-feat,
  .pl-level {
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
  }

  .card img,
  .course-card img,
  .course-card__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  /* Placement landing extras */
  .pl-hero,
  .pl-hero--media {
    padding: 3rem 1rem 3.5rem;
  }

  .pl-hero__stats {
    gap: 8px;
  }

  .pl-hero__stat {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    padding: 10px 8px;
  }

  .pl-start-btn {
    width: 100%;
    max-width: 360px;
    min-height: var(--touch-min);
    justify-content: center;
  }

  .pl-features {
    grid-template-columns: 1fr !important;
  }

  /* Forms */
  .membership-modal__grid,
  .auth-modal__socials,
  .plreg-row,
  .lead-form,
  form .form-row {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea,
  button,
  .btn {
    max-width: 100%;
  }

  /* Footer float safe area */
  .wa-float {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE ≤480
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root {
    --container-pad: 16px;
    --section-pad-y: 2.25rem;
    --sh-h: 60px;
    --fs-hero: clamp(1.875rem, 8vw, 2.125rem); /* 30–34 */
    --fs-section: clamp(1.5rem, 5.5vw, 1.625rem);
  }

  .site-header__learn-btn {
    font-size: 0.68rem !important;
    padding: 0 8px !important;
  }

  .site-header__auth-pill {
    font-size: 0.68rem !important;
    padding: 0 8px !important;
  }

  .dh-hero__body {
    padding-inline: 16px;
  }

  .dh-hero__sub {
    margin-bottom: 16px !important;
  }

  .promo-card {
    aspect-ratio: 4 / 3;
  }

  .promo-card__body {
    padding: 14px 12px 16px;
  }

  .intexams {
    padding: 32px 0 36px;
  }

  .path-card {
    padding: 18px 14px 16px;
  }

  .pl-hero__stat {
    flex: 1 1 100%;
  }

  .pl-level {
    flex: 1 1 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-XS ≤375
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  :root {
    --container-pad: 14px;
    --fs-hero: 1.875rem; /* 30px */
  }

  .site-header__inner {
    padding: 0 10px;
    gap: 6px;
  }

  .site-header__logo-img,
  .site-header--exam-logo-contrast .exam-logo {
    height: var(--logo-size-mobile, 44px) !important;
    width: var(--logo-size-mobile, 44px) !important;
    max-height: none !important;
  }

  .site-header__learn-btn span,
  .site-header__learn-btn {
    font-size: 0.64rem !important;
  }

  .dh-lang-card {
    min-height: 52px;
    padding: 6px 4px;
  }

  .exam-thumb__name {
    font-size: 0.72rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP >768 — keep desktop intact (no layout overrides)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .container,
  .container-lg {
    width: min(1200px, 92vw);
  }
}