/*
 * Cards and what goes inside them: clickable cards, label/value rows, icon lines, panels,
 * group cards (Wspólnoty), fold-out sections, the map and bank accounts (Kontakt).
 * The card looks themselves are block styles in styles/blocks/ (karta, karta-ciemna, panel, …).
 */

/* Whole card clickable: the (first) link in the card stretches over it.
 ---------------------------------------------------------------------------- */
.karta-klik {
	position: relative;
}

.karta-klik a {
	color: inherit;
	text-decoration: none;
}

.karta-klik a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.karta-klik:hover {
	border-color: var(--wp--preset--color--accent);
}

/* The keyboard focus ring goes around the whole card, not the title. */
.karta-klik:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.karta-klik a:focus-visible {
	outline: none;
}

/* "Zobacz też" card: red round arrow on the right. */
.karta-link::after {
	content: "→";
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--large);
}

/* Very narrow phones: a long word in the title ("Zmartwychwstańcy") and the arrow do not
   fit side by side, so the arrow moves below the text instead of widening the page. */
@media (max-width: 399px) {
	.wp-block-group.karta-link {
		flex-wrap: wrap;
	}
}

/* Card whose image touches the card edges (O nas). */
.karta-obraz {
	overflow: hidden;
}

.karta-obraz > .wp-block-image,
.karta-obraz > .wp-block-image img {
	width: 100%;
}

/* Rows with a label on the left and a value on the right (Mass times, confession,
   kancelaria, Sklepik). The label is bold. On wider screens the labels form one column of
   30%, like the first column of the schedule tables below them, so all times line up.
 ---------------------------------------------------------------------------- */
.wiersz {
	padding-block: var(--wp--preset--spacing--medium);
	border-bottom: 1px solid var(--wp--custom--color--divider);
}

/* Lines only between rows: none under the last row, also when a note follows it. */
.wiersz:not(:has(+ .wiersz)) {
	border-bottom: 0;
}

/* A short list (group "wiersze-zwarte", e.g. the two opening days of the kancelaria) is one
   piece of information: no lines, less space, the note right under it. Lines are for long
   lists like the Mass and confession times. */
.wiersze-zwarte > .wiersz {
	padding-block: var(--wp--preset--spacing--xx-small);
	border-bottom: 0;
}

.wiersze-zwarte > .is-style-etykieta + .wiersz {
	margin-top: var(--wp--preset--spacing--x-small);
}

.wiersze-zwarte > .wiersz + :not(.wiersz) {
	margin-top: var(--wp--preset--spacing--small);
}

.wiersz > p:first-child {
	font-weight: 700;
}

@media (min-width: 600px) {
	.wp-block-group.wiersz {
		display: grid;
		grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
		align-items: baseline;
		column-gap: var(--wp--preset--spacing--medium);
	}
}

/* On phones every row reads like the schedule tables: label, then the time right after it
   (or on the next line when it does not fit), all aligned left. */
@media (max-width: 599px) {
	.wiersz {
		justify-content: flex-start;
		column-gap: var(--wp--preset--spacing--x-small);
		row-gap: var(--wp--preset--spacing--xx-small);
		padding-block: var(--wp--preset--spacing--small);
	}

	/* Time + note ("19:00 liturgia niedzielna"): the time stays next to the label,
	   only the note moves to the next line. */
	.wiersz > .wp-block-group {
		display: contents;
	}
}

/* Small icon + text line (opening hours, place, contact). The icon size is set here,
   so every line looks the same, also lines added later in the editor. */
.linia-ikona {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--snug);
}

.linia-ikona > .wp-block-icon {
	flex: none;
	margin-top: 0.1em;
}

.linia-ikona > .wp-block-icon svg {
	width: 1.125rem;
	height: auto;
}

.linia-ikona p {
	margin: 0;
}

/* Phone numbers and e-mails in these lines: a taller area to tap (padding on an inline
   link enlarges where it reacts to a finger, without moving the text). */
.linia-ikona a {
	padding-block: var(--wp--preset--spacing--x-small);
}

/* A thin line and some space before a second label in a panel (e.g. "Kontakt"). */
.is-style-panel > .is-style-etykieta:not(:first-child) {
	margin-top: var(--wp--preset--spacing--medium);
	padding-top: var(--wp--preset--spacing--small);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

/* Group cards (Wspólnoty i grupy)
 ---------------------------------------------------------------------------- */

/* Category heading ("Dzieci i młodzież", …). */
.naglowek-kategorii {
	padding-bottom: var(--wp--preset--spacing--small);
	border-bottom: 2px solid var(--wp--preset--color--accent);
}

/* Group logos in the side panel fit into a box of 180 × 180 px: square logos keep their size,
   wide ones (ZHP) get narrower instead of filling the panel. Photos belong in the text column. */
.wspolnota .is-style-panel .wp-block-image img {
	width: auto;
	max-width: 11.25rem;
	max-height: 11.25rem;
	margin-inline: auto;
}

/* Social links in the group panels: brand icons in red, with labels.
   Same size, spacing and behaviour as the other icon lines (no zoom on hover). */
.wspolnota .wp-block-social-links {
	gap: var(--wp--preset--spacing--small);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--snug);
}

.wspolnota .wp-block-social-links .wp-social-link {
	background: none;
	color: var(--wp--preset--color--accent);
	font-size: inherit;
	transform: none !important;
	transition: none;
}

.wspolnota .wp-block-social-links .wp-social-link .wp-block-social-link-anchor {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--small);
	line-height: var(--wp--custom--line-height--snug);
	/* Taller area to tap; the negative margin keeps the lines where they were. */
	margin-block: calc(var(--wp--preset--spacing--x-small) * -1);
	padding-block: var(--wp--preset--spacing--x-small);
}

.wspolnota .wp-social-link svg {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.1em;
}

.wspolnota .wp-block-social-links .wp-social-link .wp-block-social-link-label {
	margin: 0;
	font-size: inherit;
	text-decoration: underline;
}

.wspolnota .wp-social-link .wp-block-social-link-anchor:hover {
	color: var(--wp--custom--color--accent-hover);
}

/* Fold-out sections (Details block)
 * "sekcja-rozwijana": large card (Sakramenty); "wiecej": small "Czytaj więcej".
 ---------------------------------------------------------------------------- */
.sekcja-rozwijana {
	padding: 0 var(--wp--preset--spacing--card);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--surface);
}

.sekcja-rozwijana[open] {
	padding-bottom: var(--wp--preset--spacing--x-large);
}

.sekcja-rozwijana > summary,
.wiecej > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--medium);
	cursor: pointer;
	list-style: none;
}

.sekcja-rozwijana > summary::-webkit-details-marker,
.wiecej > summary::-webkit-details-marker {
	display: none;
}

.sekcja-rozwijana > summary {
	min-height: 4.5rem;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
}

.sekcja-rozwijana > summary::after {
	content: "+";
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
}

.sekcja-rozwijana[open] > summary::after {
	content: "−";
}

/* Sub-headings inside a fold-out section ("Dokumenty wymagane przy zgłoszeniu chrztu:"):
   real headings for screen readers, but they look like bold text. */
.sekcja-rozwijana h3 {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body);
}

.wiecej {
	padding-top: var(--wp--preset--spacing--small);
	border-top: 1px solid var(--wp--custom--color--divider);
}

.wiecej > summary {
	justify-content: flex-start;
	min-height: 2.75rem;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.wiecej[open] > summary {
	margin-bottom: var(--wp--preset--spacing--small);
}

/* Google map (Kontakt). The map itself is added on the server (show_map() in
   inc/wyswietlanie.php) in place of the group "mapa-google__okno".
 ---------------------------------------------------------------------------- */
.mapa-google {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.mapa-google > .mapa-google__okno {
	flex: 1 1 auto;
}

.mapa-google__okno {
	min-height: clamp(20rem, 60vw, 28.75rem);
	background: var(--wp--custom--color--divider);
}

.mapa-google__okno iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border: 0;
}

.mapa-google__stopka {
	border-top: 1px solid var(--wp--preset--color--border-light);
}

/* Bank accounts (Kontakt) */
.iban {
	font-family: var(--wp--preset--font-family--monospace);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.04em;
}