/*
 * mt-reviews.css: homepage review strip (REVIEWS-01). Enqueued by mu-plugins/mt-reviews.php on the front page only.
 * Source: velemenyek-2026-11/mockup.html block B (owner OK 2026-11-10), copied as is. Reuses the theme keyframe
 * mt-marquee-scroll (style.css) and the --mt-* tokens; everything else lives in the .mt-reviews namespace.
 */
.mt-reviews {
	--mt-reviews-card: 340px;
	--mt-reviews-gap: 24px;
	--mt-reviews-step: 12.13s;         /* (card + gap) / 30 px/s, i.e. half the magazine's speed */
	--mt-reviews-fade: 48px;
	background: var(--color-base);
	padding: 64px var(--root-padding);
}
.mt-reviews__inner { max-width: var(--wide-size); margin: 0 auto; }

/* Header: same idiom as the magazine section */
.mt-reviews__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.mt-reviews__head .wp-block-heading { margin: 45px 0 0; text-wrap: balance; }
.mt-reviews__head .wp-block-buttons { margin: 0; }

/* The moving strip */
.mt-reviews__viewport {
	margin: 22px 0 -16px;
	padding: 8px 0 24px;              /* room for the card shadow inside the mask */
	overflow-x: clip;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mt-reviews-fade), #000 calc(100% - var(--mt-reviews-fade)), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 var(--mt-reviews-fade), #000 calc(100% - var(--mt-reviews-fade)), transparent 100%);
	touch-action: pan-y;              /* vertical page scroll stays native; JS takes horizontal drags */
}
.mt-reviews__track {
	--mt-marquee-gap: var(--mt-reviews-gap);   /* the theme keyframe reads this name */
	display: flex;
	gap: var(--mt-reviews-gap);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: mt-marquee-scroll calc(var(--n, 5) * var(--mt-reviews-step)) linear infinite;
}
/* No-JS pause (with JS, mt-reviews.js owns play/pause) */
.mt-reviews:not(.is-js) .mt-reviews__viewport:hover .mt-reviews__track,
.mt-reviews:not(.is-js) .mt-reviews__viewport:focus-within .mt-reviews__track { animation-play-state: paused; }
.mt-reviews.is-dragging .mt-reviews__viewport { cursor: grabbing; user-select: none; }

/* Card */
.mt-review {
	flex: none;
	width: var(--mt-reviews-card);    /* explicit width, not just flex-basis: Gecko sizes a max-content track from the
	                                     cards' max-content (one-line text), which made Waterfox/Firefox's -50% jump ~3.8× too far */
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;                        /* theme gives .wp-block-post-content li a margin-bottom */
	padding: 22px 22px 14px;
	background: var(--color-base);
	border: 1px solid var(--color-border);
	border-radius: var(--mt-radius-md);
	box-shadow: var(--mt-shadow-sm);
}
.mt-review__who { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; }
.mt-review__avatar {
	display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--mt-blue-tint); border: 1px solid var(--mt-blue-tint-border);
	font: 700 19px/1 var(--font-heading); letter-spacing: 0; color: var(--color-primary);   /* ≥18.66px at 700 = large text: primary on blue tint is 4.3:1, needs 3:1 */
}
.mt-review__name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 16px/1.35 var(--font-heading); color: var(--color-heading); }
.mt-review__meta { display: block; font-size: 13px; line-height: 1.4; color: var(--color-muted); }
.mt-review__stars { display: flex; gap: 2px; margin: 0; line-height: 0; }
.mt-review__stars svg { width: 16px; height: 16px; fill: var(--color-border); }
.mt-review__stars svg.is-on { fill: var(--color-primary); }
.mt-review__text { margin: 0; }
.mt-review__text p {
	margin: 0;
	font-size: 15px; line-height: 1.6; color: var(--color-body);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
	hanging-punctuation: first;
}
.mt-review__text p::before { content: open-quote; }
.mt-review__text p::after { content: close-quote; }
.mt-review__text:lang(hu), .mt-review-dialog__text:lang(hu) { quotes: "„" "”"; }
.mt-review__text:lang(ro), .mt-review-dialog__text:lang(ro) { quotes: "„" "”"; }
.mt-review__text:lang(en), .mt-review-dialog__text:lang(en) { quotes: "“" "”"; }
.mt-review__tr { margin: 0; font-size: 13px; line-height: 1.4; font-style: italic; color: var(--color-muted); }
.mt-review__foot { margin-top: auto; min-height: 30px; display: flex; align-items: center; }
.mt-review__more {
	min-height: 44px; margin: -7px 0; padding: 0;
	background: none; border: 0; cursor: pointer;
	font: 600 14px/1.2 var(--font-heading); color: var(--color-primary);
	text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
	transition: text-decoration-color var(--mt-dur-fast) var(--mt-ease);
}
@media (hover: hover) and (pointer: fine) { .mt-review__more:hover { text-decoration-color: currentColor; } }

/* Footer: honesty note + controls */
.mt-reviews__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 24px; }
.mt-reviews__note { flex: 1 1 320px; max-width: 62ch; margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.mt-reviews__note a { color: var(--color-primary); text-underline-offset: 3px; }
.mt-reviews__controls { display: flex; gap: 8px; margin-left: auto; }
.mt-reviews__btn {
	display: grid; place-items: center;
	width: 44px; height: 44px; padding: 0; border-radius: 50%;
	background: var(--color-base); border: 1px solid var(--color-border); color: var(--color-primary);
	cursor: pointer;
	transition: background-color var(--mt-dur-fast) var(--mt-ease), border-color var(--mt-dur-fast) var(--mt-ease), transform var(--mt-dur-fast) var(--mt-ease);
}
.mt-reviews__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt-reviews__btn:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .mt-reviews__btn:hover { background: var(--mt-blue-tint); border-color: var(--mt-blue-tint-border); } }
.mt-reviews__btn[aria-pressed="true"] { background: var(--mt-blue-tint); border-color: var(--color-primary); }
.mt-reviews__btn .i-play { display: none; }
.mt-reviews__btn[aria-pressed="true"] .i-play { display: block; }
.mt-reviews__btn[aria-pressed="true"] .i-pause { display: none; }
.mt-reviews:not(.is-js) .mt-reviews__controls { display: none; }   /* buttons need JS */

/* Read-more dialog */
.mt-review-dialog {
	width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
	padding: 0; border: 0; border-radius: var(--mt-radius-md);
	background: var(--color-base); color: var(--color-body); box-shadow: var(--mt-shadow-md);
	opacity: 0; transform: scale(.97);
	transition: opacity var(--mt-dur-base) var(--mt-ease), transform var(--mt-dur-base) var(--mt-ease), overlay var(--mt-dur-base) allow-discrete, display var(--mt-dur-base) allow-discrete;
}
.mt-review-dialog[open] { opacity: 1; transform: none; }
@starting-style { .mt-review-dialog[open] { opacity: 0; transform: scale(.97); } }
.mt-review-dialog::backdrop { background: rgb(55 72 94 / 0); transition: background-color var(--mt-dur-base) var(--mt-ease), overlay var(--mt-dur-base) allow-discrete, display var(--mt-dur-base) allow-discrete; }
.mt-review-dialog[open]::backdrop { background: rgb(55 72 94 / .45); }
@starting-style { .mt-review-dialog[open]::backdrop { background: rgb(55 72 94 / 0); } }
.mt-review-dialog__body { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.mt-review-dialog__top { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; align-items: start; }
.mt-review-dialog__close { width: 44px; height: 44px; margin: -10px -10px 0 0; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--color-muted); cursor: pointer; }
.mt-review-dialog__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .mt-review-dialog__close:hover { background: var(--color-section); color: var(--color-heading); } }
.mt-review-dialog__text { margin: 0; font-size: 16px; line-height: 1.65; }
.mt-review-dialog__text::before { content: open-quote; }
.mt-review-dialog__text::after { content: close-quote; }
.mt-review-dialog__link { align-self: flex-start; font: 600 15px/1.3 var(--font-heading); color: var(--color-primary); text-underline-offset: 4px; }

/* Breakpoints: same scale as the magazine (782 / 480) */
@media (max-width: 782px) {
	.mt-reviews { --mt-reviews-card: 300px; --mt-reviews-gap: 20px; --mt-reviews-step: 10.67s; --mt-reviews-fade: 32px; padding-block: 56px; }
	.mt-reviews__head .wp-block-heading { margin-top: 28px; }
}
@media (max-width: 480px) {
	.mt-reviews { --mt-reviews-card: 280px; --mt-reviews-gap: 16px; --mt-reviews-step: 9.87s; --mt-reviews-fade: 20px; }
	.mt-review { padding-inline: 18px; }
}

/* Reduced motion: no drift. A native scroller with snap; arrows scroll one card. */
.mt-reviews[data-motion="reduced"] .mt-reviews__track { animation: none; }
.mt-reviews[data-motion="reduced"] .mt-reviews__viewport {
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	-webkit-mask-image: none; mask-image: none;
	scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}
.mt-reviews[data-motion="reduced"] .mt-review { scroll-snap-align: start; }
.mt-reviews[data-motion="reduced"] .mt-review[aria-hidden="true"] { display: none; }
.mt-reviews[data-motion="reduced"] .mt-reviews__btn--pause { display: none; }
.mt-reviews[data-motion="reduced"] .mt-review-dialog { transform: none; }
@media (prefers-reduced-motion: reduce) {   /* same, for visitors without JS */
	.mt-reviews:not(.is-js) .mt-reviews__track { animation: none; }
	.mt-reviews:not(.is-js) .mt-reviews__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
	.mt-reviews:not(.is-js) .mt-review[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Port additions (not in the mockup). The mockup ran on claude-design-fooldal-2026-11/assets/tokens.css plus a
   theme emulation (its block A). On the live page three things differ, so the strip needs these lines to look
   like the approved mockup:
   ========================================================================== */
/* 1. The mockup's token names don't exist on live: map them to the live theme.json presets (same values). */
.mt-reviews {
	--color-base: var(--wp--preset--color--base);
	--color-section: var(--wp--preset--color--section);
	--color-border: var(--wp--preset--color--border);
	--color-body: var(--wp--preset--color--body);
	--color-muted: var(--wp--preset--color--muted);
	--color-heading: var(--wp--preset--color--heading);
	--color-primary: var(--wp--preset--color--primary);
	--font-heading: var(--wp--preset--font-family--heading);
	--root-padding: var(--wp--style--root--padding-left);
	--wide-size: var(--wp--style--global--wide-size);
}
/* 2. Block A set border-box on everything; the live theme doesn't (same idiom as its own .mt-post). Without it the
      cards come out 384 px wide instead of 340. */
.mt-reviews { box-sizing: border-box; }
.mt-reviews *, .mt-reviews *::before, .mt-reviews *::after { box-sizing: inherit; }
/* 3. The cards sit inside .wp-block-post-content, whose `li { margin-bottom: 8px }` (0,1,1; :last-child 0) beats
      `.mt-review { margin: 0 }` (0,1,0) and would make the last card 8 px taller. (0,2,0) wins. Same for the eyebrow
      paragraph, which block A gave margin 0 (on live, the magazine's eyebrow gets it from its block layout). */
.mt-reviews__track > .mt-review { margin: 0; }
.mt-reviews__head .mt-eyebrow { margin: 0; }