/**
 * LOA Our Specialties — UI-05 (desktop card grid) + UI-06 (mobile
 * card stack, media block at end). Breakpoint matches the rest of
 * the theme's interim 1024px (Tyler to confirm). Consumes
 * tokens.css exclusively.
 *
 * Copy + image assets: CON-04 was never filled in with real content,
 * so copy and both card images were pulled directly from the Figma
 * file (node 95:49 desktop / 111:80 mobile) per Byrne 2026-07-26.
 *
 * DEVIATION - card image crop: the doc's tech note #9 gives a single
 * generic crop formula (133.47% height, -16.73% top offset) but the
 * two card instances in the actual Figma file use two DIFFERENT sets
 * of pixel insets tuned to their own placeholder images' aspect
 * ratios. Our two final assets (Top_Performer_Retreats.jpg,
 * Tailored_Programs.jpg; PNG originals converted 2026-09-25) are both 1536x1024 - not the same images the
 * insets were tuned for - so reproducing either instance's exact
 * numbers would crop unpredictably. Using plain object-fit: cover
 * (same full-bleed technique as .loa-hero__bg) achieves the doc's
 * stated intent - full-bleed, no distortion - deterministically for
 * any source image. Flag for design review if a tighter/looser crop
 * is wanted once these are visible on staging.
 */

.loa-specialties {
	padding-block: var(--loa-specialties-pad-y);
	padding-inline: var(--loa-specialties-pad-x);
	box-sizing: border-box;
}

.loa-specialties__inner {
	max-width: var(--loa-max-width);
	margin-inline: auto;
	padding-inline: var(--loa-specialties-inner-pad-x);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--loa-specialties-header-gap);
}

/* Header block: left-aligned eyebrow/H2, right-aligned descriptor,
 * bottom-aligned per spec ("items-end"). */
.loa-specialties__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.loa-specialties__heading-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 672px;
}

.loa-specialties__eyebrow {
	margin: 0;
	font-family: var(--loa-font-body);
	font-size: var(--loa-specialties-eyebrow-size);
	font-weight: 700;
	letter-spacing: var(--loa-specialties-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--loa-gold);
}

/* Divider only exists in the mobile Figma frame (111:80, below the
 * eyebrow); hidden on desktop where the eyebrow sits directly above
 * the H2 with no rule between them. */
.loa-specialties__divider {
	display: none;
}

.loa-specialties__h2 {
	margin: 0;
	font-family: var(--loa-font-display);
	font-size: var(--loa-specialties-h2-size);
	line-height: 1;
	font-weight: 500;
	color: #fff;
}

.loa-specialties__h2-line {
	display: block;
}

.loa-specialties__h2-line--italic {
	font-style: italic;
}

.loa-specialties__descriptor {
	margin: 0;
	max-width: var(--loa-specialties-descriptor-max);
	font-family: var(--loa-font-body);
	font-size: 18px;
	font-weight: 300;
	line-height: 28px;
	color: var(--loa-specialties-descriptor-color);
	text-align: right;
}

.loa-specialties__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--loa-specialties-card-gap);
}

.loa-specialties__card {
	position: relative;
	height: var(--loa-specialties-card-h);
	background: var(--loa-specialties-card-bg);
	border: 1px solid var(--loa-specialties-card-border);
	overflow: hidden;
}

.loa-specialties__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loa-specialties__card-grad {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		var(--loa-specialties-grad-top) 0%,
		var(--loa-specialties-grad-mid) 50%,
		var(--loa-specialties-grad-bottom) 100%
	);
}

.loa-specialties__card-content {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--loa-specialties-card-pad);
	display: flex;
	flex-direction: column;
	gap: var(--loa-specialties-card-content-gap);
	box-sizing: border-box;
}

.loa-specialties__category {
	margin: 0;
	font-family: var(--loa-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: var(--loa-specialties-category-tracking);
	text-transform: uppercase;
	color: var(--loa-specialties-category-color);
}

.loa-specialties__card-h3 {
	margin: 0;
	font-family: var(--loa-font-display);
	font-size: var(--loa-specialties-h3-size);
	line-height: 36px;
	font-weight: 500;
	color: #fff;
}

.loa-specialties__card-body {
	margin: 0;
	max-width: var(--loa-specialties-body-max);
	font-family: var(--loa-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	color: var(--loa-specialties-body-color);
}

.loa-specialties__cta {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin-top: 4px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--loa-specialties-cta-underline);
	font-family: var(--loa-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--loa-specialties-cta-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: color var(--loa-speed) var(--loa-ease),
	            border-color var(--loa-speed) var(--loa-ease);
}

/* Hover/active: TBD per doc (Lynette). Interim gold treatment,
 * consistent with the hero/header buttons. */
.loa-specialties__cta:hover,
.loa-specialties__cta:focus-visible {
	color: var(--loa-gold);
	border-color: var(--loa-gold);
}

.loa-specialties__cta:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 4px;
}

/* ==================================================================
 * UI-06 - Mobile specialties card stack. Figma (111:80) confirms no
 * category label and no CTA link inside mobile cards - just H3 +
 * body, matching the doc's tech note #15 ("TBD - not present in
 * mobile Figma frame"). Markup renders those elements once (desktop)
 * and hides/omits them via mobile-only elements below.
 * ================================================================== */
@media (max-width: 1024px) {
	.loa-specialties {
		padding-block: 0;
		padding-inline: 0;
		padding-top: var(--loa-specialties-m-pad-top);
	}

	.loa-specialties__inner {
		max-width: none;
		padding-inline: var(--loa-specialties-m-pad-x);
		gap: 24px;
	}

	.loa-specialties__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--loa-specialties-m-divider-gap);
	}

	.loa-specialties__heading-group {
		display: contents; /* only the eyebrow renders on mobile (see below) */
	}

	/* H2 + descriptor omitted on mobile - not in the Figma frame
	 * (111:80 shows eyebrow + divider only above the card stack). */
	.loa-specialties__h2,
	.loa-specialties__descriptor {
		display: none;
	}

	.loa-specialties__divider {
		display: block;
		width: var(--loa-specialties-m-divider-w);
		height: 1px;
		background: var(--loa-specialties-m-divider-color);
	}

	.loa-specialties__grid {
		grid-template-columns: 1fr;
		gap: var(--loa-specialties-m-card-gap);
	}

	.loa-specialties__card {
		height: var(--loa-specialties-m-card-h);
	}

	.loa-specialties__card-grad {
		background: linear-gradient(
			to top,
			var(--loa-specialties-m-grad-top) 0%,
			var(--loa-specialties-m-grad-bottom) 50%
		);
	}

	.loa-specialties__card-content {
		padding: var(--loa-specialties-m-card-pad);
		gap: var(--loa-specialties-m-card-content-gap);
	}

	.loa-specialties__card-body {
		max-width: none;
	}

	/* Category label + CTA not present in the mobile Figma frame. */
	.loa-specialties__category,
	.loa-specialties__cta {
		display: none;
	}
}

/* The specialties card CTA can be flagged 'modal' => true in
   inc/content.php, in which case index.php emits a <button> carrying the
   same class instead of an <a> (2026-09-08).

   Reset ONLY the default button chrome. Deliberately does NOT set
   `border: 0`: this element's whole visual identity is its gold
   `border-bottom` underline, and `button.loa-specialties__cta` outranks
   `.loa-specialties__cta`, so a blanket border reset here would erase it. */
button.loa-specialties__cta {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	padding: 0;
	cursor: pointer;
	/* The class above declares ONLY border-bottom (the gold underline),
	   so a <button> keeps the UA default 2px outset border on the other
	   three sides -- confirmed in review 2026-09-09, it rendered a visible
	   box around the CTA. Zero those three explicitly and leave
	   border-bottom untouched, so the underline and its :hover gold
	   border-color both still come from the class rules. */
	border-top: 0;
	border-right: 0;
	border-left: 0;
}