/*
 * babytrains-custom.css
 *
 * Tenký CSS layer pro overrides Bricks defaultů, které nelze zařídit přes
 * BricksMade design tokens (var(--*)). BricksMade root font-size = 10px, takže
 * 1rem = 10px (důležité pro container max-width výpočty).
 *
 * Vše co lze udělat přes Bricks element settings (padding, gap, colors přes
 * var) — patří tam, ne sem.
 */


/* ───── Container ─────
 * BricksMade .brxe-container poskytuje default max-width + horizontální
 * margin auto + width 100% z theme styles. Vlastní `.babytrains-container`
 * marker class nemá žádné vlastní rozměry — nech BricksMade vyhrát.
 */


/* ───── Links / buttons ─────
 * Bricks text-link a button elementy default mají underline. Pro buttons +
 * nav linky chceme bez underline (button styling převažuje text-link default).
 */
.brxe-text-link,
.brxe-button {
	text-decoration: none;
}
.brxe-text-link:hover {
	text-decoration: underline;
}
/* Button hover state — subtle lift; filled buttons darken slightly */
.brxe-button {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}
.brxe-button:hover {
	transform: translateY(-1px);
}
.brxe-button.bricks-background-primary:hover,
.brxe-button.bricks-background-dark:hover,
.brxe-button.bricks-background-light:hover {
	filter: brightness(0.95);
}


/* ───── Accordion ─────
 * BricksMade accordion default styling není dobré pro FAQ — vyrobíme card-list
 * feel s gap mezi items, rounded borders, subtle hover lift.
 */
.brxe-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.brxe-accordion .accordion-item {
	background: var(--base-white);
	border: 1px solid var(--border-neutral);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.brxe-accordion .accordion-item:hover {
	border-color: var(--border-primary);
}
.brxe-accordion .accordion-item.brx-open {
	border-color: var(--border-primary);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.brxe-accordion .accordion-title-wrapper {
	padding: 20px 24px;
	cursor: pointer;
}
.brxe-accordion .accordion-content-wrapper {
	padding: 0 24px 20px;
}


/* ───── Archive model grid ───── */
.babytrains-model-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}


/* ───── Model card (archive + homepage gallery) ───── */
.babytrains-card {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	background: var(--base-white);
	border: 1px solid var(--border-neutral);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none !important;
	color: var(--heading-neutral) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.babytrains-card:hover {
	border-color: var(--border-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.babytrains-card__image-wrap {
	position: relative;
	height: 14rem;
	overflow: hidden;
	background: var(--surface-neutral);
	display: flex;
	align-items: center;
	justify-content: center;
}
.babytrains-card__image-wrap img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.babytrains-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	padding: 0 var(--s4) var(--s4);
}
.babytrains-card__type {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-primary);
	font-weight: 700;
}
.babytrains-card__title {
	font-weight: 700;
	font-size: var(--text-base);
	line-height: 1.3;
}


/* Pill row + variants (single-model hero, used elsewhere) */
.babytrains-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
}
.babytrains-pill {
	display: inline-flex;
	padding: var(--s2) var(--s4);
	border-radius: 999px;
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
	background: var(--surface-neutral);
	color: var(--text-neutral);
}
.babytrains-pill--primary { background: var(--surface-primary); color: var(--text-primary); }
.babytrains-pill--accent  { background: var(--surface-accent);  color: var(--text-accent); }
.babytrains-pill--neutral { background: var(--surface-neutral); color: var(--text-neutral); }
/* Status pill derives variant from parent's babytrains-status-{slug} class */
.babytrains-status-hotovo .babytrains-pill--status    { background: var(--surface-primary); color: var(--text-primary); }
.babytrains-status-beta .babytrains-pill--status      { background: var(--surface-accent); color: var(--text-accent); }
.babytrains-status-planovano .babytrains-pill--status { background: var(--surface-neutral); color: var(--text-neutral); opacity: 0.7; }


/* Printables stats row */
.babytrains-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s4);
	font-size: var(--text-sm);
	color: var(--text-neutral);
}
.babytrains-stats > span:not(:last-child)::after {
	content: '·';
	opacity: 0.4;
	margin-left: var(--s4);
}


/* Status pill — color variant driven by parent card class (dynamic data) */
.babytrains-pill--status {
	position: absolute;
	top: var(--s3);
	right: var(--s3);
	display: inline-flex;
	padding: var(--s2) var(--s4);
	border-radius: 999px;
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--surface-neutral);
	color: var(--text-neutral);
	line-height: 1;
}
.babytrains-card.is-hotovo .babytrains-pill--status,
.babytrains-pill--status.is-hotovo {
	background: var(--surface-primary);
	color: var(--text-primary);
}
.babytrains-card.is-beta .babytrains-pill--status,
.babytrains-pill--status.is-beta {
	background: var(--surface-accent);
	color: var(--text-accent);
}
.babytrains-card.is-planovano .babytrains-pill--status,
.babytrains-pill--status.is-planovano {
	background: var(--surface-neutral);
	color: var(--text-neutral);
	opacity: 0.7;
}


/* ───── Archive filter chips (Bricks filter-radio button mode) ─────
 * Bricks vykresluje <ul><li><label><input><span.brx-option-text></span>.
 * Stylujeme jako pill chips konzistentní s naším brand-em.
 */
.brxe-filter-radio[data-mode="button"] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.brxe-filter-radio[data-mode="button"] li {
	list-style: none;
	margin: 0;
}
.brxe-filter-radio[data-mode="button"] label {
	cursor: pointer;
	display: inline-flex;
}
.brxe-filter-radio[data-mode="button"] input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}
.brxe-filter-radio[data-mode="button"] .brx-option-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 999px !important;
	background: #fff;
	color: var(--heading-neutral);
	font-size: var(--text-sm);
	font-weight: 600;
	border: 1px solid var(--border-neutral);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	line-height: 1.2;
}
.brxe-filter-radio[data-mode="button"] label:hover .brx-option-text {
	border-color: var(--base-primary);
}
.brxe-filter-radio[data-mode="button"] .brx-option-text.brx-option-active {
	background: var(--base-primary);
	color: #fff;
	border-color: var(--base-primary);
}
.brxe-filter-radio[data-mode="button"] .brx-option-disabled .brx-option-text {
	opacity: 0.35;
	cursor: not-allowed;
}
.brxe-filter-radio[data-mode="button"] .brx-option-count {
	opacity: 0.75;
	font-weight: 500;
	font-size: 0.92em;
}

/* "All option" label — když user nezadá vlastní text, Bricks vypíše název filtru
 * (Status / Série / Typ). Pro náš context = "Vše".
 */
.brxe-filter-radio[data-mode="button"] .brx-option-all .brx-option-text:not(.brx-option-active) {
	background: transparent;
	border-color: transparent;
	color: var(--text-neutral);
}


/* ───── Active filters + submit reset button ───── */
.brxe-filter-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.brxe-filter-active-filters li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--surface-primary);
	color: var(--text-primary);
	font-size: var(--text-sm);
	font-weight: 600;
	list-style: none;
}
.brxe-filter-active-filters li button,
.brxe-filter-active-filters li .brx-remove-filter {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	color: inherit;
	padding: 0 0 0 4px;
	line-height: 1;
}
.brxe-filter-submit.brx-no-active-filter {
	opacity: 0;
	pointer-events: none;
}


/* ───── Section vertical rhythm ─────
 * BricksMade --ss-* (section spacing) tokeny v rem (clamp). Tady jen
 * fallback margin pokud builder nepřidá padding.
 */
.brxe-section {
	margin-block: 0;
}


/* ───── Prose styling pro blog post content ─────
 * Bricks post-content element renderuje raw HTML z editoru. Pro pohodlné čtení
 * nastavíme vertical rhythm a typography.
 */
.bt-prose h2 {
	font-size: var(--text-3xl);
	font-weight: 700;
	line-height: 1.2;
	margin-top: 2.5em;
	margin-bottom: 0.8em;
	color: var(--heading-neutral);
}
.bt-prose h2:first-child {
	margin-top: 0;
}
.bt-prose h3 {
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: 1.3;
	margin-top: 2em;
	margin-bottom: 0.6em;
	color: var(--heading-neutral);
}
.bt-prose p {
	font-size: var(--text-lg);
	line-height: 1.7;
	color: var(--text-neutral);
	margin-bottom: 1.4em;
}
.bt-prose ul,
.bt-prose ol {
	font-size: var(--text-lg);
	line-height: 1.7;
	color: var(--text-neutral);
	padding-left: 1.6em;
	margin-bottom: 1.4em;
}
.bt-prose li {
	margin-bottom: 0.6em;
}
.bt-prose li ul,
.bt-prose li ol {
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}
.bt-prose strong {
	color: var(--heading-neutral);
	font-weight: 700;
}
.bt-prose em {
	color: var(--text-neutral);
}
.bt-prose a {
	color: var(--base-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.bt-prose a:hover {
	color: var(--hover-primary);
}
.bt-prose code {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	background: var(--surface-neutral);
	padding: 0.15em 0.4em;
	border-radius: 0.3rem;
	font-size: 0.92em;
}
.bt-prose hr {
	border: none;
	border-top: 1px solid var(--border-neutral);
	margin: 3em 0;
}