/* ===== shared phone polish (generated into each site's /assets/mobile.css) ===== */
@media (max-width: 640px) {
  /* React pages set small labels as inline styles: lift anything under 12px to 12px */
  [style*="font-size: 9px"], [style*="font-size: 9.5px"], [style*="font-size: 10px"], [style*="font-size: 10.5px"],
  [style*="font-size: 11px"], [style*="font-size: 11.5px"] { font-size: 12px !important; }

  /* bigger tap areas for small text links, without moving anything (padding offset by negative margin) */
  footer a, .footer-row a, .footer-social a, .legal a, .back-link, .article__back {
    display: inline-block; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;
  }
}

/* ===== sample-work project pages + blog/book/legal pages (johncarlo.site, johncalo.dev, and the copies on johncarlo.digital) ===== */
@media (max-width: 640px) {
  .ss-num, .ss-label span, .ss-label .open, .group-label, .legal a, .footer-row span, .footer-row a,
  .field > label, .nav-pill a.cta, .nav-pill .nav-cta { font-size: 12px !important; }
  .proj-hero .sub, .ss-grid .sub, .platform-section .sub { font-size: 12px !important; }
}

/* ===== johncarlo.site homepage ===== */
@media (max-width: 640px) {
  /* hero headline: let it wrap so it can be large and readable instead of squeezed onto two lines */
  .hero-title { white-space: normal !important; font-size: clamp(32px, 9.4vw, 44px) !important; line-height: 1.06 !important; text-wrap: balance; }
}

/* narrowest phones (360px): the case-study step cards use the full width */
@media (max-width: 400px) {
  .case-phase { grid-template-columns: 36px minmax(0, 1fr) !important; gap: 10px !important; }
  .case-phase > article { min-width: 0; padding: 18px !important; }
}