/* ============================================================
   ToneThread Blog — mobile.css
   Mobile-first responsive additions.
   Load AFTER theme.css.
   Tested: iPhone SE (375px), iPhone 15 Pro (393px),
           Samsung Galaxy S24 (360px), iPad mini (768px)
   ============================================================ */

/* ── Base mobile resets ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ── NAV — mobile collapse ── */
@media (max-width: 640px) {

  .tt-nav {
    height: auto;
    flex-wrap: wrap;
    padding: 0;
  }

  .tt-nav-brand {
    height: 52px;
    border-right: none;
    padding: 0 1rem;
    flex: 1;
  }

  .tt-nav-links {
    display: none; /* hidden on mobile — burger optional future upgrade */
  }

  .tt-nav-right {
    border-left: none;
    border-top: 1px solid var(--rule);
    width: 100%;
    height: 44px;
  }

  .tt-bark-btn {
    flex: 1;
    justify-content: center;
    border-right: 1px solid var(--rule);
  }

  .tt-sub-btn {
    flex: 1;
    justify-content: center;
    text-align: center;
  }
}

/* ── HERO — single column on mobile ── */
@media (max-width: 680px) {

  .tt-hero-inner {
    grid-template-columns: 1fr;
    padding: 2rem 1.25rem 2rem;
    gap: 1.5rem;
  }

  .tt-hero-wave {
    opacity: 0.35;
  }

  .tt-hero-wave img {
    width: 100%;
    opacity: 0.4;
  }

  .tt-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .tt-hero-sub {
    max-width: 100%;
    font-size: 0.88rem;
  }

  .tt-hero-btns {
    flex-direction: column;
    gap: 0.5rem;
  }

  .tt-btn-primary,
  .tt-btn-ghost {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 11px 22px;
  }

  .tt-axis-card {
    /* axis card drops below hero text on mobile */
    border-top: 1px solid var(--rule);
    border-radius: 0;
    margin: 0 -1.25rem;
    padding: 1rem 1.25rem;
    background: var(--surface2);
  }
}

/* ── LANDSCAPE — full width, taller on mobile ── */
@media (max-width: 640px) {

  .tt-landscape {
    padding: 1.25rem 1rem;
  }

  .tt-lmap {
    height: 200px;
  }
}

/* ── FEED — single column on mobile ── */
@media (max-width: 600px) {

  .tt-feed {
    padding: 1.25rem 1rem;
  }

  .tt-feed-grid {
    grid-template-columns: 1fr;
  }

  /* Featured card: stack vertically */
  .tt-card-featured {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .tt-feat-right {
    border-left: none;
    border-top: 1px solid var(--rule);
  }

  .tt-feat-body {
    padding: 1.1rem;
  }

  .tt-feat-title {
    font-size: 1.1rem;
  }
}

/* ── ARTICLE — mobile reading comfort ── */
@media (max-width: 640px) {

  .tt-article-wrap {
    padding: 1.5rem 1.1rem;
  }

  .tt-article-title {
    font-size: clamp(1.3rem, 5vw, 1.6rem);
  }

  .tt-article-body {
    font-size: 1rem; /* slightly larger for mobile reading */
  }

  .tt-article-body pre {
    font-size: 0.75rem;
    padding: 0.85rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Certificate panel: scrollable value column */
  .tt-cert-value {
    max-width: 55%;
    font-size: 0.62rem;
  }

  /* Axis bars grid: 3 columns on narrow screens */
  .tt-cert-axes {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }
}

/* ── VERIFY page — mobile ── */
@media (max-width: 640px) {

  .tt-verify-wrap {
    padding: 1.5rem 1.1rem;
  }

  .tt-vstep {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.85rem;
  }

  .tt-vstep-num {
    align-self: flex-start;
  }

  .tt-vstep-result {
    font-size: 0.6rem;
    padding-left: 32px;
  }
}

/* ── PAGES (about, signal, archive) ── */
@media (max-width: 640px) {

  .tt-page-wrap {
    padding: 1.75rem 1.1rem;
  }

  .tt-page-hero {
    padding: 2rem 1.1rem 1.5rem;
  }

  .tt-page-hero h1 {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
  }

  /* Tool grid: single column on mobile */
  .tt-tools-grid {
    grid-template-columns: 1fr;
  }

  /* Axis explainer table: scroll horizontally */
  .tt-axis-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Zone pills: wrap */
  .tt-zone-pills {
    flex-direction: column;
    gap: 0.5rem;
  }

  .tt-zone-pill {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
}

/* ── FOOTER — stack on mobile ── */
@media (max-width: 580px) {

  .tt-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.1rem;
  }

  .tt-footer-links {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }
}

/* ── Touch target minimums ── */
@media (max-width: 768px) {

  .tt-bark-btn,
  .tt-sub-btn,
  .tt-btn-primary,
  .tt-btn-ghost {
    min-height: 44px; /* Apple HIG minimum touch target */
  }

  .tt-nav-brand {
    min-height: 44px;
  }

  /* Scatter dots: larger hit area on touch */
  .tt-ldot {
    min-width: 20px;
    min-height: 20px;
  }

  /* Card links: full-card tap area */
  .tt-card,
  .tt-card-featured {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── Tablet (768px) — two-column feed ── */
@media (min-width: 601px) and (max-width: 860px) {

  .tt-feed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tt-card-featured {
    grid-column: 1 / -1;
    grid-template-columns: 3fr 2fr;
  }

  .tt-hero-inner {
    grid-template-columns: 1fr 260px;
    padding: 2.5rem 1.5rem 2.5rem;
  }
}

/* ── Safe area insets (iPhone notch / Dynamic Island) ── */
@supports (padding: max(0px)) {

  .tt-nav {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .tt-footer {
    padding-bottom: max(2rem, calc(1.5rem + env(safe-area-inset-bottom)));
    padding-left: max(1.1rem, calc(1.1rem + env(safe-area-inset-left)));
    padding-right: max(1.1rem, calc(1.1rem + env(safe-area-inset-right)));
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  .tt-ax-fill,
  .tt-cert-axis-bar,
  .tt-ldot,
  .root * {
    transition: none !important;
    animation: none !important;
  }
}

/* ── High contrast mode ── */
@media (forced-colors: active) {

  .tt-nav-wordmark,
  .tt-footer-wordmark,
  .tt-gradient-text,
  .hero-gw {
    -webkit-text-fill-color: ButtonText;
    background: none;
  }

  .tt-card-bar,
  .tt-feat-bar,
  .tt-post-top-bar {
    background: ButtonText !important;
  }
}