/* glade/services — image card grid from the Services CPT (bespoke Glade design). */

/* ── Centered intro ───────────────────────────────────────────────────────── */
.glade-services__head { display: flex; flex-direction: column; }
.glade-services__head.is-center { align-items: center; text-align: center; }
.glade-services__eyebrow {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	border-radius: var(--glade-btn-radius);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--brand-hover);
	padding: 6px 14px;
	font-size: var(--glade-small);
	font-weight: var(--glade-weight-medium);
	letter-spacing: -0.01em;
}
.glade-services__head.is-center .glade-services__eyebrow { align-self: center; }
.glade-services__title {
	margin-top: var(--glade-space-20);
	max-width: 640px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--glade-weight-medium);
	font-size: var(--glade-section-title);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}
.glade-services__em { font-style: italic; }
.glade-services__lead { margin-top: var(--glade-space-12); max-width: 520px; font-size: var(--glade-body); line-height: 1.5; color: var(--wp--preset--color--muted); }

/* ── Card grid ────────────────────────────────────────────────────────────── */
.glade-services__grid {
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--glade-space-32);
	row-gap: var(--glade-space-48);
}
@media (min-width: 640px) { .glade-services__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .glade-services__grid { grid-template-columns: repeat(3, 1fr); } }

.glade-services__card { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.glade-services__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--glade-radius-lg);
}
.glade-services__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.glade-services__card:hover .glade-services__img { transform: scale(1.03); }
.glade-services__card-title {
	margin-top: var(--glade-space-20);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--glade-weight-medium);
	font-size: var(--glade-h3);
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	transition: color 0.2s ease;
}
.glade-services__card:hover .glade-services__card-title { color: var(--wp--preset--color--brand); }
.glade-services__desc { margin-top: var(--glade-space-8); font-size: var(--glade-small); line-height: 1.5; color: var(--wp--preset--color--muted); }
.glade-services__tags {
	margin: var(--glade-space-20) 0 0;
	padding: var(--glade-space-20) 0 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--glade-space-8);
	border-top: var(--glade-border-width) solid var(--wp--preset--color--line);
}
.glade-services__tag {
	border-radius: var(--glade-btn-radius);
	border: var(--glade-border-width) solid var(--wp--preset--color--line);
	background: rgba(252, 251, 248, 0.6);
	color: var(--wp--preset--color--ink-soft);
	padding: 6px var(--glade-space-12);
	font-size: var(--glade-micro);
	line-height: 1;
}

/* ── Optional "view all" (services landing) ───────────────────────────────── */
.glade-services__viewall-wrap { margin-top: var(--glade-space-40); display: flex; justify-content: center; }
.glade-services__viewall {
	display: inline-flex; align-items: center; gap: var(--glade-space-8);
	font-weight: var(--glade-weight-medium); color: var(--wp--preset--color--brand-hover); text-decoration: none;
}
.glade-services__viewall:hover { color: var(--wp--preset--color--brand); }

/* ── "rows" layout: full-width alternating service detail bands ─────────────── */
.glade-srow { background: var(--wp--preset--color--page); padding-block: var(--glade-space-48); }
@media (min-width: 1024px) { .glade-srow { padding-block: var(--glade-space-64); } }
.glade-srow.is-alt { background: rgba(231, 224, 208, 0.4); }   /* secondary/40 */
.glade-srow__grid { display: grid; gap: var(--glade-space-40); align-items: center; }
@media (min-width: 1024px) { .glade-srow__grid { grid-template-columns: 1fr 1fr; gap: var(--glade-space-64); } .glade-srow__grid.is-mirror .glade-srow__media { order: 2; } }
.glade-srow__media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--glade-radius-lg); }
.glade-srow__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.glade-srow__num { font-size: var(--glade-small); font-weight: var(--glade-weight-medium); color: var(--wp--preset--color--brand); }
.glade-srow__title {
	margin-top: var(--glade-space-8);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--glade-weight-medium);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
}
.glade-srow__desc { margin-top: var(--glade-space-12); font-size: var(--glade-body); line-height: 1.55; color: var(--wp--preset--color--muted); }
.glade-srow__ideal { margin-top: var(--glade-space-16); font-size: var(--glade-small); color: var(--wp--preset--color--muted); }
.glade-srow__ideal span { font-weight: var(--glade-weight-medium); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(26, 26, 26, 0.7); }
.glade-srow__list { margin: var(--glade-space-24) 0 0; padding: 0; list-style: none; display: grid; gap: 10px var(--glade-space-24); }
@media (min-width: 640px) { .glade-srow__list { grid-template-columns: repeat(2, 1fr); } }
.glade-srow__list-item { display: flex; align-items: center; gap: 10px; font-size: var(--glade-meta); color: var(--wp--preset--color--ink); }
.glade-srow__check {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 20px; height: 20px; border-radius: var(--glade-btn-radius);
	background: rgba(164, 198, 63, 0.25); color: var(--wp--preset--color--brand);
}
.glade-srow__cta {
	display: inline-flex; align-items: center; gap: var(--glade-space-8); margin-top: var(--glade-space-32);
	border-radius: var(--glade-btn-radius); padding: var(--glade-space-12) var(--glade-space-24);
	background: var(--wp--preset--color--brand); color: #fff;
	font-size: var(--glade-small); font-weight: var(--glade-weight-medium); text-decoration: none;
	transition: background-color 0.2s ease;
}
.glade-srow__cta:hover { background: var(--wp--preset--color--brand-hover); }
.glade-srow__cta svg { transition: transform 0.2s ease; }
.glade-srow__cta:hover svg { transform: translateX(4px); }