/* ==========================================================================
   GDCONF Partner Spotlight — frontend styles

   CSS variables (injected inline by render callback):
     --potm-bg          background colour of the stage  (default #2563eb)
     --potm-hatch       hatch-stripe colour             (default #e91e8c)
     --potm-text        strip label text colour         (default #1a1a2e)
     --potm-pad-y       vertical padding of stage (px)  (default 40)
   ========================================================================== */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.gdconf-partner-spotlight {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;

	/* Full-width bleed handled by Blocksy's alignfull mechanism */
}

/* alignfull bleed (same pattern as the slider block) */
.wp-block-gdconf-partner-spotlight.alignfull,
.gdconf-partner-spotlight.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ── Decorative strip ─────────────────────────────────────────────────────── */

.gdconf-potm__strip {
	display: flex;
	font-family:"Rubik Mono One", Sans-serif;
	align-items: center;
	overflow: hidden;
	background: var(--theme-palette-color-7);
	height: clamp(36px, 5vw, 52px);
	margin-bottom:2em;
}

/* Diagonal hatch — pink-on-white repeating diagonal stripes */
.gdconf-potm__hatch {
	flex: 1;
	height: 100%;
	background: repeating-linear-gradient(
		-75deg,
		var(--potm-hatch, #ff47ba)   0px,
		var(--potm-hatch, #ff47ba)   14px,
		var(--theme-palette-color-7)                       14px,
		var(--theme-palette-color-7)                       22px
	);
}

/* "PARTNER OF THE MONTH" label */
.gdconf-potm__label {
	flex-shrink: 0;
	padding: 0 0.75em;
	font-size: clamp(13px, 2.2vw, 20px);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: clamp(.08em, .5vw, .22em);
	color:var(--theme-palette-color-1);
	white-space: nowrap;
	background: var(--theme-palette-color-7);
	line-height: 1;
}

/* ── Banner stage ─────────────────────────────────────────────────────────── */

.gdconf-potm__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--potm-bg, #2563eb);
	padding: var(--potm-pad-y, 40px) clamp(16px, 4vw, 80px);
	min-height: clamp(180px, 30vw, 400px);
}

/* ── Banner image + link ──────────────────────────────────────────────────── */

.gdconf-potm__banner-link {
	display: block;
	width: 100%;
	max-width: min(1200px, 90%);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
	border-radius: 14px;
	overflow: hidden;
	/* Subtle lift on hover (for clickable banners) */
}

a.gdconf-potm__banner-link:hover,
a.gdconf-potm__banner-link:focus-visible {
	transform: translateY(-3px) scale(1.005);
	box-shadow:
		0 16px 48px rgba(0,0,0,.25),
		0 4px  12px rgba(0,0,0,.12);
}
a.gdconf-potm__banner-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

.gdconf-potm__banner-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	object-fit: cover;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.gdconf-potm__placeholder {
	color: rgba(255,255,255,.7);
	font-size: 14px;
	font-style: italic;
	margin: 0;
	text-align: center;
}

/* ── Carousel (multi-partner, auto-rotating) ──────────────────────────────── */

/*
 * Layout:
 *   .gdconf-potm__stage-wrap  — carries --potm-bg background, wraps stage + dots
 *   .gdconf-potm__stage       — position:relative, transparent in carousel mode
 *   .gdconf-potm__slides      — CSS Grid stacking (all slides in same cell)
 *   .gdconf-potm__dots        — lives BELOW the stage inside stage-wrap
 *
 * Arrow buttons are absolutely positioned inside .gdconf-potm__stage.
 * They fade in on hover (opacity 0→1), always visible on touch devices.
 */

/* Stage-wrap: carries the background colour so dots share the same BG */
.gdconf-potm__stage-wrap {
	background-color: var(--potm-bg, #2563eb);
	position: relative;
}

/* In carousel mode the stage itself becomes transparent — stage-wrap owns the BG */
.gdconf-potm-carousel .gdconf-potm__stage {
	background-color: transparent;
	position: relative;
	overflow: visible; /* arrows extend slightly beyond the stage edge */
}

/* ── Slides container (CSS Grid stacking) ─────────────────────────────────── */

.gdconf-potm__slides {
	display: grid;
	width: 100%;
	max-width: min(1200px, 90%);
	/* Establish stacking context so slide z-indices work in slide mode */
	isolation: isolate;
}

.gdconf-potm__slide {
	grid-column: 1;
	grid-row: 1;
	opacity: 0;
	/* Transition overridden at runtime by view.js reading data-duration/easing */
	transition: opacity .6s ease;
	pointer-events: none;
	/* Flex so the banner-link fills the slide width */
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform, opacity;
}

.gdconf-potm__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Inside carousel, banner-link fills the slide (max-width already on .slides) */
.gdconf-potm__slide .gdconf-potm__banner-link {
	max-width: 100%;
}

/* ── Arrow buttons ─────────────────────────────────────────────────────────── */

.gdconf-potm__arrow {
	/* Positioning */
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;

	/* Sizing — 44×44 minimum touch target */
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(36px, 5vw, 52px);
	height: clamp(36px, 5vw, 52px);

	/* Visuals */
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);

	/* Show/hide via opacity — revealed on stage-wrap hover */
	opacity: 0;
	transition: opacity .22s ease, background .18s ease, transform .18s ease;
}

/* Horizontal position — inset from the slide edges */
.gdconf-potm__arrow--prev { left:  clamp(10px, 2.5vw, 28px); }
.gdconf-potm__arrow--next { right: clamp(10px, 2.5vw, 28px); }

/* Reveal on hover (pointer devices) */
.gdconf-potm__stage-wrap:hover .gdconf-potm__arrow {
	opacity: 1;
}

/* Hover state for the button itself */
.gdconf-potm__arrow:hover {
	background: rgba(0, 0, 0, .55);
	transform: translateY(-50%) scale(1.08);
}
.gdconf-potm__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Touch devices — always slightly visible (no :hover) */
@media (hover: none) {
	.gdconf-potm__arrow {
		opacity: .72;
		/* Slightly smaller so they don't dominate on mobile */
		width: clamp(32px, 8vw, 42px);
		height: clamp(32px, 8vw, 42px);
	}
}

/* Extra-small screens: push arrows tighter to edge */
@media (max-width: 380px) {
	.gdconf-potm__arrow--prev { left:  6px; }
	.gdconf-potm__arrow--next { right: 6px; }
}

/* ── Dot navigation ─────────────────────────────────────────────────────────── */

.gdconf-potm__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(7px, 1.5vw, 11px);
	/* Sits BELOW the stage: padding provides breathing room */
	padding: 18px 24px 28px;
}

.gdconf-potm__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, .32);
	cursor: pointer;
	transition: background .25s ease, transform .25s ease, width .25s ease;
	flex-shrink: 0;
}

.gdconf-potm__dot:hover {
	background: rgba(255, 255, 255, .65);
}

.gdconf-potm__dot.is-active {
	background: #fff;
	transform: scale(1.4);
	/* Optional pill shape for active dot (can remove if circle preferred) */
	width: 22px;
	border-radius: 5px;
}

/* ── Accessible focus on carousel wrapper ────────────────────────────────── */

.gdconf-potm-carousel:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* ── Responsive tweaks ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
	/* Reduce autoplay dots size slightly */
	.gdconf-potm__dot        { width: 7px; height: 7px; }
	.gdconf-potm__dot.is-active { width: 18px; }

	/* Give dots a bit less bottom padding on mobile */
	.gdconf-potm__dots { padding: 14px 16px 22px; }
}

/*
 * Dark mode is handled automatically — no overrides needed.
 * Blocksy sets --theme-palette-color-7 globally:
 *   Light mode : #FAFBFC  (white / near-white)
 *   Dark mode  : #1B242C  (dark navy)
 *   OS default : #1B242C  (via @media prefers-color-scheme)
 * Every element that uses var(--theme-palette-color-7) adapts automatically.
 */