/* =========================================================================
   TUNEMENT — Mobile / responsive overrides
   Targets the named classes added to the React components.
   Loaded last so these rules win over the inline style declarations
   (we use !important sparingly only on inline-styled grid/flex props).
   ========================================================================= */

/* Universal: prevent horizontal page overflow ----------------------------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; }

/* ============================================================
   TABLET ≤ 900px
   ============================================================ */
@media (max-width: 900px) {
  /* Header: tighter padding, smaller gap */
  .tn-header { padding: 14px 20px !important; }
  .tn-header__nav { gap: 22px !important; }

  /* Section padding pulled in */
  .tn-section { padding-left: 24px !important; padding-right: 24px !important; }
  .tn-manifesto, .tn-services, .tn-studio { padding-top: 96px !important; padding-bottom: 80px !important; }

  /* 2-col intro grids → stack */
  .tn-twocol {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: flex-start !important;
  }

  /* Pillars 4-col → 2-col, fix borders for 2-col layout */
  .tn-pillars { grid-template-columns: repeat(2, 1fr) !important; }
  .tn-pillars > div {
    padding: 24px !important;
    padding-left: 24px !important;
  }
  .tn-pillars > div:nth-child(odd) { padding-left: 0 !important; }
  .tn-pillars > div:nth-child(2n) { border-right: none !important; }
  .tn-pillars > div:nth-child(odd) { border-right: 1px solid var(--line) !important; }

  /* Team 4-col → 2-col */
  .tn-team { grid-template-columns: repeat(2, 1fr) !important; }
  .tn-team > div:nth-child(2n) { border-right: none !important; }
  .tn-team > div:nth-child(odd) { border-right: 1px solid var(--line) !important; }

  /* Tiers 4-col → 2-col */
  .tn-tiers { grid-template-columns: repeat(2, 1fr) !important; }
  .tn-tiers > article { min-height: auto !important; }

  /* Footer 2fr 1fr 1fr 1fr → tag full + 3 cols */
  .tn-footer__cols {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 32px !important;
  }
  .tn-footer__cols > div:first-child { grid-column: 1 / -1; }

  /* Contact 2-col → stack */
  .tn-contact__grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

/* ============================================================
   PHONE ≤ 640px
   ============================================================ */
@media (max-width: 640px) {
  /* HEADER ---------------------------------------------------- */
  .tn-header { padding: 12px 16px !important; }
  .tn-header__nav { gap: 18px !important; }
  .tn-header__nav a { font-size: 13px !important; }
  .tn-header img { height: 14px !important; }

  /* HERO ------------------------------------------------------ */
  .tn-hero { padding-top: 80px !important; padding-bottom: 56px !important; }
  /* Hide top corner labels on phone — they collide */
  .tn-hero__corner { display: none !important; }
  /* Hide vertical edge text — overlaps headline */
  .tn-hero__vertical { display: none !important; }
  /* Hero body content tighter */
  .tn-hero__body { padding: 0 20px !important; max-width: 100% !important; }
  /* Headline + lead reflow */
  .tn-hero h1.tn-display {
    font-size: clamp(38px, 10vw, 56px) !important;
    max-width: 14ch !important;
    line-height: 1.0 !important;
  }
  .tn-hero p.tn-lead { font-size: 16px !important; max-width: 100% !important; }
  /* CTA buttons */
  .tn-hero .tn-capsule, .tn-hero .tn-capsule--lg {
    padding: 14px 22px !important;
    min-height: 48px !important;
    font-size: 13px !important;
  }
  /* Bottom corner meta */
  .tn-hero__bottom {
    padding: 28px 20px 0 !important;
    font-size: 9px !important;
    gap: 16px;
  }

  /* SECTION padding -------------------------------------------- */
  .tn-section { padding-left: 20px !important; padding-right: 20px !important; }
  .tn-manifesto, .tn-services, .tn-studio {
    padding-top: 80px !important; padding-bottom: 64px !important;
  }
  .tn-clients { padding-top: 40px !important; padding-bottom: 80px !important; }
  .tn-contact { padding: 80px 20px !important; }

  /* MANIFESTO ------------------------------------------------- */
  .tn-manifesto__lines {
    font-size: clamp(28px, 8vw, 38px) !important;
    max-width: 100% !important;
    margin-bottom: 40px !important;
  }
  /* §02/WHY label + body: stack */
  .tn-manifesto .tn-twocol { padding-top: 32px !important; }

  /* Pillars 2-col → 1-col stack with bottom borders */
  .tn-pillars {
    grid-template-columns: 1fr !important;
    margin-top: 56px !important;
  }
  .tn-pillars > div {
    padding: 24px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .tn-pillars > div:last-child { border-bottom: none !important; }
  .tn-pillars > div:nth-child(odd) { border-right: none !important; }

  /* WORK ------------------------------------------------------ */
  .tn-work { padding-top: 80px !important; padding-bottom: 40px !important; }
  .tn-work__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
  }
  .tn-work .tn-marquee__item {
    width: 78vw !important;
    padding: 0 8px !important;
  }
  /* Touch carousel — show ~2 cases at once, slightly tighter on phones */
  .tn-work .tn-work__swipe { padding: 0 20px 8px !important; gap: 14px !important; }
  .tn-work .tn-work__swipe-item { flex-basis: 48vw !important; min-width: 48vw !important; max-width: 48vw !important; }

  /* CLIENTS — 2-col already in components.css; just smaller cells */
  .tn-clients .tn-logo-cell {
    height: 80px !important;
    padding: 0 16px !important;
  }

  /* SERVICES tiers 2-col → 1-col stack */
  .tn-tiers {
    grid-template-columns: 1fr !important;
    border-left: none !important;
  }
  .tn-tiers > article {
    border-left: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    padding: 28px 20px !important;
  }
  /* ATTUNEMENT row → stack */
  .tn-attunement {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 24px 20px !important;
  }
  .tn-attunement > button { justify-self: flex-start; }

  /* TEAM 2-col → 1-col */
  .tn-team {
    grid-template-columns: 1fr !important;
  }
  .tn-team > div {
    padding: 24px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  .tn-team > div:last-child { border-bottom: none; }
  .tn-team > div:nth-child(odd) { border-right: none !important; }

  /* CONTACT --------------------------------------------------- */
  .tn-contact h2.tn-display {
    font-size: clamp(40px, 12vw, 64px) !important;
  }
  .tn-contact__meta {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 40px !important;
  }
  .tn-contact form {
    padding: 28px 20px !important;
  }

  /* FOOTER ---------------------------------------------------- */
  .tn-footer { padding: 56px 20px 24px !important; }
  .tn-footer__mark {
    font-size: clamp(56px, 18vw, 96px) !important;
    margin-bottom: 32px !important;
  }
  .tn-footer__cols {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-bottom: 32px !important;
  }
  .tn-footer__cols > div:first-child { grid-column: auto; }
  .tn-footer__rights {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 10px;
  }
}

/* ============================================================
   CASE STUDY pages — tablet ≤ 900px
   ============================================================ */
@media (max-width: 900px) {
  .tn-case-body { padding: 80px 24px !important; }
  .tn-case-body__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 64px !important;
  }
}

/* ============================================================
   CASE STUDY pages — phone ≤ 640px
   ============================================================ */
@media (max-width: 640px) {
  /* Case hero --------------------------------------------------- */
  .tn-case-hero { min-height: auto !important; padding: 80px 0 56px !important; }
  .tn-case-hero__back { top: 80px !important; left: 20px !important; }
  .tn-case-hero__file { top: 80px !important; right: 20px !important; font-size: 9px !important; }
  /* Title block: switch from absolute → static so it doesn't get clipped */
  .tn-case-hero__title {
    position: static !important;
    padding: 120px 20px 40px !important;
    max-width: 100% !important;
  }
  .tn-case-hero h1.tn-display {
    font-size: clamp(40px, 11vw, 64px) !important;
  }
  .tn-case-hero p.tn-lead { font-size: 16px !important; }

  /* Case body --------------------------------------------------- */
  .tn-case-body { padding: 56px 20px !important; }

  /* TRACK ROW — collapse the 5-col grid into stacked rows ------- */
  .tn-track-row {
    grid-template-columns: 28px 1fr auto !important;
    grid-template-areas:
      "num name name"
      ".   wave wave"
      ".   len  play" !important;
    gap: 4px 12px !important;
    padding: 14px 0 !important;
  }
  .tn-track-row__num   { grid-area: num; align-self: start; }
  .tn-track-row__name  { grid-area: name; font-size: 15px !important; line-height: 1.3; }
  .tn-track-row__wave  { grid-area: wave; min-width: 0; padding-top: 6px; }
  .tn-track-row__wave .tn-waveform { height: 28px; }
  .tn-track-row__len   { grid-area: len; text-align: left !important; align-self: center; }
  .tn-track-row__play  { grid-area: play; justify-self: end; align-self: center; }

  /* Case CTA: stack ------------------------------------------- */
  .tn-case-cta {
    flex-direction: column;
    align-items: flex-start !important;
    margin-top: 56px !important;
    padding-top: 32px !important;
  }
  .tn-case-cta > div { font-size: 20px !important; }
}

/* ============================================================
   SMALL PHONE ≤ 380px
   ============================================================ */
@media (max-width: 380px) {
  .tn-header__nav { gap: 14px !important; }
  .tn-header__nav a { font-size: 12px !important; }
  .tn-hero h1.tn-display { font-size: 34px !important; }
  .tn-work .tn-marquee__item { width: 86vw !important; }
  .tn-work .tn-work__swipe-item { flex-basis: 64vw !important; min-width: 64vw !important; max-width: 64vw !important; }
}