/*
 * Reusable layout primitives.
 *
 * Generic containers/grids/structural positioning meant to be shared
 * across page types — visual/typographic treatment lives in
 * components.css/pages.css instead.
 *
 * @package IglooRack
 */

.igloorack-container {
	max-width: var( --container-max );
	margin-inline: auto;
	padding-inline: var( --space-6 );
}

@media ( max-width: 768px ) {
	.igloorack-container {
		padding-inline: var( --space-4 );
	}
}

.igloorack-stack {
	display: flex;
	flex-direction: column;
	gap: var( --space-8 );
}

.igloorack-product__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-8 );
	align-items: start;
}

@media ( min-width: 1024px ) {
	.igloorack-product__layout {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}

.igloorack-catalog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-6 );
	list-style: none;
	margin: 0;
	padding: 0;
}

@media ( min-width: 640px ) {
	.igloorack-catalog-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.igloorack-catalog-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.igloorack-section {
	padding-block: var( --space-16 );
}

/* Site header */

.igloorack-site-header {
	position: sticky;
	top: 0;
	z-index: var( --z-header );
	background: var( --color-jet );
	transition: background-color 0.2s ease;
}

/* WordPress admin bar offset — same breakpoints WP core uses for #wpadminbar itself. */
body.admin-bar .igloorack-site-header {
	top: 32px;
}

@media ( max-width: 782px ) {
	body.admin-bar .igloorack-site-header {
		top: 46px;
	}
}

/* Home page only: the header starts transparent over the hero slider and never
   reserves document-flow space (position: fixed at all times, both transparent and
   solid states), so there is no layout jump when it goes solid — only a background
   transition. main.igloorack-home reserves --header-fixed-height of padding to
   compensate; the hero slider cancels that same amount to sit full-bleed behind it.
   See tokens.css for --header-fixed-height. */
.igloorack-site-header--overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient( to bottom, rgba( 0, 0, 0, 0.55 ), rgba( 0, 0, 0, 0 ) );
}

body.admin-bar .igloorack-site-header--overlay {
	top: 32px;
}

@media ( max-width: 782px ) {
	body.admin-bar .igloorack-site-header--overlay {
		top: 46px;
	}
}

.igloorack-site-header--overlay.is-solid {
	background: var( --color-jet );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.igloorack-site-header--overlay:not( .is-solid ):hover {
		background: var( --color-jet );
	}
}

.igloorack-home {
	padding-top: var( --header-fixed-height );
}

.igloorack-tech-strip {
	background: var( --color-jet );
}

.igloorack-site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-6 );
	/* Top padding halved (16 → 8px): together with the tech strip's 4px
	   bottom padding the strip-to-header gap goes from ~20px to ~12px.
	   --header-fixed-height (tokens.css) shrinks by the same 8px. */
	padding-block: var( --space-2 ) var( --space-4 );
}

.igloorack-nav-primary {
	display: none;
	flex: 1 1 auto;
	justify-content: center;
}

@media ( min-width: 1024px ) {
	.igloorack-nav-primary {
		display: flex;
	}
}

.igloorack-site-header__actions {
	display: flex;
	align-items: center;
	gap: var( --space-4 );
}

.igloorack-site-header__cta {
	display: none;
}

@media ( min-width: 640px ) {
	.igloorack-site-header__cta {
		display: inline-flex;
	}
}

.igloorack-nav-mobile__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media ( min-width: 1024px ) {
	.igloorack-nav-mobile__toggle {
		display: none;
	}
}

.igloorack-nav-mobile {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc( 100vh - 100% );
	overflow-y: auto;
}

@media ( min-width: 1024px ) {
	.igloorack-nav-mobile {
		display: none !important;
	}
}

/* Nav items + dropdown panels (desktop floating panel / mobile accordion) */

.igloorack-nav-primary__list,
.igloorack-nav-mobile__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.igloorack-nav-primary__list {
	display: flex;
	align-items: stretch;
	gap: var( --space-2 );
}

.igloorack-nav-item {
	position: relative;
	display: flex;
	align-items: center;
}

.igloorack-nav-mobile__list > .igloorack-nav-item {
	display: block;
}

.igloorack-nav-item__link,
.igloorack-nav-item__toggle {
	display: inline-flex;
	align-items: center;
	gap: var( --space-1 );
	padding: var( --space-3 ) var( --space-3 );
}

.igloorack-nav-mobile__list .igloorack-nav-item__link,
.igloorack-nav-mobile__list .igloorack-nav-item__toggle {
	width: 100%;
	padding-inline: 0;
}

.igloorack-nav-item__toggle {
	padding-inline: var( --space-2 );
}

/* Desktop: floating dropdown panel */
@media ( min-width: 1024px ) {
	.igloorack-dropdown-panel {
		position: absolute;
		top: 100%;
		inset-inline-start: 0;
		z-index: var( --z-dropdown );
		min-width: 260px;
	}

	/* Every mega menu (Products/Software/Company/Career/Contact) needs to
	   span most of the header's content width regardless of where its
	   toggle sits in the nav row — giving its .igloorack-nav-item a static
	   position moves the mega panel's absolute-positioning containing
	   block up to .igloorack-site-header__inner (already position:relative),
	   so left:0/right:0 there naturally aligns with the header's own
	   content edges (already the site container) instead of the
	   individual nav item's position. */
	.igloorack-nav-item--mega {
		position: static;
	}

	/* One shared height for every mega menu — set once here and never
	   recalculated per group, so Products/Software/Company/Career/Contact
	   always open at exactly the same visible height regardless of how
	   much content each one has. clamp() keeps it responsive to viewport
	   height while staying within a "generous dropdown, not a modal"
	   range; 460px is the ceiling so it never grows large enough to feel
	   like a second page. A rail with more entries than the height fits
	   (Company's 9 at the 380px floor, or many Products categories)
	   scrolls on its own — see .igloorack-mega-menu__rail below; the
	   panel's own overflow-y is only a last-resort safeguard. */
	:root {
		--mega-menu-panel-height: clamp( 380px, 46vh, 460px );
	}

	.igloorack-mega-menu {
		left: 0;
		right: 0;
		min-width: 0;
		width: auto;
		height: var( --mega-menu-panel-height );
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
	}

	.igloorack-mega-menu__inner {
		position: relative;
		display: grid;
		grid-template-columns: 260px minmax( 0, 1fr );
		/* Explicit row track, not left implicit/auto: with only
		   grid-template-COLUMNS set, the single row .rail and .content
		   share would otherwise size to fit its TALLEST content — an
		   unconstrained preview image growing .content taller than the
		   panel would grow the whole row, moving .rail's box (same row)
		   with it even though .rail's own content never changed. Pinning
		   the row to the container's own height is what actually makes
		   height: 100% below a real, fixed value instead of a moving
		   target — see .igloorack-mega-menu .igloorack-category-lead
		   below for the same fix one level deeper, and
		   .igloorack-category-lead__media in components.css for where
		   this chain finally reaches the <img> itself. */
		grid-template-rows: minmax( 0, 1fr );
		gap: var( --space-8 );
		height: 100%;
	}

	/* min-width: 0 on both grid children is the actual fix for the
	   horizontal scrollbar the unconstrained grid used to produce —
	   without it, a grid item's default min-width:auto lets its content's
	   intrinsic width (long unwrapped labels, fixed-size media) push the
	   column, and therefore the whole panel, wider than its container. */
	.igloorack-mega-menu__rail,
	.igloorack-mega-menu__content {
		min-width: 0;
		min-height: 0;
		height: 100%;
	}

	/* The rail scrolls on its own when a group has more entries than the
	   panel height fits (e.g. many Products categories) — the feature
	   panel beside it stays put. Its content is centered with auto
	   margins instead of justify-content: center, which would push
	   overflowing entries above the top edge where they can't be
	   scrolled to; auto margins center while there is room and collapse
	   to 0 when there isn't, so every entry stays reachable (wheel,
	   touch, and keyboard focus scrolls the focused link into view). */
	.igloorack-mega-menu__rail {
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var( --color-graphite ) transparent;
	}

	.igloorack-mega-menu__rail > :first-child {
		margin-top: auto;
	}

	.igloorack-mega-menu__rail > :last-child {
		margin-bottom: auto;
	}
}

/* Mobile: inline accordion panel */
.igloorack-nav-mobile__list .igloorack-dropdown-panel {
	position: static;
}

.igloorack-dropdown-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Site footer */

.igloorack-site-footer {
	background: var( --color-jet );
	border-top: 1px solid var( --color-graphite );
}

/* Footer: full-width brand intro, then one row with every nav group.
   Logical properties only, so the layout mirrors under dir="rtl". */
.igloorack-footer-widgets {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --space-10 );
	padding-block: var( --space-20 ) var( --space-10 );
}

.igloorack-footer-widgets__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-4 );
	padding-block-end: var( --space-10 );
	border-block-end: 1px solid var( --color-graphite );
}

/* Desktop: logo at the container's start edge, the description directly
   beside it and free to use the full remaining width (no ch cap), both
   centred on one line axis. Mobile keeps the natural logo-above-text stack. */
@media ( min-width: 768px ) {
	.igloorack-footer-widgets__brand {
		flex-direction: row;
		align-items: center;
		gap: var( --space-8 );
	}

	.igloorack-footer-widgets__brand .igloorack-footer-widgets__tagline {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}
}

.igloorack-footer-widgets__nav {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --space-8 ) var( --space-6 );
}

@media ( min-width: 640px ) {
	.igloorack-footer-widgets__nav {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1024px ) {
	.igloorack-footer-widgets__nav {
		grid-template-columns: repeat( var( --igloorack-footer-columns, 5 ), minmax( 0, 1fr ) );
		gap: var( --space-8 );
	}
}

.igloorack-footer-contact-band {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-4 );
	padding-block: var( --space-8 );
	border-top: 1px solid var( --color-graphite );
}

@media ( min-width: 768px ) {
	.igloorack-footer-contact-band {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* Home: split/composition sections */

.igloorack-strategic__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-6 );
	margin-top: var( --space-10 );
}

@media ( min-width: 900px ) {
	.igloorack-strategic__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Application form section — explanation (left) + form (right). Ratio
   deliberately reversed from .igloorack-technopark__inner's 3fr/2fr
   (content-first) since the form itself needs the larger share here. */
.igloorack-application__inner {
	display: grid;
	/* minmax( 0, … ) so the intro image cannot widen the mobile column. */
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --space-10 );
	align-items: start;
}

@media ( min-width: 1024px ) {
	.igloorack-application__inner {
		grid-template-columns: minmax( 0, 2fr ) minmax( 0, 3fr );
	}
}

.igloorack-category-support-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-4 );
	list-style: none;
	margin: var( --space-6 ) 0 0;
	padding: 0;
}

/* Any number of supporting cards: three share the row exactly as before
   (from 640px), four or five share it on wider screens, more wrap. */
@media ( min-width: 640px ) {
	.igloorack-category-support-grid {
		grid-template-columns: repeat( auto-fit, minmax( 10rem, 1fr ) );
	}
}

/* Equal-width card grid — auto-fit means whatever number of items exist
   (1, 2, 3, 4+) share the row equally with no fixed column count and no
   nth-child rules: empty tracks collapse, so 2 items span two equal
   halves, 3 span thirds, and so on. Used by igloorack_render_hub_children()'s
   default (non-featured) presentation and reused for equal-panel content
   sections authored directly in post_content. */
.igloorack-card-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: var( --space-6 );
	list-style: none;
	margin: var( --space-6 ) 0 0;
	padding: 0;
}

.igloorack-card-grid > *:only-child {
	max-width: 640px;
	margin-inline: auto;
}

.igloorack-media-section {
	position: relative;
	overflow: hidden;
}

.igloorack-media-section__media {
	position: relative;
	min-height: 320px;
}

@media ( min-width: 900px ) {
	.igloorack-media-section__media {
		min-height: 520px;
	}
}

.igloorack-media-section__panel {
	position: relative;
	margin-block: calc( -1 * var( --space-16 ) ) var( --space-16 );
	max-width: 560px;
}

@media ( max-width: 899px ) {
	.igloorack-media-section__panel {
		margin-block: var( --space-8 ) 0;
	}
}

.igloorack-execution__band {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-8 );
	margin-top: var( --space-12 );
}

@media ( min-width: 900px ) {
	.igloorack-execution__band {
		grid-template-columns: repeat( 3, 1fr );
	}

	/* Single-column editorial variant — for principle counts that don't
	   divide evenly into 3 (e.g. 5), avoiding an uneven wrapped last row. */
	.igloorack-execution__band--stacked {
		grid-template-columns: 1fr;
	}
}

.igloorack-technopark__inner,
.igloorack-digital__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-10 );
	align-items: center;
}

@media ( min-width: 1024px ) {
	.igloorack-technopark__inner,
	.igloorack-digital__inner {
		grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr );
	}
}

.igloorack-immersion__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-8 );
	align-items: center;
}

@media ( min-width: 1024px ) {
	.igloorack-immersion__inner {
		grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr );
	}
}

/* Software: two large, equal solution panels — reuses the existing
   image+text-split .igloorack-category-lead component (built for the
   home page category grid, also reused by the mega menu's feature
   panel) rather than a new card, so both panels stay substantial
   rather than the small generic cards this replaces. */
.igloorack-solution-pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-8 );
	margin-top: var( --space-10 );
}

@media ( min-width: 900px ) {
	.igloorack-solution-pillars {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Inside the pillars each card is only ~half the container wide, so the
   component's own image | text split (≥768px viewport) left the text
   column ~¼ of the container: headings, bullets and the CTA clipped
   (worst with long German compounds, already tight in English). Here the
   card always stacks — image above, editorial body below — the two cards
   stay equal-height with their CTAs aligned, and the capability list
   only goes two-column when the card BODY itself is wide enough (a
   container query, not a viewport breakpoint). Scoped to the pillars so
   the home category lead and the mega menu keep their split layout. */
.igloorack-solution-pillars .igloorack-category-lead {
	margin-top: 0;
	height: 100%;
	grid-template-columns: minmax( 0, 1fr );
	grid-template-rows: auto 1fr;
}

/* Same frame for both cards whatever the source image's ratio (the two
   images differ), so headings and bullets start at the same height. */
.igloorack-solution-pillars .igloorack-category-lead__media {
	aspect-ratio: var( --aspect-wide );
	min-height: 0;
	overflow: hidden;
}

.igloorack-solution-pillars .igloorack-category-lead__media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.igloorack-solution-pillars .igloorack-category-lead__body {
	container-type: inline-size;
	padding: var( --space-6 );
}

@media ( min-width: 1024px ) {
	.igloorack-solution-pillars .igloorack-category-lead__body {
		padding: var( --space-8 );
	}
}

.igloorack-solution-pillars :is(
	.igloorack-category-lead__tag,
	.igloorack-category-lead__title,
	.igloorack-category-lead__description,
	.igloorack-capability-list__item,
	.igloorack-category-lead__cta
) {
	max-width: 100%;
	overflow-wrap: break-word;
	hyphens: auto;
}

.igloorack-solution-pillars .igloorack-capability-list {
	width: 100%;
	grid-template-columns: minmax( 0, 1fr );
}

@container ( min-width: 440px ) {
	.igloorack-solution-pillars .igloorack-capability-list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.igloorack-solution-pillars .igloorack-category-lead__cta {
	margin-top: auto;
	padding-top: var( --space-2 );
}

/* Software: "Collect → Connect → Understand → Act" data-flow — a
   horizontal, connected sequence distinct from the numbered vertical
   stack (.igloorack-execution__band--stacked) used everywhere else, so
   this one concise section reads as a technical data flow rather than
   another list of steps. */
.igloorack-flow-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-8 );
	margin-top: var( --space-10 );
}

@media ( min-width: 900px ) {
	.igloorack-flow-steps {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.igloorack-flow-step {
	position: relative;
	text-align: center;
}

@media ( min-width: 900px ) {
	.igloorack-flow-step:not( :last-child )::after {
		content: '';
		position: absolute;
		top: 24px;
		inset-inline-start: calc( 50% + 24px + var( --space-3 ) );
		width: calc( 100% - 48px - var( --space-3 ) * 2 );
		height: 2px;
		background: var( --color-steel-200 );
	}
}

/* Software: Customized Software's six capability areas — substantial
   text panels (heading, copy, examples list) in a 2-column grid,
   distinct from the smaller icon-led .igloorack-category-support-grid
   used for shorter capability summaries elsewhere. */
.igloorack-solution-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --space-8 );
	margin-top: var( --space-10 );
	list-style: none;
	padding: 0;
}

@media ( min-width: 900px ) {
	.igloorack-solution-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Software: reuses the existing .igloorack-dashboard component (built
   for the home page's Digital Infrastructure section) as a standalone,
   centered "conceptual interface" showcase — this wrapper only narrows
   and centers it here, the shared .igloorack-dashboard rules themselves
   are untouched so the home page instance is unaffected. */
.igloorack-dashboard-showcase {
	max-width: 720px;
	margin: var( --space-8 ) auto 0;
}

.igloorack-cta-banner__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --space-4 );
}