/* =============================================================
   css/blocks.css
   Styles for the ACF Flexible Content block system.
   All selectors are prefixed .hb-* so they don't collide with
   legacy WPBakery rules in style.css / responsive.css.
   ============================================================= */

/* ---- Shared section rhythm --------------------------------- */
.hb-flexible section {
	padding: 70px 0;
}
.hb-flexible .hb-hero,
.hb-flexible .hb-split { padding: 0; }

/* ---- Hero -------------------------------------------------- */
.hb-hero {
	position: relative;
	overflow: hidden;
	background: #f5f5f5;
	aspect-ratio: 1600 / 600;
	max-height: calc(100vh - 156px);
	min-height: 240px;
}
.hb-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hb-hero__content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	padding: 0 60px 5%;
}
.hb-hero--has-text .hb-hero__content {
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 45%, transparent 70%);
}
.hb-hero__heading {
	color: #fff !important;
	font-size: 62px;
	font-weight: 400;
	line-height: 3rem !important;
	margin: 0 0 16px;
	font-family: "lora", serif;
	white-space: pre-line;
}
.hb-hero__sub {
	color: #fff !important;
	font-size: 22px;
	margin: 0;
}

/* ---- Centred text ------------------------------------------ */
.hb-text-centred {
	text-align: center;
}
.hb-text-centred__inner {
	margin: 0 auto;
	max-width: 760px;
}
.hb-text-centred--narrow .hb-text-centred__inner { max-width: 540px; }
.hb-text-centred--wide   .hb-text-centred__inner { max-width: 960px; }

/* ---- Split ------------------------------------------------- */
.hb-split {
	display: flex;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.hb-split__media,
.hb-split__text {
	flex: 0 0 50%;
}
.hb-split__media {
	overflow: hidden;
}
.hb-split__media img {
	object-fit: cover;
	display: block;
}
.hb-split__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 70px 60px;
}
.hb-split__text-inner {
}

/* Split column ratios — override the 50/50 default */
.hb-split--ratio-1-1 > :first-child { flex: 0 0 50%;     }
.hb-split--ratio-1-1 > :last-child  { flex: 0 0 50%;     }
.hb-split--ratio-1-2 > :first-child { flex: 0 0 33.333%; }
.hb-split--ratio-1-2 > :last-child  { flex: 0 0 66.667%; }
.hb-split--ratio-2-1 > :first-child { flex: 0 0 66.667%; }
.hb-split--ratio-2-1 > :last-child  { flex: 0 0 33.333%; }
.hb-split--ratio-1-3 > :first-child { flex: 0 0 25%;     }
.hb-split--ratio-1-3 > :last-child  { flex: 0 0 75%;     }
.hb-split--ratio-3-1 > :first-child { flex: 0 0 75%;     }
.hb-split--ratio-3-1 > :last-child  { flex: 0 0 25%;     }

/* ---- Icon grid --------------------------------------------- */
.hb-icon-grid__items {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;
}
.hb-icon-grid--3 .hb-icon-grid__item { flex: 0 0 calc(33.333% - 20px); }
.hb-icon-grid--4 .hb-icon-grid__item { flex: 0 0 calc(25% - 23px); }
.hb-icon-grid__item {
	text-align: center;
}
.hb-icon-grid__item img {
	width: 64px;
	height: auto;
	display: block;
	margin: 0 auto 14px;
}
.hb-icon-grid__label {
	font-weight: 600;
	margin: 0 0 6px;
}
.hb-icon-grid__body {
	font-size: 0.9em;
	color: #555;
	margin: 0;
}

/* ---- Body text --------------------------------------------- */
/* inherits base typography; no additional rules needed */

/* ---- Contact band ------------------------------------------ */
.hb-contact-band--purple {
	background-color: #503454;
	color: #fff;
}
.hb-contact-band--purple h2,
.hb-contact-band--purple h3,
.hb-contact-band--purple h4 {
	color: #fff;
}
.hb-contact-band__inner {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}
.hb-contact-band__left {
	flex: 0 0 45%;
}
.hb-contact-band__right {
	flex: 1;
}
.hb-contact-band__intro {
	margin-bottom: 30px;
}
.hb-contact-band__details {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hb-contact-band__details li {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 36px;
}
.hb-contact-band__details li img {
	width: 75px;
	height: auto;
	flex-shrink: 0;
	margin-right: 40px;
}
.hb-contact-band--purple .hb-contact-band__details li h5 {
	color: #fff;
	margin: 0;
}

/* ---- Team grid --------------------------------------------- */
.hb-team-grid__members {
	display: flex;
	flex-wrap: wrap;
	margin-top: 40px;
}
.hb-team-grid__member {
	flex: 0 0 calc(33.333% - 27px);
}
.hb-team-grid__member img {
	width: 100%;
	border-radius: 12px;
	margin-bottom: 16px;
	display: block;
}
.hb-team-grid__member h4 {
	margin: 0 0 4px;
}
.hb-team-grid__role {
	color: #9B8756;
	font-weight: 600;
	margin: 0 0 12px;
}

/* ---- FAQ --------------------------------------------------- */
.hb-faq--white { background: #ffffff; }
.hb-faq--grey  { background: #f5f5f5; }

.hb-faq__items {
	margin-top: 36px;
}
.hb-faq__item {
	border-bottom: 1px solid #e0e0e0;
}
.hb-faq__item:first-child {
	border-top: 1px solid #e0e0e0;
}
.hb-faq__question {
	padding: 20px 48px 20px 0;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	position: relative;
	color: #503454;
}
.hb-faq__question::-webkit-details-marker { display: none; }
.hb-faq__question::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	color: #9B8756;
	line-height: 1;
}
.hb-faq__item[open] .hb-faq__question::after {
	content: '\2212'; /* minus sign */
}
.hb-faq__answer {
	padding: 4px 0 24px;
}

/* ---- Image pair -------------------------------------------- */
.hb-image-pair__inner {
	display: flex;
	gap: 24px;
}
.hb-image-pair__figure {
	flex: 1;
	margin: 0;
}
.hb-image-pair__figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}
.hb-image-pair__figure figcaption {
	margin-top: 10px;
	font-size: 0.875em;
	color: #666;
	text-align: center;
}

/* ---- Single image ------------------------------------------ */
.hb-single-image {
	text-align: center;
}

/* ---- Page template shared rhythm --------------------------- */
.hb-page section { padding: 30px 0; }
.hb-page .hb-hero { padding: 0; }

/* ---- Team grid — full-width alternating layout ------------- */
.hb-team-grid--full_width .hb-team-grid__members {
	flex-direction: column;
	gap: 60px;
}
.hb-team-grid__member--full {
	display: flex;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}
.hb-team-grid--full_width .hb-team-grid__member--full:nth-child(even) {
	flex-direction: row-reverse;
}
.hb-team-grid__member-img { flex: 0 0 260px; }
.hb-team-grid__member-img img {
	width: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	margin: 0;
}
.hb-team-grid__member-body { flex: 1; }

/* ---- Accreditation ----------------------------------------- */
.hb-accreditation { text-align: center; }
.hb-accreditation__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
}
.hb-accreditation__badges img {
	max-height: 80px;
	width: auto;
}

/* ---- Icon grid heading ------------------------------------- */
.hb-icon-grid__heading {
	text-align: center;
	margin-bottom: 8px;
}

/* ---- Services grid ----------------------------------------- */
.hb-services-grid__items {
	display: flex;
	gap: 30px;
}
.hb-services-grid__item {
	flex: 1;
	background: #f5f5f5;
	border-radius: 12px;
	padding: 36px 30px;
}
.hb-services-grid__item h3 {
	color: #503454;
	margin: 0 0 16px;
}
.hb-services-grid__body { font-size: 0.95em; }

/* ---- Approach (dementia care) ------------------------------ */
.hb-approach__heading {
	text-align: center;
	margin-bottom: 36px;
}
.hb-approach__items {
	margin-top: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.hb-approach__item {
	border-left: 4px solid #9B8756;
	padding-left: 24px;
}
.hb-approach__item h4 {
	margin: 0 0 8px;
	color: #503454;
}
.hb-approach__item > *:last-child { margin-bottom: 0; }

/* Horizontal variant — equal columns in a row */
.hb-approach--horizontal .hb-approach__items {
	flex-direction: row;
	align-items: flex-start;
	gap: 30px;
}
.hb-approach--horizontal .hb-approach__item {
	flex: 1;
	border-left: none;
	padding-left: 0;
	padding-top: 20px;
}

/* ---- Standalone contact form ------------------------------- */
.hb-contact-form {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- CTA band ---------------------------------------------- */
.hb-cta-band {
	text-align: center;
}
.hb-cta-band--grey {
	background-color: #f5f5f5;
}
.hb-btn {
	display: inline-block;
	margin-top: 20px;
	padding: 14px 36px;
	background-color: #503454;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}
.hb-btn:hover,
.hb-btn:focus {
	background-color: #3d2640;
	color: #fff;
}

/* ---- Logo block -------------------------------------------- */
.hb-logo-block {
	text-align: center;
}
.hb-logo-block img {
	max-height: 120px;
	width: auto;
	display: inline-block;
}
.hb-page .hb-logo-block { padding: 60px 0 0; }
.hb-page-services .hb-logo-block + .hb-text-centred { padding-top: 30px; }
.hb-page-services .hb-text-centred__inner { max-width: 900px; }

/* ---- Full-width constrained image -------------------------- */
.hb-full-image {
	text-align: center;
}
.hb-full-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 30px;
}

/* ---- Service rows (alternating image / text) --------------- */
.hb-page .hb-service-rows { padding: 70px 0; }
.hb-service-row {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.hb-service-row + .hb-service-row {
	margin-top: 60px;
}
.hb-service-row:nth-child(even) {
	flex-direction: row;
}
.hb-service-row:nth-child(even) .hb-service-row__media {
	padding-left: 0px;
	padding-right: 40px;
}
.hb-service-row__media,
.hb-service-row__body {
	flex: 0 0 50%;
}
.hb-service-row__media {
	overflow: hidden;
	min-height: 360px;
	padding-left: 40px;
	padding-right: 0px;
}
.hb-service-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 30px;
}
.hb-service-row__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hb-service-row__body h2 {
	color: #503454;
	margin: 0 0 16px;
}
.hb-service-row__body li {
	margin-bottom: 10px;
}

/* ---- Amenities box ----------------------------------------- */
.hb-amenities-box {
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 48px 40px;
	background: #fff;
}
.hb-amenities-box__heading {
	text-align: center;
	margin: 0 0 36px;
}
.hb-amenities-box .hb-icon-grid__items {
	flex-wrap: nowrap;
	gap: 40px;
	align-items: flex-start;
}
.hb-amenities-box .hb-icon-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hb-amenities-box .hb-icon-grid__item img {
	width: 180px;
	height: 120px;
	object-fit: contain;
	flex-shrink: 0;
}
.hb-amenities-box .hb-icon-grid__label {
	font-size: 24px;
	color: #503454;
	font-weight: 400;
	white-space: normal;
}

/* ---- Services caption -------------------------------------- */
.hb-services-caption {
	text-align: center;
}
.hb-services-caption__heading {
	color: #9B8756;
	margin: 0 0 32px;
}
.hb-services-caption__image {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 24px;
	border-radius: 30px;
}
.hb-services-caption__text {
	font-size: 0.875em;
	color: #503454;
	margin: 0 0 24px;
}
.hb-services-caption__icon {
	display: inline-block;
	max-height: 80px;
	width: auto;
}

/* ---- Contact band — white text fixes ----------------------- */
.hb-contact-band--purple p,
.hb-contact-band--purple li {
	color: #fff;
}
.hb-contact-band--purple a:not(.hb-btn) {
	color: #fff;
}
.hb-contact-band--purple .hb-contact-band__details * {
	color: #fff !important;
}

/* ---- About page intro (logo + 900px centred text) ---------- */
.hb-page-about .hb-logo-block { padding: 60px 0 0; }
.hb-page-about .hb-logo-block + .hb-about-intro { padding-top: 30px; }
.hb-page-about .hb-about-intro .hb-text-centred__inner { max-width: 900px; }

/* ---- About page 25/75 split — constrained to ~900px -------- */
.hb-about-split-wrap { padding: 0 0 70px; }
.hb-about-split-wrap .hb-split {
	max-width: 900px;
}

/* ---- CQC widget -------------------------------------------- */
.hb-cqc-widget { text-align: center; }
.hb-cqc-widget__inner { display: inline-block; }

/* ---- Facebook band ----------------------------------------- */
.hb-facebook-band { text-align: center; }
.hb-facebook-band__link { margin: 0; }

/* ---- Accreditation rows ------------------------------------ */
.hb-accreditation-rows { }
.hb-accreditation-row {
	display: flex;
	gap: 48px;
	align-items: flex-start;
	padding: 24px 0;
}
.hb-accreditation-rows .hb-accreditation-row:last-child {
	border-bottom: 1px solid #e0e0e0;
}
.hb-accreditation-row__text {
	flex: 0 0 calc(50% - 24px);
}
.hb-accreditation-row__media {
	flex: 0 0 calc(50% - 24px);
	padding: 3em;
}
.hb-accreditation-row__text h3 {
	color: #503454;
	margin: 0 0 16px;
}
.hb-accreditation-row__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
	object-fit: contain;
}

/* ---- FAQ header with optional image ------------------------ */
.hb-faq__header {
	text-align: center;
}
.hb-faq__image {
	display: block;
	width: 120px;
	height: auto;
	margin: 0 auto 20px;
}
.hb-faq .hb-faq__header h2 {
	color: #503454 !important;
}

/* ---- Contact page intro card ------------------------------- */
.hb-contact-intro__card {
	background-color: #503454;
	padding: 48px;
	border-radius: 21px;
	margin-top: 30px;
	display: flex;
	gap: 48px;
	align-items: flex-start;
}
.hb-contact-intro__media {
	flex: 0 0 50%;
}
.hb-contact-intro__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}
.hb-contact-intro__text {
	flex: 1;
}
.hb-contact-intro__heading {
	color: #9B8756 !important;
	margin-top: 0;
}
.hb-contact-intro__body,
.hb-contact-intro__body p,
.hb-contact-intro__body li {
	color: #fff !important;
}
.hb-contact-intro__body a {
	color: #fff;
}

/* ---- Contact page icon ------------------------------------- */
.hb-contact-icon {
	text-align: center;
}
.hb-contact-icon img {
	max-height: 100px;
	width: auto;
	display: inline-block;
}

/* ---- Contact page CTA heading ------------------------------ */
.hb-contact-cta {
	text-align: center;
}
.hb-contact-cta h2 {
	color: #503454 !important;
}

/* ---- Contact page Facebook image link ---------------------- */
.hb-contact-facebook {
	text-align: center;
	margin-bottom: 30px;
}
.hb-contact-facebook a {
	display: inline-block;
}
.hb-contact-facebook img {
	max-width: 560px;
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

/* ---- Responsive -------------------------------------------- */
@media (max-width: 960px) {
	.hb-split {
		flex-direction: column;
	}
	.hb-split__media,
	.hb-split__text {
		flex: 0 0 100%;
		min-height: 0;
	}
	.hb-split__media {
		min-height: 300px;
	}
	.hb-split--flip-mobile {
		flex-direction: column-reverse;
	}
	.hb-split__text {
		padding: 50px 40px;
	}
	.hb-contact-band__inner {
		flex-direction: column;
		gap: 40px;
		/* align-items was flex-start on the base (desktop) rule, which only
		   sizes flex children to their own content width on the cross axis —
		   fine for a row, but once stacked to a column that cross axis is
		   width, so the form column was shrinking to content width instead
		   of filling the page. */
		align-items: stretch;
	}
	.hb-contact-band__left {
		flex: 0 0 auto;
	}
	.hb-team-grid__member {
		flex: 0 0 calc(50% - 20px);
	}
	.hb-service-row {
		flex-direction: column !important;
	}
	.hb-service-row__media,
	.hb-service-row__body {
		flex: 0 0 100%;
	}
	.hb-service-row__media {
		min-height: 260px;
		/* Cancel the alternating left/right padding used to space the image
		   from the text in the desktop row layout — once stacked to a
		   column it just pushed the image off-centre. */
		padding: 0px 20px;
	}
	.hb-service-row:nth-child(even) .hb-service-row__media {
		padding: 0 20px;
	}
	.hb-service-row__body {
		padding: 40px 30px;
	}
	.hb-contact-intro__card {
		flex-direction: column;
		gap: 30px;
	}
	.hb-contact-intro__media {
		flex: 0 0 auto;
	}

	/* About page split image: natural width, centred, once the split has
	   stacked into a single column (the inline style="width:100%" on the
	   <img> needs !important to be overridden). */
	.hb-about-split-wrap .hb-split__media {
		min-height: 0;
		display: flex;
		justify-content: center;
	}
	.hb-about-split-wrap .hb-split__media img {
		width: auto !important;
		height: auto !important;
		max-width: 80% !important;
	}
	.wpforms-container .wpforms-field .wpforms-field-row .wpforms-field-row-block {
		padding: 0px;
	}
}

@media (max-width: 768px) {
	/* --- About page (template-about.php) --- */

	/* #header measures 115px tall on mobile; clear it so the page content
	   below isn't hidden underneath it. Scoped to each block-template page
	   via its confirmed .hb-page-* markup rather than a guessed body class. */
	#wrapper:has(.hb-page-about),
	#wrapper:has(.hb-page-services),
	#wrapper:has(.hb-page-dementia-care),
	#wrapper:has(.hb-page-contact) { padding-top: 115px; }

	/* Hero banner (shared across the block templates): the 240px height
	   floor was fighting the aspect-ratio on narrow phones, forcing
	   object-fit: cover to zoom in and crop the image's width unevenly.
	   Let height follow the aspect-ratio instead so the banner scales to
	   the screen width without an aggressive crop. */
	.hb-hero { min-height: 0; }
	.hb-hero__img { object-position: center; }

	/* Team grid: simple centred column — image, name, role centred, bio
	   left-aligned. Also cancels the alternating row-reverse layout, which
	   otherwise still applied on mobile (higher specificity than the plain
	   flex-direction: column rule) and pushed the text off-screen. */
	.hb-page-about .hb-team-grid__member--full,
	.hb-page-about .hb-team-grid--full_width .hb-team-grid__member--full:nth-child(even) {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.hb-page-about .hb-team-grid__member-body {
		align-self: stretch;
		width: 100%;
	}
	.hb-page-about .hb-team-grid__member-body .hb-team-grid__bio {
		text-align: left;
	}

	/* Accreditation rows: image on top (centred), text beneath. */
	.hb-page-about .hb-accreditation-row {
		flex-direction: column;
	}
	.hb-page-about .hb-accreditation-row__text,
	.hb-page-about .hb-accreditation-row__media {
		flex: 0 0 100%;
	}
	.hb-page-about .hb-accreditation-row__media {
		order: -1;
		text-align: center;
	}

	/* --- Services page (template-services.php) --- */

	/* Amenities: centred column instead of a cramped, non-wrapping row
	   (the desktop rule forces flex-wrap: nowrap to keep a single row). */
	.hb-page-services .hb-amenities-box .hb-icon-grid__items {
		flex-direction: column;
		align-items: center;
	}

	/* --- Shared flexible-content blocks (all templates) --- */
	.hb-flexible section {
		padding: 50px 0;
	}
	.hb-hero__heading {
		font-size: 24px !important;
		line-height: 2rem !important;
	}
	.hb-hero__sub {
		font-size: 18px;
	}
	.hb-icon-grid--3 .hb-icon-grid__item,
	.hb-icon-grid--4 .hb-icon-grid__item {
		flex: 0 0 calc(50% - 15px);
	}
	.hb-team-grid__member {
		flex: 0 0 100%;
	}
	/* Contact band: let long unbroken text (emails, phone numbers) wrap
	   instead of forcing the flex item — and the page — wider than the
	   viewport. */
	.hb-contact-band__details li h5 {
		min-width: 0;
		overflow-wrap: break-word;
		word-break: break-word;
	}
	.hb-image-pair__inner {
		flex-direction: column;
	}
	.hb-split__text {
		padding: 35px 20px;
	}
	.hb-approach--horizontal .hb-approach__items {
		flex-direction: column;
	}
	.hb-approach--horizontal .hb-approach__item {
		border-top: none;
		border-left: 4px solid #9B8756;
		padding-top: 0;
		padding-left: 24px;
	}
}