/* TASK-1091 — a section page on new (13 pages: /payments, /games, /bonus-types …), the owner's variant А «Сначала
   карта» of INBOX #244; spec docs/os/work/TASK-1091/spec.md. The guide template of TASK-1074 (guide.css) plus:
   §2 the check line under the H1 (.sec-check), §3 «Guides in this section» (.sec-guides) between the head and the
   «On this page» bar in the 1070 column, §5 «Casinos we have reviewed» (.sec-reviews) at the end. Owner's tokens only
   (--purple, --purple-soft, --purple-deep, --surface, --line, --muted, --radius-chip, --page-width); no line-clamp —
   a card's line is whole (ux* UX-03). Section pages only, linked from the page body after guide.css. */

/* §2 the check line: the proof under the H1, set apart from the lead by a purple rule, no new colour */
.guide-head .sec-check { padding-left: 10px; border-left: 3px solid var(--purple); }

/* §3 «Guides in this section» */
.sec-wrap { max-width: calc(var(--page-width) + 52px); margin: 0 auto; padding: 26px 26px 8px; }
/* TASK-1260 UX-05: the bar item is the H2 (#section-guides-h), not the section; html.rtoc-js scroll-padding already holds
   header + bar, so the H2 takes the prose H2 margin (18) — 136 on the section on top of it landed the heading at 272 */
.sec-guides h2 { scroll-margin-top: 18px; }
.sec-guides h2 { margin: 0 0 4px; padding: 0; border: 0; font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -.03em; }
.sec-sub { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.sec-gh { margin: 22px 0 10px; font-size: 13px; line-height: 1.4; font-weight: 800; letter-spacing: .08em;
          text-transform: uppercase; color: var(--purple-deep); }
.sec-gh span { color: var(--muted); letter-spacing: 0; }
.sec-cards { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sec-cards li { margin: 0; padding: 0; }
.sec-cards li::before { content: none; }
.sec-rest .sec-cards { margin-top: 10px; }
.sec-rest[hidden="until-found"] { display: block !important; }   /* styles.css [hidden] would hide it from Ctrl+F */
.sec-card { display: flex; flex-direction: column; gap: 3px; min-height: 52px; height: 100%; box-sizing: border-box;
            padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
            text-decoration: none; overflow-wrap: anywhere; }
.sec-card b { font-size: 16px; line-height: 1.35; font-weight: 800; color: var(--purple); }
.sec-card > span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.sec-card:hover { background: var(--purple-soft); }
.sec-card:focus-visible, .sec-more:focus-visible, .sec-reviews a:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.sec-ext { display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 12px; line-height: 1.5; font-style: normal;
           font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-chip);
           vertical-align: 2px; }
.sec-more { display: block; width: 100%; min-height: 44px; margin: 10px 0 0; padding: 10px 14px; font: inherit;
            font-size: 15px; font-weight: 800; color: var(--purple); background: var(--surface);
            border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.sec-more:hover { background: var(--purple-soft); }

/* §5 «Casinos we have reviewed» — in .prose.guide-end, so prose list and heading rules are reset here */
body.guide-page main .prose .sec-reviews { max-width: none; margin: 44px 0 0; }
body.guide-page main .prose .sec-reviews h2 { margin: 0 0 4px; padding-top: 0; border-top: 0; font-size: 22px; letter-spacing: -.03em; }
body.guide-page main .prose .sec-rh { margin: 16px 0 10px; font-size: 13px; line-height: 1.4; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--purple-deep); }
body.guide-page main .prose .sec-rh span { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 700; }
body.guide-page main .prose .sec-reviews ul { margin: 0; padding: 0; list-style: none; }
body.guide-page main .prose .sec-reviews li { margin: 0; padding: 0; font-size: 15px; line-height: 1.4; }
body.guide-page main .prose .sec-reviews li::before { content: none; }
.sec-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sec-logos a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 48px; height: 100%;
               box-sizing: border-box; padding: 10px; background: var(--surface); border: 1px solid var(--line);
               border-radius: 12px; font-weight: 800; text-align: center; text-decoration: none; }
.sec-logos a:hover { background: var(--purple-soft); }
.sec-logos img { display: block; width: 100%; max-width: 120px; height: auto; }
.sec-names { columns: 2; column-gap: 20px; }
.sec-names li { break-inside: avoid; }
.sec-names a { display: flex; align-items: center; min-height: 44px; }
body.guide-page main .prose .sec-all { margin: 10px 0 0; }
.sec-all a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }

@media (min-width: 760px) {
  .sec-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .sec-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sec-names { columns: 4; }
}
@media (max-width: 759px) {
  .sec-wrap { padding: 22px 16px 4px; }
  .sec-guides h2 { font-size: 22px; }
}