/*
 * Interactive Banner slide styles.
 *
 * Loaded only when a gallery contains at least one banner slide (see
 * DSG_Shortcode_Gallery::render_carousel — enqueues on-demand). Kept in a
 * separate file so galleries without banners never pay the byte cost.
 *
 * Design intent: banner should feel native to the site's theme. We don't
 * hardcode brand colours — heading and paragraph inherit the theme's default
 * typography, buttons pick up theme button styling. The only strong opinions
 * are layout (two-column grid → single column on mobile), spacing, and the
 * auto-centering behaviour when there's only one button.
 *
 * @package DSG
 * @since 1.74
 */

/* ── Layout ─────────────────────────────────────────── */

.dsg-banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	padding: 2rem 1rem;
	box-sizing: border-box;
}

/*
 * image_side="left" swaps the visual order without touching source order —
 * source order stays [content, image] for screen readers so the headline is
 * announced first regardless of which side the image is on.
 */
.dsg-banner--image-left .dsg-banner__content {
	order: 2;
}
.dsg-banner--image-left .dsg-banner__image {
	order: 1;
}

/* ── Content column ─────────────────────────────────── */

.dsg-banner__eyebrow {
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
	opacity: 0.7;
}

.dsg-banner__headline {
	margin: 0 0 1rem;
	line-height: 1.15;
	font-size: clamp(1.75rem, 3.5vw, 3rem);
	font-weight: 600;
}

.dsg-banner__subline {
	margin: 0 0 1.5rem;
	line-height: 1.5;
	font-size: 1.0625rem;
	opacity: 0.85;
}

/* ── Buttons ─────────────────────────────────────────── */

.dsg-banner__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/*
 * Product decision: single button in a banner should feel centred (call-to-
 * action prominence), two buttons align inline (primary + secondary pattern).
 * :has() ships in every browser we support (2023+), no fallback needed.
 */
.dsg-banner__buttons:has(> .dsg-banner__btn:only-child) {
	justify-content: center;
}

.dsg-banner__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border: 2px solid currentColor;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
	transition: background-color 0.15s, color 0.15s, transform 0.15s;
}

.dsg-banner__btn--primary {
	background: currentColor;
	color: #fff;
}
.dsg-banner__btn--primary > * {
	color: #fff;
}

.dsg-banner__btn--secondary {
	background: transparent;
}

.dsg-banner__btn:hover,
.dsg-banner__btn:focus-visible {
	transform: translateY(-1px);
}

.dsg-banner__btn:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

/* ── Image column ────────────────────────────────────── */

.dsg-banner__image {
	display: block;
}

.dsg-banner__image img,
.dsg-banner__image picture {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 8px;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* ── Responsive: stack on mobile, image goes on top ── */

@media (max-width: 768px) {
	.dsg-banner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 1rem;
	}
	/*
	 * On mobile source order is [content, image] but we want image FIRST
	 * (hero pattern). image-right variant → image on top; image-left variant
	 * → same, we don't visually distinguish sides on narrow screens.
	 */
	.dsg-banner__image {
		order: -1;
	}
	.dsg-banner--image-left .dsg-banner__content,
	.dsg-banner--image-left .dsg-banner__image {
		order: initial;
	}
	.dsg-banner--image-left .dsg-banner__image {
		order: -1;
	}
}

/* ── Carousel-slide integration ─────────────────────── */

/*
 * Carousel gives every slide equal height. Banner slides expand to fill;
 * standard image slides stay their natural aspect ratio. Height: auto lets
 * the tallest banner set the row height for consistent swiping.
 */
.dsg-gallery-carousel .swiper-slide.dsg-gallery-item--banner {
	height: auto;
	display: flex;
	align-items: stretch;
}
.dsg-gallery-carousel .dsg-gallery-item--banner .dsg-banner {
	flex: 1;
}

/* ── Admin preview scaling ──────────────────────────── */

/*
 * The live preview inside the metadata modal is rendered by dsg-admin.js
 * with the same class names as the frontend. Scale down so it fits the
 * modal's narrow column without horizontal scroll.
 */
.dsg-banner-preview .dsg-banner {
	padding: 1rem;
	gap: 1rem;
	font-size: 0.875em;
}
.dsg-banner-preview .dsg-banner__headline {
	font-size: 1.25rem;
}
.dsg-banner-preview .dsg-banner__image-placeholder {
	background: #eee;
	color: #999;
	padding: 2rem 0.5rem;
	text-align: center;
	border-radius: 4px;
	border: 1px dashed #ccc;
}