/*
 * Canonical per-block-type classes for the Pages CMS section renderer
 * (web/src/components/sections). Every section of a given blockType is
 * styled the same way by default, independent of any admin-supplied custom
 * class/id layered on top (admin/src/app/dashboard/pages/SectionBuilder) —
 * this is what makes e.g. every "icon box group" section look consistent
 * without the admin having to name or maintain the class themselves.
 */

/*
 * Standard content container for every section: 1270px max, centered, with
 * a 25px gutter from the viewport edge below that (1270 + 2*25 = 1320px
 * breakpoint). Sections that want a narrower reading measure (rich text,
 * FAQ, CTA copy) nest their own max-w inside this instead of replacing it,
 * so the outer rhythm stays consistent site-wide even where the text itself
 * reads narrower.
 */
.section-container {
  width: 100%;
  max-width: 1270px;
  margin-inline: auto;
  padding-inline: 25px;
}

/* Hero's background (default: indigo -> blue-glow) is admin-authored data
   now, via the same bgType/bgFrom/bgTo fields and `.section--bg` bleed
   mechanism every other block type uses - see HeroSection.tsx. */

/*
 * Hero's image (when set) is allowed to overlap 50% into whichever section
 * follows it — see HeroSection's .hero__image-float. That next section's own
 * content narrows to the left half so it never runs under the image on the
 * right. Scoped to the lg breakpoint, matching where the image itself
 * becomes visible (hidden below lg — see HeroSection).
 *
 * The `:only-child` guard is what makes this safe to key off `.section-col`
 * generically instead of a block-type-specific class: a row with exactly one
 * column is the single-column reading-width pattern (rich text, CTA, FAQ) —
 * that's the one that should narrow and left-align. A row with several
 * columns side by side (an icon-box grid, a stats grid, ...) never matches,
 * so those keep their normal multi-column layout even directly after Hero.
 * Its heading and paragraph then fill 100% of that narrowed column (see
 * .section--rich-text below) rather than narrowing a second time.
 */
@media (min-width: 1024px) {
  .section--hero.has-hero-image + section .section-row > .section-col:only-child {
    max-width: 50%;
    margin-inline: 0;
  }
}

.section--rich-text {
  background: transparent;
}

/* Rich Text's own typographic spec: heading fills its column at a fixed
   size/leading, and the paragraph reads a little narrower than the column
   on desktop/laptop — independent of whatever width that column itself
   ends up at (the default max-w-3xl reading column, or the narrowed 50%
   column right after Hero, above). */
.section--rich-text .section-heading {
  font-size: 36px;
  line-height: 43px;
}
@media (min-width: 1024px) {
  .section--rich-text .rich-text-content {
    width: 80%;
  }
}

/* Our Review Process (icon box group): pulled up so the gap from the Rich
   Text section above it is exactly 50px instead of the two sections'
   combined 64px+64px padding. Its background (none, by default, on this
   particular instance) is admin-authored data now - see
   IconBoxGroupSection.tsx's bgType field - not a hardcoded override here. */
#our-review-process {
  margin-top: -78px;
}

/*
 * Container block (ContainerSection.tsx): the sections inside it keep their
 * own markup, but the container owns the vertical rhythm - its space
 * above/below and the gap between them - so their own section padding is
 * dropped, and its content width (--container-max) caps theirs.
 */
.container-section__body {
  gap: var(--container-gap, 50px);
}

.container-section__body > .section > .section-container {
  padding-block: 0;
  max-width: var(--container-max, 1270px);
}

/*
 * Grid layout: a 12-track grid inside the content width; each child spans
 * 12 / columns tracks by default, or its own "Width in container" preset
 * (custom_class section--w-*). Below 640px everything stacks; up to 1023px
 * children up to half width pair up two per row and wider ones go full.
 * Children's own containers and bleed backgrounds stay inside their cell.
 */
.container-section__body--boxed {
  width: 100%;
  max-width: var(--container-max, 1270px);
  margin-inline: auto;
  padding-inline: 25px;
}

.main > .primary .container-section__body--boxed {
  padding-inline: 0;
}

.container-section__body--grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.container-section__body--grid > .section {
  grid-column: span 12;
  min-width: 0;
}

.container-section__body--grid > .section > .section-container,
.container-panel > .section > .section-container {
  max-width: none;
  padding-block: 0;
  padding-inline: 0;
}

.container-section__body--grid > .section--bg::before,
.main > .primary .container-section__body--grid > .section--bg::before,
.container-panel > .section--bg::before,
.main > .primary .container-panel > .section--bg::before {
  left: 0;
  width: 100%;
  transform: none;
}

/*
 * Tabs / accordion / carousel layouts: each component is a panel
 * (.container-panel) under a tab, inside an expandable item or on a slide.
 * Colours follow the container's text tone (tone-* variables above).
 */
.container-tabs {
  gap: var(--container-gap, 30px);
}

.container-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  overflow-x: auto;
  border-bottom: 1px solid;
  scrollbar-width: none;
}

.container-tabs__tab {
  flex-shrink: 0;
  cursor: pointer;
  margin-bottom: -1px;
  padding: 0 0 12px;
  border-bottom: 3px solid transparent;
  color: var(--tone-text, var(--color-primary-600));
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.container-tabs__tab:hover,
.container-tabs__tab--active {
  color: var(--tone-heading, var(--color-primary-900));
}

.container-tabs__tab--active {
  border-bottom-color: var(--color-danger);
}

.container-accordion {
  gap: 12px;
}

.container-accordion__item {
  border: 0.5px solid var(--tone-line, var(--color-primary-100));
  border-radius: 5px;
  background: var(--color-surface);
}

.section--tone-light .container-accordion__item {
  background: rgb(255 255 255 / 0.06);
}

.container-accordion__summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  list-style: none;
}

.container-accordion__summary::-webkit-details-marker {
  display: none;
}

.container-accordion__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.container-accordion__icon::before,
.container-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--color-danger);
  transform: translateY(-50%);
  transition: transform 0.15s ease;
}

.container-accordion__icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.container-accordion__item[open] .container-accordion__icon::after {
  transform: translateY(-50%) rotate(0deg);
}

.container-accordion__panel {
  padding: 0 20px 20px;
}

.container-carousel__slide {
  flex: 0 0 85%;
  min-width: 0;
}

@media (min-width: 640px) {
  .container-carousel--2 .container-carousel__slide,
  .container-carousel--3 .container-carousel__slide,
  .container-carousel--4 .container-carousel__slide {
    flex-basis: calc((100% - 16px) / 2);
  }
  .container-carousel--1 .container-carousel__slide {
    flex-basis: 100%;
  }
}

@media (min-width: 1024px) {
  .container-carousel--3 .container-carousel__slide {
    flex-basis: calc((100% - 32px) / 3);
  }
  .container-carousel--4 .container-carousel__slide {
    flex-basis: calc((100% - 48px) / 4);
  }
}

/*
 * Show/hide per device (custom_class presets set in the editor's Advanced
 * tab): mobile below 640px, tablet 640-1199px, desktop 1200px and up - the
 * same split as columnsClassName in web/src/lib/pages.ts.
 */
@media (max-width: 639.98px) {
  .section--hide-mobile {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 1199.98px) {
  .section--hide-tablet {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .section--hide-desktop {
    display: none !important;
  }
}

@media (min-width: 640px) {
  .container-section__body--grid > .section {
    grid-column: span 6;
  }
  .container-section__body--grid > .section.section--w-full,
  .container-section__body--grid > .section.section--w-2-3,
  .container-section__body--grid > .section.section--w-3-4 {
    grid-column: span 12;
  }
}

@media (min-width: 1024px) {
  .container-section__body--grid.container-section__body--cols-2 > .section {
    grid-column: span 6;
  }
  .container-section__body--grid.container-section__body--cols-3 > .section {
    grid-column: span 4;
  }
  .container-section__body--grid.container-section__body--cols-4 > .section {
    grid-column: span 3;
  }
  .container-section__body--grid > .section.section--w-full {
    grid-column: span 12;
  }
  .container-section__body--grid > .section.section--w-3-4 {
    grid-column: span 9;
  }
  .container-section__body--grid > .section.section--w-2-3 {
    grid-column: span 8;
  }
  .container-section__body--grid > .section.section--w-1-2 {
    grid-column: span 6;
  }
  .container-section__body--grid > .section.section--w-1-3 {
    grid-column: span 4;
  }
  .container-section__body--grid > .section.section--w-1-4 {
    grid-column: span 3;
  }
}

/*
 * Text colour that follows a Container's "White text" setting: Title & Text
 * (on "Follow container"), Rich Text, Image/Video captions and Spacer lines
 * use these instead of fixed colours; outside a light container they fall
 * back to the normal navy text.
 */
.section--tone-light {
  --tone-heading: #ffffff;
  --tone-text: #ffffff;
  --tone-line: rgb(255 255 255 / 0.35);
}

.tone-heading {
  color: var(--tone-heading, var(--color-primary-900));
}

.tone-text {
  color: var(--tone-text, var(--color-primary-600));
}

.tone-line {
  border-color: var(--tone-line, var(--color-primary-100));
}

.section--image-gallery {
  background: transparent;
}

/* CTA's background (default: solid indigo) and Stats Counter's (default:
   muted grey) are admin-authored data now, same as Hero above - see
   CTASection.tsx / StatsCounterSection.tsx. */

.section--logo-strip {
  background: transparent;
}

.section--faq {
  background: transparent;
}

/*
 * Admin "Wider content (960px)" toggle (custom_class section--content-960):
 * widens a single-column reading block (Rich Text, FAQ) from the default
 * 768px reading column to 960px / 60rem, and lets Rich Text's paragraph fill
 * that column instead of its usual 80%.
 */
.section--content-960 .rich-text__measure,
.section--content-960 .section-col--centered {
  max-width: 60rem;
}

@media (min-width: 1024px) {
  .section--content-960 .rich-text-content {
    width: 100%;
  }
}

/*
 * Icon Box normal/hover/active colors — set as CSS custom properties on the
 * grid wrapper by IconBoxGroupSection (from the admin's colorNormal/
 * colorHover/colorActive fields) rather than combinatorial classes, so any
 * of the 4-token palette (primary/secondary/white/muted) can combine freely.
 */
.icon-box__heading,
.icon-box__text {
  color: var(--iconbox-color-normal, var(--color-primary-900));
  transition: color 0.15s ease;
}
.icon-box:hover .icon-box__heading,
.icon-box:hover .icon-box__text {
  color: var(--iconbox-color-hover, var(--color-secondary-600));
}
.icon-box.is-active .icon-box__heading,
.icon-box.is-active .icon-box__text {
  color: var(--iconbox-color-active, var(--color-primary-900));
}

/* Shared by Icon Box's "dropdown" display mode and FaqSection. */
.accordion-item__header {
  cursor: pointer;
}
.accordion-item__chevron {
  color: var(--color-text-muted);
}

/*
 * Page layout: the container for every non-Home page's body (see
 * web/src/components/PageGrid.tsx) - a plain flexbox row, not a grid.
 * `.main` is the page container itself (1300px max, centered, 15px gutter).
 * Below it, `.primary` (the stacked sections) and `.sidebar` are ordinary
 * flex siblings with `align-items: flex-start`, which is what makes the
 * Sidebar start flush with `.primary`'s top "for free" - no row-counting or
 * JS measurement needed, unlike the grid-row-span approach this replaced.
 * `.sidebar` is `position: sticky`, so it floats alongside `.primary` for
 * however tall that turns out to be, again with no need to know its height
 * up front.
 *
 * Below 1200px, an explicit `flex-direction: column` switches `.main` to a
 * single stacked column instead of relying on `flex-wrap` to drop the
 * Sidebar onto its own line naturally - `.primary`'s `flex: 1 1 0%` basis
 * (see below) is deliberately near-zero, which means the two items' combined
 * hypothetical size rarely exceeds the line width on its own, so wrapping
 * needs to be forced at the same breakpoint every other responsive rule in
 * this file uses instead of left to occur organically.
 *
 * `--primary-w` describes `.primary`'s width when `.main` sits at its own
 * max-width, used by `.body-container` (re-establishing the reading width
 * inside a bled section, which has otherwise grown past `.primary`). It's
 * NOT used as `.primary`'s own flex-basis - flex-wrap's line-fitting test
 * compares items' hypothetical (pre-shrink) size against the line, so a
 * fixed-pixel basis here would force an unwanted wrap the moment the
 * viewport (and so `.main`) narrows below 1300px, even though `.primary`
 * has flex-shrink available to fit. `flex: 1 1 0%` avoids that: growth
 * alone fills whatever `.main` actually has left after `.sidebar`+gap, at
 * any width.
 */
:root {
  --page-max-w: 1300px;
  --page-gutter: 15px;
  --sidebar-w: 280px;
  --sidebar-gap: 2rem;
  --primary-w: calc(var(--page-max-w) - (2 * var(--page-gutter)));
}

@media (min-width: 1200px) {
  :root {
    --primary-w: calc(
      var(--page-max-w) - (2 * var(--page-gutter)) - var(--sidebar-w) - var(--sidebar-gap)
    );
  }
}

/*
 * The page-wide width/centering rule on its own - shared by `.main` (which
 * additionally needs the flex declarations below) and anything else that
 * should span the exact same 1300px/15px-gutter measure without caring
 * about `.main`'s sidebar-row semantics (e.g. Header.tsx's own inner bar,
 * which just wants "same max-width, same gutter" and applies `.main` and
 * `.page-container` together in markup rather than duplicating the values).
 */
.page-container {
  width: 100%;
  max-width: var(--page-max-w);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.main {
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-gap);
}

@media (min-width: 1200px) {
  .main {
    flex-direction: row;
    align-items: flex-start;
  }
}

.main > .primary {
  flex: 1 1 0%;
  min-width: 0;
}

/*
 * `.section-container` (the generic per-block-type container every CMS
 * section uses) carries its own 25px `padding-inline` for pages that render
 * it directly against the viewport with no Sidebar at all (e.g. Home).
 * Inside `.main > .primary`, that's a second, redundant inset stacked on
 * top of `.primary`'s own edge - unlike `.body-container` (Introduction
 * Section, above), which has none - so every CMS section's content sits
 * ~25px further right/left than the page's own heading/sidebar-menu
 * column. Zeroing it here re-aligns every section flush with `.primary`'s
 * edge (and so with Introduction Section) the same way `.section--bg::before`
 * is corrected for `.primary` above - scoped to `.primary` specifically so
 * pages with no Sidebar (which rely on the 25px gutter directly) are
 * unaffected.
 */
.main > .primary .section-container {
  padding-inline: 0;
}

.main > .sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  padding-top: 20px;
}

@media (min-width: 1200px) {
  .main > .sidebar {
    position: sticky;
    top: 24px;
  }
}

/*
 * A section that wants its background to bleed edge-to-edge (e.g.
 * Introduction Section) gets `.section--bg`: a `::before` sized to 100vw and
 * re-centered on the viewport via the classic `left: 50%; translateX(-50%)`
 * trick. That trick alone assumes the element's own center already sits on
 * the viewport's center - true for `.section--bg` used on its own (e.g. a
 * region route with no Sidebar at all, where the section spans the full
 * page width), so that's the default below.
 *
 * Inside `.main > .primary` specifically, that assumption breaks: `.primary`
 * is offset to the LEFT of `.main`'s center by half the Sidebar+gap width,
 * since the Sidebar only occupies the right side of `.main`. The >=1200px,
 * `.primary`-scoped override adds that exact offset back in, so the bleed
 * still lands on the true viewport edges there instead of being shifted
 * left by ~half the Sidebar's width. This has to be scoped to `.primary`
 * specifically (not a blanket rule on `.section--bg`) - applying it to a
 * page with no Sidebar at all would shift the background off-center by the
 * same amount and cause a real horizontal overflow, which is exactly what
 * happened before this was scoped. Below 1200px, where the Sidebar (if any)
 * has wrapped onto its own line, no correction is needed either way.
 *
 * The section's own children need `position: relative` (with a z-index
 * above 0) to paint over this pseudo-element rather than under it - see
 * IntroductionSection.tsx.
 *
 * The background itself is CSS custom properties, set inline by whichever
 * component uses `.section--bg` (see IntroductionSection.tsx,
 * IconBoxGroupSection.tsx) - not baked into this class as a fixed "theme".
 * That's what lets the actual colors/image be admin-authored data (the
 * Pages CMS fields, resolved via web/src/lib/pages.ts's sectionBgColorValue)
 * instead of a hardcoded enum a component maps to specific classes.
 * `--section-bg-image` (a `url(...)` value) takes priority when a caller
 * sets it - `var()` only falls through to its fallback when the property is
 * entirely unset, not merely unused - otherwise it's a `--section-bg-from`/
 * `--section-bg-to` gradient (the same property pair also doubles as a flat
 * color when a caller sets them equal). The defaults below (indigo ->
 * blue-glow) only apply if a caller sets none of these.
 */
.section--bg {
  position: relative;
}

.section--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  background-image: var(
    --section-bg-image,
    linear-gradient(to bottom, var(--section-bg-from, var(--color-primary-900)), var(--section-bg-to, var(--color-primary-glow)))
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 1200px) {
  .main > .primary .section--bg::before {
    transform: translateX(calc(-50% + (var(--sidebar-w) + var(--sidebar-gap)) / 2));
  }
}

/*
 * Introduction Section's own inner layout (see IntroductionSection.tsx) -
 * a container/row/col hierarchy matching the rest of the site's
 * `.section-container`/`.section-row`/`.section-col` convention, but capped
 * at `--primary-w` (not the sitewide 1270px) so it re-aligns with
 * `.primary`'s own width exactly, whether or not the section itself bleeds.
 */
.body-container {
  width: 100%;
  max-width: var(--primary-w);
  margin-inline: auto;
}

.intro-row {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media (min-width: 1200px) {
  .intro-row {
    flex-direction: row;
    align-items: flex-start;
  }
}

.intro-col {
  flex: 1 1 0%;
  min-width: 0;
}

.intro-col--menu {
  flex: 0 0 auto;
}

@media (min-width: 1200px) {
  .intro-col--menu {
    flex: 0 0 280px;
  }
}

/*
 * Feature Cards ("Most Trusted Payment Methods") and Checklist Callout
 * ("Trust Factors"/"Safety Tips"/"Your Role") - see FeatureCardsSection.tsx
 * and ChecklistCalloutSection.tsx. Checklist Callout keeps its own
 * background so it visually reads as an extension of the cards above it
 * rather than a separate section (the x-gutter these two share with every
 * other CMS section comes from the general `.main > .primary
 * .section-container` rule above, not a block-specific override).
 */
/* Solid mint (Figma #E6F9F6) rather than translucent teal, so it reads the same on white and on the tinted step band. */
.checklist-callout {
  background-color: var(--color-success-subtle);
}

.checklist-callout__label h3 {
  color: #00bb9e;
}

.checklist-callout__items svg {
  color: #00bb9e;
}

/*
 * Reusable caret-bullet list, used wherever a rich-text list should read as
 * a checklist rather than a browser default disc (Fees table's tips column,
 * Numbered Steps' body text) - see .comparison-table__tips and
 * .numbered-step__body.
 */
.caret-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  padding-left: 0;
}

.caret-list li {
  position: relative;
  padding-left: 1.25rem;
}

.caret-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  font-weight: bold;
  color: var(--color-primary-700);
}

.diamond-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  padding-left: 0;
}

.diamond-list li {
  position: relative;
  padding-left: 1.25rem;
}

.diamond-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  font-size: 0.7em;
  top: 0.35em;
  color: var(--color-primary-700);
}

/*
 * Admin-editable escape hatch (see custom_class on page_sections,
 * 0016_pages.sql) for a section directly following another section whose
 * own bottom padding already provides enough gap - avoids doubled vertical
 * space when two independently-padded generic sections sit back to back.
 */
.section--tight-top .section-container {
  padding-top: 0;
}

/*
 * Checklist Callout's "stacked" layout (Bonuses hub "How We Choose the Best
 * ... Bonuses") - same tinted box as the split layout, with a hairline
 * success-tinted border and a navy section-style heading instead of the
 * split layout's italic teal label.
 */
.checklist-callout--stacked {
  border: 1px solid rgba(0, 187, 158, 0.2);
}

.checklist-callout__heading {
  color: var(--color-primary-900);
}

/*
 * Highlight Panel's dark theme (Bonuses hub "Online Casino Bonuses to Avoid"
 * band, over a navy-to-red gradient) - white body copy, white subheadings,
 * and intro lists marked with a circled "!" instead of a bullet.
 */
.section--highlight-panel-dark .highlight-panel__intro h3 {
  margin-top: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.section--highlight-panel-dark .highlight-panel__intro a {
  color: #fff;
  text-decoration: underline;
}

.alert-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  padding-left: 0;
}

.alert-list li {
  position: relative;
  padding-left: 1.25rem;
}

.alert-list li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid currentColor;
  border-radius: 9999px;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 0.65rem;
  text-align: center;
}

/*
 * Rich Text centers its copy in a ~768px reading column (.rich-text__measure)
 * on full-width pages. Inside `.main > .primary` the column is already
 * narrowed by the Sidebar, and Figma left-aligns these sections flush with
 * every other block (e.g. Bonuses hub "Why Online Casino's Bonuses Matter",
 * RTP "What is RTP & Why It Matters") - so drop the centering there.
 */
.main > .primary .rich-text__measure {
  max-width: none;
  margin-inline: 0;
}

@media (min-width: 1024px) {
  .main > .primary .section--rich-text .rich-text-content {
    width: 100%;
  }
}

/*
 * FAQ and Bonus Calculator center a narrow column for full-width pages.
 * Inside `.main > .primary` Figma left-aligns them like every other block
 * (Bonuses hub "Online Casino Bonuses Calculator", "FAQs of Online Casino
 * Bonuses"): FAQ items span the full column, the calculator card keeps its
 * own width but sits at the column's left edge.
 */
.main > .primary .section-col--centered {
  margin-inline: 0;
}

.main > .primary .section--faq .section-col--centered,
.main > .primary .section--bonus-calculator .section-col--centered.text-center {
  max-width: none;
  text-align: left;
}

.main > .primary .section--faq .section-heading,
.main > .primary .section--bonus-calculator .section-heading,
.section--highlight-panel .section-heading {
  text-align: left;
  font-size: 36px;
  line-height: 43px;
}

/*
 * Mobile design (Figma "M / Country / TH") drops the Sidebar entirely;
 * below 768px it would otherwise stack under the page content.
 */
@media (max-width: 767px) {
  .main > .sidebar {
    display: none;
  }
}

/*
 * Swipe rows (Figma "slider" patterns: Most Popular, Event Highlights, Real
 * Reviews, Avoid These Casinos) are Swiper sliders (web/src/components/
 * SwipeRow.tsx). Slides stretch to the tallest card in the row. A row with
 * gridFrom stops sliding at that breakpoint (Swiper is disabled there) and
 * becomes a plain grid; Swiper's inline transform and slide margins are
 * cleared so the grid lines up.
 */
@layer components {
  /* Layered so utilities on a slide (width, visibility) still apply. */
  .swipe-row .swiper-slide {
    height: auto;
    display: flex;
  }

  .swipe-row .swiper-slide > * {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (min-width: 768px) {
  .swipe-row--grid-md > .swiper-wrapper {
    display: grid;
    grid-template-columns: var(--swipe-row-cols);
    gap: var(--swipe-row-gap);
    transform: none !important;
  }
  .swipe-row--grid-md > .swiper-wrapper > .swiper-slide {
    width: auto !important;
    margin: 0 !important;
  }
}

@media (min-width: 1024px) {
  .swipe-row--grid-lg > .swiper-wrapper {
    display: grid;
    grid-template-columns: var(--swipe-row-cols);
    gap: var(--swipe-row-gap);
    transform: none !important;
  }
  .swipe-row--grid-lg > .swiper-wrapper > .swiper-slide {
    width: auto !important;
    margin: 0 !important;
  }
}

/* Figma "M / Country / TH": section headings are 30px on mobile (36px desktop). */
@media (max-width: 767px) {
  .section .section-heading,
  .main > .primary .section .section-heading {
    font-size: 30px;
    line-height: 36px;
  }
}

/* Split-layout Checklist Callout: hairline divider between label and checklist (Figma "Trust Factors" / "Safety Tips" / "Your Role"). */
@media (min-width: 640px) {
  .checklist-callout:not(.checklist-callout--stacked) .checklist-callout__items {
    border-left: 1px solid var(--color-primary-100);
    padding-left: 2rem;
  }
}

/* Nested caret-list items (e.g. Deposit Step 5 "Follow the system prompts:") use hollow circles. */
.caret-list li li::before {
  content: "\25CB";
  font-weight: normal;
  font-size: 0.75em;
  top: 0.2em;
}

.caret-list li ul {
  margin-top: 0.25rem;
}

/*
 * Admin "Divider line above" toggle (custom_class section--divider-top): the
 * full-bleed hairline Figma draws between consecutive white sections. Same
 * viewport-centering (and >=1200px Sidebar offset) as .section--bg::before;
 * uses ::after so it can sit on a section that also has a bleed background.
 */
.section--divider-top {
  position: relative;
}

.section--divider-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  background-color: var(--color-primary-50);
  transform: translateX(-50%);
  z-index: 1;
}

@media (min-width: 1200px) {
  .main > .primary .section--divider-top::after {
    transform: translateX(calc(-50% + (var(--sidebar-w) + var(--sidebar-gap)) / 2));
  }
}