/*
 * _usluga-calc-magazine.css — компоновка калькулятора «Magazine editorial» (E).
 *
 * Зафиксированный layout калькулятора услуги. Round 2 финал, 2026-05-21.
 * Принят Иваном после сравнения 5 вариантов через dev-switcher.
 *
 * Suspended:
 *   - varianty A/B/C/D round 2 — не выбраны
 *   - dev-switcher (calc-variants.js) — удалён вместе с этим файлом
 *
 * Структура (desktop ≥769px):
 *   Row 1 sub:       [Подуслуга full-width] (только полиграфия)
 *   Row 2 size:      [Размер full-width в controls slot]
 *   Layout controls (3fr 2fr):
 *     Col 1:         [Размер 3-кол grid]      ← span 2 row
 *     Col 2 top:     [Материал stack 1-кол]
 *     Col 2 bot:     [Тираж slim]
 *   Row 3 opts:      [Опции full-width 4-кол chips]
 *   Right aside:     [Sticky итог 300px]
 *
 * Mobile (≤768px):
 *   Accordion controls (1 раскрыт, остальные collapsed с preview).
 *   Sticky bottom bar с ценой + CTA (поверх скролла).
 *
 * НЕ ТРОГАЕТ:
 *   - calculator.js / engine — механика без изменений
 *   - данные CMB2 / migrations
 *   - базовые tile/card/check стили из _usluga-calc.css
 *
 * @package StudioPrintTheme
 */

/* ────────────────────────────────────────────────────────────────────────────
   DESKTOP — Magazine editorial layout
──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
	.uc-calc__shell {
		grid-template-columns: 1fr 300px;
		gap: 20px;
	}
	.uc-calc__shell .uc-calc__controls {
		display: grid;
		grid-template-columns: 3fr 2fr;
		gap: 12px;
	}
	.mh-mobile-stands .uc-calc__shell .uc-calc__controls {
		display: flex;
		flex-direction: column;
	}
	.uc-calc__shell .uc-calc__block[data-block="sub"] {
		grid-column: 1 / -1;
	}
	.uc-calc__shell .uc-calc__block--layout-guide {
		grid-column: 1 / -1;
	}
	.uc-calc__shell [data-calc-sizes] {
		grid-column: 1;
		grid-row: span 2;
	}
	.uc-calc__shell [data-calc-materials],
	.uc-calc__shell [data-calc-quantity] {
		grid-column: 2;
	}
	.uc-calc__shell [data-calc-options] {
		grid-column: 1 / -1;
	}
	.uc-calc__shell .uc-calc__block[data-block="size"] {
		grid-column: 1;
		grid-row: span 2;
	}
	.uc-calc__shell .uc-calc__block[data-block="material"] {
		grid-column: 2;
		grid-row: 2;
	}
	.uc-calc__shell .uc-calc__block[data-block="quantity"] {
		grid-column: 2;
		grid-row: 3;
	}
	.uc-calc__shell .uc-calc__block[data-block="option"] {
		grid-column: 1 / -1;
	}
	.uc-calc__shell .uc-calc__block {
		padding: 14px 18px;
	}
	.uc-calc__shell .uc-calc__block-head {
		margin-bottom: 10px;
		padding-bottom: 6px;
	}
	.uc-calc__shell .uc-calc__block-head h3 {
		font-size: var(--text-body);
	}
	.uc-calc__shell .uc-calc__sizes-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}
	.uc-calc__shell .uc-calc__tile {
		padding: 9px 12px;
	}
	.uc-calc__shell .uc-calc__mats-grid {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.uc-calc__shell .uc-calc__card {
		min-height: 0;
		padding: 7px 10px;
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}
	.uc-calc__shell .uc-calc__card-name {
		font-size: var(--text-mono-sm);
	}
	.uc-calc__shell .uc-calc__card-price {
		margin: 0 0 0 auto;
		font-size: var(--text-mono-2xs);
	}
	/* Description скрыта (длинный текст), доступна как title-tooltip */
	.uc-calc__shell .uc-calc__card-desc {
		display: none;
	}
	.uc-calc__shell .uc-calc__opts-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 8px;
	}
	.uc-calc__shell .uc-calc__check {
		display: grid;
		grid-template-columns: 14px minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-items: start;
		column-gap: 8px;
		row-gap: 1px;
		min-height: 56px;
		padding: 10px 12px;
		min-width: 0;
	}
	.uc-calc__shell .uc-calc__check input {
		position: static;
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 14px;
		height: 14px;
		margin: 2px 0 0;
	}
	.uc-calc__shell .uc-calc__check-name {
		grid-column: 2;
		grid-row: 1;
		font-size: var(--text-body-sm);
		line-height: 1.2;
		min-width: 0;
	}
	.uc-calc__shell .uc-calc__check-rate {
		grid-column: 2;
		grid-row: 2;
		font-size: var(--text-eyebrow);
		line-height: 1.15;
	}
	.uc-calc__shell .uc-calc__check-hint {
		display: none;
	}
	.uc-calc__shell .uc-calc__option-qty {
		grid-column: 2;
		display: grid;
		grid-template-columns: auto 26px 48px 26px;
		align-items: center;
		gap: 5px;
		margin-top: 5px;
	}
	.uc-calc__shell .uc-calc__option-qty[hidden] {
		display: none;
	}
	.uc-calc__shell .uc-calc__option-qty-label {
		font-size: var(--text-mono-3xs);
	}
	.uc-calc__shell .uc-calc__option-qty-btn,
	.uc-calc__shell .uc-calc__option-qty input {
		height: 26px;
	}
	.uc-calc__shell .uc-calc__qty-btn {
		width: 30px;
		height: 30px;
		font-size: var(--text-body);
	}
	.uc-calc__shell .uc-calc__qty-row input[data-calc-qty] {
		width: 56px;
		height: 30px;
	}
	.uc-calc__shell .uc-calc__result {
		padding: 22px 22px;
		top: 80px;
	}
	.uc-calc__shell .uc-calc__result-value {
		font-size: var(--text-h2-sm);
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE — overrides поверх _usluga-calc.css (≤640px)

   Сюда вынесено ПОТОМУ ЧТО _usluga-calc.css загружается ПОСЛЕ _usluga.css
   в enqueue (см. inc/enqueue.php). Если mobile-rules написать в _usluga.css,
   desktop-rules из _usluga-calc.css (без @media) их перебивают.
   Magazine.css загружается ПОСЛЕ _usluga-calc.css → mobile тут работает.

   Native accordion (data-collapsed, .uc-calc__block-preview, sticky bottom bar)
   определён в _usluga.css. Здесь — только грид/типография поверх desktop базы.

   Типографическая шкала аккордеона (round 3, 2026-05-21):
     - `01` num         11px mono accent letter-spacing 0.16em (наследует)
     - `Размер` h3      14px semibold uppercase letter-spacing 0.04em
     - block-preview    12px mono accent letter-spacing 0.06em
     - arrow ↓/↑        14px accent (видимый affordance)
──────────────────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────────────
   PROGRESS INDICATOR + RESET BUTTON (desktop + mobile)
   - .is-touched на .uc-calc__block → checkmark ✓ перед num
   - .uc-calc__reset — text-link в шапке секции, hidden до first touch
──────────────────────────────────────────────────────────────────────────── */

/* Checkmark перед `01/02/03/04` когда блок touched */
.uc-calc__block.is-touched .uc-calc__num {
	position: relative;
}
.uc-calc__block.is-touched .uc-calc__num::before {
	content: '✓';
	display: inline-block;
	margin-right: 5px;
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0;
}

/* Reset button — text-link в .mh__section-head секции калькулятора */
.uc-calc .mh__section-head {
	position: relative;
}
.uc-calc__reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 6px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	color: var(--fg-mute);
	font-size: var(--text-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	align-self: flex-start;
	transition: color 160ms ease, border-color 160ms ease;
}
.uc-calc__reset:hover,
.uc-calc__reset:focus {
	color: var(--ink);
	border-bottom-color: var(--accent);
}
.uc-calc__reset[hidden] {
	display: none;
}
.uc-calc__reset-icon {
	display: inline-block;
	font-size: var(--text-body-sm);
	color: var(--accent);
	transition: transform 240ms ease;
}
.uc-calc__reset:hover .uc-calc__reset-icon {
	transform: rotate(-180deg);
}

/* Desktop: располагаем reset в правом верхнем углу шапки */
@media (min-width: 769px) {
	.uc-calc__reset {
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 0;
	}
}

/* P0 cleanup: убираем дубли + длинные тексты + лишний CTA-band на mobile */
@media (max-width: 640px) {
	/* P0 #8 (round 2): scroll-jump на ВСЕЙ странице услуги.
	   Ранее overflow-anchor: none стоял только на .uc-calc__shell — фикс
	   работал только внутри калькулятора. На остальных секциях (subservices,
	   use-cases, layout PDF, gallery, prose) browser auto-anchor восстанавливал
	   позицию при layout shifts (lazy-load images, accordion expand) → юзер
	   видел «прыжки» при скролле. Распространяем на всю страницу. */
	body.single-usluga {
		overflow-anchor: none;
	}

	/* P0 #2+#3: скрыть .mh__prose-aside на mobile — дублирует калькулятор:
	     - "Материалы и цены" (about.php) → юзер уже видел в калькуляторе материалы
	     - "Постпечатная обработка" (terms.php) → юзер уже видел в опциях калькулятора
	   На desktop остаётся (полезный side-panel рядом с prose). */
	.uc-calc ~ section .mh__prose-aside,
	body.single-usluga .mh__prose-aside {
		display: none;
	}
	body.single-usluga .mh__prose-grid {
		grid-template-columns: 1fr;
	}

	/* P0 #6: скрыть финальный CTA-band на странице услуги.
	   Sticky bar внизу выполняет ту же функцию, CTA-band — это дубль. */
	body.single-usluga .mh__cta-band,
	body.single-usluga section.mh__final {
		display: none;
	}

	/* P0 #1: material preview max-width 140px → больше для длинных названий */
	.uc-calc__block-preview {
		max-width: 65% !important;
	}

	/* Type-scale regression fix (round 7): sed-replace 15px → text-body (16px)
	   увеличил tile labels на mobile → «100×100 / см» переносится на 2 строки.
	   Откатим до text-body-sm (14px) для compact tile-rendering. */
	.uc-calc__tile-label {
		font-size: var(--text-body-sm);
	}
	.uc-calc__block-head h3 {
		font-size: var(--text-body-sm);
	}

	/* P0 #5: disclaimer в стиль collapse-summary (на mobile визуально менее давит).
	   Wrapping в <details> делает usluga-mobile.js. Здесь — style. */
	.uc-calc details.mh__usluga-disclaimer-collapse {
		margin: 16px 0 0;
		padding: 0;
		background: transparent;
	}
	.uc-calc details.mh__usluga-disclaimer-collapse summary {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-family: var(--font-mono);
		font-size: var(--text-mono-2xs);
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--fg-mute);
		cursor: pointer;
		padding: 6px 0;
		list-style: none;
		border-bottom: 1px solid var(--line);
	}
	.uc-calc details.mh__usluga-disclaimer-collapse summary::-webkit-details-marker {
		display: none;
	}
	.uc-calc details.mh__usluga-disclaimer-collapse summary::after {
		content: '▾';
		margin-left: 4px;
		transition: transform 200ms ease;
		color: var(--accent);
	}
	.uc-calc details.mh__usluga-disclaimer-collapse[open] summary::after {
		transform: rotate(180deg);
	}
	.uc-calc details.mh__usluga-disclaimer-collapse .mh__usluga-disclaimer {
		font-size: var(--text-mono-2xs) !important;
		line-height: 1.55 !important;
		color: var(--fg-mute) !important;
		margin: 8px 0 0 !important;
		padding: 0 !important;
	}

	/* P0 #7: «Не печатаем» callout — boxed style с боковой акцент-полосой.
	   Wraps the <p>Не печатаем:</p> в JS. */
	.mh__prose-inner p.mh__prose-callout {
		margin: 16px 0;
		padding: 12px 14px;
		background: rgba(var(--rgb-yellow-500), 0.06);
		border-left: 3px solid var(--accent);
		font-size: var(--text-body-sm);
		line-height: 1.5;
	}
	.mh__prose-inner p.mh__prose-callout strong {
		color: var(--ink);
		font-weight: 700;
	}

	/* ─── Shell: сбросить desktop grid 1fr 360px (overflow на mobile) ─── */
	.uc-calc__shell {
		display: block;
		grid-template-columns: none;
		gap: 0;
		max-width: 100%;
		overflow-x: hidden;
		/* Отключаем browser scroll-anchor внутри калькулятора — auto-advance
		   в calculator.js меняет layout (collapse Размер + expand Материал),
		   глобальный html { scroll-behavior: smooth } триггерит anchor smooth
		   scroll → юзер ощущает «принудительный скролл». none = scroll position
		   не корректируется при internal layout shifts. */
		overflow-anchor: none;
	}

	/* ─── Grid: stack 1-col для material/options (override auto-fit desktop) ─── */
	.uc-calc__mats-grid,
	.uc-calc__opts-grid {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.uc-calc__sizes-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}

	/* ─── Block head — единая mono-accent типография (4 элемента) ─── */
	.uc-calc__block-head {
		flex-wrap: nowrap;
		gap: 10px;
		align-items: center;
		min-height: 44px; /* thumb-friendly tap target */
	}
	.uc-calc__block-head h3 {
		font-size: var(--text-body-sm);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		line-height: 1.15;
		flex: 0 1 auto;
		min-width: 0;
	}
	.uc-calc__num {
		flex-shrink: 0;
	}
	.uc-calc__block-head::after {
		font-size: var(--text-body-sm);
		font-weight: 700;
		color: var(--accent);
		flex-shrink: 0;
	}
	.uc-calc__block-preview {
		margin-left: auto;
		margin-right: 8px;
		font-family: var(--font-mono);
		font-size: var(--text-mono-sm);
		font-weight: 600;
		letter-spacing: 0.06em;
		max-width: 42%;
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/* На свёрнутом — только preview справа.
	   На открытом — head только: `01  ЗАГОЛОВОК  ↑` (preview/hint скрыты,
	   контент сам говорит за себя в раскрытом теле). */
	.uc-calc__block[data-collapsed="true"] .uc-calc__block-hint,
	.uc-calc__block[data-collapsed="false"] .uc-calc__block-hint,
	.uc-calc__block[data-collapsed="false"] .uc-calc__block-preview {
		display: none;
	}

	/* ─── Tile / Card / Check: компактнее, фикс-цены ─── */
	.uc-calc__tile {
		padding: 10px 12px;
	}
	.uc-calc__card {
		min-height: 0;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
	}
	.uc-calc__card-name {
		font-size: var(--text-body-sm);
		font-weight: 600;
		flex-shrink: 1;
		min-width: 0;
	}
	/* description скрыт на мобиле — длинный pitch не нужен в карточке выбора */
	.uc-calc__card-desc {
		display: none;
	}
	/* Цена — фикс, не сжимается в столбик при длинном названии */
	.uc-calc__card-price {
		margin-top: 0;
		margin-left: auto;
		flex-shrink: 0;
		white-space: nowrap;
		font-size: var(--text-mono-sm);
		font-weight: 600;
		font-family: var(--font-mono);
		letter-spacing: 0.02em;
	}
	/* Options check rows — symmetric с card */
	.uc-calc__check {
		padding: 10px 12px 10px 34px;
	}
	.uc-calc__check-name {
		font-size: var(--text-body-sm);
		font-weight: 600;
	}
	.uc-calc__check-rate {
		font-family: var(--font-mono);
		font-size: var(--text-mono-sm);
		letter-spacing: 0.02em;
		flex-shrink: 0;
		white-space: nowrap;
	}
	.uc-calc__check-hint {
		display: none;
	}

	/* ─── Sticky bottom price-bar — compact (round 4, 2026-05-21).
	   Высота ~56px (label 9px + value 18px + padding 6+6 = 56).
	   Hide через opacity + visibility — НЕ translate. Translate сдвигает
	   page content (включает sticky-bar area) что создаёт ощущение «прыжка»
	   scroll. Opacity — чистый visual fade, не трогает layout.
	   _usluga-calc.css .uc-calc__result { padding: 32px 28px; position: sticky }
	   грузится ПОСЛЕ _usluga.css mobile → перебивает. Финальный override тут. ─── */
	.uc-calc__shell {
		/* reserve под 2-row bar ~92px + safe gap + iOS home-indicator (BLIND-G-06).
		   --safe-bottom = 0 на non-iOS, ~34px на iPhone 14/15. */
		padding-bottom: calc(100px + var(--safe-bottom));
	}
	/* ─── Sticky bar — editorial 2-row layout (round 6, 2026-05-21).

	   Row 1 (top): асимметричная связка ИТОГО ━━━ цена.
	     - ИТОГО — мини-эйбрау, mono sparse uppercase, слева
	     - Цена — display, доминанта, right-align
	     - Между ними — visual breathing room (justify-between)
	     - "от" prefix перед ценой — superscript-style accent

	   Row 2 (bottom): CTA full-width «Оставить заявку с расчётом» (полный
	   текст, без подмены) + стрелка → через ::after.

	   Yellow accent vertical bar слева — Mohawk-grit detail.
	──────────────────────────────────────────────────────────── */
	.uc-calc__result {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: grid !important;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		align-items: baseline;
		column-gap: 12px;
		row-gap: 8px;
		/* iOS safe-area: home-indicator на iPhone 14/15 (~34pt) перекрывал CTA.
		   --safe-bottom = 0 на non-iOS — визуально не меняется. */
		padding: 10px 16px calc(12px + var(--safe-bottom)) 19px;
		text-align: left;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 200ms ease, visibility 0s linear 200ms;
		border-left: 3px solid var(--accent);
	}
	.uc-calc__result.is-bar-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 200ms ease, visibility 0s;
	}

	/* Row 1: ИТОГО (left) ━━━ цена (right-aligned, display) */
	.uc-calc__result-label {
		grid-column: 1;
		grid-row: 1;
		font-size: var(--text-mono-3xs);
		letter-spacing: 0.18em;
		line-height: 1;
		text-transform: uppercase;
		color: var(--fg-quiet);
		margin: 0;
		align-self: center;
	}
	.uc-calc__result-value {
		grid-column: 2;
		grid-row: 1;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: var(--text-price);
		line-height: 1;
		letter-spacing: -0.015em;
		text-align: right;
		color: var(--paper);
		align-self: center;
	}
	.uc-calc__result-hint {
		display: none; /* mobile bar: hint не помещается */
	}

	/* Row 2: CTA full-width, оригинальный текст без модификаций */
	.uc-calc__cta {
		grid-column: 1 / -1;
		grid-row: 2;
		display: block !important;
		width: 100% !important;
		padding: 12px 14px !important;
		font-size: var(--text-mono-sm) !important;
		font-weight: 700;
		letter-spacing: 0.02em;
		line-height: 1.1;
		min-height: 0;
		white-space: nowrap;
		text-align: center;
	}

	/* "От" prefix — superscript-стиль accent слева от цены */
	.uc-calc__result-prefix {
		display: inline-block;
		margin-right: 5px;
		font-family: var(--font-mono);
		font-size: var(--text-mono-2xs);
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: lowercase;
		color: var(--accent);
		vertical-align: 0.5em;
	}
	.uc-calc__result.is-engaged .uc-calc__result-prefix {
		display: none;
	}
	/* Звёздочка (*) у цены — accent superscript */
	.uc-calc__result-asterisk {
		font-size: var(--text-body-sm) !important;
		vertical-align: 0.6em;
		margin-left: 1px;
	}
	.uc-calc__result-disclaimer,
	.uc-calc__layout-link {
		display: none;
	}
}