/* Раздел кожи — поверх home.css (тема «Tech Premium»): терракотовый акцент
   и фон «патина» — едва заметные тёплые пятна на графите. */

.lz {
  --terra: #c68b59;
  --terra-2: #d9a272;
  background:
    radial-gradient(900px 600px at 10% 0%, rgba(198, 139, 89, .09), transparent 70%),
    radial-gradient(700px 500px at 90% 35%, rgba(120, 80, 50, .10), transparent 70%),
    radial-gradient(800px 600px at 30% 85%, rgba(198, 139, 89, .06), transparent 70%),
    var(--bg);
}

/* ---------- 1. категории: журнальная раскладка ---------- */

.lz-intro { padding: clamp(36px, 6vw, 72px) 0 clamp(40px, 6vw, 72px); }
.lz-intro h1 { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.05; margin-bottom: 16px; }
.lz-intro .tp-lead { margin-bottom: clamp(28px, 4vw, 44px); }

.lz-cats { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.lz-cat { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 260px; padding: 22px; border-radius: 24px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); text-decoration: none;
  transition: border-color var(--ease), transform var(--ease); }
.lz-cat img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.6); transition: filter var(--ease), transform var(--ease); }
.lz-cat img.mk { inset: auto; top: 18%; left: 50%; width: 30%; max-width: 140px; height: auto;
  transform: translateX(-50%); opacity: .45; filter: none; }
.lz-cat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(12, 12, 12, .9), rgba(12, 12, 12, 0) 60%); }
.lz-cat-text { display: flex; align-items: baseline; gap: 12px; }
.lz-cat-text b { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); }
.lz-cat-text span { color: var(--dim); font-size: 14px; }
.lz-cat:hover, .lz-cat:focus-visible, .lz-cat.on { border-color: rgba(198, 139, 89, .6); }
.lz-cat:hover img:not(.mk), .lz-cat:focus-visible img:not(.mk) { filter: brightness(.8); transform: scale(1.04); }

/* Плитки разного размера и не в ряд: первая крупная на две строки,
   соседние сдвинуты вниз. Узор повторяется каждые три категории. */
@media (min-width: 720px) {
  .lz-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 220px; }
  .lz-cat { min-height: 0; }
  .lz-cat:nth-child(3n+1) { grid-column: span 4; grid-row: span 2; }
  .lz-cat:nth-child(3n+2) { grid-column: span 2; transform: translateY(28px); }
  .lz-cat:nth-child(3n) { grid-column: span 2; transform: translateY(28px); }
  .lz-cats { padding-bottom: 28px; }
  /* Одна категория — на всю ширину, две — пополам. */
  .lz-cat:only-child { grid-column: 1 / -1; }
  .lz-cat:nth-child(2):last-child { grid-column: span 2; grid-row: span 2; }
}

/* ---------- 2. крафт: заголовок на месте, шаги прокручиваются ---------- */

.lz-craft { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.lz-craft-grid { display: grid; gap: 28px; }
.lz-craft-head { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; margin: 0; }
.lz-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lz-steps li { padding: 26px 28px; border-radius: 20px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); }
.lz-num { display: block; margin-bottom: 10px; color: var(--terra); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: 14px; }
.lz-steps p { margin: 0; color: #c9c9cf; font-size: 17px; }
@media (min-width: 900px) {
  .lz-craft-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
  .lz-craft-head { position: sticky; top: 112px; }
  .lz-steps { gap: 84px; }   /* около половины высоты шага */
}
/* Шаг проявляется, когда доезжает до экрана. Только где браузер умеет
   привязывать анимацию к прокрутке; без этого шаги видны сразу. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lz-steps li { animation: lz-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@keyframes lz-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ---------- 3. витрина: «жидкое стекло» ---------- */

.lz-shop { padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.lz-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lz-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 16px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: backdrop-filter var(--ease), background-color var(--ease), border-color var(--ease); }
.lz-card.out { opacity: .45; }
.lz-card:hover, .lz-card:focus-within { background: rgba(255, 255, 255, .07); border-color: rgba(198, 139, 89, .45);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.lz-pic { display: block; text-decoration: none; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--bg-2); }
.lz-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease-in-out; }
.lz-card:hover .lz-pic img { transform: scale(1.08); }
.lz-pic .none { display: grid; place-items: center; height: 100%; color: var(--dim); font-size: 14px; }
.lz-title { padding: 0 4px; color: var(--text); text-decoration: none; font-weight: 600; }
.lz-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; flex: 1; }
.lz-price { font-weight: 700; }

/* Кнопки раздела: терракота, при наведении — свечение изнутри,
   при нажатии — «вдавливаются». */
.lz-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 14px; border: 1px solid var(--terra); background: transparent; color: var(--terra);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color var(--ease), color var(--ease), box-shadow var(--ease), transform .12s ease-in-out; }
.lz-card:hover .lz-btn, .lz-btn:hover, .lz-btn:focus-visible { background: var(--terra); color: #1a120c;
  box-shadow: inset 0 0 18px rgba(255, 220, 180, .35); }
.lz-btn:active { transform: scale(.97); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .35); }
.lz-btn:disabled { opacity: .45; cursor: default; background: transparent; color: var(--terra); box-shadow: none; }
.lz-btn.big { min-height: 52px; padding: 0 28px; background: var(--terra); color: #1a120c; }
.lz-btn.big:hover { background: var(--terra-2); }

/* ---------- 4. под заказ ---------- */

.lz-custom { padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.lz-custom-in { display: grid; gap: 24px; align-items: center; padding: clamp(26px, 4vw, 48px);
  border-radius: 24px; border: 1px solid rgba(198, 139, 89, .3);
  background: radial-gradient(600px 300px at 0% 0%, rgba(198, 139, 89, .14), transparent 70%), var(--panel); }
.lz-custom-in .tp-sub { margin-bottom: 0; }
@media (min-width: 760px) { .lz-custom-in { grid-template-columns: minmax(0, 1fr) auto; } }

@media (prefers-reduced-motion: reduce) {
  .lz-cat:hover img:not(.mk), .lz-card:hover .lz-pic img, .lz-btn:active { transform: none !important; }
}