/**
 * 'Archivo' (Figma's display/heading font) is not enqueued anywhere
 * else in the theme, so it is loaded as a dependency of this
 * stylesheet (see functions.php); body copy reuses the same
 * 'Source Sans 3' stack already declared by the theme's --font-family.
 */
:root {
	--wrdc-heading-font: 'Archivo', var(--font-family, 'Source Sans 3'), Arial, Helvetica, sans-serif;
	--wrdc-body-font: var(--font-family, 'Source Sans 3'), Arial, Helvetica, sans-serif;
	--wrdc-card-bg: #ffffff;
	--wrdc-border: rgba(0, 0, 0, 0.1);
	--wrdc-text-primary: #171717;
	--wrdc-text-secondary: #525252;
	--wrdc-text-muted: #6b7280;
	--wrdc-badge-text: #9c6006;
	--wrdc-price: #0f4c81;
	--wrdc-radius: 16px;
}

/**
 * .wrdc-section's background-color and padding are set by Elementor
 * itself (the "Hintergrund & Abstand" style controls, bg_color and
 * section_padding), which always render an effective value — default
 * or edited — via {{WRAPPER}} .wrdc-section selectors.
 */

/**
 * Opt-in (full_width_bg control): break the section out of its parent's
 * boxed container so the background spans the full viewport width,
 * while .wrdc-wrap's own max-width keeps the actual content aligned
 * where it would normally sit. Relies on the theme's existing global
 * `body { overflow-x: hidden }` to avoid a horizontal scrollbar.
 */
.wrdc-section--full-bleed {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/**
 * --wrdc-container-width is set inline by the widget from Elementor's
 * own active Kit "Content Width" setting (get_container_width() in
 * class-scg-destination-cards.php), so the cards line up with every
 * other Elementor section on the page instead of a hardcoded guess.
 */
.wrdc-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	width: 100%;
	max-width: var(--wrdc-container-width, 1140px);
	margin: 0 auto;
	box-sizing: border-box;
	/* Matches the theme's own .uk-container gutter (uikit.min.css),
	   so full_width_bg cards keep the same inset as the rest of the
	   page below the container's max-width, not flush to the screen
	   edge. */
	padding-left: 15px;
	padding-right: 15px;
}

@media (min-width: 640px) {
	.wrdc-wrap {
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (min-width: 960px) {
	.wrdc-wrap {
		padding-left: 40px;
		padding-right: 40px;
	}
}

.wrdc-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 720px;
	text-align: center;
}

/**
 * Figma's carousel "Container" (node 70:14147) uses a 40px gap
 * (spacing-5xl) between the header row and the cards below it, not
 * the shared 48px default above — scoped to `.wrdc-section--carousel`
 * rather than changed on `.wrdc-wrap` itself so the grid layout's own
 * spacing is untouched.
 */
.wrdc-section--carousel .wrdc-wrap {
	gap: 40px;
}

/**
 * Carousel layout's header (Figma node 70:14147 "Top section") is
 * inline — text on the left, prev/next arrows on the right — unlike
 * the grid layout's centered header (node 70:13530).
 */
.wrdc-header--carousel {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	max-width: none;
	width: 100%;
	text-align: left;
}

.wrdc-header--carousel .wrdc-header__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wrdc-kicker {
	display: block;
	font: 600 18px/24px var(--wrdc-body-font);
	color: var(--wrdc-text-muted);
}

/**
 * Carousel layout's kicker (Figma node 70:14150) is a pill-shaped badge
 * with an icon, unlike the grid layout's plain `.wrdc-kicker` text.
 *
 * `align-self: flex-start` — its parent (.wrdc-header__text, a flex
 * column) doesn't set `align-items`, so it defaults to `stretch`;
 * without this, the badge stretches to the column's full width (a wide
 * horizontal bar) instead of hugging its own content like Figma's
 * pill. Set here (not `align-items: flex-start` on the parent) so the
 * heading/description siblings keep stretching full-width for their
 * own text wrapping — only the badge opts out.
 */
.wrdc-badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 4px;
	height: 26px;
	background: #ebf5f5;
	border: 1px solid #99c5f1;
	border-radius: 16px;
	padding: 2px 8px 2px 6px;
}

.wrdc-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 14px;
	color: var(--wrdc-price);
}

/* Elementor renders this as inline <svg>, which fills the 20px badge
   box by default instead of sitting as a smaller 14px glyph inside it. */
.wrdc-badge__icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.wrdc-badge__text {
	font: 500 14px/20px var(--wrdc-body-font);
	color: var(--wrdc-price);
	white-space: nowrap;
}

.wrdc-title {
	margin: 0;
	font: 700 36px/44px var(--wrdc-heading-font);
	letter-spacing: -0.02em;
	color: var(--wrdc-text-primary);
}

.wrdc-desc {
	margin: 0;
	font: 400 18px/28px var(--wrdc-body-font);
	color: var(--wrdc-text-secondary);
}

.wrdc-cards {
	display: grid;
	align-items: center;
	gap: 32px;
	width: 100%;
	grid-template-columns: repeat(4, 1fr);
}

.wrdc-cards--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.wrdc-cards--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.wrdc-cards--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.wrdc-card {
	display: flex;
	flex-direction: column;
	background: var(--wrdc-card-bg);
	border: 1px solid var(--wrdc-border);
	border-radius: var(--wrdc-radius);
	overflow: hidden;
}

.wrdc-card__media {
	display: block;
	aspect-ratio: 384 / 256;
	border-bottom: 0.5px solid var(--wrdc-border);
	background: #e5e7eb;
}

.wrdc-card__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 384 / 256;
	object-fit: cover;
	object-position: center;
	display: block;
}

.wrdc-card__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 252px;
	padding: 20px 24px 24px;
}

.wrdc-card__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wrdc-card__heading {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.wrdc-card__badge {
	display: inline-block;
	align-self: flex-start;
	font: 500 14px/20px var(--wrdc-body-font);
	text-transform: uppercase;
	color: var(--wrdc-badge-text);
}

.wrdc-card__title {
	margin: 0;
	font: 700 24px/32px var(--wrdc-heading-font);
	letter-spacing: -0.02em;
	color: var(--wrdc-text-primary);
}

.wrdc-card__title a {
	color: inherit;
	text-decoration: none;
}

.wrdc-card__title a:hover {
	text-decoration: underline;
}

.wrdc-card__desc {
	margin: 0;
	font: 400 16px/24px var(--wrdc-body-font);
	color: var(--wrdc-text-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wrdc-card__price {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	white-space: nowrap;
}

.wrdc-card__price-value {
	font: 700 24px/32px var(--wrdc-heading-font);
	letter-spacing: -0.02em;
	color: var(--wrdc-price);
}

.wrdc-card__price-meta {
	font: 400 18px/28px var(--wrdc-body-font);
	color: var(--wrdc-price);
}

.wrdc-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	min-width: 360px;
	padding: 12px 24px;
	background: #ffffff;
	border: 1px solid #d4d4d4;
	border-radius: 8px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	font: 600 18px/24px var(--wrdc-body-font);
	color: var(--wrdc-text-secondary);
	text-decoration: none;
	cursor: pointer;
}

.wrdc-cta:hover {
	color: var(--wrdc-text-primary);
	border-color: #a3a3a3;
}

@media (max-width: 1024px) {
	.wrdc-cards--cols-4,
	.wrdc-cards--cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.wrdc-cards--cols-4,
	.wrdc-cards--cols-3,
	.wrdc-cards--cols-2 {
		grid-template-columns: 1fr;
	}
}

/**
 * Carousel layout (Figma node 70:14147): horizontally scrollable
 * image-overlay cards with scroll-snap, prev/next arrow buttons and
 * scroll-tracking pagination dots (both driven by
 * destination-cards-carousel.js).
 */
.wrdc-carousel__nav {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

/**
 * Scoped as `.wrdc-section .wrdc-carousel__nav-btn` (not just the bare
 * class), same reasoning as header-slider.css's `.wrhs-hero
 * .wrhs-hero__nav`: these plain <button> elements need to out-specify
 * the site's global Elementor Kit button reset (`.elementor-kit-<id>
 * button`, specificity 0,1,1), which otherwise overrides their
 * size/padding/background with the kit's default button styling —
 * without this they render as full-size solid kit-blue rectangles
 * instead of small circular icon buttons.
 */
.wrdc-section .wrdc-carousel__nav-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 9999px;
	background: #ebf5f5;
	color: var(--wrdc-price);
	font-size: 16px;
}

.wrdc-section .wrdc-carousel__nav-btn:hover {
	background: var(--wrdc-price);
	color: #ffffff;
}

.wrdc-section .wrdc-carousel__nav-btn:disabled {
	opacity: 0.4;
	cursor: default;
	background: #ebf5f5;
	color: var(--wrdc-price);
}

.wrdc-carousel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
}

/**
 * `align-self: flex-start` keeps the track's LEFT edge flush with the
 * header text above it (matching Figma: the card grid fills the full
 * container width, flush left, not centered) — the parent's
 * `align-items: center` above is still needed for the pagination dots
 * (Figma centers those), but without this override it also centered
 * the track, and since JS clamps the track's own width down to a
 * whole number of cards (narrower than the full container whenever
 * the available width isn't an exact multiple of card+gap), centering
 * it left equal, unwanted padding on BOTH sides instead of none on
 * the left.
 */
.wrdc-carousel__track {
	display: flex;
	align-self: flex-start;
	gap: 32px;
	/* Actual width is set inline by destination-cards-carousel.js, clamped
	   to a whole number of cards (see wrdcSizeTrack()) — at 100% width the
	   track's resting/unscrolled state cuts the next card off mid-card
	   whenever the available width isn't an exact multiple of card+gap,
	   which doesn't happen in Figma's static mock (node 70:14159 fits
	   exactly 4 full cards with no partial one visible). Falls back to
	   100% before JS runs. */
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* Hide the native scrollbar — navigation is via the arrow buttons
	   and dots, a visible OS scrollbar would be visual noise. */
	scrollbar-width: none;
}

.wrdc-carousel__track::-webkit-scrollbar {
	display: none;
}

/**
 * --wrdc-carousel-card-width is set inline by
 * destination-cards-carousel.js (sizeTrack()): it stretches the cards
 * so a whole number of them exactly fills the track's available
 * width, instead of leaving a gap on the right when the width isn't a
 * clean multiple of card+gap. Falls back to the Figma-native 304px
 * before JS runs / if it's unavailable.
 */
.wrdc-carousel__card {
	position: relative;
	flex: 0 0 var(--wrdc-carousel-card-width, 304px);
	width: var(--wrdc-carousel-card-width, 304px);
	height: 323px;
	border-radius: 12px;
	overflow: hidden;
	scroll-snap-align: start;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
	text-decoration: none;
	display: block;
}

/**
 * Scoped as `.wrdc-carousel .wrdc-carousel__card-image` (not just the
 * bare class) so this out-specifies Elementor's own global image reset
 * (`.elementor img { height: auto; }`, specificity 0,1,1 — beats a
 * single class selector's 0,1,0 thanks to its extra type selector).
 * Without this, the image collapses to its own intrinsic aspect ratio
 * instead of filling the 323px-tall card, leaving a growing gap of
 * bare scrim/background below it — invisible on photos whose lower
 * portion happens to already be dark, but glaringly obvious on
 * brighter ones. Same reasoning as this file's own
 * `.wrdc-section .wrdc-carousel__nav-btn` scoping below, and
 * header-slider.css's `.wrhs-hero .wrhs-hero__nav`.
 */
.wrdc-carousel .wrdc-carousel__card-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wrdc-carousel__card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(168deg, rgba(13, 66, 113, 0.85) 3%, rgba(15, 76, 129, 0) 47%);
}

.wrdc-carousel__card-text {
	position: absolute;
	left: 24px;
	top: 24px;
	right: 24px;
	display: flex;
	flex-direction: column;
}

.wrdc-carousel__card-kicker {
	font: 600 14px/20px var(--wrdc-body-font);
	color: #fdefce;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.wrdc-carousel__card-title {
	font: 700 36px/44px var(--wrdc-heading-font);
	letter-spacing: -0.02em;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wrdc-carousel__dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px;
	border-radius: 9999px;
}

.wrdc-carousel__dots:empty {
	display: none;
}

.wrdc-section .wrdc-carousel__dot {
	appearance: none;
	border: 0;
	padding: 0;
	width: 16px;
	height: 4px;
	border-radius: 9999px;
	background: #ebf5f5;
	cursor: pointer;
}

.wrdc-section .wrdc-carousel__dot.is-active {
	background: var(--wrdc-price);
}

@media (max-width: 640px) {
	.wrdc-header--carousel {
		flex-direction: column;
		align-items: flex-start;
	}

	.wrdc-carousel__card {
		flex-basis: var(--wrdc-carousel-card-width, 260px);
		width: var(--wrdc-carousel-card-width, 260px);
	}

	.wrdc-carousel__card-title {
		font-size: 28px;
		line-height: 34px;
	}
}