/*
 * The tour detail field blocks.
 *
 * The theme already styles .tour-hero__price, .price-box, .cost-box, .cost-head
 * and .cost-list from when these sections were hand-written; this only adds what
 * moving them into blocks needs.
 */

/* ---- 顶部大图 ---- */
.tour-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 39vw, 560px);
	padding-block: var(--wp--preset--spacing--80, 5rem);
	/* The section is alignfull, so the layout's negative margins have already
	   pulled it out past the page's side padding. Without putting that padding
	   back the title runs to the window edge on anything narrower than the content
	   width, while the sections below it keep their margins — which is the width
	   at which the page stops lining up. Same custom properties the rest of the
	   page uses, so the two stay in step if the value ever changes. */
	padding-inline:
		var(--wp--style--root--padding-left, clamp(1rem, 4vw, 2rem))
		var(--wp--style--root--padding-right, clamp(1rem, 4vw, 2rem));
	background: var(--wp--preset--color--primary, #1D3653) var(--tc-hero-bg) center/cover no-repeat;
}

/* Enough to hold white text over a bright photo, and no more — the mockup's sky
   is still a sky. */
.tour-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(11, 25, 40, 0.7) 0%, rgba(11, 25, 40, 0.25) 60%, rgba(11, 25, 40, 0.1) 100%);
}

.tour-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1240px);
	margin-inline: auto;
}

.tour-hero__title {
	margin: 0;
	/* White over the demo's night skies; a per-tour setting takes over when the
	   photo is pale. See the 顶部大图配色 metabox. */
	color: var(--tc-hero-ink, #fff);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 500;
	line-height: 1.25;
}

/* Holds the short description, which WooCommerce wraps in <p> — so the spacing has
   to be set on the paragraphs, not on the container, or the first one's own margin
   would open a gap under the title. Capped in width because a short description can
   run to a paragraph and a line of it stretched across the hero is unreadable. */
/* Every element the editor can produce here, named individually.
 *
 * 简短描述 is usually a paragraph, but the editor will also make it a heading — and
 * theme.json styles headings as `:root :where(h1, h2, …)` with the page's navy,
 * written onto the heading itself rather than left to inherit. A colour on the
 * container therefore never reached them, and a subtitle set as 标题 stayed navy on
 * the photograph whatever the metabox said.
 *
 * Doubled class because that theme.json rule carries one pseudo-class, which ties
 * with a single class and is decided by load order — global styles print last. */
.tour-hero__subtitle.tour-hero__subtitle,
.tour-hero__subtitle.tour-hero__subtitle p,
.tour-hero__subtitle.tour-hero__subtitle h1,
.tour-hero__subtitle.tour-hero__subtitle h2,
.tour-hero__subtitle.tour-hero__subtitle h3,
.tour-hero__subtitle.tour-hero__subtitle h4,
.tour-hero__subtitle.tour-hero__subtitle h5,
.tour-hero__subtitle.tour-hero__subtitle h6,
.tour-hero__subtitle.tour-hero__subtitle li,
.tour-hero__subtitle.tour-hero__subtitle strong,
.tour-hero__subtitle.tour-hero__subtitle em,
.tour-hero__subtitle.tour-hero__subtitle a {
	color: var(--tc-hero-ink, #fff);
}

/* The colour has to name the paragraphs too. This holds 简短描述, which arrives
   wrapped in <p> by wpautop, and theme.json styles paragraphs through
   `:root :where(p)` — low specificity, but it sets a colour on the element itself
   rather than letting it inherit, so a colour on the container alone never reached
   the text. */
.tour-hero__subtitle {
	margin: var(--wp--preset--spacing--30, 0.75rem) 0 0;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

/* A heading here is still the subtitle, so it is sized like one. theme.json gives
   h1 the page's xx-large, which under the hero's own title would be the larger of
   the two — the line meant to support the title would be shouting over it. Weight
   is left alone: choosing 标题 is a reasonable way to ask for a bolder line. */
.tour-hero__subtitle.tour-hero__subtitle h1,
.tour-hero__subtitle.tour-hero__subtitle h2,
.tour-hero__subtitle.tour-hero__subtitle h3,
.tour-hero__subtitle.tour-hero__subtitle h4,
.tour-hero__subtitle.tour-hero__subtitle h5,
.tour-hero__subtitle.tour-hero__subtitle h6 {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.tour-hero__subtitle > :first-child {
	margin-top: 0;
}

.tour-hero__subtitle > :last-child {
	margin-bottom: 0;
}

.tour-hero__cta {
	margin: var(--wp--preset--spacing--50, 1.5rem) 0 0;
}

/* ---- 价格框 ----
   Gold, filled, the same height as the cost box beside it. It had no background
   at all before, so the price floated on the page. */
/* Sits at the top of the panel, above 费用说明. A row, not a column: the price on
   one side and the buttons on the other reads as one line of business rather than a
   stack of unrelated things, and it keeps the panel short. */
/* 「NZD 10,500」 and 「/人起」 are one figure read left to right, so they sit next to
   each other with a hair's gap. `space-between` had put the unit halfway across the
   panel, reading as a third, unrelated item. The buttons take the far end instead,
   pushed there by an auto margin rather than by spreading everything apart. */
.price-box {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40, 1rem) 0.4rem;
	margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
	padding-bottom: var(--wp--preset--spacing--50, 1.5rem);
	border-bottom: 1px solid var(--wp--preset--color--border, #D8DCE5);
}

/* On the same line as the figure now, not under it — "/人起" is a unit, and a unit
   belongs beside the number it qualifies. */
.price-box__unit {
	margin: 0;
	color: var(--wp--preset--color--subtle, #6B7280);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.2;
}

.price-box__head {
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary, #1D3653);
}

.price-box__text {
	margin: var(--wp--preset--spacing--40, 1rem) 0 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

/* Left-aligned, not centred: both buttons start at the box's left padding in the
   mockup, lining up under the price. */
.price-box__actions {
	display: flex;
	/* Side by side. They wrap only when there is genuinely no room — two 180px
	   buttons and a gap need 372px, which a phone still has. */
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	margin: 0 0 0 auto;
}

/* Both buttons are the same size — 180 × 52 in the mockup. They did not match
   before: the width was set on the wrapper but the height came from each button's
   own padding, and the outline variant carries a border the filled one doesn't. A
   fixed width plus a min-height on the link settles both, and border-box keeps the
   outline's 1px inside that height instead of adding to it. */
/* The markup carries .wp-block-button__width-100, which is core's "fill the
   container" class and would stack the two. Here they sit in a row, so the width is
   the button's own. */
.price-box__actions .wp-block-button,
.price-box__actions .wp-block-button__width-100 {
	width: auto;
	min-width: 160px;
}

.price-box__actions .wp-block-button__link {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding-block: 0;
	text-align: center;
}

/* Both buttons sit on gold, so neither can inherit the page's button colours:
   the filled one would be gold on gold, the outline one would draw a gold rule. */
.price-box__actions .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--primary, #1D3653);
	color: #fff;
	border: 0;
}

.price-box__actions .is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary, #1D3653);
	border: 1px solid var(--wp--preset--color--primary, #1D3653);
}

.tour-duration {
	color: var(--wp--preset--color--subtle, #6B7280);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* ---- 分类顶部大图 ----
 * The banner on a category archive. Shorter than a tour's hero — this is a heading
 * for a list, not a page's opening image — and centred, matching the design's
 * listing pages.
 *
 * The navy is the background, not a fallback: with no photo the band is simply navy
 * and the title reads, which is a normal state for a category nobody has given a
 * picture yet.
 */
.cat-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(220px, 26vw, 376px);
	padding-block: var(--wp--preset--spacing--70, 3rem);
	padding-inline:
		var(--wp--style--root--padding-left, 1rem)
		var(--wp--style--root--padding-right, 1rem);
	background: var(--wp--preset--color--primary, #1D3653) var(--tc-cathero-bg) center/cover no-repeat;
	text-align: center;
}

/* Only over a photo. On the plain navy band there is nothing to darken, and the
   overlay would just make the navy muddier. */
.cat-hero.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(21, 42, 64, 0.45);
}

.cat-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--wp--style--global--content-size, 1240px);
	margin-inline: auto;
}

.cat-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	font-weight: 500;
	line-height: 1.25;
}

.cat-hero__desc {
	margin: var(--wp--preset--spacing--30, 0.75rem) 0 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--wp--preset--font-size--medium, 1rem);
}

/* ---- 费用说明 ----
   Measured off 费用说明.png, which is 1x and matches the 1440 layout exactly: a
   788 × 409 box beside a 434 × 409 one, 44 apart. Padding is 68px, not the 48 this
   was built with — the earlier pass read it off a downscaled export. */
/* The border and padding belong to the wrapper now; this is the lower half of it. */
.cost-box {
	padding: 0;
	border: 0;
	background: transparent;
}

.tc-costs__title {
	/* Clear of the rule above it — that line is the price row's lower border, and
	   the heading was sitting straight on top of it. */
	margin: var(--wp--preset--spacing--40, 1rem) 0 0;
	color: var(--wp--preset--color--primary, #1D3653);
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	line-height: 1.3;
}

.tc-costs__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* The second column starts 376px after the first in a 652px content box, which
	   puts 100px between them — far more than the 2rem this had. */
	gap: clamp(1.5rem, 7vw, 6.25rem);
	margin-top: var(--wp--preset--spacing--60, 2rem);
}

.cost-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 600;
	font-size: 1.125rem;
	/* The mockup samples #415F7E here, not the body's near-black. */
	color: var(--wp--preset--color--secondary, #415F7E);
}

/* 36 × 38 in the mockup — a gold ring around a navy mark, big enough to read as a
   pair of status icons rather than as bullets. */
.cost-head svg {
	height: 26px;
	width: auto;
	flex: 0 0 auto;
}

.cost-list {
	list-style: disc;
	padding-left: 1.5rem;
	margin: 0.75rem 0 0;
}

.cost-list li {
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--wp--preset--color--primary, #1D3653);
	line-height: 1.7;
	margin-bottom: 0.2rem;
}

/* Currency small, the figure larger, the unit beside it.
 *
 * The line never wraps: the currency and the number belong together, and a figure
 * that breaks after the currency reads as two numbers.
 *
 * These were container units once, sized as a proportion of the 434px gold box. In
 * a full-width panel the same proportions put the figure at 200px, so they are
 * plain sizes now — the price is a heading here, not the whole point of a box. */
.price-box__amount {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0.2rem;
	color: var(--wp--preset--color--primary, #1D3653);
	font-weight: 700;
	white-space: nowrap;
}

.price-box__amount span {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.price-box__amount b {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
}

@media (max-width: 768px) {
	.tc-costs__cols {
		grid-template-columns: 1fr;
	}
}

/* ---- 费用说明 + 价格 ----
 *
 * One panel, not two boxes side by side. The price and its buttons sit at the top,
 * above the 费用说明 heading, and the border belongs to the wrapper so the two
 * blocks read as one thing rather than two that happen to touch.
 *
 * The gold band the price used to sit in went with the second box: a filled strip
 * across the top of an otherwise page-coloured panel would make it look like two
 * boxes again, which is what this stopped being.
 *
 * Nothing here needs a breakpoint any more — one column stacks by itself. */
.tour-costs-row {
	padding: clamp(1.5rem, 3.4vw, 2.75rem);
	border: 1px solid var(--wp--preset--color--muted-blue, #AAB6C6);
	border-radius: 8px;
}

/* Below the panel's own width the price wraps above the buttons, and the auto
   margin that pushed them right would then centre them oddly on their own line. */
@media (max-width: 600px) {
	.price-box__actions {
		margin-left: 0;
		width: 100%;
	}

	.price-box__actions .wp-block-button,
	.price-box__actions .wp-block-button__width-100 {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ---- 其他说明 ----
 * The same panel as 费用说明 — border, radius and padding all read from the one rule
 * that draws that box, so the two cannot drift apart.
 *
 * Free-form content: the client writes headings, paragraphs, lists, alignment and
 * images in the editor, so this styles what comes out rather than a fixed shape. */
/* Doubled class on purpose. The theme zeroes margins on every layout child —
   `.is-layout-flow > *, .is-layout-constrained > *` in blocks.css, one class, loaded
   after this file — so a single `.tour-notes` lost the tie and the gap never
   appeared. The theme's own comment says spacing has to be explicit from then on;
   explicit also has to mean specific enough. */
.tour-notes.tour-notes {
	/* Wider than the gap inside either panel, so the two read as two panels rather
	   than as one box that has been divided. 32px was not enough: it matched the
	   padding, and matching spacing inside and outside a border makes the border
	   look like a rule through a single block. */
	margin-top: var(--wp--preset--spacing--70, 2.5rem);
	padding: clamp(1.5rem, 3.4vw, 2.75rem);
	border: 1px solid var(--wp--preset--color--muted-blue, #AAB6C6);
	border-radius: 8px;
}

.tour-notes__body {
	color: var(--wp--preset--color--contrast, #2B333B);
	line-height: 1.8;
}

/* Spacing on the children, not the container: the first one's own margin would
   otherwise open a gap inside the border. */
.tour-notes__body > * {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
}

.tour-notes__body > :last-child {
	margin-bottom: 0;
}

/* Headings written in the editor. Kept below 费用说明's own title so a note never
   outranks the section it sits under — which means overriding theme.json's own
   heading sizes, and those are `:root :where(h1, h2, …)`: one pseudo-class, a tie
   with a single class, decided by load order in global styles' favour. Doubled
   class, same as the hero subtitle. */
.tour-notes__body.tour-notes__body h1,
.tour-notes__body.tour-notes__body h2,
.tour-notes__body.tour-notes__body h3,
.tour-notes__body.tour-notes__body h4 {
	margin: var(--wp--preset--spacing--50, 1.5rem) 0 var(--wp--preset--spacing--30, 0.75rem);
	color: var(--wp--preset--color--primary, #1D3653);
	line-height: 1.3;
}

.tour-notes__body > :first-child {
	margin-top: 0;
}

.tour-notes__body.tour-notes__body h1 { font-size: var(--wp--preset--font-size--x-large, 1.75rem); }
.tour-notes__body.tour-notes__body h2 { font-size: var(--wp--preset--font-size--large, 1.25rem); }
.tour-notes__body.tour-notes__body h3,
.tour-notes__body.tour-notes__body h4 { font-size: var(--wp--preset--font-size--medium, 1rem); }

.tour-notes__body ul,
.tour-notes__body ol {
	padding-left: 1.5rem;
}

.tour-notes__body li + li {
	margin-top: 0.35rem;
}

/* Images from the media button. They carry their own width attributes, which are
   fine until the panel is narrower than the picture. */
.tour-notes__body img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* The editor's alignment classes. Without these an aligned image is just a block
   image and the choice made in the toolbar is silently dropped. */
.tour-notes__body .aligncenter {
	display: block;
	margin-inline: auto;
}

.tour-notes__body .alignleft {
	float: left;
	margin: 0 var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--30, 0.75rem) 0;
}

.tour-notes__body .alignright {
	float: right;
	margin: 0 0 var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
}

/* A float that outlives its paragraph would drag the panel's border up through the
   image; the panel closes over its own content instead. */
.tour-notes__body::after {
	content: "";
	display: block;
	clear: both;
}

.tour-notes__body .wp-caption {
	max-width: 100%;
}

.tour-notes__body .wp-caption-text {
	margin: 0.35rem 0 0;
	color: var(--wp--preset--color--subtle, #6B7280);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

@media (max-width: 600px) {
	/* Floats in a narrow panel leave a column of text two words wide. */
	.tour-notes__body .alignleft,
	.tour-notes__body .alignright {
		float: none;
		display: block;
		margin: 0 auto var(--wp--preset--spacing--30, 0.75rem);
	}
}

/* ---- Section headings shared by the three repeater blocks ---- */
.tc-section__title {
	margin: 0 0 var(--wp--preset--spacing--50, 1.5rem);
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
}

/* ---- Grid driven by the per-tour column count ----
   The count is a property of the content, not the template, so it arrives as a
   custom property on the element rather than a class per possible value. auto-fit
   lets a short final row spread instead of leaving a gap. */
.tc-grid {
	display: grid;
	grid-template-columns: repeat(var(--tc-cols, 3), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 1rem);
}

/* ---- 行程亮点 ----
   The picture used to be a .tc-card__media, borrowed from the card component. That
   class is only styled in cards.css, which is enqueued by the card render
   functions — and a tour detail page draws no cards, so the stylesheet never
   loaded and the image never appeared. It has its own element now, and no
   dependency on a file that may or may not be on the page.

   Three nested elements, because that is what a 3D flip takes:

     .tc-highlight        holds the perspective and the card's footprint
     .tc-highlight__inner rotates
     .tc-highlight__face  the photo and its label
     .tc-highlight__back  the description, pre-rotated to face away

   Rounding and clipping live on the two faces. `overflow` other than visible on
   the rotating element forces transform-style back to flat, and then there is no
   flip left to see — the two faces just stack. */
.tc-highlight {
	position: relative;
	/* 364 × 241 in the mockup. An aspect ratio rather than a min-height so the
	   cards keep their shape as the column count changes. */
	aspect-ratio: 364 / 241;
	min-height: 180px;
	perspective: 1400px;
}

.tc-highlight__inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tc-highlight__face,
.tc-highlight__back {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 10px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.tc-highlight__face {
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--40, 1rem);
	background-color: var(--wp--preset--color--primary-dark, #152A40);
}

.tc-highlight__media {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.tc-highlight__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 30, 45, 0.85) 0%, rgba(20, 30, 45, 0.15) 70%);
}

.tc-highlight__label {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 600;
}

/* ---- The flip ----
   Only cards with a description carry .tc-highlight--flips, so a card with
   nothing to say stays still rather than turning over to show a blank. */
.tc-highlight__back {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40, 1rem);
	background: linear-gradient(180deg, #0B1F33 0%, var(--wp--preset--color--primary, #1D3653) 100%);
	transform: rotateY(180deg);
}

.tc-highlight__desc {
	/* The mockup sets the text in a narrow measure inside a wide card. */
	max-width: 75%;
	color: var(--wp--preset--color--base, #F3F4F5);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.9;
}

.tc-highlight--flips:hover .tc-highlight__inner,
.tc-highlight--flips:focus-visible .tc-highlight__inner {
	transform: rotateY(180deg);
}

.tc-highlight--flips:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #E1C19F);
	outline-offset: 4px;
}

/* A card spinning in space is exactly the kind of motion people turn this off to
   avoid. They still get the description — it just arrives. */
@media (prefers-reduced-motion: reduce) {
	.tc-highlight__inner {
		transition: none;
	}
}

/* No flip where there is no hover.
 *
 * This used to unfold instead — photo, then label and description stacked beneath
 * it — which turned a photo card with a caption over it into a white card with a
 * paragraph, so the grid read as a different component on a phone than the one in
 * the design. The card now simply stays a photo card, exactly like the ones that
 * carry no description at all.
 *
 * The description is unreachable on those devices as a result. It is a one-line
 * gloss on a label already printed on the card, and 行程安排 below covers the same
 * ground in full, so nothing is said only here.
 *
 * Keyed on hover rather than width because that is the real condition: a narrow
 * desktop window can still hover, and a wide tablet cannot. */
@media (hover: none) {
	.tc-highlight__back {
		display: none;
	}

	/* Written with the same selector shape as the rule it cancels, including the
	   pseudo-class. `.tc-highlight--flips .tc-highlight__inner` is two classes; the
	   rule that turns the card is two classes **plus :hover**, so it outranks the
	   short form and kept winning.
	
	   That mattered here because phone browsers apply :hover on tap and leave it
	   applied. The card turned, and the face it turned to is display:none — so a
	   tap wiped the card to a blank rectangle with no way back. */
	.tc-highlight--flips:hover .tc-highlight__inner,
	.tc-highlight--flips:focus .tc-highlight__inner,
	.tc-highlight--flips:focus-visible .tc-highlight__inner {
		transform: none;
		transition: none;
	}

	.tc-highlight--flips:focus-visible {
		outline: none;
	}
}

/* ---- 行程安排 ---- */
/* 行程安排 — a day is four columns: DAY n, photo, text, meals/accommodation.
 *
 * The percentages are the design's, and they only hold while there is room for
 * them. Below 1200 the row becomes a flex line whose parts each keep a floor and
 * take up slack from there, so nothing gets squeezed to the point of breaking a
 * word every line. Below 768 it stacks. */
.tc-itin {
	display: grid;
	grid-template-columns: 14% 24% 34% 28%;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	margin-bottom: var(--wp--preset--spacing--60, 2rem);
}

@media (max-width: 1200px) {
	.tc-itin {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	/* Fixed: it holds "DAY 1" and a place name or two, and shrinking it buys the
	   text nothing. */
	.tc-itin__day {
		flex: 0 0 auto;
		min-width: 96px;
		max-width: 160px;
	}

	.tc-itin__media {
		flex: 1 1 200px;
		min-width: 180px;
		max-width: 320px;
	}

	/* The paragraph takes whatever is left — it is the part that reads best wide
	   and survives being narrow. */
	.tc-itin__text {
		flex: 3 1 260px;
		min-width: 220px;
	}

	.tc-itin__meta {
		flex: 1 1 200px;
		min-width: 190px;
	}
}

.tc-itin__img {
	display: block;
	min-height: 130px;
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #E5E7EC) center/cover no-repeat;
}

.tc-itin__text p {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--contrast, #2B333B);
	line-height: 1.9;
}

.tc-itin__note {
	margin: 0;
	text-align: right;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	color: var(--wp--preset--color--subtle, #6B7280);
}

@media (max-width: 992px) {
	.tc-grid {
		grid-template-columns: repeat(min(var(--tc-cols, 3), 3), minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.tc-grid {
		grid-template-columns: repeat(min(var(--tc-cols, 3), 2), minmax(0, 1fr));
	}
	/* Stacked. The flex line above has to be undone as well as the grid, or the
	   parts keep sitting side by side on a phone. */
	.tc-itin {
		display: block;
		grid-template-columns: 1fr;
	}

	.tc-itin > * {
		max-width: none;
		min-width: 0;
	}

	.tc-itin__media,
	.tc-itin__text,
	.tc-itin__meta {
		margin-top: var(--wp--preset--spacing--40, 1rem);
	}
}

@media (max-width: 480px) {
	/* One across, like every other card grid on the site at this width. Two
	   highlight cards side by side on a 360px screen leaves about 160px each, and
	   the label is what the card is for. */
	.tc-grid {
		grid-template-columns: 1fr;
	}
}

/* Real icons ship at their own size; pin them to the design's. */
.audience-chip svg { height: 26px; width: auto; }
.itin-meta svg { height: 18px; width: auto; }
.tour-download svg { height: 20px; width: auto; }
.cost-head svg { height: 20px; width: auto; flex: 0 0 auto; }
.tc-itin__download { margin: 0.5rem 0 0; text-align: right; }