/* ============================================================
   Social Showcase — horizontal carousel of image-only cards
   that link OUT (Instagram / Pinterest / lookbook, new tab).

   Same skeleton as Product Showcase but each card is a bare
   core/image (no price / CTA / badge). Whole image = the link;
   hover gives a quiet zoom + dim affordance.
   ============================================================ */

/* ── Section ────────────────────────────────────────────────── */
.wpdl-social {
	margin-block: 0 !important;
	border-top: 1px solid var(--wp--custom--semantic--color--border--subtle);
}

/* Collapse top padding when stacked directly under another band. */
.wpdl-social + .wpdl-social,
.wpdl-showcase + .wpdl-social,
.wpdl-social + .wpdl-showcase {
	padding-top: 0 !important;
}

.wpdl-social + .wpdl-social--has-bg,
.wpdl-social--has-bg + .wpdl-social {
	padding-top: var(--wp--custom--space--6) !important;
}

.wpdl-social > * {
	margin-block: 0;
}

/* ── Header row ─────────────────────────────────────────────── */
.wpdl-social__header {
	padding-block-start: var(--wp--custom--space--2);
	margin-block: 0 var(--wp--custom--space--3);
}

.wpdl-social__header > * {
	margin-block: 0;
}

/* ── Header left: title ─────────────────────────────────────── */
.wpdl-social__header-left {
	gap: var(--wp--custom--space--1);
}

.wpdl-social__header-left > * {
	margin-block: 0;
}

.wpdl-social__title.wp-block-heading {
	font-family: var(--wp--custom--font--family--display);
	font-size: var(--wp--custom--font--size--xl);
	font-weight: var(--wp--custom--font--weight--medium);
	color: var(--wp--custom--semantic--color--text--primary);
	letter-spacing: -0.01em;
}

/* ── Header right: Follow link + arrows ─────────────────────── */
.wpdl-social__header-right {
	gap: var(--wp--custom--space--4);
	align-items: flex-end;
}

.wpdl-social__header-right > * {
	margin-block: 0;
}

.wpdl-social__follow {
	margin: 0;
}

.wpdl-social__follow a {
	font-family: var(--wp--custom--font--family--body);
	font-size: var(--wp--custom--font--size--xs);
	font-weight: var(--wp--custom--font--weight--medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
	text-decoration-thickness: 0.0938rem;
	white-space: nowrap;
}

.wpdl-social__follow a:hover {
	color: var(--wp--custom--semantic--color--brand--strong);
}

/* ── Arrows (mirror showcase arrow styling) ─────────────────── */
.wpdl-social__arrows {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--2);
}

.wpdl-social__arrow {
	width: 1.875rem; /* 30px — desktop-only control (hidden on touch/mobile below) */
	height: 1.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	border-radius: var(--wp--custom--radius--full);
	cursor: pointer;
	font-size: 0.875rem;
	line-height: 1;
	color: var(--wp--custom--semantic--color--text--primary);
	transition:
		border-color     var(--wp--custom--duration--fast) var(--wp--custom--easing--default),
		background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--default),
		color            var(--wp--custom--duration--fast) var(--wp--custom--easing--default);
	padding: 0;
}

.wpdl-social__arrow:hover:not([aria-disabled="true"]) {
	border-color: var(--wp--custom--semantic--color--brand--primary);
	background-color: var(--wp--custom--semantic--color--brand--primary);
	color: var(--wp--custom--semantic--color--text--on-brand);
}

.wpdl-social__arrow[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

/* ── Track: scroll container — flex row ─────────────────────── */
.wpdl-social__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	overflow: auto hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: var(--wp--custom--space--4);
}

.wpdl-social__track::-webkit-scrollbar {
	display: none;
}

/* ── Card: image only, square, links out ────────────────────── */
.wpdl-social__track .wpdl-social__card.wp-block-image {
	flex: 0 0 14rem;
	width: 14rem;
	max-width: none;
	margin: 0;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--semantic--color--surface--secondary);
	box-shadow: var(--wp--custom--semantic--shadow--card);
	transition:
		box-shadow var(--wp--custom--duration--base) var(--wp--custom--easing--default),
		transform  var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* Lift the tile off the cream band on hover — the premium shelf cue,
   consistent with the product-showcase cards. */
.wpdl-social__track .wpdl-social__card.wp-block-image:is(:hover, :focus-within) {
	box-shadow: var(--wp--custom--semantic--shadow--raised);
	transform: translateY(-0.25rem);
}

.wpdl-social__track .wpdl-social__card.wp-block-image a {
	display: block;
	position: relative;
}

.wpdl-social__track .wpdl-social__card.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--default);
}

/* Quiet hover affordance — no CTA text/icon (image only). A soft bottom-up
   scrim + slow zoom reads editorial and signals the card links out. */
.wpdl-social__track .wpdl-social__card.wp-block-image a::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%));
	opacity: 0;
	transition: opacity var(--wp--custom--duration--base) var(--wp--custom--easing--default);
	pointer-events: none;
}

.wpdl-social__track .wpdl-social__card.wp-block-image:is(:hover, :focus-within) img {
	transform: scale(1.05);
}

.wpdl-social__track .wpdl-social__card.wp-block-image:is(:hover, :focus-within) a::after {
	background-image: linear-gradient(to top, rgb(0 0 0 / 24%), rgb(0 0 0 / 0%) 55%);
	opacity: 1;
}

.wpdl-social__track .wpdl-social__card.wp-block-image a:focus-visible {
	outline: 2px solid var(--wp--custom--semantic--color--brand--primary);
	outline-offset: 2px;
}

/* ── Tablet 768 ─────────────────────────────────────────────── */
@media (width <= 47.9375rem) {
	.wpdl-social__track {
		gap: var(--wp--custom--space--3);
	}

	.wpdl-social__track .wpdl-social__card.wp-block-image {
		flex: 0 0 11rem;
		width: 11rem;
	}
}

/* ── Mobile 375 ─────────────────────────────────────────────── */
@media (width <= 29.9375rem) {
	.wpdl-social__arrow {
		display: none; /* native swipe replaces arrows */
	}

	.wpdl-social__header {
		margin-block: 0 var(--wp--custom--space--4);
	}

	.wpdl-social__track {
		gap: var(--wp--custom--space--3);
	}

	.wpdl-social__track .wpdl-social__card.wp-block-image {
		flex: 0 0 12rem;
		width: 12rem;
	}
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.wpdl-social__track {
		scroll-behavior: auto;
	}

	.wpdl-social__track .wpdl-social__card.wp-block-image,
	.wpdl-social__track .wpdl-social__card.wp-block-image img {
		transition: none;
	}

	.wpdl-social__track .wpdl-social__card.wp-block-image:is(:hover, :focus-within) {
		transform: none;
	}

	.wpdl-social__track .wpdl-social__card.wp-block-image:is(:hover, :focus-within) img {
		transform: none;
	}
}