/**
 * Promo Banner - Front-end Styles
 *
 * Layout variants (class on the section wrapper):
 *   .promo-banner--image-right  Two-column grid: text left, product image right.
 *   .promo-banner--image-left   Two-column grid: product image left, text right.
 *   .promo-banner--image-bg     Text group overlaid on a full background image.
 *   .promo-banner--text-only    Text on a solid colour background; no image.
 *
 * CSS custom properties on the section wrapper:
 *   --pb-btn-accent   button accent colour
 *   --pb-btn-color    button text colour (filled style only)
 *   --pb-mobile-bg    mobile solid background colour
 *   --pb-height       banner min-height in px (image-bg variant only)
 *
 * Breakpoints (max-width — mobile-last cascade):
 *   Mobile      : ≤ 767px
 *   Tablet      : ≤ 1023px
 *   Wide-tablet : ≤ 1280px  (use only when needed for complex layouts)
 *
 * @package WayfinderBlocks
 */

/* ----------------------------------------------------------------
   Block shell
   ---------------------------------------------------------------- */
.wp-block-wayfinder-promo-banner {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--color-navy, #2B3157);
	overflow: hidden;
}

.wp-block-wayfinder-promo-banner.promo-banner--full-width {
	max-width: none;
}

/* ----------------------------------------------------------------
   Background image — absolute fill, object-fit cover
   ---------------------------------------------------------------- */
.promo-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Mobile background image — hidden by default, shown at ≤ 767px */
.promo-banner__bg--mobile {
	display: none;
}

/* ----------------------------------------------------------------
   Overlay — colour and opacity set via inline style from render.php
   ---------------------------------------------------------------- */
.promo-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ----------------------------------------------------------------
   Inner container — CSS grid, centered, z-index above bg/overlay
   ---------------------------------------------------------------- */
.promo-banner__inner {
	position: relative;
	z-index: 2;
	display: grid;
	align-items: center;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3rem);
	max-width: 1440px;
	margin: 0 auto;
}

/* ----------------------------------------------------------------
   image-right: text left column, product image right column
   ---------------------------------------------------------------- */
.promo-banner--image-right .promo-banner__inner {
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
}

/* ----------------------------------------------------------------
   image-left: product image left column, text right column.
   DOM order is text-group then image-wrap; grid placement reverses.
   ---------------------------------------------------------------- */
.promo-banner--image-left .promo-banner__inner {
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(2rem, 4vw, 4rem);
}

.promo-banner--image-left .promo-banner__text-group {
	grid-column: 2;
	grid-row: 1;
}

.promo-banner--image-left .promo-banner__image-wrap {
	grid-column: 1;
	grid-row: 1;
}

/* ----------------------------------------------------------------
   image-bg: single column; min-height set via --pb-height
   ---------------------------------------------------------------- */
.promo-banner--image-bg {
	min-height: var(--pb-height, 480px);
}

.promo-banner--image-bg .promo-banner__inner {
	display: grid;
	min-height: inherit;
}

/* ----------------------------------------------------------------
   image-bg: 9-position content placement via place-self
   ---------------------------------------------------------------- */
.promo-banner--image-bg .promo-banner__text-group {
	max-width: 36rem;
	margin-left: 0;
	margin-right: 0;
}

.promo-banner--image-bg[data-content-position="top-left"]     .promo-banner__text-group { align-self: start;  justify-self: start;  }
.promo-banner--image-bg[data-content-position="top-center"]   .promo-banner__text-group { align-self: start;  justify-self: center; }
.promo-banner--image-bg[data-content-position="top-right"]    .promo-banner__text-group { align-self: start;  justify-self: end;    }
.promo-banner--image-bg[data-content-position="middle-left"]  .promo-banner__text-group { align-self: center; justify-self: start;  }
.promo-banner--image-bg[data-content-position="middle-center"].promo-banner__text-group { align-self: center; justify-self: center; }
.promo-banner--image-bg[data-content-position="middle-right"] .promo-banner__text-group { align-self: center; justify-self: end;    }
.promo-banner--image-bg[data-content-position="bottom-left"]  .promo-banner__text-group { align-self: end;    justify-self: start;  }
.promo-banner--image-bg[data-content-position="bottom-center"].promo-banner__text-group { align-self: end;    justify-self: center; }
.promo-banner--image-bg[data-content-position="bottom-right"] .promo-banner__text-group { align-self: end;    justify-self: end;    }

/* ----------------------------------------------------------------
   image-bg: default text colour — white so text is legible on photos.
   render.php applies textColor as an inline style="color:..." on the
   text group, which wins over this rule when an explicit colour is set.
   eyebrow/headline/subhead carry no colour of their own so they inherit.
   ---------------------------------------------------------------- */
.promo-banner--image-bg .promo-banner__text-group {
	color: #ffffff;
}

/* ----------------------------------------------------------------
   image-bg: always-on gradient scrim anchored to content-position.
   Shared pseudo-element properties; background set per-position below.
   z-index 1 = above bg image (z-index:auto), alongside the optional
   .promo-banner__overlay (also z-index 1, painted after ::before so it
   sits on top). .promo-banner__inner stays at z-index 2 above both.
   pointer-events: none — never blocks clicks.
   ---------------------------------------------------------------- */
.promo-banner--image-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.promo-banner--image-bg[data-content-position="top-left"]::before     { background: radial-gradient(ellipse at top left,     rgba(0,0,0,0.55) 0%, transparent 70%); }
.promo-banner--image-bg[data-content-position="top-center"]::before   { background: radial-gradient(ellipse at top,           rgba(0,0,0,0.55) 0%, transparent 70%); }
.promo-banner--image-bg[data-content-position="top-right"]::before    { background: radial-gradient(ellipse at top right,    rgba(0,0,0,0.55) 0%, transparent 70%); }
.promo-banner--image-bg[data-content-position="middle-left"]::before  { background: radial-gradient(ellipse at left,         rgba(0,0,0,0.55) 0%, transparent 70%); }
.promo-banner--image-bg[data-content-position="middle-center"]::before{ background: radial-gradient(ellipse at center,       rgba(0,0,0,0.55) 0%, transparent 70%); }
.promo-banner--image-bg[data-content-position="middle-right"]::before { background: radial-gradient(ellipse at right,        rgba(0,0,0,0.55) 0%, transparent 70%); }
.promo-banner--image-bg[data-content-position="bottom-left"]::before  { background: radial-gradient(ellipse at bottom left,  rgba(0,0,0,0.55) 0%, transparent 70%); }
.promo-banner--image-bg[data-content-position="bottom-center"]::before{ background: radial-gradient(ellipse at bottom,       rgba(0,0,0,0.55) 0%, transparent 70%); }
.promo-banner--image-bg[data-content-position="bottom-right"]::before { background: radial-gradient(ellipse at bottom right, rgba(0,0,0,0.55) 0%, transparent 70%); }

/* ----------------------------------------------------------------
   text-only: single column on solid colour background
   ---------------------------------------------------------------- */
.promo-banner--text-only .promo-banner__inner {
	grid-template-columns: 1fr;
}

/* ----------------------------------------------------------------
   Text group — flex column; alignment via BEM modifier
   ---------------------------------------------------------------- */
.promo-banner__text-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 100%;
}

.promo-banner__text-group--left {
	align-items: flex-start;
	text-align: left;
}

.promo-banner__text-group--center {
	align-items: center;
	text-align: center;
	margin: 0 auto;
}

.promo-banner__text-group--right {
	align-items: flex-end;
	text-align: right;
	margin-left: auto;
}

/* Cap text width for single-column variants to keep lines readable. */
.promo-banner--text-only .promo-banner__text-group {
	max-width: 600px;
}

/* ----------------------------------------------------------------
   Image wrap + product / lifestyle image
   ---------------------------------------------------------------- */
.promo-banner__image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.promo-banner__image {
	width: 100%;
	height: auto;
	max-height: clamp(280px, 40vw, 500px);
	object-fit: contain;
	object-position: center;
	display: block;
}

/* ----------------------------------------------------------------
   Typography — colour inherited from .promo-banner__text-group
   ---------------------------------------------------------------- */
.promo-banner__eyebrow {
	margin: 0;
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: clamp(12px, 1.1vw, 15px);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
}

.promo-banner__headline {
	margin: 0;
	font-family: var(--font-heading, 'Bebas Neue', sans-serif);
	font-size: clamp(36px, 5vw, 72px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
	overflow-wrap: break-word;
	word-break: break-word;
}

.promo-banner__subhead {
	margin: 0;
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: clamp(14px, 1.4vw, 19px);
	font-weight: 400;
	line-height: 1.5;
}

/* ----------------------------------------------------------------
   Button wrap + CTA — three visual styles via data-style attribute
   ---------------------------------------------------------------- */
.promo-banner__btn-wrap {
	margin-top: 0.25rem;
}

.promo-banner__cta {
	display: inline-flex;
	align-items: center;
	padding: 13px 32px;
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 150ms ease, box-shadow 150ms ease;
	background-color: var(--pb-btn-accent, #FF7A3D);
	color:            var(--pb-btn-color, #ffffff);
	border:           1px solid transparent;
}

.promo-banner__cta[data-style="outline"] {
	background-color: transparent;
	color:  var(--pb-btn-accent, #FF7A3D);
	border: 2px solid var(--pb-btn-accent, #FF7A3D);
}

.promo-banner__cta[data-style="ghost"] {
	background-color: transparent;
	color:  #ffffff;
	border: 2px solid #ffffff;
}

.promo-banner__cta[data-style="text-only"] {
	background-color: transparent;
	border:        none;
	color:         var(--pb-btn-accent, #FF7A3D);
	padding:       10px 0;
	border-radius: 0;
}

.promo-banner__cta:hover {
	opacity: 0.85;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.promo-banner__cta[data-style="text-only"]:hover {
	box-shadow: none;
}

.promo-banner__cta:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

.promo-banner__cta--no-url {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

/* ----------------------------------------------------------------
   Content alignment — vertical / horizontal (non-image-bg variants)
   ---------------------------------------------------------------- */
.promo-banner__text-group--vc-top    { align-self: start; }
.promo-banner__text-group--vc-center { align-self: center; }
.promo-banner__text-group--vc-bottom { align-self: end; }

.promo-banner__text-group--hc-start  { justify-self: start; }
.promo-banner__text-group--hc-center { justify-self: center; }
.promo-banner__text-group--hc-end    { justify-self: end; }

/* ----------------------------------------------------------------
   Responsive — Tablet (≤ 1023px): collapse two-column to single
   ---------------------------------------------------------------- */
@media (max-width: 1023px) {

	/* Collapse image-right and image-left to single column. */
	.promo-banner--image-right .promo-banner__inner,
	.promo-banner--image-left .promo-banner__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* Remove explicit grid placement so DOM order is restored. */
	.promo-banner--image-left .promo-banner__text-group {
		grid-column: auto;
		grid-row: auto;
	}

	.promo-banner--image-left .promo-banner__image-wrap {
		grid-column: auto;
		grid-row: auto;
	}

	/* image-bg: reduce min-height on tablet. */
	.promo-banner--image-bg,
	.promo-banner--image-bg .promo-banner__inner {
		min-height: clamp(300px, 50vh, 520px);
	}

	/* Reset vc/hc alignment overrides for stacked (image-right/left) variants.
	   image-bg is intentionally excluded — data-content-position must keep
	   working at tablet so text does not drift over unprotected photo areas. */
	.promo-banner--image-right .promo-banner__text-group,
	.promo-banner--image-left  .promo-banner__text-group {
		align-self: center !important;
		justify-self: center !important;
	}

	/* Stacked state: center text group content within the single column.
	   Specificity 0,2,0 overrides the .--right left-align rule (0,1,0) at
	   all widths ≤1023px — no !important needed. align-items:center on the
	   flex column also centers .promo-banner__btn-wrap and its CTA button. */
	.promo-banner--image-right .promo-banner__text-group,
	.promo-banner--image-left  .promo-banner__text-group {
		text-align: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
	}

	/* image-bg: narrow text group at tablet to prevent sprawl, but keep
	   data-content-position placement — no !important center override here. */
	.promo-banner--image-bg .promo-banner__text-group {
		max-width: min(90%, 28rem);
	}
}

/* ----------------------------------------------------------------
   Responsive — Mobile (≤ 767px)
   ---------------------------------------------------------------- */
@media (max-width: 767px) {

	/* Solid colour replaces the desktop background image on mobile. */
	.wp-block-wayfinder-promo-banner {
		background-color: var(--pb-mobile-bg, #2B3157);
	}

	/* Hide desktop bg image; mobile bg image (if set) shows instead. */
	.promo-banner__bg:not(.promo-banner__bg--mobile) {
		display: none;
	}

	.promo-banner__bg--mobile {
		display: block;
	}

	.promo-banner__inner {
		padding: 2rem 1.25rem;
		gap: 1.5rem;
	}

	/* Minimum height on mobile for image-bg. */
	.promo-banner--image-bg,
	.promo-banner--image-bg .promo-banner__inner {
		min-height: 280px;
	}

	/* Scrim not needed once the bg image is hidden — suppress on the solid band. */
	.promo-banner--image-bg::before {
		display: none;
	}

	/*
	 * image-bg on the solid band: center all text regardless of content-position
	 * or text-align modifier. Specificity 0,2,0 overrides the .--right rule
	 * (0,1,0) below that would otherwise pull text to the left edge.
	 * align-items:center on the flex column centers the button wrap too.
	 */
	.promo-banner--image-bg .promo-banner__text-group {
		justify-self: center;
		align-self: center;
		text-align: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
	}

	/* Contain product image on small screens. */
	.promo-banner__image {
		max-height: 220px;
		max-width: 280px;
		margin: 0 auto;
	}

	/* Left-align right-aligned text on mobile for readability. */
	.promo-banner__text-group--right {
		align-items: flex-start;
		text-align: left;
		margin-left: 0;
	}

	.promo-banner__headline {
		font-size: clamp(28px, 8vw, 48px);
	}

	.promo-banner__subhead {
		font-size: clamp(13px, 3.5vw, 17px);
	}

	.promo-banner__cta {
		padding: 11px 24px;
		font-size: 14px;
	}
}