/* ==========================================================================
   page-cennik — aggregated price list page (/cennik/).
   Heavy lifting (alternating section--surface backgrounds, .section-card__header,
   .cennik-table + .cennik-row markup) is reused from sections.css. This file
   only adds page-level chrome: the H1 header block and a hover/link tweak on
   each poradnia's H2 (linked to its single-poradnia page).
   ========================================================================== */

.cennik-page__header {
	max-width: 720px;
}

.cennik-page__title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-sm);
}

.cennik-page__lead {
	font-size: var(--fs-base);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	margin: 0;
}

/* ==========================================================================
   Filter bar — search + poradnia select + clear button.
   Sits in a row on desktop, stacks on mobile. Each control is a soft-pill
   surface card matching the rest of the page (color-surface bg + radius-lg).
   ========================================================================== */

.cennik-filter {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
}

@media (min-width: 768px) {
	.cennik-filter {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
		gap: var(--space-md);
		align-items: stretch;
	}
}

.cennik-filter__search {
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--color-surface);
	border-radius: var(--radius-btn);
	padding: 0 var(--space-md);
	min-height: 52px;
}

.cennik-filter__search-icon {
	width: 18px;
	height: 18px;
	color: var(--color-text-muted);
	flex-shrink: 0;
	margin-right: var(--space-sm);
}

.cennik-filter__input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: var(--fs-base);
	color: var(--color-text);
	padding: var(--space-sm) 0;
}

.cennik-filter__input::placeholder {
	color: var(--color-text-muted);
}

.cennik-filter__input::-webkit-search-cancel-button {
	cursor: pointer;
}

.cennik-filter__search:focus-within {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

/* Custom dropdown — branded panel built on a <button> trigger + <ul> menu,
 * with a hidden native <select> as the source of truth. JS in
 * `assets/js/page-cennik.js` handles open/close, selection, keyboard nav
 * (Arrow up/down, Enter, Space, Esc), outside-click dismiss. */
.cennik-filter__select-wrap {
	position: relative;
}

.cennik-filter__select {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 52px;
	padding: var(--space-sm) calc(var(--space-md) + 24px) var(--space-sm) var(--space-md);
	background-color: var(--color-surface);
	border: 0;
	border-radius: var(--radius-btn);
	font-family: inherit;
	font-size: var(--fs-base);
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.cennik-filter__select:hover {
	background-color: var(--color-mint, var(--color-surface));
}

.cennik-filter__select:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.cennik-filter__select-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cennik-filter__select-chevron {
	position: absolute;
	right: var(--space-md);
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--color-text-muted);
	pointer-events: none;
	transition: transform var(--transition-fast);
}

.cennik-filter__select-wrap.is-open .cennik-filter__select-chevron {
	transform: translateY(-50%) rotate(180deg);
}

/* Menu panel — white card floating above the page bg, with subtle shadow. */
.cennik-filter__select-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 50;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	max-height: 320px;
	overflow-y: auto;
}

.cennik-filter__select-option {
	padding: 10px 14px;
	border-radius: var(--radius-md, 8px);
	font-size: var(--fs-base);
	color: var(--color-text);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.cennik-filter__select-option:hover,
.cennik-filter__select-option:focus {
	background-color: var(--color-surface);
	outline: 0;
}

.cennik-filter__select-option.is-selected {
	color: var(--color-brand);
	font-weight: var(--fw-semibold);
	background-color: var(--color-mint, var(--color-surface));
}

/* Brand-colored outline pill for "Wyczyść filtr" — distinct from neutral
 * .btn--secondary so it reads as a deliberate action, not a generic button. */
.cennik-filter__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--space-lg);
	background: transparent;
	color: var(--color-brand);
	border: 1px solid var(--color-brand);
	border-radius: var(--radius-btn);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.cennik-filter__clear:hover,
.cennik-filter__clear:focus-visible {
	background-color: var(--color-brand);
	color: var(--color-text-on-brand);
}

/* Mobile — stretch clear button to full row width. */
@media (max-width: 767px) {
	.cennik-filter__clear { width: 100%; }
}

/* ==========================================================================
   `.cennik-card--page` modifier — only on /cennik/.
   Inverts the default cennik look: drops `section--surface` from the
   wrapping section, gives the gray surface bg + radius + padding to
   .cennik-card itself (so the whole header + table is one rounded box),
   and resets .cennik-table to a transparent flex column with no inner
   padding. Single-poradnia cennik sections keep the default "gray
   section + white inner table card" look from sections.css.
   ========================================================================== */
.cennik-card--page {
	background-color: var(--color-surface);
	border-radius: var(--radius-xl);
	padding: 50px; /* desktop default — generous breathing room around the table */
}
.cennik-card--page .cennik-table {
	background-color: transparent;
	border-radius: 0;
	padding: 0;
}

/* Poradnia title is a link to its page — inherit the heading look, hint on hover. */
.cennik-card--page .section-card__heading a {
	color: inherit;
	text-decoration: none;
}
.cennik-card--page .section-card__heading a:hover,
.cennik-card--page .section-card__heading a:focus-visible {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Mobile — tighten padding (50 → 2rem/1.5rem) and soften the radius
 * (--radius-lg 20px instead of --radius-xl 32px) so the card doesn't look
 * chunky at narrow widths. Header padding-inline reset because
 * layout.css's generic `.cennik-card > header` rule (added for the
 * single-poradnia full-bleed case) would double up with .cennik-card--page's
 * own padding. */
@media (max-width: 639px) {
	.cennik-card--page {
		padding: 2rem 1.5rem;
		border-radius: var(--radius-lg);
	}
	/* `.cennik-page` prefix lifts specificity over layout.css's generic
	 * `body:where(...) .cennik-card > header` (0,1,2) so this reset actually
	 * wins — otherwise the title gets +16px and sits right of the table rows. */
	.cennik-page .cennik-card--page > header {
		padding-inline: 0;
	}
}

/* ==========================================================================
   Page-level card collapse — JS counts cumulative services across cards and
   sets `data-collapsed-out` on cards whose prefix sum has crossed the
   breakpoint threshold (mobile 10 / tablet 15 / desktop 25 services).
   Cards stay whole — never cut mid-poradnia. One button at the bottom
   expands everything; search/filter also force-expands automatically.
   ========================================================================== */

.cennik-page__cards--collapsible > [data-cennik-poradnia][data-collapsed-out] {
	display: none;
}

/* Slightly darker row separator on /cennik/ — the default
 * `--color-border-soft` (#EDE5DD warm beige) reads as a soft line on
 * single-poradnia pages but here, with the gray-surface card behind it,
 * we want a touch more contrast between rows. `--color-border` (#E5E7EB)
 * is the next step in the palette. */
.cennik-page .cennik-row {
	border-bottom-color: var(--color-border);
}

/* Empty state — no poradnia has any usługi yet (fresh install / migration). */
.cennik-page__empty {
	padding: var(--space-2xl);
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	color: var(--color-text-muted);
	text-align: center;
	font-size: var(--fs-base);
}