/*
 * Blok: flexisnap/card-grid (i jego karty)
 *
 * Odmiany siatki kart z progami makiety. Karta to `li.flexisnap-card`,
 * warstwa `__inner` ma `display: contents`, treść w `__body`. Reguły na
 * siatkę mają dwie klasy, bo rdzeń daje jej klasę układu o wadze jednej,
 * a arkusz bloku idzie przed `global-styles`.
 */

/* --- Kafle z ikoną (makieta: _section-kafle.scss) --- */

.wp-block-flexisnap-card-grid.is-style-kafle-z-ikona {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-13);
}

@media (min-width: 768px) {

	.wp-block-flexisnap-card-grid.is-style-kafle-z-ikona {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Pięć kafli: dwa szerokie po 3 z 6 kolumn, reszta po 2. */
	.wp-block-flexisnap-card-grid.is-style-kafle-z-ikona:has(> .is-style-karta-szeroka) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.is-style-kafle-z-ikona:has(> .is-style-karta-szeroka) > .flexisnap-card {
		grid-column: span 2;
	}

	.is-style-kafle-z-ikona > .flexisnap-card.is-style-karta-szeroka {
		grid-column: span 3;
	}
}

.is-style-kafle-z-ikona > .flexisnap-card {
	padding: var(--space-f8) var(--space-f9) var(--space-f10);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-7);
	background: var(--c-surface);
}

.is-style-kafle-z-ikona .flexisnap-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.is-style-kafle-z-ikona .flexisnap-card__body > *,
.is-style-udogodnienia .flexisnap-card__body > *,
.is-style-karty-godzin .flexisnap-card__body > *,
.is-style-zasady-zapisow .flexisnap-card__body > * {
	margin: 0;
}

.is-style-kafle-z-ikona .wp-block-icon,
.is-style-udogodnienia .wp-block-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--radius-6);
	background: var(--c-tint);
	color: var(--c-primary-hover);
}

.is-style-kafle-z-ikona .wp-block-icon svg,
.is-style-udogodnienia .wp-block-icon svg {
	width: 1.625rem;
	height: 1.625rem;
}

/* W kaflach miękki dywiz działa sam (makieta: `­` bez `word-split`), więc
   słowo dzieli się w wierszu, w którym się zaczyna. */
.is-style-kafle-z-ikona .word-split {
	display: inline;
}

.is-style-kafle-z-ikona .is-style-nadtytul {
	color: var(--c-primary-hover);
}

.is-style-kafle-z-ikona .wp-block-heading {
	overflow-wrap: break-word;
	hyphens: manual;
	font-size: var(--text-h3);
	line-height: 1.25;
	text-wrap: balance;
}

.is-style-kafle-z-ikona .wp-block-paragraph:not(.is-style-nadtytul),
.is-style-kafle-z-ikona p:not(.is-style-nadtytul) {
	color: var(--c-text-soft);
	font-size: var(--text-5);
	line-height: 1.6;
}

/* --- Udogodnienia: 1 kolumna do 480 px, 2 do 1024 px, wyżej 4 --- */

.wp-block-flexisnap-card-grid.is-style-udogodnienia {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-9);
}

@media (min-width: 480px) {

	.wp-block-flexisnap-card-grid.is-style-udogodnienia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {

	.wp-block-flexisnap-card-grid.is-style-udogodnienia {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-13);
	}
}

.is-style-udogodnienia > .flexisnap-card {
	padding: var(--space-9) var(--space-11);
	overflow-wrap: break-word;
	border: 1px solid var(--c-border-soft);
	border-radius: var(--radius-7);
	background: var(--c-tint-card);
	color: var(--c-ink);
	font-weight: 600;
	line-height: 1.35;
}

.is-style-udogodnienia .flexisnap-card__body {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-9);
}

/* --- Karty godzin (makieta: `.hours-card`) --- */

.wp-block-flexisnap-card-grid.is-style-karty-godzin {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-13);
}

@media (min-width: 768px) and (max-width: 1023.98px) {

	.wp-block-flexisnap-card-grid.is-style-karty-godzin {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.is-style-karty-godzin > .flexisnap-card {
	padding: var(--space-15) var(--space-16) var(--space-16);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-7);
	background: var(--c-surface);
}

.is-style-karty-godzin .is-style-nadtytul {
	color: var(--c-primary-hover);
}

.is-style-karty-godzin .flexisnap-card__body > .is-style-godzina {
	margin-top: var(--space-5);
	color: var(--c-ink);
	font-family: var(--font-serif);
	font-variant-numeric: tabular-nums;
}

.is-style-karty-godzin .flexisnap-card__body > .is-style-godzina + * {
	margin-top: var(--space-7);
	color: var(--c-text-soft);
}

/* --- Zasady zapisów: ptaszek w kole (makieta: `.steps`) --- */

.wp-block-flexisnap-card-grid.is-style-zasady-zapisow {
	gap: var(--space-11);
}

.is-style-zasady-zapisow .flexisnap-card__body {
	grid-template-columns: 2.75rem minmax(0, 1fr);
	align-items: start;
	gap: var(--space-2) var(--space-9);
}

/* Ptaszek, nie numer: to niezależne zasady, nie kolejne kroki. */
.is-style-zasady-zapisow .flexisnap-card__body::before {
	content: "✓";
	display: inline-flex;
	grid-row: 1 / span 2;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-circle);
	background: var(--c-primary);
	color: var(--c-surface);
	font-size: var(--text-8);
	font-weight: 700;
}

.is-style-zasady-zapisow .flexisnap-card__body > * {
	grid-column: 2;
}

.is-style-zasady-zapisow .wp-block-heading {
	color: var(--c-ink);
	font-family: inherit;
	font-size: var(--text-6);
	font-weight: 600;
	line-height: 1.6;
}

.is-style-zasady-zapisow .flexisnap-card__body > p {
	color: var(--c-text-soft);
}

/* Karty godzin w pasie rejestracji układa blok `spzoz/pas-rejestracji`. */

/* Numer jako odnośnik krojem godziny (makieta: `.hours-card__time--tel`). */
.is-style-karty-godzin .is-style-godzina a {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.is-style-karty-godzin .is-style-godzina a:hover {
	color: var(--c-primary-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* --- Kanały rejestracji (makieta: _section-kanaly.scss, `channels--2`):
   jedna kolumna, od 50rem szerokości bloku telefon 2/3 i osobiście 1/3 --- */

.wp-block-flexisnap-card-grid.is-style-kanaly {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-13);
}

@container (min-width: 50rem) {

	.wp-block-flexisnap-card-grid.is-style-kanaly {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.is-style-kanaly > .flexisnap-card {
	min-width: 0;
	padding: var(--space-13) var(--space-15) var(--space-15);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-7);
	background: var(--c-surface);
}

.is-style-kanaly .flexisnap-card__body {
	gap: var(--space-11);
}

.is-style-kanaly .flexisnap-card__body > * {
	margin: 0;
}

.is-style-kanaly .flexisnap-card__body > .wp-block-heading {
	color: var(--c-ink);
}

.is-style-kanaly .flexisnap-card__body > p {
	color: var(--c-text-soft);
}

.is-style-kanaly .flexisnap-card__body > p strong {
	color: var(--c-ink);
}

/* --- Zakres świadczeń: kafel zwarty z ptaszkiem w kole (makieta:
   `.tile--compact`) --- */

.wp-block-flexisnap-card-grid.is-style-karty-zwarte {
	gap: var(--space-9);
}

.is-style-karty-zwarte > .flexisnap-card {
	padding: var(--space-9) var(--space-13);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-7);
	background: var(--c-surface);
}

.is-style-karty-zwarte .flexisnap-card__body {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-9);
}

.is-style-karty-zwarte .flexisnap-card__body > * {
	margin: 0;
}

.is-style-karty-zwarte .wp-block-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-circle);
	background: var(--c-primary);
	color: var(--c-surface);
}

.is-style-karty-zwarte .wp-block-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.is-style-karty-zwarte .flexisnap-card__body > p {
	color: var(--c-text);
	font-size: var(--text-5);
	line-height: 1.6;
}

/* --- Lekarze: karta pionowa, portret 4:3 albo ikona osoby (makieta:
   `.doctor-card`); jedna kolumna, od 480 px dwie, od 640 px wg liczby --- */

.wp-block-flexisnap-card-grid.is-style-karty-osob {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-9);
}

@media (min-width: 480px) {

	.wp-block-flexisnap-card-grid.is-style-karty-osob {
		grid-template-columns: repeat(auto-fill, minmax(max(11rem, 40%), 1fr));
	}
}

@media (min-width: 640px) {

	.wp-block-flexisnap-card-grid.is-style-karty-osob {
		gap: var(--space-13);
	}

	.wp-block-flexisnap-card-grid.is-style-karty-osob:has(> :nth-child(3)) {
		grid-template-columns: repeat(auto-fill, minmax(max(11rem, 30%), 1fr));
	}
}

.is-style-karty-osob > .flexisnap-card {
	overflow: hidden;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-7);
	background: var(--c-surface);
}

.is-style-karty-osob .flexisnap-card__media {
	aspect-ratio: 4 / 3;
	margin: 0;
	background: var(--c-tint);
}

.is-style-karty-osob .flexisnap-card__media img {
	object-fit: cover;
}

.is-style-karty-osob .flexisnap-card__body {
	gap: var(--space-2);
	min-width: 0;
	padding: var(--space-7) var(--space-7) var(--space-9);
}

.is-style-karty-osob .flexisnap-card__body > * {
	margin: 0;
}

/* Bez zdjęcia: ikona osoby na tle w kadrze 4:3 nad tekstem. */
.is-style-karty-osob .flexisnap-card__body > .wp-block-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: calc(-1 * var(--space-7)) calc(-1 * var(--space-7)) calc(var(--space-7) - var(--space-2));
	background: var(--c-tint);
	color: var(--c-primary-hover);
	aspect-ratio: 4 / 3;
}

.is-style-karty-osob .flexisnap-card__body > .wp-block-icon svg {
	width: 3.5rem;
	height: 3.5rem;
}

.is-style-karty-osob .wp-block-heading {
	overflow-wrap: break-word;
	font-size: var(--text-8);
	line-height: 1.3;
}

.is-style-karty-osob .flexisnap-card__body > p {
	color: var(--c-text-soft);
	font-size: var(--text-5);
	line-height: 1.6;
}

.is-style-karty-osob .flexisnap-card__body > .is-style-przypis {
	color: var(--c-text-muted);
	font-size: var(--text-3);
}

@media (min-width: 640px) {

	.is-style-karty-osob .flexisnap-card__body {
		padding: var(--space-9) var(--space-9) var(--space-11);
	}

	.is-style-karty-osob .flexisnap-card__body > .wp-block-icon {
		margin: calc(-1 * var(--space-9)) calc(-1 * var(--space-9)) calc(var(--space-9) - var(--space-2));
	}
}

/* Kafle zwarte: jedna kolumna, dwie od 768 px; od 1024 px liczba kolumn
   z ustawienia bloku (Układ, Kolumny: 2 w kolumnie poradni, 3 na stronie
   placówki), więc te reguły kończą się przed 1024 px. */
@media (max-width: 767.98px) {

	.wp-block-flexisnap-card-grid.is-style-karty-zwarte {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {

	.wp-block-flexisnap-card-grid.is-style-karty-zwarte {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Karty kontaktu (makieta: `.contact-cards`): kolumny od 18rem
   wypełniające rząd, tytuł, dopisek, pozycje z ikoną --- */

.wp-block-flexisnap-card-grid.is-style-karty-kontaktu {
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--space-13);
}

.is-style-karty-kontaktu > .flexisnap-card {
	padding: var(--space-f8) var(--space-f9) var(--space-f10);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-7);
	background: var(--c-surface);
}

.is-style-karty-kontaktu .flexisnap-card__body {
	gap: var(--space-5);
}

.is-style-karty-kontaktu .flexisnap-card__body > * {
	margin: 0;
}

.is-style-karty-kontaktu .wp-block-heading {
	text-wrap: balance;
}

.is-style-karty-kontaktu .flexisnap-card__body > .is-style-przypis {
	color: var(--c-text-muted);
	font-size: var(--text-3);
	line-height: 1.6;
}