/**
 * JF Resource Templates — Case Studies template.
 *
 * Loaded only on pages using jfrt-case-studies-template.php (see
 * JFRT_Templates::TEMPLATE_STYLES). Hand-written and deliberately kept
 * out of the SCSS build, same as jf-slider.css: nothing here needs a
 * Bootstrap variable or mixin, so there is no source file to compile — edit
 * this file directly.
 *
 * Every colour and radius is a custom property printed by the Template Styles
 * options page (--brand-color, --accent-cta, --heading-color, …). There are no
 * literal brand colours below, which is what lets the same file look like each
 * client's site. The fallbacks in var() are only there for the moment before
 * an options page has been filled in.
 *
 *   1. The case studies grid
 *   2. Editor-only empty state
 *
 * The hero band at the top of the page is shared with the Testimonials
 * template and lives in jf-hero-pills.css.
 */

/* ==========================================================================
   1. THE GRID
   Cards per row come from the page's "Columns" field, printed as a class:
     --cols-3   3 on desktop, 2 on tablets, 1 on phones
     --cols-2   2 on desktop and tablets, 1 on phones
   ========================================================================== */

.jfrt-case-studies .cs-list__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Row and column gaps come from the page fields when set (--cs-row-gap /
	   --cs-column-gap); the values after the commas are the defaults. */
	gap: var(--cs-row-gap, 3rem) var(--cs-column-gap, 2rem);
}

.jfrt-case-studies .cs-list__items--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--cs-column-gap, 2.5rem);
}

/* One card: image on top, then title, extract and link stacked under it.
   Any of the four can be switched off on the page; the card just closes up. */
.jfrt-case-studies .cs-item {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.jfrt-case-studies .cs-item__media {
	min-width: 0;
}

.jfrt-case-studies .cs-item__media a {
	display: block;
	border-radius: var(--rounded-large, 24px);
}

.jfrt-case-studies .cs-item__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rounded-large, 24px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.jfrt-case-studies .cs-item__media a:hover .cs-item__image {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.jfrt-case-studies .cs-item__content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0.75rem;
	min-width: 0;
}

.jfrt-case-studies .cs-item__title {
	margin: 0;
	font-size: 22px;
	/* !important: the shared typography sets every .jfrt-wrapper h3 to 600 / 1.3 !important. */
	font-weight: 500 !important;
	line-height: 130% !important;
}

.jfrt-case-studies .cs-item__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.jfrt-case-studies .cs-item__title a:hover,
.jfrt-case-studies .cs-item__title a:focus-visible {
	color: var(--accent-cta, #035f9c);
}

.jfrt-case-studies .cs-item__extract {
	margin: 0;
}

.jfrt-case-studies .cs-item__extract :last-child {
	margin-bottom: 0;
}

/* margin-top: auto keeps the links on one line across a row of cards whose
   titles or extracts run to different lengths. */
.jfrt-case-studies .cs-item__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.5rem;
	margin-top: auto;
	color: var(--accent-cta, #035f9c);
	font-weight: 600;
	text-decoration: none;
}

.jfrt-case-studies .cs-item__link:hover,
.jfrt-case-studies .cs-item__link:focus-visible {
	color: var(--accent-cta-hover, #0281ab);
	text-decoration: underline;
}

/* The arrow slides on hover; nothing moves for anyone who asked not to have
   motion (see the reduced-motion rule at the bottom of this file). */
.jfrt-case-studies .cs-item__arrow {
	transition: transform 0.2s ease;
}

.jfrt-case-studies .cs-item__link:hover .cs-item__arrow {
	transform: translateX(4px);
}

/* ── Tablets: 3 columns become 2 ─────────────────────────────────────── */

@media (max-width: 991.98px) {
	.jfrt-case-studies .cs-list__items--cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jfrt-case-studies .cs-list__items,
	.jfrt-case-studies .cs-list__items--cols-2 {
		column-gap: var(--cs-column-gap, 1.5rem);
	}
}

/* ── Phones: always 1 column ─────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.jfrt-case-studies .cs-list__items,
	.jfrt-case-studies .cs-list__items--cols-2,
	.jfrt-case-studies .cs-list__items--cols-3 {
		grid-template-columns: minmax(0, 1fr);
		/* Phone gaps from the page's mobile spacing fields, else the desktop ones. */
		row-gap: var(--cs-row-mobile-gap, var(--cs-row-gap, 2.5rem));
		column-gap: var(--cs-column-mobile-gap, var(--cs-column-gap, 1.5rem));
	}

	.jfrt-case-studies .cs-item {
		gap: 1rem;
	}
}

/* ==========================================================================
   2. EDITOR-ONLY EMPTY STATE
   Same warning styling the logo strip uses when its gallery is empty.
   ========================================================================== */

.jfrt-case-studies .cs-empty-notice {
	padding: 20px;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	color: #856404;
}

@media (prefers-reduced-motion: reduce) {
	.jfrt-case-studies .cs-item__arrow,
	.jfrt-case-studies .cs-item__link,
	.jfrt-case-studies .cs-item__image,
	.jfrt-case-studies .cs-item__title a {
		transition: none;
	}

	.jfrt-case-studies .cs-item__link:hover .cs-item__arrow,
	.jfrt-case-studies .cs-item__media a:hover .cs-item__image {
		transform: none;
	}
}