/* TASK-1159 — «Explore the site» on new, the owner's variant A «Светлая полоса» (TASK-1141, INBOX #258).
   Source: docs/os/work/TASK-1141/explore.css (designer), the .sx-b look left out — the owner chose A.
   Data: site/data/home-explore.json (5 groups, 51 links) — the same file as the main site's block; drawn by
   tools/build_new.py (explore_html) after </main>, before <footer id="site-footer" class="sf">, on every page of new.
   Behaviour = the main site's block (TASK-0786): h3 + ul of plain <a href> in the HTML; on ≤759 px explore.js turns
   each h3 into a full-width <button aria-expanded aria-controls> «Casinos · 10 links ⌄», groups closed, the links
   stay in the HTML (ul[hidden]). No JS = all groups open.
   Colours: only the tokens of styles.css :root. Width: the footer's inner column (--page-width + 52). */

.sx { margin-top: 44px; background: var(--surface); border-top: 1px solid var(--line); }
.sx-in { max-width: calc(var(--page-width, 1070px) + 52px); margin: 0 auto; padding: 28px 26px 30px; }
.sx + .sf { margin-top: 0; }
/* a page that ends with the player-protection block keeps its thin 16 px line (TASK-1118) — now above the block */
main:has(> .prose:last-child > .protect:last-child) + .sx { margin-top: 0; }

.sx-h { margin: 0 0 14px; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.sx-gs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 0; align-items: start; }
.sx-g { min-width: 0; padding: 0 18px; border-left: 1px solid var(--line); }
.sx-g:first-child { padding-left: 0; border-left: 0; }
.sx-t { margin: 0 0 4px; font-size: 12px; line-height: 1.35; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }
.sx-l { list-style: none; margin: 0; padding: 0; }
.sx-l li { margin: 0; padding: 0; }
/* the tap area is the link itself (TASK-0651): 22 px line + 2×5 = 32 px a row, ≥ 24 px (WCAG 2.5.8), rows edge to edge */
.sx-l a { display: inline-block; vertical-align: top; margin: 0 -4px; padding: 5px 4px; font-size: 15px; line-height: 22px; font-weight: 600;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.sx-l a:hover, .sx-l a[aria-current=page] { color: var(--purple); text-decoration-color: currentColor; }
.sx-l a[aria-current=page] { font-weight: 800; text-decoration-thickness: 2px; }
.sx-l a:focus-visible, .sxb button:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 3px var(--surface); }

/* tablet 760–1199: three columns (3 + 2), the rules between columns of a row only */
@media (max-width: 1199px) {
  .sx-gs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .sx-g:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}

/* phone ≤ 759 (the owner's breakpoint): groups as disclosure rows, built by explore.js (.sx-on) */
@media (max-width: 759px) {
  .sx { margin-top: 32px; }
  .sx-in { padding: 22px 16px 24px; }
  .sx-h { font-size: 22px; margin-bottom: 10px; }
  .sx-gs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sx-g { padding: 0; border-left: 0; }
  .sx-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }  /* no-JS fallback: open, 2 per row */
  .sx-l a { padding: 11px 4px; }                                     /* 22 + 2×11 = 44 px — the project's finger norm */
  .sx-on .sx-gs { gap: 0; }
  .sx-on .sx-g { border-top: 1px solid var(--line); }
  .sx-on .sx-g:last-child { border-bottom: 1px solid var(--line); }
  .sx-on .sxb { margin: 0; font-size: 16px; line-height: 22px; letter-spacing: normal; text-transform: none; font-weight: 800; }
  .sx-on .sxb button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 13px 0; cursor: pointer; font: inherit; color: var(--ink); }
  .sx-on .sxb-n { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--muted); }
  .sx-on .sxb-i { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); transition: transform .15s; }
  .sx-on button[aria-expanded=true] .sxb-i { transform: rotate(180deg); }
  .sx-on .sxb button:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }
  .sx-on .sx-l { grid-template-columns: minmax(0, 1fr); padding: 0 0 8px; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) { .sx-on .sxb-i { transition: none; } }
@media print { .sx { display: none; } }