/* ==========================================================================
   Tarik — Responsive layout
   Breakpoints: 1280 · 1100 · 1024 · 960 · 900 · 768 · 640 · 560 · 480 · 375
   ========================================================================== */

/* ---------------------------------- ≤1280 ---------------------------------- */
@media (max-width: 1280px) {
  .container--wide { padding-inline: clamp(20px, 3vw, 32px); }
}

/* ---------------------------------- ≤1100 ---------------------------------- */
@media (max-width: 1100px) {
  /* Hero: tighten columns, remove right bleed */
  .hero-inner { gap: 32px; }
  .hero-visual { margin-right: 0; }
}

/* ---------------------------------- ≤1024 ---------------------------------- */
@media (max-width: 1024px) {
  /* Navigation → hamburger */
  .nav-links { display: none; }
  .header-actions { display: none; }
  .menu-btn { display: inline-flex; }
  .header-inner { grid-template-columns: auto 1fr auto; gap: 16px; }

  /* Hero stacks; dashboard sits below the copy */
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-title { font-size: clamp(2.625rem, 6vw, 3.6rem); }
  .hero-visual { max-width: 680px; margin-inline: auto; }

  /* Workflow composition */
  .wf-a { grid-column: span 12; grid-row: auto; }
  .wf-b, .wf-c { grid-column: span 6; }
  .wf-d, .wf-e, .wf-f { grid-column: span 4; }

  /* Modules: stack groups */
  .mod-groups { grid-template-columns: 1fr; gap: 20px; }

  /* Footer: two columns */
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: span 2; }
}

/* ---------------------------------- ≤960 ---------------------------------- */
@media (max-width: 960px) {
  /* Case & Matter story stacks */
  .cm-wrap { grid-template-columns: 1fr; gap: 56px; }
  .cm-copy { max-width: none; }
  .cm-visual { width: 100%; max-width: 600px; margin-inline: auto; }

  /* Why Tarik: reduce gap between rows */
  .why-row { gap: 36px; }

  /* Dark section stacks */
  .dark-grid { grid-template-columns: 1fr; }
  .dark-visual { order: 2; }
  .dark-copy { order: 1; }

  /* Tabs stack */
  .tab-panel { grid-template-columns: 1fr; gap: 30px; }
  .tab-copy { max-width: 560px; }

  /* FAQ stacks */
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  .faq-head .section-lead { max-width: 60ch; }
}

/* ---------------------------------- ≤768 ---------------------------------- */
@media (max-width: 768px) {
  /* Tabs become horizontally scrollable */
  .tabs-bar {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 10px;
    margin-inline: -20px;
    padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs-bar::-webkit-scrollbar { display: none; }
  .tab-btn { flex: none; }

  .wf-b, .wf-c, .wf-d, .wf-e, .wf-f { grid-column: span 12; }

  .m-info-grid { grid-template-columns: repeat(2, 1fr); }

  /* Case & Matter card internals */
  .cm-meta { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .cm-meta-item { padding: 0; }
  .cm-meta-item + .cm-meta-item::before { display: none; }
  .cm-meta-item:nth-child(n + 3) { padding-top: 14px; border-top: 1px solid var(--border); }
  .cm-rings,
  .cm-dots { display: none; }

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

  /* Hero: reduce decorative shapes, benefits stack, logos wrap */
  .hero-visual::after { display: none; }
  .hero-visual::before { opacity: 0.55; }
  .hero-benefits { grid-template-columns: 1fr; gap: 18px; }
  .hero-logos { gap: 18px 36px; }

  /* Why Tarik: reduce gap, smaller visual */
  .why-row { grid-template-columns: 1fr; gap: 28px; }
  .why-row:nth-child(even) { grid-template-columns: 1fr; }
  .why-row:nth-child(even) .why-visual { order: 0; }
  .why-row:nth-child(even) .why-copy { order: 0; }
  .why-visual { max-width: 380px; margin-inline: auto; }
  .why-intro h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }

  .sec-grid { grid-template-columns: repeat(2, 1fr); }

  .mod-featured { grid-template-columns: 1fr; }
  .mod-featured-visual { max-width: 420px; }
}

/* ---------------------------------- ≤640 ---------------------------------- */
@media (max-width: 640px) {
  body { font-size: 16px; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Case & Matter: stack dashboard columns, simplify decorations */
  .cm-dash { grid-template-columns: 1fr; }
  .cm-col + .cm-col { border-left: 0; border-top: 1px solid var(--border); }
  .cm-title { max-width: none; }
  .cm-blob { width: 210px; height: 210px; top: -58px; left: -38px; opacity: 0.8; }
  .cm-pale { width: 210px; height: 210px; right: -34px; bottom: -2px; }

  /* Hero: CTAs fit naturally */
  .hero-copy .hero-cta .btn { width: min(100%, 300px); }
}

/* ---------------------------------- ≤560 ---------------------------------- */
@media (max-width: 560px) {
  .wf-panel { padding: 20px; }

  .dark-kpis { grid-template-columns: 1fr; }
  .dark-legend { grid-template-columns: repeat(2, 1fr); }

  .why-row { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .why-row:nth-child(even) { grid-template-columns: 1fr; }
  .why-row:nth-child(even) .why-visual { order: 0; }
  .why-row:nth-child(even) .why-copy { order: 0; }
  .why-visual { max-width: 420px; margin-inline: auto; }
  .why-copy h3 { max-width: none; }
  .why-ui-matters { flex-direction: column; }
  .why-ui-matters .ui-sidebar { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); padding: 10px; gap: 4px; }
  .why-ui-matters .ui-nav-item span { display: none; }

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

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ---------------------------------- ≤480 ---------------------------------- */
@media (max-width: 480px) {
  .m-info-grid { grid-template-columns: 1fr; }
  .m-progress { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Case & Matter: single meta column, full-width CTA */
  .cm-meta { grid-template-columns: 1fr; row-gap: 0; }
  .cm-meta-item:nth-child(n + 2) { padding-top: 12px; border-top: 1px solid var(--border); }
  .cm-cta { width: 100%; }
  .cm-stage { padding-bottom: 48px; }
  .cm-card-head { padding: 14px 16px 12px; }
  .cm-meta { padding: 14px 16px; }
  .cm-progress { padding: 12px 16px; }
  .cm-col { padding: 13px 16px 14px; }

  .tabs-bar { margin-inline: -20px; padding-inline: 20px; }

  .mod-featured { padding: 26px 22px; }

  .faq-q { font-size: 15.5px; }
}

/* ---------------------------------- ≤420 ---------------------------------- */
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }

  .hero-eyebrow { font-size: 12.5px; padding: 7px 13px; }
  .section-sub { font-size: 1rem; }
}

/* ---------------------------------- ≤375 ---------------------------------- */
@media (max-width: 375px) {
  .hero-cta { gap: 10px; }
  .hero-copy .hero-cta .btn { width: 100%; }

  .m-item { padding-inline: 12px; gap: 10px; }
  .m-kpi strong { font-size: 15px; }
  .dark-kpi strong { font-size: 17px; }

  .mini-cal { padding-inline: 8px; }
  .m-panel-head { padding-inline: 13px; }
  .m-progress { padding-inline: 13px; }
  .m-info-grid { padding-inline: 13px; }
}