/* Shared small-screen fixes for ostebovik.net -- loaded LAST in <head> on
   every page that uses the <nav> + .nav-links header, so these rules win over
   each page's own inline styles. Tested headless at 360 and 390px with the
   site's real fonts.

   1. NAV.
   Why (2026-09-28): the header is position:fixed, 56px tall, and its links
   never wrapped. On a phone (390px) only Home, Identity and Networking were
   visible and the rest ran off-screen, and on some pages that also widened
   the whole document. On narrow screens the links now scroll sideways inside
   the header. The header's height doesn't change, so no page content
   moves.
   2026-10-05: only the SIDE padding is overridden. The rule used to be
   `padding: 0 1rem`, which was harmless on the fixed-height (56px) headers
   but flattened the two padding-sized ones: the AI page's header measured
   29px on a phone instead of ~50px, and the homepage's would have too.
   .nav-logo is the homepage's name for .nav-brand. */
@media (max-width: 900px) {
  nav { padding-left: 1rem !important; padding-right: 1rem !important; gap: 1rem; }
  .nav-brand, .nav-logo { flex-shrink: 0; }
  .nav-links {
    gap: 1.25rem !important;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 1.5rem;
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
            mask-image: linear-gradient(to right, #000 80%, transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
}

/* 2. HERO HEADINGS. On 360px phones "Infrastructure as Code" in the domain
   hero (Barlow Condensed 800, min 3.5rem) ran 23px past the screen edge.
   The homepage's name (.hero-name) is excluded: it fits at 360px as is
   (measured 2026-10-05), so there is no reason to shrink it. */
@media (max-width: 400px) {
  .hero h1:not(.hero-name) { font-size: clamp(2.6rem, 12.5vw, 3.5rem) !important; }
}

/* 3. RESUME HEADER. The resume had no small-screen rules at all: name and
   contact block sat side by side (grid 1fr auto), and the contact lines pushed
   the page to ~500px wide on any phone. Stack them instead. */
@media (max-width: 640px) {
  .resume-header { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .resume-contact { text-align: left !important; }
  /* the three skill columns were ~100px each on a phone */
  .skills-grid { grid-template-columns: 1fr !important; }
  /* 3.5rem side padding left a ~210px text column on a 390px phone */
  .resume-card { padding: 1.75rem 1.25rem !important; }
}

/* 4. PROJECT CARDS (2026-10-14). On the five section pages an opened project
   card cut its text off on a phone: .project-body-inner is a grid, and a
   plain 1fr column can't shrink below its widest content (one long code line
   or table), so every paragraph in the column was laid out at that width,
   up to 631px inside a 268px card. minmax(0, 1fr) lets the column shrink; wide
   code blocks and tables then scroll sideways inside themselves instead.
   Tested headless at 360 and 390px with the site's real fonts. */
@media (max-width: 700px) {
  .project-body-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .project-body-inner > * { min-width: 0; }
  .project-body-inner pre, .project-body-inner table { max-width: 100%; overflow-x: auto; }
  .project-body-inner table { display: block; }
  /* long inline code words (e.g. skipGithubActionWorkflowGeneration) wrap */
  .project-body-inner code { overflow-wrap: anywhere; }
  /* the evidence screenshot grid had a 280px minimum column, 13px wider than
     an opened card on a 360px phone */
  .screenshot-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }
  /* Networking's DNS cards: a long hostname couldn't wrap */
  .dns-hop { overflow-wrap: anywhere; }
}