/* =============================================================================
   Layered Pod Grid — Component Styles
   Patch 6.6.2 | v1.0.2 | Celeste Theme v7.0

   Desktop (min-width: 768px):
     Fractional CSS Grid. All nth-child grid-column rules AND grid-row:1 lock
     are scoped inside @media (min-width: 768px). This prevents the high-
     specificity nth-child selectors (0,4,0) from overriding the mobile CSS
     var rules (0,1,0) at viewport widths ≤767px.

   Mobile (max-width: 767px):
     3-row (2-col) or 5-row (3-col) matrix. All pod placement driven entirely
     by PHP-computed inline CSS variables. Zero nth-child selectors.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. BASE CONTAINER
   ----------------------------------------------------------------------------- */

.celeste-layered-pod-grid {
	display:  grid;
	position: relative;
	width:    100%;
}

/* -----------------------------------------------------------------------------
   2. POD BASE — no grid placement here; applies at all breakpoints
   Background properties are NOT set here — controlled per-pod via inline style.
   ----------------------------------------------------------------------------- */

.clpg-pod {
	position:  relative;
	z-index:   var(--pod-z, 1);
	min-width: 0;
}

/* -----------------------------------------------------------------------------
   3. DESKTOP RULES — scoped to min-width: 768px
   CRITICAL: nth-child selectors here have specificity 0,4,0. Scoping them
   inside a min-width query ensures they never compete with mobile var rules.
   ----------------------------------------------------------------------------- */

@media (min-width: 768px) {

	/* grid-row:1 lock — prevents diagonal auto-placement at desktop widths */
	.clpg-pod {
		grid-row: 1;
	}

	/* 3a. 2-column: 1fr | auto(--overlap-1-2,100px) | 1fr
	   Lines: 1 | 2 | 3 | 4 */
	.celeste-layered-pod-grid[data-columns="2"] {
		grid-template-columns: 1fr var(--overlap-1-2, 100px) 1fr;
	}

	/* Pod 1: col-1 + overlap-zone */
	.celeste-layered-pod-grid[data-columns="2"] > .clpg-pod:nth-child(1) {
		grid-column: 1 / 3;
	}

	/* Pod 2: overlap-zone + col-3 */
	.celeste-layered-pod-grid[data-columns="2"] > .clpg-pod:nth-child(2) {
		grid-column: 2 / 4;
	}

	/* 3b. 3-column: 1fr | auto(--overlap-1-2,100px) | 1fr | auto(--overlap-2-3,100px) | 1fr
	   Lines: 1 | 2 | 3 | 4 | 5 | 6 */
	.celeste-layered-pod-grid[data-columns="3"] {
		grid-template-columns: 1fr var(--overlap-1-2, 100px) 1fr var(--overlap-2-3, 100px) 1fr;
	}

	/* Pod 1: col-1 + overlap-zone-1-2 */
	.celeste-layered-pod-grid[data-columns="3"] > .clpg-pod:nth-child(1) {
		grid-column: 1 / 3;
	}

	/* Pod 2: overlap-zone-1-2 + col-3 + overlap-zone-2-3 */
	.celeste-layered-pod-grid[data-columns="3"] > .clpg-pod:nth-child(2) {
		grid-column: 2 / 5;
	}

	/* Pod 3: overlap-zone-2-3 + col-5 */
	.celeste-layered-pod-grid[data-columns="3"] > .clpg-pod:nth-child(3) {
		grid-column: 4 / 6;
	}

} /* end @media min-width: 768px */

/* -----------------------------------------------------------------------------
   4. DESKTOP HEIGHT PRESETS — class-based, mirrors vc-columns.php tokens
   ----------------------------------------------------------------------------- */

.clpg-pod.min-h-100vh { min-height: 100vh; }
.clpg-pod.min-h-75vh  { min-height: 75vh;  }
.clpg-pod.min-h-50vh  { min-height: 50vh;  }
.clpg-pod.min-h-25vh  { min-height: 25vh;  }

/* -----------------------------------------------------------------------------
   5. MOBILE — max-width: 767px
   nth-child desktop rules do NOT apply here (scoped to min-width: 768px above).
   Pod placement is driven entirely by PHP-computed inline CSS custom properties.
   Zero nth-child selectors in this block.
   ----------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* 5a. 2-col parent: 3-row matrix
	   Col tracks: var(--mob-inset,32px) | 1fr | var(--mob-inset,32px)
	   Lines: 1 | 2 | 3 | 4
	   Row tracks: auto | var(--mob-overlap-1-2,80px) | auto
	   Lines: 1 | 2 | 3 | 4  */
	.celeste-layered-pod-grid[data-columns="2"] {
		grid-template-columns: var(--mob-inset, 32px) 1fr var(--mob-inset, 32px);
		grid-template-rows:    auto var(--mob-overlap-1-2, 80px) auto;
	}

	/* 5b. 3-col parent: 5-row matrix
	   Col tracks: var(--mob-inset,32px) | 1fr | var(--mob-inset,32px)
	   Lines: 1 | 2 | 3 | 4
	   Row tracks: auto | var(--mob-overlap-1-2,80px) | auto | var(--mob-overlap-2-3,80px) | auto
	   Lines: 1 | 2 | 3 | 4 | 5 | 6  */
	.celeste-layered-pod-grid[data-columns="3"] {
		grid-template-columns: var(--mob-inset, 32px) 1fr var(--mob-inset, 32px);
		grid-template-rows:    auto var(--mob-overlap-1-2, 80px) auto var(--mob-overlap-2-3, 80px) auto;
	}

	/* 5c. Pod placement — PHP-computed CSS vars (parent-driven)
	   --pod-mob-row-start / --pod-mob-row-end: row grid line numbers
	   --pod-mob-col-start / --pod-mob-col-end: column grid line numbers
	   --pod-z: z-index (retained on mobile for stepped overlap visual) */
	.clpg-pod {
		grid-row:    var(--pod-mob-row-start) / var(--pod-mob-row-end);
		grid-column: var(--pod-mob-col-start) / var(--pod-mob-col-end);
		z-index:     var(--pod-z, 1);
		min-width:   0;
	}

	/* 5d. Mobile height preset utilities */
	.min-h-mob-auto  { min-height: auto  !important; }
	.min-h-mob-100vh { min-height: 100vh !important; }
	.min-h-mob-75vh  { min-height: 75vh  !important; }
	.min-h-mob-50vh  { min-height: 50vh  !important; }
	.min-h-mob-25vh  { min-height: 25vh  !important; }

	/* 5e. Visibility utility */
	.hide-on-mobile {
		display: none !important;
	}

	/* 5f. True viewport breakout — background pod in bg_full mode (Option A)
	   left:50% resolves to 50% of the grid container width.
	   translateX(-50%) resolves to -50% of the element's own width (100vw).
	   For a centred container: container_offset + 0.5×container_w − 0.5×vw = 0.
	   Left edge lands at viewport left regardless of parent padding.
	   Requires: .site-main { overflow-x: hidden } on mobile (active in this theme).
	   Note: transform creates a new stacking context; z-index on sibling pods
	   (foreground z > background z) still renders foreground on top correctly. */
	.clpg-pod--mob-full-bleed {
		width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
	}

} /* end @media max-width: 767px */