/**
 * Related Products section styles (`.ap-related-product`), rendered by
 * advanced-product/templates/single/related.php on the `ap_product`
 * single template ("Diese Surfcamps könnten dich auch interessieren").
 *
 * Figma reference (spacing / colors / typography):
 * https://www.figma.com/design/UFbyQSXqjJ3fkYXo3ORgO7/Wellenreiten-2026-Handoff-Ext--Copy-?node-id=70-13081
 *
 * The card matches the "Vorschlag Card Neu" component also used by the
 * Surfcamp Cards widget (assets/surfcamp-cards.css) — same tokens, `arp-`
 * ("ap-related-product") class prefix instead of `wrsc-` since this
 * section is a plugin template, not an Elementor widget, and the two
 * never render on the same page.
 */

/*
 * The parent theme's compiled style.css carries legacy, same-specificity
 * `.ap-related-product` box-model rules (margin-top, padding-top,
 * border-top) predating this section's own stylesheet, some with
 * `!important` — `!important` here matches that and wins the cascade
 * regardless of stylesheet print order.
 */
.ap-related-product {
	--arp-heading-font: 'Archivo', var(--font-family, 'Source Sans 3'), Arial, Helvetica, sans-serif;
	--arp-body-font: var(--font-family, 'Source Sans 3'), Arial, Helvetica, sans-serif;
	--arp-border: rgba(0, 0, 0, .1);
	--arp-radius: 16px;
	--arp-text: var(--color-text-primary, #171717);
	--arp-muted: #525252;
	--arp-country: #9c6006;
	--arp-tag-border: #f5f5f5;
	--arp-price: var(--color-wr-main, #0F4C81);
	background: #fafafa;
	margin-top: 0 !important;
	padding: 80px 0 !important;
	border-top: 0 !important;
	/*
	 * True edge-to-edge width: the product single template renders this
	 * section inside the site's boxed page-builder layout (a
	 * width-constrained, padded `.templaza-wrapper` > `.templaza-column`
	 * chain, several levels up — not just its direct parent), so a plain
	 * `width: 100%` only fills that inner column, not the viewport. This
	 * breaks out of it by sizing/centering against the viewport instead.
	 */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	overflow-x: hidden;
}

.ap-related-product .box-title {
	margin: 0 0 44px;
	font-family: var(--arp-heading-font);
	font-weight: 700;
	font-size: 36px !important;
	line-height: 44px;
	letter-spacing: -0.72px;
	color: var(--arp-text);
	text-align: left;
	text-transform: none !important;
}

/*
 * Equal-height cards: `.templaza-ap-archive` is a flex row (also the
 * UIkit slider's item track), and flex's own default cross-axis stretch
 * already equalizes `.arp-card-cell` height to the tallest card in the
 * row — this just makes that explicit instead of relying on the
 * default not being overridden elsewhere.
 */
.ap-related-product .templaza-ap-archive {
	align-items: stretch;
}

/*
 * `.arp-card-cell` — not `.arp-card` itself — is the direct child of
 * `.uk-grid`/`.templaza-ap-archive`: UIkit's gutter classes (e.g.
 * `uk-grid-default`) put the column gap on the grid's direct children as
 * `padding-left` (with a matching negative margin on the grid), not as a
 * real gap between boxes. Applying that padding straight to `.arp-card`
 * would push its border/background/rounded corners in on one side only,
 * while the box itself still spans the full column — cards touching
 * with no visible gap, and their image/content shifted off-center.
 * The plain `.arp-card-cell` wrapper absorbs that padding instead, so
 * `.arp-card` — full width/height of its cell — sits centered in an
 * actual gutter.
 */
.ap-related-product .arp-card-cell {
	height: 100%;
}

.ap-related-product .arp-card {
	background: #fff;
	color: var(--arp-text);
	border: 1px solid var(--arp-border);
	border-radius: var(--arp-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ap-related-product .arp-card__media {
	position: relative;
	display: block;
	aspect-ratio: 384 / 256;
	border-bottom: .5px solid var(--arp-border);
	overflow: hidden;
}

.ap-related-product .arp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ap-related-product .arp-card__body {
	padding: 24px 24px 16px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1;
}

.ap-related-product .arp-card__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}

.ap-related-product .arp-card__heading-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ap-related-product .arp-card__badge-title {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ap-related-product .arp-card__country {
	margin: 0;
	font: 500 14px/20px var(--arp-body-font);
	text-transform: uppercase;
	color: var(--arp-country);
}

.ap-related-product .arp-card__title {
	margin: 0;
	font: 700 24px/32px var(--arp-heading-font);
	letter-spacing: -0.48px;
}

.ap-related-product .arp-card__title a {
	color: inherit;
	text-decoration: none;
}

.ap-related-product .arp-card__title a:hover {
	text-decoration: underline;
}

.ap-related-product .arp-card__desc-tags {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ap-related-product .arp-card__desc {
	margin: 0;
	font: 400 16px/24px var(--arp-body-font);
	color: var(--arp-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ap-related-product .arp-card__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.ap-related-product .arp-card__tags li {
	margin: 0;
	font: 500 14px/20px var(--arp-body-font);
	color: var(--arp-text);
	background: #fff;
	border: 1px solid var(--arp-tag-border);
	border-radius: 16px;
	padding: 2px 8px;
}

.ap-related-product .arp-card__footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ap-related-product .arp-card__price {
	margin: 0;
	font: 700 24px/32px var(--arp-heading-font);
	letter-spacing: -0.48px;
	color: var(--arp-price);
}

.ap-related-product .arp-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	font: 600 16px/24px var(--arp-body-font);
	color: var(--arp-price);
	text-decoration: none;
}

.ap-related-product .arp-card__link:hover {
	text-decoration: underline;
}

.ap-related-product .arp-card__link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 14px;
}

@media (max-width: 768px) {
	.ap-related-product {
		padding: 48px 0 !important;
	}

	.ap-related-product .box-title {
		font-size: 28px;
		line-height: 36px;
		margin-bottom: 24px;
	}
}