/*
 * Log24 – Plebiscyt.
 * Styled to sit inside the Log24 theme (Bootstrap 4 + main.css): "titleNormal"-style headings, flat boxes,
 * 1110 px banner slot. The accent colour is dark gold (#a87040) and comes from Plebiscyt → Ustawienia → Kolor akcentu
 * (printed as --l24p-accent); the fallbacks below only matter if that inline style is missing.
 * Everything is scoped to our own classes; the few poll-page-only overrides of the theme (page background, title colour) are printed inline.
 */

.l24p, .l24p-page, .l24p-results, .l24p-banner, .l24p-tile, .l24p-box, .l24p-comments { --_a: var(--l24p-accent, #a87040); --_d: #7e5026; --_t: #f8f2ec; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.l24p, .l24p-page, .l24p-results, .l24p-banner, .l24p-tile, .l24p-box {
		--_d: color-mix(in srgb, var(--_a) 72%, #000);
		--_t: color-mix(in srgb, var(--_a) 9%, #fff); /* faint tint of the accent for panels */
	}
}
.l24p *, .l24p-results *, .l24p-banner *, .l24p-tile *, .l24p-box * { box-sizing: border-box; }
.l24p [hidden], .l24p-results[hidden], .l24p-banner[hidden], .l24p-banner [hidden], .l24p-tile[hidden], .l24p-tile [hidden], .l24p-box [hidden], .l24p-boxcell[hidden] { display: none !important; }

/* ------------------------------------------------------- poll page: background, title, hero graphic */

/* Public comments are independent of the voting form and the results gate. */
.l24p-comments { margin: 44px 0; color: #212529; }
.l24p-comments *, .l24p-comments *::before, .l24p-comments *::after { box-sizing: border-box; }
.l24p-comments [hidden] { display: none !important; }
.l24p-comments .l24p-comments__title { position: relative; display: block; margin: 0 0 30px; padding-bottom: 5px; font-size: 24px; line-height: 1.2; font-weight: 700; text-transform: uppercase; color: var(--_a); }
.l24p-comments .l24p-comments__title::before { content: " "; position: absolute; right: 0; bottom: -10px; width: 75%; height: 1px; background: var(--_a); }
.l24p-comments__viewport { height: 680px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; border: 1px solid #e3d8cc; padding: 20px 24px 4px; background: #fff; overflow-anchor: none; }
.l24p-comments__viewport.is-expanded { height: 1020px; }
.l24p-comments__viewport:focus-visible { outline: 2px solid var(--_a); outline-offset: 3px; }
.l24p-comment-group { margin: 0; padding: 0; border: 0; background: none; }
.l24p-comment-group + .l24p-comment-group { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e3d8cc; }
.l24p-comments .l24p-comment-group__name { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid #eee6de; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--_a); overflow-wrap: anywhere; }
.l24p-comment { position: relative; margin: 0 0 20px; }
.l24p-comment-part { position: relative; }
.l24p-comment-part.is-proposal { padding: 8px 12px; margin-bottom: 8px; background: #faf6f1; border-left: 2px solid var(--_a); }
.l24p-comments .l24p-comment-part.is-proposal .l24p-comment__toggle { right: 12px; bottom: 8px; background: #faf6f1; box-shadow: -8px 0 6px #faf6f1; }
.l24p-comments .l24p-comment__option { display: inline; margin: 0; padding: 0; font: inherit; font-weight: 700; color: #6d6258; }
.l24p-comments .l24p-comment__text {
	margin: 0; padding: 0; font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 3.2em; overflow: hidden;
}
.l24p-comments .l24p-comment__text.is-expanded { display: block; -webkit-line-clamp: unset; line-clamp: unset; max-height: none; overflow: visible; }
/* Leave room after the complete text so the right-aligned control never covers the last words. */
.l24p-comments .l24p-comment__text.is-expanded::after { content: ""; display: inline-block; width: 112px; height: 1em; }
.l24p-comments .l24p-comment__toggle {
	position: absolute; right: 0; bottom: 0; display: inline-block; width: 112px; margin: 0; padding: 0 0 0 12px; text-align: right;
	border: 0; background: #fff; box-shadow: -8px 0 6px #fff; color: var(--_d);
	font: inherit; font-size: 14px; line-height: 25.6px; white-space: nowrap; text-decoration: underline; cursor: pointer;
}
.l24p-comments button:focus-visible { outline: 2px solid var(--_d); outline-offset: 4px; }
.l24p-comments__status { margin: 12px 0; min-height: 1.5em; color: #626262; font-size: 14px; line-height: 1.5; }
.l24p-comments__status:empty { display: none; }
.l24p-comments__sentinel { height: 1px; }
.l24p-public-comment-notice { margin: 0 0 18px; color: #5c5044; font-size: 14px; line-height: 1.5; }
@media (max-width: 600px) {
	.l24p-comments__viewport { height: 520px; padding: 16px 16px 0; }
	.l24p-comments__viewport.is-expanded { height: 780px; }
	.l24p-comments .l24p-comments__title { font-size: 21px; }
}

/* The faint warm page background and the accent-coloured page title (the theme's h1.titleNormal) are printed inline on the
 * poll page by L24P_Frontend::poll_page_css() – not here, so they do not depend on the theme printing a body class. */

.l24p-hero { margin: 0 0 30px; line-height: 0; }
.l24p-hero img { display: block; width: 100%; max-width: 1110px; height: auto; margin: 0 auto; }

/* ------------------------------------------------------- page typography */

.l24p-page { margin-bottom: 40px; }

/* same look as the theme's h2.titleNormal, in the accent colour: uppercase, thin line to the right */
.l24p-page > h2, .l24p-lead > h2, h2#regulamin {
	position: relative; display: block; margin: 44px 0 30px; padding-bottom: 5px;
	font-size: 24px; font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--l24p-accent, #a87040);
}
.l24p-page > h2::before, .l24p-lead > h2::before, h2#regulamin::before {
	content: " "; position: absolute; right: 0; bottom: -10px; width: 75%; height: 1px; background: var(--l24p-accent, #a87040);
}
.l24p-page > h2:first-child { margin-top: 0; }
.l24p-page > p.l24p-intro, p.l24p-intro { font-size: 20px; line-height: 1.4; }
/* "#regulamin ~ h3" keeps the rules readable even if the theme does not let us wrap the page */
.l24p-page > h3, h2#regulamin ~ h3 { margin: 28px 0 10px; font-size: 18px; font-weight: 700; color: #212529; }
.l24p-page > ol > li, .l24p-page > ul > li { margin-bottom: 4px; }

/* ------------------------------------------------------------------ form */

.l24p { margin: 30px 0; color: #212529; }
.l24p-lead { margin-bottom: 30px; }

/* ---- two steps, accordion style: 1) data, 2) answers. One is open, the other slides shut. ---- */

.l24p-step { margin: 0 0 14px; border: 1px solid #ddd; background: #fff; scroll-margin-top: 190px; transition: border-color .2s; }
.l24p-step.is-open { border-color: var(--_a); }
.l24p-step__head { margin: 0; padding: 0; font-size: inherit; line-height: 1.3; }
.l24p .l24p-step__toggle {
	display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 16px 20px;
	border: 0; border-radius: 0; background: none; text-align: left; font: inherit; color: #212529; cursor: pointer;
}
.l24p-step__num {
	flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	background: var(--_a); color: #fff; font-size: 16px; font-weight: 700; transition: background-color .2s;
}
.l24p-step__title { flex: none; font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--_a); }
.l24p-step__summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #6c757d; }
.l24p-step__summary strong { color: var(--_d); }
.l24p-step.is-open .l24p-step__summary:not(.l24p-step__summary--count) { display: none; }
.l24p-step__edit { display: none; flex: none; font-size: 14px; font-weight: 700; color: var(--_d); text-decoration: underline; }
.l24p-step.is-done:not(.is-open) .l24p-step__edit { display: inline; }
.l24p-step.is-done:not(.is-open) .l24p-step__num { background: #2e9e5b; }
.l24p-step.is-locked:not(.is-open) .l24p-step__num { background: #b5b5b5; }
.l24p-step.is-locked:not(.is-open) .l24p-step__title { color: #8a8a8a; }
.l24p-step.is-locked .l24p-chevron { display: none; }
.l24p-step__body { padding: 4px 20px 24px; }

.l24p-chevron {
	flex: none; width: 10px; height: 10px; margin: -4px 4px 0 auto; color: inherit;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s, margin .3s;
}
.l24p-step .l24p-chevron { color: var(--_a); }
.l24p-step.is-open .l24p-chevron { margin-top: 4px; transform: rotate(-135deg); }

/* height animation without measuring: grid row 0fr -> 1fr */
.l24p-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.l24p-collapse.is-open, .l24p-step.is-open > .l24p-collapse { grid-template-rows: 1fr; }
.l24p-collapse__inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .35s; }
.l24p-collapse.is-open > .l24p-collapse__inner, .l24p-step.is-open > .l24p-collapse > .l24p-collapse__inner { visibility: visible; transition-delay: 0s; }

.l24p .l24p-link { margin: 0 0 0 auto; padding: 8px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: #6c757d; text-decoration: underline; cursor: pointer; }
.l24p .l24p-link:hover { color: var(--_d); }

@media (max-width: 640px) {
	.l24p .l24p-step__toggle { padding: 14px; gap: 10px; }
	.l24p-step__title { font-size: 17px; }
	.l24p-step__summary:not(.l24p-step__summary--count) { display: none; }
	.l24p-step__body { padding: 4px 14px 20px; }
}

/* ---- rules: heading + "Pokaż więcej" toggle, folded by the script (visible without JavaScript) ---- */
.l24p-more {
	display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 6px; padding: 8px 0; border: 0; background: none;
	font: inherit; font-size: 16px; font-weight: 700; color: var(--l24p-accent, #a87040); cursor: pointer;
}
.l24p-more .l24p-chevron { margin: -4px 0 0; }
.l24p-more.is-open .l24p-chevron { margin-top: 4px; transform: rotate(-135deg); }
.l24p-rules__body { padding-top: 4px; }
.l24p-rules__body > h3 { margin: 28px 0 10px; font-size: 18px; font-weight: 700; color: #212529; }
.l24p-rules__body > h3:first-child { margin-top: 10px; }
.l24p-rules__body > ol > li, .l24p-rules__body > ul > li { margin-bottom: 4px; }
h2#regulamin { scroll-margin-top: 190px; }

.l24p-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
@media (max-width: 640px) { .l24p-fields { grid-template-columns: 1fr; } }

.l24p-field label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.l24p-opt { font-weight: 400; color: #6c757d; }
.l24p-req { color: var(--_a); }

.l24p input[type="text"], .l24p input[type="email"], .l24p input[type="tel"], .l24p textarea {
	display: block; width: 100%; margin: 0; padding: 8px 12px;
	font: inherit; font-size: 16px; line-height: 1.4; color: #212529;
	background: #fff; border: 1px solid #ccc; border-radius: 3px; box-shadow: none;
}
.l24p input[type="text"], .l24p input[type="email"], .l24p input[type="tel"] { height: 42px; }
.l24p textarea { min-height: 90px; resize: vertical; }
.l24p input:focus-visible, .l24p textarea:focus-visible, .l24p-submit:focus-visible {
	outline: 3px solid rgba(168, 112, 64, .35); outline-offset: 1px; border-color: var(--_a);
}
.l24p [aria-invalid="true"] { border-color: #b3261e; background: #fff8f8; }
.l24p-field__error { margin: 6px 0 0; font-size: 14px; color: #b3261e; }

/* honeypot – off-screen, not display:none (some bots skip those) */
.l24p-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* options */
.l24p-counter { margin: 0 0 14px; font-size: 15px; color: #6c757d; }
.l24p-counter strong { color: var(--_d); font-size: 1.15em; }
.l24p-counter--inline { margin: 0 0 0 20px; }

.l24p-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.l24p-option { margin: 0; border: 1px solid #ddd; border-radius: 3px; background: #fff; transition: border-color .15s, background-color .15s; }
.l24p-option:hover { border-color: #aaa; }
.l24p-option.is-checked { border-color: var(--_a); background: var(--_t); }
.l24p-option.is-disabled { opacity: .5; }
/* 7th pick refused: the dimmed option explains itself, the picked ones flash */
.l24p-option.is-disabled.has-limit { opacity: 1; border-color: var(--_d); }
.l24p-limit-note {
	margin: 0; padding: 10px 16px 12px 52px; border-top: 1px solid var(--_a); background: var(--_t);
	font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--_d);
}
@media (max-width: 640px) { .l24p-limit-note { padding-left: 16px; } }
.l24p-option.is-flash { animation: l24p-flash 1.4s ease-out 1; }
@keyframes l24p-flash {
	0%, 40% { box-shadow: 0 0 0 3px rgba(168, 112, 64, .5); background: #f1e0cf; }
	100% { box-shadow: 0 0 0 0 rgba(168, 112, 64, 0); }
}
.l24p #l24p-custom { min-height: 76px; }

.l24p .l24p-option__head {
	display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 14px 16px;
	font-size: 16px; font-weight: 400; cursor: pointer; max-width: none;
}
.l24p-option.is-disabled .l24p-option__head { cursor: not-allowed; }
.l24p .l24p-option__head input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--_a); cursor: inherit; }
.l24p-option__num { flex: none; min-width: 1.7em; font-weight: 700; color: var(--_d); font-variant-numeric: tabular-nums; }
.l24p-option__text { flex: 1 1 auto; line-height: 1.45; }
.l24p-option__extra { display: grid; gap: 14px; padding: 0 16px 16px 52px; }
@media (max-width: 640px) { .l24p-option__extra { padding-left: 16px; } }

/* consent, errors, submit */
.l24p-consent { margin: 24px 0 22px; }
.l24p .l24p-consent label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; font-weight: 400; cursor: pointer; max-width: none; }
.l24p .l24p-consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--_a); }
.l24p-privacy { margin: 10px 0 0 30px; font-size: 13px; color: #6c757d; }
.l24p-privacy--step1 { margin: 18px 0 20px; }

.l24p-turnstile { margin: 0 0 18px; }

.l24p-errors { margin: 0 0 20px; padding: 12px 16px; border-left: 4px solid #b3261e; background: #fdf0ef; color: #7a1913; }
.l24p-errors ul { margin: 0; padding-left: 18px; }
.l24p-errors:focus { outline: none; }

.l24p-actions { display: flex; align-items: center; flex-wrap: wrap; }
.l24p .l24p-submit {
	display: inline-block; height: 50px; margin: 0; padding: 0 38px; border: 0; border-radius: 5px;
	background: var(--_a); color: #fff; font: inherit; font-size: 18px; font-weight: 700; line-height: 50px;
	text-transform: uppercase; cursor: pointer; transition: background-color .2s;
}
.l24p .l24p-submit:hover { background: var(--_d); }
.l24p .l24p-submit[disabled] { opacity: .6; cursor: progress; }

.l24p-thanks { margin: 0 0 30px; padding: 26px 28px; border-left: 4px solid #2e9e5b; background: #f1faf4; }
.l24p-thanks h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.l24p-thanks p { margin: 0; white-space: pre-line; }
.l24p-thanks:focus { outline: none; }

/* ------------------------------------------------- "voting is over" notice
 * Sits on top of the results box on the poll page (or alone, where there is no results box). */

.l24p-closed-banner {
	margin: 0 0 26px; padding: 22px 28px; background: #141518; color: #fff; border-left: 4px solid var(--_a, #a87040);
}
.l24p-closed-banner__kicker { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #dcc0a0; }
.l24p-closed-banner .l24p-closed-banner__msg { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; color: #fff; white-space: pre-line; }
.l24p-closed-banner[hidden] { display: none !important; }

/* ----------------------------------------------------------- results box */

.l24p-results { margin: 30px 0 40px; padding: 24px 28px 20px; background: var(--_t); border-left: 4px solid var(--_a); color: #212529; }
.l24p-results .l24p-results__title { margin: 0 0 2px; font-size: 20px; font-weight: 700; line-height: 1.3; text-transform: uppercase; color: var(--_a); }
.l24p-results__sub { margin: 0 0 18px; color: #6c757d; }
.l24p-results__note { margin: 16px 0 0; font-size: 13px; color: #6c757d; }

.l24p-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.l24p-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; align-items: baseline; margin: 0; }
.l24p-bar__label { font-weight: 700; line-height: 1.3; }
.l24p-bar__value { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--_d); }
.l24p-bar__track { grid-column: 1 / -1; display: block; height: 10px; background: #e7ddd0; overflow: hidden; }
.l24p-bar__fill { display: block; height: 100%; background: var(--_a); transition: width .7s cubic-bezier(.2, .7, .2, 1); }

/* Final results on the poll page: a full-width ranking, much bigger than the homepage tile / banner.
 * Rank number | position + number of picks | percent, the bar underneath. */
.l24p-results--final { padding: 28px 32px 26px; background: #fff; border: 1px solid #e3e3e3; border-left: 4px solid var(--_a); }
.l24p-results--final .l24p-closed-banner { margin: -28px -32px 26px -32px; padding-left: 32px; padding-right: 32px; border-left: 0; }
.l24p-results--final .l24p-results__title { font-size: 26px; }
.l24p-results--final .l24p-results__sub { margin-bottom: 24px; font-size: 15px; }
.l24p-results--final .l24p-bars { gap: 22px; }
.l24p-bar--ranked {
	grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "rank label value" ". sub value" "track track track";
	gap: 2px 16px; align-items: center;
}
.l24p-bar--ranked .l24p-bar__rank {
	grid-area: rank; align-self: start; width: 44px; height: 44px; border-radius: 50%; background: var(--_a); color: #fff;
	font-size: 20px; font-weight: 900; line-height: 44px; text-align: center;
}
.l24p-bar--ranked .l24p-bar__label { grid-area: label; align-self: end; font-size: 19px; }
.l24p-bar--ranked .l24p-bar__value { grid-area: value; align-self: center; font-size: 30px; line-height: 1; }
.l24p-bar--ranked .l24p-bar__sub { grid-area: sub; align-self: start; font-size: 13px; color: #6c757d; }
.l24p-bar--ranked .l24p-bar__track { grid-area: track; height: 18px; margin-top: 8px; background: #ececec; }
/* "all positions" scope: the first TOP_N stand out, the rest is greyed */
.l24p-bar--ranked.is-rest .l24p-bar__rank { background: #9aa0a6; }
.l24p-bar--ranked.is-rest .l24p-bar__fill { background: #b9bdc2; }
.l24p-bar--ranked.is-rest .l24p-bar__label, .l24p-bar--ranked.is-rest .l24p-bar__value { color: #5f656b; }

@media (max-width: 575px) {
	.l24p-results--final { padding: 20px 18px 20px; }
	.l24p-results--final .l24p-closed-banner { margin: -20px -18px 20px -18px; padding-left: 18px; padding-right: 18px; }
	.l24p-results--final .l24p-results__title { font-size: 21px; }
	.l24p-closed-banner .l24p-closed-banner__msg { font-size: 17px; }
	.l24p-bar--ranked { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 12px; }
	.l24p-bar--ranked .l24p-bar__rank { width: 36px; height: 36px; font-size: 16px; line-height: 36px; }
	.l24p-bar--ranked .l24p-bar__label { font-size: 16px; }
	.l24p-bar--ranked .l24p-bar__value { font-size: 22px; }
	.l24p-bar--ranked .l24p-bar__track { height: 14px; }
}

/* ---------------------------------------------------------------- banner
 * Sized for the homepage slot of the horizontal banners (1110 x 235 px). Text on the left,
 * generic graphic on the right – replaced by a 2 x 3 live chart once enough votes are in. */

.l24p-banner {
	position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	min-height: 235px; margin: 0 0 50px; overflow: hidden; background: #141518; color: #fff;
}
.l24p-banner__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 22px 32px; }
.l24p-banner__kicker { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #dcc0a0; }
.l24p-banner__title { margin: 0 0 10px; font-size: 22px; line-height: 1.2; font-weight: 700; text-transform: uppercase; color: #fff; }
.l24p-banner__lead { margin: 0 0 16px; font-size: 14px; line-height: 1.45; color: #e4e6ea; }
.l24p-banner a.l24p-banner__cta {
	display: inline-block; height: 40px; padding: 0 22px; border-radius: 5px; background: var(--_a); color: #fff;
	font-size: 14px; font-weight: 900; line-height: 40px; text-transform: uppercase; text-decoration: none; transition: background-color .2s;
}
.l24p-banner a.l24p-banner__cta:hover { background: var(--_d); color: #fff; text-decoration: none; }
/* the whole banner is clickable */
.l24p-banner a.l24p-banner__cta::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.l24p-banner__media { position: relative; min-height: 235px; background: #fff; }
.l24p-banner__img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.l24p-banner__chart { position: relative; height: 100%; padding: 16px 28px 12px; background: #fff; color: #212529; }
.l24p-banner__chart-title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; }
.l24p-banner__chart-note { margin: 10px 0 0; font-size: 11px; color: #8a9099; }

/* 3 rows x 2 columns, ranked top-to-bottom then across */
.l24p-banner .l24p-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 12px 28px; }
.l24p-banner .l24p-bar { gap: 3px 10px; }
.l24p-banner .l24p-bar__label { font-size: 13px; }
.l24p-banner .l24p-bar__value { font-size: 13px; }
.l24p-banner .l24p-bar__track { height: 6px; }

@media (max-width: 860px) {
	.l24p-banner { grid-template-columns: 1fr; margin-bottom: 30px; }
	.l24p-banner__text { padding: 22px 20px; }
	.l24p-banner__media { min-height: 170px; }
	.l24p-banner__chart { padding: 16px 20px 12px; }
	.l24p-banner .l24p-bars { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 10px; }
}

/* ---------------------------------------------------------------- tile
 * A card with the live chart for the homepage (sits well in the 310 px side column, scales to any width). */

.l24p-tile { margin: 0 0 30px; padding: 20px 22px 22px; background: var(--_t); color: #212529; }
.l24p-tile .l24p-tile__title {
	margin: 0 0 16px; padding: 0 0 6px; border-bottom: 1px solid var(--_a);
	font-size: 18px; font-weight: 700; line-height: 1.3; text-transform: uppercase; color: var(--_a);
}
.l24p-tile .l24p-bars { gap: 12px; }
.l24p-tile .l24p-bar { gap: 3px 10px; }
.l24p-tile .l24p-bar__label, .l24p-tile .l24p-bar__value { font-size: 14px; }
.l24p-tile .l24p-bar__track { height: 7px; background: #e3d8ca; }
.l24p-tile__badge {
	display: inline-block; margin: -6px 0 14px; padding: 3px 10px; background: #141518; color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.l24p-tile__note { margin: 12px 0 0; font-size: 12px; color: #6c757d; }
.l24p-tile__msg { margin: 0; font-size: 15px; line-height: 1.45; }
.l24p-tile a.l24p-tile__cta {
	display: block; height: 40px; margin: 16px 0 0; padding: 0 16px; border-radius: 5px; background: var(--_a); color: #fff;
	font-size: 14px; font-weight: 900; line-height: 40px; text-align: center; text-transform: uppercase; text-decoration: none; transition: background-color .2s;
}
.l24p-tile a.l24p-tile__cta:hover { background: var(--_d); color: #fff; text-decoration: none; }

/* ---------------------------------------------------------------- box
 * A news-sized card for the homepage grid, printed in the place of the first news by l24p_box() / [log24_plebiscyt_box].
 * It wears the theme's own news classes (newsThumbnail, thumbnailImage, newsThumbnailDescription, thumbnailDate,
 * thumbnailAuthor), so size, typography and hover come from the theme; only the accent colour and the overlays are ours.
 * The 16:9 graphic is shown until the chart may be shown; after the deadline: the final chart, or a short "closed" panel. */

.newsThumbnail.l24p-box .thumbnailImage { position: relative; aspect-ratio: 16 / 9; background: #14110d; }
.newsThumbnail.l24p-box .thumbnailImage > img.l24p-box__img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.newsThumbnail.l24p-box .newsThumbnailDescription h2:before { background-color: var(--_a); }
.newsThumbnail.l24p-box .newsThumbnailDescription .thumbnailDate { color: var(--_a); }
.newsThumbnail.l24p-box:hover .newsThumbnailDescription h2 { color: var(--_a); }

.l24p-box__chart, .l24p-box__end { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
.l24p-box__chart { display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; overflow: hidden; background: #fff; color: #212529; }
.l24p-box__chart-title { margin: 0 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .07em; line-height: 1.2; text-transform: uppercase; color: #6c757d; }
.l24p-box .l24p-bars { gap: 5px; }
.l24p-box .l24p-bar { gap: 2px 8px; }
/* the text shrinks a little with the card (container units), so six rows fit the 16:9 area even in a narrow column */
.newsThumbnail.l24p-box .thumbnailImage { container-type: inline-size; }
.l24p-box .l24p-bar__label, .l24p-box .l24p-bar__value { font-size: 11px; line-height: 1.2; }
@supports (width: 1cqw) {
	.l24p-box .l24p-bar__label, .l24p-box .l24p-bar__value { font-size: clamp(8.5px, 3.4cqw, 11px); }
	.l24p-box__chart-title { font-size: clamp(8px, 3cqw, 10px); }
}
.l24p-box .l24p-bar__track { height: 4px; background: #e7ddd0; }
.l24p-box__end { display: grid; place-items: center; padding: 14px; background: #14110d; color: #e8d5bb; text-align: center; font-size: 20px; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
	.l24p-bar__fill, .l24p-option, .l24p .l24p-submit, .l24p-banner a.l24p-banner__cta, .l24p-tile a.l24p-tile__cta,
	.l24p-collapse, .l24p-collapse__inner, .l24p-chevron, .l24p-step { transition: none; }
}