/* ============================================================================================
 * mykish-packages/style.css — the two packages pages. Task Odoo 1168.
 *
 * ⛔ THIN OVERRIDES ONLY. Loaded AFTER mykish-core-pages/home-v2.css, which owns the RATIFIED band
 * system (`.mkv-band--dark`, `.mkv-band--feature` + the glass panel, `.mkv-hero*`, the type scale,
 * the radii). Nothing here restates a band, a type scale, a radius or the glass recipe:
 * GLASS-PANEL LAW — the recipe is INHERITED, never re-derived, because "a design language
 * re-implemented is a design language that drifts", and a shared value living in a private file is
 * a bug waiting for a second consumer.
 *
 * ⛔ EVERY RULE IS SCOPED TO `.mk-packages`, the body class this template sets. Nothing in this file
 * can reach /home-v2/, either hub, a deal page or any other surface. Two rules are scoped tighter
 * still, to `--lapland` / `--maldives`, and they are noted where they appear.
 *
 * ⛔ NO CYAN. DESIGN v1.1's palette assigns Warm Gold #d4a853 to trust signals and accents, and the
 * Scandinavia brief pinned this to "gold accent only". Followed here so the two Lapland surfaces
 * read as one site.
 * ========================================================================================== */

/* ── §1 HERO ──────────────────────────────────────────────────────────────────────────────
 * Geometry is home-v2's. The only change is the eyebrow colour on the glass panel, and the
 * measure on the H1 — a search-intent H1 is a short phrase and should not stretch to the panel. */
.mk-packages .mkp-hero-eyebrow { color: var(--mk-gold); }
.mk-packages .mkp-hero .mkv-hero-title { max-width: 22ch; }

/* AA-SAFE GOLD ON WHITE. #d4a853 measures 1.9:1 on white — the token is for dark grounds only, and
 * using it on a light band would be a contrast failure that looks like a brand decision. Same
 * darkened family the Scandinavia hub uses on its light bands (measured 4.9:1). */
.mk-packages .mk-section-eyebrow { color: #8a6a1f; }
.mk-packages .mkv-eyebrow--gold,
.mk-packages .mkv-eyebrow--on-dark { color: var(--mk-gold); }
.mk-packages .mk-section-heading { max-width: 26ch; }

/* ── §2 THE PACKAGE GRID ──────────────────────────────────────────────────────────────────
 * auto-fit rather than a fixed column count: the shelf is DERIVED and its size changes on its own
 * (four live packages today, two on 1 October when dusitD2's own deadline passes). A hardcoded
 * 2-up or 3-up would leave a hole the day the shelf changed — the empty-band failure TEMPLATES §5.2
 * records, one level down. */
.mk-packages .mkp-lede { margin: 0 0 6px; }
.mk-packages .mkp-nosteer { margin: 0 0 var(--mk-space-md); color: var(--mk-grey); max-width: 68ch; }
.mk-packages .mkp-empty { max-width: 68ch; }
.mk-packages .mkp-grid {
	display: grid; gap: clamp(18px, 2vw, 28px); margin: 0 0 var(--mk-space-md); padding: 0;
	list-style: none; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.mk-packages .mkp-card {
	display: flex; flex-direction: column; background: var(--mk-white);
	border: 1px solid var(--mk-border); border-radius: var(--mk-r-card);
	box-shadow: var(--mk-shadow); overflow: hidden;
}
.mk-packages .mkp-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.mk-packages .mkp-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-packages .mkp-card-body { display: flex; flex-direction: column; padding: clamp(18px, 2vw, 26px); }

.mk-packages .mkp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.mk-packages .mkp-chip {
	font-size: var(--mk-fs-small); font-weight: 600; letter-spacing: var(--mk-track-wide);
	text-transform: uppercase; color: var(--mk-teal-text); background: var(--mk-alt-surface);
	border-radius: var(--mk-r-pill); padding: 4px 12px;
}
.mk-packages .mkp-chip--band { color: #8a6a1f; background: rgba(212, 168, 83, 0.14); }

.mk-packages .mkp-card-title {
	margin: 0 0 4px; font-size: var(--mk-fs-h3); font-weight: 700;
	line-height: var(--mk-lh-heading); letter-spacing: var(--mk-track-tight);
}
.mk-packages .mkp-card-title a { color: var(--mk-ink); text-decoration: none; }
.mk-packages .mkp-card-title a:hover { text-decoration: underline; }
.mk-packages .mkp-card-where {
	margin: 0 0 14px; font-size: var(--mk-fs-small); color: var(--mk-grey);
}

/* ── THE FIGURE AND ITS BASIS, AS ONE VISUAL BLOCK ────────────────────────────────────────
 * ⛔ THIS IS NOT DECORATION. On a page that sets several offers side by side, a Lapland figure is
 * PER PERSON and land-only while a Maldives figure is PER COUPLE for a villa and five nights — two
 * numbers of similar size meaning different things. The basis sentence is therefore bound to the
 * figure by a shared rule, no margin between them, and it is never allowed to look like a footnote:
 * the PO's standing objection is "a price with no land-only qualifier anywhere is a claim I cannot
 * defend." */
.mk-packages .mkp-price {
	margin: 0; display: flex; align-items: baseline; gap: 8px;
}
.mk-packages .mkp-price-label {
	font-size: var(--mk-fs-small); text-transform: uppercase;
	letter-spacing: var(--mk-track-wide); color: var(--mk-grey);
}
.mk-packages .mkp-price-figure {
	font-size: var(--mk-fs-h2); font-weight: 700; line-height: 1.1;
	letter-spacing: var(--mk-track-tight); color: var(--mk-ink);
}
.mk-packages .mkp-price--enquire {
	font-size: var(--mk-fs-h3); font-weight: 700; color: var(--mk-ink);
}
.mk-packages .mkp-basis {
	margin: 6px 0 0; font-size: var(--mk-fs-small); line-height: var(--mk-lh-body);
	color: #2a2c30; max-width: 54ch;
}
.mk-packages .mkp-valid {
	margin: 12px 0 0; font-size: var(--mk-fs-small); font-weight: 600; color: var(--mk-teal-text);
}
.mk-packages .mkp-why {
	margin: 16px 0 0; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: #2a2c30;
}
.mk-packages .mkp-incl-head {
	margin: 18px 0 8px; font-size: var(--mk-fs-small); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--mk-track-wide); color: var(--mk-grey);
}
.mk-packages .mkp-incl { margin: 0; padding: 0 0 0 20px; }
.mk-packages .mkp-incl li {
	margin: 0 0 6px; font-size: var(--mk-fs-small); line-height: var(--mk-lh-body); color: #2a2c30;
}
/* `margin-top:auto` so the link sits on the card's floor whatever the card above it holds — the
 * grid rows are equal height and the inclusion lists are not. */
.mk-packages .mkp-card-actions { margin: auto 0 0; padding-top: 18px; }
.mk-packages .mkp-card-link { font-weight: 600; font-size: var(--mk-fs-small); }
.mk-packages .mkp-allofthem {
	margin: 0; font-size: var(--mk-fs-small);
	/* ⛔ `max-width: none` OVERRIDES `.mk-prose`'s measure ON PURPOSE. `--mk-measure` is a READING
	 * measure and this is a row of two links; at 68ch the second link wrapped mid-phrase
	 * ("Browse Lapland / & Scandinavia"), which reads as a broken line rather than a considered one. */
	max-width: none;
}

/* ── §3 DEPARTURE BASICS (dark band — geometry from home-v2) ─────────────────────────────
 * SHARED between a shelf's two pages; only the departure label inside the copy differs, and it is
 * spliced from one string rather than duplicated (PO ruling 2026-09-25 (1): shared cards, prices
 * and FAQ from the same fields). */
.mk-packages .mkp-basics-grid {
	display: grid; gap: clamp(20px, 2.4vw, 36px); margin-top: var(--mk-space-md);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mk-packages .mkp-basics-h {
	margin: 0 0 10px; font-size: var(--mk-fs-h3); font-weight: 700;
	line-height: var(--mk-lh-heading); letter-spacing: var(--mk-track-tight); color: var(--mk-on-dark);
}
.mk-packages .mkp-basics-p {
	margin: 0; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body);
	color: rgba(255, 255, 255, 0.82); max-width: 52ch;
}


/* ── §3b(a) DEPARTURE CITIES — the AUSTRALIA pages only ───────────────────────────────────
 * PO ruling 2026-09-25 (1): five cities, facts only. ⛔ THE LIST IS DELIBERATELY TYPOGRAPHIC AND
 * NOT A CARD GRID. Cards imply per-city content, and there is none to hold — this site holds no
 * route, carrier, flight time or airfare for any of them, and a card with a city name and nothing
 * else is an invitation for the next session to fill it with something unsourceable. A row of names
 * says exactly what is known. */
.mk-packages .mkp-cities-lede { margin: 0 0 var(--mk-space-sm); }
.mk-packages .mkp-cities-list {
	display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 var(--mk-space-sm); padding: 0;
	list-style: none;
}
.mk-packages .mkp-city {
	font-size: var(--mk-fs-body); font-weight: 600; color: var(--mk-ink);
	background: var(--mk-alt-surface); border-radius: var(--mk-r-pill); padding: 8px 18px;
}
.mk-packages .mkp-city a { color: var(--mk-teal-text); text-decoration: none; }
.mk-packages .mkp-city a:hover { text-decoration: underline; }
.mk-packages .mkp-cities-note { margin: 0; font-size: var(--mk-fs-small); color: var(--mk-grey); }

/* ── §3b(b) BRISBANE PROOF — the BRISBANE pages only ──────────────────────────────────────
 * PO ruling 2026-09-25 (1): office, reviews, Brisbane-based agent. Same three-column fact shape as
 * §4 below, inherited rather than re-derived — the two blocks do the same job on the same page and
 * a second geometry for it would be a second thing to keep in step. */
.mk-packages .mkp-local-list {
	display: grid; gap: clamp(20px, 2.4vw, 36px); margin: var(--mk-space-md) 0 var(--mk-space-sm);
	padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mk-packages .mkp-local-item { display: flex; flex-direction: column; gap: 6px; }
.mk-packages .mkp-local-mark {
	font-size: var(--mk-fs-small); font-weight: 700; letter-spacing: var(--mk-track-wide);
	text-transform: uppercase; color: var(--mk-teal-text);
}
.mk-packages .mkp-local-mark--gold { color: #8a6a1f; }   /* same reasoning as .mkp-fact-mark--gold above */
.mk-packages .mkp-local-head {
	font-size: var(--mk-fs-body); font-weight: 700; line-height: var(--mk-lh-heading); color: var(--mk-ink);
}
.mk-packages .mkp-local-line {
	font-size: var(--mk-fs-small); line-height: var(--mk-lh-body); color: var(--mk-grey);
}
.mk-packages .mkp-local-au { margin: 0; font-size: var(--mk-fs-small); max-width: none; }

/* ── §4 WHY BOOK THROUGH MYKISH ───────────────────────────────────────────────────────── */
/* ⛔ THE TRACK MINIMUM IS 190px BECAUSE THE LIST GROWS BY ONE. With `minmax(230px, 1fr)` a wide
 * container fits FOUR columns, so the fifth fact — which appears whenever the stay line applies —
 * dropped onto a row of its own and read as an afterthought stapled under the band. 190px fits all
 * five across at 1440 and still collapses cleanly below. Measured on the rendered page (G-2), not
 * reasoned from the numbers. */
.mk-packages .mkp-facts {
	display: grid; gap: clamp(20px, 2.4vw, 36px); margin: var(--mk-space-md) 0 0; padding: 0;
	list-style: none; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.mk-packages .mkp-fact { display: flex; flex-direction: column; gap: 6px; }
.mk-packages .mkp-fact-mark {
	font-size: var(--mk-fs-small); font-weight: 700; letter-spacing: var(--mk-track-wide);
	text-transform: uppercase; color: var(--mk-teal-text);
}
/* ⛔ THE MARK IS ONE LINE, THE SAME SIZE, IN EVERY CELL — AND THAT IS THE FIX FOR TWO DEFECTS AT
 * ONCE. `--gold` was doing two jobs: a colour, and an h3 size written for the "5.0" numeral. Applied
 * to the word "First-hand" it rendered oversized and lower-case beside four small uppercase marks —
 * one cell shouting in a row of five. And the size bump made the "5.0" cell's HEADING sit ~20px
 * below the other four, a visible stagger across the whole band.
 *
 * ⭐ SO THE SIZE BUMP IS GONE RATHER THAN SCOPED. A mark is a label; five labels on one baseline
 * read as a set, and "5.0" needs no emphasis to be understood — it has the only gold in the row and
 * a linked rating directly beneath it. Emphasis that costs the alignment of four neighbours is not
 * emphasis, it is noise. (/travel-agent-brisbane/ keeps its larger 5.0 in its own sheet: three cells,
 * not five, and a passed surface this build does not touch.) Caught by eye on the rendered page. */
.mk-packages .mkp-fact-mark--gold { color: #8a6a1f; }
.mk-packages .mkp-fact-head {
	font-size: var(--mk-fs-body); font-weight: 700; line-height: var(--mk-lh-heading); color: var(--mk-ink);
}
.mk-packages .mkp-fact-line {
	font-size: var(--mk-fs-small); line-height: var(--mk-lh-body); color: var(--mk-grey);
}
/* The shared Google line brings its own <p>; inside a fact cell it must not add a second margin. */
.mk-packages .mkp-fact-line .mk-google-line { margin: 0; }

.mk-packages .mkp-firsthand {
	display: grid; gap: clamp(18px, 2vw, 28px); margin-top: var(--mk-space-md);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.mk-packages .mkp-firsthand-item {
	margin: 0; padding: clamp(18px, 2vw, 26px); background: var(--mk-alt-surface);
	border-left: 3px solid var(--mk-gold); border-radius: var(--mk-r-card);
}
.mk-packages .mkp-firsthand-quote {
	margin: 0 0 10px; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: var(--mk-ink);
}
.mk-packages .mkp-firsthand-attrib { font-size: var(--mk-fs-small); color: var(--mk-grey); }

/* ── §5 FAQ ───────────────────────────────────────────────────────────────────────────────
 * `<details>`/`<summary>` — the site's established accordion. The numbered typographic identity is
 * the Scandinavia hub's `mks-guide-*` rail, inherited in spirit and scoped here; the marker is a
 * CSS-drawn chevron so nothing depends on a font glyph or an icon file. */
.mk-packages .mkp-faq-rail { border-top: 1px solid var(--mk-border); margin-top: var(--mk-space-md); }
.mk-packages .mkp-faq-item { border-bottom: 1px solid var(--mk-border); }
.mk-packages .mkp-faq-q {
	display: flex; align-items: baseline; gap: 16px; padding: 20px 0; cursor: pointer;
	list-style: none; font-size: var(--mk-fs-lead); font-weight: 700;
	line-height: var(--mk-lh-heading); letter-spacing: var(--mk-track-tight); color: var(--mk-ink);
}
.mk-packages .mkp-faq-q::-webkit-details-marker { display: none; }
.mk-packages .mkp-faq-n {
	flex: 0 0 auto; font-size: var(--mk-fs-small); font-weight: 700;
	letter-spacing: var(--mk-track-wide); color: #8a6a1f;
}
.mk-packages .mkp-faq-t { flex: 1 1 auto; }
.mk-packages .mkp-faq-mark {
	flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px;
	border-right: 2px solid var(--mk-grey); border-bottom: 2px solid var(--mk-grey);
	transform: rotate(45deg); transition: transform var(--mk-dur) var(--mk-ease);
}
.mk-packages .mkp-faq-item[open] .mkp-faq-mark { transform: rotate(225deg); }
.mk-packages .mkp-faq-a { padding: 0 0 22px 46px; }
.mk-packages .mkp-faq-a p {
	margin: 0; max-width: 72ch; font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body); color: #2a2c30;
}
@media (max-width: 640px) {
	.mk-packages .mkp-faq-a { padding-left: 0; }
}
/* An interruptible transition is the only motion on this page; a reader who has asked for less
 * motion gets the state change without it. */
@media (prefers-reduced-motion: reduce) {
	.mk-packages .mkp-faq-mark { transition: none; }
}

/* ── §6 DISCLAIMER ────────────────────────────────────────────────────────────────────── */
.mk-packages .mkp-disclaimer { padding-top: 0; }
.mk-packages .mkp-disclaimer-p {
	margin: 0; max-width: 88ch; font-size: var(--mk-fs-small);
	line-height: var(--mk-lh-body); color: var(--mk-grey);
}

/* ── THE AURORA HONESTY CLAUSE'S CONTAINER ────────────────────────────────────────────────
 * ⛔ `mykish_aurora_honesty_block()` HARDCODES AN INNER `.mk-band-inner`, AND THAT CLASS IS DEFINED
 * ONLY IN `mykish-resort-template/style.css` — WHICH THIS PAGE DOES NOT ENQUEUE. Without this rule
 * the PO's verbatim sentence renders EDGE TO EDGE AND UNSTYLED while every count-based check reports
 * the clause present. The Scandinavia hub hit exactly this and carries the identical rule; it is
 * scoped HERE rather than fixed in the shared block, because that block's two other callers load the
 * resort sheet and are correct today — changing it would risk two passed surfaces to save one rule.
 * Geometry copied from `.mk-container` deliberately: same tokens, same measure as every other band.
 * ⭐ Lapland only in practice (the Maldives row sets `aurora_clause => false`), but the rule is
 * written against `.mk-packages` so a future row that needs the clause inherits it. */
.mk-packages .mk-aurora-honesty .mk-band-inner {
	max-width: var(--mk-container); margin: 0 auto; padding: 0 var(--mk-pad-x);
}
.mk-packages .mk-aurora-honesty {
	padding: clamp(28px, 3vw, 44px) 0; border-top: 1px solid var(--mk-border); background: var(--mk-white);
}
.mk-packages .mk-aurora-honesty-line {
	margin: 0; max-width: 76ch; font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body); color: var(--mk-grey);
}

/* ── §7 FINAL CTA ─────────────────────────────────────────────────────────────────────────
 * Structure is `.mkv-band--feature` + `.mkv-feature-panel` from home-v2.css, reused verbatim — the
 * ratified glass recipe over a full-bleed photograph, not a second implementation of it. Only the
 * button inside the panel is new, and it is the Scandinavia hub's own inversion. */
.mk-packages .mkp-cta-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
/* The panel's own type comes from home-v2.css — `.mkv-feature-kicker` (eyebrow),
 * `.mkv-feature-title` (h2) and `.mkv-feature-copy`, each with the ratified halo ladder. ⛔ Nothing
 * here restates a colour or a shadow for them: the heading being near-black on a bright photograph
 * was a WRONG CLASS in the markup, not a missing rule, and "fixing" it in this sheet would have
 * hidden the defect while leaving the next surface to hit it again. */
.mk-packages .mkv-feature-panel .mkp-cta-actions .mk-cta {
	background: var(--mk-white); color: var(--mk-ink) !important; border-color: var(--mk-white);
	font-weight: 700;
}
.mk-packages .mkv-feature-panel .mkp-cta-actions .mk-cta:hover {
	background: var(--mk-alt-surface); border-color: var(--mk-alt-surface); color: var(--mk-ink) !important;
}