/* =========================================================================
   Batley Pharmacy — sections
   Page-level layout: the home page composition, post listings, article
   bodies, footer, and the states for empty results and errors.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Home page — shared pieces
   ---------------------------------------------------------------------- */

/* .section pads top and bottom, which is right for a template that holds one
   of them. The home page stacks nine, and two neighbours would then contribute
   a full gap each — twice the intended rhythm. Dropping the top padding when a
   section follows another leaves exactly one gap between them, and a page with
   a single section is untouched. */
.section + .section {
	padding-top: 0;
}


/* Several of the exported photographs carry their rounded corners and their
   notched corner in the PNG's alpha channel rather than as a CSS shape. The
   default .media fills its box with a grey placeholder, which would show
   through the notch as a grey wedge, and its own border-radius would shave
   corners the artwork has already drawn. Both are switched off here so the
   cut-out reads against whatever is behind it. */
.media--bare {
	background: transparent;
	border-radius: 0;
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

/*
   The composition is an overlay on hero-corridor.png. That export is not a
   plain rectangle: its alpha channel carries the design's rounded corners, the
   narrow slot on the left, and the big curved cut-out at the bottom left that
   the lead paragraph sits inside. So the shape is never redrawn here — the
   photograph is the shape, and everything below only places content against it
   using percentages of the frame.

   Percentages alone would drift, though: as the frame narrows the boxes shrink
   but the type would not, and the overlay would burst its bounds. The frame is
   therefore a container and every overlaid size is in cqw, so the entire
   composition scales as one piece. All the magic numbers below are measured
   from the 1374x775 export: 3.64cqw, for instance, is the Figma's 50px
   heading over that width.

   Below 992px this is all switched off and the section stacks — an overlay
   this dense cannot survive a phone. See responsive.css.
*/

.hero {
	padding-block: clamp(1.5rem, 0.9rem + 2.6vw, 3rem) var(--section-gap);
}

.hero__frame {
	container-type: inline-size;
	position: relative;
	/* The cut-out is transparent, so the lead paragraph inside it can sit
	   slightly past the photograph's own bottom edge, exactly as it does in
	   the design. */
	overflow: visible;
}

.hero__photo {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Left-hand panel: heading, button, review card ---- */

.hero__panel {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero__panel > * {
	pointer-events: auto;
}

.hero__title {
	position: absolute;
	left: 6.6%;
	top: 13%;
	/* Narrow enough that the line breaks after "right", as the Figma does. */
	width: 44%;
	margin: 0;
	color: var(--color-heading);
	/* The Figma's 50px heading over the 1374px frame, scaling with it. */
	font-size: 3.64cqw;
	font-weight: var(--fw-medium);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-heading);
	text-wrap: initial;
}

.hero__accent {
	color: var(--color-brand-blue);
}

.hero__cta {
	position: absolute;
	left: 6.6%;
	top: 40.5%;
	display: inline-flex;
	align-items: center;
	gap: 1.1cqw;
	padding: 0.6cqw 0.6cqw 0.6cqw 1.9cqw;
	background: var(--color-primary);
	border-radius: var(--radius-pill);
	color: var(--color-on-primary);
	font-family: var(--font-button);
	font-size: 1.18cqw;
	font-weight: var(--fw-medium);
	line-height: 1.25;
	letter-spacing: var(--ls-button);
	white-space: nowrap;
	box-shadow: var(--shadow-primary);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.hero__cta:hover {
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
	transform: translateY(-2px);
}

.hero__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6cqw;
	height: 2.6cqw;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-primary);
}

.hero__cta-icon svg {
	width: 1.3cqw;
	height: 1.3cqw;
}

/*
   The review card is a stepped silhouette: a narrower white box holding the
   faces, a wider white box holding the text, and the circular link floating
   in the gap the step leaves at the top right. Two boxes rather than one
   with a masked corner, because the gap has to show the photograph through
   it — per the client's design export.
*/
.hero__proof {
	position: absolute;
	left: 6.8%;
	top: 54.5%;
	width: 20.5%;
	/* Radius of the concave curve where the narrow faces box widens into the
	   text box. Overridden in rem below the layout breakpoint. */
	--proof-step: 0.95cqw;
	--proof-waist: 71%;
}

.hero__proof-faces {
	width: var(--proof-waist);
	padding: 1.7cqw 1.7cqw 0.35cqw;
	background: var(--color-surface);
	border-radius: 1.15cqw 1.15cqw 0 0;
}

.hero__faces {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__faces li + li {
	/* Overlap, so four faces read as a group rather than a row of buttons. */
	margin-left: -0.65cqw;
}

.hero__faces img {
	width: 3.15cqw;
	height: 3.15cqw;
	border-radius: 50%;
	border: 0.2cqw solid var(--color-surface);
	object-fit: cover;
	background: var(--color-surface-muted);
}

.hero__proof-link {
	position: absolute;
	right: -0.3cqw;
	top: -0.1cqw;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5.3cqw;
	height: 5.3cqw;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-heading);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

a.hero__proof-link:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.hero__proof-link svg {
	width: 1.75cqw;
	height: 1.75cqw;
}

.hero__proof-text {
	position: relative;
	margin: 0;
	padding: 1.2cqw 1.7cqw 2cqw;
	background: var(--color-surface);
	/* Square only where it meets the faces box above it. */
	border-radius: 0 1.15cqw 1.15cqw 1.15cqw;
	color: var(--color-heading);
	font-size: 1.38cqw;
	line-height: 1.66;
}

/*
 * The concave curve that carries the faces box's right edge out to the wider
 * text box, so the two read as one moulded shape rather than a hard step. A
 * quarter disc is cut out of a small white square sitting in the inner corner.
 */
.hero__proof-text::before {
	content: "";
	position: absolute;
	left: var(--proof-waist);
	bottom: 100%;
	width: var(--proof-step);
	height: var(--proof-step);
	background: radial-gradient(
		circle var(--proof-step) at 100% 0,
		transparent calc(var(--proof-step) - 0.5px),
		var(--color-surface) var(--proof-step)
	);
}

/* ---- Claims along the foot of the photograph ---- */

.hero__stats {
	position: absolute;
	left: 49.3%;
	right: 8%;
	top: 89.2%;
	display: flex;
	justify-content: space-between;
	gap: 2cqw;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__stat {
	display: flex;
	flex-direction: column;
	gap: 0.35cqw;
}

.hero__stat-value {
	color: #ffffff;
	font-size: 1.35cqw;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	/* The photograph behind this is busy and bright in places. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.hero__stat-label {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.1cqw;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---- Lead paragraph, inside the cut-out ---- */

.hero__lead {
	position: absolute;
	left: 10.2%;
	top: 94%;
	width: 37%;
	margin: 0;
	color: var(--color-text);
	font-size: 1.31cqw;
	line-height: var(--lh-lead);
}

/* ---- Scroll cue, in the rounded bottom-right corner ---- */

.hero__scroll {
	position: absolute;
	right: 1.2%;
	bottom: -2.5%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5.1cqw;
	height: 5.1cqw;
	border: 1px dashed var(--color-divider);
	border-radius: 50%;
	color: var(--color-heading);
	background: var(--color-surface);
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.hero__scroll:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	transform: translateY(3px);
}

.hero__scroll svg {
	width: 1.6cqw;
	height: 1.6cqw;
}

/* -------------------------------------------------------------------------
   "Care you can book today"

   Copy on the left, then three columns that alternate a photograph with a
   coloured panel. The staggered edges are not hard-coded: in the design each
   photograph is simply its own picture at its own aspect ratio, and the panel
   sharing that column absorbs whatever height is left. So the photographs get
   an aspect-ratio and the panels get flex: 1, the three columns stretch to a
   common height, and the composition falls out on its own. Nothing here needs
   a fixed height, and a panel whose text will not fit simply makes its column
   taller rather than overflowing.

   Column widths and the outer split are the design's, expressed as fractions
   of the 1200px container: 305 + 84 gap + 811, and 299 / 260 / 207 within.
   ---------------------------------------------------------------------- */

.popular__inner {
	display: grid;
	grid-template-columns: 305fr 811fr;
	gap: clamp(var(--space-lg), 7vw, 84px);
	align-items: start;
}

.popular__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
	/* Optical alignment with the top of the cards beside it. */
	padding-top: 0.25rem;
}

.popular__eyebrow {
	margin: 0;
	padding: 0.5rem 1.15rem;
	background: var(--color-primary-100);
	border-radius: var(--radius-pill);
	color: var(--color-primary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

/* Lighter than the hero's heading — the design sets this one at a regular
   weight, which is what keeps it from competing with the hero. */
.popular__title {
	margin: 0;
	text-wrap: initial;
}

.popular__title-accent {
	display: block;
	color: var(--color-brand-blue);
}

.popular__text {
	margin: 0;
	max-width: 24rem;
	color: var(--color-text);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

.popular__cards {
	display: grid;
	grid-template-columns: 299fr 260fr 207fr;
	gap: 22px;
	align-items: start;
}

.popular__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
   Each column carries the design's own proportion — 719px tall against its
   width — which is what gives the panels their height once the photograph
   beside them has taken its share. All three resolve to the same 719, so the
   columns line up without being told to stretch, and because a grid item
   keeps its automatic minimum size, a column whose text needs more room grows
   instead of clipping.
*/
.popular__col:nth-child(1) { aspect-ratio: 299 / 719; }
.popular__col:nth-child(2) { aspect-ratio: 260 / 719; }
.popular__col:nth-child(3) { aspect-ratio: 207 / 719; }

/* ---- Cards ---- */

.popular-card {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.popular-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

/* The photograph keeps its own proportions; the panel beside it takes the
   rest of the column. */
.popular-card--photo {
	flex: none;
	aspect-ratio: var(--card-ratio, 303 / 415);
	background: var(--color-surface-muted);
}

.popular-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.popular-card--panel {
	flex: 1;
	display: flex;
	align-items: center;
	/* Panels sit beside a photograph, so they need a floor of their own or a
	   short column would squash one to nothing. */
	min-height: 11rem;
	padding: var(--space-md) 1.5rem;
	color: #ffffff;
}

.popular-card--blue   { background-image: var(--gradient-blue); }
.popular-card--green  { background-image: var(--gradient-green); }
.popular-card--orange { background-image: var(--gradient-orange); }

/* A plain accent with no picture still has to be readable. */
.popular-card--plain {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-heading);
}

.popular-card__copy {
	font-size: var(--fs-sm);
	line-height: 1.95;
}

/*
   Heading and body run together as one line in the design, so they are set
   inline and share their typography exactly. The h3 is kept for the document
   outline; it just carries no extra visual weight.
*/
.popular-card__title,
.popular-card__text {
	display: inline;
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/* ---- The white label on a photograph ---- */

.popular-card__label {
	position: absolute;
	left: 0;
	bottom: 11%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs);
	width: min(90%, 17rem);
	padding: 0.4rem 0.4rem 0.4rem 1.5rem;
	background: var(--color-surface);
	/* Square against the photo's left edge, a full stadium end on the right. */
	border-radius: 0 999em 999em 0;
	color: var(--color-heading);
	box-shadow: var(--shadow-sm);
	transition: background-color var(--dur) var(--ease);
}

.popular-card__label:hover {
	background: var(--color-primary-50);
	color: var(--color-heading);
}

.popular-card__label-text {
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.popular-card__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-on-primary);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.popular-card__label:hover .popular-card__go {
	background: var(--color-primary-hover);
	transform: translateX(2px);
}

/* -------------------------------------------------------------------------
   Shared pill button
   The blue pill with the round white icon chip, used by the travel section
   and the service cards. Distinct from .btn because the design draws these
   with the icon inside its own little disc.
   ---------------------------------------------------------------------- */

.pill-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.5rem 0.45rem 1.25rem;
	background: var(--color-primary);
	border-radius: var(--radius-pill);
	color: var(--color-on-primary);
	font-family: var(--font-button);
	font-size: 1rem;
	font-weight: var(--fw-medium);
	line-height: 1.25;
	letter-spacing: var(--ls-button);
	white-space: nowrap;
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.pill-cta:hover {
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
	transform: translateY(-2px);
}

.pill-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-primary);
}

.pill-cta--lg {
	padding: 0.55rem 0.6rem 0.55rem 1.5rem;
}

.pill-cta--lg .pill-cta__icon {
	width: 2rem;
	height: 2rem;
}

/* -------------------------------------------------------------------------
   Travel vaccinations
   Copy on the left; on the right the blue radial export as a panel, three
   stat chips on it, and the aeroplane breaking out of its bottom corner.
   ---------------------------------------------------------------------- */

.travel__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
	gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
	align-items: center;
}

.travel__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-lg);
	max-width: 32rem;
}


.travel__text {
	color: var(--color-text);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

.travel__panel {
	position: relative;
	/* The plane hangs over the panel's left edge. */
	overflow: visible;
}

.travel__panel-bg {
	display: block;
	width: 100%;
	height: auto;
}

.travel__stats {
	position: absolute;
	inset: 8% 10% auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.travel-chip {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.55rem 0.55rem 1rem;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.travel-chip--wide {
	grid-column: 1 / -1;
}

.travel-chip__value {
	padding: 0.7rem 1rem;
	background: var(--color-surface-muted);
	border-radius: var(--radius-md);
	color: var(--color-primary-800);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: 1.1;
}

.travel-chip__label {
	padding-inline: 0.5rem;
	color: var(--color-heading);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
}

.travel__plane {
	position: absolute;
	left: -19%;
	bottom: 4%;
	width: 98%;
	max-width: none;
	height: auto;
	filter: drop-shadow(0 18px 28px rgba(12, 52, 100, 0.25));
	/* main.js maps its translateX onto scroll progress: down flies it in from
	   the right, up flies it back out. With no JavaScript, or with reduced
	   motion, it simply parks here. */
	will-change: transform;
}

/* -------------------------------------------------------------------------
   Our Services
   A full-width rounded band on the soft blue gradient export, three white
   cards riding on it.
   ---------------------------------------------------------------------- */

.services {
	/* The band supplies its own ground; the section only spaces it. */
	padding-inline: clamp(0.5rem, 1vw, 1rem);
}

.services__band {
	/* The design's band is 1400 wide at 1440, a little wider than the 1374
	   hero either side of it; the page stops growing there, so this does
	   too, centred. */
	max-width: 87.5rem;
	margin-inline: auto;
	padding-block: clamp(var(--space-xl), 6vw, var(--space-3xl));
	border-radius: var(--radius-2xl);
	/* The flat blue is the real ground; the gradient export lies over it.
	   The Home page sets --services-bg from its "Band background" field, and
	   deliberately sets nothing when that field has been cleared — with the
	   property undefined this declaration resolves to none and the band is
	   left on the colour alone, which is the point of being able to clear
	   it. No url() fallback here for that reason. */
	background-color: var(--color-primary-200);
	background-image: var(--services-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.services__header {
	margin-inline: auto;
	align-items: center;
	text-align: center;
}


.services__lead {
	max-width: 42rem;
	color: var(--color-heading);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

.services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: clamp(var(--space-md), 2.5vw, var(--space-xl));
	max-width: 72rem;
	margin-inline: auto;
}

.service-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: 1.25rem 1.25rem 1.75rem;
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.service-panel:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.service-panel__media {
	width: 100%;
	aspect-ratio: 340 / 240;
}

/* These exports are shaped, but inside a white card the baked corners sit on
   white anyway; what matters is the ratio crop. */
.service-panel__media img {
	border-radius: var(--radius-lg);
}

.service-panel__title {
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
}

.service-panel__text {
	color: var(--color-text);
	font-size: var(--fs-sm);
	line-height: 1.8;
	flex: 1;
}

/* -------------------------------------------------------------------------
   Reviews
   Three staggered columns to the Figma's own measure — 387 / 282 / 486. The
   featured blue card fills the left column above the Google rating card; the
   other reviews pair up beside them. Same technique as the cards section:
   each column carries the design's proportion, cards flex-grow by their
   design heights, and a review that needs more room grows its column rather
   than clipping.
   ---------------------------------------------------------------------- */

/* Name and date stack beside the avatar. */
.review-card__identity {
	display: flex;
	flex-direction: column;
}

/* Stand-in for a missing photo: the reviewer's initial, same size and shape
   as a real avatar so the row does not change height. */
.review-card__avatar--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary-200);
	color: var(--color-primary-900);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.reviews-grid {
	display: grid;
	grid-template-columns: 387fr 282fr 486fr;
	gap: 21px;
	align-items: start;
}

.reviews-col {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.reviews-col:nth-child(1) { aspect-ratio: 387 / 764; }
.reviews-col:nth-child(2) { aspect-ratio: 282 / 763; }
.reviews-col:nth-child(3) { aspect-ratio: 486 / 763; }

/* Growth in the design's proportions: the featured card takes the left
   column's spare height, and in the other columns the lower card is the
   taller one. */
.reviews-col .review-card:first-child { flex: 333 1 auto; }
.reviews-col .review-card + .review-card { flex: 409 1 auto; }
.reviews-col .review-card--featured { flex: 560 1 auto; }
.reviews-col .google-card { flex: 186 0 auto; }

/* -------------------------------------------------------------------------
   The Google rating card
   Built to the client's badge design, which is not a plain rectangle: a
   narrower top section carries the shopfront, logo and score, widens through
   a concave curve into the full-width foot, and the round link sits free in
   the corner that step cuts away. The two white boxes compose the silhouette;
   the card element itself only carries the shape's outline.
   ---------------------------------------------------------------------- */

.google-card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* The sections below carry the white. */
	background: none;
	border: 0;
	/* Traces the composed silhouette, notch included, as a border cannot. */
	filter: drop-shadow(0 0 1px rgba(35, 35, 35, 0.18));
	/* Where the narrow top ends, and the radius of the curve out to the foot. */
	--gc-waist: 79%;
	--gc-step: 1.5rem;
}

.google-card__top {
	width: var(--gc-waist);
	padding: 5% 0 4% 5%;
	background: var(--color-surface);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.google-card__go {
	position: absolute;
	top: 4%;
	right: 1.5%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18.5%;
	aspect-ratio: 1;
	border-radius: 50%;
	/* A soft grey disc, no border — as the badge design draws it. */
	background: var(--color-surface-soft);
	color: var(--color-heading);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.google-card__go svg {
	width: 30%;
	height: 30%;
}

a.google-card__go:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.google-card__head {
	display: flex;
	align-items: center;
	gap: 4.5%;
}

.google-card__photo {
	width: 20.5%;
	aspect-ratio: 1;
	height: auto;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.google-card__logo {
	width: 53%;
	height: auto;
}

.google-card__score {
	display: flex;
	align-items: center;
	gap: 2%;
	margin-top: 6%;
	/* Indented past the photo so the score sits under the logo lockup. */
	padding-left: 25%;
}

.google-card__value {
	color: var(--color-star);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.google-card__foot {
	position: relative;
	/* Overlaps the section above by a hair so the silhouette has no seam. */
	margin-top: -1px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: 5% 5% 6%;
	background: var(--color-surface);
	border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
}

/* The concave curve carrying the narrow section out to the full-width foot. */
.google-card__foot::before {
	content: "";
	position: absolute;
	left: var(--gc-waist);
	bottom: 100%;
	width: var(--gc-step);
	height: var(--gc-step);
	background: radial-gradient(
		circle var(--gc-step) at 100% 0,
		transparent calc(var(--gc-step) - 0.5px),
		var(--color-surface) var(--gc-step)
	);
}

.google-card__count {
	margin: 0;
	/* "Based on" muted, the count itself blue — as the badge design draws it. */
	color: var(--color-muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.google-card__count a,
.google-card__count-link {
	color: var(--color-primary);
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.google-card__count a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.google-card__powered {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0;
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

/* The wordmark in Google's own letter colours, in a soft pill. */
.google-wordmark {
	padding: 0.35rem 1rem;
	background: var(--color-surface-soft);
	border-radius: var(--radius-pill);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
}

.google-wordmark .gw--blue   { color: #4285f4; }
.google-wordmark .gw--red    { color: #ea4335; }
.google-wordmark .gw--yellow { color: #fbbc05; }
.google-wordmark .gw--green  { color: #34a853; }

/* -------------------------------------------------------------------------
   Opening hours and the map
   A light blue panel — heading, the two-tab toggle, the hours table — beside
   the map. The tab panels all ship in the markup; only [data-tab-hidden]
   under the .js scope hides the inactive one, so without JavaScript every
   table simply renders in turn.
   ---------------------------------------------------------------------- */

.contact__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
	align-items: stretch;
}

.hours-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	padding: clamp(var(--space-md), 3vw, var(--space-xl));
	border-radius: var(--radius-2xl);
	background-image: linear-gradient(165deg, #f0f7fe 0%, #d9e9fb 48%, #a6cbf4 100%);
}


.hours-panel__text {
	color: var(--color-heading);
	max-width: 28rem;
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

.hours-tabs {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.hours-tabs__list {
	display: inline-flex;
	align-self: flex-start;
	max-width: 100%;
	flex-wrap: wrap;
	gap: var(--space-3xs);
	padding: 0.3rem;
	background: var(--color-surface);
	border-radius: var(--radius-pill);
}

.hours-tabs__tab {
	padding: 0.6rem 1.15rem;
	border-radius: var(--radius-pill);
	color: var(--color-heading);
	font-family: var(--font-button);
	font-size: 1rem;
	font-weight: var(--fw-medium);
	line-height: 1.25;
	letter-spacing: var(--ls-button);
	white-space: nowrap;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.hours-tabs__tab[aria-selected="true"] {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.hours-tabs__tab:not([aria-selected="true"]):hover {
	background: var(--color-primary-50);
}

.js [role="tabpanel"][data-tab-hidden] {
	display: none;
}

.hours-table-wrap {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.hours-table th,
.hours-table td {
	padding: 0.9rem 1.25rem;
	text-align: left;
}

/* Days takes the room; Open and Close split the rest evenly. */
.hours-table th:first-child,
.hours-table td:first-child {
	width: 46%;
}

.hours-table th {
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
	border-bottom: 1px solid var(--color-border);
}

.hours-table td {
	color: var(--color-heading);
}

.hours-table tbody tr:nth-child(even) {
	background: #f2f7fd;
}

.hours-table tbody tr + tr {
	border-top: 1px solid var(--color-primary-100);
}

.hours-table-wrap__empty {
	margin: 0;
	padding: var(--space-md) 1.25rem;
	color: var(--color-text);
	font-size: var(--fs-sm);
}

.contact__map .media {
	height: 100%;
	max-width: none;
}

/* The panel beside it sets the row height; the map fills it rather than
   holding its own ratio, which is how the design's two halves stay level. */
.contact__map .media--portrait {
	aspect-ratio: auto;
	min-height: min(30rem, 80vw);
}

.contact__map .media--bare img {
	border-radius: var(--radius-2xl);
}

.contact__embed {
	display: block;
	width: 100%;
	height: 100%;
	min-height: min(30rem, 80vw);
	border: 0;
	border-radius: var(--radius-2xl);
}

/* -------------------------------------------------------------------------
   Blog
   Two featured posts at the design's own 793 / 387 split — the wide and the
   tall crop side by side — then a row of three. The corner arrow on a
   featured picture wears a thick page-coloured ring: the design's exports
   have a notch baked in exactly there, and the ring carves the same notch
   out of any rectangular thumbnail a client uploads.
   ---------------------------------------------------------------------- */

.blog__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
}


.blog__text {
	color: var(--color-muted);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

/* Cards in a row stretch to one height and each card pins its View More to
   the bottom edge, so the links land on a shared baseline no matter how the
   titles and excerpts wrap. */
.blog__featured {
	display: grid;
	grid-template-columns: 793fr 387fr;
	gap: var(--space-xl) 21px;
}

.blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--space-xl) 20px;
	margin-top: var(--space-2xl);
}

.blog-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
}

.blog-card__media {
	position: relative;
	width: 100%;
}

.blog-card__go {
	position: absolute;
	top: -0.4rem;
	right: -0.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.25rem, 4.5vw, 4.5rem);
	height: clamp(3.25rem, 4.5vw, 4.5rem);
	border-radius: 50%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-heading);
	/* The ring that cuts the notch out of a rectangular thumbnail. */
	box-shadow: 0 0 0 10px var(--color-background);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

a.blog-card__go:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
	transform: translate(2px, -2px);
}

.blog-card__title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	margin-top: var(--space-2xs);
}

.blog-card__title a {
	color: inherit;
}

.blog-card__title a:hover {
	color: var(--color-primary);
}

.blog-card__excerpt {
	color: var(--color-text);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

.blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	/* Pushed to the card's bottom so every link in a row lines up. */
	margin-top: auto;
	padding-top: var(--space-2xs);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

a.blog-card__more:hover {
	color: var(--color-primary);
}

a.blog-card__more:hover svg {
	transform: translateX(3px);
}

.blog-card__more svg {
	transition: transform var(--dur) var(--ease);
}

/* -------------------------------------------------------------------------
   Post listings
   auto-fit + minmax means the column count follows the available width
   rather than being switched by hand at each breakpoint.
   ---------------------------------------------------------------------- */

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: var(--space-lg);
}

.post-card .entry-meta {
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

.search-result__type {
	color: var(--color-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Article body
   ---------------------------------------------------------------------- */

.entry-header {
	padding-bottom: 0;
}

.entry-title {
	font-size: var(--fs-h1);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-sm);
	align-items: center;
	margin-top: var(--space-sm);
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.entry-meta a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-meta a:hover {
	color: var(--color-primary);
}

/* Long-form prose rhythm. */
.entry-content > * + * {
	margin-top: var(--space-md);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: var(--space-xl);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.25rem;
}

.entry-content li + li {
	margin-top: var(--space-3xs);
}

.entry-content img,
.entry-content .wp-block-image {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-footer {
	padding-bottom: var(--space-xl);
}

/* Previous / next links. */
.post-navigation {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: var(--space-md);
}

.post-navigation a {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.post-navigation a:hover {
	border-color: var(--color-primary-300);
	background: var(--color-primary-50);
}

.post-nav__label {
	color: var(--color-muted);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
}

.post-nav__title {
	color: var(--color-heading);
	font-weight: var(--fw-medium);
}

.post-navigation .nav-next {
	text-align: right;
}

/* -------------------------------------------------------------------------
   Empty and error states
   ---------------------------------------------------------------------- */

.no-results,
.error-404 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	text-align: left;
}

.error-404 {
	align-items: center;
	text-align: center;
}

.error-404__code {
	margin: 0;
	font-size: var(--fs-display);
	font-weight: var(--fw-bold);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	color: var(--color-primary-200);
}

.error-404 .search-form {
	width: 100%;
	max-width: 28rem;
}

.error-404__actions {
	margin: 0;
}


/* -------------------------------------------------------------------------
   Comments
   ---------------------------------------------------------------------- */

.comments-area {
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
}

.comments-area__title,
.comment-reply-title {
	margin-bottom: var(--space-lg);
}

.comment-list {
	list-style: none;
	margin: 0 0 var(--space-2xl);
	padding: 0;
}

.comment-list .children {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding-left: var(--space-md);
	border-left: 2px solid var(--color-border);
}

.comment-body {
	padding: var(--space-md) 0;
}

.comment-list > li + li {
	border-top: 1px solid var(--color-border);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.comment-author img {
	border-radius: 50%;
}

.comment-metadata {
	margin-bottom: var(--space-2xs);
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

.comment-form {
	display: grid;
	gap: var(--space-sm);
	max-width: 40rem;
}

.comment-form .form-submit {
	margin: 0;
}

/* -------------------------------------------------------------------------
   Site footer

   A pale-blue band running the full width of the page, its content on the
   page's own width, everything in blue (the design revision of
   2026-10-21): Pharmacy Info, Quick Links and Contact Info in three
   columns, then the legal bar under a rule with the copyright on the left
   and the links on the right, a hairline between each. The colours are sampled from the design: #e9f3fd for the panel,
   #0067b4 for headings and labels, #1178bc for values, #005ba3 for links,
   #4a93ca for the copyright, #d3e8fc for the rule.
   ---------------------------------------------------------------------- */

.site-footer {
	margin-top: var(--section-gap);
	padding: 0;
}

/* The band is the full width of the page; the side padding is the page's
   own, and the columns and the legal bar below centre on the wide
   container inside it, so the text lines up with the sections above. */
.site-footer__panel {
	padding: clamp(2rem, 4vw, 3.5rem) var(--container-pad) clamp(1.5rem, 2.5vw, 2rem);
	/* Rounded along its top edge, square at the foot of the page. */
	border-radius: 1.5rem 1.5rem 0 0;
	background: #e9f3fd;
	color: #1178bc;
}

.site-footer__columns,
.site-footer__bottom {
	max-width: var(--container-wide);
	margin-inline: auto;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr 1fr;
	gap: var(--space-xl) clamp(var(--space-lg), 6vw, 7rem);
	padding-bottom: var(--space-xl);
}

/* A column label, not a section heading: it keeps the body face and the
   small size rather than the site's h2 style. */
.footer__heading {
	margin-bottom: var(--space-md);
	color: #0067b4;
	font-family: var(--font-primary);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
}

/* Plain informational rows: the registration lines and the contact block. */
.footer-lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	font-size: var(--fs-sm);
}

/* "Company Reg Number:" - the label of a line, in the heading blue. */
.footer-lines__label {
	margin-inline-end: 0.25em;
	color: #0067b4;
	font-weight: var(--fw-semibold);
}

.footer-lines a {
	color: #1178bc;
}

.footer-lines a:hover {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer-lines address {
	font-style: normal;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	font-size: var(--fs-sm);
}

.footer-menu a {
	color: #005ba3;
}

.footer-menu a:hover {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Bare glyphs in the link blue, drawn only for profiles with a URL. The
   element selector is load-bearing: base.css's ul[class] reset outranks a
   lone class, so .social-links alone can never win the margin. */
ul.social-links {
	display: flex;
	align-items: center;
	gap: clamp(var(--space-md), 3vw, var(--space-xl));
	list-style: none;
	margin: var(--space-lg) 0 0;
	padding: 0;
}

.social-links__link {
	display: inline-flex;
	color: #005ba3;
	transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.social-links__link:hover {
	color: var(--color-primary);
	transform: translateY(-2px);
}

/* The NHS services mark: the blue lozenge with the white italic wordmark,
   the caption under it in the link blue. The lozenge rides the caption's
   right edge, so the badge shrink-wraps. */
.nhs-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-3xs);
	margin-top: var(--space-lg);
	color: #005ba3;
}

.nhs-badge__logo {
	display: inline-block;
	padding: 0.1em 0.35em;
	background: #005eb8;
	border-radius: 4px;
	color: #ffffff;
	font-size: 1.5rem;
	font-weight: var(--fw-bold);
	font-style: italic;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.nhs-badge__text {
	font-weight: var(--fw-semibold);
}

/* The legal bar: the copyright on the left, the links on the right. */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm) var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid #d3e8fc;
	font-size: var(--fs-sm);
}

.site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	color: #4a93ca;
}

.site-footer__copyright,
.site-footer__credit {
	margin: 0;
}

/* A hairline between the links, as the design draws them. */
.legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.legal-menu li {
	padding-inline: 1rem;
	color: #005ba3;
}

.legal-menu li:first-child {
	padding-inline-start: 0;
}

.legal-menu li:last-child {
	padding-inline-end: 0;
}

.legal-menu li + li {
	border-inline-start: 1px solid #cfe0f5;
}

.legal-menu a {
	color: #005ba3;
}

.legal-menu a:hover {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Phone shortcut inside the mobile panel. */
.mobile-nav__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--color-heading);
	font-weight: var(--fw-medium);
}

.mobile-nav__phone:hover {
	color: var(--color-primary);
}