/* ============================================================
   QAF International SPC + Amirah® — Responsive Stylesheet
   Breakpoints: 1200px | 1024px | 900px | 768px | 640px | 480px
   ============================================================ */

/* ── LARGE DESKTOP adjustments (1200px) ── */
@media (max-width: 1200px) {
  .container { padding: 0 40px; }
  .nav-inner { padding: 0 40px; }
  .hero-inner { gap: 60px; }
  .overview-grid { gap: 60px; }
  .brands-grid { gap: 24px; }
  .footer-grid { gap: 40px; }
  .strategy-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── TABLET LANDSCAPE (1024px) ── */
@media (max-width: 1024px) {
  section { padding: 72px 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-product-showcase { display: none; }
  .hero h1 { font-size: clamp(32px, 5vw, 48px); }
  .hero-sub { max-width: 100%; }
  .overview-grid { grid-template-columns: 1fr; gap: 48px; }
  .brands-grid { grid-template-columns: 1fr; }
  .dist-grid { grid-template-columns: 1fr; gap: 40px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .products-full-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .strategy-grid { grid-template-columns: repeat(3, 1fr); }
  .vm-grid { grid-template-columns: 1fr; gap: 16px; }
  .about-story-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { display: none; }
  .blog-details-layout { grid-template-columns: 1fr; }
  .blog-details-layout .blog-sidebar { display: block; }
  .contact-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .products-hero-grid { grid-template-columns: 1fr; }
  .hero-product-visual { display: none; }
  .product-details-grid { grid-template-columns: 1fr; gap: 48px; }
  .cta-banner-inner { flex-direction: column; gap: 32px; }
  .cta-banner-actions { width: 100%; }
}

/* ── TABLET PORTRAIT (900px) ── */
@media (max-width: 900px) {
  /* Show hamburger, hide desktop nav */
  .nav-hamburger { display: flex; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-inner { padding: 0 24px; }
  .logo-media { width: 48px; height: 48px; }
  .container { padding: 0 24px; }

  section { padding: 60px 0; }

  .core-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-center-text { display: none; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-img { min-height: 200px; }
  .blog-card { grid-template-columns: 140px 1fr; }
  .contact-hero-stats { grid-template-columns: 1fr 1fr 1fr; }
  .products-hero-stats { flex-wrap: wrap; }
  .phs-box { min-width: 100px; }
  .md-card { flex-direction: column; gap: 20px; padding: 28px; }
  .products-cta { flex-direction: column; gap: 20px; text-align: center; }
}

/* ── MOBILE LANDSCAPE (768px) ── */
@media (max-width: 768px) {
  :root { --nav-height: 68px; }

  .logo-media { width: 42px; height: 42px; }
  .logo-sub { display: none; }
  .hero-stats { gap: 16px; }
  .hero-stat { padding-right: 16px; margin-right: 16px; }
  .hero-btns { flex-direction: column; gap: 12px; }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline { width: 100%; text-align: center; }

  .core-grid { grid-template-columns: 1fr; }
  .strategy-grid { grid-template-columns: repeat(2, 1fr); }
  .products-full-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { display: none; }

  .products-cta { padding: 32px; }
  .products-cta-title { font-size: 20px; }
  .cta-banner { padding: 52px 0; }
  .cta-banner-actions { flex-direction: column; }
  .btn-white, .btn-outline-white { width: 100%; text-align: center; }
}

/* ── MOBILE PORTRAIT (640px) ── */
@media (max-width: 640px) {
  section { padding: 48px 0; }
  .container { padding: 0 18px; }

  .section-title { font-size: clamp(22px, 5vw, 32px); }
  .hero h1 { font-size: clamp(28px, 7vw, 40px); }
  .hero-stats { flex-direction: column; gap: 0; }
  .hero-stat {
    padding: 14px 0; margin: 0;
    border-right: none; border-bottom: 1px solid var(--border-cream);
    display: flex; align-items: center; gap: 16px;
  }
  .hero-stat:last-child { border-bottom: none; }
  .hero-stat-num { font-size: 26px; min-width: 60px; }

  .ticker-item { padding: 0 24px; font-size: 11px; }

  .products-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .products-full-grid { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }
  .contact-hero-stats { grid-template-columns: 1fr; gap: 3px; }

  .team-grid { grid-template-columns: 1fr; }
  .strategy-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .brands-floating { position: static; margin-top: 16px; }
  .overview-visual { overflow: visible; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .blog-card { grid-template-columns: 1fr; }
  .blog-card-img { height: 140px; }

  .blog-details-hero h1 { font-size: clamp(22px, 6vw, 36px); }
  .blog-author-bio { flex-direction: column; }

  .product-details-image { height: 280px; font-size: 80px; }

  .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { padding: 12px 18px; white-space: nowrap; font-size: 11px; }

  .vm-grid { gap: 10px; }
  .about-hero h1 { font-size: clamp(26px, 6vw, 40px); }

  .faq-item { padding: 20px; }
  .brand-card-header { padding: 22px 24px 18px; }
  .brand-card-body { padding: 20px 24px 28px; }

  .nav-open { padding: 16px 20px 20px; }
  .nav-open a { font-size: 15px; padding: 14px 0; }
}

/* ── SMALL MOBILE (480px) ── */
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
  .products-hero-stats { flex-direction: column; gap: 6px; }
  .phs-box { width: 100%; }
  .hero-eyebrow { font-size: 9px; }
  .hero-sub { font-size: 14px; }
  .core-card { padding: 28px 22px; }
  .why-card { padding: 32px 22px; }
  .strategy-grid { grid-template-columns: 1fr 1fr; }
  .cql-item { padding: 14px 16px; }
  .cql-val { font-size: 13px; }
  .size-options .size-option { padding: 6px 12px; font-size: 11px; }
}

/* ── PRINT ── */
@media print {
  nav, footer, .ticker-strip, .cta-banner { display: none; }
  body { background: white; color: black; }
  .hero { min-height: auto; margin-top: 0; }
  a { color: inherit; text-decoration: none; }
}
/* ═══════════════════════════════════════════════════════════════
   NEW COMPONENTS — Product Cards (v2) & Leadership Team (v2)
   ═══════════════════════════════════════════════════════════════ */

/* 1024px — MD card stacks, team 3 cols */
@media (max-width: 1024px) {
  .md-card-v2 { grid-template-columns: 1fr; }
  .md-img-wrap { height: 340px; }
  .md-img-overlay {
    background: linear-gradient(to bottom, transparent 55%, var(--navy) 100%);
  }
  .team-grid-v2 { grid-template-columns: repeat(3, 1fr); }
  .product-img-wrap { height: 240px; }
}

/* 768px */
@media (max-width: 768px) {
  .md-info { padding: 32px 28px; }
  .md-name-v2 { font-size: 22px; }
  .md-stat-row { gap: 20px; }
  .team-grid-v2 { grid-template-columns: repeat(2, 1fr); }
  .team-img-wrap { height: 180px; }
  .product-img-wrap { height: 220px; }
}

/* 640px */
@media (max-width: 640px) {
  .md-img-wrap { height: 260px; }
  .md-info { padding: 24px 20px; }
  .md-stat-row { flex-wrap: wrap; gap: 16px; }
  .team-grid-v2 { grid-template-columns: 1fr 1fr; }
  .team-img-wrap { height: 160px; }
  .product-img-wrap { height: 200px; }
  .product-info-strip { padding: 11px 14px; }
  .product-info-strip .product-name { font-size: 12px; }
}

/* 480px */
@media (max-width: 480px) {
  .team-grid-v2 { grid-template-columns: 1fr 1fr; }
  .team-img-wrap { height: 150px; }
  .product-img-wrap { height: 175px; }
}