/* ==========================================================================
   page-o-przychodni — "About the clinic" page styles.

   Sections:
     - .o-przychodni-hero      — page hero (H1 + lead)
     - .o-przychodni-text      — narrative text block (eyebrow + H2 + paragraphs)
     - .o-przychodni-stats     — 4 gray tile stats grid
     - .galeria-* / .gallery-* — bento mosaic gallery (was the whole page,
                                  now a section here)

   Reuses project tokens (--color-brand, --space-*, --radius-*, --fs-*).
   ========================================================================== */

/* Hero markup reuses project-wide `.hero__card` / `.hero__badge` /
 * `.hero__title` / `.hero__description` from sections.css — no overrides
 * needed here. */

/* "O nas" body reuses `.section-card__body` from sections.css —
 * no per-page overrides needed. */

/* ==========================================================================
   STATS — 4 gray tile cards: big brand-coloured number on top, muted label
   underneath. Mobile stacks 2×2, tablet+ goes 4-in-a-row.
   ========================================================================== */
/* Stats section header reuses `.section-card__header` from sections.css. */

.o-przychodni-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.o-przychodni-stats {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-lg);
	}
}

.o-przychodni-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-xl);
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

@media (min-width: 900px) {
	.o-przychodni-stat {
		padding: var(--space-2xl) var(--space-xl);
	}
}

.o-przychodni-stat__value {
	font-size: clamp(2.25rem, 5vw, 3rem);
	font-weight: var(--fw-bold);
	color: var(--color-brand);
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
}

.o-przychodni-stat__label {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-snug);
	margin: 0;
	max-width: 22ch;
}

/* ==========================================================================
   GALLERY SECTION (was the whole page, now a section)
   bento/mosaic grid — reuses project tokens.

   Grid: CSS Grid with explicit `grid-row` + `grid-column` span variants
   per tile. Auto-rows give consistent row height; gap matches site spacing.

   Filter: client-side JS hides tiles where data-category mismatches the
   active button. Foto/Video toggle swaps grid for a stub message on Video
   until real assets land.
   ========================================================================== */

.galeria-page__header {
	max-width: 720px;
	margin-bottom: var(--space-xl);
}

.galeria-page__title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	line-height: var(--lh-tight);
	margin: var(--space-sm) 0 var(--space-sm);
}

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

/* -------------------------------------------------------------------------- */
/* Toolbar — media toggle + category filter.                                  */
/* Mobile:  Foto/Wideo toggle (full-width) → category dropdown (full-width)   */
/* Tablet+: Pill row of categories + segmented Foto/Wideo on the right       */
/* -------------------------------------------------------------------------- */
.galeria-toolbar {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
}

@media (min-width: 900px) {
	.galeria-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-lg);
	}
}

/* Pills row — desktop/tablet only. Hidden on mobile in favour of the
 * dropdown below. */
.galeria-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

@media (max-width: 767px) {
	.galeria-filters { display: none; }
}

.galeria-filter {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background-color: var(--color-surface);
	border: 0;
	border-radius: var(--radius-pill, 9999px);
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.galeria-filter:hover {
	background-color: var(--color-mint);
}

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

.galeria-filter.is-active {
	background-color: var(--color-brand);
	color: var(--color-text-on-brand);
}

/* Media toggle — pill segmented control, two-button group.
 * Mobile: full width row (matches reference design). Tablet+: inline. */
.galeria-media-toggle {
	display: flex;
	padding: 4px;
	background-color: var(--color-surface);
	border-radius: var(--radius-pill, 9999px);
}

@media (min-width: 768px) {
	.galeria-media-toggle {
		display: inline-flex;
		align-self: flex-start;
	}
}

.galeria-media-toggle__btn {
	display: inline-flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill, 9999px);
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

@media (min-width: 768px) {
	.galeria-media-toggle__btn { flex: 0 0 auto; }
}

.galeria-media-toggle__btn.is-active {
	background-color: var(--color-brand);
	color: var(--color-text-on-brand);
	box-shadow: var(--shadow-sm);
}

.galeria-media-toggle__btn:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Filter dropdown — mobile-only, custom branded UI built on a <button>      */
/* trigger + <ul> menu. Mirrors the cennik dropdown pattern. JS in           */
/* page-galeria.js handles open/close, selection sync with pills.            */
/* -------------------------------------------------------------------------- */
.galeria-filter-dropdown {
	position: relative;
}

@media (min-width: 768px) {
	.galeria-filter-dropdown { display: none; }
}

.galeria-filter-dropdown__trigger {
	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-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill, 9999px);
	font-family: inherit;
	font-size: var(--fs-base);
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--transition-fast);
}

.galeria-filter-dropdown__trigger:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.galeria-filter-dropdown__label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.galeria-filter-dropdown__chevron {
	position: absolute;
	right: var(--space-md);
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--color-brand);
	pointer-events: none;
	transition: transform var(--transition-fast);
}

.galeria-filter-dropdown.is-open .galeria-filter-dropdown__chevron {
	transform: translateY(-50%) rotate(180deg);
}

.galeria-filter-dropdown__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-lg, 12px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	max-height: 320px;
	overflow-y: auto;
}

.galeria-filter-dropdown__option {
	padding: 12px 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);
}

.galeria-filter-dropdown__option:hover,
.galeria-filter-dropdown__option:focus {
	background-color: var(--color-surface);
	outline: 0;
}

.galeria-filter-dropdown__option.is-selected {
	color: var(--color-brand);
	font-weight: var(--fw-semibold);
	background-color: var(--color-mint);
}

/* -------------------------------------------------------------------------- */
/* Bento CSS Grid — art-directed layout on desktop (≥1200), each tile        */
/* explicitly positioned via inline `grid-column` / `grid-row` set in PHP.   */
/* On tablet (3 cols) / mobile (2 cols), the explicit positions are nuked    */
/* via !important and tiles fall back to size-based spans + dense auto-flow. */
/* Uniform 24px gutter both directions, on all breakpoints.                  */
/* -------------------------------------------------------------------------- */

/* Override the explicit `display:` rules below — without these, JS-driven
 * `element.hidden = true` doesn't visually hide because the class rule
 * (display: grid/block) cascades over the user-agent `[hidden]` default
 * at equal specificity. Affects category filter (tiles) + foto/wideo
 * toggle (grid + empty/video-stub messages). */
.galeria-grid[hidden],
.gallery-tile[hidden],
[data-galeria-empty][hidden],
[data-galeria-video-stub][hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Filtered mode = UNIFORM grid ("вариант A", 2026-06-11).
 *
 * The bento layout is art-directed for the exact full set (blocks of 6 with
 * fixed nth-child positions and, on ≥768, fixed-height block rows). With a
 * category filter active the remaining 1-7 tiles can't fill those patterns:
 * tiles collapsed to 1/12-width strips and empty blocks kept their full
 * height. So while `.is-filtered` is on, we abandon bento entirely and
 * re-pack the visible tiles into a plain uniform grid; "Wszystko" (no
 * filter) still renders the full bento.
 *
 * All position/span resets are !important to beat the art-directed
 * per-tile !important rules below (higher selector specificity wins
 * among importants).
 * -------------------------------------------------------------------------- */
.galeria-grid.is-filtered .gallery-tile,
.galeria-grid.is-filtered .gallery-tile--wide,
.galeria-grid.is-filtered .gallery-tile--tall,
.galeria-grid.is-filtered .gallery-tile--big {
	grid-column: auto !important;
	grid-row:    auto !important;
}

/* Narrow mobile: the 5-col 40/60 base pattern makes no sense for uniform
 * cells — 2 equal columns instead (auto-rows 160px from the base rule). */
@media (max-width: 479px) {
	.galeria-grid.is-filtered {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* 480-767 keeps its 3-col / 240px frame — uniform cells fill it as-is. */

/* ≥768: the grid is normally a flex COLUMN of .bento-block sub-grids with
 * fixed cqw row heights. Collapse the blocks (display: contents — same
 * trick the mobile layout uses) and lay the tiles out as a flat 3-col
 * grid of equal 4:3 cells. */
@media (min-width: 768px) {
	.galeria-grid.is-filtered {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
	.galeria-grid.is-filtered .bento-block {
		display: contents;
	}
	.galeria-grid.is-filtered .gallery-tile {
		aspect-ratio: 4 / 3;
	}
}

.galeria-grid {
	display: grid;
	/* Default (<480, narrow mobile): 5-col 40/60 alternating pattern */
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 160px;
	grid-auto-flow: dense;
	gap: 8px;
	margin: 0;
}

/* Regular mobile (480-767): 3-col art-directed bento.
 * 240px row + 244px col on ~757px container = square-ish normals, ~2:1
 * wides, square bigs. Talls aren't used on this BP (would be uncomfortably
 * narrow portraits) — see PHP: all tall tiles are positioned as 1×1. */
@media (min-width: 480px) and (max-width: 767px) {
	.galeria-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 240px;
		gap: 12px;
	}
}

/* (No tablet-only rule for `.galeria-grid` — the desktop bento below kicks
 * in from 768 up, scaling proportionally via cqw.) */

/* -------------------------------------------------------------------------- */
/* TABLET + DESKTOP (≥768) — 3-column bento with 2-row blocks, mirrored.      */
/*                                                                             */
/* Layout strategy: explicit `grid-template-rows` with sub-divided heights so  */
/* tiles can span row boundaries WITHOUT leaving gaps below shorter tiles.    */
/* `align-self: stretch` (default) lets each tile fill its assigned cell      */
/* exactly — no per-tile aspect-ratio, sizing comes from the grid cell.       */
/*                                                                             */
/* Row template math (design = 1239px container, gap = 16px):                  */
/*   row 1: 231 = full height of short tile 3                                  */
/*   row 2: 148 = remainder so tile 1 (rows 1-2 span) = 231+16+148 = 395 ✓   */
/*   row 3: 250 = full height of short tile 4                                  */
/*   row 4:  84 = remainder so tile 5 (rows 3-4 span) = 250+16+84 = 350 ✓    */
/*   tile 6 (rows 2-3 span) = 148+16+250 = 414 ✓                              */
/*                                                                             */
/* Heights in `cqw` (= % of container inline-size) — `.galeria-grid` gets    */
/* `container-type: inline-size` so children resolve cqw against gallery     */
/* width. Result: aspect ratios preserved at any viewport, no fixed pixels.   */
/*                                                                             */
/* On <768 `.bento-block { display: contents }` collapses the wrapper —      */
/* tiles flow as direct grid items of `.galeria-grid` and the mobile layouts */
/* (480-767 explicit positions + <480 nth-child cycles) apply unchanged.     */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	/* Approach borrowed from b-photo-list_grid (bestclinic.ru pattern, observed
	 * via DevTools): 12-col grid × 3 explicit rows where the middle row is a
	 * SHORT "connector". Tiles span either (row 1 only / rows 1-2 / row 3 only
	 * / rows 2-3) — and because every column eats the SAME total of rows-and-
	 * gaps, all columns end at the same baseline → no gaps at block bottom.
	 *
	 * Row template solved for our target heights at container ≈ 1239:
	 *   A (row 1) = 231  — tile 3 height (short top-right)
	 *   B (row 2) = 148  — connector: 231 + 16 + 148 = 395 (tile 1)
	 *   C (row 3) = 250  — tile 4 height (short bottom)
	 *   tile 6 (rows 2-3) = 148 + 16 + 250 = 414 ✓
	 *
	 * Trade-off: tile 5 lands in row 3 (= 250) instead of design's 350. With
	 * only 3 row slots we can't fit 5 distinct heights — the competitor makes
	 * the same compromise. Visual rhythm is the win.
	 *
	 * Row heights in cqw (% of container width) so the whole bento scales
	 * with `.galeria-grid` width. */
	.galeria-grid {
		display: flex;
		flex-direction: column;
		gap: 16px;
		grid-template-columns: none;
		grid-auto-rows: auto;
		container-type: inline-size; /* enable cqw inside .bento-block */
	}

	.bento-block {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows:
			18.64cqw   /* A — 231 / 1239 */
			11.95cqw   /* B — 148 / 1239 (connector) */
			20.18cqw;  /* C — 250 / 1239 */
		gap: 16px;
	}

	/* BLOCK A — col widths 3 | 5 | 4 (= 305 | 521 | 413).
	 *   1: 305×395  (col 1-3, rows 1-2 = A+B = 395)
	 *   2: 521×395  (col 4-8, rows 1-2)
	 *   3: 413×231  (col 9-12, row 1 only = A = 231)
	 *   4: 305×250  (col 1-3, row 3 = C = 250)
	 *   5: 521×250  (col 4-8, row 3) — was 350 in design, compromise
	 *   6: 413×414  (col 9-12, rows 2-3 = B+C = 414) */
	.bento-block--a .gallery-tile:nth-child(1) { grid-column: 1 / 4;  grid-row: 1 / 3; }
	.bento-block--a .gallery-tile:nth-child(2) { grid-column: 4 / 9;  grid-row: 1 / 3; }
	.bento-block--a .gallery-tile:nth-child(3) { grid-column: 9 / 13; grid-row: 1 / 2; }
	.bento-block--a .gallery-tile:nth-child(4) { grid-column: 1 / 4;  grid-row: 3 / 4; }
	.bento-block--a .gallery-tile:nth-child(5) { grid-column: 4 / 9;  grid-row: 3 / 4; }
	.bento-block--a .gallery-tile:nth-child(6) { grid-column: 9 / 13; grid-row: 2 / 4; }

	/* BLOCK B — mirror: col widths 4 | 5 | 3 (= 413 | 521 | 305).
	 *   1: 413×231  (col 1-4, row 1 = A = 231)
	 *   2: 521×395  (col 5-9, rows 1-2 = 395)
	 *   3: 305×395  (col 10-12, rows 1-2)
	 *   4: 413×414  (col 1-4, rows 2-3 = 414)
	 *   5: 521×250  (col 5-9, row 3) — was 350 in design, compromise
	 *   6: 305×250  (col 10-12, row 3) */
	.bento-block--b .gallery-tile:nth-child(1) { grid-column: 1 / 5;   grid-row: 1 / 2; }
	.bento-block--b .gallery-tile:nth-child(2) { grid-column: 5 / 10;  grid-row: 1 / 3; }
	.bento-block--b .gallery-tile:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 3; }
	.bento-block--b .gallery-tile:nth-child(4) { grid-column: 1 / 5;   grid-row: 2 / 4; }
	.bento-block--b .gallery-tile:nth-child(5) { grid-column: 5 / 10;  grid-row: 3 / 4; }
	.bento-block--b .gallery-tile:nth-child(6) { grid-column: 10 / 13; grid-row: 3 / 4; }

	/* Cancel base-rule positions / aspect-ratio — grid cell drives size. */
	.bento-block .gallery-tile {
		aspect-ratio: unset;
	}
}

/* On <768 the bento-block wrapper disappears from layout — `.gallery-tile`s
 * become direct grid items of `.galeria-grid` again, so the mobile (480-767)
 * explicit positions + narrow (<480) nth-child cycles apply unchanged. */
@media (max-width: 767px) {
	.bento-block {
		display: contents;
	}
}

/* Tile base — gradient bg is the fallback while picsum image loads.
 * Inline style sets CSS vars (--col-d, --row-d, --col-n, --row-n) that the
 * per-breakpoint rules below pick from. Desktop reads -d, narrow reads -n. */
.gallery-tile {
	position: relative;
	display: block;
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: var(--color-brand);
	text-decoration: none;
	cursor: pointer;
	grid-column: var(--col-d, auto);
	grid-row:    var(--row-d, auto);
}

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

/* Regular mobile (480-767): nuke any leftover desktop positions, use spans.
 * Tablet (768-1199) now uses the bento-block layout above, so this rule no
 * longer extends up to 1199. `--big` drops to 2×1 so it behaves like a wide
 * on the 3-col mobile grid (the 2×2 footprint would leave col 3 empty for
 * 2 rows). */
@media (min-width: 480px) and (max-width: 767px) {
	.gallery-tile {
		grid-column: auto !important;
		grid-row:    auto !important;
	}
	.gallery-tile--wide,
	.gallery-tile--big {
		grid-column: span 2 !important;
		grid-row:    span 1 !important;
	}
	.gallery-tile--tall {
		grid-row: span 2 !important;
	}
}

/* Regular mobile (480-767): explicit 3-col bento with --col-n/--row-n
 * positions. Ortop + EKG hide here (12 tiles fill 9 rows × 3 cols + 1
 * empty cell). */
@media (min-width: 480px) and (max-width: 767px) {
	.gallery-tile {
		grid-column: var(--col-n, auto) !important;
		grid-row:    var(--row-n, auto) !important;
		border-radius: var(--radius-md);
	}
	.gallery-tile--hide-narrow {
		display: none !important;
	}
}

/* Narrow mobile (<480): 5-column grid with 40/60 + 100 alternating
 * pattern. Sizes assigned by source-order position (nth-child), not by
 * --wide/--tall/--big class — that's only used on desktop/tablet.
 *
 * 6-tile cycle:
 *   pos 1: small (2 cols, 40%)  ┐ Row A: small + wide
 *   pos 2: wide  (3 cols, 60%)  ┘
 *   pos 3: full  (5 cols, 100%)   Row B: full
 *   pos 4: wide  (3 cols, 60%)  ┐ Row C: wide + small (reversed)
 *   pos 5: small (2 cols, 40%)  ┘
 *   pos 6: full  (5 cols, 100%)   Row D: full
 *
 * Selectors:
 *   default (positions 1, 5, 7, 11, 13)  → small via base rule
 *   nth-child(6n+2) (positions 2, 8, 14) → wide
 *   nth-child(6n+4) (positions 4, 10)    → wide
 *   nth-child(3n)   (positions 3, 6, 9, 12) → full
 *
 * Regular mobile (480-767) uses the bento with --col-n/--row-n above. */
@media (max-width: 479px) {
	.gallery-tile {
		grid-column: span 2 !important; /* default small (40%) */
		grid-row:    span 1 !important;
		border-radius: var(--radius-md); /* 12px — softer than desktop 20px */
	}
	.gallery-tile:nth-child(6n+2),
	.gallery-tile:nth-child(6n+4) {
		grid-column: span 3 !important; /* wide (60%) */
	}
	.gallery-tile:nth-child(3n) {
		grid-column: span 5 !important; /* full (100%) */
	}
}

/* Thumbnail image — covers the entire tile (object-fit) so tile shape is
 * controlled by grid, not by image aspect-ratio. */
.gallery-tile__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transition: transform 600ms ease;
}

.gallery-tile:hover .gallery-tile__image {
	transform: scale(1.04);
}

/* Label sits in a dark gradient strip at the bottom so the text reads on
 * any photo. Absolute over the img. */
.gallery-tile__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: var(--space-lg) var(--space-md) var(--space-md);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.005em;
	line-height: var(--lh-snug);
}

/* Empty states (filter returned 0 tiles; or video tab) — centered card. */
.galeria-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);
}

.galeria-empty p { margin: 0; }