/**
 * VGT Rail Lock — final authority for horizontal poster rails.
 * Loaded AFTER every design package so skins cannot collapse rows into
 * full-width vertical stacks (grid / width:100% / flex-wrap).
 *
 * Contract:
 *   [data-vgt-rail] / .vgt-rail  → flex row nowrap, horizontal scroll
 *   direct tile children         → fixed flex-basis widths (poster / landscape)
 *   archive grids (*.vgt-*-grid) → may still use width:100% on tiles
 */

/* ── Track ─────────────────────────────────────────────────────────────── */
html[data-vgt-theme] [data-vgt-rail],
html[data-vgt-theme] .vgt-rail,
body [data-vgt-rail],
body .vgt-rail.vgt-rail {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	flex-flow: row nowrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: var(--vgt-rail-gap, 0.85rem) !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	scroll-snap-type: x mandatory !important;
	scroll-padding-inline: 2px !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
}

/* ── Tiles in a rail (direct children only — never archive grids) ───────
   flex: 0 0 auto + explicit width — packages may override width tokens
   (e.g. blue-channel / harbor landscape-first) without fighting flex-basis. */
html[data-vgt-theme] [data-vgt-rail] > a,
html[data-vgt-theme] [data-vgt-rail] > .vgt-tile,
html[data-vgt-theme] .vgt-rail > a,
html[data-vgt-theme] .vgt-rail > .vgt-tile,
body [data-vgt-rail] > a,
body .vgt-rail > a {
	flex: 0 0 auto !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	width: var(--vgt-tile-w-poster, 168px) !important;
	max-width: min(var(--vgt-tile-w-poster, 168px), 72vw) !important;
	min-width: min(140px, 70vw) !important;
	box-sizing: border-box !important;
	scroll-snap-align: start !important;
	display: block !important;
	align-self: flex-start !important;
}

/* Landscape / continue / wide tiles */
html[data-vgt-theme] [data-vgt-rail] > a.vgt-tile--landscape,
html[data-vgt-theme] [data-vgt-rail] > a[class*="--landscape"],
html[data-vgt-theme] [data-vgt-rail] > a[class*="--wide"],
html[data-vgt-theme] .vgt-rail > a.vgt-tile--landscape,
html[data-vgt-theme] .vgt-rail > a[class*="--landscape"],
html[data-vgt-theme] .vgt-rail > a[class*="--wide"],
body [data-vgt-rail] > a.vgt-tile--landscape,
body [data-vgt-rail] > a[class*="--landscape"],
body .vgt-rail > a.vgt-tile--landscape {
	flex: 0 0 auto !important;
	width: var(--vgt-tile-w-land, 300px) !important;
	max-width: min(var(--vgt-tile-w-land, 300px), 85vw) !important;
	min-width: min(220px, 80vw) !important;
}

/* Landscape-first packages set tile width via design.css; reinforce flex lock only */
html[data-vgt-theme="blue-channel"] [data-vgt-rail] > a.vgt-blue-tile,
html[data-vgt-theme="blue-channel"] .vgt-rail > a.vgt-blue-tile,
html[data-vgt-theme="harbor-deck"] [data-vgt-rail] > a.vgt-harbor-tile,
html[data-vgt-theme="harbor-deck"] .vgt-rail > a.vgt-harbor-tile {
	flex: 0 0 auto !important;
	width: var(--vgt-tile-w-land, 300px) !important;
	max-width: min(var(--vgt-tile-w-land, 300px), 86vw) !important;
	min-width: min(220px, 80vw) !important;
}

/* Media box stays inside the fixed tile — never inflate the flex item */
html[data-vgt-theme] [data-vgt-rail] > a .vgt-tile__media,
html[data-vgt-theme] .vgt-rail > a .vgt-tile__media,
body [data-vgt-rail] > a .vgt-tile__media {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	aspect-ratio: var(--vgt-aspect-poster, 2 / 3) !important;
}

html[data-vgt-theme] [data-vgt-rail] > a.vgt-tile--landscape .vgt-tile__media,
html[data-vgt-theme] [data-vgt-rail] > a[class*="--landscape"] .vgt-tile__media,
html[data-vgt-theme] [data-vgt-rail] > a[class*="--wide"] .vgt-tile__media,
html[data-vgt-theme] .vgt-rail > a.vgt-tile--landscape .vgt-tile__media,
body [data-vgt-rail] > a.vgt-tile--landscape .vgt-tile__media,
body [data-vgt-rail] > a[class*="--landscape"] .vgt-tile__media {
	aspect-ratio: var(--vgt-aspect-backdrop, 16 / 9) !important;
}

html[data-vgt-theme] [data-vgt-rail] > a img,
html[data-vgt-theme] .vgt-rail > a img,
body [data-vgt-rail] > a img {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Empty state may span the track */
html[data-vgt-theme] [data-vgt-rail] > .vgt-design-empty,
html[data-vgt-theme] .vgt-rail > .vgt-design-empty,
body [data-vgt-rail] > .vgt-design-empty {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 100% !important;
}

/* Top-N rails use the same horizontal contract */
html[data-vgt-theme] .vgt-top-rail[data-vgt-rail],
html[data-vgt-theme] .vgt-top-rail.vgt-rail {
	display: flex !important;
	flex-flow: row nowrap !important;
}

/* Top-N rank cards may expand wider than poster tokens (package skins own width) */
html[data-vgt-theme] [data-vgt-rail] > a.vgt-top-item,
html[data-vgt-theme] .vgt-rail > a.vgt-top-item {
	flex: 0 0 auto !important;
	/* leave width to package / shared top styles — only lock shrink/stack */
	max-width: min(420px, 88vw) !important;
	min-width: min(200px, 70vw) !important;
}

/* ── Themen / Hubs — multi-layout modes (package DNA) ───────────────────
   Safety only: no accidental full-bleed single-column image dumps.
   Structure is chosen via data-vgt-hub-layout; packages own skin + extras. */

/* Media fill is always safe */
html[data-vgt-theme] .vgt-hub__media img,
html[data-vgt-theme] [data-vgt-hubs] a img,
body .vgt-hub img {
	object-fit: cover;
	display: block;
	max-width: 100%;
}

/* DEFAULT / rail* — horizontal scroll chips (streaming) */
html[data-vgt-theme] [data-vgt-hubs]:not([data-vgt-hub-layout]),
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="rail"],
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="rail-dense"],
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="rail-landscape"],
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="rail-foyer"],
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="rail-hud"],
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="rail-marquee"] {
	display: flex !important;
	flex-flow: row nowrap !important;
	gap: var(--vgt-hub-gap, 0.85rem) !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory !important;
	width: 100%;
	max-width: 100%;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout^="rail"] > a,
html[data-vgt-theme] [data-vgt-hubs]:not([data-vgt-hub-layout]) > a {
	flex: 0 0 auto !important;
	width: var(--vgt-hub-w, 220px) !important;
	max-width: min(var(--vgt-hub-w, 220px), 78vw) !important;
	min-width: min(140px, 68vw) !important;
	scroll-snap-align: start;
	box-sizing: border-box !important;
}

/* brand-tiles — equal square tiles wrap (family/catalog DNA) */
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="brand-tiles"] {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(var(--vgt-hub-w, 140px), 1fr)) !important;
	gap: var(--vgt-hub-gap, 1rem) !important;
	overflow: visible !important;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="brand-tiles"] > a {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	aspect-ratio: 1 / 1 !important;
}

/* grid — multi-column catalog wall */
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="grid"],
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="gallery-wall"] {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(var(--vgt-hub-w, 180px), 1fr)) !important;
	gap: var(--vgt-hub-gap, 1rem) !important;
	overflow: visible !important;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="grid"] > a,
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="gallery-wall"] > a {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
}

/* mosaic — first hub featured large */
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="mosaic"] {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	grid-auto-rows: minmax(120px, auto) !important;
	gap: var(--vgt-hub-gap, 0.85rem) !important;
	overflow: visible !important;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="mosaic"] > a {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="mosaic"] > a:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

@media (max-width: 720px) {
	html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="mosaic"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="mosaic"] > a:first-child {
		grid-column: span 2;
		grid-row: span 1;
	}
}

/* featured-rail — big first card + horizontal rest (commerce/prime DNA) */
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="featured-rail"] {
	display: flex !important;
	flex-flow: row nowrap !important;
	gap: var(--vgt-hub-gap, 0.85rem) !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="featured-rail"] > a {
	flex: 0 0 auto !important;
	width: var(--vgt-hub-w, 200px) !important;
	max-width: min(var(--vgt-hub-w, 200px), 70vw) !important;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="featured-rail"] > a:first-child {
	width: var(--vgt-hub-featured-w, min(420px, 85vw)) !important;
	max-width: min(var(--vgt-hub-featured-w, 420px), 88vw) !important;
}

/* list — horizontal rows of thumb + label (editorial) */
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="list"] {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--vgt-hub-gap, 0.65rem) !important;
	overflow: visible !important;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="list"] > a {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 72px !important;
	gap: 1rem !important;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="list"] .vgt-hub__media {
	flex: 0 0 var(--vgt-hub-list-thumb, 120px) !important;
	width: var(--vgt-hub-list-thumb, 120px) !important;
	max-width: 40% !important;
	aspect-ratio: 16 / 10 !important;
}

/* circles — circular brand avatars */
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="circles"] {
	display: flex !important;
	flex-flow: row wrap !important;
	justify-content: flex-start !important;
	gap: var(--vgt-hub-gap, 1.25rem) !important;
	overflow: visible !important;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="circles"] > a {
	width: var(--vgt-hub-w, 112px) !important;
	max-width: var(--vgt-hub-w, 112px) !important;
	flex: 0 0 auto !important;
	text-align: center;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="circles"] .vgt-hub__media {
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
}

/* bento — irregular editorial grid */
html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="bento"] {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	grid-auto-rows: minmax(100px, auto) !important;
	gap: var(--vgt-hub-gap, 0.75rem) !important;
	overflow: visible !important;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="bento"] > a {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	grid-column: span 2;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="bento"] > a:nth-child(1) {
	grid-column: span 3;
	grid-row: span 2;
}

html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="bento"] > a:nth-child(2) {
	grid-column: span 3;
}

@media (max-width: 720px) {
	html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="bento"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="bento"] > a,
	html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="bento"] > a:nth-child(1),
	html[data-vgt-theme] [data-vgt-hubs][data-vgt-hub-layout="bento"] > a:nth-child(2) {
		grid-column: span 1;
		grid-row: span 1;
	}
}