/* ============================================
   QGTM School Connect — Mobile-First Responsive
   Architecture: 320px → 480px → 768px → 1024px → 1280px → 1440px → 1920px
   ============================================ */

/* ══════════════════════════════════════════
   BASE (320px+) — Mobile Small
   Everything starts here. No desktop assumptions.
   ══════════════════════════════════════════ */

/* Nav: toggle always visible on mobile, links hidden */
.nav-links { display: none; }
.nav-cta .btn-primary { display: none; }
.nav-toggle { display: flex; }

/* Nav height tighter on mobile */
:root { --nav-h: 60px; }

/* Container: tight side padding on small screens */
.container { padding-inline: 16px; }

/* Typography scale for small screens */
h1 { font-size: clamp(1.875rem, 5vw + 0.5rem, 4rem); }
h2 { font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); }
h3 { font-size: clamp(1.125rem, 2vw + 0.5rem, 1.625rem); }

/* Section padding tight on mobile */
.section { padding-block: 48px; }
.section-sm { padding-block: 32px; }

/* Hero single-column */
.hero-cinematic { padding-block: 56px 40px; }
.hero-title { font-size: clamp(1.875rem, 6vw + 0.5rem, 5.5rem); }
.hero-lead { font-size: 1rem; }
.hero-badge { font-size: .75rem; padding: 6px 14px; }
.hero-actions { flex-direction: column; align-items: center; gap: 12px; }
.hero-actions .btn { width: 100%; max-width: 340px; height: 52px; font-size: 1rem; }
.hero-perks { flex-direction: column; gap: 8px; align-items: center; font-size: .875rem; }
.hero-stats-bar { padding-block: 20px; }
.hs-grid { grid-template-columns: 1fr; gap: 0; }
.hs-item {
  padding: 16px 20px;
  border-right: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.hs-item:last-child { border-bottom: none; }
.hs-val { font-size: 1.75rem; }
.hs-label { font-size: .8125rem; }

/* Logo strip wraps nicely */
.logo-strip { justify-content: center; gap: 20px; padding: 16px 0; }
.logo-strip .logo-item { font-size: .875rem; }

/* Grid: all single column on mobile */
.grid-2,
.grid-3,
.grid-4 { grid-template-columns: 1fr; gap: 16px; }

/* Cards */
.card { padding: 20px; }
.card-icon { width: 44px; height: 44px; font-size: 1.25rem; }

/* Stat grid */
.stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { padding: 16px; }
.stat-value { font-size: 1.75rem; }

/* Process: stays as cards, 1 column mobile */
.process-list { grid-template-columns: 1fr; }
/* Stats bar: stacked on tiny screens */
.hs-grid { grid-template-columns: 1fr; }
.hs-item {
  padding: 20px 24px;
  border-right: none;
  border-bottom: 1px solid var(--border);
}
.hs-item:last-child { border-bottom: none; }

/* Feature row: stacked on mobile */
.feature-row {
  grid-template-columns: 1fr;
  gap: 32px;
}
.feature-row.reverse { direction: ltr; }
.feature-visual { min-height: 220px; }
.fv-window { font-size: .75rem; }

/* Industry cards */
.industry-card { padding: 20px; }

/* Testimonials */
.tm-grid { grid-template-columns: 1fr; gap: 16px; }
.tm { padding: 20px; }
.tm-quote { font-size: .9375rem; }

/* Case studies */
.case-grid { grid-template-columns: 1fr; }
.case-result { grid-template-columns: 1fr 1fr; }

/* Resources editorial rows */
.res-row {
  grid-template-columns: 1fr;
  gap: 24px;
  padding-block: 32px;
}
.res-row-reverse { direction: ltr; }
.res-watermark { font-size: 5rem; }
.res-module-title { font-size: 1.75rem; }
.res-module-desc { font-size: .9375rem; }
.res-row-card { padding: 20px; }

/* Feature list */
.feature-list { gap: 12px; }
.feature-list li { font-size: .9375rem; }

/* Services page */
.svc-row { grid-template-columns: 1fr; gap: 32px; padding-block: 32px; }
.svc-watermark { font-size: 5rem; }
.svc-title { font-size: 1.75rem; }
.svc-card { padding: 20px; }
.svc-row-reverse { direction: ltr; }

/* Contact page */
.contact-grid { grid-template-columns: 1fr; }
.contact-info { gap: 24px; }
.contact-form-wrap { padding: 20px; border-radius: 16px; }
.form-row { grid-template-columns: 1fr; }
.office-grid { grid-template-columns: 1fr; gap: 16px; }

/* About page */
.value-card { padding: 20px; }
.mission-block { padding: 32px 20px; }

/* Newsletter */
.newsletter { padding: 24px 20px; border-radius: 16px; }
.newsletter-form { flex-direction: column; gap: 12px; }
.newsletter-form .input { width: 100%; }
.newsletter-form .btn { width: 100%; height: 48px; }

/* Footer */
.site-footer { padding-top: 48px; padding-bottom: 24px; }
.footer-grid {
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-brand { grid-column: auto; }
.footer-brand p { font-size: .875rem; }
.footer-col h4 { margin-bottom: 12px; }
.footer-col ul { gap: 10px; }
.footer-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: .8125rem;
}
.social-row a { width: 40px; height: 40px; } /* touch target */

/* Accordion */
.acc-trigger { padding: 16px 20px; font-size: 1rem; }
.acc-body { padding: 0 20px 18px; }

/* Buttons — ensure 44px touch minimum */
.btn { min-height: 44px; }
.btn-sm { min-height: 44px; height: 44px; }

/* Mobile nav drawer */
.mobile-drawer-panel { padding: 20px; }
.mobile-drawer a { padding: 14px 16px; min-height: 52px; display: flex; align-items: center; }
.mobile-drawer .btn { min-height: 52px; height: 52px; margin-top: 12px; }
/* Drawer logo size */
.mobile-drawer-head .brand-logo { height: 40px; }

/* Page hero */
.page-hero { padding-block: 48px 32px; }

/* Overflow guard */
body, .site-header, main, footer {
  overflow-x: hidden;
}
* { min-width: 0; } /* prevents flex/grid overflow */

/* ══════════════════════════════════════════
   480px+ — Mobile Large / Phablet
   ══════════════════════════════════════════ */
@media (min-width: 480px) {
  .container { padding-inline: 20px; }
  .hero-actions { flex-direction: row; justify-content: center; }
  .hero-actions .btn { width: auto; }
  .hero-perks { flex-direction: row; gap: 16px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .hs-grid { grid-template-columns: repeat(2, 1fr); }
  .hs-item { border-bottom: none; border-right: 1px solid var(--border); }
  .hs-item:nth-child(even) { border-right: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: row; }
}

/* ══════════════════════════════════════════
   768px+ — Tablet Portrait
   ══════════════════════════════════════════ */
@media (min-width: 768px) {
  :root { --nav-h: 68px; }
  .container { padding-inline: var(--sp-6); }
  .section { padding-block: 72px; }
  .section-sm { padding-block: 48px; }

  /* Nav: show links on tablet+ */
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-cta .btn-primary { display: inline-flex; }

  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  /* Restore card appearance for process steps on tablet */
  .process-step {
    display: block;
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: #fff;
    border-bottom-color: var(--border);
  }
  .process-step .num { margin-bottom: var(--sp-4); }
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .value-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .tm-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-row { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .contact-grid { grid-template-columns: 1fr; }
  .office-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-8); }
  .footer-brand { grid-column: 1 / -1; }
  .newsletter-form { flex-direction: row; }
  .newsletter-form .input { width: auto; flex: 1; }
  .newsletter-form .btn { width: auto; }
  .hs-grid { grid-template-columns: repeat(2, 1fr); }
  .res-row { grid-template-columns: 1fr; gap: 32px; }
  .hero-lead { font-size: 1.0625rem; }
  .hero-actions { flex-direction: row; }
  .hero-actions .btn { width: auto; height: 52px; font-size: 1rem; }
  .hero-perks { flex-direction: row; gap: 20px; }
  .svc-row { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .contact-form-wrap { padding: 32px; }
}

/* ══════════════════════════════════════════
   1024px+ — Tablet Landscape / Small Desktop
   ══════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root { --nav-h: 72px; }
  .container { padding-inline: var(--sp-6); }
  .section { padding-block: clamp(64px, 4vw + 40px, 120px); }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .team-grid { grid-template-columns: repeat(4, 1fr); }
  .value-grid { grid-template-columns: repeat(3, 1fr); }
  .tm-grid { grid-template-columns: repeat(3, 1fr); }
  .process-list { grid-template-columns: repeat(4, 1fr); }
  .process-step {
    display: block;
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: #fff;
  }
  .contact-grid { grid-template-columns: 1fr 1.5fr; gap: var(--sp-12); }
  .office-grid { grid-template-columns: repeat(3, 1fr); }
  .case-grid { grid-template-columns: repeat(3, 1fr); }
  .hs-grid { grid-template-columns: repeat(4, 1fr); }
  .hs-item { border-right: 1px solid var(--border); border-bottom: none; }
  .hs-item:last-child { border-right: none; }
  .feature-row { grid-template-columns: 1fr 1fr; }
  .feature-row.reverse { direction: rtl; }
  .feature-row.reverse > * { direction: ltr; }
  .res-row { grid-template-columns: 1.1fr .9fr; gap: var(--sp-16); padding-block: var(--sp-16); }
  .res-row-reverse { direction: rtl; }
  .res-row-reverse > * { direction: ltr; }
  .res-watermark { font-size: clamp(6rem, 10vw, 9rem); }
  .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--sp-12); }
  .footer-brand { grid-column: auto; }
  .svc-row { grid-template-columns: 1.1fr .9fr; gap: var(--sp-16); }
  .svc-row-reverse { direction: rtl; }
  .svc-row-reverse > * { direction: ltr; }
  .hero-title { font-size: clamp(2.5rem, 4vw + 1.5rem, 5.5rem); }
  .hero-lead { font-size: clamp(1.125rem, 2vw + 0.5rem, 1.375rem); }
  .hero-actions .btn { height: 54px; font-size: 1rem; }
}

/* ══════════════════════════════════════════
   1280px+ — Desktop Standard
   ══════════════════════════════════════════ */
@media (min-width: 1280px) {
  .container { padding-inline: var(--sp-8); }
  .nav-links a { padding: 10px 16px; }
}

/* ══════════════════════════════════════════
   1440px+ — Desktop Large
   ══════════════════════════════════════════ */
@media (min-width: 1440px) {
  .container { padding-inline: var(--sp-10); }
  .section { padding-block: 100px; }
}

/* ══════════════════════════════════════════
   1920px+ — Ultra-wide / Large Monitors
   ══════════════════════════════════════════ */
@media (min-width: 1920px) {
  :root {
    --container: 1360px;
    --container-wide: 1520px;
  }
  .section { padding-block: 120px; }
}

/* ══════════════════════════════════════════
   Touch Device Optimizations
   ══════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover transforms on touch — prevents sticky states */
  .card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .btn-primary:hover { transform: none; }
  .btn-accent:hover { transform: none; }
  /* Ensure all interactive elements have large tap targets */
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .footer-col a { min-height: 40px; display: flex; align-items: center; }
  .acc-trigger { min-height: 56px; }
}

/* ══════════════════════════════════════════
   Print
   ══════════════════════════════════════════ */
@media print {
  .site-header, .mobile-drawer, .nav-toggle, .hero-actions, .site-footer { display: none; }
  body { font-size: 12pt; }
  .section { padding-block: 20pt; }
  .card { break-inside: avoid; }
}