/* =====================================================================
   W27.9 - Produktratgeber
   =====================================================================
   Loaded only where the block is (inc/product-guide-render.php enqueues
   from the render callback), so no other page pays for it.

   The source CSS (SK_kviz_JL.css) is a dark panel with red accents,
   pill buttons, rounded cards and a horizontal rail. That reading of the
   brand is kept. Its literal values are not: every radius, shadow, band
   and type size below comes from the theme's own tokens, so the guide
   ages with the rest of the storefront instead of drifting away from it.

   The one structural departure is the rail. The original moves a flex
   track with `transform: translateX()` and recomputes the step width on
   every resize; that is what breaks when a webfont loads and the card is
   suddenly 4px wider. Here the rail is a scroll container with
   scroll-snap: the browser owns the geometry, swipe and keyboard work
   with no script, and the arrows only call scrollBy().
   ===================================================================== */

.mitode-pg {
	--pg-ink: #fff;
	--pg-panel: linear-gradient(135deg, var(--wp--preset--color--dark, #1a1a1a) 0%, var(--wp--preset--color--dark-deep, #0a0a0a) 100%);
	--pg-accent: var(--wp--preset--color--accent, #f80120);
	--pg-line: rgba(255, 255, 255, .16);
	--pg-card: rgba(255, 255, 255, .04);

	position: relative;
	background: var(--pg-panel);
	color: var(--pg-ink);
	border-radius: var(--mitode-radius-lg);
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
	box-shadow: var(--mitode-shadow-pop);
	/* The panel is the width of the page column it sits in; nothing here
	   may push the document sideways. */
	max-width: 100%;
	overflow: hidden;
}

.mitode-pg__title {
	margin: 0 0 .75rem;
	font-size: clamp(1.375rem, 3vw, 2rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--pg-ink);
	text-align: center;
}

.mitode-pg__title:focus-visible {
	outline: 2px solid var(--pg-accent);
	outline-offset: 4px;
}

.mitode-pg__lede {
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
	max-width: 46rem;
	text-align: center;
	font-size: var(--mitode-fs-lede);
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}

/* ---------- the bar with back / restart ---------- */

.mitode-pg__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
	flex-wrap: wrap;
}

.mitode-pg__back,
.mitode-pg__restart {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;               /* touch target */
	padding: .5rem 1.1rem;
	border-radius: var(--mitode-radius-pill);
	border: 1px solid var(--pg-line);
	background: transparent;
	color: var(--pg-ink);
	font: inherit;
	font-size: .9375rem;
	cursor: pointer;
	transition: border-color .2s var(--mitode-ease), background-color .2s var(--mitode-ease);
}

.mitode-pg__back:hover,
.mitode-pg__restart:hover {
	border-color: var(--pg-accent);
	background: rgba(248, 1, 32, .12);
}

.mitode-pg__back:focus-visible,
.mitode-pg__restart:focus-visible,
.mitode-pg__option:focus-visible,
.mitode-pg__arrow:focus-visible,
.mitode-pg__viewport:focus-visible {
	outline: 2px solid var(--pg-accent);
	outline-offset: 3px;
}

.mitode-pg__back-arrow {
	width: 1rem;
	height: 1rem;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-inline-end: .1rem;
}

.mitode-pg__restart {
	font-size: .875rem;
	opacity: .8;
}

/* ---------- the option buttons ---------- */

/*
 * W27.10 - THE FOUR ENTRY CHIPS BELONG IN ONE ROW.
 *
 * The old template was `repeat(auto-fit, minmax(15rem, 1fr))` inside a
 * 54rem box. Four columns of 15rem need 60rem plus three gaps, so the
 * fourth chip could never fit and the entry screen was always 3 + 1 - the
 * one shape a four-way choice must not have, because the wrapped option
 * reads as an afterthought rather than as a peer of the other three.
 *
 * Widening the box alone would not have fixed it either: `auto-fit`
 * derives the count from the container, so the same rule that gives four
 * columns at 1440 gives three at 834, where the brief asks for two by two.
 * The count is therefore stated per breakpoint, and `data-count` (written
 * by product-guide.js) keeps a three-option step from leaving a hole in
 * the fourth column.
 *
 * Base is 2 x 2 - the phone case is handled at the bottom of this file.
 */
.mitode-pg__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(.6rem, 1.5vw, 1rem);
	max-width: 62rem;
	margin-inline: auto;
}

/* Desktop: four across. A step with 2 or 3 options keeps its own count so
   the chips stay full width instead of hanging in a four-column frame. */
@media (min-width: 1024px) {
	.mitode-pg__options {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.mitode-pg__options[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
	.mitode-pg__options[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 44rem; }
	.mitode-pg__options[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 52rem; }
	.mitode-pg__options[data-count="5"],
	.mitode-pg__options[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 52rem; }
}

/*
 * The chip itself: smaller, quieter, and still a legitimate touch target.
 *
 * 2.75rem of min-height is 44px, the size a finger needs; the padding and
 * the icon came down, not the target. The label may wrap to two lines, so
 * the height is a minimum and not a fixed box.
 */
.mitode-pg__option {
	display: flex;
	align-items: center;
	gap: .55rem;
	width: 100%;
	min-height: 2.75rem;
	padding: .6rem .8rem;
	text-align: start;
	border-radius: var(--mitode-radius);
	border: 1px solid var(--pg-line);
	background: var(--pg-card);
	color: var(--pg-ink);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color .2s var(--mitode-ease), background-color .2s var(--mitode-ease), transform .2s var(--mitode-ease);
}

.mitode-pg__option:hover {
	border-color: var(--pg-accent);
	background: rgba(248, 1, 32, .1);
}

.mitode-pg__icon {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	fill: none;
	stroke: var(--pg-accent);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- the result rail ---------- */

.mitode-pg__rail {
	position: relative;
	margin-top: clamp(1rem, 2.5vw, 1.75rem);
}

.mitode-pg__viewport {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	padding-block: .25rem 1rem;
	/* The scrollbar is styled, not hidden: hiding it removes the only
	   affordance a mouse user has that the rail scrolls at all. */
	scrollbar-width: thin;
	scrollbar-color: var(--pg-accent) rgba(255, 255, 255, .1);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.mitode-pg-card {
	scroll-snap-align: start;
	flex: 0 0 clamp(13rem, 30%, 17rem);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem;
	border-radius: var(--mitode-radius-lg);
	border: 1px solid var(--pg-line);
	background: var(--pg-card);
	box-sizing: border-box;
}

.mitode-pg-card__media {
	display: block;
	aspect-ratio: var(--mitode-card-ratio, 3 / 4);
	border-radius: var(--mitode-radius);
	overflow: hidden;
	background: #fff;
}

.mitode-pg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.mitode-pg-card__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .08);
}

.mitode-pg-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 600;
	/* Two lines, so a rail of cards has one baseline for the price row. */
	min-height: var(--mitode-card-title-h, 2.7rem);
	/*
	 * A variation's name repeats the parent's ("… - Weiß, 36"), so on a
	 * variation card the name is clamped to two lines and the difference
	 * is carried by .mitode-pg-card__variant underneath it.
	 */
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.mitode-pg-card__title a {
	color: var(--pg-ink);
	text-decoration: none;
}

.mitode-pg-card__title a:hover {
	text-decoration: underline;
}

/* The variation's own identity, under the product name. */
.mitode-pg-card__variant {
	margin: -.15rem 0 0;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--pg-accent);
}

.mitode-pg-card__price {
	margin: 0;
	font-size: 1.125rem;
	color: var(--pg-ink);
}

.mitode-pg-card__from {
	font-size: .8125rem;
	color: rgba(255, 255, 255, .7);
}

.mitode-pg-card__old {
	font-size: .875rem;
	color: rgba(255, 255, 255, .55);
}

.mitode-pg-card__flags {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	font-size: .75rem;
	min-height: 1.15rem;
}

.mitode-pg-card__stock,
.mitode-pg-card__ship {
	display: inline-flex;
	align-items: center;
	padding: .1rem .55rem;
	border-radius: var(--mitode-radius-pill);
	border: 1px solid var(--pg-line);
	line-height: 1.6;
}

.mitode-pg-card__stock.is-in { color: #7ee2a0; border-color: rgba(126, 226, 160, .4); }
.mitode-pg-card__stock.is-back { color: #ffcf6b; border-color: rgba(255, 207, 107, .4); }
.mitode-pg-card__stock.is-out { color: rgba(255, 255, 255, .65); }
.mitode-pg-card__ship { color: #fff; border-color: rgba(248, 1, 32, .55); }

/*
 * `.mitode-pg .mitode-pg-card__cta`, two classes, not one.
 *
 * The element carries `wp-element-button`, and WordPress's global-styles
 * sheet targets it as `:root :where(.wp-element-button)` - also (0,1,0).
 * A single-class rule here is a TIE decided by source order, and the source
 * order changed the moment this sheet moved from a render callback (footer)
 * to wp_enqueue_scripts (head). Winning by position is winning by accident.
 */
.mitode-pg .mitode-pg-card__cta {
	margin-top: auto;
	text-align: center;
	background: var(--pg-accent);
	color: #fff;
	border-radius: var(--mitode-radius-pill);
	padding: .6rem 1rem;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
}

.mitode-pg .mitode-pg-card__cta:hover {
	background: var(--wp--preset--color--accent-dark, #bb0101);
	color: #fff;
}

/* ---------- arrows ---------- */

/*
 * `:not([hidden])`, because the script hides this element with
 * `nav.hidden = true` and an author `display: flex` beats the user-agent's
 * `[hidden] { display: none }`. Without it, a result whose cards all fit
 * showed two greyed-out arrows that did nothing - which is most result
 * screens at 1440. The gallery rail already guards its arrows this way
 * (main.css, .mitode-gallery__arrow); these two rails did not.
 */
.mitode-pg__nav:not([hidden]) {
	display: flex;
	justify-content: center;
	gap: .75rem;
	margin-top: .25rem;
}

.mitode-pg__arrow {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mitode-radius);
	border: 1px solid var(--pg-line);
	background: transparent;
	color: var(--pg-ink);
	cursor: pointer;
	transition: background-color .2s var(--mitode-ease), border-color .2s var(--mitode-ease);
}

.mitode-pg__arrow svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mitode-pg__arrow:hover:not([disabled]) {
	border-color: var(--pg-accent);
	background: rgba(248, 1, 32, .14);
}

.mitode-pg__arrow[disabled] {
	opacity: .35;
	cursor: not-allowed;
}

/* ---------- status, no-script, unavailable ---------- */

.mitode-pg__status {
	margin: 1rem 0 0;
	text-align: center;
	color: rgba(255, 255, 255, .8);
}

.mitode-pg__noscript ul {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	justify-content: center;
}

.mitode-pg__noscript a { color: #fff; }

.mitode-pg.is-unavailable {
	text-align: center;
}

.mitode-pg.is-unavailable a { color: #fff; }

/* ---------- narrow screens ---------- */

@media (max-width: 600px) {
	.mitode-pg {
		border-radius: var(--mitode-radius);
		padding: 1.25rem .9rem;
	}

	.mitode-pg__options {
		grid-template-columns: 1fr;
	}

	/* One column, and the chip keeps the 44px target it has everywhere. */
	.mitode-pg__option {
		min-height: 2.75rem;
		padding: .6rem .8rem;
		font-size: .9375rem;
	}

	/* One card fills the rail, so a swipe always lands on a whole card. */
	.mitode-pg-card {
		flex-basis: min(17rem, 78vw);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mitode-pg__viewport { scroll-behavior: auto; }
	.mitode-pg__option,
	.mitode-pg__back,
	.mitode-pg__restart,
	.mitode-pg__arrow { transition: none; }
}