/*
 * DAR-UL-ISLAH — MOBILE CSS v1.0
 * Premium mobile-first redesign — built from scratch
 * NOT a patch. A complete mobile experience.
 * Target: 320px — 767px (mobile) | 768px — 1024px (tablet)
 */

/* ═══════════════════════════════════════════════════════════
   SHARED MOBILE FOUNDATION
═══════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; width: 100%; -webkit-font-smoothing: antialiased; }
img  { max-width: 100%; height: auto; display: block; }
* { box-sizing: border-box; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ═══════════════════════════════════════════════════════════
   MOBILE  (max-width: 767px)
═══════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {

  /* Hide duplicate hero logo — nav header already shows the logo */
  .hero-logo-ring { display: none !important; }

  /* ── CSS Variable overrides ──────────────────────────── */
  :root {
    --bar-h:    0px;
    --header-h: 64px;
    --offset:   64px;
    --px:       18px;
    --sec-py:   52px;
    --sec-py-sm:32px;
    --r-md:     14px;
    --r-lg:     18px;
    --r-xl:     22px;
  }

  /* ── Base layout ─────────────────────────────────────── */
  .container {
    padding-left: var(--px) !important;
    padding-right: var(--px) !important;
    max-width: 100% !important;
  }
  .section     { padding: var(--sec-py) 0 !important; }
  .section-sm  { padding: var(--sec-py-sm) 0 !important; }

  /* ── Typography scale ────────────────────────────────── */
  h1 { font-size: 1.9rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.6rem !important; line-height: 1.25 !important; }
  h3 { font-size: 1.25rem !important; line-height: 1.3 !important; }
  h4 { font-size: 1.05rem !important; }
  p  { font-size: 0.93rem !important; line-height: 1.75 !important; }

  .section-title { font-size: 1.6rem !important; margin-bottom: 10px !important; }
  .section-sub   { font-size: 0.92rem !important; line-height: 1.75 !important; }
  .eyebrow       { font-size: 0.7rem !important; }
  .sec-head      { margin-bottom: 32px !important; }

  /* ── ALL grids → single column ───────────────────────── */
  .g2, .g3, .g4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Override ALL inline style grids ────────────────── */
  [style*="grid-template-columns"] {
    display: block !important;
  }
  [style*="display:grid"],
  [style*="display: grid"] {
    display: block !important;
  }

  /* Inline flex that should stack */
  [style*="display:flex"][style*="gap:56px"],
  [style*="display:flex"][style*="gap:48px"],
  [style*="display:flex"][style*="gap:40px"],
  [style*="display:flex"][style*="gap:36px"] {
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* ── ANNOUNCEMENT BAR — hide on mobile ───────────────── */
  .ann-bar { display: none !important; }

  /* ── HEADER ──────────────────────────────────────────── */
  .site-header {
    top: 0 !important;
    height: var(--header-h) !important;
    padding: 0 !important;
  }
  .hd-nav,
  .hd-actions { display: none !important; }
  .hamburger  { display: flex !important; }

  .hd-logo img {
    width: 42px !important;
    height: 42px !important;
  }
  .hd-logo-ar { font-size: 0.78rem !important; }
  .hd-logo-en { font-size: 0.56rem !important; }

  /* ── MOBILE MENU ─────────────────────────────────────── */
  .mob-menu {
    padding: 80px var(--px) 40px !important;
    gap: 4px !important;
  }
  .mob-menu a.nav-a {
    font-size: 1rem !important;
    padding: 12px 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    border-radius: 10px !important;
  }
  .mob-ctas {
    margin-top: 24px !important;
    max-width: 100% !important;
  }
  .mob-ctas .btn,
  .mob-ctas .btn-wa {
    justify-content: center !important;
    width: 100% !important;
  }

  /* ── HERO (Homepage) ─────────────────────────────────── */
  .hero {
    min-height: 85vh !important;
    margin-top: calc(-1 * var(--offset)) !important;
    align-items: flex-end !important;
  }
  .hero-slide img {
    object-position: center center !important;
  }
  .hero-shade {
    background: linear-gradient(
      to top,
      rgba(7,30,18,0.97) 0%,
      rgba(13,53,32,0.82) 50%,
      rgba(7,30,18,0.60) 100%
    ) !important;
  }
  .hero-content {
    padding: calc(var(--offset) + 20px) var(--px) 52px !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .hero-logo-ring {
    width: 68px !important;
    height: 68px !important;
    margin-bottom: 16px !important;
  }
  .hero-badge {
    font-size: 0.68rem !important;
    padding: 4px 12px !important;
    margin-bottom: 14px !important;
  }
  .hero-ar {
    font-size: 1.4rem !important;
    line-height: 1.65 !important;
    margin-bottom: 6px !important;
  }
  .hero-en {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
  }
  .hero-tagline {
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 28px !important;
  }
  .hero-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .hero-btns .btn,
  .hero-btns .btn-wa {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
    min-height: 50px !important;
    font-size: 0.9rem !important;
  }
  .hero-dots  { bottom: 20px !important; }
  .hero-scroll-cue { display: none !important; }

  /* ── PAGE HERO (inner pages) ─────────────────────────── */
  .page-hero {
    height: clamp(280px, 48vw, 340px) !important;
    margin-top: calc(-1 * var(--offset)) !important;
    padding-bottom: 32px !important;
    align-items: flex-end !important;
  }
  .page-hero .ph-shade {
    background: linear-gradient(
      to top,
      rgba(7,30,18,0.96) 0%,
      rgba(13,53,32,0.75) 60%,
      rgba(7,30,18,0.55) 100%
    ) !important;
  }
  .ph-content {
    padding: calc(var(--offset) + 8px) var(--px) 0 !important;
  }
  .ph-content h1 {
    font-size: 1.6rem !important;
    margin-bottom: 8px !important;
  }
  .ph-content p {
    font-size: 0.88rem !important;
    margin-bottom: 10px !important;
  }
  .breadcrumb { font-size: 0.75rem !important; }

  /* ── BUTTONS (all mobile sizes) ──────────────────────── */
  .btn {
    min-height: 48px !important;
    padding: 12px 22px !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
  }
  .btn-lg {
    min-height: 52px !important;
    padding: 13px 26px !important;
    font-size: 0.92rem !important;
  }
  .btn-wa {
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
  }

  /* ── FEATURE CARDS ───────────────────────────────────── */
  /* Fix feat-card text overlap: use grid so icon spans both title & text rows */
  .feat-card {
    padding: 20px 18px !important;
    border-radius: var(--r-md) !important;
    text-align: left !important;
    display: grid !important;
    grid-template-columns: 50px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 4px 14px !important;
    align-items: start !important;
  }
  .feat-card .feat-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    margin: 0 !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.3rem !important;
    align-self: start !important;
    margin-top: 2px !important;
  }
  .feat-card .feat-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .feat-card .feat-text {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .feat-title { font-size: 1rem !important; margin-bottom: 6px !important; }
  .feat-text  { font-size: 0.87rem !important; }

  /* ── COURSE CARDS ────────────────────────────────────── */
  .course-card { border-radius: var(--r-md) !important; }
  .cc-img      { height: 200px !important; }
  .cc-body     { padding: 20px 18px !important; }
  .cc-title    { font-size: 1.2rem !important; }
  .cc-desc     { font-size: 0.88rem !important; }
  .cc-footer   { flex-direction: column !important; gap: 10px !important; }
  .cc-footer .btn,
  .cc-footer .btn-wa { width: 100% !important; justify-content: center !important; }

  /* Course detail layout */
  .cd-grid {
    display: block !important;
  }
  /* Gap between stacked columns (display:block has no gap property) */
  .cd-grid > div + div {
    margin-top: 24px !important;
  }
  .cd-img {
    height: 220px !important;
    margin-bottom: 24px !important;
    border-radius: var(--r-md) !important;
  }
  .cd-num   { font-size: 3rem !important; }
  .cd-title { font-size: 1.4rem !important; }
  .cd-arabic { font-size: 1.4rem !important; }
  .cd-specs {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 16px !important;
  }
  .cd-fee-box { padding: 16px !important; }
  .cd-fee-amount { font-size: 1.7rem !important; }

  /* ── STATISTICS ──────────────────────────────────────── */
  .stats-sec { padding: 52px 0 !important; }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .stat-num   { font-size: 2.4rem !important; margin-bottom: 6px !important; }
  .stat-label { font-size: 0.82rem !important; }
  .stat-sub   { font-size: 0.72rem !important; }

  /* ── GALLERY ─────────────────────────────────────────── */
  .gal-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 160px !important;
    gap: 10px !important;
  }
  .gal-item.tall,
  .gal-item.wide {
    grid-row: span 1 !important;
    grid-column: span 1 !important;
  }
  .gal-overlay { opacity: 1 !important; }
  .gal-cap { font-size: 0.75rem !important; }
  .gal-cat { font-size: 0.65rem !important; }

  /* ── ACHIEVEMENT CARDS ───────────────────────────────── */
  .ach-card { border-radius: var(--r-md) !important; }
  .ach-img  { height: 190px !important; }
  .ach-body { padding: 18px 16px !important; }
  .ach-title { font-size: 1rem !important; }
  .ach-text  { font-size: 0.84rem !important; }

  .ach-timeline { padding-left: 30px !important; }
  .ach-timeline::before { left: 6px !important; }
  .ach-tl-item { padding: 18px 16px !important; }
  .ach-tl-item::before { left: -28px !important; top: 18px !important; width: 12px !important; height: 12px !important; }
  .ach-tl-title { font-size: 1rem !important; }
  .ach-tl-text  { font-size: 0.85rem !important; }

  /* Achievements page specific */
  .ach-summary {
    grid-template-columns: repeat(2,1fr) !important;
    border-radius: var(--r-md) !important;
  }
  .ach-sum-item:nth-child(5) { grid-column: span 2 !important; }
  .ach-sum-num   { font-size: 1.9rem !important; }
  .ach-sum-label { font-size: 0.65rem !important; }
  .ach-sum-item  { padding: 18px 10px !important; }

  .ach-item {
    padding: 14px 14px !important;
    gap: 12px !important;
    border-radius: var(--r-md) !important;
  }
  .ach-pos {
    width: 44px !important;
    height: 44px !important;
    font-size: 0.78rem !important;
    flex-shrink: 0 !important;
  }
  .ach-item-title  { font-size: 0.92rem !important; }
  .ach-item-detail { font-size: 0.8rem !important; }
  .ach-item-ar     { font-size: 0.88rem !important; }

  .cat-head { margin: 40px 0 18px !important; gap: 12px !important; }
  .cat-head-icon  { width: 44px !important; height: 44px !important; font-size: 1.2rem !important; }
  .cat-head-title { font-size: 1.05rem !important; }
  .cat-head-ar    { font-size: 0.85rem !important; }
  .cat-head-label { font-size: 0.65rem !important; }
  .cat-head-line  { display: none !important; }

  .intl-card {
    padding: 28px 20px !important;
    border-radius: var(--r-md) !important;
  }
  .intl-card-flag    { font-size: 2.6rem !important; }
  .intl-card-comp    { font-size: 0.95rem !important; }
  .intl-card-country { font-size: 0.68rem !important; }
  .intl-card-detail  { font-size: 0.8rem !important; }

  /* ── TEAM / FACULTY ──────────────────────────────────── */
  .team-card { border-radius: var(--r-md) !important; }
  .team-img  { height: 200px !important; }
  .team-body { padding: 18px 16px !important; }
  .team-name { font-size: 1rem !important; }
  .team-name-ar { font-size: 0.9rem !important; }
  .team-bio  { font-size: 0.84rem !important; }

  /* Featured director card */
  .site-header + main [style*="grid-template-columns: 220px"] {
    display: block !important;
  }

  /* ── ABOUT PAGE ──────────────────────────────────────── */
  .about-intro-grid {
    display: block !important;
  }
  .about-img-block { margin-bottom: 24px !important; }
  .about-img-main  { height: 260px !important; border-radius: var(--r-md) !important; }
  .about-img-accent { display: none !important; }
  .about-badge { left: 0 !important; font-size: 0.75rem !important; padding: 8px 14px !important; }
  .about-badge span { font-size: 1.1rem !important; }

  .values-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .val-item  { padding: 18px 14px !important; border-radius: var(--r-md) !important; }
  .val-icon  { font-size: 1.3rem !important; }
  .val-title { font-size: 0.88rem !important; }
  .val-text  { font-size: 0.8rem !important; }

  .mgmt-msg  { padding: 24px 18px !important; border-radius: var(--r-md) !important; }
  .mgmt-msg::before { font-size: 6rem !important; top: -10px !important; }
  .mgmt-msg-text { font-size: 0.9rem !important; line-height: 1.82 !important; }
  .mgmt-msg-author { gap: 12px !important; }
  .mgmt-msg-avatar { width: 48px !important; height: 48px !important; }
  .mgmt-msg-name   { font-size: 0.95rem !important; }
  .mgmt-msg-role   { font-size: 0.75rem !important; }

  /* ── PROCESS STEPS ───────────────────────────────────── */
  .process-steps {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
  .process-steps::before { display: none !important; }
  .proc-num   { width: 52px !important; height: 52px !important; font-size: 1.2rem !important; }
  .proc-title { font-size: 0.9rem !important; }
  .proc-text  { font-size: 0.8rem !important; }

  /* ── FORMS ───────────────────────────────────────────── */
  .fg2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .form-ctrl {
    font-size: 16px !important; /* prevent iOS zoom */
    min-height: 48px !important;
    padding: 12px 14px !important;
  }
  textarea.form-ctrl { min-height: 110px !important; }
  .form-label { font-size: 0.88rem !important; margin-bottom: 6px !important; }
  .form-group { margin-bottom: 16px !important; }
  select.form-ctrl { min-height: 48px !important; }

  /* ── CTA BAND ────────────────────────────────────────── */
  .cta-band { padding: 52px 0 !important; }
  .cta-band h2 { font-size: 1.55rem !important; margin-bottom: 10px !important; }
  .cta-band p  { font-size: 0.9rem !important; margin-bottom: 24px !important; }
  .cta-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .cta-btns .btn,
  .cta-btns .btn-wa {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
  }

  /* ── TESTIMONIALS ────────────────────────────────────── */
  .testi-card   { padding: 22px 18px !important; border-radius: var(--r-md) !important; }
  .testi-text   { font-size: 0.9rem !important; }
  .testi-name   { font-size: 0.88rem !important; }
  .testi-role   { font-size: 0.75rem !important; }
  .testi-avatar { width: 40px !important; height: 40px !important; }

  /* ── NEWS CARDS ──────────────────────────────────────── */
  .news-card {
    padding: 16px 14px !important;
    gap: 12px !important;
    border-radius: var(--r-md) !important;
  }
  .news-date { width: 46px !important; padding: 8px 4px !important; }
  .news-day  { font-size: 1.3rem !important; }
  .news-mon  { font-size: 0.62rem !important; }
  .news-title { font-size: 0.95rem !important; }
  .news-text  { font-size: 0.83rem !important; }

  /* ── CONTACT ─────────────────────────────────────────── */
  .contact-grid { display: block !important; }
  .contact-info-cards { margin-bottom: 24px !important; }
  .ci-card {
    padding: 16px 14px !important;
    gap: 12px !important;
    border-radius: var(--r-md) !important;
  }
  .ci-icon  { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
  .ci-label { font-size: 0.7rem !important; }
  .ci-value { font-size: 0.88rem !important; }
  .map-frame {
    height: 240px !important;
    border-radius: var(--r-md) !important;
  }

  /* ── DONATE ──────────────────────────────────────────── */
  .donate-hero-card {
    padding: 32px 20px !important;
    border-radius: var(--r-md) !important;
  }
  .donate-hero-card h2 { font-size: 1.4rem !important; }
  .donate-impact { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .di-num   { font-size: 1.8rem !important; }
  .di-label { font-size: 0.82rem !important; }

  /* ── FOOTER ──────────────────────────────────────────── */
  .ft-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .ft-top { padding: 44px 0 32px !important; }
  .ft-desc { font-size: 0.84rem !important; }
  .ft-head { font-size: 0.9rem !important; margin-bottom: 14px !important; }
  .ft-links a { font-size: 0.84rem !important; }
  .ft-ci-text { font-size: 0.82rem !important; }

  .ft-bottom .container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .ft-copy    { font-size: 0.75rem !important; }
  .ft-bl      { flex-wrap: wrap !important; gap: 12px !important; }
  .ft-bl a    { font-size: 0.75rem !important; }
  .ft-agency  { text-align: left !important; }
  .ft-agency-label { font-size: 0.65rem !important; }
  .ft-agency-name  { font-size: 0.8rem !important; }
  .ft-agency-wa    { font-size: 0.68rem !important; }

  /* Safe zone — content shouldn't hide behind float buttons (right: ~56px) */
  .ach-record, .comp-record, .fee-table, .fee-row,
  [style*="border-radius"][style*="padding"] .ach-record { 
    padding-right: 60px !important; 
  }

  /* ── FLOATING BUTTONS — compact, bottom-right, with breathing room ── */
  .float-wrap {
    bottom: 16px !important;
    right: 10px !important;
    gap: 6px !important;
  }
  /* Ensure competition/record tables have padding so float buttons don't cover text */
  .cd-fee-box, [style*="border-radius"][style*="border: 1px solid"] { padding-right: 56px !important; }
  .fbtn {
    width: 42px !important;
    height: 42px !important;
    font-size: 1rem !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.28) !important;
  }
  .fbtn-admit {
    height: 34px !important;
    font-size: 0.7rem !important;
    padding: 0 12px !important;
    border-radius: 18px !important;
    width: auto !important;
    letter-spacing: 0.02em !important;
  }
  /* Add right-side padding so content doesn't get hidden behind float buttons */
  main .container { padding-right: 22px !important; }
  /* Add bottom padding so last sections aren't covered by buttons */
  main { padding-bottom: 80px !important; }

  /* ── DETAILS / FAQ ───────────────────────────────────── */
  details summary {
    padding: 14px 16px !important;
    font-size: 0.9rem !important;
  }
  details div { font-size: 0.87rem !important; }

  /* ── QURAN QUOTE BLOCKS ──────────────────────────────── */
  .quran-quote {
    padding: 20px 16px !important;
    border-radius: var(--r-md) !important;
  }
  .quran-quote .arabic { font-size: 1.2rem !important; }
  .quran-quote .translation { font-size: 0.85rem !important; }

  /* ── FILTER TABS ─────────────────────────────────────── */
  .filter-tabs { gap: 6px !important; margin-bottom: 24px !important; }
  .ftab { padding: 7px 14px !important; font-size: 0.78rem !important; }

  /* ── INLINE HEIGHT OVERRIDES ─────────────────────────── */
  [style*="height:200px"] { height: auto !important; min-height: 180px !important; }
  [style*="height:220px"] { height: auto !important; min-height: 180px !important; }
  [style*="height:240px"] { height: auto !important; min-height: 190px !important; }
  [style*="height:260px"] { height: auto !important; min-height: 190px !important; }
  [style*="height:300px"] { height: auto !important; min-height: 200px !important; }
  [style*="height:320px"] { height: auto !important; min-height: 220px !important; }
  [style*="height:400px"] { height: auto !important; min-height: 240px !important; }
  [style*="height:480px"] { height: auto !important; min-height: 260px !important; }

  /* ── INLINE WIDTH OVERRIDES ──────────────────────────── */
  [style*="max-width:900px"],
  [style*="max-width:860px"],
  [style*="max-width:820px"],
  [style*="max-width:800px"],
  [style*="max-width:760px"],
  [style*="max-width:720px"],
  [style*="max-width:700px"] {
    max-width: 100% !important;
  }

  /* ── INLINE PADDING OVERRIDES ────────────────────────── */
  [style*="padding:56px"],
  [style*="padding:52px"],
  [style*="padding:48px"],
  [style*="padding:44px"],
  [style*="padding:40px"] {
    padding: 24px 18px !important;
  }
  [style*="padding:36px"],
  [style*="padding:32px"],
  [style*="padding:28px"] {
    padding: 20px 16px !important;
  }

  /* ── HOMEPAGE SPECIFIC ───────────────────────────────── */

  /* Quick intro section */
  .section-ivory > .container > [style*="grid-template-columns:1fr 2fr"],
  .section-ivory > .container > div[style*="grid-template-columns"] {
    display: block !important;
  }

  /* Achievement preview grid */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] > div {
    border-radius: 10px !important;
  }
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] > div[style*="margin-top:24px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] > div[style*="margin-top:-24px"] {
    margin-top: 0 !important;
  }

  /* Gallery preview (homepage 3-col inline grid) */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="grid-auto-rows:220px"] {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 160px !important;
    gap: 10px !important;
  }

  /* Contact preview (homepage) */
  [style*="grid-template-columns:1fr 1.5fr"] {
    display: block !important;
  }
  [style*="grid-template-columns:1fr 1.5fr"] > [style*="border-radius:var(--r-xl)"] {
    height: 240px !important;
    margin-top: 20px !important;
  }

  /* Donation section */
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:1fr 1.2fr"] {
    display: block !important;
  }
  [style*="grid-template-columns:1fr 1fr"][style*="gap:14px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    display: grid !important;
  }

  /* ── 404 PAGE ────────────────────────────────────────── */
  .err-code { font-size: 5.5rem !important; }
  .err-title { font-size: 1.3rem !important; }
  .err-msg { font-size: 0.9rem !important; }
  .err-btns { flex-direction: column !important; }
  .err-btns .btn { width: 100% !important; max-width: 280px !important; justify-content: center !important; }

} /* end @media 767px */

/* ═══════════════════════════════════════════════════════════
   TABLET  (768px – 1023px)
═══════════════════════════════════════════════════════════ */
@media screen and (min-width: 768px) and (max-width: 1023px) {

  /* Tablet: use hamburger menu — desktop nav too crowded at this width */
  .hd-nav    { display: none !important; }
  .hd-actions { display: none !important; }
  .hamburger  { display: flex !important; }

  :root {
    --px: 28px;
    --sec-py: 72px;
    --sec-py-sm: 48px;
  }

  .container { padding-left: var(--px) !important; padding-right: var(--px) !important; }

  /* Navigation */
  .hd-nav a { padding: 6px 8px !important; font-size: 0.78rem !important; }

  /* Grids — 2 columns on tablet */
  .g3, .g4    { grid-template-columns: repeat(2,1fr) !important; }
  .stats-grid { grid-template-columns: repeat(4,1fr) !important; }
  .ft-grid    { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* Inline grids */
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns:1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
    display: grid !important;
  }

  /* Hero */
  .hero-btns { flex-wrap: wrap !important; justify-content: center !important; }

  /* Gallery */
  .gal-grid {
    grid-template-columns: repeat(3,1fr) !important;
    grid-auto-rows: 200px !important;
  }

  /* About */
  .about-intro-grid { grid-template-columns: 1fr !important; }
  .about-img-main   { height: 320px !important; }
  .about-img-accent { display: none !important; }

  /* Course detail */
  .cd-grid { grid-template-columns: 1fr !important; }
  .cd-img  { height: 260px !important; order: -1; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr !important; }
  .map-frame    { height: 300px !important; }

  /* Process */
  .process-steps { grid-template-columns: repeat(2,1fr) !important; }
  .process-steps::before { display: none !important; }

  /* Achievements */
  .ach-summary { grid-template-columns: repeat(3,1fr) !important; }
  .ach-summary .ach-sum-item:nth-child(4),
  .ach-summary .ach-sum-item:nth-child(5) {
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  /* CTA */
  .cta-btns { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; }

  /* Forms */
  .form-ctrl { font-size: 16px !important; }

  /* Footer */
  .ft-grid { grid-template-columns: 1fr 1fr !important; }

} /* end @media tablet */

/* ═══════════════════════════════════════════════════════════
   SMALL DESKTOP (1024px – 1199px) — minor tweaks
═══════════════════════════════════════════════════════════ */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .ft-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr !important; gap: 32px !important; }
  .hd-nav a { padding: 6px 9px !important; font-size: 0.82rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL SAFETY RULES (all breakpoints)
═══════════════════════════════════════════════════════════ */
img { max-width: 100%; height: auto; }
html, body { overflow-x: hidden; }
* { min-width: 0; } /* Prevent grid blowout */

/* ── Desktop-small (1024–1279px): nav visible but compact ────────────── */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .hd-nav { gap: 1px !important; }
  .hd-nav a { padding: 5px 7px !important; font-size: 0.76rem !important; letter-spacing: 0 !important; }
  .hd-actions .btn { padding: 7px 12px !important; font-size: 0.78rem !important; }
}