/* Mykish — REVIEWS CAROUSEL, shared stylesheet.
 *
 * PO ruling 2026-08-04: the reviews carousel is ONE component, extracted from home-v2 rather than
 * copied, because copying is the mechanism that put fabricated testimonials on four legacy pages.
 * The markup, the JS and the verified quote set live in mykish_render_reviews_carousel(); these are
 * its styles, on their own stylesheet so ANY surface that renders the component also gets its look
 * — the surface-inherits-nothing failure GLASS-PANEL LAW is written about.
 *
 * Rules below are EXTRACTED VERBATIM from home-v2.css (not re-authored), so home-v2 renders
 * identically. home-v2.css still carries its own copies for now; they are byte-identical, so load
 * order cannot change the result. De-duplicating home-v2.css is a follow-up that must be done with
 * its own screenshot verification under the CSS DEPLOY RULE — not folded into this build.
 */

/* ============================================================ §5 GOOGLE REVIEWS TRUST BLOCK == */
.mkv-reviews-head {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: space-between; gap: var(--mk-space-md);
	margin-bottom: var(--mk-space-lg);
}

.mkv-reviews-head .mk-section-heading { margin-bottom: 0; }

.mkv-google-badge {
	display: flex; align-items: center; gap: 16px; text-decoration: none;
	background: var(--mk-alt-surface); border: 1px solid var(--mk-border);
	border-radius: var(--mk-r-card); padding: 14px 22px;
}

.mkv-google-badge:hover { border-color: var(--mk-teal); }

.mkv-google-badge:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 3px; }

.mkv-google-score {
	font-size: 2.25rem; font-weight: 700; line-height: 1;
	letter-spacing: var(--mk-track-display); color: var(--mk-ink);
}

.mkv-google-meta { font-size: var(--mk-fs-small); line-height: 1.5; color: var(--mk-grey); }

.mkv-google-meta span { color: var(--mk-teal-text); font-weight: 600; }

.mkv-band--dark .mkv-google-badge { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }

.mkv-band--dark .mkv-google-score { color: var(--mk-white); }

.mkv-band--dark .mkv-google-meta { color: rgba(255,255,255,0.72); }

.mkv-band--dark .mkv-google-meta span { display: block; color: var(--mk-teal); }

/* 3. BADGE INTEGRATED INTO THE HEADING LINE. It previously sat in its own flex child below the
 *    heading block, aligned to nothing. It now shares a BASELINE row with the h2. */
.mkv-reviews-head {
	display: flex; align-items: baseline; justify-content: space-between;
	flex-wrap: wrap; gap: 16px 32px; margin-bottom: var(--mk-space-lg);
}

.mkv-reviews-head .mkv-dark-heading { margin: 0; flex: 1 1 22ch; }

.mkv-band--dark .mkv-google-badge {
	display: flex; align-items: baseline; gap: 12px;
	background: none; border: 0; padding: 0; flex: 0 0 auto;
}

.mkv-band--dark .mkv-google-score {
	font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1;
	color: var(--mk-gold); letter-spacing: var(--mk-track-display);
}

.mkv-band--dark .mkv-google-meta { font-size: var(--mk-fs-small); line-height: 1.45; color: rgba(255,255,255,0.72); text-align: left; }

/* 4. GOLD, NOT CYAN. DESIGN v1.1's palette assigns Warm Gold #d4a853 to trust signals — IATA and
 *    CLIA badges, ratings, "exclusive" markers. A Google rating and the link to the public profile
 *    are exactly that, so both move off the teal. Measured 8.6:1 on the dark band. Applied to the
 *    SHELVES band's accents too: the same rule governs them and leaving one band cyan would just
 *    move the inconsistency rather than fix it — flagged for the PO to pull back if unwanted. */
.mkv-eyebrow--gold { color: var(--mk-gold); }

.mkv-band--dark .mkv-google-meta span { display: block; color: var(--mk-gold); font-weight: 600; }

/* ===== §6 REVIEWS — QUIET INTERLUDE CAROUSEL (PO brief + amendment 1, 2026-08-04) ============
 * Was: full-bleed dark band + four bordered, filled cards. Two enclosures stacking, which is what
 * "the container is smothering ours" meant. Now: light ground, no cards, italic quotes, the gold
 * badge kept, five slides on a carousel.
 *
 * NOT TALLER THAN WHAT IT REPLACES, and that is a hard constraint rather than an aspiration:
 * two-up at desktop keeps the band populated (a one-up carousel empties three-quarters of it and
 * RAISES the emptiest-screen figure), and the track height follows its tallest VISIBLE pair rather
 * than a min-height sized to the longest quote. */
.mkv-reviews--light { background: var(--mk-alt-surface); color: var(--mk-ink); }

.mkv-reviews--light .mk-section-eyebrow { color: var(--mk-gold); }

.mkv-revcar { position: relative; margin-top: var(--mk-space-lg); overflow: hidden; }

.mkv-revcar-track {
	display: flex; gap: clamp(28px, 4vw, 64px);
	transition: transform 520ms var(--mk-ease-out);
	will-change: transform;
}

/* one-up mobile, two-up desktop */
.mkv-revcar-slide { flex: 0 0 100%; min-width: 0; margin: 0; }

@media (min-width: 860px) {
	.mkv-revcar-slide { flex: 0 0 calc((100% - clamp(28px,4vw,64px)) / 2); }
}

/* NO CARD. No background, no border, no radius, no padding box — the quote carries itself and the
 * separating work is done by leading and the gap, exactly as the reference does it. */
.mkv-revcar-slide blockquote {
	margin: 0 0 18px; padding: 0; border: 0; background: none;
	font-style: italic;
	font-size: clamp(1.05rem, 1.45vw, 1.3rem);
	line-height: 1.72;
	color: var(--mk-ink);
	max-width: 46ch;              /* comfortable measure — protects the ~55ch the old grid protected */
}

.mkv-revcar-slide figcaption {
	font-size: var(--mk-fs-small); font-weight: 600; letter-spacing: var(--mk-track-tight);
	color: var(--mk-grey);
}

/* the one accent, used once, small — same hairline the cards had, kept as continuity */
.mkv-revcar-slide blockquote::before {
	content: ''; display: block; width: 28px; height: 2px;
	background: var(--mk-gold); margin-bottom: 16px;
}

.mkv-revcar-nav { display: flex; align-items: center; gap: 14px; margin-top: var(--mk-space-md); }

.mkv-revcar-btn {
	width: 38px; height: 38px; border-radius: var(--mk-r-pill);
	border: 1px solid var(--mk-border); background: transparent; color: var(--mk-ink);
	font-size: 1.15rem; line-height: 1; cursor: pointer;
	transition: border-color var(--mk-dur) var(--mk-ease), background var(--mk-dur) var(--mk-ease);
}

.mkv-revcar-btn:hover { border-color: var(--mk-teal); }

.mkv-revcar-btn:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 3px; }

.mkv-revcar-btn[disabled] { opacity: 0.35; cursor: default; }

.mkv-revcar-dots { display: inline-flex; gap: 7px; }

.mkv-revcar-dots i {
	width: 7px; height: 7px; border-radius: var(--mk-r-pill);
	background: var(--mk-border); display: block;
}

.mkv-revcar-dots i[data-on] { background: var(--mk-gold); }

.mkv-revcar-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* The badge keeps its own treatment but sits on a light ground now, so the dark-band override that
 * lifted the old cards must not apply here. */
.mkv-reviews--light .mkv-google-badge { background: var(--mk-white); }

/* --- two defects found by LOOKING at the render, both caused by moving to a light ground ------
 *
 * 1. BADGE. `display:block` on the badge's second line only ever existed inside
 *    `.mkv-band--dark .mkv-google-meta span`. Dropping the dark class to go light took the block
 *    display with it, so "66 reviews on Google" and "See the public profile →" collapsed onto one
 *    line with no space between them. Restated on the light variant rather than by re-adding a
 *    class the section no longer has.
 *
 * 2. NAV BUTTONS. They rendered as solid black rectangles. Cause is the Elementor Kit's sitewide
 *    `.elementor-kit-6 button { background-color:#1a1a1a; padding:16px 40px; }

` — documented in
 *    style.css and already beaten the same way by `.mk-region-filter button`. A bare class cannot
 *    win against it, so the overrides are !important, matching the established precedent in this
 *    codebase rather than inventing a second approach. */
.mkv-reviews--light .mkv-google-meta span {
	display: block;
	color: var(--mk-teal-text);
	font-weight: 600;
	margin-top: 2px;
}

.mkv-revcar .mkv-revcar-btn {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--mk-ink) !important;
	border: 1px solid var(--mk-border) !important;
	border-radius: var(--mk-r-pill) !important;
	padding: 0 !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	font-size: 1.15rem !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.mkv-revcar .mkv-revcar-btn:hover:not([disabled]) { border-color: var(--mk-teal) !important; }

.mkv-revcar .mkv-revcar-btn[disabled] { opacity: 0.3 !important; cursor: default !important; }