/*
 * Holiday Labs additive overrides.
 *
 * For visual bugs in the client-approved artifact CSS that show up on real
 * devices. Loaded after the inline <style> block so equal-specificity rules
 * win by source order — no !important needed.
 *
 * Each block is gated to the smallest scope that fixes the bug; wider
 * viewports are entirely unaffected unless explicitly listed in "all widths".
 */

/* ---------- all widths ---------- */

/*
 * `.gram` has letter-spacing: -.03em for the giant "1 грамм" headline. That
 * negative spacing inherits into the `<small>` subtitle, squeezing the spaces
 * between words ("достаточно на акр" looked like "достаточнонаакр" on phones).
 * Reset to normal spacing on the subtitle.
 */
.gram small {
  letter-spacing: normal;
  word-spacing: normal;
}

/* ---------- phone-width (≤ 500 px) ---------- */

@media (max-width: 500px) {
  /*
   * .dirs-grid stays at 2 columns under the artifact's 900-px breakpoint and
   * never collapses further. On 375-wide screens the right column is clipped.
   * Drop to a single column with tighter padding so the eight industry cards
   * stack readably.
   */
  .dirs-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .dir {
    padding: 24px 20px;
  }

  /*
   * The case-grid and ptypes already collapse at 900 px in the artifact,
   * but we belt-and-brace them at phone width in case the source CSS ever
   * tweaks the desktop breakpoints.
   */
  .case-grid {
    grid-template-columns: 1fr;
  }
  .ptypes {
    grid-template-columns: 1fr;
  }

  /*
   * Products page card grid — the artifact uses repeat(auto-fill, minmax(…))
   * which can leave odd half-empty rows on narrow viewports. Force single
   * column for clean stacking.
   */
  .products {
    grid-template-columns: 1fr;
  }
}

/* ---------- safety net: never force a horizontal scroll on phones ---------- */

@media (max-width: 500px) {
  html,
  body {
    overflow-x: hidden;
  }
}