/* Mobile / narrow-viewport overrides for basjoo.de.
   Loaded after the snapshot CSS, so these rules only need to cover what the
   desktop design does not already do responsively. */

/* ---------- header: single row on phones ---------- */
@media (max-width: 1023px) {
  header > div {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
  /* the desktop anchor strip is `hidden lg:flex` in the original design —
     a landing page scrolls fine without it, and it does not fit a phone row */
  nav[aria-label="Primary navigation"] {
    display: none;
  }
  section[id] {
    scroll-margin-top: 5rem;
  }
}

@media (max-width: 639px) {
  header a[href="#top"] span.relative {
    height: 2.25rem;
    width: 2.25rem;
  }
  header a[href="#top"] span.relative img {
    width: 1.5rem;
    height: 1.5rem;
  }
  header a[href="#top"] span.font-display {
    font-size: 1.0625rem;
  }
  header a[href="https://github.com/haoyiyin/basjoo"] {
    padding: 0.45rem 0.8rem;
    font-size: 0.8125rem;
  }
  /* the language switch is `hidden sm:flex` — a phone needs it most */
  [aria-label="Language switcher"] {
    display: flex;
  }
  [aria-label="Language switcher"] > svg {
    display: none; /* drop the icon, keep the two pills */
  }
  [aria-label="Language switcher"] a {
    padding: 0.3rem 0.55rem;
  }
  /* make room in the header: X lives in the footer too */
  header a[aria-label="Open imhaoyi on X"] {
    display: none;
  }
}

/* ---------- hero: stop the h1 from breaking into 5 lines ---------- */
@media (max-width: 640px) {
  #top h1 {
    font-size: clamp(2.2rem, 11.2vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
  }
}

/* ---------- screenshots: un-stack the fanned mockups ---------- */
@media (max-width: 1023px) {
  #screenshots .min-h-\[360px\] {
    min-height: 0;
  }
  #screenshots .min-h-\[320px\] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #screenshots .min-h-\[320px\] > div.absolute {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: auto !important;
    aspect-ratio: 16 / 10;
  }
  #screenshots .min-h-\[320px\] > div.absolute + div.absolute {
    margin-top: 0;
  }
}

/* ---------- tighter vertical rhythm on phones ---------- */
@media (max-width: 639px) {
  #top {
    padding-top: 2.25rem;
  }
  section {
    scroll-margin-top: 5rem;
  }
}

/* ---------- hero graph: keep node chips off the panel border ---------- */
@media (max-width: 640px) {
  #top .h-\[315px\] {
    padding-left: 1.5rem;
    padding-right: 1.25rem;
    height: 260px;
  }
  #top .h-\[315px\] > div > div {
    padding: 0.35rem 0.55rem;
    border-radius: 0.9rem;
  }
  #top .h-\[315px\] > div > div p {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
  }
  #top .h-\[315px\] svg line {
    stroke-width: 1.5;
  }
  /* the deployed-steps card under the graph */
  #top .panel-shell .grid.gap-3 span.grid {
    height: 1.25rem;
    width: 1.25rem;
    font-size: 9px;
  }
}

/* ---------- screenshots: thumbnails as a swipe row on phones ---------- */
@media (max-width: 639px) {
  #screenshots .grid.grid-cols-3 {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
  }
  #screenshots .grid.grid-cols-3::-webkit-scrollbar {
    display: none;
  }
  #screenshots .grid.grid-cols-3 > div {
    flex: 0 0 78%;
    height: 9.5rem;
    scroll-snap-align: start;
  }
}

/* ---------- deploy: the install command wraps instead of clipping ---------- */
@media (max-width: 640px) {
  #deploy code {
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.75rem;
    line-height: 1.5;
  }
  #deploy .panel-shell {
    padding: 1.25rem;
  }
  #deploy h2 {
    font-size: 1.85rem;
    line-height: 1.12;
  }
}

/* ---------- screenshots: unstack the fanned console frames on phones ---------- */
@media (max-width: 1023px) {
  #screenshots .min-h-\[320px\] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #screenshots .min-h-\[320px\] > div.absolute[data-label] {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    z-index: auto !important;
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  #screenshots .min-h-\[320px\] > div.absolute[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: 0.55rem;
    bottom: 0.55rem;
    z-index: 3;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(9, 19, 21, 0.85);
    border: 1px solid rgba(116, 242, 180, 0.35);
    color: #74f2b4;
    font: 600 0.625rem/1.3 ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.06em;
  }
}

/* ---------- tighten vertical rhythm on phones ---------- */
@media (max-width: 640px) {
  section {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }
  #features, #screenshots {
    padding-top: 3.5rem;
  }
}

/* ---------- anchors: clear the taller phone header ---------- */
@media (max-width: 1023px) {
  section[id] {
    scroll-margin-top: 8rem;
  }
}