/* ======================================================================
BANNER BLOCKS (SINGLE & GRID IMAGES PLUS OVERLAYS)
====================================================================== */

/* ==========================================================================
   CONTAINER LAYOUT
   ========================================================================== */
.banner-block {
	max-width: 1200px;
}

/* --- Grid Container Layout --- */
.banner-block.banner-block--grid {
	display: flex;
	flex-direction: column;
}
.banner-block__wrapper {
	padding: 0 var(--spacing-03) var(--spacing-06);
}

/* Base Card Container */
.banner-block__container {
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: var(--border-radius-md, 8px);
	border: 1px solid var(--color-border-card-default, #CCC);
	overflow: hidden;
	text-decoration: var(--text-decoration-none);
}

.banner-block__container--grid {
	/* margin-bottom: var(--spacing-06, 24px); */
}

/* ---- START Video Controller ---- */
.banner-block__video-control {
    position: absolute;
    top: var(--spacing-02);
    right: var(--spacing-02);
    height: 52px;
    width: 52px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background-color: var(--color-surface-primary);
    opacity: var(--opacity-70);
    transition: background 200ms;
    border: none;
}

.banner-block__video-control:hover {
    background: var(--color-surface-primary);
}

.banner-block__video-control .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: var(--spacing-04-negative);
    margin-left: var(--spacing-04-negative);
}
/* ---- END Video Controller ---- */

/* Prevents hover animations if has_link=no */
.banner-block__container--nolink {
	pointer-events: none;
	border: 1px solid var(--color-border-card-disabled);
}
/* keeps video play/pause clickable when "has_link=no" */
.banner-block__video-control {
	pointer-events: auto; /* Ensures it stays clickable */
  	cursor: pointer;
}

/* ==========================================================================
   ASPECT RATIOS: SINGLE IMAGE (MOBILE / CARD)
   ========================================================================== */
   
.banner-block__container--single.banner-block__container--accent .banner-block__media {
	aspect-ratio: var(--banner-accent-card);
}

.banner-block__container--single.banner-block__container--small .banner-block__media {
	aspect-ratio: var(--banner-single-sm-card);
}

.banner-block__container--single.banner-block__container--medium .banner-block__media {
	aspect-ratio: var(--banner-single-md-card);
}

.banner-block__container--single.banner-block__container--large .banner-block__media {
	aspect-ratio: var(--banner-single-lg-card);
}

.banner-block__container--single.banner-block__container--hero .banner-block__media {
	aspect-ratio: var(--banner-single-hero-card);
}


/* ==========================================================================
	ASPECT RATIOS: GRID IMAGE (MOBILE / CARD)
   ========================================================================== */
   
.banner-block__container--grid.banner-block__container--small .banner-block__media {
	aspect-ratio: var(--banner-grid-sm-01);
}

.banner-block__container--grid.banner-block__container--medium .banner-block__media {
	aspect-ratio: var(--banner-grid-md-01);
}

.banner-block__container--grid.banner-block__container--large .banner-block__media {
	aspect-ratio: var(--banner-grid-lg-01);
}

.banner-block__container--grid.banner-block__container--hero .banner-block__media {
	aspect-ratio: var(--banner-grid-hero-01);
}


/* ==========================================================================
	MEDIA CONTENT
   ========================================================================== */

/* Image/Video wrapper */
.banner-block__media {
	background: grey;
}

.banner-block__container--single .banner-block__media {
	height: 100%;
}

/* --- Image --- */
.banner-block__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* --- Video --- */
.banner-block__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ==========================================================================
   OVERLAY STYLES (MOBILE / CARD)
   ========================================================================== */

.banner-block__info-wrapper {
	align-self: stretch;
}

.banner-block__info {
	padding: var(--spacing-06, 24px);
	padding-bottom: var(--spacing-02, 8px);
	background: var(--color-surface-banner-card-on-light);
}

.banner-block__info-content {
	display: flex;
	flex-direction: column;
}

.banner-block__text-wrap {
	padding-bottom: var(--spacing-02, 8px);
}


/* ==========================================================================
   TEXT STYLES (MOBILE / CARD)
   ========================================================================== */

.banner-block__text {
	padding-bottom: var(--spacing-02, 8px);
}

.banner-block__text--overline {
	font: var(--text-banner-card-overline);
	letter-spacing: var(--letter-spacing-banner-card-overline);
}

.banner-block__text--headline {
	font: var(--text-banner-card-headline);
	letter-spacing: var(--letter-spacing-banner-card-headline);
}

.banner-block__text--body {
	font: var(--text-banner-card-body);
	letter-spacing: var(--letter-spacing-banner-card-body);
}

.banner-block__text--disclaimer {
	font: var(--text-banner-card-disclaimer);
	letter-spacing: var(--letter-spacing-banner-card-disclaimer);
}

.banner-block__text--cta {
	width: fit-content;
	font: var(--text-banner-card-CTA);
	letter-spacing: var(--letter-spacing-banner-card-CTA);
	text-decoration: var(--text-decoration-underline);
	padding-bottom: var(--spacing-04, 16px);
}

.banner-block__text--cta:hover {
	text-decoration: var(--text-decoration-none);
}


/* ==========================================================================
	 MEDIA QUERIES (DESKTOP / OVERLAY)
   ========================================================================== */

@media (min-width: 768px) {

	/* --- Desktop Grid Container Layout --- */
	.banner-block.banner-block--grid {
		/* display: flex; */
		/* flex-direction: row; */
		/* flex-wrap: wrap; */
	}

	.banner-block__container--grid {
		height: 100%;
	}
	
	.banner-block__wrapper {
		flex: 1 0 50%;
		max-width: 50%;
	}

	.banner-block__container--single {
		border: none;
	}
	
	/* --- Desktop Container Aspect Ratios (Grid Image) (image) --- */
	.banner-block__container--grid.banner-block__container--small .banner-block__media { aspect-ratio: var(--banner-grid-sm-02); }
	.banner-block__container--grid.banner-block__container--medium .banner-block__media { aspect-ratio: var(--banner-grid-md-02); }
	.banner-block__container--grid.banner-block__container--large .banner-block__media { aspect-ratio: var(--banner-grid-lg-02); }
	.banner-block__container--grid.banner-block__container--hero .banner-block__media { aspect-ratio: var(--banner-grid-hero-02); }

	/* --- Single Image Layout --- */
	.banner-block__container--single { position: relative; }

	/* --- Desktop Container Aspect Ratios (Single Image) (Container) --- */
	.banner-block__container--single.banner-block__container--accent { aspect-ratio: var(--banner-accent-overlay); }
	.banner-block__container--single.banner-block__container--small { aspect-ratio: var(--banner-single-sm-overlay); }
	.banner-block__container--single.banner-block__container--medium { aspect-ratio: var(--banner-single-md-overlay); }
	.banner-block__container--single.banner-block__container--large { aspect-ratio: var(--banner-single-lg-overlay); }
	.banner-block__container--single.banner-block__container--hero { aspect-ratio: var(--banner-single-hero-overlay); }

	/* --- Overlay Box Positions (single image) --- */
	.banner-block__container--single .banner-block__info-wrapper {
		position: absolute;
		inset: 0;
		display: flex;
		padding: var(--spacing-6, 24px);
	}

	.banner-block__container--single .banner-block__info-wrapper--middleleft {
		padding: var(--spacing-10, 40px);
		justify-content: flex-start;
		align-items: center;
	}

	.banner-block__container--single .banner-block__info-wrapper--middleright {
		padding: var(--spacing-10, 40px);
		justify-content: flex-end;
		align-items: center;
	}

	.banner-block__container--single .banner-block__info-wrapper--bottomleft {
		justify-content: flex-start;
		align-items: flex-end;
	}
	
	/* --- Overlay Block (single image) --- */
	.banner-block__container--single .banner-block__info {
		/* display: flex; */
		/* width: fit-content; */
		max-height: 100%;
		height: auto;
		max-width: 40%;
		border-radius: 8px;
		backdrop-filter: blur(5px);
	}

	.banner-block__container--single .banner-block__info--onlight { background: var(--color-surface-banner-overlay-on-light, rgba(255, 255, 255, 0.30)); }
	.banner-block__container--single .banner-block__info--ondark { background: var(--color-surface-banner-overlay-on-dark, rgba(0, 0, 0, 0.30)); }

	/* --- Overlay Text Styles --- */
	/* Text Color */
	.banner-block__container--single .banner-block__info--onlight .banner-block__text {
		color: var(--color-text-banner-on-light);
	}

	.banner-block__container--single .banner-block__info--ondark .banner-block__text {
		color: var(--color-text-banner-on-dark);
	}

	/* Text Font */
	.banner-block__container--single .banner-block__text--overline {
		font: var(--text-banner-overlay-overline);
		letter-spacing: var(--letter-spacing-banner-overlay-overline);
	}

	.banner-block__container--single .banner-block__text--headline {
		font: var(--text-banner-overlay-headline);
		letter-spacing: var(--letter-spacing-banner-overlay-headline);
	}

	.banner-block__container--single .banner-block__text--body {
		font: var(--text-banner-overlay-body);
		letter-spacing: var(--letter-spacing-banner-overlay-body);
	}

	.banner-block__container--single .banner-block__text--disclaimer {
		font: var(--text-banner-overlay-disclaimer);
		letter-spacing: var(--letter-spacing-banner-overlay-disclaimer);
	}

	.banner-block__container--single .banner-block__text--cta {
		font: var(--text-banner-card-CTA);
		letter-spacing: var(--letter-spacing-banner-overlay-CTA);
	}

	/* Middle-right link(CTA) positioning */
	.banner-block__container--single .banner-block__info-wrapper--middleright .banner-block__text--cta {
		text-align: end;
	}

	/* ----  Hover ---- */
	.banner-block__container--grid:hover{
		color: black;
	}
}