/* Home page — front-page.php Desktop only for now; adaptation is a separate pass. */

/* Base padding + zebra striping for top-level home sections — :where() keeps
   specificity at zero so any component's own background/padding rule
   (.hero, .stats, …) always wins regardless of source order. */
:where(#primary > section) { padding: var(--section-gap) 0; }
:where(#primary > section:nth-child(even)) { background: var(--color-bg-alt); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    padding: var(--sp-9) 0;
    background-color: var(--color-primary);
    background-size: cover;
    background-position: center;
    color: var(--color-on-dark);
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(27, 37, 48, .97) 0%, rgba(27, 37, 48, .85) 45%, rgba(53, 73, 94, .1) 100%);
}
.hero__inner { position: relative; }
.hero__wrp { max-width: 720px; }
.hero__title { color: var(--color-on-dark); margin-bottom: var(--sp-4); }
.hero__subtitle { font-size: var(--fs-lead); color: var(--color-on-dark-muted); margin-bottom: var(--sp-6); }
.hero__actions { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--sp-5); list-style: none; }
.hero__facts li { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--color-on-dark-muted); }
.hero__facts svg { color: var(--color-accent); flex: none; }

/* ── Categories ─────────────────────────────────────────────────────────── */
/* Base .category-card rules live in main.css — shared with the shop archive's
   subcategory grid (archive-product.php); this is the slider-only width
   override. */
.categories__grid > .category-card { width: 260px; }

/* ── Stats ──────────────────────────────────────────────────────────────── */
.stats { background: var(--color-primary); color: var(--color-on-dark); }
/* Horizontal scroll at every width, not just mobile — same fixed-width-card
   pattern as the slider sections (.slider__track), just without a nav or
   loop, this one's short enough that swipe/drag alone is enough. */
.stats__list {
    display: flex;
    gap: var(--sp-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-left: var(--container-padding);
    list-style: none;
    margin: 0 calc(var(--container-padding) * -1);
    padding: var(--sp-1) var(--container-padding) var(--sp-3);
}
.stats__list::-webkit-scrollbar { display: none; }
.stats__item {
    /* Grows to fill the row evenly when there's room (desktop — proportional,
       no dead space), never shrinks below its 200px basis (so tight widths
       overflow into the scroll instead of squeezing the cards). */
    flex: 1 0 200px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-2);
}
.stats__icon { color: var(--color-accent); }
.stats__value { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 700; }
.stats__label { font-size: var(--fs-sm); color: var(--color-on-dark-muted); max-width: 220px; }

/* ── Calculator ─────────────────────────────────────────────────────────── */
/* Two columns: inputs left, the running total right. */
.calc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-5);
    align-items: start;
}

/* Inputs sit on a card, like every other panel on the site. */
.calc__body {
    padding: var(--sp-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Profile picker leads, on its own line: it decides which fields below even
   exist, so it is a different kind of choice from a dimension. */
.calc__profile { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-border); }
.calc__profile .field { max-width: 420px; }

/* auto-fit, not a fixed column count: the field set runs from one input
   (Круг) to four (Балка), and a hard repeat(4) left ragged holes or pushed a
   fifth field onto a line of its own. */
.calc__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-4);
    align-items: end;
}

/* ── Summary column ────────────────────────────────────────────────────── */
.calc__summary {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Rows, not a row of equal cards: stacked, the three figures can carry
   different weight, and the tonnage — what actually gets quoted and shipped
   — ends the column as the largest thing in it. */
.calc__results { display: flex; flex-direction: column; }
.calc__result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.calc__result-label { font-size: var(--fs-sm); color: var(--color-text-light); }
.calc__result-value { font-family: var(--font-heading); font-size: var(--fs-base); font-weight: 700; color: var(--color-text); white-space: nowrap; }

.calc__result--accent { padding-bottom: 0; border-bottom: none; }
.calc__result--accent .calc__result-label { color: var(--color-text); font-weight: 600; }
.calc__result--accent .calc__result-value { font-size: var(--fs-h3); color: var(--color-primary); }

.calc__submit { width: 100%; }

/* Disclaimer belongs under the whole tool, not wedged against the button —
   side by side they were two unrelated things with 700px between them. */
.calc__note { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--color-muted); }

/* ── Products ───────────────────────────────────────────────────────────── */
/* .product-card itself is global now (main.css) — used here in the slider
   and also on the shop/category/search archive; only the slider's fixed
   card width belongs to this page. */
.products__grid > .product-card { width: 260px; }

/* ── Production teaser ─────────────────────────────────────────────────── */
.production__wrp { display: flex; align-items: center; gap: var(--sp-8); }
.production__media {
    flex: 0 0 42%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.production__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.production__content { flex: 1; }
.production__list { list-style: none; margin: var(--sp-5) 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.production__list li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.production__list svg { flex: none; margin-top: 3px; color: var(--color-success); }
.production__note { color: var(--color-text-light); margin-bottom: var(--sp-5); }

/* ── Testimonials ───────────────────────────────────────────────────────── */
.testimonials__grid > .testimonial { width: 380px; }
.testimonial {
    display: flex;
    flex-direction: column;
    padding: var(--sp-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.testimonial__quote { color: var(--color-accent); margin-bottom: var(--sp-3); }
.testimonial__text { font-size: var(--fs-sm); line-height: 1.6; }
.testimonial__author { display: block; margin-top: var(--sp-4); font-weight: 600; font-style: normal; color: var(--color-primary); }

/* ── Delivery ───────────────────────────────────────────────────────────── */
.delivery__wrp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.delivery__col {
    padding: var(--sp-6);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.delivery__col-title { font-size: var(--fs-lead); margin-bottom: var(--sp-4); }
.delivery__cities, .delivery__methods { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.delivery__cities li, .delivery__methods li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); }
.delivery__cities svg, .delivery__methods svg {
    flex: none;
    width: 36px;
    height: 36px;
    padding: var(--sp-2);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-primary);
    box-sizing: border-box;
}

/* Cities are meant to link out to their own landing pages (see the `url` sub-field note in global/delivery.php) — this is the "yes, go here" state:… */
.delivery__city-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    margin: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1);
    border-radius: var(--radius);
    color: var(--color-text);
    transition: background var(--transition), color var(--transition);
}
.delivery__city-link:hover,
.delivery__city-link:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}
.delivery__city-arrow {
    flex: none;
    margin-left: auto;
    color: var(--color-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transition), transform var(--transition);
}
.delivery__city-link:hover .delivery__city-arrow,
.delivery__city-link:focus-visible .delivery__city-arrow {
    opacity: 1;
    transform: translateX(0);
}

.delivery__extra { margin-top: var(--sp-6); color: var(--color-text-light); max-width: 900px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq .section-head { align-items: center; text-align: center; }
.faq__list { max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-5) 0;
    background: none;
    border: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-lead);
    font-weight: 600;
    color: var(--color-primary);
    text-align: left;
    cursor: pointer;
}
.faq__chevron { flex: none; transition: transform var(--transition); }
.faq__question[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }
.faq__answer { padding: 0 0 var(--sp-5); color: var(--color-text-light); max-width: 680px; }

/* ── Articles ───────────────────────────────────────────────────────────── */
/* .post-card itself is global now — see css/main.css. Only the slider's
   narrower fixed card width is specific to this page. */
.articles__grid { margin-bottom: var(--sp-6); }
/* Grows to fill the row on desktop (no dead space once the total real+clone
   count doesn't already overflow); never shrinks below 280px, same
   grow-but-don't-shrink pattern as .stats__item. */
.articles__grid > .post-card { flex: 1 0 280px; }

/* ── Partners ───────────────────────────────────────────────────────────── */
.partners .section-head { align-items: center; text-align: center; margin-bottom: var(--sp-5); }
/* Horizontal scroll instead of wrapping to multiple rows once the logos
   don't all fit — same scroll-strip treatment as .stats__list, but items
   keep their natural (not fixed) width since logos vary in proportion. */
.partners__grid {
    display: flex;
    align-items: center;
    /* "safe" — center when everything fits, but fall back to start-aligned once it overflows. */
    justify-content: safe center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-left: var(--container-padding);
    gap: var(--sp-7);
    margin: 0 calc(var(--container-padding) * -1);
    padding: var(--sp-1) var(--container-padding) var(--sp-3);
}
.partners__grid::-webkit-scrollbar { display: none; }
.partners__logo { display: flex; flex: none; align-items: center; justify-content: center; height: 56px; scroll-snap-align: start; }
.partners__logo img {
    max-height: 100%;
    width: auto;
    filter: grayscale(1) opacity(.55);
    transition: filter var(--transition);
}
.partners__logo:hover img { filter: none; }

/* ── Company overview (SEO text) ────────────────────────────────────────── */
.prose-section .prose { max-width: 860px; }
.prose__tagline { color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════════════════ RESPONSIVE — tablet (≤1023px) and phone (≤767px) Same two breakpoints as the… */

@media (max-width: 1023px) {
    /* Summary drops under the form: a 320px column beside it would squeeze the inputs below their 180px minimum and start wrapping every profile onto three… */
    .calc__grid { grid-template-columns: 1fr; }
    .calc__results { flex-direction: row; gap: var(--sp-3); }
    .calc__result { flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border-bottom: none; }
    .calc__result--accent .calc__result-value { font-size: var(--fs-h4); }
    .calc__summary { flex-direction: row; align-items: center; gap: var(--sp-5); }
    .calc__summary .calc__results { flex: 1; }
    .calc__submit { width: auto; flex: none; }
}

@media (max-width: 767px) {
    /* Hero: buttons stack instead of forcing two side by side */
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }

    /* No column override for .calc__row: auto-fit already collapses it to a
       single column once ~180px per field stops fitting (around 370px), and
       forcing 1fr here wasted a 727px tablet row on one input. */
    .calc__body { padding: var(--sp-4); }
    /* Summary back to a stack — three figures side by side at 375px leave no
       room for their labels. */
    .calc__summary { flex-direction: column; align-items: stretch; padding: var(--sp-4); }
    .calc__results { flex-direction: column; }
    .calc__result { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); }
    .calc__result--accent { padding-bottom: 0; border-bottom: none; }
    .calc__result--accent .calc__result-value { font-size: var(--fs-h3); }
    .calc__submit { width: 100%; }

    /* Production teaser: photo above text, not squeezed beside it */
    .production__wrp { flex-direction: column; gap: var(--sp-5); }
    .production__media { flex: none; width: 100%; }

    /* Delivery: two columns don't leave enough room for the icon+text rows */
    .delivery__wrp { grid-template-columns: 1fr; gap: var(--sp-4); }

    /* Partners: smaller gap so more logos fit per row before wrapping */
    .partners__grid { gap: var(--sp-5); }
}