/* ============================================================
   RESPONSIVE — breakpoints for all pages
   Desktop-first approach.

   Breakpoints:
     ≤ 1024px  tablet landscape / small laptop
     ≤  768px  tablet portrait / large phone
     ≤  480px  phone
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   TABLET LANDSCAPE  (≤ 1024px)
   ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Layout tokens */
  :root {
    --page-pad:    40px;
    --content-pad: 24px;
  }

  /* ── Index: hero ── */
  .hero {
    padding: 128px var(--page-pad) 64px;
  }

  .hero-heading {
    font-size: 80px;
    letter-spacing: -1.6px;
  }

  /* ── Index: project title ── */
  .project-title {
    font-size: 42px;
    letter-spacing: -0.42px;
  }

  /* ── Index: about ── */
  .about-heading {
    font-size: 36px;
    letter-spacing: -0.36px;
  }

  .about-left  { flex: 0 0 340px; }
  .about-right { flex: 0 0 340px; }

  /* ── Index: footer email ── */
  .footer-email {
    font-size: 26px;
  }

  /* ── Case study: hero title ── */
  .cs-hero-title {
    font-size: 60px;
    letter-spacing: -1.2px;
  }

  /* ── Case study: 3-col goal cards → 2-col at tablet ── */
  .goal-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Case study: 3-col ds-grid → 2-col ── */
  .ds-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── FNF: 6-col meta-stats → 3-col ── */
  .meta-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .meta-stat-cell:nth-child(3) {
    border-right: none;
  }

  .meta-stat-cell:nth-child(4),
  .meta-stat-cell:nth-child(5),
  .meta-stat-cell:nth-child(6) {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* ── FNF: stack pipeline wraps at this width ── */
  .stack-pipeline {
    flex-wrap: wrap;
    gap: 0;
  }

  /* ── FNF: stat-card value size ── */
  .stat-card-value {
    font-size: 36px;
  }
}


/* ──────────────────────────────────────────────────────────
   TABLET PORTRAIT / LARGE PHONE  (≤ 768px)
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Layout tokens */
  :root {
    --page-pad:    24px;
    --content-pad: 20px;
  }

  /* ── Global text overflow guard ── */
  p, li, td, th, h1, h2, h3, code, span {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
  }

  /* Clip overflow at each section so nothing escapes padding bounds */
  .hero,
  .cs-hero,
  .section,
  .meta-wrap,
  .about,
  .site-footer {
    overflow: hidden;
  }

  /* Constrain inner wrappers to parent width */
  .cs-hero-inner,
  .section-inner {
    width: 100%;
    max-width: 100%;
  }

  /* Pills row must respect its container width */
  .hero-pills {
    width: 100%;
  }

  /* Scale pills down so long labels wrap rather than overflow */
  .pill {
    font-size: 9.28px;
    letter-spacing: 1.2px;
    padding: 1px 10px;
    height: 24px;
  }

  /* Remove fixed max-widths that exceed mobile viewport */
  .cs-hero-subtitle  { max-width: 100%; }
  .project-description { max-width: 100%; }
  .hero-description  { max-width: 100%; }
  .meta-stat-value   { word-break: break-word; }

  /* ── Nav ── */
  nav {
    padding: 20px var(--page-pad);
    flex-wrap: wrap;
    gap: 12px;
  }

  .nav-links {
    gap: 24px;
  }

  .nav-links a {
    font-size: 10px;
    letter-spacing: 2px;
  }

  /* ── Index: hero ── */
  .hero {
    padding: 112px var(--page-pad) 56px;
  }

  .hero-heading {
    font-size: 56px;
    letter-spacing: -1px;
    margin-top: 20px;
  }

  .hero-footer {
    flex-direction: column;
    gap: 20px;
  }

  .hero-description {
    max-width: 100%;
  }

  .hero-cta-wrap {
    justify-content: flex-start;
  }

  /* ── Index: projects ── */
  .projects {
    padding: var(--page-pad);
  }

  .project-item {
    flex-direction: column;
    gap: 20px;
  }

  .project-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px 40px;
    width: 100%;
  }

  .sidebar-spacer {
    margin-top: 0;
  }

  .project-title {
    font-size: 36px;
    letter-spacing: -0.36px;
  }

  /* ── Index: about ── */
  .about {
    padding: 64px var(--page-pad);
  }

  .about-inner {
    flex-direction: column;
    gap: 32px;
  }

  .about-left,
  .about-right {
    flex: none;
    width: 100%;
  }

  .about-heading {
    font-size: 32px;
    letter-spacing: -0.32px;
    margin-top: 20px;
  }

  /* ── Index: footer ── */
  .site-footer {
    padding: 48px var(--page-pad);
  }

  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .footer-email {
    font-size: 22px;
    white-space: normal;
  }

  .footer-right {
    align-items: flex-start;
  }

  /* ── Case study: hero ── */
  .cs-hero {
    padding: 112px var(--page-pad) 56px;
  }

  .cs-hero-title {
    font-size: 48px;
    letter-spacing: -0.96px;
  }

  .cs-hero-subtitle {
    font-size: 16px;
  }

  /* ── Case study: meta cards — 2-col ── */
  .meta-cards {
    grid-template-columns: repeat(2, 1fr);
    transform: translateY(-20px);
  }

  /* ── Case study: section padding ── */
  .section {
    padding: 56px 0;
  }

  /* ── Case study: context-grid — stack ── */
  .context-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* ── Case study: goal-cards — 1-col ── */
  .goal-cards {
    grid-template-columns: 1fr;
  }

  /* ── Case study: rq-grid — 1-col ── */
  .rq-grid {
    grid-template-columns: 1fr;
  }

  .rq-item--solo {
    grid-column: auto;
  }

  /* ── Case study: audit-cards — 1-col ── */
  .audit-cards {
    grid-template-columns: 1fr;
  }

  /* ── Case study: flow-grid — 1-col ── */
  .flow-grid {
    grid-template-columns: 1fr;
  }

  /* ── Case study: ds-grid — 2-col ── */
  .ds-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 32px;
  }

  /* ── Case study: outcome-cards — 1-col ── */
  .outcome-cards {
    grid-template-columns: 1fr;
  }

  /* ── Case study: takeaway-grid — 1-col ── */
  .takeaway-grid {
    grid-template-columns: 1fr;
  }

  /* ── Case study: section-heading size ── */
  .section-heading {
    font-size: 26px;
    letter-spacing: -0.26px;
  }

  /* ── Case study: footer ── */
  .cs-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px var(--content-pad);
  }

  /* ── FNF: hero examples — stack ── */
  .hero-examples {
    flex-direction: column;
  }

  /* ── FNF: meta-stats — 2-col ── */
  .meta-stats {
    grid-template-columns: repeat(2, 1fr);
    transform: translateY(-20px);
  }

  .meta-stat-cell:nth-child(3) {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }

  .meta-stat-cell:nth-child(2),
  .meta-stat-cell:nth-child(4),
  .meta-stat-cell:nth-child(6) {
    border-right: none;
  }

  .meta-stat-cell:nth-child(3),
  .meta-stat-cell:nth-child(4),
  .meta-stat-cell:nth-child(5),
  .meta-stat-cell:nth-child(6) {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* ── FNF: stack pipeline — vertical ── */
  .stack-pipeline {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }

  .stack-connector {
    width: auto;
    height: 28px;
    transform: rotate(90deg);
  }

  /* ── FNF: stat-cards — 1-col ── */
  .stat-cards {
    grid-template-columns: 1fr;
  }

  .stat-card-value {
    font-size: 36px;
  }

  /* ── FNF: demo-split — 1-col ── */
  .demo-split {
    grid-template-columns: 1fr;
  }

  /* ── FNF: training table — scrollable ── */
  .training-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── FNF: code-snippet-box — stack label ── */
  .code-snippet-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .code-snippet-value {
    font-size: 12px;
    word-break: break-all;
  }

  /* ── FNF: fnf-footer-data — 1-col ── */
  .fnf-footer-data {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fnf-footer-inner {
    padding: 40px var(--content-pad) 40px;
  }
}


/* ──────────────────────────────────────────────────────────
   PHONE  (≤ 480px)
   ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Layout tokens */
  :root {
    --page-pad:    20px;
    --content-pad: 16px;
  }

  /* ── Nav — stack logo + links on two rows so nothing clips ── */
  nav {
    flex-wrap: wrap;
    align-items: center;
    padding: 14px var(--page-pad) 12px;
    row-gap: 8px;
  }

  .nav-logo {
    flex: 1;
    font-size: 10px;
    letter-spacing: 2px;
  }

  .nav-links {
    width: 100%;
    gap: 24px;
  }

  .nav-links a {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  /* ── Index: hero — extra top padding for 2-row nav ── */
  .hero {
    padding: 116px var(--page-pad) 48px;
  }

  .hero-heading {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  /* ── Index: project ── */
  .project-title {
    font-size: 30px;
    letter-spacing: -0.3px;
    margin-top: 12px;
  }

  .project-description {
    max-width: 100%;
  }

  /* ── Index: about ── */
  .about-heading {
    font-size: 28px;
    letter-spacing: -0.28px;
  }

  /* ── Index: footer ── */
  .footer-email {
    font-size: 18px;
    white-space: normal;
    word-break: break-word;
  }

  /* ── Case study: hero — extra top padding for 2-row nav ── */
  .cs-hero {
    padding: 116px var(--page-pad) 48px;
  }

  .cs-hero-title {
    font-size: 36px;
    letter-spacing: -0.72px;
    margin-top: 16px;
  }

  .cs-hero-subtitle {
    font-size: 14.4px;
    margin-top: 16px;
  }

  /* ── Case study: meta cards — 1-col ── */
  .meta-cards {
    grid-template-columns: 1fr;
    transform: translateY(-16px);
  }

  /* ── Case study: section-heading ── */
  .section-heading {
    font-size: 22px;
    letter-spacing: -0.22px;
  }

  .section-subtext {
    font-size: 14.4px;
  }

  /* ── Case study: section padding ── */
  .section {
    padding: 48px 0;
  }

  /* ── Case study: challenge card padding ── */
  .challenge-card {
    padding: 24px;
  }

  /* ── Case study: goal / takeaway cards ── */
  .goal-card,
  .takeaway-card {
    padding: 24px 24px 24px 26px;
  }

  /* ── Case study: align-box ── */
  .align-box,
  .align-box-inner {
    padding: 20px;
  }

  /* ── Case study: ds-grid — 1-col ── */
  .ds-grid {
    grid-template-columns: 1fr;
  }

  /* ── Case study: design-cards ── */
  .design-card {
    padding: 20px;
  }

  /* ── Case study: outcome cards padding ── */
  .outcome-card {
    padding: 20px;
  }

  /* ── Case study: achievements box ── */
  .achievements-box {
    padding: 20px;
  }

  /* ── FNF: meta-stats — 2-col (keep) ── */
  .meta-stats {
    grid-template-columns: repeat(2, 1fr);
    transform: translateY(-16px);
  }

  /* ── FNF: stat-cards ── */
  .stat-card {
    padding: 24px;
  }

  .stat-card-value {
    font-size: 32px;
  }

  /* ── FNF: code blocks ── */
  .code-block {
    font-size: 12px;
    padding: 16px;
  }

  /* ── FNF: demo card padding ── */
  .demo-card {
    padding: 24px;
  }

  /* ── FNF: learn rows ── */
  .learn-row {
    gap: 20px;
    padding: 20px 0;
  }

  /* ── FNF: fnf-footer-inner ── */
  .fnf-footer-inner {
    padding: 32px var(--content-pad);
    gap: 28px;
  }
}