/* ============================================================
   Offers listing (page-templates/offers-listing.php, C-29 FB-06, 10 Oct 2026).
   Loads after tpl-app-listing.css (hero, bands, section heads, tiles, TOC, FAQ, author,
   safer gambling) and adds the offer table, filters, offer cards, types, stake bands,
   steps, glossary and related links. Brand tokens from base.css :root.
   ============================================================ */

.ba-offers-listing [hidden] { display: none !important; }

/* Draft label (logged-in editors / unpublished pages only). */
.ba-ol-draft {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px;
	border: 1px dashed #B26B00;
	border-radius: var(--ba-radius-pill);
	background: #FFF4DE;
	color: #6B4100;
	font: 600 12px/1.4 var(--ba-font-body);
	vertical-align: middle;
}
.ba-hero__lead .ba-ol-draft { margin: 0 0 0 6px; }
.ba-ol-faq-wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--ba-gutter); }
.ba-ol-faq-wrap:empty { display: none; }
.ba-ol-faq-wrap .ba-ol-draft { margin: 24px 0 0; }

/* ---------------- Hero ---------------- */
/* Shorter hero (C-29 quick wins, 11 Oct 2026): no buttons, the facts row replaces the "At a glance" panel,
   and the "Best free bet offers for…" picks take the right column (below the copy on phones). */
.ba-ol-hero { padding: 32px 0 36px; }
.ba-ol-hero .ba-hero__inner { align-items: start; grid-template-columns: minmax(0, 1fr) 430px; gap: 40px; }
.ba-ol-hero .ba-hero__title { font-size: clamp(34px, 4.4vw, 50px); line-height: 1.08; }
.ba-ol-hero .ba-hero__updated strong { font-weight: 700; }
.ba-ol-hero .ba-hero__author-text a { color: #ffffff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ba-ol-hero .ba-hero__author-text a:hover { color: #ffffff; text-decoration-thickness: 2px; }
.ba-ol-hero .ba-hero__author-text a:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; border-radius: 4px; }
.ba-ol-hero .ba-hero__author-text a:active { opacity: .85; }
.ba-ol-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ba-ol-facts li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: var(--ba-radius-pill);
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.32);
	font: 600 13px/1.35 var(--ba-font-body);
	color: #ffffff;
}
.ba-ol-facts li::before { content: "\2713"; font-weight: 700; }

/* Quick picks panel (no buttons, no reward amounts; each pick links to its card). */
.ba-ol-picks {
	background: #ffffff;
	color: var(--ba-ink);
	border-radius: var(--ba-radius);
	box-shadow: var(--ba-shadow-lg);
	padding: 18px 18px 14px;
}
.ba-ol-picks__title { margin: 0 0 8px; padding: 0 4px; font: 700 18px/1.3 var(--ba-font-head); color: var(--ba-ink); letter-spacing: -0.01em; }
.ba-ol-picks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ba-ol-pick {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 16px;
	gap: 12px;
	align-items: center;
	padding: 6px 6px;
	border-radius: 12px;
	color: var(--ba-ink);
	text-decoration: none;
	transition: background-color .15s var(--ba-ease);
}
.ba-ol-pick:hover { background: var(--ba-teal-tint); color: var(--ba-ink); }
.ba-ol-pick:focus-visible { outline: 3px solid var(--ba-teal); outline-offset: 0; }
.ba-ol-pick:active { background: #D6ECEE; }
.ba-ol-pick__body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; min-width: 0; }
.ba-ol-pick__label { grid-column: 1 / -1; font: 700 12px/1.3 var(--ba-font-body); color: var(--ba-teal-text); }
.ba-ol-pick__brand { font: 700 15px/1.35 var(--ba-font-body); color: var(--ba-ink); white-space: nowrap; }
.ba-ol-pick__reason { font: 400 13.5px/1.35 var(--ba-font-body); color: var(--ba-ink-2); }
.ba-ol-pick__go { color: var(--ba-teal-text); font-weight: 700; text-align: center; }
.ba-ol-picks__note { margin: 8px 4px 0; font: 400 12.5px/1.45 var(--ba-font-body); color: var(--ba-muted); }

/* ---------------- Intro (now the lead of "Compare sign up offers") ---------------- */
.ba-ol-intro { margin-top: 14px; }
.ba-ol-intro p { font-size: 18px; line-height: 1.7; margin: 0 0 12px; }
.ba-ol-offers .ba-section-head { max-width: 820px; }
.ba-ol-intro + .ba-section-head__lead { margin-top: 4px; }

/* ---------------- Bands (terms) ---------------- */
.ba-ol-band {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--ba-radius-pill);
	font: 700 12px/1.3 var(--ba-font-body);
	white-space: nowrap;
	border: 1px solid transparent;
}
.ba-ol-band--easy { background: var(--ba-teal-tint); color: var(--ba-teal-text); border-color: #BFE1E4; }
.ba-ol-band--fair { background: #FFF4DE; color: #6B4100; border-color: #F3D9A4; }
.ba-ol-band--tight { background: #F1F1F1; color: var(--ba-ink-2); border-color: var(--ba-line); }
.ba-ol-band--exchange { background: #ffffff; color: var(--ba-teal-text); border-color: var(--ba-teal); }
.ba-ol-bands { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font: 400 15px/1.5 var(--ba-font-body); color: var(--ba-ink-2); }
.ba-ol-bands li { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------- Offer table ---------------- */
/* Six columns, one <tbody> per group, no sideways scroll (11 Oct 2026). Under 600px each row stacks into a
   compact block and the header row becomes a sort bar (see Responsive). */
.ba-ol-table-band { padding: 32px 0 48px; }
.ba-ol-table-band .ba-section-head { margin-bottom: 18px; }
.ba-ol-table-band .ba-section-head__lead { margin-top: 8px; font-size: 16px; line-height: 1.6; }
.ba-ol-t-wrap {
	background: #ffffff;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	box-shadow: var(--ba-shadow);
	overflow: hidden;
}
.ba-ol-t { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/1.45 var(--ba-font-body); color: var(--ba-ink-2); }
.ba-ol-t caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ba-ol-t th, .ba-ol-t td { padding: 12px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ba-line); }
.ba-ol-t thead th { background: var(--ba-cloud); font: 700 13px/1.3 var(--ba-font-body); color: var(--ba-ink); white-space: nowrap; }
.ba-ol-t tbody:last-child tr:last-child > * { border-bottom: 0; }
.ba-ol-t tbody tr[data-ol-row]:hover > * { background: #FBFBFB; }
.ba-ol-t__group th {
	background: var(--ba-teal-tint);
	font: 700 14px/1.35 var(--ba-font-body);
	color: var(--ba-ink);
	padding: 10px 14px;
}
.ba-ol-t__gcount { color: var(--ba-teal-text); }
.ba-ol-t__gnote { margin-left: 6px; font-weight: 400; font-size: 13px; color: var(--ba-ink-2); }
.ba-ol-t__sort {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	margin: -4px -6px;
	border-radius: 8px;
	font: inherit;
	color: inherit;
}
.ba-ol-t__sort::after { content: "\2195"; font-size: 11px; color: var(--ba-muted); }
.ba-ol-t__sort.is-active { color: var(--ba-teal-text); }
.ba-ol-t__sort.is-active[data-dir="asc"]::after { content: "\2191"; color: var(--ba-teal-text); }
.ba-ol-t__sort.is-active[data-dir="desc"]::after { content: "\2193"; color: var(--ba-teal-text); }
.ba-ol-t__sort:hover { background: var(--ba-teal-tint); color: var(--ba-teal-text); }
.ba-ol-t__sort:focus-visible { outline: 3px solid var(--ba-teal); outline-offset: 1px; }
.ba-ol-t__sort:active { background: #D6ECEE; }
.ba-ol-t__brand { width: 210px; font-weight: 600; }
.ba-ol-t__brandin { display: flex; align-items: flex-start; gap: 10px; }
.ba-ol-t__id { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ba-ol-t__name { font: 700 14.5px/1.3 var(--ba-font-body); color: var(--ba-ink); }
.ba-ol-t__rank { color: var(--ba-muted); font-weight: 600; }
.ba-ol-t__brand .ba-ol-band { padding: 2px 8px; font-size: 11.5px; }
.ba-ol-t__offer { min-width: 190px; }
.ba-ol-t__headline { display: block; font-weight: 600; color: var(--ba-ink); max-width: 30ch; }
.ba-ol-t__terms { display: inline-block; margin-top: 4px; font: 600 13px/1.4 var(--ba-font-body); color: var(--ba-teal-text); text-decoration: underline; text-underline-offset: 2px; }
.ba-ol-t__terms:hover { color: var(--ba-teal-hover); text-decoration-thickness: 2px; }
.ba-ol-t__terms:focus-visible { outline: 3px solid var(--ba-teal); outline-offset: 2px; border-radius: 4px; }
.ba-ol-t__terms:active { opacity: .85; }
.ba-ol-t__code code { font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--ba-cloud); border: 1px solid var(--ba-line); border-radius: 6px; padding: 2px 6px; color: var(--ba-ink); }
.ba-ol-dash { color: var(--ba-muted); font-weight: 600; }
.ba-ol-t__sortnote { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 10px; font: 400 14px/1.4 var(--ba-font-body); color: var(--ba-ink-2); }
.ba-ol-t-more { text-align: center; margin-top: 18px; }
.ba-ol-t-foot { margin: 12px 0 0; font: 400 13px/1.5 var(--ba-font-body); color: var(--ba-muted); }
.ba-ol-t-foot--dash { margin-top: 16px; color: var(--ba-ink-2); }

/* Exchange offers' own table, after the exchange cards. */
.ba-ol-t-wrap--x { margin-top: 22px; }
.ba-ol-t--x caption { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; caption-side: top; text-align: left; padding: 14px 14px 8px; font: 700 15px/1.4 var(--ba-font-head); color: var(--ba-ink); }
.ba-ol-t--x .ba-ol-t__brand { width: 180px; }

/* ---------------- Filters ---------------- */
.ba-ol-offers { padding-top: 56px; }
.ba-ol-filters {
	position: relative;
	margin: 0 0 28px;
	padding: 16px 18px;
	background: var(--ba-cloud);
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
}
.ba-ol-filters__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.ba-ol-filters__field { display: grid; gap: 6px; font: 600 13px/1.3 var(--ba-font-body); color: var(--ba-ink); min-width: 170px; flex: 1 1 170px; }
.ba-ol-filters__field select {
	min-height: 44px;
	padding: 8px 36px 8px 12px;
	border: 1px solid #CFCFCF;
	border-radius: 12px;
	background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23202020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
	font: 400 15px/1.3 var(--ba-font-body);
	color: var(--ba-ink);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s var(--ba-ease), box-shadow .15s var(--ba-ease);
}
.ba-ol-filters__field select:hover { border-color: var(--ba-teal); }
.ba-ol-filters__field select:focus-visible { outline: 3px solid var(--ba-teal); outline-offset: 1px; }
.ba-ol-pill {
	min-height: 44px;
	padding: 8px 18px;
	border: 2px solid var(--ba-teal);
	border-radius: var(--ba-radius-pill);
	background: #ffffff;
	color: var(--ba-teal-text);
	font: 600 15px/1.2 var(--ba-font-body);
	cursor: pointer;
	transition: background-color .15s var(--ba-ease), color .15s var(--ba-ease);
}
.ba-ol-pill:hover { background: var(--ba-teal-tint); }
.ba-ol-pill:focus-visible { outline: 3px solid var(--ba-teal); outline-offset: 2px; }
.ba-ol-pill:active { background: #D6ECEE; }
.ba-ol-pill[aria-pressed="true"] { background: var(--ba-teal); color: #ffffff; }
.ba-ol-pill[aria-pressed="true"]::before { content: "\2713\00a0"; }
.ba-ol-filters__status { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font: 400 14px/1.4 var(--ba-font-body); color: var(--ba-ink-2); }
.ba-ol-linkbtn {
	all: unset;
	cursor: pointer;
	color: var(--ba-teal-text);
	font: 600 14px/1.4 var(--ba-font-body);
	text-decoration: underline;
	text-underline-offset: 2px;
	border-radius: 4px;
}
.ba-ol-linkbtn:hover { color: var(--ba-teal-hover); }
.ba-ol-linkbtn:focus-visible { outline: 3px solid var(--ba-teal); outline-offset: 2px; }
.ba-ol-noresults { margin: 8px 0 0; padding: 18px; background: var(--ba-cloud); border-radius: var(--ba-radius-sm); font: 400 16px/1.5 var(--ba-font-body); }

/* ---------------- Groups and cards ---------------- */
.ba-ol-group + .ba-ol-group { margin-top: 44px; }
.ba-ol-group__title { margin: 0 0 6px; font: 700 22px/1.25 var(--ba-font-head); color: var(--ba-ink); letter-spacing: -0.01em; }
.ba-ol-group__count { font-weight: 600; color: var(--ba-muted); font-size: 18px; }
.ba-ol-group__lead { margin: 0 0 16px; max-width: 760px; font: 400 16px/1.6 var(--ba-font-body); color: var(--ba-ink-2); }
.ba-ol-group__title + .ba-ol-cards { margin-top: 16px; }
.ba-ol-cards { display: grid; gap: 22px; }
.ba-ol-more { display: flex; margin: 24px auto 0; }

.ba-ol-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	padding: 24px;
	background: #ffffff;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	box-shadow: var(--ba-shadow);
	scroll-margin-top: calc(var(--ba-header-h) + 70px);
}
@media (min-width: 961px) {
	/* Taller cards keep at most two gradient CTAs in a 1280x800 viewport (CLAUDE.md: never more than 2). */
	/* 430, not 380: the Visit button's height in the card varies by up to ~60px (review link, legal line wrap). */
	.ba-ol-card { min-height: 430px; }
}
.ba-ol-card:target { border-color: var(--ba-teal); box-shadow: 0 0 0 3px var(--ba-teal-tint), var(--ba-shadow); }
.ba-ol-card__head { display: flex; align-items: flex-start; gap: 12px; }
.ba-ol-card__id { min-width: 0; }
/* Q7: the H3 holds "1. Brand" and the verbatim headline on two lines (a hidden ": " joins them for readers and search). */
.ba-ol-card__title { margin: 0; }
.ba-ol-card__brand { display: block; margin: 0; font: 700 20px/1.25 var(--ba-font-head); color: var(--ba-ink); letter-spacing: -0.01em; }
.ba-ol-card__pos { color: var(--ba-muted); font-weight: 700; }
.ba-ol-card__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 400 13px/1.4 var(--ba-font-body); color: var(--ba-muted); }
.ba-ol-card__type { color: var(--ba-ink-2); }
.ba-ol-card__checked { display: inline-flex; align-items: center; gap: 5px; }
.ba-ol-card__checked::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ba-teal); }
.ba-ol-card__headline { display: block; margin: 6px 0 0; font: 800 21px/1.3 var(--ba-font-head); color: var(--ba-ink); letter-spacing: -0.01em; }
/* Significant terms: same size as body text (CAP/ASA prominence; plan 4.7). Shortened only on phones, only when the
   chips show the qualifying bet, odds and expiry, and only once JS has added the "Show full terms" toggle (Q7). */
.ba-ol-card__terms { margin: 14px 0 0; font: 400 16px/1.6 var(--ba-font-body); color: var(--ba-ink-2); }
.ba-ol-card__terms.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.ba-ol-card__more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; margin: 0; padding: 0 2px; background: none; border: 0; border-radius: 6px; font: 600 15px/1.4 var(--ba-font-body); color: var(--ba-teal-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ba-ol-card__more:hover { color: var(--ba-teal-hover); text-decoration-thickness: 2px; }
.ba-ol-card__more:focus-visible { outline: 2px solid var(--ba-teal); outline-offset: 2px; }
.ba-ol-card__more:active { background: var(--ba-teal-tint); }
.ba-ol-card__more[hidden] { display: none; }
.ba-ol-card__lines { margin: 14px 0 0; display: grid; gap: 8px; }
.ba-ol-card__lines div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font: 400 15px/1.5 var(--ba-font-body); }
.ba-ol-card__lines dt { font-weight: 600; color: var(--ba-ink); }
.ba-ol-card__lines dd { margin: 0; color: var(--ba-ink-2); }
.ba-ol-card__watch { margin: 12px 0 0; padding: 10px 12px; background: var(--ba-teal-tint); border-radius: 12px; font: 400 15px/1.5 var(--ba-font-body); color: var(--ba-ink); }

.ba-ol-card__side { display: flex; flex-direction: column; gap: 16px; padding-left: 24px; border-left: 1px solid var(--ba-line); }
.ba-ol-card__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ba-ol-chip {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px 12px;
	background: var(--ba-cloud);
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius-pill);
	font: 400 13px/1.35 var(--ba-font-body);
	color: var(--ba-ink);
}
.ba-ol-chip__k { font-weight: 700; }
.ba-ol-card__actions { display: grid; gap: 10px; margin-top: auto; }
.ba-ol-card__actions .ba-btn { width: 100%; text-align: center; }
/* Q7: review and offer-page links as text links on one line (one button per card). */
.ba-ol-card__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin: 0; font: 600 14px/1.4 var(--ba-font-body); }
.ba-ol-card__links a { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--ba-teal-text); text-decoration: underline; text-underline-offset: 3px; border-radius: 6px; }
.ba-ol-card__links a:hover { color: var(--ba-teal-hover); text-decoration-thickness: 2px; }
.ba-ol-card__links a:focus-visible { outline: 2px solid var(--ba-teal); outline-offset: 2px; }
.ba-ol-card__links a:active { background: var(--ba-teal-tint); }
.ba-ol-card__legal { margin: 0; font: 400 12.5px/1.5 var(--ba-font-body); color: var(--ba-muted); text-align: center; }
.ba-ol-card__legal strong { color: var(--ba-ink); }
.ba-ol-card__legal a { color: var(--ba-teal-text); }

/* ---------------- Method ---------------- */
.ba-ol-method .ba-prose { max-width: 820px; }
.ba-ol-method .ba-prose p { font-size: 17px; line-height: 1.7; }

/* ---------------- Types tiles ---------------- */
.ba-ol-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.ba-ol-tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	background: #ffffff;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius);
	box-shadow: var(--ba-shadow);
}
.ba-ol-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: var(--ba-teal-tint); color: var(--ba-teal-text); margin-bottom: 6px; }
.ba-ol-tile__icon svg { fill: currentColor; }
.ba-ol-tile__title { margin: 0; font: 700 18px/1.3 var(--ba-font-head); color: var(--ba-ink); }
.ba-ol-tile__count { margin: 0; font: 700 14px/1.4 var(--ba-font-body); color: var(--ba-teal-text); }
.ba-ol-tile__brands { margin: 0; font: 400 15px/1.5 var(--ba-font-body); color: var(--ba-ink-2); }
.ba-ol-tile__link { margin-top: auto; padding-top: 8px; font: 600 15px/1.4 var(--ba-font-body); color: var(--ba-teal-text); text-decoration: none; }
.ba-ol-tile__link:hover { color: var(--ba-teal-hover); text-decoration: underline; }
.ba-ol-tile__link:active { opacity: .85; }

/* ---------------- Offers by stake ---------------- */
.ba-ol-stake__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ba-ol-stake__col { padding: 20px; background: #ffffff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius); box-shadow: var(--ba-shadow); display: flex; flex-direction: column; }
.ba-ol-stake__title { margin: 0 0 12px; font: 700 18px/1.3 var(--ba-font-head); color: var(--ba-ink); }
.ba-ol-stake__title span { color: var(--ba-muted); font-weight: 600; }
.ba-ol-stake__list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.ba-ol-stake__list a {
	display: grid;
	grid-template-columns: 34px 1fr;
	grid-template-rows: auto auto;
	column-gap: 10px;
	padding: 8px;
	margin: 0 -8px;
	border-radius: 12px;
	text-decoration: none;
	color: var(--ba-ink);
	transition: background-color .15s var(--ba-ease);
}
.ba-ol-stake__list a:hover { background: var(--ba-cloud); }
.ba-ol-stake__list a:focus-visible { outline: 3px solid var(--ba-teal); outline-offset: 0; }
.ba-ol-stake__list .ba-tile { grid-row: 1 / 3; }
.ba-ol-stake__name { font: 700 15px/1.3 var(--ba-font-body); }
.ba-ol-stake__offer { font: 400 14px/1.4 var(--ba-font-body); color: var(--ba-ink-2); }

/* ---------------- How to claim ---------------- */
.ba-ol-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; counter-reset: none; }
.ba-ol-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 20px; background: #ffffff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius); box-shadow: var(--ba-shadow); }
.ba-ol-step__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ba-teal); color: #ffffff; font: 800 17px/1 var(--ba-font-head); }
.ba-ol-step__title { margin: 6px 0 6px; font: 700 18px/1.3 var(--ba-font-head); color: var(--ba-ink); }
.ba-ol-step__text { margin: 0; font: 400 16px/1.6 var(--ba-font-body); color: var(--ba-ink-2); }
.ba-ol-claim .ba-section-head .ba-ol-draft,
.ba-ol-glossary .ba-section-head .ba-ol-draft { margin: 12px 0 0; }

/* ---------------- Glossary ---------------- */
.ba-ol-gloss { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ba-ol-gloss__item { padding: 18px 20px; background: #ffffff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius-sm); }
.ba-ol-gloss dt { font: 700 17px/1.3 var(--ba-font-head); color: var(--ba-ink); }
.ba-ol-gloss dd { margin: 6px 0 0; font: 400 16px/1.6 var(--ba-font-body); color: var(--ba-ink-2); }

/* ---------------- Safer gambling note ---------------- */
.ba-ol-safer-note { background: var(--wash-rgs); padding: 40px 0 0; }
.ba-ol-safer-note p { margin: 0; max-width: 760px; font: 400 17px/1.65 var(--ba-font-body); color: var(--ba-ink); }
.ba-ol-safer-note + .ba-band--rgs { padding-top: 28px; }

/* ---------------- Related ---------------- */
.ba-ol-related { padding: 48px 0; }
.ba-ol-related__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ba-ol-related__list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--ba-line);
	border-radius: var(--ba-radius-pill);
	background: #ffffff;
	font: 600 15px/1.3 var(--ba-font-body);
	color: var(--ba-teal-text);
	text-decoration: none;
	transition: border-color .15s var(--ba-ease), background-color .15s var(--ba-ease);
}
.ba-ol-related__list a:hover { border-color: var(--ba-teal); background: var(--ba-teal-tint); color: var(--ba-teal-hover); }
.ba-ol-related__list a:active { background: #D6ECEE; }

/* ---------------- Filter toggle (phones) ---------------- */
.ba-ol-filters__toggle { display: none; }

/* ---------------- Stake groups: key terms beside each headline ---------------- */
.ba-ol-stake__terms { grid-column: 2; margin-top: 3px; font: 400 13px/1.45 var(--ba-font-body); color: var(--ba-muted); }

/* ---------------- What is a free bet? ---------------- */
.ba-ol-whatis__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; }
.ba-ol-whatis__text p { font-size: 18px; line-height: 1.7; }
.ba-ol-returns { background: #ffffff; border: 1px solid var(--ba-line); border-radius: var(--ba-radius); box-shadow: var(--ba-shadow); overflow: hidden; }
.ba-ol-returns__t { width: 100%; border-collapse: collapse; font: 400 15px/1.45 var(--ba-font-body); color: var(--ba-ink-2); }
.ba-ol-returns__t caption { caption-side: top; text-align: left; padding: 14px 16px 10px; font: 700 15px/1.4 var(--ba-font-head); color: var(--ba-ink); }
.ba-ol-returns__t th, .ba-ol-returns__t td { padding: 10px 16px; border-top: 1px solid var(--ba-line); text-align: left; }
.ba-ol-returns__t thead th { background: var(--ba-cloud); font: 700 13px/1.3 var(--ba-font-body); color: var(--ba-ink); }
.ba-ol-returns__t tbody th { font-weight: 600; color: var(--ba-ink); white-space: nowrap; }
.ba-ol-returns__t td:last-child { font-weight: 700; color: var(--ba-ink); }

/* Placeholders for Daniel's own words (editors and unpublished previews only; never printed for visitors). */
.ba-ol-placeholder { padding: 16px 18px; border: 2px dashed #B26B00; border-radius: var(--ba-radius-sm); background: #FFF4DE; color: #6B4100; }
.ba-ol-placeholder p { margin: 0; font: 400 15px/1.55 var(--ba-font-body) !important; }

/* ---------------- Free bets on apps, no deposit ---------------- */
.ba-ol-apps__text, .ba-ol-nodep__text { max-width: 820px; }
.ba-ol-nodep__text p, .ba-ol-apps__text p { font-size: 18px; line-height: 1.7; }
.ba-ol-nodep { padding: 48px 0; }

/* ---------------- Phones: shorter hero, stacked table rows, folded filters ---------------- */
@media (max-width: 860px) {
	.ba-ol-hero .ba-hero__inner { gap: 22px; }
	.ba-ol-whatis__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
	.ba-ol-hero { padding: 26px 0 28px; }
	.ba-ol-hero .ba-hero__title { font-size: 32px; }
	.ba-ol-hero .ba-hero__lead { font-size: 16.5px; margin-top: 12px; }
	.ba-ol-hero .ba-hero__meta { margin-top: 14px; }
	.ba-ol-facts { display: none; }
	.ba-ol-picks { padding: 14px 12px 10px; }
	.ba-ol-picks__title { font-size: 17px; }
	.ba-ol-pick { padding: 7px 4px; gap: 10px; }

	.ba-ol-table-band { padding: 28px 0 36px; }
	.ba-ol-t-wrap { border-radius: var(--ba-radius-sm); }
	.ba-ol-t, .ba-ol-t thead, .ba-ol-t tbody, .ba-ol-t tr, .ba-ol-t th, .ba-ol-t td { display: block; }
	.ba-ol-t thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; background: var(--ba-cloud); border-bottom: 1px solid var(--ba-line); }
	.ba-ol-t thead tr::before { content: "Sort by"; margin-right: 2px; font: 600 13px/1.3 var(--ba-font-body); color: var(--ba-muted); }
	.ba-ol-t thead th { padding: 0; border: 0; background: none; }
	.ba-ol-t thead .ba-ol-t__h-offer, .ba-ol-t thead .ba-ol-t__h-code { display: none; }
	.ba-ol-t thead .ba-ol-t__sort { margin: 0; min-height: 40px; box-sizing: border-box; padding: 6px 12px; border: 1px solid var(--ba-line); border-radius: var(--ba-radius-pill); background: #ffffff; font: 600 13px/1.2 var(--ba-font-body); }
	.ba-ol-t--x thead { display: none; }
	.ba-ol-t__group th { padding: 9px 12px; border-bottom: 1px solid var(--ba-line); }
	.ba-ol-t__gnote { display: block; margin: 2px 0 0; font-size: 12.5px; }
	.ba-ol-t tbody tr:not(.ba-ol-t__group) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; padding: 9px 12px; border-bottom: 1px solid var(--ba-line); }
	.ba-ol-t tbody tr:not(.ba-ol-t__group) > * { padding: 0; border: 0; }
	.ba-ol-t tbody:last-child tr:last-child { border-bottom: 0; }
	.ba-ol-t__brand, .ba-ol-t__offer { flex: 1 1 100%; width: auto; min-width: 0; }
	.ba-ol-t__brandin { align-items: center; gap: 8px; }
	.ba-ol-t__brand .ba-tile--xs { width: 26px; height: 26px; border-radius: 7px; }
	.ba-ol-t__id { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
	.ba-ol-t__headline { display: inline; max-width: none; font-size: 14.5px; }
	.ba-ol-t__terms { display: inline; margin: 0 0 0 6px; white-space: nowrap; }
	.ba-ol-t__kt { flex: 0 1 auto; font-size: 13px; line-height: 1.4; color: var(--ba-ink-2); }
	.ba-ol-t__code--none { display: none !important; }
	.ba-ol-t__kt::before { content: attr(data-label) " "; font-weight: 600; color: var(--ba-muted); }
	.ba-ol-t__code code { font-size: 12.5px; padding: 1px 5px; }
	.ba-ol-t--x caption { display: block; width: auto; padding: 12px 12px 6px; }

	.ba-ol-filters { padding: 10px 12px; }
	.ba-ol-filters__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 44px;
		padding: 0 4px;
		border: 0;
		background: none;
		font: 700 15px/1.2 var(--ba-font-body);
		color: var(--ba-teal-text);
		cursor: pointer;
	}
	.ba-ol-filters__toggle::after { content: "\25BE"; font-size: 14px; transition: transform .15s var(--ba-ease); }
	.ba-ol-filters__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
	.ba-ol-filters__toggle:hover { color: var(--ba-teal-hover); }
	.ba-ol-filters__toggle:focus-visible { outline: 3px solid var(--ba-teal); outline-offset: 2px; border-radius: 8px; }
	.ba-ol-filters__toggle:active { opacity: .85; }
	.ba-ol-filters:not(.is-open) .ba-ol-filters__row { display: none; }
	.ba-ol-filters.is-open .ba-ol-filters__row { margin-top: 8px; }
	.ba-ol-filters__status { margin-top: 6px; }
	.ba-ol-intro p { font-size: 17px; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
	.ba-ol-card { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.ba-ol-card__side { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--ba-line); }
	.ba-ol-stake__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
	.ba-ol-hero .ba-hero__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	/* Q7 phones: one column in reading order: title, key-term chips, terms (+ toggle), lines, button, links, legal.
	   The two desktop columns step aside (display: contents) so the chips sit right under the headline. */
	.ba-ol-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
	.ba-ol-card__main, .ba-ol-card__side { display: contents; }
	.ba-ol-card__head { order: 1; }
	.ba-ol-card__chips { order: 2; gap: 6px; }
	.ba-ol-card__terms { order: 3; margin: 0; }
	.ba-ol-card__more { order: 4; margin-top: -8px; }
	.ba-ol-card__lines { order: 5; margin: 0; gap: 6px; }
	.ba-ol-card__watch { order: 6; margin: 0; }
	.ba-ol-card__actions { order: 7; gap: 4px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--ba-line); }
	.ba-ol-card__legal { order: 8; }
	.ba-ol-card__brand { font-size: 18px; }
	.ba-ol-card__headline { font-size: 19px; margin-top: 4px; }
	.ba-ol-card__lines div { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 14.5px; }
	.ba-ol-gloss { grid-template-columns: minmax(0, 1fr); }
	.ba-ol-steps { grid-template-columns: minmax(0, 1fr); }
	.ba-ol-filters__field { flex-basis: 100%; }
	.ba-ol-pill { width: 100%; }
	.ba-ol-related { padding: 36px 0; }
	.ba-ol-hero .ba-hero__divider { display: none; }
	.ba-ol-hero .ba-hero__meta { gap: 10px 16px; }
}

/* ---------------- Rendering: content-visibility (11 Oct 2026; revised 12 Oct 2026) ----------------
   Daniel's decisions of 12 Oct 2026 (docs/theme-rebuild/perf-lcp-2026-10-10.md addenda 3 and 4):
   - ON for the data-heavy parts: the card list in each offer group (#offers-main/-lower/-exchange .ba-ol-cards;
     the group headings stay drawn), by stake, offer types, author, related.
   - OFF for sections people browse by heading (Chrome drops headings inside a skipped section from the
     accessibility tree): what is a free bet, free bets on apps, how to claim, no deposit, terms explained,
     safer gambling, FAQ.
   - Never on the hero and quick picks, the offer table (#offer-table) or "How we check and order".
   contain-intrinsic-size sets the CONTENT box (the element's padding is added on top), so each estimate is the
   real content height on /free-bets/ (Puppeteer, 11-12 Oct 2026) at 375 (default) and 1280 (768px and up);
   `auto` then remembers the drawn size. The lower group is measured collapsed (6 of 21 cards). The phone terms
   clamp in offers-listing.js waits until a skipped card is drawn before measuring it.
   Print: tpl-app-listing.css draws everything. */
.ba-offers-listing #offers-main > .ba-ol-cards { content-visibility: auto; contain-intrinsic-size: auto 11080px; }
.ba-offers-listing #offers-lower > .ba-ol-cards { content-visibility: auto; contain-intrinsic-size: auto 4085px; }
.ba-offers-listing #offers-exchange > .ba-ol-cards { content-visibility: auto; contain-intrinsic-size: auto 2235px; }
.ba-offers-listing > #by-stake { content-visibility: auto; contain-intrinsic-size: auto 1910px; }
.ba-offers-listing > #offer-types { content-visibility: auto; contain-intrinsic-size: auto 1025px; }
.ba-offers-listing > #author { content-visibility: auto; contain-intrinsic-size: auto 370px; }
.ba-offers-listing > #related { content-visibility: auto; contain-intrinsic-size: auto 375px; }
@media (min-width: 768px) {
	.ba-offers-listing #offers-main > .ba-ol-cards { contain-intrinsic-size: auto 6320px; }
	.ba-offers-listing #offers-lower > .ba-ol-cards { contain-intrinsic-size: auto 2690px; }
	.ba-offers-listing #offers-exchange > .ba-ol-cards { contain-intrinsic-size: auto 1335px; }
	.ba-offers-listing > #by-stake { contain-intrinsic-size: auto 950px; }
	.ba-offers-listing > #offer-types { contain-intrinsic-size: auto 325px; }
	.ba-offers-listing > #author { contain-intrinsic-size: auto 170px; }
	.ba-offers-listing > #related { contain-intrinsic-size: auto 170px; }
}