/*
 * Jersey Bulls FC — ShopPromo band
 *
 * Juventus "Home kit" pattern: big title + Shop-now CTA on the left, a spotlighted row
 * of player cut-out figures on the right, carousel arrows + "Go to online store" link
 * driving to the SumUp shop. Cut-outs are placeholder kit imagery (design/20 gap).
 *
 * Markup: template-parts/shop-promo.php · tokens: css/tokens.css
 * Cinematic band — deliberately dark in both light + dark themes.
 */

.bulls-shop-promo {
	/* Soft studio spotlight toward the figures on the right. */
	background: radial-gradient(120% 90% at 72% 38%, var(--c-ink-700) 0%, var(--c-ink-900) 62%);
	color: var(--c-white);
	font-family: var(--ff-sans);
	overflow: hidden;
}

.bulls-shop-promo__inner {
	max-width: var(--content-full);
	margin: 0 auto;
	padding: var(--space-10) var(--gutter) var(--space-6);
	display: grid;
	grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.6fr);
	gap: var(--space-6);
	align-items: center;
}
@media (min-width: 1024px) {
	.bulls-shop-promo__inner { padding-inline: clamp(72px, 7vw, 132px); }
}

/* ----- Intro: title + Buy now ----- */
.bulls-shop-promo__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}
.bulls-shop-promo__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(var(--fs-600), 4.5vw, var(--fs-800));
	line-height: 0.95;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	font-weight: var(--fw-bold);
	color: var(--c-white);
}

/* ----- Cut-out gallery ----- */
.bulls-shop-promo__gallery {
	display: flex;
	align-items: flex-end;
	gap: var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* hide scrollbar — arrows drive it */
	padding-bottom: var(--space-2);
}
.bulls-shop-promo__gallery::-webkit-scrollbar { display: none; }

.bulls-shop-promo__item {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
}
.bulls-shop-promo__item img {
	height: clamp(260px, 34vh, 400px);
	width: auto;
	display: block;
	object-fit: contain;
	transition: transform var(--motion-base) var(--ease-out);
}

/* Each featured player links through to the store; lift on hover. */
.bulls-shop-promo__figlink {
	display: block;
	text-decoration: none;
	color: inherit;
}
.bulls-shop-promo__figlink:hover img,
.bulls-shop-promo__figlink:focus-visible img { transform: translateY(-6px); }
.bulls-shop-promo__figlink:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 4px; }

/* Player name + team caption under the cut-out. */
.bulls-shop-promo__caption {
	margin-top: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: center;
}
.bulls-shop-promo__caption-name {
	font-family: var(--ff-display);
	font-size: var(--fs-75);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white);
	transition: color var(--motion-fast) var(--ease-out);
}
.bulls-shop-promo__caption-meta {
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white-50);
}
.bulls-shop-promo__figlink:hover .bulls-shop-promo__caption-name,
.bulls-shop-promo__figlink:focus-visible .bulls-shop-promo__caption-name { color: var(--c-bulls-red-300); }

/* ----- Foot: arrows (left) + store link (right) ----- */
.bulls-shop-promo__foot {
	max-width: var(--content-full);
	margin: 0 auto;
	padding: var(--space-5) var(--gutter) var(--space-10);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}
@media (min-width: 1024px) {
	.bulls-shop-promo__foot { padding-inline: clamp(72px, 7vw, 132px); }
}

.bulls-shop-promo__nav { display: flex; gap: var(--space-3); }
.bulls-shop-promo__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-sans);   /* defensive — parent skins <button> with Sofia Sans */
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--c-white);
	background: none;
	border: 1px solid var(--c-white-50);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.bulls-shop-promo__arrow:hover,
.bulls-shop-promo__arrow:focus-visible {
	background: var(--c-white);
	color: var(--c-ink-900);
	border-color: var(--c-white);
}
.bulls-shop-promo__arrow:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 3px; }

.bulls-shop-promo__store {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--c-white-50);
	font-family: var(--ff-display);
	font-size: var(--fs-75);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-white);
	transition: color var(--motion-fast) var(--ease-out);
}
.bulls-shop-promo__store-arrow { transition: transform var(--motion-base) var(--ease-out); }
.bulls-shop-promo__store:hover,
.bulls-shop-promo__store:focus-visible { color: var(--c-bulls-red-300); }
.bulls-shop-promo__store:hover .bulls-shop-promo__store-arrow,
.bulls-shop-promo__store:focus-visible .bulls-shop-promo__store-arrow { transform: translateX(4px); }
.bulls-shop-promo__store:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 3px; }

/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width: 1024px) {
	.bulls-shop-promo__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
	.bulls-shop-promo__gallery { scroll-behavior: auto; }
	.bulls-shop-promo__figlink img,
	.bulls-shop-promo__caption-name,
	.bulls-shop-promo__store-arrow { transition: none; }
	.bulls-shop-promo__figlink:hover img,
	.bulls-shop-promo__figlink:focus-visible img { transform: none; }
}