/**
 * Layer 4 — Layout geometry (Vantage Journeys)
 *
 * Purpose:  Site shell, section spacing, grid templates. No component chrome.
 * Depends:  base.css
 * Rule:     Avoid colors and typography here — use components.css.
 *
 * @package Vantage_Journeys
 */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
}

.has-transparent-header .site {
	position: relative;
}

.site-main {
	flex: 1;
	padding-block: var(--space-between-sections);
}

.site-main--tours,
.site-main--visas,
.site-main--blog,
.site-main--blog-post,
.site-main--about,
.site-main--contact,
.site-main--testimonials,
.site-main:has(.hero-home),
.site-main:has(.hero) {
	padding-top: 0;
}

/* Transparent header — layout offsets only */
.has-transparent-header .site-header--v2.header-two {
	padding-inline: calc(var(--layout-hero-gutter) + var(--container-gutter));
}

.has-transparent-header .site-main {
	padding-top: 0;
}

.has-transparent-header .site-main > .container > .hero:first-child {
	margin-top: calc(var(--header-height) + var(--padding-lg));
}

.has-transparent-header .site-main > .hero-home:first-child {
	margin-top: 0;
}

.has-transparent-header .site-main > .clients-strip {
	margin-top: calc(-1 * var(--space-lg));
	padding-top: var(--space-lg);
}

body.has-transparent-header .site-main {
	padding-bottom: 0;
}

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

.grid-tours,
.grid-destinations {
	display: grid;
	gap: var(--gap-grid-col-md);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.grid-tours,
	.grid-destinations {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.grid-tours,
	.grid-destinations {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}