/* Главная: секции после героя */

/* --- маршрут: рельс со станциями, по нему едет знак-груз --- */
.route { padding-top: clamp(64px, 7vw, 104px); margin-top: -1px; }
.route__track { position: relative; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.route__rail { position: absolute; left: var(--gutter); right: var(--gutter); top: 9px; height: 2px; background: var(--color-border); }
.route__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--color-border-strong), var(--color-text)); }
.route__crate {
  position: absolute; top: -13px; left: calc(var(--p, 0) * 100%); width: 28px; height: 28px; margin-left: -14px;
  color: var(--color-text); background: var(--color-background); padding: 3px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}
.route__stops { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.route__stop { position: relative; padding: 40px 22px 8px 0; }
.route__stop::before { /* засечка на рельсе */
  content: ""; position: absolute; left: 0; top: 4px; width: 1px; height: 12px; background: var(--color-border-strong);
}
.route__stop.is-passed::before { background: var(--color-text); height: 18px; top: 1px; }
.route__place { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 14px; }
.route__stop .h3 { margin-bottom: 10px; }
.route__stop p.muted { font-size: 15.5px; line-height: 1.5; }
.route__stop--end .route__place { color: var(--color-text); }
.route__more { margin-top: 28px; }

@media (max-width: 1080px) {
  .route__stops { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .route__rail { display: none; }
  .route__stop { padding-top: 22px; border-top: 1px solid var(--color-border); }
  .route__stop::before { display: none; }
}
@media (max-width: 640px) {
  .route__track { padding-left: calc(var(--gutter) + 26px); }
  .route__rail { display: block; left: calc(var(--gutter) + 6px); right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .route__fill { width: 100%; height: calc(var(--p, 0) * 100%); bottom: auto; background: linear-gradient(180deg, var(--color-border-strong), var(--color-text)); }
  .route__crate { left: -13px; top: calc(var(--p, 0) * 100%); margin: -14px 0 0; }
  .route__stops { grid-template-columns: 1fr; row-gap: 0; }
  .route__stop { padding: 18px 0 22px; border-top: 0; }
  .route__place { margin-bottom: 6px; }
}

/* --- каталог: асимметричная сетка категорий --- */
.cats__all { margin-top: 22px; }
.cats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cat-tile {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-card);
  box-shadow: var(--shadow-hang); overflow: hidden; transition: border-color .3s, transform .4s var(--ease);
}
.cat-tile--big { grid-column: span 2; grid-row: span 2; }
.cat-tile__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-background); }
.cat-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s; filter: brightness(.92); }
.cat-tile__img::after { /* свет сверху усиливается на наведении */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(var(--text-rgb), .22), transparent 70%);
}
.cat-tile__body { display: grid; gap: 8px; padding: 18px 20px 20px; flex: 1; align-content: start; }
.cat-tile__name { font-size: 20px; font-weight: 700; line-height: 1.2; }
.cat-tile--big .cat-tile__name { font-size: clamp(24px, 2.4vw, 34px); }
.cat-tile__lead { font-size: 15px; line-height: 1.45; display: none; }
.cat-tile--big .cat-tile__lead { display: block; font-size: 17px; max-width: 40ch; }
.cat-tile__count { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-top: auto; padding-top: 6px; }
.cat-tile--big .cat-tile__body { padding: 24px 28px 28px; }
@media (hover: hover) and (pointer: fine) {
  .cat-tile:hover { border-color: var(--color-border-strong); }
  .cat-tile:hover .cat-tile__img img { transform: translateY(-6px) scale(1.03); filter: brightness(1.05); }
  .cat-tile:hover .cat-tile__img::after { opacity: 1; }
}
@media (max-width: 1080px) {
  .cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-tile--big { grid-row: auto; grid-column: auto; }
  .cat-tile--big .cat-tile__lead { display: none; }
}
@media (max-width: 640px) {
  .cats__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-tile__body { padding: 12px 12px 14px; }
  .cat-tile__name { font-size: 16px; }
  .cat-tile--big .cat-tile__lead { font-size: 15px; }
}

/* --- проверка завода --- */
.audit { background-image: var(--light-top), linear-gradient(180deg, transparent, rgba(var(--surface-rgb), .6) 40%, transparent); }
.audit__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.audit__shot { position: sticky; top: 100px; border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-hang); border: 1px solid var(--color-border); }
.audit__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.audit__body .h2 { margin-bottom: 22px; }
.audit__body .lead { margin-bottom: 32px; }

.sheet { background: var(--color-surface-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--r-card); box-shadow: var(--shadow-hang); font-size: 14.5px; }
.sheet__head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px dashed var(--color-border-strong); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.sheet__row { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--color-border); }
.sheet__box { width: 18px; height: 18px; border: 1.5px solid var(--color-border-strong); border-radius: var(--r-sm); position: relative; }
.sheet__box::after { /* галочка ставится при появлении */
  content: ""; position: absolute; left: 4px; top: 1px; width: 6px; height: 11px; border: solid var(--color-text); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transform-origin: 50% 70%; transition: transform .35s var(--ease);
}
.sheet.is-checked .sheet__box::after { transform: rotate(45deg) scale(1); }
.sheet.is-checked .sheet__row:nth-child(3) .sheet__box::after { transition-delay: .15s; }
.sheet.is-checked .sheet__row:nth-child(4) .sheet__box::after { transition-delay: .3s; }
.sheet.is-checked .sheet__row:nth-child(5) .sheet__box::after { transition-delay: .45s; }
.sheet.is-checked .sheet__row:nth-child(6) .sheet__box::after { transition-delay: .6s; }
.sheet.is-checked .sheet__row:nth-child(7) .sheet__box::after { transition-delay: .75s; }
.sheet__foot { padding: 14px 18px; font-size: 13px; color: var(--color-text); background: rgba(var(--primary-rgb), .14); border-top: 1px solid rgba(var(--primary-rgb), .5); }
@media (max-width: 900px) {
  .audit__grid { grid-template-columns: 1fr; }
  .audit__shot { position: relative; top: auto; }
}

/* --- упаковочный лист --- */
.plist { background: var(--color-surface-inverse); color: var(--color-text-inverse); border-radius: var(--r-card); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); padding: clamp(18px, 3vw, 36px); overflow-x: auto; transform: rotate(-.4deg); }
.plist__title { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--color-text-inverse); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.plist__mark { display: inline-flex; align-items: center; gap: 8px; }
.plist__mark svg { width: 20px; height: 20px; }
.plist table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.plist th { text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(29, 34, 43, .72); padding: 14px 12px 10px 0; border-bottom: 1px solid var(--color-text-inverse); }
.plist td { padding: 13px 12px 13px 0; border-bottom: 1px dashed rgba(29, 34, 43, .35); vertical-align: top; }
.plist td:first-child, .plist th:first-child { width: 64px; }
.plist td:last-child { color: rgba(29, 34, 43, .72); }
.plist tbody tr { transition: background-color .2s; }
@media (hover: hover) { .plist tbody tr:hover { background: rgba(29, 34, 43, .06); } }
@media (max-width: 640px) {
  .plist { transform: none; }
  .plist table, .plist thead, .plist tbody, .plist tr, .plist td { display: block; min-width: 0; }
  .plist thead { display: none; }
  .plist tr { display: grid; grid-template-columns: 34px 1fr; padding: 12px 0; border-bottom: 1px dashed rgba(29, 34, 43, .35); }
  .plist td { border: 0; padding: 0; }
  .plist td:first-child { width: auto; grid-row: span 2; }
  .plist td:last-child { font-size: 13px; margin-top: 4px; }
}

/* --- расчёт поставки --- */
.rfq__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.rfq__side .h2 { margin-bottom: 20px; }
.rfq__next { margin-top: 32px; padding: 20px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); display: grid; gap: 8px; max-width: 48ch; }
.rfq__alt { margin-top: 24px; display: grid; gap: 6px; justify-items: start; }
.rfq__alt a { color: var(--color-text); text-decoration: none; font-size: 17px; }
@media (hover: hover) { .rfq__alt a:hover { color: var(--color-focus-ring); } }
@media (max-width: 900px) { .rfq__grid { grid-template-columns: 1fr; } }