/**
 * Front Page — Homepage Layout styles
 *
 * Styles for the ACF Flexible Content rows rendered by
 * template-parts/layouts/layout-promo_banner.php and layout-product_view.php.
 *
 * Nude-style: full-bleed banners stacked edge-to-edge, 4-column product grids.
 *
 * @package TRISESTRI
 * @version 1.0.0
 */

/* ==========================================================================
   Front-page shell — break out of Astra's content container
   ==========================================================================
   The functions.php filter forces Astra's "page-builder" content layout on
   is_front_page(), which removes .ast-container. The rules below cover any
   remaining parent paddings/max-widths (Astra header offsets, Woo archive CSS,
   third-party addons, etc.) so every row can be truly edge-to-edge.
   ========================================================================== */

body.trisestri-front-page-full-width #page,
body.trisestri-front-page-full-width #content,
body.trisestri-front-page-full-width .site-content,
body.trisestri-front-page-full-width .site-content > .ast-container,
body.trisestri-front-page-full-width .ast-container,
body.trisestri-front-page-full-width .entry-content,
body.trisestri-front-page-full-width .entry-content > .ast-container {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.trisestri-front-page-full-width .trisestri-front-page,
.trisestri-front-page {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Promo Banner — Nude-style sticky scroll
   ==========================================================================
   The text block stays pinned near the bottom of the viewport while the
   background media scrolls past behind it.  Near the end of the banner, the
   banner's bottom edge "drags" the text upward and out of view.

   Mechanics (mirrors nude-project.com exactly):
   - Banner is TALLER than the viewport (min-height 150vh).  This gives the
     sticky element ~50vh of "stuck" travel distance before the banner
     bottom catches up to it.
   - Media is absolute + object-fit: cover, filling the banner.
   - Content is in flex flow pushed to the bottom of the banner via
     `margin-top: auto`.
   - Content uses `position: sticky; bottom: <margin>` — element's bottom
     edge stays <margin> from viewport bottom whenever its natural position
     would be below that line (i.e. while the banner's bottom is still far
     enough below the viewport bottom).

   CRITICAL: no overflow (hidden / clip / auto / scroll) on the banner or
   any ancestor. Any of those creates a scroll container and kills sticky.
   The media can't overflow anyway — it's absolute + inset:0 + object-fit:
   cover, so it fits the banner exactly.
   ========================================================================== */

.promo-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 150vh;         /* must be > 100vh for sticky to have travel */
	margin: 0;
	padding-bottom: clamp(2rem, 4vw, 4rem);  /* breathing room below content before banner ends */
	background: #000;
	isolation: isolate;
}

/* ---- Media: pinned to fill the entire banner ---- */

.promo-banner__media {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* ---- Content: stays near viewport bottom while banner scrolls past ---- */

.promo-banner__content {
	position: sticky;
	bottom: clamp(2rem, 4vw, 4rem);    /* distance from viewport bottom when stuck */
	margin-top: auto;                   /* push to bottom of flex column (natural position) */
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	max-width: 42rem;
	padding: 0 clamp(1.25rem, 4vw, 3.5rem);
	text-align: left;
	color: #fff;
	pointer-events: none;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.promo-banner__content > * {
	pointer-events: auto;
}

/* Disable sticky on the first promo banner's content
   (it sits behind the hero logo, sticky would conflict) */
.trisestri-front-page > .promo-banner:first-child > .promo-banner__content {
	position: relative;
}


.promo-banner__eyebrow {
	margin: 0;
	font-size: clamp(0.7rem, 0.8vw, 0.85rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	color: inherit;
	opacity: 0.9;
}

.promo-banner__title {
	margin: 0;
	font-size: clamp(1.75rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: inherit;
}

.promo-banner__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.65rem;
	margin: 0.35rem 0 0;
	padding: 0;
	list-style: none;
}

.promo-banner__button-item {
	margin: 0;
	padding: 0;
}

/* Ghost pill button: transparent bg, white elliptical border, white text.
   Hover: solid white bg, primary-brown text. */
.promo-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.9rem 1.6rem 0.7rem;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: #fff;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.promo-banner__button:hover,
.promo-banner__button:focus-visible {
	background: #fff;
	color: var(--trisestri-primary);
	outline: none;
	transform: translateY(-1px);
}

/* ==========================================================================
   Product View — 4-column grid
   ========================================================================== */

.product-view {
	display: block;
	width: 100%;
    padding: clamp(1rem, 2.5vw, 4rem) clamp(0.5rem, 1.5vw, 1rem);
}

.product-view__title {
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
	font-size: clamp(1.25rem, 2.5vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: left;
	color: var(--trisestri-primary);
}

/* Override WooCommerce/Astra default .products styles for a clean 4-col grid. */
ul.products.product-view__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.products.product-view__grid > li {
	width: auto !important;  /* beat WooCommerce's inline float layout */
	float: none !important;
	margin: 0 !important;
	padding: 0;
	clear: none !important;
}

/* Mirror the positional rules that catalog-grid.css applies on shop/related
   loops, so overlay UI (wishlist heart, sale badge, preview toggle, mobile
   quick-add button) positions correctly inside front-page cards. */
ul.products.product-view__grid li.product .astra-shop-thumbnail-wrap,
ul.products.product-view__grid li.product .trisestri-catalog-card__media {
	position: relative;
	display: block;
	overflow: hidden;
}

ul.products.product-view__grid li.product .trisestri-catalog-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

ul.products.product-view__grid li.product .trisestri-catalog-card__details {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	ul.products.product-view__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	ul.products.product-view__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.promo-banner {
		min-height: 130vh;
	}

	.promo-banner__content {
		align-items: center;
		text-align: center;
	}

	.promo-banner__buttons {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	ul.products.product-view__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.promo-banner {
		min-height: 115vh;
	}

	.promo-banner__button {
		font-size: 0.85rem;
		padding: 0.6rem 1.25rem;
	}
}

/* ==========================================================================
   Accessibility — honor reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.promo-banner__media--video {
		/* Browsers generally still autoplay muted video, but we pause the
		   impression via animation-safe fallbacks in user CSS/JS if needed. */
	}

	.promo-banner__button {
		transition: none;
	}
}