/* =========================================================================
   Batley Pharmacy - the content page, the contact page and the blog listing

   Loaded by enqueue.php on pages with no template, on the Contact template
   and on the Blog template (which also takes home2.css for its cards), so
   nothing here reaches the rest of the site. The designs of 2026-10-22 are
   drawn on the 1280 build, like the home and service pages; the page-level
   rules key off the pg-build body class, which inc/pages.php gives those
   pages. Selectors stay inside the .pg-, .ct- and .bl- namespaces.
   ========================================================================= */

/* -------------------------------------------------------------------------
   The build: 1280 of content with 80 either side at 1440, the design's
   #fcfdff ground, 40 of padding on every section and the frames 40 apart.
   ---------------------------------------------------------------------- */

.pg-build {
	--container-max: 1280px;
	--container-wide: 1280px;
	--section-gap: 2.5rem;
	--pg-section-space: 2.5rem;
	--pg-ink: #1c2023;
	--pg-ink-soft: #5f656a;
	--pg-navy: #143559;
	--pg-blue: #0a61b1;
	--pg-line: #b5d5fb;
	--pg-pale: #eaf3fe;
	--pg-radius: 24px;
	background: #fcfdff;
}

.pg-build .section + .section {
	margin-block-start: var(--pg-section-space);
}

.pg-build .site-footer {
	margin-block-start: var(--pg-section-space);
}

/* -------------------------------------------------------------------------
   The content page: the title centred, 48 in the display face, the line
   under it 18 in the soft grey; then the editor's content at the full
   width - 26 semibold headings, 16 on a 24 line, bullets in grey.
   ---------------------------------------------------------------------- */

.pg-page__header {
	text-align: center;
}

.pg-page__title {
	margin: 0;
	color: var(--pg-ink);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.5rem + 1.75vw, 3rem);
	font-weight: var(--fw-semibold);
	line-height: 1.1;
	letter-spacing: 0.005em;
}

.pg-page__subtitle {
	max-width: 640px;
	margin: 20px auto 0;
	color: var(--pg-ink-soft);
	font-size: 1.125rem;
	line-height: 1.5;
}

.pg-page__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pg-radius);
}

.pg-content {
	color: var(--pg-ink-soft);
	font-size: 1rem;
	line-height: 1.5;
}

.pg-content > * + * {
	margin-block-start: 1rem;
}

.pg-content h2,
.pg-content h3,
.pg-content h4 {
	margin-block-start: 2rem;
	color: var(--pg-ink);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	line-height: 1.25;
	letter-spacing: 0.005em;
}

.pg-content h2 {
	font-size: 1.625rem;
}

.pg-content h3 {
	font-size: 1.375rem;
}

.pg-content h4 {
	font-size: 1.125rem;
}

.pg-content h2:first-child,
.pg-content h3:first-child {
	margin-block-start: 0;
}

.pg-content ul,
.pg-content ol {
	padding-inline-start: 1.5rem;
}

.pg-content ul {
	list-style: disc;
}

.pg-content li + li {
	margin-block-start: 0.25rem;
}

.pg-content li::marker {
	color: #9ca3ab;
}

.pg-content a {
	color: var(--pg-blue);
}

/* -------------------------------------------------------------------------
   The stepped hero (contact, blog): a 1280 by 400 panel with 24 corners on
   the pale blue, deepening to the right; the photograph fills its right
   62% to the full height and fades into the panel over its left third;
   the heading 40 in, 56 in the display face in the navy, level with the
   middle of the part above the step. The foot is stepped as the service
   hero's: the ground laid over the bottom-left 38 high, to 35% across,
   with its corner rounded into an S, as the design draws it.
   ---------------------------------------------------------------------- */

.pg-hero__panel {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 400px;
	padding: 40px;
	overflow: hidden;
	border-radius: var(--pg-radius);
	background-color: var(--pg-pale);
	background-image: linear-gradient(90deg, #eaf3fe 0%, #e3eefb 45%, #b9d3f0 100%);
}

.pg-hero__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 62%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 32%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 32%);
}

.pg-hero__copy {
	position: relative;
	z-index: 1;
	max-width: 46%;
	/* On the part above the step. */
	padding-bottom: 38px;
}

.pg-hero__title {
	margin: 0;
	color: var(--pg-navy);
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem);
	font-weight: var(--fw-semibold);
	line-height: 1.07;
	letter-spacing: 0.005em;
}

.pg-hero__text {
	max-width: 480px;
	margin: 20px 0 0;
	color: var(--pg-ink);
	font-size: 1.125rem;
	line-height: 1.55;
}

.pg-hero__cta {
	margin-top: 32px;
}

/* The step, built as the service hero's is: a strip of the ground with its
   corner rounded into the S's upper bend, and two boxes whose radial
   gradients are the ground outside the panel's corner and the S's lower
   bend. */
.pg-hero__notch {
	position: absolute;
	right: 65%;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 38px;
	border-top-right-radius: 60px 19px;
	background: #fcfdff;
	pointer-events: none;
}

.pg-hero__notch::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 24px;
	height: 24px;
	background: radial-gradient(24px 24px at 100% 0, transparent 23.5px, #fcfdff 24px);
}

.pg-hero__notch::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 100%;
	width: 60px;
	height: 19px;
	background: radial-gradient(60px 19px at 100% 0, transparent 99%, #fcfdff 100%);
}

.pg-hero__panel--no-media .pg-hero__copy {
	max-width: none;
}

/* The buttons are the service pages'; their rules travel here so a page on
   these templates does not need that stylesheet. */
.pg-build .rx-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 2.5rem;
	padding: 0 1.125rem;
	border: 1px solid #0a61b1;
	border-radius: var(--radius-pill);
	background: #0a61b1;
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.pg-build .rx-btn:hover {
	border-color: #0052a1;
	background: #0052a1;
	color: #ffffff;
	transform: translateY(-2px);
}

.pg-build .rx-btn__icon {
	display: inline-flex;
}

.pg-build .rx-btn__icon svg {
	width: 1rem;
	height: 1rem;
}

/* -------------------------------------------------------------------------
   Contact: the details and the form

   Two columns, 425 and the rest, a hairline between them 50 from each:
   the heading with its blue word, the line of copy, the address and phone
   each with an icon in the brand blue, and the card of services - the
   pale ground on a #b5d5fb hairline, 12 corners, a tick, the title in the
   navy over a 13 line of copy, and a 36 round blue button on the right.
   The form: 14 semibold labels, 48-tall inputs with 24 corners on a
   #c9d6e6 hairline, the message 220 tall, the consent line 13 in grey,
   the solid pill button.
   ---------------------------------------------------------------------- */

.ct-info__inner {
	display: grid;
	grid-template-columns: minmax(0, 425px) 1px minmax(0, 1fr);
	gap: 50px;
	align-items: start;
}

.ct-info__rule {
	align-self: stretch;
	background: #d9e4f1;
}

.ct-info__title {
	margin: 0;
	color: var(--pg-ink);
}

.ct-info__title-accent {
	color: var(--color-heading-accent);
}

.ct-info__text {
	margin: 16px 0 0;
	color: var(--pg-ink-soft);
	font-size: 1.125rem;
	line-height: 1.5;
}

.ct-info__details .ct-info__lines {
	display: grid;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.ct-info__line {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--pg-ink);
	font-size: 1.0625rem;
	line-height: 1.4;
}

.ct-info__line a {
	color: inherit;
	text-decoration: none;
}

.ct-info__line a:hover {
	color: var(--pg-blue);
}

.ct-info__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--pg-blue);
}

.ct-services {
	margin-top: 56px;
	padding: 20px 16px;
	border: 1px solid var(--pg-line);
	border-radius: 12px;
	background: #f5f9fe;
}

.ct-services__title {
	margin: 0 0 8px;
	color: var(--pg-navy);
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.ct-services .ct-services__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-service {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
}

.ct-service + .ct-service {
	border-top: 1px solid var(--pg-line);
}

.ct-service__check {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--pg-blue);
}

.ct-service__body {
	display: grid;
	flex: 1 1 auto;
	gap: 2px;
	min-width: 0;
}

.ct-service__title {
	color: var(--pg-navy);
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.ct-service__text {
	color: var(--pg-ink-soft);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.ct-service__go {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--pg-blue);
	color: #ffffff;
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.ct-service__go:hover {
	background: #0052a1;
	color: #ffffff;
	transform: translateY(-2px);
}

.ct-form__row--split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ct-form__field {
	margin: 0 0 20px;
}

.ct-form__field label {
	display: block;
	margin-bottom: 8px;
	color: var(--pg-ink);
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
}

.ct-form__field input,
.ct-form__field textarea {
	display: block;
	width: 100%;
	padding: 0 18px;
	border: 1px solid #c9d6e6;
	border-radius: 24px;
	background: #ffffff;
	color: var(--pg-ink);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.4;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.ct-form__field input {
	height: 48px;
}

.ct-form__field textarea {
	min-height: 220px;
	padding: 14px 18px;
	resize: vertical;
}

.ct-form__field input::placeholder,
.ct-form__field textarea::placeholder {
	color: #9ca3ab;
}

.ct-form__field input:focus,
.ct-form__field textarea:focus {
	outline: none;
	border-color: var(--pg-blue);
	box-shadow: 0 0 0 3px rgba(10, 97, 177, 0.15);
}

.ct-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ct-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 24px;
	color: var(--pg-ink-soft);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.ct-form__consent input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--pg-blue);
}

.ct-form__consent a {
	color: var(--pg-blue);
}

.ct-form__notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 0.9375rem;
}

.ct-form__notice--ok {
	background: #e5f3ea;
	color: #1e7a3f;
}

.ct-form__notice--error {
	background: #fde8e4;
	color: #b4412a;
}

/* -------------------------------------------------------------------------
   Contact: the map, 425 tall with 24 corners, on a pale band the full
   width of the page with 50 above and below.
   ---------------------------------------------------------------------- */

.pg-build .section + .ct-map {
	margin-block-start: 0;
	padding-block: 50px;
}

.ct-map {
	background: #f5f9fe;
}

.ct-map__frame {
	position: relative;
	height: 425px;
	overflow: hidden;
	border-radius: var(--pg-radius);
	background: var(--color-surface-muted);
}

.ct-map__frame iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -------------------------------------------------------------------------
   Blog: the cards are the home page's (home2.css); the page numbers sit
   40 under them.
   ---------------------------------------------------------------------- */

.bl-grid__pagination {
	margin-top: 40px;
}

.bl-grid__empty {
	margin: 0;
	color: var(--pg-ink-soft);
	font-size: 1.125rem;
	text-align: center;
}

/* -------------------------------------------------------------------------
   Tablet and phones: the hero's photograph goes under the heading, the
   contact columns stack, the form's pair of fields becomes one column.
   ---------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.pg-hero__panel {
		display: block;
		min-height: 0;
		padding: 0;
	}

	.pg-hero__photo {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 2 / 1;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.pg-hero__copy {
		max-width: none;
		padding: 24px 24px 28px;
	}

	.pg-hero__notch {
		display: none;
	}

	.ct-info__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ct-info__rule {
		display: none;
	}

	.ct-services {
		margin-top: 32px;
	}

	.ct-map__frame {
		height: 320px;
	}
}

@media (max-width: 575.98px) {
	.pg-build {
		--pg-radius: 16px;
	}

	.ct-form__row--split {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ct-form__field input,
	.ct-form__field textarea {
		border-radius: 16px;
	}
}