/*
 * Przewodnik "Co robić w Bielsku-Białej i okolicach".
 * Klocki: kafelki, wybieraczka, karty tras, trasy enduro, spis treści, ramka uwagi.
 * Wczytywany po elementor.css, więc reguły dla telefonu są tu na końcu pliku,
 * tak samo jak tam - kolejność ma znaczenie.
 */

/* ---------- kafelki ---------- */

.apd-kafelki__tytul { margin-bottom: 22px; }

.apd-kafelki {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.apd-kafelek {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 26px 54px;
	position: relative;
	background: var(--apd-karta);
	border: 1px solid var(--apd-obramowanie);
	color: inherit;
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}

.apd-kafelek:hover,
.apd-kafelek:focus-visible {
	border-color: var(--apd-zloto);
	transform: translateY(-2px);
}

.apd-kafelek__tytul {
	font-family: var(--apd-font-naglowek);
	font-size: 1.44rem;
	line-height: 1.2;
	color: var(--apd-naglowek);
}

.apd-kafelek__opis {
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--apd-tekst);
}

.apd-kafelek__strzalka {
	position: absolute;
	left: 26px;
	bottom: 22px;
	color: var(--apd-zloto);
	font-size: 1.2rem;
	transition: transform .18s ease;
}

.apd-kafelek:hover .apd-kafelek__strzalka { transform: translateX(5px); }

/* kafelki pór roku: mniejsze, cztery w rzędzie */
.apd-kafelki--sezon { grid-template-columns: repeat(4, 1fr); }
.apd-kafelki--sezon .apd-kafelek { padding: 22px 22px 50px; }
.apd-kafelki--sezon .apd-kafelek__tytul { font-size: 1.3rem; }
.apd-kafelki--sezon .apd-kafelek__opis { font-size: 0.9rem; }
.apd-kafelki--sezon .apd-kafelek__strzalka { left: 22px; bottom: 18px; }

/* ---------- wybieraczka ---------- */

.apd-wybor {
	background: var(--apd-karta);
	border: 1px solid var(--apd-obramowanie);
	border-top: 3px solid var(--apd-zloto);
	padding: 8px 26px 18px;
}

.apd-wybor__tytul {
	font-family: var(--apd-font-naglowek);
	font-size: 1.44rem;
	color: var(--apd-naglowek);
	margin: 16px 0 6px;
}

.apd-wybor ul { list-style: none; margin: 0; padding: 0; }
.apd-wybor li { border-top: 1px solid var(--apd-obramowanie); }

.apd-wybor li a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	padding: 14px 4px;
	min-height: 48px;
	text-decoration: none;
	color: inherit;
}

.apd-wybor li a:hover .apd-wybor__cel,
.apd-wybor li a:focus-visible .apd-wybor__cel { color: var(--apd-zloto-ciemne); }

.apd-wybor__jesli {
	flex: 0 0 auto;
	font-size: 0.97rem;
	color: var(--apd-tekst);
}

.apd-wybor__cel {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 0.97rem;
	color: var(--apd-zloto);
}

.apd-wybor__cel::before { content: "\2192\00a0"; }

/* ---------- karty tras pieszych ---------- */

.apd-trasy {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.apd-trasa {
	background: var(--apd-karta);
	border: 1px solid var(--apd-obramowanie);
	padding: 24px 26px;
}

.apd-trasa__nazwa { font-size: 1.3rem; margin: 0 0 2px; }

.apd-trasa__wysokosc {
	font-size: 0.82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--apd-zloto);
	margin: 0 0 14px;
}

.apd-trasa__dane {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 18px;
	margin: 0 0 14px;
	padding: 14px 0;
	border-top: 1px solid var(--apd-obramowanie);
	border-bottom: 1px solid var(--apd-obramowanie);
}

.apd-trasa__dane dt {
	font-size: 0.74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--apd-tekst-jasny);
	margin: 0 0 2px;
}

.apd-trasa__dane dd {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--apd-naglowek);
}

.apd-trasa__opis { font-size: 0.94rem; margin: 0; }

/* ---------- trasy enduro ---------- */

.apd-enduro {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.apd-enduro__poz {
	background: var(--apd-karta);
	border: 1px solid var(--apd-obramowanie);
	border-left: 5px solid var(--apd-zloto);
	padding: 22px 24px;
}

.apd-enduro__poz h3 { font-size: 1.2rem; margin: 0 0 6px; }

.apd-enduro__nazwy {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--apd-naglowek);
	margin: 0 0 8px;
}

.apd-enduro__poz p { font-size: 0.94rem; margin: 0; }

.apd-enduro__poz--zielona  { border-left-color: #4f7a45; }
.apd-enduro__poz--niebieska { border-left-color: #3f6b93; }
.apd-enduro__poz--czerwona { border-left-color: #a5392f; }
.apd-enduro__poz--czarna   { border-left-color: #2a2521; }
.apd-enduro__poz--podjazd  { border-left-color: var(--apd-piasek); }

/* ---------- spis treści ---------- */

.apd-spis[hidden] { display: none; }

.apd-spis {
	background: var(--apd-karta);
	border: 1px solid var(--apd-obramowanie);
}

.apd-spis__przycisk {
	display: none;
	width: 100%;
	min-height: 48px;
	padding: 12px 18px;
	background: none;
	border: 0;
	font-family: var(--apd-font-tekst);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--apd-naglowek);
	text-align: left;
	cursor: pointer;
}

.apd-spis__przycisk::after {
	content: "\203a";
	float: right;
	transform: rotate(90deg);
	transition: transform .18s ease;
}

.apd-spis__przycisk[aria-expanded="true"]::after { transform: rotate(-90deg); }

.apd-spis__lista {
	list-style: none;
	margin: 0;
	padding: 14px 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
}

.apd-spis__lista a {
	display: inline-block;
	padding: 5px 0;
	font-size: 0.92rem;
	color: var(--apd-tekst);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.apd-spis__lista a:hover,
.apd-spis__lista a:focus-visible {
	color: var(--apd-zloto-ciemne);
	border-bottom-color: var(--apd-zloto);
}

/* ---------- ramka z uwagą ---------- */

.apd-uwaga {
	background: var(--apd-tlo-2);
	border-left: 4px solid var(--apd-zloto);
	padding: 20px 24px;
}

.apd-uwaga__tytul {
	font-family: var(--apd-font-naglowek);
	font-size: 1.2rem;
	color: var(--apd-naglowek);
	margin: 0 0 6px;
}

.apd-uwaga p { font-size: 0.94rem; margin: 0 0 8px; }
.apd-uwaga p:last-child { margin-bottom: 0; }

/* Na ciemnym tle sekcji ramka musi zostać czytelna. */
.apd-ciemna-e .apd-uwaga { background: rgba(255, 255, 255, .06); }
.apd-ciemna-e .apd-uwaga p { color: #c3b8ac; }

/* ---------- kotwice pod przyklejonym nagłówkiem ---------- */

.apd-kotwica-e { scroll-margin-top: calc(var(--apd-header) + 16px); }

/* ---------- tablet ---------- */

@media (max-width: 1100px) {
	.apd-kafelki { grid-template-columns: repeat(2, 1fr); }
	.apd-kafelki--sezon { grid-template-columns: repeat(2, 1fr); }
	.apd-trasy { grid-template-columns: repeat(2, 1fr); }
	.apd-enduro { grid-template-columns: 1fr; }
}

/* ---------- telefon ---------- */

@media (max-width: 767px) {
	.apd-kafelki,
	.apd-kafelki--sezon,
	.apd-trasy { grid-template-columns: 1fr; }

	.apd-kafelek { padding: 22px 20px 50px; }
	.apd-kafelek__tytul { font-size: 1.32rem; }
	.apd-kafelek__strzalka { left: 20px; }

	.apd-wybor { padding: 6px 18px 14px; }
	.apd-wybor li a { padding: 13px 2px; }

	.apd-trasa { padding: 20px 20px; }
	.apd-trasa__dane { gap: 10px 14px; }

	.apd-enduro__poz { padding: 18px 20px; }

	/* Spis zwija się do jednego przycisku i przykleja pod nagłówkiem strony. */
	.apd-spis {
		position: sticky;
		top: var(--apd-header);
		z-index: 30;
	}

	.apd-spis__przycisk { display: block; }

	.apd-spis__lista {
		display: block;
		padding: 4px 18px 14px;
		border-top: 1px solid var(--apd-obramowanie);
	}

	.apd-spis__lista li { border-bottom: 1px solid var(--apd-obramowanie); }
	.apd-spis__lista li:last-child { border-bottom: 0; }

	.apd-spis__lista a {
		display: block;
		min-height: 44px;
		padding: 12px 0;
	}

	.apd-spis[data-zwiniety="tak"] .apd-spis__lista { display: none; }
}