/* pages-1.css — страницы услуг, вопросов, вакансий и контактов.

   Один порядок для всех страниц: первый экран (фото, заголовок, три
   факта), дальше разделы по очереди — заголовок слева, содержимое во
   всю ширину листа. Без надписей над каждым заголовком, без плашек и
   карточек внутри карточек: так страницу читают сверху вниз, а не
   ищут глазами, где что.

   Цвета, шрифты и скругления — из atp3.css (переменные :root), поэтому
   страницы выглядят частью того же сайта. */

/* ── Первый экран ───────────────────────────────────────────── */

.sp-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem .5rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    color: var(--text-mut);
}
.sp-crumbs a { color: inherit; text-decoration: none; }
.sp-crumbs a:hover { color: var(--text-strong); }
.sp-crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--text-soft); }

.sp-hero { display: grid; gap: 2.5rem; align-items: center; }
.sp-hero h1 { margin: 0; }
.sp-hero .sec-lead { margin-top: 1.125rem; }
@media (min-width: 1024px) {
    .sp-hero--photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; }
}

/* Три факта под кнопками: то, что заказчик спрашивает первым */
.sp-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 2.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-2);
}
.sp-facts dt {
    font-family: Manrope, 'Manrope Fallback', Inter, sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--text-strong);
}
.sp-facts dd { margin: .3rem 0 0; font-size: .8125rem; line-height: 1.4; color: var(--text-mut); }
@media (max-width: 480px) {
    .sp-facts { gap: .75rem; }
    .sp-facts dt { font-size: 1.0625rem; }
}

/* Фото: реальные рейсы, без рамок и подписей поверх */
.sp-photo {
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--tint-1);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .06), 0 24px 48px -32px rgba(var(--shadow-rgb), .45);
}
.sp-photo img { display: block; width: 100%; height: auto; }
.sp-photo--small { max-width: 30rem; }
.sp-photos { display: grid; gap: 1.25rem; align-content: start; }

/* ── Разделы ────────────────────────────────────────────────── */

.sp-block { margin-top: 4.5rem; }
.page-sheet > .band.sp-block { margin-top: 4.5rem; }
@media (max-width: 640px) {
    .sp-block, .page-sheet > .band.sp-block { margin-top: 3.25rem; }
}
.sp-head { max-width: 42rem; }
.sp-head .sec-lead { margin-top: .875rem; }

/* Текст слева, таблица или фото справа */
.sp-split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) {
    .sp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
}
.sp-split > .sp-body { margin-top: 0; }
.sp-body { margin-top: 2rem; }
.sp-body p { font-size: .9375rem; line-height: 1.75; color: var(--text-body); max-width: 68ch; }
.sp-body p + p { margin-top: .875rem; }

/* Список «что входит»: две колонки, отметка вместо маркера */
.sp-checks {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem 3rem;
}
@media (min-width: 768px) {
    .sp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sp-checks li {
    position: relative;
    padding-left: 2rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-body);
}
.sp-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AE2012' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / .75rem no-repeat;
}

/* Шаги — только там, где работа и правда идёт по порядку */
.sp-steps {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    counter-reset: step;
}
@media (min-width: 768px) { .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; } }
@media (min-width: 1024px) { .sp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; } }
.sp-steps li {
    counter-increment: step;
    padding-top: 1rem;
    border-top: 2px solid var(--line-2);
    font-size: .875rem;
    line-height: 1.6;
    color: var(--text-body);
}
.sp-steps li::before {
    content: counter(step);
    display: block;
    margin-bottom: .5rem;
    font-family: Manrope, 'Manrope Fallback', Inter, sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--o-700);
}
.sp-steps b { display: block; margin-bottom: .25rem; font-weight: 700; color: var(--text-strong); }

/* Таблицы: цены и машины. Цена — справа, жирным; описания — слева */
.sp-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.sp-table th {
    padding: 0 0 .75rem;
    text-align: left;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-mut);
    border-bottom: 1px solid var(--line-2);
}
.sp-table td {
    padding: .875rem 0;
    vertical-align: top;
    color: var(--text-body);
    border-bottom: 1px solid var(--line-2);
}
.sp-table tr:last-child td { border-bottom: 0; }
.sp-table td + td, .sp-table th + th { padding-left: 1.5rem; }
.sp-table--price td:last-child, .sp-table--price th:last-child { text-align: right; }
.sp-table--price td:last-child { font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.sp-table td:first-child { color: var(--text-strong); font-weight: 600; }
.sp-table-wrap {
    padding: 1.5rem 1.75rem;
    border-radius: var(--r-lg);
    background: var(--sheet);
    box-shadow: 0 0 0 1px var(--line), 0 18px 40px -32px rgba(var(--shadow-rgb), .35);
    overflow-x: auto;
}
.sp-note { margin-top: 1rem; font-size: .8125rem; line-height: 1.6; color: var(--text-mut); }
.sp-more-link { display: inline-block; margin-top: 1.25rem; font-size: .9375rem; }

/* Вопросы: тот же аккордеон, что на сайте, только без обёрток */
.sp-faq { max-width: 50rem; margin-top: 2rem; }

/* Другие услуги: короткие ссылки в строку */
.sp-links {
    display: grid;
    gap: .75rem;
    margin-top: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .sp-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sp-links { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sp-links a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--sheet);
    color: var(--text-strong);
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}
.sp-links a:hover { border-color: var(--o-300); background: var(--o-50); }
.sp-links svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--o-700); }
.sp-links-title { font-family: Manrope, 'Manrope Fallback', Inter, sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--text-strong); }

/* Ссылки на соседние разделы (страница «О компании») */
.sp-more { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 768px) { .sp-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-more a {
    display: block;
    padding: 1.375rem 1.5rem;
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    background: var(--sheet);
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}
.sp-more a:hover { border-color: var(--o-300); background: var(--o-50); }
.sp-more b {
    display: block;
    font-family: Manrope, 'Manrope Fallback', Inter, sans-serif;
    font-weight: 800;
    font-size: 1.0625rem;
    color: var(--text-strong);
}
.sp-more span { display: block; margin-top: .375rem; font-size: .875rem; line-height: 1.55; color: var(--text-mut); }

/* Контакты: подписи слева, значения справа */
.sp-contacts { margin: 0; display: grid; gap: 1.125rem; }
.sp-contacts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; }
.sp-contacts dt { font-size: .875rem; color: var(--text-mut); }
.sp-contacts dd { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text-strong); }
.sp-contacts dd a { color: inherit; font-weight: 700; text-decoration: none; }
.sp-contacts dd a:hover { color: var(--o-700); }
.sp-contacts small { display: block; font-size: .8125rem; color: var(--text-mut); }
@media (max-width: 480px) { .sp-contacts > div { grid-template-columns: 1fr; gap: .125rem; } }
.sp-map { min-height: 22rem; display: flex; border-radius: var(--r-lg); overflow: hidden; }
/* Карта тянется на высоту колонки с контактами: заглушка карты
   (button.map-embed) берёт height:100%, а это работает только у
   растянутого элемента сетки */
.sp-split > .sp-map { align-self: stretch; }

.sp-links a:focus-visible, .sp-more a:focus-visible, .sp-crumbs a:focus-visible {
    outline: 2px solid var(--o-600);
    outline-offset: 2px;
}

/* ── «Автопарк»: иллюстрация внизу первого экрана ──────────────
   Тягач MAN с тралом и ёмкостями, нарисован по фото рейса. Стоит
   отдельным блоком под текстом и цифрами, справа, и «едет» по нижнему
   краю карточки. На телефоне — во всю ширину. */
.fleet-art { margin: 2rem 0 -.75rem; align-self: flex-end; width: 100%; max-width: 46rem; }
.fleet-art img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
    .fleet-art { margin: 1.25rem -.5rem -1.75rem 0; width: 72%; }
}

/* На «Автопарке» сетка просит gap-x-6 и gap-y-4, а в собранном Tailwind
   этих классов нет — колонки слипались. Досчитываем здесь. */
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-4 { row-gap: 1rem; }

/* ── Рисунок трала в первом экране — там, где нет своего фото ───── */
.sp-art { max-width: 34rem; }
.sp-art img { display: block; width: 100%; height: auto; }

/* ── Ссылки на виды техники: 4 в ряд на широком экране ── */
@media (min-width: 1024px) { .sp-more--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── «Наши перевозки»: фото с подписью под каждым ── */
.sp-gallery { display: grid; gap: 1.75rem 1.5rem; margin-top: 2rem; }
@media (min-width: 640px) { .sp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sp-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-gallery figure { margin: 0; }
.sp-gallery .sp-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.sp-gallery figcaption { margin-top: .75rem; font-size: .9375rem; line-height: 1.45; color: var(--text-strong); font-weight: 600; }
.sp-gallery figcaption span { display: block; margin-top: .125rem; font-weight: 400; font-size: .8125rem; color: var(--text-mut); }