/* ================================================================== */
/*  Homepage overview (src/partials/overview-section.html).            */
/*  Header rules are the repair section's (padding, eyebrow, gradient  */
/*  title, description). The four items reuse the software page's      */
/*  value-prop card (.sw-vp): elevated card, 44px icon tile, h3, text. */
/* ================================================================== */

.ov-section {
    background: var(--bg-soft);
    /* Less at the bottom: the closing line sits close to the cards and the
       next section starts soon after (owner, 2026-09-28). */
    padding: clamp(64px, 8vw, 112px) 24px clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--border);
}

.ov-section__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.ov-section__head { margin-bottom: 12px; }

.ov-section__eyebrow {
    margin: 0 0 12px;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--accent-amber);
}

.ov-section__title {
    margin: 0;
    max-width: 22ch;
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    text-wrap: balance;
    background-image: var(--title-gradient);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* RU/KK titles are longer than EN/AR — a wider measure keeps them to three lines. */
:lang(ru) .ov-section__title,
:lang(kk) .ov-section__title { max-width: 34ch; }

.ov-section__desc {
    margin: 0 0 clamp(32px, 4vw, 56px);
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}
.ov-section__desc--foot { margin: 20px 0 0; }
.ov-section__desc a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cards (same rules as .sw-vp on the software page) ---------- */

.ov-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 640px) {
    .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1100px) {
    .ov-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ov-card {
    display: flex;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-base);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 16px -10px rgba(15, 23, 42, 0.06);
    transition: border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-med) var(--ease-out);
}
.ov-card:hover {
    border-color: var(--brand-300);
    transform: translateY(-2px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 14px 24px -14px rgba(15, 23, 42, 0.16);
}
.ov-card__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 28px 24px;
    color: inherit;
    text-decoration: none;
}
/* Tinted tile with a line drawing inside. The drawings
   (assets/images/graphics/overview/*.svg) are used as a mask on ::before, so
   the ink takes the theme's brand colour. */
.ov-card__icon {
    display: block;
    width: 86px;
    height: 86px;
    padding: 10px;
    margin-bottom: 16px;
    border-radius: var(--radius-base);
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.ov-card__icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--brand);
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    transition: transform var(--dur-med) var(--ease-out);
}
/* Hover / keyboard focus: the tile tints and the drawing grows slightly.
   Only transform and colour animate; pointer devices only, and not when the
   visitor asks for reduced motion. */
.ov-card:hover .ov-card__icon,
.ov-card__link:focus-visible .ov-card__icon { background: var(--icon-hover-bg); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ov-card:hover .ov-card__icon::before,
    .ov-card__link:focus-visible .ov-card__icon::before { transform: scale(1.1); }
}
.ov-card__icon--sensors::before { -webkit-mask-image: url("../../assets/images/graphics/overview/sensors.svg"); mask-image: url("../../assets/images/graphics/overview/sensors.svg"); }
.ov-card__icon--platform::before { -webkit-mask-image: url("../../assets/images/graphics/overview/platform.svg"); mask-image: url("../../assets/images/graphics/overview/platform.svg"); }
.ov-card__icon--anchors::before { -webkit-mask-image: url("../../assets/images/graphics/overview/anchors.svg?v=2"); mask-image: url("../../assets/images/graphics/overview/anchors.svg?v=2"); }
.ov-card__icon--anchordesign::before { -webkit-mask-image: url("../../assets/images/graphics/overview/anchordesign.svg"); mask-image: url("../../assets/images/graphics/overview/anchordesign.svg"); }
.ov-card__title {
    margin: 0 0 8px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--text);
}
.ov-card__desc {
    margin: 0;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}