/**
 * Borrowed Earth - Homepage Grid Stylesheet
 * Supports Full-Width Breakout, Full-Viewport-Height with Header Offset,
 * Dedicated Desktop, Tablet & Mobile Layout Controls, Device Media & Nav Settings.
 */

*, *::before, *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Base Grid Container
   ========================================================================== */
.beg-grid {
	display: grid;
	grid-template-columns: repeat(var(--beg-cols-desk, 6), minmax(0, 1fr));
	grid-auto-rows: minmax(140px, 1fr);
	gap: 0;
	width: 100%;
	background: #fff;
	position: relative;
	box-sizing: border-box;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}

/* --- Full-Width / Edge-to-Edge Breakout --- */
.beg-grid--full-width {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow-x: clip;
}

/* --- Full Viewport Height Mode (Hero) --- */
.beg-grid--full-height {
	min-height: calc(100vh - var(--beg-header-offset, 70px));
	min-height: calc(100dvh - var(--beg-header-offset, 70px));
	height: calc(100vh - var(--beg-header-offset, 70px));
	height: calc(100dvh - var(--beg-header-offset, 70px));
	grid-template-rows: repeat(var(--beg-rows-desk, 3), minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
}

/* ==========================================================================
   Category Nav Cell
   ========================================================================== */
.beg-nav-cell {
	grid-column: var(--beg-nav-col-start, 3) / span var(--beg-nav-col-span, 2);
	grid-row: var(--beg-nav-row-start, 2) / span var(--beg-nav-row-span, 2);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: #fff;
	z-index: 5;
	box-sizing: border-box;
	outline: 1px solid #e5e5e5;
}

.beg-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.beg-nav-list {
    gap: 18px;
}

/* Viewport height: 901px - 1000px */
@media (max-height: 1000px) {
    .beg-nav-list {
        gap: 10px;
    }
}

/* Viewport height: 701px - 900px */
@media (max-height: 900px) {
    .beg-nav-list {
        gap: 5px;
    }
}

/* Viewport height: 700px and below */
@media (max-height: 700px) {
    .beg-nav-list {
        gap: 4px;
    }
}

.beg-nav-item {
	margin: 0;
	padding: 0;
}

.beg-nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: #8a8a8a;
	transition: color .25s ease, transform .2s ease;
	cursor: pointer;
	line-height: 1.2;
}

.beg-nav-link:hover,
.beg-nav-link:focus-visible,
.beg-nav-link.is-active {
	color: #111;
}

.beg-nav-arrow {
	opacity: 0;
	transform: translate(-2px, 2px);
	transition: opacity .2s ease, transform .2s ease;
	font-size: 11px;
}

.beg-nav-link:hover .beg-nav-arrow,
.beg-nav-link.is-active .beg-nav-arrow {
	opacity: 1;
	transform: translate(0, 0);
}

/* ==========================================================================
   Grid Cells & Media
   ========================================================================== */
.beg-cells {
	display: contents; /* cells are direct grid tracks */
}

.beg-cell {
	position: relative;
	display: block;
	overflow: hidden;
	background: #fff;
	min-height: 100%;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	grid-column: span var(--col-span, 1);
	grid-row: span var(--row-span, 1);
	outline: 1px solid #e5e5e5;
}

.beg-cell[style*="--col-start"] {
	grid-column-start: var(--col-start);
}
.beg-cell[style*="--row-start"] {
	grid-row-start: var(--row-start);
}

.beg-picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.beg-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1);
	transition: opacity .4s ease;
}

.beg-media.is-loaded {
	opacity: 1;
	transform: scale(1);
}

.beg-cell:hover .beg-media {
	transform: scale(1);
}

.beg-cell video.beg-media {
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	top: -1px;
	left: -1px;
	right: auto;
	bottom: auto;

	object-fit: cover;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
	.beg-media { transition: none; }
}

/* ==========================================================================
   Single-line tile loader — a thin progress bar shown ONLY once a tile's
   asset has taken noticeably long to load (see grid.js loadMedia / the
   BEG_LOADER_DELAY timer). Fast-loading tiles never see this at all.
   ========================================================================== */
.beg-tile-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: rgba(0, 0, 0, .08);
	overflow: hidden;
	z-index: 4;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.beg-tile-loader.is-active {
	opacity: 1;
}
.beg-tile-loader::after {
	content: '';
	position: absolute;
	top: 0;
	left: -35%;
	width: 35%;
	height: 100%;
	background: #111;
	animation: beg-tile-loader-sweep 1.1s ease-in-out infinite;
}
.beg-cell--text .beg-tile-loader,
.beg-cell--blank .beg-tile-loader {
	display: none; /* nothing to load on text/spacer cells */
}
@keyframes beg-tile-loader-sweep {
	0%   { left: -35%; }
	60%  { left: 100%; }
	100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.beg-tile-loader::after { animation: none; left: 0; width: 100%; opacity: .5; }
}

/* Captions */
.beg-caption {
	position: absolute;
	left: 16px;
	bottom: 16px;
	color: #fff;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
	z-index: 3;
	pointer-events: none;
}

/* Text Blocks */
.beg-cell--text {
	display: flex;
	align-items: center;
	background: #fff;
	cursor: default;
}
.beg-text-block {
	display: block;
	width: 100%;
	padding: 24px 28px;
	font-size: 14px;
	line-height: 1.6;
	color: #6b6b6b;
	letter-spacing: .01em;
	box-sizing: border-box;
}
.beg-text-block--left { text-align: left; }
.beg-text-block--center { text-align: center; }
.beg-text-block--right { text-align: right; }

/* Spacer Cells */
.beg-cell--blank {
	background: #fff;
	cursor: default;
	pointer-events: none;
}

/* Swap fade transition */
.beg-cells.is-swapping .beg-cell .beg-media.is-loaded {
	opacity: 0;
}

/* ==========================================================================
   Screen-Specific Media Visibility Rules
   ========================================================================== */
@media (min-width: 992px) {
	.beg-cell--tablet-only,
	.beg-cell--mobile-only,
	.beg-cell--hide-desktop,
	.beg-media--tablet-only,
	.beg-media--mobile-only,
	.beg-media--hide-desktop,
	.beg-picture.beg-media--tablet-only,
	.beg-picture.beg-media--mobile-only,
	.beg-picture.beg-media--hide-desktop,
	.beg-text-block.beg-media--tablet-only,
	.beg-text-block.beg-media--mobile-only,
	.beg-text-block.beg-media--hide-desktop {
		display: none !important;
	}
}

/* ==========================================================================
   Tablet Breakpoint (600px - 991px)
   ========================================================================== */
@media (min-width: 600px) and (max-width: 991px) {
	.beg-cell--desktop-only,
	.beg-cell--mobile-only,
	.beg-cell--hide-tablet,
	.beg-media--desktop-only,
	.beg-media--mobile-only,
	.beg-media--hide-tablet,
	.beg-picture.beg-media--desktop-only,
	.beg-picture.beg-media--mobile-only,
	.beg-picture.beg-media--hide-tablet,
	.beg-text-block.beg-media--desktop-only,
	.beg-text-block.beg-media--mobile-only,
	.beg-text-block.beg-media--hide-tablet {
		display: none !important;
	}

	.beg-grid {
		grid-template-columns: repeat(var(--beg-cols-tab, 4), minmax(0, 1fr));
	}

	/* Optional tablet override: use the Mobile Grid behavior/layout on tablet. */
	.beg-grid.beg-grid--tablet-use-mobile {
		grid-auto-rows: minmax(160px, auto);
		height: auto;
		min-height: auto;
	}

	.beg-grid--full-height {
		grid-template-rows: repeat(var(--beg-rows-tab, 3), minmax(0, 1fr));
		height: calc(100vh - var(--beg-header-offset-tab, var(--beg-header-offset, 70px)));
		height: calc(100dvh - var(--beg-header-offset-tab, var(--beg-header-offset, 70px)));
		min-height: calc(100dvh - var(--beg-header-offset-tab, var(--beg-header-offset, 70px)));
	}

	/* Tablet Nav Placement */
	.beg-grid--nav-pos-tab-inside_grid .beg-nav-cell {
		grid-column: var(--beg-nav-col-start-tab, 2) / span var(--beg-nav-col-span-tab, 2);
		grid-row: var(--beg-nav-row-start-tab, 2) / span var(--beg-nav-row-span-tab, 2);
		padding: 20px;
	}

	.beg-grid--nav-pos-tab-top .beg-nav-cell {
		order: -1;
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		padding: 16px;
		border-bottom: 1px solid #e5e5e5;
	}

	.beg-grid--nav-pos-tab-bottom .beg-nav-cell {
		order: 999;
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		padding: 16px;
		border-top: 1px solid #e5e5e5;
	}

	/* Tablet Nav Presentation Styles */
	.beg-nav-list--tab-horizontal_bar {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		justify-content: flex-start;
		gap: 16px;
		padding: 6px 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		white-space: nowrap;
	}
	.beg-nav-list--tab-horizontal_bar::-webkit-scrollbar {
		display: none;
	}
	.beg-nav-list--tab-horizontal_bar .beg-nav-item {
		flex: 0 0 auto;
	}
	.beg-nav-list--tab-horizontal_bar .beg-nav-link {
		padding: 6px 12px;
		background: rgba(0, 0, 0, .04);
		border-radius: 20px;
		font-size: 12px;
	}
	.beg-nav-list--tab-horizontal_bar .beg-nav-link.is-active {
		background: #111;
		color: #fff;
	}

	.beg-nav-list--tab-compact_wrap {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 14px;
	}
	.beg-nav-list--tab-compact_wrap .beg-nav-link {
		font-size: 12px;
		letter-spacing: .08em;
	}

	.beg-nav-list--tab-vertical_list {
		flex-direction: column;
		gap: 12px;
	}
	.beg-nav-list--tab-vertical_list .beg-nav-link {
		font-size: 13px;
	}

	.beg-cell {
		grid-column: span var(--col-span-tab, var(--col-span, 1));
		grid-row: span var(--row-span-tab, var(--row-span, 1));
	}
}

/* ==========================================================================
   Mobile Breakpoint (<600px)
   ========================================================================== */
@media (max-width: 599px) {
	.beg-cell--desktop-only,
	.beg-cell--tablet-only,
	.beg-cell--hide-mobile,
	.beg-media--desktop-only,
	.beg-media--tablet-only,
	.beg-media--hide-mobile,
	.beg-picture.beg-media--desktop-only,
	.beg-picture.beg-media--tablet-only,
	.beg-picture.beg-media--hide-mobile,
	.beg-text-block.beg-media--desktop-only,
	.beg-text-block.beg-media--tablet-only,
	.beg-text-block.beg-media--hide-mobile {
		display: none !important;
	}

	.beg-grid {
		grid-template-columns: repeat(var(--beg-cols-mob, 2), minmax(0, 1fr));
		grid-auto-rows: minmax(160px, auto);
		height: auto;
		min-height: auto;
	}

	/* If full-height mobile is explicitly requested */
	.beg-grid--full-height.beg-grid--full-height-mob {
		height: calc(100vh - var(--beg-header-offset-mob, 70px));
		height: calc(100dvh - var(--beg-header-offset-mob, 70px));
		min-height: calc(100dvh - var(--beg-header-offset-mob, 70px));
		grid-template-rows: repeat(var(--beg-rows-mob, 3), minmax(0, 1fr));
		grid-auto-rows: minmax(0, 1fr);
	}

	/* Nav Placement Options on Mobile */
	.beg-grid--nav-pos-mob-inside_grid .beg-nav-cell {
		grid-column: var(--beg-nav-col-start-mob, 1) / span var(--beg-nav-col-span-mob, 2);
		grid-row: var(--beg-nav-row-start-mob, 1) / span var(--beg-nav-row-span-mob, 1);
		padding: 20px 16px;
	}

	.beg-grid--nav-pos-mob-top .beg-nav-cell {
		order: -1;
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		padding: 16px;
		border-bottom: 1px solid #e5e5e5;
	}

	.beg-grid--nav-pos-mob-bottom .beg-nav-cell {
		order: 999;
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		padding: 16px;
		border-top: 1px solid #e5e5e5;
	}

	/* Nav Presentation Styles on Mobile */
	.beg-nav-list--mob-horizontal_bar {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		justify-content: flex-start;
		gap: 16px;
		padding: 6px 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		white-space: nowrap;
	}
	.beg-nav-list--mob-horizontal_bar::-webkit-scrollbar {
		display: none;
	}
	.beg-nav-list--mob-horizontal_bar .beg-nav-item {
		flex: 0 0 auto;
	}
	.beg-nav-list--mob-horizontal_bar .beg-nav-link {
		padding: 6px 10px;
		background: rgba(0, 0, 0, .04);
		border-radius: 20px;
		font-size: 11px;
	}
	.beg-nav-list--mob-horizontal_bar .beg-nav-link.is-active {
		background: #111;
		color: #fff;
	}

	.beg-nav-list--mob-compact_wrap {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 12px;
	}
	.beg-nav-list--mob-compact_wrap .beg-nav-link {
		font-size: 11px;
		letter-spacing: .08em;
	}

	.beg-nav-list--mob-vertical_list {
		flex-direction: column;
		gap: 5px;
	}
	.beg-nav-list--mob-vertical_list .beg-nav-link {
		font-size: 12px;
	}

	/* Legacy class fallbacks */
	.beg-grid--nav-pos-inside_grid .beg-nav-cell {
		grid-column: var(--beg-nav-col-start-mob, 1) / span var(--beg-nav-col-span-mob, 2);
		grid-row: var(--beg-nav-row-start-mob, 1) / span var(--beg-nav-row-span-mob, 1);
	}
	.beg-grid--nav-pos-top .beg-nav-cell {
		order: -1;
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}
	.beg-grid--nav-pos-bottom .beg-nav-cell {
		order: 999;
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}
	.beg-nav-list--horizontal_bar { flex-direction: row; overflow-x: auto; }
	.beg-nav-list--compact_wrap { flex-direction: row; flex-wrap: wrap; }
	.beg-nav-list--vertical_list { flex-direction: column; }

	/* Cells on Mobile */
	.beg-cell {
		grid-column: span var(--col-span-mob, var(--beg-cols-mob, 2)) !important;
		grid-row: span var(--row-span-mob, 1) !important;
	}

	.beg-text-block {
		padding: 18px 20px;
		font-size: 13px;
	}

	.beg-caption {
		font-size: 11px;
		left: 12px;
		bottom: 12px;
	}
}