/*
 * "What we fix" service cards -- Components/Site/ServicesSection.tsx.
 *
 * Linked last in site.blade.php, after style.css and responsive.css, so it wins
 * the cascade without a single !important.
 *
 * ⚠️ Deliberately NOT scoped to a page class. The section is shared by / and
 * /store/{slug} and has to look the same on both; a `.hm-page` copy and a
 * `.str-page` copy is exactly how the two would drift apart. It pays for that
 * with its own `svcs-` prefix on every class, so nothing here can collide with
 * a page's own rules.
 *
 * Bump the ?v= query string in site.blade.php after editing this file.
 */

/* ------------------------------------------------------------------ tokens */

.svcs-section {
    --svcs-green: #71b745;
    --svcs-dark: #00181a;
    --svcs-ink: #1c1c1c;
    --svcs-muted: #5c6b66;
    --svcs-line: #e3e6df;

    padding: 80px 0;
}

/* ----------------------------------------------------------------- heading */

.svcs-head {
    max-width: 680px;
    margin: 0 auto 40px;
    text-align: center;
}

.svcs-eyebrow {
    display: block;
    color: var(--svcs-green);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.svcs-head h2 {
    color: var(--svcs-dark);
    font-family: 'Rajdhani', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.svcs-head p {
    color: var(--svcs-muted);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

/* ------------------------------------------------------------------- cards */

.svcs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.svcs-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: 100%;
    padding: 30px 28px 26px;
    background: #fff;
    border: 1px solid var(--svcs-line);
    border-radius: 10px;
    transition: 0.35s;
}

.svcs-card:hover {
    border-color: var(--svcs-dark);
    background: var(--svcs-dark);
    transform: translateY(-3px);
}

.svcs-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: rgba(113, 183, 69, 0.14);
    color: var(--svcs-green);
    font-size: 26px;
    line-height: 1;
    transition: 0.35s;
}

.svcs-card:hover .svcs-card-icon {
    background: var(--svcs-green);
    color: #fff;
}

.svcs-card-title {
    color: var(--svcs-ink);
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    transition: 0.35s;
}

.svcs-card-text {
    color: var(--svcs-muted);
    font-size: 15px;
    line-height: 1.6;
    transition: 0.35s;
}

.svcs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* margin-top: auto pins the link to the card's base, so a two-line tagline
       and a four-line one still line their links up across the row. */
    margin-top: auto;
    padding-top: 14px;
    color: var(--svcs-green);
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.svcs-card:hover .svcs-card-title,
.svcs-card:hover .svcs-card-link {
    color: #fff;
}

.svcs-card:hover .svcs-card-text {
    color: rgba(255, 255, 255, 0.75);
}

.svcs-card:hover .svcs-card-link i {
    transform: translateX(3px);
}

.svcs-card-link i {
    font-size: 15px;
    transition: 0.35s;
}

/* -------------------------------------------------------------------- note */

.svcs-note {
    color: var(--svcs-muted);
    font-size: 16px;
    margin: 26px 0 0;
}

.svcs-note a {
    color: var(--svcs-green);
    font-weight: 600;
}

/* -------------------------------------------------------------- responsive */

@media only screen and (max-width: 991px) {
    .svcs-section {
        padding: 64px 0;
    }

    .svcs-head h2 {
        font-size: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .svcs-section {
        padding: 52px 0;
    }

    .svcs-head {
        margin-bottom: 30px;
        /* Centred headings read as ragged blocks on a narrow column. */
        text-align: left;
    }

    .svcs-head h2 {
        font-size: 28px;
    }

    .svcs-head p {
        font-size: 16px;
    }

    /* One per row below 768px: auto-fit's 250px minimum would otherwise leave
       the cards stretched edge to edge with no breathing room at ~360px. */
    .svcs-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .svcs-card {
        padding: 24px 22px 22px;
    }

    .svcs-card-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .svcs-card-title {
        font-size: 20px;
    }
}