/*
 * hero-banner.css — Home page: Hero Banner section.
 *
 * Figma spec: 1880x700 rounded (20px) image/slider, content panel pinned
 * left (100px inset) and vertically centered, max-width 870px — heading +
 * description grouped with a 20px gap, then a 50px gap down to the CTA row.
 * Multiple Banner Images render as a Swiper fade slider with pagination
 * dots (assets/js/home/hero-banner.js); a single image is a plain <img>.
 *
 * Only enqueued on the front page / Home Page template (see inc/enqueue.php)
 * — keeps this section's CSS out of every other page's payload.
 *
 * @package Bennelongia
 */

.hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
    max-width: none;
    height: 700px;
    margin: 0 auto;
    border-radius: 0;
    background: #ccc;
    color: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}


.hero-banner__image-wrap,
.hero-banner__slider {
	position: absolute;
	inset:    0;
}

.hero-banner__image {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.hero-banner__slider .swiper-slide {
	height: 700px;
}

/* Full-bleed dark overlay, edge to edge over the whole banner. Flat/uniform
   (no gradient, no grayscale, no blur) so the photo's own colors stay
   visible underneath at every slide and breakpoint. Uses ::before (not
   ::after) with z-index: 2 — Swiper's own bundled CSS sets `.swiper {
   z-index: 1 }` on .hero-banner__slider, which tied with an ::after/z-
   index:1 overlay and let the slider win in some browsers; z-index: 2
   definitively beats that. Still below .hero-banner__content (20) and
   .hero-banner__pagination (3), so text/buttons/dots are unaffected. Text
   contrast comes from each text element's own text-shadow below,
   independent of this overlay's strength. */
.hero-banner::before {
	content:  '';
	position: absolute;
	inset:    0;
	z-index:  2;
	background: rgba( 0, 0, 0, 0.50 );
	pointer-events: none;
}

/* Fully transparent — no background fill, border, or blur behind the text
   (a white glass panel and a gradient-only scrim were both tried earlier
   and rejected). Text sits directly over the ::after overlay above.
   margin-left + padding land the heading at roughly the same x-position as
   the old flat 100px inset, so this doesn't shift the existing text/button
   positioning. */
.hero-banner__content {
    position: relative !important;
    z-index: 20 !important;

    display: flex !important;
    flex-direction: column;
    gap: 50px;

    width: 100%;
    max-width: 870px;
    margin-left: 60px;
    padding: 40px 44px;
}
.hero-banner__text {
	display:        flex;
	flex-direction: column;
	gap:            20px;
}

/* The glass panel now carries most of the contrast, so this only needs a
   light shadow for polish — the earlier heavy 4-direction outline (used
   when text sat directly on the photo with no panel) would look too harsh
   against the lighter background here. */
.hero-banner__heading {
	font-size:   3rem;
	font-weight: 700;
	line-height: 1.15;
	margin:      0;
	color:       #fff;
	text-shadow: 0 2px 10px rgba( 0, 0, 0, 0.35 );
}

.hero-banner__description {
	font-size:   1.05rem;
	line-height: 1.6;
	margin:      0;
	color:       #ffffff;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.3 );
}

.hero-banner__cta {
	display:   flex;
	flex-wrap: wrap;
	gap:       16px;
}

/* =============================================================================
   Swiper pagination — small dots, active one an elongated green pill.
   ============================================================================= */

.hero-banner__pagination {
	position:   absolute;
	left:       0;
	right:      0;
	bottom:     24px;
	width:      auto;
	margin:     0 auto;
	z-index:    3;
	display:    flex;
	align-items: center;
	justify-content: center;
	gap:        6px;
}

.hero-banner__pagination .swiper-pagination-bullet {
	width:      8px;
	height:     8px;
	margin:     0;
	border-radius: 50%;
	background: #ffffff;
	opacity:    0.7;
	transition: width 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.hero-banner__pagination .swiper-pagination-bullet-active {
	width:      24px;
	border-radius: 30px;
	background: var( --bf-color-green, #7fb04f );
	opacity:    1;
}

@media ( max-width: 991.98px ) {
	.hero-banner,
	.hero-banner__slider .swiper-slide {
		min-height: 520px;
		height:     auto;
	}

	/* Full-bleed on tablet/mobile — the side margins this replaces left a
	   visible strip of page background down both edges of the banner. */
	.hero-banner {
		margin-left:  0;
		margin-right: 0;
	}

	.hero-banner__heading {
		font-size: 2.25rem;
	}

	.hero-banner__content {
		max-width:   calc( 100% - 48px );
		margin-left: 24px;
		padding:     28px 28px;
	}
}

@media ( max-width: 575.98px ) {
	.hero-banner,
	.hero-banner__slider .swiper-slide {
		min-height: 420px;
		height:     auto;
	}

	.hero-banner {
		margin-left:  0;
		margin-right: 0;
	}

	.hero-banner__heading {
		font-size: 1.625rem;
	}

	.hero-banner__description {
		font-size: 0.95rem;
	}

	.hero-banner__content {
		gap:         28px;
		max-width:   calc( 100% - 32px );
		margin-left: 16px;
		padding:     24px 20px;
	}

	.hero-banner__text {
		gap: 12px;
	}

	.hero-banner__cta {
		flex-direction: column;
		align-items:    stretch;
	}

	.hero-banner__pagination {
		bottom: 16px;
	}
}