/**
 * Case Studies
 *
 * Drop at: wp-content/themes/orken-child/assets/css/case-studies.css
 *
 * Covers both places the card appears:
 *   [case-studies-feature] shortcode, anywhere
 *   the featured block at the bottom of a single case study
 * Same markup, same rules. The only difference is a layout modifier.
 *
 * Scoped entirely under .acq-cs-list / .acq-cs so nothing can leak into
 * Elementor widgets or the rest of the site.
 *
 * NOTE ON FONTS: no font-family is set on purpose. The block inherits from
 * the site. That avoids repeating the v3 header bug where 'Proxima Nova'
 * (space, title case) was requested while the Typekit family is actually
 * 'proxima-nova' (lowercase, hyphenated), and everything silently fell back
 * to Arial. If you must pin it, uncomment --acq-cs-font and use the SLUG.
 *
 * NOTE ON SHADOWS: no offset drop shadow anywhere. The coral -6px/6px
 * no-blur shadow was removed sitewide in July at the client's request.
 *
 * ==========================================================================
 * CHANGED 26 Aug 2026 - three additions, everything else untouched
 *
 *  [1] Unpublished badge. .acq-cs-card__status and .acq-cs-card--unpublished
 *      in the card section. Only ever rendered for a visitor whose
 *      acq_cs_visible_statuses() included that status, so the public never
 *      sees either.
 *
 *  [2] Featured block spacing. New section near the bottom. The "More case
 *      studies" block had --acq-cs-pad-top: 0 like every other listing, so
 *      it sat flush against the pink CTA band above it.
 *
 *  [3] Breadcrumb padding moved into two tokens. Pure refactor, the shipped
 *      values are identical to before.
 * ======================================================================= */

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */

/* =========================================================================
 * >>> MATCH THE LIVE PAGE HERE <<<
 *
 * Everything that decides how this looks is in this one block. Pull the
 * real numbers off https://acquire.ai/au/insights/case-studies/ with the
 * devtools console snippet in the README, then paste them in. Nothing
 * below this block should need editing.
 *
 * The values shipped here are read off the screenshots, so treat them as
 * a starting point, not as measured truth.
 * ====================================================================== */

/* Width tokens are declared ONCE, on every wrapper that needs them.
 *
 * --acq-cs-max is the CONTENT width, matching the Elementor boxed
 * container's 1300 and orken's content_width. The gutter is added on top
 * of it below, so the breadcrumb, the listing and the case study body all
 * land on the same left edge. Declaring it per-block is what let the
 * breadcrumb sit ~24px inside everything else. */
.acq-cs,
.acq-cs-list,
.acq-cs-crumbs {
	--acq-cs-max:    1300px;
	--acq-cs-gutter: 24px;
}

.acq-cs-list {
	/* Elementor globals, with literals as fallbacks so the block still
	   renders correctly outside an Elementor context. */
	--acq-cs-primary:   var(--e-global-color-primary, #1d4954);

	--acq-cs-ink:       #1d4954; /* headings, links */
	--acq-cs-body:      #6a6a6a; /* copy */
	--acq-cs-accent:    #ff6b5e; /* coral triangle */
	--acq-cs-panel:     #e9efef; /* CARD BACKGROUND - check this one first */
	--acq-cs-line:      #dbe3e3;
	--acq-cs-bg:        transparent; /* section background - the page shows through */

	/* 1300px matches the Elementor boxed container on the rest of the site
	   and orken's own content_width. One number, everywhere. */

	/* Separate cards on white. Row gap is deliberately larger than the
	   column gap: two cards side by side read as a pair, and the wider
	   band underneath is what separates one pair from the next. */
	--acq-cs-gap-x:     32px;   /* between the two cards in a row */
	--acq-cs-gap-y:     40px;   /* between one row and the next */
	/* Top is 0: the spacing above the listing is set on the Elementor
	   container that wraps the shortcode, and two sources of padding on
	   the same edge is how you end up chasing a gap that will not close.
	   Bottom stays here. Set it to 0 too if Elementor owns that edge as
	   well.

	   THE FEATURED BLOCK IS THE EXCEPTION. It is printed by the single
	   template, not dropped in Elementor, so there is no container above
	   it to own that edge. It overrides both tokens near the bottom of
	   this file. */
	--acq-cs-pad-top:    0;
	--acq-cs-pad-bottom: 96px;

	--acq-cs-media:     47%;    /* image share of a split card */
	--acq-cs-card-min:  400px;  /* split card height */
	--acq-cs-body-pad:  36px 40px; /* padding inside the text panel */
	--acq-cs-media-pad: 20px;   /* inset around the thumbnail, panel shows through */

	/* Sizes specified by Kevin, 18 Aug: card header 24, link 18,
	   small headings 14 all caps. Do not "tidy" these to a scale. */
	--acq-cs-title:     24px;
	--acq-cs-eyebrow:   14px;
	--acq-cs-cta:       18px;

	/* --acq-cs-font: "proxima-nova", -apple-system, "Segoe UI", Arial, sans-serif; */
}

/* Full width: no container cap, gutter only. [case-studies-feature width="full"] */
.acq-cs-list--full .acq-cs-list__inner {
	max-width: none;
}

/* -------------------------------------------------------------------------
 * Single wrapper
 *
 * Deliberately near-empty. Elementor owns the layout inside
 * .acq-cs__content and its containers are full-bleed, so constraining
 * width here would fight the builder.
 * ---------------------------------------------------------------------- */

.acq-cs {
	margin: 0;
}

.acq-cs__pages {
	margin: 0 auto;
	padding: 0 24px 48px;
}

/* NO WIDTH CAP ON THE CASE STUDY BODY.
 *
 * There used to be a 1440px cap on the inner Elementor container here.
 * Removed 18 Aug: the width is the author's decision, set per container in
 * Elementor, and a stylesheet rule silently fighting the builder's own
 * setting is worse than no rule at all.
 *
 * Note this is a REMOVAL, not `max-width: none`. Writing `none` would
 * override whatever the Elementor kit sets and blow every boxed container
 * out to full width, which is the opposite of leaving it to the author.
 *
 * If ultrawide ever needs reining in, put it back as:
 *   .acq-cs__content .e-con-boxed > .e-con-inner,
 *   .acq-cs__content .elementor-section.elementor-section-boxed > .elementor-container {
 *       max-width: 1440px; margin-inline: auto;
 *   }
 */

/* Custom HTML mode wrapper.
 *
 * Deliberately unstyled and uncapped. The author's own CSS owns the layout
 * inside it, and capping here would chop any full-bleed section they built.
 * Scope selectors against the id: #acq-cs-<post id> .thing { ... }
 * --acq-cs-max is available if they want to match the Elementor cap. */
.acq-cs__custom {
	display: block;
}

/* Regional header / footer wrappers. No layout of our own: the templates
   carry their own CSS including the scrollbar-aware breakout. The wrapper
   exists so the region is visible in devtools, and so the 1440 cap above
   has something to NOT match. */
.acq-cs__header,
.acq-cs__footer {
	display: block;
}

/* -------------------------------------------------------------------------
 * Breadcrumbs
 * ---------------------------------------------------------------------- */

.acq-cs-crumbs {
	--acq-cs-crumb-gap: 10px;

	/* [3] Tokenised. Values are exactly what shipped before, so this
	   changes nothing on screen.

	   The BOTTOM is 8px, which is why the trail sits tight against the
	   hero underneath it. If you want air there, this is the one line to
	   change - 20px reads comfortably. Do not add margin to the hero
	   instead: the hero is an Elementor container on the blog-post pages
	   and a custom section on the HTML ones, so you would be fixing it
	   twice and it would drift. */
	--acq-cs-crumb-pad-top:    28px;
	--acq-cs-crumb-pad-bottom: 8px;

	box-sizing: border-box;
	padding: var(--acq-cs-crumb-pad-top) 0 var(--acq-cs-crumb-pad-bottom);
}

.acq-cs-crumbs *,
.acq-cs-crumbs *::before {
	box-sizing: inherit;
}

.acq-cs-crumbs__inner {
	/* content + both gutters, so the CONTENT box is exactly --acq-cs-max.
	   box-sizing is border-box here, so max-width alone would make the
	   content 1252 and the trail would sit inside the title below it. */
	max-width: calc(var(--acq-cs-max) + (var(--acq-cs-gutter) * 2));
	margin: 0 auto;
	padding: 0 var(--acq-cs-gutter);
}

.acq-cs-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--acq-cs-crumb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.4;
}

.acq-cs-crumbs__item {
	display: flex;
	align-items: center;
	gap: var(--acq-cs-crumb-gap);
	margin: 0;
	padding: 0;
	color: var(--acq-cs-body, #6a6a6a);
}

.acq-cs-crumbs__item::marker {
	content: none;
}

/* Separator as a pseudo element: never copied with the text, never read
   out as "slash" by a screen reader. */
.acq-cs-crumbs__item + .acq-cs-crumbs__item::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.65;
}

.acq-cs-crumbs__item a {
	color: var(--acq-cs-ink, #1d4954);
	text-decoration: none;
}

.acq-cs-crumbs__item a:hover,
.acq-cs-crumbs__item a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.acq-cs-crumbs__item a:focus-visible {
	outline: 2px solid var(--acq-cs-accent, #ff6b5e);
	outline-offset: 2px;
}

/* Current page. Long titles get truncated rather than wrapping the trail
   onto three lines on a phone. */
.acq-cs-crumbs__item--current span {
	display: block;
	max-width: 100%;
	overflow: hidden;
	color: var(--acq-cs-body, #6a6a6a);
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.acq-cs-crumbs {
		--acq-cs-crumb-pad-top:    20px;
		--acq-cs-crumb-pad-bottom: 4px;
	}

	.acq-cs-crumbs__list {
		flex-wrap: nowrap;
		font-size: 14px;
	}

	.acq-cs-crumbs__item {
		min-width: 0;
	}
}

/* -------------------------------------------------------------------------
 * Listing section
 * ---------------------------------------------------------------------- */

.acq-cs-list {
	/* font-family: var(--acq-cs-font); */
	box-sizing: border-box;
	padding: var(--acq-cs-pad-top) 0 var(--acq-cs-pad-bottom);
	background-color: var(--acq-cs-bg);

	/* Clearance for the sticky site header when the script scrolls the list
	   back into view after a page change. Owned here rather than as a pixel
	   offset in the JS: the header height is a CSS fact, so it belongs with
	   the rest of them and it can follow the breakpoints. */
	scroll-margin-top: var(--acq-cs-scroll-offset, 120px);
}

/* Optional: [case-studies-feature] does not print a section heading by
   default. Pass eyebrow="Case Studies" or heading="..." if a page needs one. */

.acq-cs-list *,
.acq-cs-list *::before,
.acq-cs-list *::after {
	box-sizing: inherit;
}

.acq-cs-list__inner {
	/* Same maths as the breadcrumb above: content box is --acq-cs-max. */
	max-width: calc(var(--acq-cs-max) + (var(--acq-cs-gutter) * 2));
	margin: 0 auto;
	padding: 0 var(--acq-cs-gutter);
}

.acq-cs-list__head {
	/* Defensive. The eyebrow was rendering ON TOP of the first card image,
	   which means something in the theme or a page stylesheet was taking
	   this element out of normal flow. It used to be a <header>; it is a
	   <div> now, and these declarations refuse any inherited float,
	   absolute positioning or width collapse. Do not remove them without
	   confirming in devtools that the computed position is static. */
	display: block;
	position: static;
	float: none;
	clear: both;
	width: 100%;
	margin: 0 0 40px;
	padding: 0;
}

/* Coral triangle + label. The triangle is a pseudo element, so it never
   ends up in copied text or read out by a screen reader. */
.acq-cs-list__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--acq-cs-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.acq-cs-list__eyebrow::before {
	content: "";
	width: 12px;
	height: 11px;
	background-color: var(--acq-cs-accent);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.acq-cs-list__title {
	margin: 16px 0 0;
	color: var(--acq-cs-ink);
	font-size: clamp(26px, 2.4vw, 36px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
 * Grid
 * ---------------------------------------------------------------------- */

.acq-cs-list__grid {
	display: grid;
	row-gap: var(--acq-cs-gap-y);
	column-gap: var(--acq-cs-gap-x);
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: transparent;
}

.acq-cs-list--cols-1 .acq-cs-list__grid { grid-template-columns: minmax(0, 1fr); }
.acq-cs-list--cols-2 .acq-cs-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 3-up runs on SIX tracks with each card spanning two, not three tracks.
   Looks identical (6 tracks + 5 gaps == 3 cards of 2 tracks + their gaps,
   the maths works out exactly) but it leaves the half-track needed to
   even out an incomplete last row below. */
.acq-cs-list--cols-3 .acq-cs-list__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.acq-cs-list--cols-3 .acq-cs-list__item  { grid-column: span 2; }

/* -------------------------------------------------------------------------
 * Incomplete last row
 *
 * An odd count leaves one card alone with a white hole beside it. Stretch
 * it across the row instead so the panel colour runs edge to edge.
 *
 * :last-child:nth-child(odd) only matches when the TOTAL is odd - if the
 * total is even the last item sits on an even index and this never fires.
 * That is the whole trick, no PHP counting needed.
 * ---------------------------------------------------------------------- */

.acq-cs-list--cols-2 .acq-cs-list__item:last-child:nth-child(odd),
.acq-cs-list--cols-3 .acq-cs-list__item:last-child:nth-child(3n + 1) {
	grid-column: 1 / -1;
}

/* Two left over in a 3-up: split the row between them rather than leaving
   a third of it empty. */
.acq-cs-list--cols-3 .acq-cs-list__item:nth-last-child(2):nth-child(3n + 1),
.acq-cs-list--cols-3 .acq-cs-list__item:nth-last-child(2):nth-child(3n + 1) ~ .acq-cs-list__item {
	grid-column: span 3;
}

.acq-cs-list__item {
	display: flex;
	margin: 0;
	padding: 0;
}

.acq-cs-list__item::before,
.acq-cs-list__item::marker {
	content: none;
}

/* -------------------------------------------------------------------------
 * Card, shared
 * ---------------------------------------------------------------------- */

.acq-cs-list .acq-cs-card {
	display: flex;
	width: 100%;
	background-color: var(--acq-cs-panel, #e9efef);
	color: inherit;
	text-decoration: none;
}

.acq-cs-list .acq-cs-card:focus-visible {
	outline: 2px solid var(--acq-cs-accent);
	outline-offset: 3px;
}

.acq-cs-list .acq-cs-card__media {
	display: block;
	overflow: hidden;
	/* Transparent, NOT a placeholder colour. Once --acq-cs-media-pad is
	   non-zero that background would render as a visible frame in a
	   different colour around every thumbnail. The card panel shows
	   through instead. */
	background-color: transparent;
}

.acq-cs-list .acq-cs-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms ease;
}

.acq-cs-list .acq-cs-card:hover .acq-cs-card__media img {
	transform: scale(1.03);
}

.acq-cs-list .acq-cs-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--acq-cs-body-pad);
}

/* -------------------------------------------------------------------------
 * [1] Draft / private badge
 *
 * Rendered only for a visitor whose acq_cs_visible_statuses() returned that
 * status, i.e. someone who can read private case studies. The public never
 * receives this markup at all, so these rules are dead weight on a public
 * page rather than a leak.
 *
 * Colours are NOT in the >>> MATCH THE LIVE PAGE <<< block on purpose. This
 * is an editorial affordance, not part of the design, and it should stay
 * loud enough that nobody mistakes a draft for a live record.
 *
 * ** align-self IS LOad-BEARING **
 * .acq-cs-card__body is a column flex container, so its children are flex
 * items and align-items defaults to stretch. Without align-self the red
 * badge spans the full width of the panel instead of hugging its text. The
 * __cta below solves the same problem with margin-right: auto - either
 * works, this one says what it means.
 * ---------------------------------------------------------------------- */

.acq-cs-list .acq-cs-card__status {
	--acq-cs-status-bg: #c0392b;
	--acq-cs-status-fg: #fff;

	display: inline-block;
	align-self: flex-start;
	margin-bottom: 10px;
	padding: 3px 9px;
	background-color: var(--acq-cs-status-bg);
	color: var(--acq-cs-status-fg);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Outline rather than border: it does not take part in layout, so an
   unpublished card stays exactly the same size as a published one and the
   grid rows do not shift.

   Specificity note: this is (0,2,0) and the :focus-visible rule above is
   (0,3,0), so keyboard focus still wins and the focus ring is never
   swallowed by this. */
.acq-cs-list .acq-cs-card--unpublished {
	outline: 2px dashed rgba(192, 57, 43, 0.45);
	outline-offset: -2px;
}

/* Coral triangle again, this time on the card category */
.acq-cs-list .acq-cs-card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 16px;
	color: var(--acq-cs-ink);
	font-size: var(--acq-cs-eyebrow);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Same flex-item problem as the badge. Invisible until now because the
   eyebrow has no background, so its stretched box never showed. */
.acq-cs-list .acq-cs-card__eyebrow {
	align-self: flex-start;
}

.acq-cs-list .acq-cs-card__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 10px;
	background-color: var(--acq-cs-accent);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.acq-cs-list .acq-cs-card__title {
	display: block;
	margin-bottom: 14px;
	color: var(--acq-cs-ink);
	font-size: var(--acq-cs-title);
	font-weight: 700;
	line-height: 1.32;
}

.acq-cs-list .acq-cs-card__desc {
	display: block;
	margin-bottom: 22px;
	color: var(--acq-cs-body);
	font-size: 15px;
	line-height: 1.65;
}

/* Underlined text link, matching the existing cards. No icon, no arrow.
   NOT margin-top:auto - on the live page the link sits directly under the
   title with the slack below it, not pinned to the bottom of the panel. */
.acq-cs-list .acq-cs-card__cta {
	display: inline-block;
	margin-top: 0;
	margin-right: auto;
	color: var(--acq-cs-ink);
	font-size: var(--acq-cs-cta);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.acq-cs-list .acq-cs-card:hover .acq-cs-card__cta {
	color: var(--acq-cs-accent);
}

/* -------------------------------------------------------------------------
 * Layout: split (image beside the panel) - the default
 * ---------------------------------------------------------------------- */

.acq-cs-list .acq-cs-card--split {
	flex-direction: row;
	align-items: stretch;
	min-height: var(--acq-cs-card-min);
}

.acq-cs-list .acq-cs-card--split .acq-cs-card__media {
	position: relative;
	flex: 0 0 var(--acq-cs-media);
	max-width: var(--acq-cs-media);
	min-height: var(--acq-cs-card-min);
	padding: var(--acq-cs-media-pad);
}

/* The image fills the box and is cropped, it does NOT set the box.
   Without this a portrait photo drives the card to its own natural height
   and a 400px card renders 700px tall with a field of empty panel beside
   it. height:100% alone will not do it: the parent height is indefinite
   in a stretched flex item, so it resolves to auto. Absolute positioning
   gives the definite containing block that makes object-fit work. */
.acq-cs-list .acq-cs-card--split .acq-cs-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A split card with no image should not leave a 47% hole. */
.acq-cs-list .acq-cs-card--split .acq-cs-card__body:only-child {
	flex-basis: 100%;
}

/* -------------------------------------------------------------------------
 * Layout: stack (image above the panel)
 * ---------------------------------------------------------------------- */

.acq-cs-list .acq-cs-card--stack {
	flex-direction: column;
}

.acq-cs-list .acq-cs-card--stack .acq-cs-card__media {
	padding: var(--acq-cs-media-pad);
}

.acq-cs-list .acq-cs-card--stack .acq-cs-card__media img {
	height: auto;
	aspect-ratio: 3 / 2;
}

.acq-cs-list .acq-cs-card--stack .acq-cs-card__body {
	padding: 28px;
}

/* -------------------------------------------------------------------------
 * Responsive
 *
 * Plain min/max-width breakpoints, NOT Elementor's. This site has custom
 * breakpoints enabled, so the builder's values do not line up with these.
 * ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.acq-cs-list {
		--acq-cs-body-pad: 28px 30px;
	}
}

@media (max-width: 1024px) {
	.acq-cs-list {
		--acq-cs-pad-bottom: 72px;
		--acq-cs-gap-x: 24px;
		--acq-cs-gap-y: 32px;
	}

	/* 3-up becomes two per row. Still six tracks, three each. The desktop
	   leftover rules have to be restated or a 4th item, which happens to
	   match 3n+1, would stretch across a row it does not end. */
	.acq-cs-list--cols-3 .acq-cs-list__item,
	.acq-cs-list--cols-3 .acq-cs-list__item:last-child:nth-child(3n + 1),
	.acq-cs-list--cols-3 .acq-cs-list__item:nth-last-child(2):nth-child(3n + 1),
	.acq-cs-list--cols-3 .acq-cs-list__item:nth-last-child(2):nth-child(3n + 1) ~ .acq-cs-list__item {
		grid-column: span 3;
	}

	.acq-cs-list--cols-3 .acq-cs-list__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.acq-cs-list {
		--acq-cs-card-min: 320px;
	}
}

@media (max-width: 900px) {
	/* Two split cards side by side get too narrow to read below this. */
	.acq-cs-list__grid:has(.acq-cs-card--split) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.acq-cs-list {
		--acq-cs-pad-bottom: 56px;
		--acq-cs-gutter: 20px;
		--acq-cs-gap-x: 20px;
		--acq-cs-gap-y: 24px;
	}

	.acq-cs-list--cols-2 .acq-cs-list__grid,
	.acq-cs-list--cols-3 .acq-cs-list__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Single track, so every span rule above has to be cleared or a
	   `span 2` would invent an implicit second column. */
	.acq-cs-list .acq-cs-list__item {
		grid-column: 1 / -1;
	}

	/* Split collapses to stacked on phones, matching the reference. */
	.acq-cs-list .acq-cs-card--split {
		flex-direction: column;
		min-height: 0;
	}

	.acq-cs-list .acq-cs-card--split .acq-cs-card__media {
		position: static;
		flex: 0 0 auto;
		max-width: none;
		width: 100%;
		min-height: 0;
		padding: var(--acq-cs-media-pad);
	}

	.acq-cs-list .acq-cs-card--split .acq-cs-card__media img {
		position: static;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.acq-cs-list {
		--acq-cs-body-pad: 24px;
		--acq-cs-title: 20px;
		--acq-cs-cta: 16px;
		--acq-cs-card-min: 0;
	}

	.acq-cs-list__head {
		margin-bottom: 28px;
	}

	/* Shorter sticky header on a phone, so less clearance is needed. */
	.acq-cs-list {
		--acq-cs-scroll-offset: 80px;
	}
}

/* =========================================================================
 * [2] FEATURED BLOCK  -  "More case studies"
 *
 * The only listing on the site that is printed by a PHP template rather
 * than dropped into an Elementor container. That is why it needed its own
 * top padding: --acq-cs-pad-top is 0 everywhere else because the Elementor
 * container above the shortcode owns that edge. Here there is no container,
 * so the block sat flush against the pink CTA band above it.
 *
 * ** THE TWO NUMBERS TO CHANGE ARE DIRECTLY BELOW **
 *
 * They override the SAME tokens the base .acq-cs-list rule already reads,
 * so no new padding declaration is introduced. Horizontal padding stays 0
 * and the gutter stays on __inner, which is what keeps the featured cards
 * on the same left edge as the breadcrumb and the body above them.
 *
 * Placed after the responsive section AND written at (0,2,0) so neither
 * source order nor the breakpoint overrides on plain .acq-cs-list can
 * silently reintroduce the flush edge.
 * ====================================================================== */

.acq-cs-list.acq-cs-list--featured {
	/* Symmetrical with the bottom, which was already 96px. If you want the
	   tight version instead, set both of these to 15px. Be warned that the
	   pink CTA band sits directly above and the dark teal footer directly
	   below, so at 15px the heading reads as part of the pink band. */
	--acq-cs-pad-top:    96px;
	--acq-cs-pad-bottom: 96px;

	/* Gap between the "More case studies" heading and the first row.
	   40px is what .acq-cs-list__head already used, so this changes
	   nothing until you touch it. */
	--acq-cs-featured-head-gap: 40px;
}

.acq-cs-list.acq-cs-list--featured .acq-cs-list__head {
	margin-bottom: var(--acq-cs-featured-head-gap);
}

@media (max-width: 1024px) {
	.acq-cs-list.acq-cs-list--featured {
		--acq-cs-pad-top:    72px;
		--acq-cs-pad-bottom: 72px;
	}
}

@media (max-width: 767px) {
	.acq-cs-list.acq-cs-list--featured {
		--acq-cs-pad-top:    56px;
		--acq-cs-pad-bottom: 56px;
		--acq-cs-featured-head-gap: 28px;
	}
}

/* =========================================================================
 * [4] PAGINATION WITHOUT A PAGE LOAD
 *
 * assets/js/case-studies.js swaps the contents of .acq-cs-list__results in
 * place and adds .is-acq-cs-loading to the section for the duration.
 *
 * ** EVERY RULE HERE IS OPTIONAL BY DESIGN **
 * The class is only ever present while a request is in flight. If the script
 * does not load, none of this ever applies and the listing looks and behaves
 * exactly as it did before. Do not put layout in this block.
 *
 * The fade is deliberately shallow. Blanking the grid to 0 makes a fast
 * connection flicker, which reads as a bug rather than as a transition.
 * ====================================================================== */

.acq-cs-list__results {
	position: relative;
	transition: opacity 180ms ease;
}

/* tabindex="-1" is on this element so focus can be moved here after a swap.
   Without this rule the browser paints its default focus ring around the
   whole grid every time, which is noise: the element is a scroll and focus
   target, not something the user chose. Keyboard focus on the pager links
   themselves is untouched and still visible. */
.acq-cs-list__results:focus {
	outline: none;
}

.acq-cs-list.is-acq-cs-loading .acq-cs-list__results {
	opacity: 0.45;
	/* Clicks during a swap would hit cards that are about to be replaced. */
	pointer-events: none;
}

/* The pager stays legible while the grid fades, so the reader can see which
   page they asked for. It just stops responding. */
.acq-cs-list.is-acq-cs-loading .acq-cs-pager {
	pointer-events: none;
	opacity: 0.65;
}

.acq-cs-list.is-acq-cs-loading .acq-cs-pager a.page-numbers {
	cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
	.acq-cs-list__results {
		transition: none;
	}

	/* Still dimmed, because the dimming is the only feedback that anything is
	   happening. Only the animation between the two states is dropped. */
}

/* -------------------------------------------------------------------------
 * Pagination
 *
 * paginate_links() output, restyled. The classes below are WordPress core's
 * (.page-numbers, .current, .dots, .prev, .next), not ours, so do not
 * rename them.
 *
 * Current page  = primary background, white text
 * Other pages   = primary text, no fill
 * ---------------------------------------------------------------------- */

.acq-cs-pager {
	margin-top: 56px;
}

.acq-cs-pager__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.acq-cs-pager__item {
	margin: 0;
	padding: 0;
}

.acq-cs-pager__item::before,
.acq-cs-pager__item::marker {
	content: none;
}

/* The circle. Applies to links, the current span and the dots alike, so
   they all sit on the same baseline and the row never jumps. */
.acq-cs-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	border-radius: 50%;
	background-color: transparent;
	color: var(--acq-cs-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color 160ms ease,
		color 160ms ease;
}

/* Current page */
.acq-cs-pager .page-numbers.current {
	background-color: var(--acq-cs-primary);
	color: #fff;
	cursor: default;
}

/* Hover / focus on the others */
.acq-cs-pager a.page-numbers:hover,
.acq-cs-pager a.page-numbers:focus-visible {
	background-color: var(--acq-cs-panel, #e9efef);
	color: var(--acq-cs-primary);
}

.acq-cs-pager a.page-numbers:focus-visible {
	outline: 2px solid var(--acq-cs-accent);
	outline-offset: 2px;
}

/* Ellipsis is not interactive, so no circle affordance */
.acq-cs-pager .page-numbers.dots {
	min-width: 24px;
	background-color: transparent;
	color: var(--acq-cs-body);
	cursor: default;
}

/* Prev / next chevrons, drawn in CSS so there is no icon font and no
   extra request. currentColor means they inherit the states above. */
.acq-cs-pager .page-numbers.prev,
.acq-cs-pager .page-numbers.next {
	position: relative;
}

.acq-cs-pager .page-numbers.prev::before,
.acq-cs-pager .page-numbers.next::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.acq-cs-pager .page-numbers.prev::before {
	transform: translateX(2px) rotate(-135deg);
}

.acq-cs-pager .page-numbers.next::before {
	transform: translateX(-2px) rotate(45deg);
}

@media (max-width: 767px) {
	.acq-cs-pager {
		margin-top: 36px;
	}

	.acq-cs-pager__list {
		gap: 6px;
	}

	.acq-cs-pager .page-numbers {
		min-width: 38px;
		height: 38px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.acq-cs-pager .page-numbers {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------------------- */

/* Low specificity so the theme's own definition wins if it has one. */
:where(.acq-cs-list) .screen-reader-text,
:where(.acq-cs-pager) .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.acq-cs-list .acq-cs-card__media img {
		transition: none;
	}

	.acq-cs-list .acq-cs-card:hover .acq-cs-card__media img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Print
 * ---------------------------------------------------------------------- */

@media print {
	.acq-cs-list--featured {
		display: none;
	}

	/* A printed page has no notion of who is logged in, and a red block is
	   a lot of toner. The dashed outline is enough. */
	.acq-cs-list .acq-cs-card__status {
		--acq-cs-status-bg: transparent;
		--acq-cs-status-fg: #c0392b;

		padding-left: 0;
		padding-right: 0;
	}
}