/* =====================================================================
   Homepage Banners (GS) – front.css
   ===================================================================== */

/* --- Outer wrapper -------------------------------------------------- */
/*
  Force full width regardless of parent block editor flex/grid settings.
  display:block prevents inheriting flex/inline-flex from a parent.
*/
.gs-hb-wrap {
	box-sizing: border-box;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	align-self: stretch !important;
	min-width: 0 !important;
	padding-left: var(--gs-container-pad);
	padding-right: var(--gs-container-pad);
}

/* --- Grid inner ----------------------------------------------------- */
.gs-hb-wrap .gs-hb-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--gs-container-max);
	margin-left: auto;
	margin-right: auto;
	display: grid;
	gap: var(--gs-gap);
}

.gs-hb-wrap[data-align="left"]  .gs-hb-inner { margin-left: 0; margin-right: auto; }
.gs-hb-wrap[data-align="right"] .gs-hb-inner { margin-left: auto; margin-right: 0; }

/* two-col: align-items stretch → grid uses tallest item to set row height,
   then stretches the shorter item to match → both banners identical height */
.gs-hb-wrap[data-layout="two-col"] .gs-hb-inner {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

/* stacked: each banner is its own natural height */
.gs-hb-wrap[data-layout="stacked"] .gs-hb-inner {
	grid-template-columns: 1fr;
	align-items: start;
}

/* --- Banner slot ---------------------------------------------------- */
.gs-hb-inner > .gs-hb-item {
	min-width: 0;
}

/*
  aspect-ratio from PHP attachment metadata (--gs-ar-w / --gs-ar-h) gives
  each item its INTRINSIC HEIGHT for the grid row-sizing algorithm.
  In two-col the grid picks the taller of the two, then stretch fills both.
  In stacked each item simply takes its own natural height.
*/
.gs-hb-item {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	width: var(--gs-item-w-desktop, var(--gs-w-desktop, 100%));
	max-width: 100%;
	max-height: var(--gs-item-max-h-desktop, var(--gs-max-h-desktop, none));
	aspect-ratio: var(--gs-ar-w, 16) / var(--gs-ar-h, 9);
}

.gs-hb-wrap[data-align="left"]   .gs-hb-item { justify-self: start; }
.gs-hb-wrap[data-align="center"] .gs-hb-item { justify-self: center; }
.gs-hb-wrap[data-align="right"]  .gs-hb-item { justify-self: end; }

/* --- Media frame ---------------------------------------------------- */
/*
  Fills its parent (.gs-hb-item) completely via absolute positioning.
  This works whether the item is at its intrinsic aspect-ratio height
  (stacked / taller item in two-col) or has been stretched by the grid
  (shorter item in two-col → images fill with object-fit:cover).
*/
.gs-hb-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* --- Link overlay --------------------------------------------------- */
.gs-hb-link {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* --- Images ---------------------------------------------------------
   Many themes force: img { max-width:100%; height:auto !important; }
   which breaks object-fit. Scoped !important overrides apply only here.
   ------------------------------------------------------------------- */
.gs-hb-wrap .gs-hb-media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center center;
}

.gs-hb-item[data-img-align="left"]   .gs-hb-media img { object-position: left center !important; }
.gs-hb-item[data-img-align="center"] .gs-hb-media img { object-position: center center !important; }
.gs-hb-item[data-img-align="right"]  .gs-hb-media img { object-position: right center !important; }

/* --- Button --------------------------------------------------------- */
.gs-hb-btn {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background: var(--gs-btn-bg);
	color: var(--gs-btn-text);
	font-size: var(--gs-btn-font);
	padding: var(--gs-btn-py) var(--gs-btn-px);
	border-radius: var(--gs-btn-radius);
	border: var(--gs-btn-border) solid var(--gs-btn-border-color);
	line-height: 1.2;
	max-width: calc(100% - 32px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gs-hb-btn:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* --- Tablet landscape (769 – 1024 px) ------------------------------ */
@media (max-width: 1024px) and (min-width: 769px) {
	.gs-hb-wrap[data-layout="two-col"] .gs-hb-inner {
		gap: min(var(--gs-gap), 12px);
	}
}

/* --- Mobile / tablet portrait (≤ 768 px) --------------------------- */
@media (max-width: 768px) {

	/* two-col collapses to one column → same as stacked */
	.gs-hb-wrap[data-layout="two-col"] .gs-hb-inner {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.gs-hb-item {
		width: var(--gs-item-w-mobile, var(--gs-w-mobile, 100%));
		max-height: var(--gs-item-max-h-mobile, var(--gs-max-h-mobile, none));
	}

	.gs-hb-btn {
		bottom: 12px;
	}
}