/**
 * Independent Living at Isabella House – IL blocks (Split, Pillars, Text Band).
 * Colors and fonts are the ones already used across the theme.
 */

:root {
	--il-olive: #525a44;
	--il-olive-dark: #3d4433;
	--il-rust: #834629;
	--il-cream: #f1efe9;
	--il-text: #525a44;
	--il-stone: #d8cebf;          /* fallback behind the pillar cards */
	--il-max: 1440px;             /* matches .container */
	--il-gutter: 80px;
}

@media (max-width: 1024px) { :root { --il-gutter: 40px; } }
@media (max-width: 767px)  { :root { --il-gutter: 20px; } }

/* ---------------------------------------------------------------- Shared */

.il-bg-cream { background-color: var(--il-cream); }
.il-bg-white { background-color: #fff; }
.il-bg-olive { background-color: var(--il-olive); }
.il-bg-stone {
	background-color: var(--il-stone);
	background-image: radial-gradient(ellipse at 20% 10%, #e6ddd0 0%, transparent 60%),
		radial-gradient(ellipse at 80% 90%, #cbbfad 0%, transparent 55%);
}

.il-eyebrow {
	margin: 0 0 24px;
	color: var(--il-olive);
	font-family: "Isabella Sans", "Open Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.il-eyebrow-rust .il-eyebrow { color: var(--il-rust); }

.il-heading {
	margin: 0 0 28px;
	color: var(--il-olive);
	font-family: "Isabella Display", Georgia, serif;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-wrap: balance;
}

.il-heading--large {
	font-size: clamp(40px, 4.4vw, 66px);
	line-height: 1.08;
}

.il-heading--medium {
	font-size: clamp(30px, 3.2vw, 46px);
	line-height: 1.15;
	margin-bottom: 20px;
}

.il-body {
	color: var(--il-text);
	font-family: "Open Sans", sans-serif;
}

.il-body p {
	margin: 0 0 1.25em;
	font-size: 18px;
	line-height: 1.6;
}

.il-body > :last-child { margin-bottom: 0; }

.il-button {
	display: inline-flex;
	align-items: center;
	margin-top: 32px;
	padding: 14px 28px;
	border: 1px solid currentColor;
	color: var(--il-olive);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.il-button:hover,
.il-button:focus-visible {
	background: var(--il-olive);
	color: var(--il-cream);
}

/* Olive backgrounds flip to cream text. */
.il-bg-olive .il-eyebrow,
.il-bg-olive .il-heading,
.il-bg-olive .il-body,
.il-bg-olive .il-button { color: var(--il-cream); }
.il-bg-olive.il-eyebrow-rust .il-eyebrow { color: #e3b79c; } /* rust lightened for contrast on olive */
.il-bg-olive .il-button:hover,
.il-bg-olive .il-button:focus-visible { background: var(--il-cream); color: var(--il-olive); }

.il-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	height: 100%;
	padding: 24px;
	border: 1px dashed rgba(82, 90, 68, 0.4);
	color: var(--il-olive);
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	text-align: center;
}

/* ---------------------------------------------------------------- Split */

.il-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: clamp(460px, 46vw, 680px);
}

.il-split__text {
	display: flex;
	align-items: center;
	padding-block: clamp(56px, 7vw, 110px);
	/* Line the text up with the site's .container edge. */
	padding-inline-start: max(var(--il-gutter), calc((100vw - var(--il-max)) / 2 + var(--il-gutter)));
	padding-inline-end: clamp(32px, 5vw, 80px);
}

.il-split__inner { max-width: 600px; }

.il-split__media {
	position: relative;
	min-height: 320px;
	overflow: hidden;
	background: var(--il-stone);
}

.il-split__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.il-split--image-left .il-split__media { order: -1; }
.il-split--image-left .il-split__text {
	padding-inline-start: clamp(32px, 5vw, 80px);
	padding-inline-end: max(var(--il-gutter), calc((100vw - var(--il-max)) / 2 + var(--il-gutter)));
}

.il-split.no-image { grid-template-columns: 1fr; min-height: 0; }

@media (max-width: 1024px) {
	.il-split { grid-template-columns: 1fr; min-height: 0; }
	.il-split__text,
	.il-split--image-left .il-split__text { padding-inline: var(--il-gutter); }
	.il-split__inner { max-width: 640px; }
	.il-split__media,
	.il-split--image-left .il-split__media { order: 0; aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---------------------------------------------------------------- Pillars */

.il-pillars {
	padding-block: clamp(40px, 5vw, 72px);
	background-color: var(--il-stone);
	background-size: cover;
	background-position: center;
}

.il-pillars.no-bg {
	background-image: radial-gradient(ellipse at 20% 10%, #e6ddd0 0%, transparent 60%),
		radial-gradient(ellipse at 80% 90%, #cbbfad 0%, transparent 55%);
}

.il-pillars__heading { margin-bottom: 32px; }

.il-pillars__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.il-pillar {
	margin: 0;
	padding: 18px 22px 22px;
	border-radius: 12px;
	background: rgba(241, 239, 233, 0.82);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.il-pillar__title {
	margin: 0 0 8px;
	color: var(--il-olive);
	font-family: "Isabella Alt", "Isabella Sans", sans-serif;
	font-size: clamp(22px, 2vw, 26px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

.il-pillar__text {
	margin: 0;
	color: #55594b;
	font-family: "Open Sans", sans-serif;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.45;
}

/* ---------------------------------------------------------------- Text band */

.il-band {
	padding-block: clamp(56px, 6.5vw, 100px);
}

.il-band__inner { max-width: 620px; }

.il-band .il-heading--medium { max-width: 16em; }