/* =====================================================================
   Brina Marketplace — Homepage HERO, base/desktop (>= 1201px)
   Loaded on the front page only (after brina-home-tablet.css).
   ---------------------------------------------------------------------
   TABLET PARITY (owner reset, 2026-10-04). The approved TABLET hero in
   brina-home-tablet.css (768–1200.98px; landscape values 992–1200.98px)
   is the single source of truth. This block re-applies the SAME rule
   expressions (same clamp()/percentages/insets/colours) at >= 1201px, so
   desktop is the tablet hero continued on a larger canvas — at 1201+ the
   tablet clamps sit at their maxima, exactly as they do at 1200px.
   brina-home-tablet.css is read-only for this work and is not edited.

   Desktop-only rules kept (tablet has no equivalent need):
     • #brxe-sslspi spans the container (tablet does the same).
     • Banner width: page content width (owner-approved, 20px gutters,
       max 1640px) via the hero section as size container. Tablet's
       banner fills its container with 24px gutters.
     • #brxe-ddiycj hidden (the phone layout still uses the slider;
       assets/js/brina-home-hero.js pauses it while hidden).
     • Hero → trust panel gap (owner, 2026-10-04). Tablet hides the
       trust panel, so it has no equivalent.

   Bricks (page 32): section #brxe-rrmeoe › container #brxe-xyleuf ›
   column #brxe-sslspi › banner #brxe-kfsgpp ( text #brxe-pbqaby |
   visual #brxe-uvikcb › slider #brxe-ddiycj ) + trust panel #brxe-tmqxli.

   Every rule sits inside @media (min-width: 1201px); tablet and phone are
   untouched by construction. :not(#brina-desk) lifts specificity above
   the Bricks element styles (same role as the tablet file's
   :not(#brina-tab)).
   ===================================================================== */

@media (min-width: 1201px) {

	/* ---- Desktop-only structure ---------------------------------------- */

	/* The column took its width from the slider's intrinsic size; with the
	   slider retired it must span the container explicitly. */
	body.home #brxe-sslspi:not(#brina-desk) {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}

	/* Width reference for the banner (full-width hero section). */
	body.home #brxe-rrmeoe:not(#brina-desk) {
		container-type: inline-size;
	}

	/* ---- Hero surface (tablet: HERO V2 + HERO UNIFIED + HEIGHT blocks) - */
	body.home #brxe-kfsgpp:not(#brina-desk) {
		--hero-text: 48%;                               /* tablet 992–1200 */
		--hero-gold: #c9a45c;
		position: relative;
		isolation: isolate;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		width: 100%;
		/* Desktop-only: page content width (owner-approved). Without
		   container units both lines are dropped → 100%. */
		width: min(100cqw - 40px, 1640px);
		max-width: none;
		margin-inline: calc((100% - min(100cqw - 40px, 1640px)) / 2);
		/* Hero → trust panel gap. The banner and #brxe-tmqxli (Bricks
		   margin-top 14px) are block siblings, so the margins collapse:
		   the visible gap is max(28, 14) = 28px (was 14px). */
		margin-bottom: 28px;
		height: auto;
		min-height: clamp(412px, 19.5vw + 262px, 492px); /* tablet */
		overflow: hidden;
		border: 1px solid rgba(7, 26, 43, 0.85);
		border-radius: 20px;
		background-color: #071a2b;
		background-image: linear-gradient(165deg, #0c2034 0%, #071a2b 70%);
		box-shadow:
			0 1px 2px rgba(7, 26, 43, 0.12),
			0 24px 44px -28px rgba(7, 26, 43, 0.55);
	}

	body.home #brxe-kfsgpp:not(#brina-desk)::before {
		content: none;
	}

	/* Gold accent (tablet: HERO V2 + VERTICAL SPACING POLISH) */
	body.home #brxe-kfsgpp:not(#brina-desk)::after {
		content: "";
		position: absolute;
		z-index: 2;
		top: 21%;
		bottom: 21%;
		left: clamp(18px, 2.2vw, 24px);
		width: 2px;
		border-radius: 2px;
		background: linear-gradient(180deg, rgba(201, 164, 92, 0) 0%, var(--hero-gold) 18%, var(--hero-gold) 82%, rgba(201, 164, 92, 0) 100%);
		pointer-events: none;
	}

	/* ---- Text zone (tablet: HERO V2 + LEFT CONTENT SCALE) -------------- */
	body.home #brxe-pbqaby:not(#brina-desk) {
		position: relative;
		z-index: 1;
		flex: 0 0 var(--hero-text);
		box-sizing: border-box;
		width: var(--hero-text);
		max-width: var(--hero-text);
		min-width: 0;
		height: auto;
		align-self: stretch;
		flex-direction: column;
		justify-content: center;
		gap: 20px;                                       /* tablet 992–1200 */
		padding: clamp(28px, 3.6vw, 44px) clamp(12px, 1.6vw, 20px) clamp(28px, 3.6vw, 44px) clamp(38px, 4.4vw, 48px);
		background: transparent;
	}

	body.home #brxe-voiraq:not(#brina-desk) {
		display: block;
		align-self: flex-start;
		margin: 0 0 10px;                                /* tablet spacing polish */
		padding: 0;
		background: transparent;
		border-radius: 0;
		color: #c9d3ea;
		font-size: clamp(13px, 0.45vw + 9.5px, 14.5px);
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	body.home #brxe-voiraq:not(#brina-desk)::before {
		content: none;
	}

	body.home #brxe-qeqcqc:not(#brina-desk) {
		flex-direction: column;
		gap: 0;
		max-width: 100%;
		min-width: 0;
	}

	body.home #brxe-xestfq:not(#brina-desk),
	body.home #brxe-vgrgwt:not(#brina-desk) {
		max-width: 100%;
		margin: 0;
		padding: 0;
		font-size: clamp(36px, 3.37vw + 2.6px, 42px);   /* tablet 992–1200 */
		font-weight: 800;
		line-height: 1.12;
		letter-spacing: -0.015em;
		overflow-wrap: normal;
		text-wrap: balance;
	}

	body.home #brxe-xestfq:not(#brina-desk) {
		color: #f4f6fa;
	}

	body.home #brxe-vgrgwt:not(#brina-desk) {
		color: #b3c1ff;
	}

	body.home #brxe-wcxmsq:not(#brina-desk) {
		max-width: 34ch;
		margin: 24px 0 0;                                /* tablet 992–1200 */
		padding: 0;
		color: #c2cad9;
		font-size: clamp(16px, 0.45vw + 12.5px, 17px);
		line-height: 1.55;
		font-weight: 500;
	}

	body.home #brxe-hiqzhr:not(#brina-desk) {
		align-self: flex-start;
		min-height: 52px;                                /* tablet 992–1200 */
		margin-top: 30px;
		padding: 0 28px;
		border-radius: 10px;
		font-size: 16px;
		box-shadow: 0 10px 22px -12px rgba(91, 61, 245, 0.85);
		transition: background-color 0.15s ease, box-shadow 0.15s ease;
	}

	body.home #brxe-hiqzhr:not(#brina-desk):hover {
		background-color: #6a50ff;
		box-shadow: 0 12px 24px -12px rgba(106, 80, 255, 0.9);
	}

	body.home #brxe-hiqzhr:not(#brina-desk):focus-visible {
		outline: 2px solid #f4f6fa;
		outline-offset: 3px;
	}

	/* ---- Right zone (tablet: HERO V2 + UNIFIED + RIGHT-SIDE ATMOSPHERE) - */
	body.home #brxe-uvikcb:not(#brina-desk) {
		position: relative;
		z-index: 0;
		flex: 1 1 0;
		min-width: 0;
		height: auto;
		align-self: stretch;
		padding: 0;
		background-color: transparent;
		background-image:
			radial-gradient(ellipse 60% 66% at 62% 46%, rgba(92, 110, 222, 0.30) 0%, rgba(92, 110, 222, 0.12) 46%, rgba(92, 110, 222, 0) 74%),
			radial-gradient(ellipse 78% 92% at 100% 100%, rgba(122, 92, 232, 0.34) 0%, rgba(122, 92, 232, 0.15) 42%, rgba(122, 92, 232, 0) 76%),
			radial-gradient(ellipse 44% 46% at 98% 2%, rgba(120, 150, 255, 0.12) 0%, rgba(120, 150, 255, 0) 70%);
	}

	/* White mist (tablet values) */
	body.home #brxe-uvikcb:not(#brina-desk)::before {
		content: "";
		position: absolute;
		z-index: 0;
		inset: 6% 2% 0 14%;
		background-image:
			radial-gradient(ellipse 46% 40% at 50% 42%, rgba(236, 240, 255, 0.075) 0%, rgba(236, 240, 255, 0.03) 50%, rgba(236, 240, 255, 0) 100%),
			radial-gradient(ellipse 42% 34% at 78% 78%, rgba(244, 240, 255, 0.07) 0%, rgba(244, 240, 255, 0.025) 55%, rgba(244, 240, 255, 0) 100%),
			radial-gradient(ellipse 30% 22% at 30% 70%, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 100%);
		filter: blur(14px);
		pointer-events: none;
	}

	/* Owner fashion cutout (tablet: HERO FASHION IMAGE, 992–1200 sources) */
	body.home #brxe-uvikcb:not(#brina-desk)::after {
		content: "";
		position: absolute;
		z-index: 0;
		top: 8%;
		right: clamp(14px, 2.4vw, 28px);
		bottom: 8%;
		left: clamp(6px, 1vw, 12px);
		background-image: url("/wp-content/uploads/2026/10/Hero-image-1-1024x683.webp");
		background-image: image-set(
			url("/wp-content/uploads/2026/10/Hero-image-1-1024x683.webp") 1x,
			url("/wp-content/uploads/2026/10/Hero-image-1.webp") 2x
		);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 50% 56%;
		filter: drop-shadow(0 14px 22px rgba(2, 8, 18, 0.35));
		pointer-events: none;
	}

	/* ---- Retired desktop slider card (kept in markup for phone) -------- */
	body.home #brxe-ddiycj:not(#brina-desk) {
		display: none;
	}
}