/* =========================================================================
   Batley Pharmacy - the services index pages

   The four pages "View All Services" opens from the header (the designs of
   2026-10-29): a hero and the services as cards. Loaded by enqueue.php on
   pages using template-service-index.php and on nothing else. Read off the
   1440 exports over the 1280 container.

   The hero: a 1280x395 panel with 24px corners in the pale blue #cae2fe,
   40px under the header; the heading Manrope SemiBold 60/60 in the navy
   and the paragraph IBM Plex Sans 18/28, both 30px in and the heading 50
   down, on a 580px measure; the photograph the right 756 of the panel,
   fading in from the blue; and along the left of the foot a 32px step
   where the page shows through, its right end curving down into the
   panel over 120px - that curve is in the export, so the CSS step runs
   only as far as the picture and the two meet on one line.

   The cards: 416x162, three across 16px apart and 20px between rows, 80px
   under the hero; a pale blue ground #f5f9fe on a hairline #cfe0f5 with
   12px corners; the picture 140 square at 12px in, grey #eef0f2 until it
   is set; the tag a pill at the top right, 12px in blue on the paler blue;
   the name 18 SemiBold 38px down beside the picture, the line 13/16 in
   grey, the link 14 medium in the brand blue with a 14px arrow.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Hero
   ---------------------------------------------------------------------- */

.si-hero {
	padding-block: 2.5rem 0;
}

.si-hero__panel {
	position: relative;
	isolation: isolate;
	display: flex;
	min-height: 24.6875rem;
	overflow: hidden;
	border-radius: 1.5rem;
	background: #cae2fe;
}

/* The photograph: the right 756 of the panel (the export from 604, where
   the fade has all but reached the blue; the design's own type, which
   reaches 690, is blended out of the cut), as tall as the panel. Under
   1440 the panel is narrower than the design and the picture, scaled to
   the panel's height, is cropped on its right rather than squeezed. */
.si-hero__photo {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: 59.0625%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* The seam: the panel's own blue laid over the picture's left 100px,
   thinning to nothing, so the cut's edge never shows. It stops above the
   step, whose curve and white are the export's own. */
.si-hero__panel::before {
	position: absolute;
	top: 0;
	bottom: 2rem;
	left: 40.9375%;
	z-index: 1;
	width: 6.25rem;
	background: linear-gradient(90deg, #cae2fe 0%, rgba(202, 226, 254, 0) 100%);
	content: "";
	pointer-events: none;
}

/* The step: the page's own ground under the left of the panel, 32px deep,
   as far as the picture, which carries it on to its curve and the foot. */
.si-hero__panel::after {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 40.9375%;
	height: 2rem;
	background: var(--color-background);
	content: "";
	pointer-events: none;
}

/* Without a picture the step would end in mid-air, so it takes the whole
   foot, with the design's curve drawn on its right end. */
.si-hero__panel--no-media::before {
	display: none;
}

.si-hero__panel--no-media::after {
	width: 60%;
	border-start-end-radius: 3.75rem 2rem;
}

.si-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	width: 100%;
	max-width: 40rem;
	padding: 3.125rem 1.875rem 4rem;
}

/* The design system's "6XL/Semi Bold": Manrope 600, 60 on a 100% line. */
.si-hero__title {
	margin: 0;
	color: #143559;
	font-family: var(--font-display);
	font-size: 3.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: 0;
	/* The editor's line breaks are the design's. */
	white-space: pre-line;
	text-wrap: initial;
}

/* IBM Plex Sans 18/28 in #232323, as every service hero paragraph. */
.si-hero__text {
	margin: 0;
	max-width: 36.25rem;
	color: #232323;
	font-family: var(--font-button);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

/* -------------------------------------------------------------------------
   2. Service cards
   ---------------------------------------------------------------------- */

.si-cards {
	padding-block: 5rem 0;
}

/* 40px to the footer, as the design has it, rather than the page's gap. */
.page-template-template-service-index .site-footer {
	margin-top: 2.5rem;
}

.si-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Fading up (the reveal in components.css): across each row in turn. */
.si-card:nth-child(3n + 2) {
	--reveal-delay: 0.1s;
}

.si-card:nth-child(3n) {
	--reveal-delay: 0.2s;
}

.si-card {
	position: relative;
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	min-height: 10.125rem;
	padding: 0.625rem 0.75rem 0.75rem;
	border: 1px solid #b5d5fb;
	border-radius: 0.75rem;
	background: #f5f9fe;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.si-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 42, 74, 0.1);
}

.si-card__media {
	flex: none;
	width: 8.75rem;
	height: 8.75rem;
	overflow: hidden;
	border-radius: 0.5rem;
	background: #eef0f2;
}

.si-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The tag: a pill 11px down and 12px in from the card's top right. */
.si-card__badge {
	position: absolute;
	top: 0.6875rem;
	right: 0.75rem;
	padding: 0.125rem 0.625rem;
	border: 1px solid #b5d5fb;
	border-radius: var(--radius-pill);
	background: #eaf3fe;
	color: #3079c1;
	font-family: var(--font-display);
	font-size: 0.75rem;
	line-height: 1.4;
	white-space: nowrap;
}

.si-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	min-width: 0;
	padding: 2.375rem 0.5rem 0 0;
}

/* The name, Manrope SemiBold 18. Its own size: the site's h2 rule would
   set it at 48. */
.si-card__title {
	margin: 0;
	color: #1c2023;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	letter-spacing: 0;
	text-wrap: initial;
}

/* Held to the design's two lines, so every card in a row stays 162 tall;
   the whole line is still in the page for anyone reading it aloud. */
.si-card__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: #848a8f;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	line-height: 1.23;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.si-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 0.75rem;
	color: var(--color-primary);
	font-family: var(--font-button);
	font-size: 0.875rem;
	font-weight: var(--fw-medium);
	line-height: 1.3;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.si-card__link:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.si-card__link svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* -------------------------------------------------------------------------
   Narrower screens
   ---------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
	.si-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.si-hero__title {
		font-size: 3rem;
	}
}

/* The hero stacks: the copy on the blue, the picture under it, the step
   gone - a notch under a picture reads as a mistake. */
@media (max-width: 991.98px) {
	.si-hero__panel {
		flex-direction: column;
		min-height: 0;
	}

	/* Cropped from the top: the box is wider than the picture's shape, so
	   the picture is scaled to its width and its foot - the step cut into
	   the export - falls outside. */
	.si-hero__photo {
		position: static;
		width: 100%;
		height: 15rem;
		object-position: center top;
	}

	.si-hero__panel::before,
	.si-hero__panel::after {
		display: none;
	}

	.si-hero__copy {
		max-width: none;
		padding: 2.5rem 1.5rem 2rem;
	}

	.si-hero__title {
		white-space: normal;
	}

	.si-cards {
		padding-block-start: 3rem;
	}
}

@media (max-width: 639.98px) {
	.si-hero {
		padding-block-start: 1.5rem;
	}

	.si-hero__panel {
		border-radius: 1rem;
	}

	.si-hero__copy {
		gap: 1rem;
		padding: 1.75rem 1.0625rem 1.75rem;
	}

	.si-hero__title {
		font-size: 2.25rem;
	}

	.si-hero__text {
		font-size: 1rem;
		line-height: 1.6;
	}

	.si-hero__photo {
		height: 10.5rem;
	}

	.si-cards__grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.si-card {
		gap: 0.875rem;
		min-height: 0;
	}

	.si-card__media {
		width: 6.5rem;
		height: 6.5rem;
	}

	.si-card__body {
		padding-top: 1.875rem;
	}
}