/* =============================================================================================
 * bali.css — the Bali hub's own sheet. Loaded AFTER home-v2.css (the ratified `mkv-` band system)
 * and AFTER scandinavia.css (the hub COMPONENT set: .mks-hero, .mks-props, .mks-prop, .mks-chip,
 * .mks-guide-rail). See the header of templates/bali-hub.php for why that file is loaded here and
 * why its filename is provenance rather than scope.
 *
 * ⛔ EVERY RULE BELOW IS SCOPED TO `.mk-bali-hub`, so nothing here can reach /home-v2/,
 * /destinations/scandinavia/, /destinations/maldives/ or any other surface. That is the same
 * containment maldives.css, cruises.css and tours.css each declare.
 *
 * GLASS-PANEL LAW: no panel is defined here. The hero carries its type over photography with the
 * shared halo ladder and the local bright-hero gradient, both inherited — re-declaring a fill over
 * a photograph is the ink-slab regression that law exists to stop.
 * ============================================================================================= */

/* Band rhythm — matched to the Scandinavia hub so the two read as one site. */
.mk-bali-hub .mkv-band--dark { padding: clamp(32px, 3.4vw, 40px) 0; }
.mk-bali-hub .mk-section     { padding: clamp(56px, 6vw, 88px) 0; }

/* ── §3 the property grid ─────────────────────────────────────────────────────────────────────
 * TWO tiles, not six. `.mks-props` is a single column by default and goes multi-column on the
 * Scandinavia hub through its own breakpoints; with two tiles a 2-up grid is the honest layout —
 * a six-tile grid holding two items reads as four missing properties. */
.mk-bali-hub .mkb-props--two { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) {
	.mk-bali-hub .mkb-props--two { grid-template-columns: 1fr 1fr; gap: 18px; }
}
/* The tiles carry two lines of copy rather than one, so they need more room than the Lapland
 * tiles — the "who it suits" line and the honest counter are both on the tile by design. */
.mk-bali-hub .mks-prop { min-height: 460px; }
@media (min-width: 900px) { .mk-bali-hub .mks-prop { min-height: 520px; } }
.mk-bali-hub .mks-prop-body { max-width: 46ch; }

/* ⛔ THE TILE GRADIENT RAMPS HIGHER HERE, AND IT IS STILL A GRADIENT ON A PHOTOGRAPH.
 *
 * Caught at the G-2 gate: the Seminyak tile's copy was ILLEGIBLE over its own photograph. The
 * shared `.mks-prop-media::after` ramp is anchored to the bottom and is fully transparent by 78%
 * of the tile height, which is right for a Lapland tile whose body is one line sitting in the
 * dense bottom third. A BALI TILE CARRIES THREE BLOCKS — the "who it suits" line, the honest
 * counter and the chips — so its body is roughly twice as tall and its top half sat on untouched,
 * brightly-lit pool water.
 *
 * ⛔ THE FIX IS NOT A DARKER FILL AND IT IS NOT A PANEL. GLASS-PANEL LAW names the levers in order:
 * "the type's own halo · A SLOWER GRADIENT RAMP THROUGH THE MIDDLE · the hero's own local
 * bright-hero gradient underneath", and calls re-darkening a panel fill a golden-rule-class
 * regression. This is lever two: the same anchor, the same colour, a slower ramp carried higher.
 * It stays LOCAL — fully transparent by 94%, so the top of every frame renders untouched and the
 * photograph is still visibly alive through it, which is the test the law actually sets.
 */
.mk-bali-hub .mks-prop-media::after {
	background: linear-gradient(to top,
		rgba(8,11,13,0.95) 0%,
		rgba(8,11,13,0.92) 20%,
		rgba(8,11,13,0.86) 38%,
		rgba(8,11,13,0.74) 54%,
		rgba(8,11,13,0.54) 68%,
		rgba(8,11,13,0.28) 82%,
		rgba(8,11,13,0) 94%);
}

.mk-bali-hub .mkb-suits { margin: 0 0 10px; }
/* ⭐ THE HONEST HALF IS SET QUIETER THAN THE SELLING HALF, NEVER HIDDEN. Lower opacity and a rule
 * above it mark it as a different kind of statement; it keeps full contrast against the tile's
 * dark ground, and it is never collapsed, truncated or put behind a toggle. "Honesty NEVER weakens,
 * the scare goes" (PO, 2026-08-17) — this is the visual form of that call. */
.mk-bali-hub .mkb-notfor {
	margin: 0 0 14px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	opacity: 0.92;
}

/* ── §4 seasons ───────────────────────────────────────────────────────────────────────────────
 * A facts grid, not a table — four keyed values that a reader scans rather than reads. */
.mk-bali-hub .mkb-season-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	background: var(--mk-line, rgba(26, 26, 26, 0.12));
	border: 1px solid var(--mk-line, rgba(26, 26, 26, 0.12));
	border-radius: var(--mk-r-panel, 10px);
	overflow: hidden;
	margin: 0 0 22px;
}
@media (min-width: 720px)  { .mk-bali-hub .mkb-season-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .mk-bali-hub .mkb-season-grid { grid-template-columns: repeat(4, 1fr); } }

.mk-bali-hub .mkb-season { background: var(--mk-white, #fff); padding: 18px 20px; }
.mk-bali-hub .mkb-season-k {
	margin: 0 0 6px;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mk-ink-soft, rgba(26, 26, 26, 0.62));
}
.mk-bali-hub .mkb-season-v {
	margin: 0;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.35;
	color: var(--mk-ink, #1a1a1a);
}
/* The "when not to come" line. Given the measure and the weight of body copy, not of a footnote —
 * it is the most useful sentence in the band and it is not going to be set like small print. */
.mk-bali-hub .mkb-season-note {
	margin: 0;
	max-width: 68ch;
	color: var(--mk-ink-soft, rgba(26, 26, 26, 0.72));
}