/**
 * Specialty slider.
 *
 * Layout ported from Maranatha's post-carousel. The design ran the track
 * full-bleed — first card on the content column, the rest running off the right
 * edge of the viewport. Client QA (2026-09-09) read that as the cards being
 * "skewed to the right" and asked for the old contained carousel back, so the
 * track now sits inside the content column on both sides (`.hp-slider__outer`
 * takes the offset as margin, the Swiper container clips) and the head, track
 * and arrows share one left edge.
 */

.hp-slider {
	--hp-slider-content: var(--wp--style--global--content-size, 1392px);
	--hp-slider-gap: clamp(16px, 2vw, 28px);
	--hp-slider-gutter: var(--wp--style--root--padding-left, 20px);
	--hp-slider-arrow: clamp(40px, 3.4vw, 56px);
	--hp-slider-nav-gap: clamp(8px, 1.4vw, 24px);
	/* Three cards across the content column at the design width. */
	--hp-slider-card: calc(
		(var(--hp-slider-content) - (2 * var(--hp-slider-gap))) / 3
	);
	/*
	 * Distance from the viewport edge to the content column. The heading, the
	 * arrows and the first card all start here, so it is declared once: an earlier
	 * version padded the head by the root gutter *inside* a centred 1392px box,
	 * which put the heading 168px right of the first card.
	 *
	 * script.js reads this back off the head's computed padding rather than
	 * recomputing it, so the track can never drift from the heading.
	 */
	--hp-slider-offset: max(
		calc((100vw - var(--hp-slider-content)) / 2),
		var(--hp-slider-gutter)
	);

	padding-block: var(--wp--preset--spacing--60);
	background-color: #fff;
}

/* Cream band variant (specialty hub "Other Specialties", Figma 6179:7788). */

.hp-slider.hp-slider--cream {
	background-color: var(--brand-cream);
}

/* Head and filters start at the content column, same as the first card. */

.hp-slider__head {
	padding-inline: var(--hp-slider-offset);
	margin-bottom: clamp(24px, 3vw, 40px);
}

body.barkley-redesign .hp-slider .hp-slider__title {
	margin: 0 0 24px;
	color: var(--brand-green);
}

.hp-slider__controls {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap: 16px;
}

.hp-slider__filters {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 12px;
}

.hp-slider__filters-label {
	color: var(--brand-ink);
	font-size: 20px;
}

/*
 * Sized by its own padding rather than a min-height. The 40px min-height the
 * design measures at made the pills read as chunky next to the label, because the
 * label is only 20px — the extra height all landed above and below the text.
 */

.hp-slider__filter {
	padding: 7px 18px;
	border: 1px solid var(--brand-green);
	border-radius: var(--brand-radius-pill, 999px);
	background-color: transparent;
	color: var(--brand-green);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	-webkit-transition: background-color 150ms ease, color 150ms ease;
	transition: background-color 150ms ease, color 150ms ease;
}

.hp-slider__filter:hover,
.hp-slider__filter:focus-visible {
	background-color: var(--brand-cream-deep);
}

/*
 * The design's selected pill is a soft cream fill with dark text, not a solid
 * green one — the unselected pill is the outlined variant.
 */

.hp-slider__filter.is-active {
	border-color: transparent;
	background-color: var(--brand-cream-deep);
	color: var(--brand-green-deep);
}

/* Beats the foundation's (0,4,3) content-link rule — see the account grid note. */

body.barkley-redesign section.hp-slider .hp-slider__controls a.hp-slider__view-all:not(.barkley-btn) {
	/* Right-aligned even when there are no filters to push it there. */
	margin-left: auto;
	color: var(--brand-green);
	font-family: var(--brand-font-heading);
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- Track ---------- */

/*
 * The track and arrows live in the content column, same as the head. Arrows
 * either side of the track (QA 10-09), the Free Webinars carousel's layout.
 */

.hp-slider__outer {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: var(--hp-slider-nav-gap);
	margin-inline: var(--hp-slider-offset);
}

/*
 * Clips at the column edge; the section itself does not scroll, Swiper
 * translates the track. Two classes: the Swiper bundle loads later and its
 * auto inline margins would shrink the grid cell to a sliver.
 */

.hp-slider__outer .hp-slider__swiper {
	width: 100%;
	margin-inline: 0;
	overflow: hidden;
}

/*
 * align-items: stretch so every slide is as tall as the tallest one. Swiper puts
 * `height: 100%` on its slides and this block overrides that with `height: auto`
 * (the track's height is content-driven, so 100% has nothing to resolve against),
 * which left each slide sized to its own content — a card whose full title wraps
 * to two lines ended up 24px taller than its neighbours.
 */

.hp-slider__track {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
}

/*
 * Fixed slide width rather than a Swiper `slidesPerView` number, so the cards
 * keep the design's proportions and simply reveal more of the next card on wider
 * screens. `slidesPerView: 'auto'` in the JS defers to this.
 */

/*
 * Two-class selector on purpose. Swiper's own `.swiper-slide` rules set
 * `display: block` and `height: 100%` at the same (0,1,0) weight as a bare
 * `.hp-slider__slide`, and its stylesheet loads after this block's inlined styles
 * — so a single class lost the tie and the slides stayed block-level and
 * content-sized, leaving cards of unequal height. (0,2,0) settles it.
 */

/*
 * The gap between cards is a margin on the slide, not `gap` on the track, and
 * Swiper's `spaceBetween` is left unset. That is deliberate: Swiper measures a
 * slide as width + margins and knows nothing about flex `gap`, so declaring the
 * spacing as a track gap made its `virtualSize` short by one gap per card and the
 * last card (ENP) was cut off by ~196px at the end of the track. A stylesheet
 * margin is counted — Swiper only clears *inline* slide margins before measuring —
 * so this keeps one responsive source of truth for the spacing and correct maths.
 */

.hp-slider .hp-slider__slide {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-item-align: stretch;
	    align-self: stretch;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 var(--hp-slider-card);
	        flex: 0 0 var(--hp-slider-card);
	width: var(--hp-slider-card);
	max-width: 324px;
	height: auto;
	-webkit-margin-end: var(--hp-slider-gap);
	        margin-inline-end: var(--hp-slider-gap);
}

/* One card at a time: arrows move out into the page margin so the card gets the width. */

@media (max-width: 782px) {
	.hp-slider {
		--hp-slider-arrow: 36px;
		--hp-slider-nav-gap: 6px;
	}

	.hp-slider__outer {
		margin-inline: 6px;
	}

	/* Label, pills and "View More" stack left-aligned (QA 10-29). */
	.hp-slider__controls,
	.hp-slider__filters {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
	}

	body.barkley-redesign section.hp-slider .hp-slider__controls a.hp-slider__view-all:not(.barkley-btn) {
		margin-left: 0;
	}

	.hp-slider .hp-slider__slide {
		/* Fills the track between the arrows; they are the scroll affordance now. */
		-ms-flex-preferred-size: 100%;
		    flex-basis: 100%;
		width: 100%;
	}
}

.hp-slider__card {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	/* Fills the stretched slide, so all cards end up the same height. */
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	height: 100%;
	border-radius: var(--brand-radius, 16px);
	background-color: var(--brand-cream-deep);
	color: var(--brand-ink);
	text-decoration: none;
	overflow: hidden;
}

/*
 * Hover state, per the card component in Figma (Cards/Specialty).
 *
 * Three things change together: the body fades to the specialty colour, its text
 * fades to white, and the Icon Button appears. That icon is `hidden="true"` in the
 * resting component — it is a hover affordance, not a permanent badge, which is
 * why it is opacity-0 here rather than simply styled.
 *
 * Only `a.` — a card with no destination renders as a div and must not pretend to
 * be interactive.
 *
 * Transitions live on the resting state so they play on the way out too, and both
 * are colour/opacity only, so nothing reflows on hover.
 */

.hp-slider__card {
	-webkit-transition: background-color 200ms ease;
	transition: background-color 200ms ease;
}

.hp-slider__body,
.hp-slider__abbr,
.hp-slider__name {
	-webkit-transition: color 200ms ease;
	transition: color 200ms ease;
}

a.hp-slider__card:hover,
a.hp-slider__card:focus-visible {
	text-decoration: none;
}

.hp-slider__media {
	position: relative;
	display: block;
}

/*
 * Fixed image height, so every card's image band is identical and the cards line
 * up. Without it the images fall back to their intrinsic heights and each card
 * ends up a different size.
 */

/* No hover zoom — the hover affordance is the body colour fade and the icon. */

body.barkley-redesign .hp-slider .hp-slider__image {
	display: block;
	width: 100%;
	height: clamp(200px, 17vw, 294px);
	margin: 0;
	border-radius: 0;
	-o-object-fit: cover;
	   object-fit: cover;
}

/* Colour fallback when a card has no image, using the specialty palette. */

.hp-slider__swatch {
	display: block;
	height: clamp(200px, 17vw, 294px);
}

/*
 * The pill overlaps the bottom of the image, as in the design. Positioned against
 * .hp-slider__media, which is why that is position:relative.
 */

.hp-slider__pill {
	position: absolute;
	bottom: 12px;
	left: 16px;
	padding: 5px 14px;
	border-radius: var(--brand-radius-pill, 999px);
	background-color: var(--brand-gold);
	color: var(--brand-green-deep);
	font-size: 13px;
	font-weight: 600;
}

/*
 * Optional "Coming Soon" banner: a full-width strip across the top of the
 * image, clipped to the card's rounded corners by the card's overflow. Gold
 * with black text by default; the per-card colour field sets `color` inline.
 */

.hp-slider__coming-soon {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	min-height: 52px;
	padding: 10px 24px;
	font-family: var(--brand-font-heading);
	background-color: var(--brand-gold);
	color: #000;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	pointer-events: none;
}

/* Hover link icon drops below the banner instead of covering it. */

.hp-slider__coming-soon ~ .hp-slider__link-icon {
	top: 68px;
}

/* The body is the "bottom section" — the colour lands there, not on the image. */

a.hp-slider__card:hover .hp-slider__body,
a.hp-slider__card:focus-visible .hp-slider__body {
	background-color: var(--hp-slider-card-color, var(--brand-green));
}

a.hp-slider__card:hover .hp-slider__abbr,
a.hp-slider__card:hover .hp-slider__name,
a.hp-slider__card:focus-visible .hp-slider__abbr,
a.hp-slider__card:focus-visible .hp-slider__name {
	color: #fff;
}

/* Keyboard users get a visible focus ring on top of the hover treatment. */

a.hp-slider__card:focus-visible {
	outline: 2px solid var(--brand-green-deep);
	outline-offset: 3px;
}

/*
 * Icon Button: 66px at a 16px inset, matching the component. Hidden at rest and
 * revealed on hover. pointer-events:none so it can never swallow a click meant
 * for the card.
 */

.hp-slider__link-icon {
	position: absolute;
	top: 16px;
	right: 16px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background-color: var(--brand-cream);
	color: var(--brand-green);
	font-size: 20px;
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 200ms ease;
	transition: opacity 200ms ease;
}

a.hp-slider__card:hover .hp-slider__link-icon,
a.hp-slider__card:focus-visible .hp-slider__link-icon {
	opacity: 1;
}

/* No hover animation for anyone who has asked the OS to reduce motion. */

@media (prefers-reduced-motion: reduce) {
	.hp-slider__card,
	.hp-slider__body,
	.hp-slider__abbr,
	.hp-slider__name,
	.hp-slider__link-icon,
	.hp-slider__image {
		-webkit-transition: none;
		transition: none;
	}
}

/*
 * flex: 1 so the body fills whatever height is left after the image. Without it
 * the body is only as tall as its text, and because the cards are stretched to a
 * common height the hover colour stopped short of the bottom, leaving a strip of
 * the card's own background below it.
 */

.hp-slider__body {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 6px;
	padding: 20px 24px 28px;
}

/* Headings/Small in the design: 32px on a 36px line. */

.hp-slider__abbr {
	color: var(--brand-green);
	font-family: var(--brand-font-heading);
	font-size: clamp(24px, 2vw, 32px);
	font-weight: 500;
	line-height: 1.125;
}

/* Body/Paragraph 2 in the design: 16px on a 24px line. */

.hp-slider__name {
	font-size: 16px;
	line-height: 1.5;
}

/* ---------- Arrows ---------- */

.hp-slider__arrow {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: var(--hp-slider-arrow);
	height: var(--hp-slider-arrow);
	border: 0;
	border-radius: var(--brand-radius, 16px);
	background-color: var(--brand-cream-deep);
	color: var(--brand-green);
	font-size: 18px;
	cursor: pointer;
	-webkit-transition: background-color 150ms ease, opacity 150ms ease;
	transition: background-color 150ms ease, opacity 150ms ease;
}

.hp-slider__arrow:hover:not(.swiper-button-disabled) {
	background-color: var(--brand-gold);
}

/* Swiper's own disabled class, so the arrows reflect the real scroll state. */

.hp-slider__arrow.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

/* ---------- Editor placeholder ---------- */

.hp-slider.is-preview {
	padding-block: 0;
}

.hp-slider__placeholder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 6px;
	padding: 24px;
	border: 1px dashed var(--brand-green, #33462e);
	border-radius: var(--brand-radius, 16px);
	background-color: var(--brand-cream, #f6f8f2);
	text-align: center;
}

.hp-slider__placeholder-meta {
	margin: 0;
	font-size: 15px;
}