/* =====================================================================
   useCaseCards — compact "Ausgewählte Projekte" card row on the homepage
   (fable_recommends.md §4.2). Replaces the three old full-bleed use-case
   story sections. Design system mirrors serviceTiles/statCards: square
   white cards, hairline border, gold hover accent + lift, whole card = <a>.

   Media box: fixed 3:2 area; photos use --cover (fill+crop), product shots
   on white/transparent use --contain (letterboxed on a light ground).
   ===================================================================== */

.use-cases {
    --uc-navy: #253D66;
    --uc-gold: #FCBA00;
    --uc-text: #5b6b82;

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

.use-cases__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* heading uses the shared .fit-heading (sectionHeading.css) */

.use-cases__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* --- card (one <a>) ---------------------------------------------------- */
.use-case {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 0;
    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;
}
.use-case:hover,
.use-case: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 (family pattern) */
.use-case::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 3px;
    background: var(--uc-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
    z-index: 1;
}
.use-case:hover::before,
.use-case:focus-visible::before { transform: scaleX(1); }

/* --- media box (3:2) --------------------------------------------------- */
.use-case__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f6f8fb;                 /* light ground for --contain product shots */
}
.use-case__media img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .35s ease;
}
.use-case__media--cover img   { object-fit: cover; }
.use-case__media--contain img { object-fit: contain; padding: 14px; box-sizing: border-box; }
.use-case:hover .use-case__media img { transform: scale(1.04); }

/* --- body --------------------------------------------------------------- */
.use-case__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
    text-align: left;
}

.use-case__title {
    color: var(--uc-navy);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 6px;
}

.use-case__text {
    color: var(--uc-text);
    font-size: 13.5px;
    line-height: 1.5;
    flex: 1 1 auto;                      /* equal height: link row pinned to the bottom */
    margin-bottom: 12px;
}

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

/* --- "all use cases" link ---------------------------------------------- */
.use-cases__all {
    margin: 22px 0 0;
    text-align: center;
}
.use-cases__all a {
    color: var(--uc-navy);
    /* aligned with the fitMap "open full size" collection link + the uppercase
       micro-link family (was 14px mixed-case .03em — the odd one out; 2026-07-10) */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}
.use-cases__all a:hover { text-decoration: underline; }
.use-cases__all a span { color: var(--uc-gold); }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
    .use-cases__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

@media (max-width: 767px) {
    .use-cases { padding: 38px 0 38px; }   /* mobile half-caesura (+25% 2026-07-16, was 30) */
    .use-cases__inner { padding: 0 16px; }
    .use-cases__grid { gap: 16px; }
}

/* reduced motion: no lift / zoom / arrow slide */
@media (prefers-reduced-motion: reduce) {
    .use-case,
    .use-case::before,
    .use-case__media img,
    .use-case__link span { transition: none; }
    .use-case:hover { transform: none; }
    .use-case:hover .use-case__media img { transform: none; }
}