/*
 * KPC Hospital Block: picture(s) left, right or above a piece of text; several
 * pictures one after another or as a carousel. Loaded on the live page and in
 * the editor, so the preview is the real layout.
 *
 * --kpc-hb-w and --kpc-hb-h are set inline by the block when a picture width
 * or height is chosen. Unset, the picture takes its natural size: about
 * two-fifths of the row beside text, the full width in the middle, its own
 * proportions. --kpc-hb-bw and --kpc-hb-bh are the block's own width and
 * minimum height, likewise only set when chosen.
 */

.kpc-hblock {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(20px, 3vw, 44px);
	align-items: start;
	/* With a minimum height taller than the content, the content sits in the
	   middle of the block rather than at its top. */
	align-content: center;
	box-sizing: border-box;
	max-width: var(--kpc-hb-bw, none);
	min-height: var(--kpc-hb-bh, 0);
}

/* A block narrower than the row: where it sits within it. */
.kpc-hblock--align-left {
	margin-right: auto;
}

.kpc-hblock--align-center {
	margin-left: auto;
	margin-right: auto;
}

.kpc-hblock--align-right {
	margin-left: auto;
}

/* With a background colour or gradient the block is a panel, so it gets
   padding and a soft edge; the block's own Padding setting overrides. */
.kpc-hblock.has-background {
	padding: clamp(20px, 3vw, 36px);
	border-radius: 6px;
}

/* A chosen text colour reaches every piece of text inside. Links follow it
   too (kept low in specificity so a chosen Link colour still wins). */
.kpc-hblock.has-text-color .kpc-hblock__body :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th) {
	color: inherit;
}

:where(.kpc-hblock.has-text-color) .kpc-hblock__body a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* Extra breathing room between the block and the reading column around it,
   the same as the theme gives columns and media + text. */
.kpc-prose > .kpc-hblock {
	margin-top: clamp(28px, 4vw, 56px);
	margin-bottom: clamp(28px, 4vw, 56px);
}

/* ------------------------------------------------------------- positions */

/* Beside text the picture is capped at 65% of the row however wide it was
   set, so the text always keeps a readable column on tablets. */
.kpc-hblock--left {
	grid-template-columns: minmax(0, min(var(--kpc-hb-w, 42%), 65%)) minmax(0, 1fr);
}

.kpc-hblock--right {
	grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--kpc-hb-w, 42%), 65%));
}

.kpc-hblock--right .kpc-hblock__media {
	order: 2;
}

.kpc-hblock--middle .kpc-hblock__media {
	width: min(var(--kpc-hb-w, 100%), 100%);
	justify-self: center;
}

/* Text under a centred picture reads as one column, so it keeps the theme's
   measure and sits centred beneath. */
.kpc-hblock--middle .kpc-hblock__body {
	width: 100%;
	max-width: 44rem;
	justify-self: center;
}

/* -------------------------------------------------------------- pictures */

.kpc-hblock__media {
	min-width: 0;
	max-width: 100%;
}

/* Pictures one after another. With "Size each picture separately" a picture
   carries its own --kpc-hb-iw / --kpc-hb-ih; otherwise it fills the column
   and takes the shared height. A narrower picture sits against the text
   side, or centred in the middle. */
.kpc-hblock__stack {
	display: grid;
	gap: 14px;
}

.kpc-hblock__stack > * {
	width: min(var(--kpc-hb-iw, 100%), 100%);
}

.kpc-hblock--left .kpc-hblock__stack > * {
	justify-self: start;
}

.kpc-hblock--right .kpc-hblock__stack > * {
	justify-self: end;
}

.kpc-hblock--middle .kpc-hblock__stack > * {
	justify-self: center;
}

.kpc-hblock__slide {
	margin: 0;
}

.kpc-hblock__img {
	display: block;
	width: 100%;
	height: var(--kpc-hb-ih, var(--kpc-hb-h, auto));
	object-fit: cover;
	border-radius: 4px;
}

/* ------------------------------- side by side, wrapping when out of room */

/* Pictures in a row, each the shared width (or its own), moving on to the
   next line when the next one would not fit. */
.kpc-hblock--row .kpc-hblock__stack {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-content: flex-start;
}

/* A plain width, capped separately: a percentage inside the width itself
   would leave the figure with no size of its own while the column is being
   measured (its picture is out of flow when a height is set), and the
   column would collapse to nothing. */
.kpc-hblock--row .kpc-hblock__stack > * {
	flex: 0 0 auto;
	width: var(--kpc-hb-iw, var(--kpc-hb-w, 240px));
	max-width: 100%;
}

/* Beside text the row takes the room it needs, up to 65% of the block, and
   the pictures wrap inside that. */
.kpc-hblock--row.kpc-hblock--left {
	grid-template-columns: fit-content(65%) minmax(0, 1fr);
}

.kpc-hblock--row.kpc-hblock--right {
	grid-template-columns: minmax(0, 1fr) fit-content(65%);
}

/* In the middle the row spans the block, centred. */
.kpc-hblock--row.kpc-hblock--middle .kpc-hblock__media {
	width: 100%;
}

.kpc-hblock--row.kpc-hblock--middle .kpc-hblock__stack {
	justify-content: center;
}

/* ------------------------------------- beside text: pictures fill the row */

/* The row is as tall as the text or the pictures, whichever is taller, and
   the pictures stretch to fill it (cropping to fit), so the text never runs
   on below them or starts above them. With a set height (--fixed-h) the
   picture is taken out of the height calculation and the set height is the
   least the picture can be. Several pictures share the height equally. */
.kpc-hblock--fill {
	align-items: stretch;
}

.kpc-hblock--fill .kpc-hblock__media {
	display: flex;
	flex-direction: column;
}

.kpc-hblock--fill .kpc-hblock__stack {
	flex: 1 1 auto;
	grid-auto-rows: minmax(0, 1fr);
}

.kpc-hblock--fill .kpc-hblock__carousel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.kpc-hblock--fill .kpc-hblock__track {
	flex: 1 1 auto;
	grid-template-rows: minmax(0, 1fr);
}

.kpc-hblock--fill .kpc-hblock__slide {
	position: relative;
	min-height: var(--kpc-hb-h, 0);
}

.kpc-hblock--fill .kpc-hblock__img {
	height: 100%;
}

.kpc-hblock--fill.kpc-hblock--fixed-h .kpc-hblock__img {
	position: absolute;
	inset: 0;
}

/* Side by side: the lines of pictures share the text's height and each
   picture stretches to its line. */
.kpc-hblock--row.kpc-hblock--fill .kpc-hblock__stack {
	align-content: stretch;
	align-items: stretch;
}

/* Pictures sized one by one keep their sizes; beside text they are spread
   down the height of the text instead, so the last one ends level with it. */
.kpc-hblock--each {
	align-items: stretch;
}

.kpc-hblock--each .kpc-hblock__media {
	display: flex;
	flex-direction: column;
}

.kpc-hblock--each .kpc-hblock__stack {
	flex: 1 1 auto;
	align-content: space-between;
}

.kpc-hblock--row.kpc-hblock--each .kpc-hblock__stack {
	align-items: flex-start;
}

/* ------------------------------------------------------------------ text */

/* Same rhythm as the reading column, minus the centred measure .kpc-prose
   gives its own direct children — here the text fills its column. A long
   unbroken word or link wraps rather than pushing out of the block. */
.kpc-hblock__body {
	min-width: 0;
	overflow-wrap: anywhere;
}

.kpc-hblock__body > * {
	margin-top: 0;
	margin-bottom: 1.1em;
}

.kpc-hblock__body > :last-child {
	margin-bottom: 0;
}

.kpc-hblock__body h2 {
	font-size: 1.6rem;
}

.kpc-hblock__body h3 {
	font-size: 1.2rem;
}

/* -------------------------------------------------------------- carousel */

.kpc-hblock__carousel {
	position: relative;
}

.kpc-hblock__track {
	display: grid;
}

/* Every picture in the same cell; the carousel is as tall as its tallest
   picture, so a set height (see --kpc-hb-h) keeps it perfectly steady. */
.kpc-hblock__carousel .kpc-hblock__slide {
	grid-area: 1 / 1;
	transition: opacity .5s ease, visibility .5s ease;
}

/* Only the current picture shows — when a script is there to move between
   them: the theme marks <html> with .js, and the editor preview with
   .is-editor. Otherwise every picture shows one after another. */
.js .kpc-hblock__carousel .kpc-hblock__slide:not(.is-active),
.kpc-hblock__carousel.is-editor .kpc-hblock__slide:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}

html:not(.js) .kpc-hblock__carousel:not(.is-editor) .kpc-hblock__slide {
	grid-area: auto;
}

html:not(.js) .kpc-hblock__carousel:not(.is-editor) .kpc-hblock__arrow,
html:not(.js) .kpc-hblock__carousel:not(.is-editor) .kpc-hblock__dots {
	display: none;
}

.kpc-hblock__arrow {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, .38);
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 50%;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .18s ease;
}

.kpc-hblock__arrow--prev {
	left: 12px;
}

.kpc-hblock__arrow--next {
	right: 12px;
}

.kpc-hblock__arrow:hover,
.kpc-hblock__arrow:focus-visible {
	background: var(--kpc-primary, #b60000);
}

.kpc-hblock__dots {
	position: absolute;
	right: 0;
	bottom: 12px;
	left: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.kpc-hblock__dot {
	width: 26px;
	height: 5px;
	padding: 0;
	background: rgba(255, 255, 255, .55);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: background .2s ease;
}

.kpc-hblock__dot.is-active {
	background: var(--kpc-primary, #b60000);
}

.kpc-hblock__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- phones */

/* One column: the picture first, then the text, whichever side it was on. */
@media (max-width: 760px) {
	.kpc-hblock--left,
	.kpc-hblock--right {
		grid-template-columns: minmax(0, 1fr);
	}

	.kpc-hblock--right .kpc-hblock__media {
		order: 0;
	}

	.kpc-hblock--left .kpc-hblock__media,
	.kpc-hblock--right .kpc-hblock__media {
		width: min(var(--kpc-hb-w, 100%), 100%);
		justify-self: center;
	}

	/* A row of pictures spans the phone's width and wraps as needed. */
	.kpc-hblock--row.kpc-hblock--left,
	.kpc-hblock--row.kpc-hblock--right {
		grid-template-columns: minmax(0, 1fr);
	}

	.kpc-hblock--row .kpc-hblock__media {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kpc-hblock__carousel .kpc-hblock__slide,
	.kpc-hblock__arrow,
	.kpc-hblock__dot {
		transition: none;
	}
}