/* =====================================================================
   serviceTiles — homepage "Leistungs-Kacheln" (Was wir für Sie fertigen).
   THE what-do-they-sell section (fable_recommends.md §4.1): 4 linked cards
   Prototyping / Serienfertigung / Engineering & Design / Qualität, between
   statCards and the reference-logo band.

   Design system mirrors statCards.css: white full-bleed ground, square white
   cards with hairline border, gold line-icons, navy titles, gold top-edge
   accent + lift on hover. Whole card is ONE <a>. BEM naming, brand tokens.
   ===================================================================== */

.service-tiles {
    --st-navy: #253D66;
    --st-gold: #FCBA00;
    --st-text: #5b6b82;

    width: 100vw;                        /* full-bleed like statCards / the bands */
    margin-left: calc(50% - 50vw);
    background: #ffffff;
    padding: 56px 0 56px;                /* 56 = half of the uniform 112px caesura, top+bottom (user 2026-07-08; +25% pass 2026-07-16, was 45/90) */
}

.service-tiles__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* heading + intro use the shared .fit-heading / .fit-intro; the multi-sentence lead
   now sits in the two-column .fit-sechead (sectionHeading.css, user 2026-07-10) —
   its measure comes from the grid column, the old local 640px cap is gone. */

.service-tiles__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* --- tile (one <a>) --------------------------------------------------- */
.service-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 0;                    /* eckig, wie statCards */
    padding: 32px 22px 26px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(37, 61, 102, .06);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.service-tile:hover,
.service-tile:focus-visible {
    text-decoration: none;
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(37, 61, 102, .12);
    border-color: #dde3ec;
}

/* gold top-edge accent, revealed on hover (statCards pattern) */
.service-tile::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 3px;
    background: var(--st-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.service-tile:hover::before,
.service-tile:focus-visible::before { transform: scaleX(1); }

.service-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: 14px;
    color: var(--st-gold);
}
.service-tile__icon svg { width: 38px; height: 38px; display: block; }

.service-tile__title {
    display: block;
    color: var(--st-navy);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 8px;
}

.service-tile__text {
    display: block;
    color: var(--st-text);
    font-size: 13.5px;
    line-height: 1.5;
    flex: 1 1 auto;                      /* equal-height tiles: push the link row to the bottom */
    margin-bottom: 14px;
}

.service-tile__link {
    display: block;
    color: var(--st-navy);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.service-tile__link span { color: var(--st-gold); transition: transform .2s ease; display: inline-block; }
.service-tile:hover .service-tile__link span { transform: translateX(4px); }

/* --- responsive: 4-up desktop -> 2x2 -> single column ----------------- */
@media (max-width: 991px) {
    .service-tiles__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .service-tiles { padding: 38px 0 38px; }   /* mobile half-caesura (+25% 2026-07-16, was 30) */
    .service-tiles__inner { padding: 0 16px; }
    .service-tiles__grid { gap: 16px; }
    .service-tile { padding: 26px 16px 22px; }
}

/* deliberate one-off breakpoint (documented 2026-07-10): the 2x2 grid keeps working
   down to ~480, below that the text tiles get too narrow -> single column. statCards
   stays 2x2 on purpose (pure number cards survive narrow columns; these don't). */
@media (max-width: 479px) {
    .service-tiles__grid { grid-template-columns: 1fr; }
}

/* reduced motion: no hover lift / accent slide */
@media (prefers-reduced-motion: reduce) {
    .service-tile,
    .service-tile::before,
    .service-tile__link span { transition: none; }
    .service-tile:hover { transform: none; }
}