/* site-home.css: home page mobile pass. Loads on every page after site.css, so rules are scoped to the home sections
   (the pillar band only exists on home, so ".pillars ~" limits a rule to the sections after it). */

@media (max-width: 640px) {
  /* Hero: keep both CTAs on one row, as in the references */
  .hero .hero-actions { flex-wrap: nowrap; gap: 16px; }
  .hero .hero-actions .btn-lg { padding-inline: 20px; font-size: 15px; }
  .hero .hero-actions .btn-text { padding-inline: 2px; font-size: 14px; }

  /* Pillars: a 2x2 card row instead of four full-width stacked tiles (home only; /scripts and /free-key use .pillars too) */
  .rdr-hero + .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdr-hero + .pillars .pillar { min-height: 0; padding: 26px 12px; gap: 8px; border-left: 1px solid var(--line-2); }
  .rdr-hero + .pillars .pillar:nth-child(odd) { border-left: 0; }
  .rdr-hero + .pillars .pillar:nth-child(n+2) { border-top: 0; }
  .rdr-hero + .pillars .pillar:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .rdr-hero + .pillars .pillar .pillar-ico { height: 72px; }
  .rdr-hero + .pillars .pillar strong { font-size: 19px; }

  /* Section heads: title, rule and link on one line */
  .pillars ~ .block .sec-head { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .pillars ~ .block .sec-head .banner { height: 46px; }
  .pillars ~ .block .sec-line { display: block; min-width: 24px; margin-bottom: 0; }
  .pillars ~ .block .sec-head .more { flex: none; font-size: 12.5px; letter-spacing: .1em; }

  /* Games grid: first 8 tiles on mobile; the full directory is one tap away */
  .pillars ~ #games .tile-grid > :nth-child(n+9) { display: none; }
  .pillars ~ #games .dir-foot small { display: none; }
}

/* Overflow and balance fixes for the RDR2 rework (home only) */
/* Carousel arrows sit in the page gutter instead of past the viewport edge (was 14px of sideways scroll at 1440). */
.pillars ~ #latest .car-prev { left: max(-54px, calc((100% - 100vw) / 2 + 8px)); }
.pillars ~ #latest .car-next { right: max(-54px, calc((100% - 100vw) / 2 + 8px)); }
/* Story headline: three lines, as in rdr2.jpg, not six narrow ones */
.story .story-inner > .story-title.slab { max-width: 760px; font-size: clamp(52px, 5.2vw, 80px); }
/* Hero card: darken the overlay where "#01 Trending now" sits so the red label stays readable over bright art (16.md C8) */
.rdr-hero .hero-card-1 .hero-card-info { background: linear-gradient(180deg, transparent 0, rgba(7, 7, 8, .88) 38%, rgba(7, 7, 8, .96)); }

@media (max-width: 640px) {
  /* Hero title and B mark fit inside 390 */
  .rdr-hero .rdr-title { max-width: 100%; }
  .rdr-hero .rdr-title .slab { min-width: 0; font-size: clamp(40px, 12.6vw, 64px); }
  .rdr-hero .rdr-title img { height: clamp(70px, 20vw, 110px); }
  .story .story-inner > .story-title.slab { font-size: clamp(38px, 11.4vw, 56px); }
  /* Section heads: the title may shrink or wrap, so title + rule + link never pass 358px */
  main .pillars ~ .block .sec-head { flex-wrap: nowrap; }
  main .pillars ~ .block .sec-head > .sec-title, main .pillars ~ .block .sec-head > .label { flex: 0 1 auto; min-width: 0; }
  main .pillars ~ .block .sec-line { min-width: 12px; }
  /* Montserrat runs wider than Barlow: a tighter link keeps banner + rule + link inside 343-358px */
  main .pillars ~ .block .sec-head .more { padding: 0 18px 0 12px; font-size: 12px; letter-spacing: .06em; }
  main .pillars ~ .block .sec-head .banner img { height: 42px; }
  /* Guides: a compact list (art left, title right) instead of three full-width 16:9 cards (#help was 1178px tall) */
  .pillars ~ #help .news-grid { gap: 12px; }
  .pillars ~ #help .news { display: grid; grid-template-columns: 128px minmax(0, 1fr); --cut: 14px; }
  .pillars ~ #help .news-media { aspect-ratio: auto; min-height: 100%; }
  .pillars ~ #help .news-media b { top: 8px; left: 10px; font-size: 26px; -webkit-text-stroke-width: 1px; }
  .pillars ~ #help .media-play { width: 40px; height: 40px; }
  .pillars ~ #help .media-play svg { width: 20px; height: 20px; }
  .pillars ~ #help .news-body { align-content: center; gap: 8px; padding: 16px 16px 18px; }
  .pillars ~ #help .news-body h3 { font-size: 17px; }
  /* Hero card: the info block sits higher on mobile, so the dark band starts sooner */
  .rdr-hero .hero-card-1 .hero-card-info { background: linear-gradient(180deg, transparent 0, rgba(7, 7, 8, .9) 16%, rgba(7, 7, 8, .96)); }
}

/* RDR2 thin icon strip (home "At a glance", /free-key .fk-strip, /premium .pm-steps). The HUD ring art is hidden and each item
   gets a small red line glyph, a cream caps title over one grey line, and short vertical dividers. No rings, glows or motion.
   Colours, grain and hairlines match the page-head poster plate in site-polish.css (cream frame, --rdr-red, grained dark plate). */
.icon-row { border-block: 1px solid rgba(239, 232, 220, .16); background: url("fx/grain.webp") 0 0 / 256px, linear-gradient(180deg, #171113, #0b0708 70%); }
.icon-row .icon-row-inner { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.icon-row .icon-row-inner > div:nth-child(n) { position: relative; gap: 14px; padding: 22px 24px; border: 0; }
.icon-row .icon-row-inner > div:first-child { padding-left: 0; }
.icon-row .icon-row-inner > div:nth-child(n) + div::after { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: rgba(239, 232, 220, .16); }
.icon-row .icon-row-inner .hud-ico { display: none; }
.icon-row .icon-row-inner > div:has(> .hud-ico)::before { content: ""; flex: none; width: 34px; height: 34px; background: var(--rdr-red); -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.icon-row .icon-row-inner .ico { flex: none; width: 34px; height: 34px; color: var(--rdr-red); stroke-width: 1.6; }
.icon-row .icon-row-inner p { gap: 5px; }
.icon-row .icon-row-inner p strong { font: 700 14px/1.15 var(--display); letter-spacing: .08em; color: var(--cream); }
.icon-row .icon-row-inner p span { color: rgba(239, 232, 220, .6); font-size: 13px; line-height: 1.35; }
.icon-row .icon-row-inner > div:has(> img[src*="/icons/games."]) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.icon-row .icon-row-inner > div:has(> img[src*="/icons/live."]) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M8.5 8.5a5 5 0 0 0 0 7M15.5 8.5a5 5 0 0 1 0 7M5.6 5.6a9 9 0 0 0 0 12.8M18.4 5.6a9 9 0 0 1 0 12.8'/%3E%3C/svg%3E"); }
.icon-row .icon-row-inner > div:has(> img[src*="/icons/runs."]) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7Z'/%3E%3C/svg%3E"); }
.icon-row .icon-row-inner > div:has(> img[src*="/icons/timer."]) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.icon-row .icon-row-inner > div:has(> img[src*="/icons/access."]) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4.5'/%3E%3Cpath d='m11.2 11.8 9.3-9.3M17 6l3 3M14.5 8.5l2 2'/%3E%3C/svg%3E"); }
.icon-row .icon-row-inner > div:has(> img[src*="/icons/premium."]) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 4.5 4L12 4l4.5 7L21 7l-2 12H5Z'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); }
.icon-row .icon-row-inner > div:has(> img[src*="/icons/target."]) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v5M12 18v5M1 12h5M18 12h5'/%3E%3C/svg%3E"); }
.icon-row .icon-row-inner > div:has(> img[src*="/icons/targeting."]) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v5M12 18v5M1 12h5M18 12h5'/%3E%3C/svg%3E"); }
.icon-row .icon-row-inner > div:has(> img[src*="/icons/globe."]) { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c2.8 2.7 4.2 5.9 4.2 9.5s-1.4 6.8-4.2 9.5c-2.8-2.7-4.2-5.9-4.2-9.5S9.2 5.2 12 2.5Z'/%3E%3C/svg%3E"); }

@media (max-width: 960px) {
  .icon-row .icon-row-inner, .pillars ~ .icon-row.fk-strip .icon-row-inner { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-row .icon-row-inner > div:nth-child(n) { gap: 12px; padding: 16px 14px; border-top: 1px solid var(--line); }
  .icon-row .icon-row-inner > div:nth-child(-n+2) { border-top: 0; }
  .icon-row .icon-row-inner > div:nth-child(odd) { padding-left: 0; }
  .icon-row .icon-row-inner > div:nth-child(n) + div:nth-child(odd)::after { content: none; }
  .icon-row .icon-row-inner > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .icon-row .icon-row-inner > div:has(> .hud-ico)::before, .icon-row .icon-row-inner .ico { width: 28px; height: 28px; }
  .icon-row .icon-row-inner p strong { font-size: 13px; letter-spacing: .06em; }
  .icon-row .icon-row-inner p span { font-size: 12.5px; }
}

@media (max-width: 400px) {
  main .pillars ~ .block .sec-head .banner img { height: 38px; }
}