/* ==============================================================================================
   PLACEMENT PAGES — thin overrides ONLY.
   ==============================================================================================
   ⛔ THIS FILE MUST NEVER RESTATE A BAND, A TYPE SCALE, A RADIUS OR A COLOUR TOKEN.
   The placement template hangs off `#mk-resort` and loads the resort template's own stylesheet
   first, deliberately: ONE COPY OF THE RECIPE, a second consumer. That is the reasoning
   GLASS-PANEL LAW records for `.mk-panel-inner`, and the reasoning `activities.css` carries after
   its first build wrote its own band system and failed G-2 — "a design language re-implemented is
   a design language that drifts."

   Everything here is a layout that does not exist on a resort page: the quote block, the unit
   list and the gallery grid. Bands, headings, prose, chips, CTAs and the two image disclaimers
   are all inherited untouched.
   ============================================================================================== */

/* --- HERO ------------------------------------------------------------------------------------
   The placement hero carries no spec strip and no enquiry panel — it is a photograph, a
   descriptor and a CTA. It borrows the resort hero's own metrics; only the minimum height is
   reduced, because there is less in it. */
#mk-resort .mk-hero--placement { min-height: 60vh; }

/* --- THE PO'S LINE ---------------------------------------------------------------------------
   ⭐ THE ONE THING ON A PLACEMENT PAGE THAT A DESCRIPTOR CANNOT DO (design note §2a). Ruling 17
   strips the name, the brand and the address, so what is left is Mykish's judgement — and this
   block is that judgement said out loud. It is sized to be read, not skimmed: it is the reason
   the page exists. */
#mk-resort .mk-placement-quote {
	margin: 12px 0 8px;
	padding: 0 0 0 20px;
	border-left: 3px solid var(--mk-gold, #b8963f);
}
#mk-resort .mk-placement-quote p {
	margin: 0;
	font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
	line-height: 1.65;
}
#mk-resort .mk-placement-attrib {
	margin: 10px 0 0 23px;
	font-size: var(--mk-fs-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mk-grey);
}
/* ⚠ PINNED PER-GROUND. `--mk-grey` measures 4.83:1 on white — a pass — but `$mkp_band()`
   ALTERNATES, so this block's ground depends on how many sections precede it. On tint the same
   colour measures 4.37:1 and FAILS AA. That is exactly how the `.mk-smw-note` failure was born:
   it would arrive silently, as somebody else's edit inserting a section above. */
.mk-band--tint .mk-placement-attrib { color: var(--mk-ink-70, #4a4a4a); }

/* --- UNIT LIST -------------------------------------------------------------------------------
   Unit types render as DESCRIPTORS — a size and an occupancy are not a name. */
#mk-resort .mk-placement-units {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 800px) {
	#mk-resort .mk-placement-units { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
#mk-resort .mk-placement-unit {
	padding: 22px;
	border: 1px solid var(--mk-hairline, rgba(26,26,26,0.12));
	border-radius: var(--mk-r-card);
	background: var(--mk-surface, #fff);
}
#mk-resort .mk-placement-unit .mk-h3 { margin: 0 0 6px; }
#mk-resort .mk-placement-unit-facts {
	margin: 0 0 10px;
	font-size: var(--mk-fs-small);
	color: var(--mk-grey);
}
.mk-band--tint .mk-placement-unit-facts { color: var(--mk-ink-70, #4a4a4a); }

/* --- GALLERY ---------------------------------------------------------------------------------
   ⚠ SIZED FOR THE PHOTOGRAPHY WE ACTUALLY HOLD, WHICH IS THE FINDING RATHER THAN THE STYLE. The
   Kemijärvi set is ten frames at 576x768 or 1024x768 with no landscape frame above 1024px wide;
   a full-bleed row would upscale them into mush. A modest grid with `object-fit: cover` shows
   them at a size they can carry. */
#mk-resort .mk-placement-gallery {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
#mk-resort .mk-placement-frame { margin: 0; }
#mk-resort .mk-placement-frame img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--mk-r-card);
}
#mk-resort .mk-placement-cap {
	margin-top: 8px;
	font-size: var(--mk-fs-small);
	line-height: 1.6;
	color: var(--mk-grey);
}
.mk-band--tint .mk-placement-cap { color: var(--mk-ink-70, #4a4a4a); }

/* --- DEPTH SECTIONS (PO ruling 2026-09-04 at G-2) ---------------------------------------------
   Three-up columns for what's here / what's included / check-in, and the tick list they share.
   Still overrides only: the band, the heading scale and the prose come from the resort sheet. */
#mk-resort .mk-placement-cols {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
}
@media (min-width: 860px) { #mk-resort .mk-placement-cols { grid-template-columns: repeat(3, 1fr); } }
#mk-resort .mk-placement-col .mk-h2 { margin-top: 0; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); }
#mk-resort .mk-placement-ticks { list-style: none; margin: 12px 0 0; padding: 0; }
#mk-resort .mk-placement-ticks li {
	position: relative;
	padding: 0 0 0 22px;
	margin: 0 0 9px;
	line-height: 1.6;
}
/* The tick is a pseudo-element, not a character in the content — so it never reaches the leak
   test's text extraction, a screen reader, or a copied paragraph. */
#mk-resort .mk-placement-ticks li::before {
	content: "";
	position: absolute;
	left: 2px; top: 0.55em;
	width: 8px; height: 8px;
	border-left: 2px solid var(--mk-gold, #b8963f);
	border-bottom: 2px solid var(--mk-gold, #b8963f);
	transform: rotate(-45deg) translateY(-2px);
}
#mk-resort .mk-placement-areanote {
	margin: 14px 0 0;
	font-size: var(--mk-fs-small);
	color: var(--mk-grey);
}
.mk-band--tint .mk-placement-areanote { color: var(--mk-ink-70, #4a4a4a); }

/* Unit-type photograph (PO ruling 2026-09-07) — one frame per type, above its facts. */
#mk-resort .mk-placement-unit-img {
	display: block;
	width: calc(100% + 44px);
	margin: -22px -22px 16px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--mk-r-card) var(--mk-r-card) 0 0;
}
/* The attributed judgement sits under the approved line and reads as a second voice, not a louder
   one: same rule, lighter weight. It is an OPINION and is labelled as one. */
#mk-resort .mk-placement-quote--judgement { margin-top: 18px; }
#mk-resort .mk-placement-quote--judgement p { font-size: clamp(1rem, 0.94rem + 0.4vw, 1.15rem); }

/* ═══ "THE DAYS IN BETWEEN" — 62 ACTIVITY FRAMES ON ONE PAGE ═══
   A DENSER GRID THAN THE PROPERTY GALLERY, ON PURPOSE. The gallery above is the apartments and
   each frame there is a thing a reader is choosing between, so it gets room. These are CONTEXT —
   what the week looks like — and they work as a wall rather than as 62 decisions.
   ⭐ THREE COLUMNS, DECLARED — PO-RULED 2026-09-07. The previous rule was
   `auto-fill/minmax(180px, 1fr)`, which made the column count a function of the VIEWPORT: the same
   set read six-up on a desktop, two-up on a tablet and — inside a ~340px phone column — ONE up,
   which turned the wall into a ~22,000px scroll that buried the transfer block, the FAQ, the aurora
   clause and the enquiry CTA beneath it. That needed a second rule at 640px to defend against, and
   the shape still changed at every width. A DECLARED THREE is the same object at every size: the
   cells simply get smaller, which is all the mobile override was ever doing by hand.
   ⚠ SQUARE, NOT 4:3. The set mixes portrait and landscape originals from twelve different subjects;
   a 4:3 crop guillotines the portraits. A square cell crops both formats symmetrically. */
#mk-resort .mk-placement-gallery--days {
	gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 28px;
}
#mk-resort .mk-placement-gallery--days .mk-placement-frame img { aspect-ratio: 1 / 1; }

/* ⛔ MOBILE KEEPS THREE ACROSS — the count no longer needs defending, only the gap. The frames are
   a texture, not a decision each, so on a phone they get smaller rather than fewer: at a ~340px
   container three tracks are ~109px, and 62 frames are ~21 rows rather than a ~22,000px scroll
   that would bury the transfer block, the FAQ, the aurora clause and the enquiry CTA beneath it. */
@media (max-width: 640px) {
	#mk-resort .mk-placement-gallery--days { gap: 6px; }
}