/*!
 * Becker Robotic — homepage styles (front-page.php)
 * Source: design-reference/Becker Homepage.dc.html + Scale Reach.dc.html
 * Loaded only on the front page (inc/enqueue.php). BEM throughout.
 *
 * TOC: .page-section header pattern → hero → trust strip → category cards →
 *      DCDI band → pillars → brands → why-becker → lhms → shop-teaser →
 *      applications → proof → resources → closing CTA
 */

/* .page-section / .pillar-card / .closing-cta are shared page components —
 * they live in becker-main.css §10 (used by brand/application pages too). */

/* --------------------------------------------------------------------------
 * 1. HERO — split variant (default). ACF `becker_home_hero_variant` can
 *    switch to --video / --charcoal (both styled here for parity).
 * ------------------------------------------------------------------------ */
.hero--split {
	background: var(--becker-bg-light);
}

.hero--split .hero__inner {
	max-width: var(--becker-maxw);
	margin-inline: auto;
	padding: clamp(48px, 7vw, 80px) var(--becker-pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.hero__eyebrow {
	margin: 0 0 16px;
	font-size: var(--becker-fs-caption);
	font-weight: 600;
	letter-spacing: var(--becker-ls-eyebrow);
	color: var(--becker-red);
	text-transform: uppercase;
}

.hero__title {
	margin: 0 0 20px;
	font-size: clamp(26px, 5vw, 34px);
	line-height: 1.2;
	font-weight: 700;
	text-wrap: pretty;
}

.hero__lead {
	margin: 0 0 32px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--becker-text-muted);
	max-width: 56ch;
	text-wrap: pretty;
}

.hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.hero__image {
	width: 100%;
	height: 100%;
	min-height: 380px;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--becker-radius-card);
	display: block;
	background: #E8E7EA;
}

/* Charcoal hero variant */
.hero--charcoal {
	background: var(--becker-charcoal);
}

.hero--charcoal .hero__inner {
	max-width: var(--becker-maxw);
	margin-inline: auto;
	padding: clamp(52px, 7vw, 88px) var(--becker-pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.hero--charcoal .hero__eyebrow {
	color: var(--becker-teal-light);
}

.hero--charcoal .hero__title {
	color: var(--becker-white);
}

.hero--charcoal .hero__lead {
	color: var(--becker-dark-text);
}

.hero--charcoal .hero__image {
	background: var(--becker-dark-panel);
}

/* Full-bleed video-cover hero variant */
.hero--video {
	position: relative;
	background: var(--becker-charcoal);
	min-height: 600px;
	display: flex;
	align-items: flex-end;
}

.hero--video .hero__cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero--video .hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(44, 43, 48, 0.2) 0%, rgba(44, 43, 48, 0.85) 100%);
}

.hero--video .hero__inner {
	position: relative;
	max-width: var(--becker-maxw);
	margin-inline: auto;
	padding: clamp(48px, 7vw, 80px) var(--becker-pad-x) 72px;
	width: 100%;
}

.hero--video .hero__eyebrow {
	color: var(--becker-teal-light);
}

.hero--video .hero__title {
	color: var(--becker-white);
	max-width: 24ch;
}

.hero--video .hero__lead {
	color: var(--becker-border-util);
	max-width: 60ch;
}

/* --------------------------------------------------------------------------
 * 2. TRUST STRIP — greyscale client logo row, color on hover
 * ------------------------------------------------------------------------ */
.trust-strip {
	background: var(--becker-white);
	border-bottom: 1px solid var(--becker-border-soft);
}

.trust-strip__inner {
	max-width: var(--becker-maxw);
	margin-inline: auto;
	padding: clamp(24px, 5vw, 40px) var(--becker-pad-x);
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}

.trust-strip__label {
	font-size: var(--becker-fs-caption);
	color: var(--becker-text-muted);
}

.trust-strip__logos {
	width: 100%;
	overflow: hidden;
}

.trust-strip__track {
	display: flex;
}

/* Rendered twice by trust-strip.php (the 2nd copy aria-hidden) so the
   marquee below has a seamless loop; at rest (desktop) only the first
   copy is visible and it lays out exactly like the old single-copy row. */
.trust-strip__set {
	display: flex;
	flex: 0 0 100%;
	width: 100%;
	gap: 20px clamp(20px, 4vw, 40px);
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.trust-strip__set[aria-hidden="true"] {
	display: none;
}

.trust-strip__logo {
	width: auto;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.2s, opacity 0.2s;
}

.trust-strip__logo:hover,
.trust-strip__logo-stack:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Per-brand display heights from the design (widths set as HTML attrs) */
.trust-strip__logo--bmw,
.trust-strip__logo--vw { height: 44px; }
.trust-strip__logo--tesla { height: 16px; }
.trust-strip__logo--ford { height: 34px; }
.trust-strip__logo--tata { height: 40px; }
.trust-strip__logo--mahindra { height: 20px; }

.trust-strip__logo-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.2s, opacity 0.2s;
}

.trust-strip__logo--amazon {
	height: 20px;
	width: auto;
	display: block;
}

.trust-strip__logo-sub {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--becker-dark-muted);
}

/* Certification line under the logo row (ISO 9001/14001/45001 → /quality/) */
.trust-strip__certs {
	margin: 0;
	font-size: var(--becker-fs-caption);
	color: var(--becker-text-muted);
	text-align: center;
}

.trust-strip__certs a {
	font-weight: 600;
	color: var(--becker-teal);
	white-space: nowrap;
}

.trust-strip__certs a:hover {
	color: var(--becker-teal-hover);
}

/* Tablet/mobile: an autoplaying marquee instead of wrapping onto multiple
   lines. .trust-strip__logos (the clipping viewport, NOT the animated
   element) bleeds to the full viewport width then re-applies that same
   padding on its own start edge, so the marquee always starts with inset
   breathing room. That inset lives on the non-animated clipper deliberately
   — putting it on .trust-strip__track instead would unbalance the two
   halves' widths and break the exact -50% loop math below. */
@media (max-width: 899.98px) {
	.trust-strip__logos {
		width: auto;
		margin-inline: calc(var(--becker-pad-x) * -1);
		padding-inline-start: var(--becker-pad-x);
	}

	.trust-strip__track {
		width: max-content;
		animation: trust-strip-scroll 26s linear infinite;
	}

	.trust-strip__logos:hover .trust-strip__track,
	.trust-strip__logos:focus-within .trust-strip__track {
		animation-play-state: paused;
	}

	.trust-strip__set {
		flex: 0 0 auto;
		width: max-content;
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding-inline-end: clamp(20px, 4vw, 40px);
	}

	.trust-strip__set[aria-hidden="true"] {
		display: flex;
	}

	.trust-strip__logo,
	.trust-strip__logo-stack {
		flex: 0 0 auto;
	}
}

@keyframes trust-strip-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* Exactly one set's width — .trust-strip__track is always 2 identical
		   sets, so -50% of its own width lands precisely where the 2nd set
		   started, and the loop back to 0% is invisible. */
		transform: translateX(-50%);
	}
}

@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
	.trust-strip__track {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
 * 3. PRODUCT & SERVICES CATEGORY CARDS — /products/ (the eight official
 *    categories; anchor targets #cat-… for homepage pillars + mega-menu)
 * ------------------------------------------------------------------------ */
.cat-section {
	background: var(--becker-white);
}

.cat-section__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px;
}

.cat-card {
	background: var(--becker-white);
	border: 1px solid var(--becker-border-card);
	border-radius: var(--becker-radius-card);
	box-shadow: var(--becker-shadow-card);
	padding: clamp(24px, 4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-margin-top: 96px;
}

.cat-card__image {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: var(--becker-radius-btn);
	display: block;
	background: var(--becker-bg-light);
	margin-bottom: 4px;
}

.cat-card__title {
	margin: 0;
	font-size: var(--becker-fs-h3);
	font-weight: 600;
}

.cat-card__desc {
	margin: 0;
	font-size: var(--becker-fs-body-sm);
	line-height: 1.6;
	color: var(--becker-text-muted);
}

.cat-card__foot {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--becker-border-soft);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cat-card__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cat-card__link {
	font-size: var(--becker-fs-body-sm);
	font-weight: 600;
	color: var(--becker-teal);
}

.cat-card__link:hover {
	color: var(--becker-teal-hover);
}

.cat-card__plain {
	font-size: var(--becker-fs-body-sm);
	color: var(--becker-text-muted);
}

.cat-card__more {
	font-size: var(--becker-fs-body-sm);
	font-weight: 700;
	color: var(--becker-teal);
}

.cat-card__more:hover {
	color: var(--becker-teal-hover);
}

/* --------------------------------------------------------------------------
 * 3b. DCDI BAND — charcoal digital-service teaser (full story: /solutions/#dcdi)
 * ------------------------------------------------------------------------ */
.dcdi-band {
	background: var(--becker-charcoal);
}

.dcdi-band__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.dcdi-band__eyebrow {
	color: var(--becker-teal-light);
}

.dcdi-band__title {
	color: var(--becker-white);
	max-width: 26ch;
}

.dcdi-band__text {
	margin: 0 0 28px;
	font-size: var(--becker-fs-body);
	line-height: 1.65;
	color: var(--becker-dark-text);
	max-width: 56ch;
	text-wrap: pretty;
}

.dcdi-band__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dcdi-band__list-item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: var(--becker-fs-body-sm);
	line-height: 1.5;
	color: var(--becker-dark-text);
}

.dcdi-band__check {
	color: var(--becker-teal-light);
	font-weight: 700;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 * 4. PRODUCT & SERVICES PILLARS — 8 category cards
 * ------------------------------------------------------------------------ */
.pillars {
	background: var(--becker-white);
}

.pillars__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px;
}

/* --------------------------------------------------------------------------
 * 5. SHOP BY ROBOT BRAND — 6 cards with brand-color underline
 * ------------------------------------------------------------------------ */
.brands {
	background: var(--becker-bg-light);
}

.brands__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 16px;
}

/* Homepage/products variant: brand cards + dressed-robot render side by side */
.brands__visual {
	margin: 32px 0 0;
	background: var(--becker-white);
	border: 1px solid var(--becker-border-card);
	border-radius: var(--becker-radius-card);
	box-shadow: var(--becker-shadow-card);
	overflow: hidden;
}

.brands__visual-image {
	width: 100%;
	height: auto;
	display: block;
}

.brands__visual-caption {
	padding: 14px 20px 16px;
	font-size: var(--becker-fs-caption);
	line-height: 1.5;
	color: var(--becker-text-muted);
	border-top: 1px solid var(--becker-border-card);
}

@media (min-width: 900px) {
	.brands__layout--visual {
		display: grid;
		grid-template-columns: 1.15fr 0.85fr;
		gap: clamp(24px, 4vw, 48px);
		align-items: center;
	}

	.brands__layout--visual .brands__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.brands__visual {
		margin: 0;
	}
}

.brand-card {
	background: var(--becker-white);
	border: 1px solid var(--becker-border-card);
	border-radius: var(--becker-radius-card);
	box-shadow: var(--becker-shadow-card);
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--becker-text);
}

.brand-card:hover {
	border-color: var(--becker-teal);
	box-shadow: var(--becker-shadow-card-hover);
	color: var(--becker-text);
}

.brand-card__name {
	font-size: var(--becker-fs-h3);
	font-weight: 700;
	letter-spacing: 0.03em;
}

.brand-card__underline {
	width: 36px;
	height: 3px;
	border-radius: var(--becker-radius-pill);
	background: var(--becker-teal); /* overridden per brand */
}

/* Official brand accent colors (decorative underline only) */
.brand-card__underline--fanuc { background: #E6B800; }
.brand-card__underline--kuka { background: #FF5F00; }
.brand-card__underline--abb { background: #D6001C; }
.brand-card__underline--yaskawa { background: #005BAC; }
.brand-card__underline--kawasaki { background: #B81C22; }
.brand-card__underline--cobots { background: var(--becker-teal); }

.brand-card__link {
	font-size: var(--becker-fs-secondary);
	font-weight: 600;
	color: var(--becker-teal);
}

/* --------------------------------------------------------------------------
 * 6. WHY BECKER — charcoal band, image + 3 teal-ruled columns
 * ------------------------------------------------------------------------ */
.why-becker {
	background: var(--becker-charcoal);
}

.why-becker__eyebrow {
	color: var(--becker-teal-light);
}

.why-becker__title {
	color: var(--becker-white);
	margin-bottom: 56px;
	max-width: 26ch;
}

.why-becker__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.why-becker__image {
	width: 100%;
	height: 100%;
	min-height: 340px;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--becker-radius-card);
	display: block;
	background: var(--becker-dark-panel);
}

.why-becker__points {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.why-becker__point {
	border-top: 2px solid var(--becker-teal);
	padding-top: 24px;
}

.why-becker__point-title {
	margin: 0 0 12px;
	font-size: var(--becker-fs-h3);
	font-weight: 600;
	color: var(--becker-white);
}

.why-becker__point-text {
	margin: 0;
	font-size: var(--becker-fs-body-sm);
	line-height: 1.65;
	color: var(--becker-dark-text);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
 * 7. LHMS FLAGSHIP — annotated feature image + copy
 * ------------------------------------------------------------------------ */
.lhms {
	background: var(--becker-white);
}

.lhms__inner {
	max-width: var(--becker-maxw);
	margin-inline: auto;
	padding: clamp(56px, 8vw, 96px) var(--becker-pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.lhms__image {
	width: 100%;
	height: auto;
	border-radius: var(--becker-radius-card);
	display: block;
	background: var(--becker-charcoal);
}

.lhms__copy-text {
	margin: 0 0 32px;
	font-size: var(--becker-fs-body);
	line-height: 1.65;
	color: var(--becker-text-muted);
	max-width: 56ch;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
 * 8. WEB SHOP TEASER — header row, warehouse banner, 3 product cards
 * ------------------------------------------------------------------------ */
.shop-teaser {
	background: var(--becker-bg-light);
}

.shop-teaser__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.shop-teaser__header .page-section__title {
	margin-bottom: 12px;
}

.shop-teaser__header .page-section__intro {
	margin-bottom: 0;
	max-width: 56ch;
}

.shop-teaser__browse {
	background: var(--becker-white);
	border: 1px solid var(--becker-border-input);
	color: var(--becker-text);
	font-size: var(--becker-fs-body-sm);
	font-weight: 700;
	padding: 12px 24px;
	border-radius: var(--becker-radius-btn);
	white-space: nowrap;
}

.shop-teaser__browse:hover {
	border-color: var(--becker-charcoal);
	color: var(--becker-text);
}

.shop-teaser__banner {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: var(--becker-radius-card);
	display: block;
	margin-bottom: 32px;
	background: var(--becker-white);
}

.shop-teaser__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 24px;
}

.product-card {
	background: var(--becker-white);
	border: 1px solid var(--becker-border-card);
	border-radius: var(--becker-radius-card);
	box-shadow: var(--becker-shadow-card);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.product-card__image {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: var(--becker-radius-btn);
	display: block;
	background: var(--becker-bg-light);
}

.product-card__image--focus-right {
	object-position: right center;
}

.product-card__category {
	font-size: var(--becker-fs-legal);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--becker-text-muted);
	text-transform: uppercase;
}

.product-card__title {
	margin: 0;
	font-size: var(--becker-fs-body);
	font-weight: 600;
	line-height: 1.4;
}

.product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
}

.product-card__price {
	font-size: var(--becker-fs-body);
	font-weight: 700;
}

.product-card__price-note {
	font-size: var(--becker-fs-legal);
	font-weight: 400;
	color: var(--becker-text-muted);
}

.product-card__add {
	font-family: var(--becker-font);
	background: var(--becker-grad-primary);
	color: var(--becker-white);
	font-size: var(--becker-fs-secondary);
	font-weight: 700;
	padding: 10px 18px;
	border: none;
	border-radius: var(--becker-radius-btn);
	cursor: pointer;
	box-shadow: var(--becker-shadow-btn-red);
}

.product-card__add:hover {
	background: var(--becker-red-hover);
}

.product-card__add:active {
	background: var(--becker-red-active);
}

/* --------------------------------------------------------------------------
 * 9. APPLICATIONS — 2 image cards + 3 compact text cards
 * ------------------------------------------------------------------------ */
.applications {
	background: var(--becker-white);
}

.applications .page-section__title {
	margin-bottom: 48px;
}

.applications__rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.applications__featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 16px;
}

.app-card {
	border: 1px solid var(--becker-border-card);
	border-radius: var(--becker-radius-card);
	box-shadow: var(--becker-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: var(--becker-text);
}

.app-card:hover {
	border-color: var(--becker-teal);
	box-shadow: var(--becker-shadow-card-hover);
	color: var(--becker-text);
}

.app-card__image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	background: var(--becker-bg-light);
}

.app-card__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px;
	font-size: var(--becker-fs-body);
	font-weight: 600;
}

.app-card__arrow {
	color: var(--becker-teal);
}

.applications__compact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.app-card--compact {
	border-radius: var(--becker-radius-btn);
	padding: 24px;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: var(--becker-fs-body);
	font-weight: 600;
	overflow: visible;
}

.app-card--compact:hover {
	background: var(--becker-bg-light);
}

/* --------------------------------------------------------------------------
 * 10. PROOF & CREDIBILITY — quote card w/ client logos + factory image
 * ------------------------------------------------------------------------ */
.proof {
	background: var(--becker-bg-light);
}

.proof__inner {
	max-width: var(--becker-maxw);
	margin-inline: auto;
	padding: clamp(56px, 8vw, 96px) var(--becker-pad-x);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

.proof__card {
	background: var(--becker-white);
	border: 1px solid var(--becker-border-card);
	border-radius: var(--becker-radius-card);
	box-shadow: var(--becker-shadow-card);
	padding: clamp(24px, 5vw, 40px);
}

.proof__label {
	margin: 0 0 16px;
	font-size: var(--becker-fs-caption);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--becker-teal);
	text-transform: uppercase;
}

.proof__statement {
	margin: 0 0 24px;
	font-size: var(--becker-fs-h3);
	line-height: 1.5;
	font-weight: 500;
	color: var(--becker-text);
	text-wrap: pretty;
}

.proof__logos {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 24px;
}

.proof__logo {
	width: auto;
	filter: grayscale(1);
	opacity: 0.55;
}

.proof__logo--bmw,
.proof__logo--vw { height: 32px; }
.proof__logo--tesla { height: 12px; }
.proof__logo--ford { height: 26px; }
.proof__logo--tata { height: 30px; }

.proof__link {
	display: inline-block;
	font-size: var(--becker-fs-body-sm);
	font-weight: 600;
	color: var(--becker-teal);
}

.proof__link:hover {
	color: var(--becker-teal-hover);
}

.proof__image {
	width: 100%;
	height: 100%;
	min-height: 260px;
	max-height: 360px;
	object-fit: cover;
	border-radius: var(--becker-radius-card);
	display: block;
	background: #E8E7EA;
}

/* --------------------------------------------------------------------------
 * 11. RESOURCES — 3 free download cards
 * ------------------------------------------------------------------------ */
.resources {
	background: var(--becker-white);
}

.resources .page-section__title {
	max-width: 32ch;
}

.resources__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 24px;
}

.resource-card {
	border: 1px solid var(--becker-border-card);
	border-radius: var(--becker-radius-card);
	box-shadow: var(--becker-shadow-card);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.resource-card__type {
	font-size: var(--becker-fs-legal);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--becker-teal);
	background: var(--becker-teal-tint);
	border-radius: var(--becker-radius-pill);
	padding: 4px 12px;
	align-self: flex-start;
	text-transform: uppercase;
}

.resource-card__title {
	margin: 0;
	font-size: var(--becker-fs-lead);
	font-weight: 600;
	line-height: 1.4;
}

.resource-card__desc {
	margin: 0;
	font-size: var(--becker-fs-body-sm);
	line-height: 1.55;
	color: var(--becker-text-muted);
}

.resource-card__button {
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--becker-font);
	border: 1px solid var(--becker-border-input);
	background: var(--becker-white);
	color: var(--becker-text);
	font-size: var(--becker-fs-secondary);
	font-weight: 700;
	padding: 10px 20px;
	border-radius: var(--becker-radius-btn);
	cursor: pointer;
	text-decoration: none;
}

.resource-card__button:hover {
	border-color: var(--becker-charcoal);
	color: var(--becker-text);
}

.resource-card__note {
	font-size: var(--becker-fs-legal);
	color: var(--becker-text-muted);
}

/* 12. CLOSING CTA — shared component, see becker-main.css §10 */