/*
 * Per-section colour themes.
 *
 * Each section swaps only the "primary" role colour. Everything that reads from
 * that role follows automatically: the header navigation, language switcher and
 * account link; content headings, links and in-content buttons; the hero and card
 * overlays; the footer headings and copyright bar. Neutrals (base, surface,
 * border, body text) never change, and the gold accent is shared across sections.
 *
 * Sampled from the mockups, the header ink is an exact token match on all three
 * pages — #1D3653 on 探索新西兰, #810B0B on 走进中国, #126380 on 海岛度假 — so the
 * header is themed rather than pinned to navy.
 *
 * The site logo is a Site Logo image and does not recolour; it stays as uploaded.
 *
 * The body class is added in functions.php (see star_trip_section_theme_map()).
 */

/* 走进中国 / Explore China */
.theme-china {
	--wp--preset--color--primary: #810B0B;
	--wp--preset--color--primary-dark: #5E0808;
}

/* 海岛度假 / Explore Island */
.theme-island {
	--wp--preset--color--primary: #126380;
	--wp--preset--color--primary-dark: #0D485D;
}

/* ---------------------------------------------------------------------------
 * Homepage "发现更多旅程" tabs.
 *
 * The tour-tabs block emits .home-tabs / .home-tab / .home-panel and relies on the
 * theme for their appearance — that split is written into the block's own comment.
 * It was never implemented here, so every panel rendered at once (no rule hid the
 * inactive ones) and the tab row had no styling. This is that missing half.
 * ------------------------------------------------------------------------ */
/* One line at every width, scrolling when it has to.
 *
 * `safe center` is what lets the row be both centred and scrollable: a plain
 * `center` pushes the overflow equally out of both ends, and the part that spills
 * off the left is unreachable — you can never scroll back to the first tab. `safe`
 * falls back to `start` the moment the content overflows, which is exactly the
 * behaviour wanted. A browser that doesn't understand it drops the declaration and
 * gets `flex-start`: left-aligned instead of centred, still scrollable.
 *
 * overflow-y must be pinned. With one axis not `visible` the other computes from
 * `visible` to `auto`, and the active tab's 2px underline was enough vertical
 * overflow to raise a scrollbar down the side of the row. */
.home-tabs {
	display: flex;
	flex-wrap: nowrap;
	justify-content: safe center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
	overflow-x: auto;
	overflow-y: hidden;
	/* The bar sits under the tabs and adds a strip of chrome to a row that usually
	   fits. The arrows say there is more; swipe, drag and the keyboard all work. */
	scrollbar-width: none;
}

.home-tabs::-webkit-scrollbar {
	display: none;
}

.home-tab {
	display: inline-flex;
	/* Keeps its width; the row scrolls rather than squeezing the tabs. */
	flex: 0 0 auto;
	/* The icon is taller than the label, so sitting them on a shared baseline at
	   the bottom keeps the underline the same distance from the text on every tab. */
	align-items: end;
	gap: 0.6rem;
	padding: 0 0.25rem 0.5rem;
	/* 发现更多旅程 sits on the page colour, so the tabs are dark. They were white,
	   left from when this section was the navy band — invisible once it moved. */
	color: var(--wp--preset--color--secondary, #415F7E);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	/* Transparent until active, so switching tabs doesn't shift the row by the
	   height of a rule appearing. */
	border-bottom: 3px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.home-tab svg {
	width: 40px;
	height: auto;
	flex: none;
}

/* The icon files ship with baked-in fills (the mockup export). Repaint every
   filled shape from the tab's current colour so the active state can move
   between tabs; fill="none" outlines are left alone. */
.home-tab svg :not([fill="none"]) {
	fill: currentColor;
}

/* Not gold: #E1C19F on the near-white page is about 1.5:1, and here it would land
   on the label itself. The active and hovered tab goes darker instead. */
.home-tab:hover,
.home-tab:focus,
.home-tab.is-active {
	color: var(--wp--preset--color--primary, #1D3653);
}

/* The underline and the icon keep the gold — they mark which tab is active rather
   than carrying the words, so they answer to the 3:1 bar for non-text. The icon is
   darkened enough to hold its shape on a light background. */
.home-tab.is-active {
	border-bottom-color: var(--wp--preset--color--accent, #E1C19F);
}

.home-tab.is-active svg {
	color: #A9803F;
}

/* ---------------------------------------------------------------------------
 * "发现更多旅程" two-zone layout.
 *
 * Design: the tab row sits above the cards in the right-hand column; intro text
 * (heading, gold script, blurb) fills the narrow left column. The
 * tour-tabs block renders tabs + panels inside one wrapper, so that wrapper is
 * dissolved with display:contents and the grid places .home-tabs and
 * .home-panels directly — or .home-tabs__scroller, once home-tabs.js has wrapped
 * the row to hang the overflow arrows off it. Both carry the placement.
 * ------------------------------------------------------------------------ */
.home-discover {
	display: grid;
	grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
	column-gap: clamp(2rem, 4vw, 4rem);
	row-gap: 15px;
	align-items: start;
}

/* Neutralise the flow layout's block-gap margins; the grid gaps do the spacing. */
.home-discover > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.home-discover > .wp-block-travel-core-tour-tabs {
	display: contents;
}

/* The grid item here is .home-tabs on its own, or the .home-tabs__scroller that
   home-tabs.js wraps around it once the arrows exist. Both have to carry the
   placement: whichever one is the child of the grid needs to span the full width of
   the top row, and the other's grid properties are simply ignored. Without the
   scroller listed the wrapped row fell back to auto placement and landed in the
   left-hand column beside the intro text. */
/* The tabs belong over the cards they switch, in the right-hand column — not
   spanning the whole width, where they sat above the intro text as well and read
   as a heading for the section rather than a control for the panel. */
.home-discover .home-tabs,
.home-discover .home-tabs__scroller {
	grid-column: 2;
	grid-row: 1;
	margin-bottom: 0;
	/* A grid item's automatic minimum size is its content, so a row of tabs wider
	   than the column pushes the column open instead of scrolling inside it. The
	   overflow then never happens — which is also why no arrows appeared: the
	   script only shows them when scrollWidth actually exceeds clientWidth, and it
	   never did. min-width: 0 lets the item be narrower than its contents, which is
	   the whole premise of a scrolling row. */
	min-width: 0;
}

.home-discover__intro {
	grid-column: 1;
	grid-row: 2;
}

.home-discover__intro > * {
	margin-block: 0;
}

.home-discover__intro > * + * {
	margin-block-start: 1rem;
}

.home-discover .home-panels {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
}

/* The cards sit inside a rounded, slightly lifted frame. The rule was a translucent
   white, drawn for the navy band this section used to be — on the page colour it
   was invisible. */
.home-panel {
	border: 1px solid rgba(29, 54, 83, 0.2);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--50, 1.5rem);
}

@media (max-width: 992px) {
	.home-discover {
		/* minmax(0, 1fr), not 1fr: a bare 1fr track also takes its minimum from its
		   content and would be widened by the same tab row. */
		grid-template-columns: minmax(0, 1fr);
	}

	/* Scrolling, nowrap and the hidden scrollbar are all in the base rule now — the
	   row behaves the same at every width. Only the column placement is specific to
	   this breakpoint, and it applies to whichever of the two is the grid item. */
	.home-discover .home-tabs,
	.home-discover .home-tabs__scroller {
		grid-column: 1;
	}

	.home-discover__intro,
	.home-discover .home-panels {
		grid-column: 1;
		grid-row: auto;
	}
}

/* The panel switch — one rule each way.
 *
 * render.php already stamps .is-active on the first panel, so with or without JS
 * the first panel shows on load and the rest are hidden. The script only moves that
 * class from one panel to another on click. No .no-js flag, no :first-child
 * fallback, no ordering trap — the server ships a correct initial state and CSS
 * just honours .is-active. */
/* Hidden by stacking, not by `display: none`.
 *
 * A `display: none` panel has no layout, so an <img> inside it has no width when the
 * browser chooses which srcset candidate to download — it resolves `sizes` against
 * nothing and takes the smallest file. Switching to that tab shows an image already
 * loaded at thumbnail resolution; only leaving and coming back makes it re-choose,
 * which is exactly the "blurry until I switch tabs twice" symptom.
 *
 * The panels are stacked in a grid cell instead. Every one has real dimensions from
 * the first paint, so every image picks the file it actually needs. The inactive
 * ones are hidden with `visibility` — which keeps the box, unlike `display` — and
 * taken out of the tab order and the accessibility tree with `inert`-like effect via
 * `visibility: hidden`, which browsers already exclude from both. */
.home-panels {
	display: grid;
}

.home-panel {
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
	/* Stacked panels all contribute to the row height, so the tallest sets it and the
	   section does not jump as tabs are switched. Worth the extra whitespace on the
	   shorter ones. */
	min-width: 0;
}

.home-panel.is-active {
	visibility: visible;
	pointer-events: auto;
	position: relative;
	z-index: 1;
}

/* ---- Tab row overflow arrows ----
 * Built by home-tabs.js, which wraps the row and appends the two buttons, so
 * nothing appears for someone without JS — a button whose only job is to scroll
 * something is worse than no button at all.
 *
 * .has-overflow goes on the wrapper only while the row is actually wider than its
 * box, so on a screen where the three tabs fit there is nothing to see. */
.home-tabs__scroller {
	position: relative;
}

.home-tabs__arrow {
	position: absolute;
	top: 0;
	bottom: var(--wp--preset--spacing--50, 1.5rem);
	display: none;
	align-items: center;
	width: 2.25rem;
	padding: 0;
	border: 0;
	background: none;
	/* The band is navy — 发现更多旅程 carries its own background wherever it sits.
	   Still read through variables so a section on a different colour can set them
	   rather than restating the gradients. */
	/* Defaults match the band the row is on — the page colour. A section that puts
	   this row on a dark background sets the two variables instead of restating the
	   gradients. */
	color: var(--tc-tabs-ink, var(--wp--preset--color--primary, #1D3653));
	cursor: pointer;
}

.home-tabs__scroller.has-overflow .home-tabs__arrow {
	display: flex;
}

.home-tabs__arrow svg {
	width: 20px;
	height: 20px;
}

.home-tabs__arrow--prev {
	left: 0;
	justify-content: flex-start;
	/* The fade is what makes a tab cut off by the edge read as cut off rather than
	   as the end of the list. */
	background: linear-gradient(90deg, var(--tc-tabs-fade, var(--wp--preset--color--base, #F3F4F5)) 55%, transparent);
}

.home-tabs__arrow--next {
	right: 0;
	justify-content: flex-end;
	background: linear-gradient(270deg, var(--tc-tabs-fade, var(--wp--preset--color--base, #F3F4F5)) 55%, transparent);
}

/* At either end the arrow would scroll nothing. It fades rather than disappearing,
   so the row does not change width as you swipe. */
.home-tabs__arrow.is-off {
	opacity: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Homepage — 发现更多旅程 sits above 为什么选择 Star Trip
 *
 * Slideshow → 发现更多旅程 → 为什么选择, at every width. The advantages block is six
 * cards; putting the tours first means people reach what they came for without
 * scrolling past all of them.
 *
 * Order only. The colours live in the content: 为什么选择 is set to align:full with a
 * navy background and 发现更多旅程 to none, so each carries its own band wherever it
 * lands and there is nothing here to repaint.
 *
 * Getting the navy onto 为什么选择 took a block attribute rather than CSS. Core pins
 * ordinary children of a constrained layout with `margin-left: auto !important`, so
 * nothing outside a block can pull it out to the window edges — `align: full` is the
 * only way past that, and it has to be set on the block. Worth remembering before
 * trying to make any other section full width from a stylesheet.
 * -------------------------------------------------------------------------- */
.home .wp-block-post-content {
	display: flex;
	flex-direction: column;
}

/* Everything keeps its document order; the advantages block goes last. Written this
   way round so adding a section to the homepage later needs no new rule here. */
.home .wp-block-post-content > * {
	order: 1;
}

.home .wp-block-post-content > .tc-adv {
	order: 2;
}

/* WordPress centres ordinary blocks with `margin-inline: auto`, and auto margins
   switch off flex stretch — the item falls back to fit-content and shrinks. An
   explicit width restores the fill. Full-width blocks are excluded: their own
   margins rely on stretch, and pinning them to 100% would leave a gap down the
   right. */
.home .wp-block-post-content > :not(.alignfull) {
	width: 100%;
}