/* =================================================================
   THE SERVICE CARD
   =================================================================
   One card: a photograph, a title, a summary and a link. Shared, not
   copied — the home page's carousel and the services page's grid both
   render it, so a change to a card is one change.

   It was written inside services-carousel.css first and moved here the
   moment a second thing needed it. Copying it instead would have left
   two cards that agree until somebody edits one, which is the failure
   this split exists to prevent.

   THE LAYOUT IS NOT HERE
   ----------------------
   Nothing in this file positions a card. Whether cards sit in a
   sliding track or a static grid belongs to whatever is arranging
   them; a card only knows how to look like a card.

   THE PALETTE IS NOT HERE EITHER
   ------------------------------
   The tokens are declared by the arranging block — .cb-svc for the
   carousel, .cb-grid for the grid — because both already declare them
   for their own controls, and a third declaration here would be a
   third place to change a colour.

   EVERY RULE IS SCOPED TO .cb-svc__card, NEVER TO AN ANCESTOR
   -----------------------------------------------------------
   These rules were written inside the carousel and carried its class:
   `.cb-svc .cb-svc__title`. That kept working in the carousel and
   silently stopped applying the moment the same card appeared inside
   .cb-grid, because .cb-svc is not an ancestor there. Measured on the
   services page before it was caught: the title was rendering at 28px
   with a 40px top margin — the theme's own `.entry-content h2` — not
   at the 19px this file asks for.

   The doubled class is still needed for weight: the theme's rule is
   (0,1,1) and a lone `.cb-svc__title` is (0,1,0). `.cb-svc__card
   .cb-svc__title` is (0,2,0) and wins, and both halves belong to the
   card, so it cannot be broken by where the card is put.
   ================================================================= */


/* -----------------------------------------------------------------
   THE CARD
   ----------------------------------------------------------------- */

.cb-svc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.cb-svc__card:hover {
	border-color: var(--brand);
	transform: translateY(-3px);

	/* Three layers, not one big blur: a tight contact shadow, a mid
	   spread and a wide soft one. Real objects cast all three, and one
	   large blur is the giveaway of a flat design pretending to be lit. */
	box-shadow:
		0 1px 2px rgba(10, 42, 51, .05),
		0 8px 18px -8px rgba(10, 42, 51, .10),
		0 26px 50px -24px rgba(10, 42, 51, .24);
}

.cb-svc__figure {
	margin: 0;
	overflow: hidden;
	background: var(--brand-wash);
}

/*
 * THE RATIO IS ON THE IMAGE, NOT ON THE FIGURE.
 *
 * Written the obvious way — aspect-ratio on the figure, height:100% on
 * the image — the image came out at its own 16:9 and left a strip of
 * the figure's background showing under every card. Not a specificity
 * fight: a percentage height resolves against the containing block's
 * height, and a block sized only by aspect-ratio does not give one, so
 * `height: 100%` fell back to auto.
 *
 * Sizing the image itself removes the dependency entirely. It also
 * means the `img { height: auto }` a plugin ships is now the value
 * this wants rather than the value it has to beat, and the browser
 * reserves the right box before the file arrives, so the cards do not
 * jump as the row loads.
 */
.cb-svc__card .cb-svc__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.cb-svc__card:hover .cb-svc__img { transform: scale(1.05); }

.cb-svc__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 10px;

	/* 14px under the photograph rather than 22: the image is a hard
	   edge, and the title should read as belonging to it rather than
	   floating below it. The sides and the foot keep their room. */
	padding: 14px 22px 20px;
}

/*
 * The section class is on the type rules for a reason worth stating:
 * the theme ships `.entry-content h3` and `html[dir="rtl"] h1, h2, h3
 * { line-height: 1.45 }`, both (0,1,1), which beat a plain
 * `.cb-svc__title` at (0,1,0). The same collision set every heading in
 * the hero to the wrong size until it was written this way.
 */
.cb-svc__card .cb-svc__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--ink);
	transition: color .25s ease;
}

.cb-svc__card:hover .cb-svc__title { color: var(--brand-deep); }

.cb-svc__card .cb-svc__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--ink-soft);

	/*
	 * Clamped by LINE, not by word count.
	 *
	 * Elementor's own trim cut at twenty words and appended nothing —
	 * its filter_excerpt_more() returns an empty string — so a card
	 * ended mid-sentence with no mark, which reads as text that failed
	 * to load. A line clamp makes every card in a row the same height
	 * whatever the width, and the browser supplies the ellipsis.
	 *
	 * A browser without line-clamp shows the whole excerpt. That is a
	 * taller card, not a broken one.
	 */
	display: -webkit-box;
	-webkit-line-clamp: var(--cb-svc-clamp);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cb-svc__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-block-start: auto;
	padding-block-start: 6px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--brand-deep);
	text-decoration: none;
	transition: color .25s ease, gap .25s ease;
}

/*
 * :visited stated explicitly, and not optional.
 *
 * base.css ships `a, a:visited { color: var(--themeht-text-color) }` —
 * a dark navy at (0,1,1), which beats a plain class. Without this the
 * link is teal until the visitor has been to that service page and
 * dark navy for ever after, so the card quietly changes appearance
 * based on the reader's history.
 */
.cb-svc__card .cb-svc__link,
.cb-svc__card .cb-svc__link:visited { color: var(--brand-deep); }

.cb-svc__card .cb-svc__link:hover,
.cb-svc__card .cb-svc__link:focus-visible {
	color: var(--brand);
	gap: 12px;
}

/*
 * The card link's arrow is NOT mirrored, and the nav arrows are.
 *
 * They mean different things. "Previous" and "next" are positions on a
 * track, so they flip with the track. This one means "onward, keep
 * reading" — and onward in Arabic is leftward, which is the direction
 * the path is already drawn in. Flipping it pointed it back at the
 * text it was leading away from.
 */

/*
 * The whole card is clickable — photograph, title and all — from the
 * one anchor already in it.
 *
 * Wrapping the image and the title in anchors of their own would do
 * the same thing and cost two more tab stops and two more identical
 * entries in a screen reader's list of links.
 *
 * It reaches the photograph because .cb-svc__card is the nearest
 * positioned ancestor, so `inset: 0` resolves against the card rather
 * than against the body the link sits in.
 */
.cb-svc__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}


.cb-svc__link:focus-visible::after {
	outline: 2px solid var(--brand-deep);
	outline-offset: -3px;
	border-radius: 14px;
}


/* -----------------------------------------------------------------
   REDUCED MOTION
   -----------------------------------------------------------------
   Beside the transitions it cancels, not in whichever file happens to
   arrange the cards.
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.cb-svc__card,
	.cb-svc__img,
	.cb-svc__link {
		transition: none;
	}

	.cb-svc__card:hover { transform: none; }
	.cb-svc__card:hover .cb-svc__img { transform: none; }
}