/* Page — page-dostavka.php Adaptive, same pattern as css/pages/o-kompanii.css (that page's fixes applied here by analogy — see its history for… */

:where(#primary > section) { padding: var(--section-gap) 0; }
:where(#primary > section:nth-child(even)) { background: var(--color-bg-alt); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* 42% (not 40%) to match the content sections below, and align-items:stretch with no fixed height/aspect-ratio on desktop — the photo fills the row's… */
.shipping-hero { background: var(--color-bg-alt); }
.shipping-hero__inner { display: flex; align-items: stretch; gap: var(--sp-8); }
.shipping-hero__text { flex: 1 1 auto; max-width: 620px; }
.shipping-hero__text .lead { margin-top: var(--sp-4); }
.shipping-hero__media { flex: 0 0 42%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.shipping-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Content sections: alternating photo + text ─────────────────────────── Same stretch-to-fill box as .shipping-hero__media — img carries no… */
.shipping-section__wrp { display: flex; align-items: stretch; gap: var(--sp-8); }
.shipping-section--reverse .shipping-section__wrp { flex-direction: row-reverse; }
.shipping-section__media { flex: 0 0 42%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.shipping-section__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shipping-section__content { flex: 1 1 auto; min-width: 0; }
.shipping-section .section-head { margin-bottom: var(--sp-5); }
.shipping-section p { color: var(--color-text-light); }
.shipping-section__content > p { margin-bottom: var(--sp-5); }

.shipping-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.shipping-list li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.shipping-list svg { flex: none; margin-top: 3px; color: var(--color-success); }

/* Transport-company logos stand in for a photo on the first section — they answer "which companies" literally, better than a generic stock shot.… */
.shipping-partners {
    flex: 0 0 42%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--sp-4);
}
.shipping-partners__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: var(--sp-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.shipping-partners__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ── Capacity table ─────────────────────────────────────────────────────── */
.shipping-table { width: 100%; max-width: 420px; margin-bottom: var(--sp-5); border-collapse: collapse; }
.shipping-table th, .shipping-table td {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-border);
    text-align: left;
    font-size: var(--fs-sm);
}
.shipping-table th { background: var(--color-bg-alt); font-weight: 600; color: var(--color-primary); }
.shipping-table td:first-child { font-weight: 600; color: var(--color-primary); }

/* ── Payment / regions info cards ──────────────────────────────────────── */
.shipping-info__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.shipping-info__card {
    padding: var(--sp-6);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.shipping-info__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-primary);
    box-sizing: border-box;
}
.shipping-info__card h3 { margin-bottom: var(--sp-3); }
.shipping-info__card ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); color: var(--color-text-light); }

/* ── Closing CTA ────────────────────────────────────────────────────────── */
/* No explicit background here — this page has one more section than "О компании" before its CTA, so the zebra stripe already lands this section on… */
.shipping-cta__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); }
.shipping-cta__text { max-width: 760px; font-size: var(--fs-lead); color: var(--color-primary); }

@media (max-width: 767px) {
    /* Hero was missing from this guard entirely — same bug "О компании"
       had: looks deceptively fine right at the 767 boundary, breaks hard
       at real phone widths (title/photo overlapping, no stacking). */
    .shipping-hero__inner { flex-direction: column; align-items: stretch; gap: var(--sp-5); }
    .shipping-hero__media { flex: none; width: 100%; }
    .shipping-hero__media img { aspect-ratio: 16 / 10; }

    .shipping-section__wrp,
    .shipping-section--reverse .shipping-section__wrp { flex-direction: column; align-items: stretch; }
    .shipping-section__media,
    .shipping-partners { flex: none; width: 100%; }
    .shipping-section__media img { aspect-ratio: 16 / 10; }
    .shipping-info__grid { grid-template-columns: 1fr; }
}