/* ==========================================================================
   Site overrides.

   Loaded after the theme's style.css in resources/views/layout.antlers.html.
   Theme CSS lives in public/assets/css/style.css, which is prebuilt and has
   no sass build wired up in package.json, so project-specific rules belong
   here rather than in public/assets/sass/.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Product cards (storitve/products.antlers.html)

   The card carries .position-relative and its title link carries Bootstrap's
   .stretched-link, so the whole card is one click target with a single
   anchor — no nested <a>, and the link text stays the product name for
   screen readers and for search engines.
   -------------------------------------------------------------------------- */

.ot-team.team-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* focus-within keeps the effect for keyboard users tabbing to the link. */
.ot-team.team-card:hover,
.ot-team.team-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Contain the image zoom below. */
.ot-team.team-card .box-img {
    overflow: hidden;
}

.ot-team.team-card .box-img img {
    transition: transform 0.35s ease;
}

.ot-team.team-card:hover .box-img img,
.ot-team.team-card:focus-within .box-img img {
    transform: scale(1.05);
}

/* The stretched link covers the card, so the title should not look like the
   only hit area; the cursor already says clickable. */
.ot-team.team-card .box-title a.stretched-link {
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .ot-team.team-card,
    .ot-team.team-card .box-img img {
        transition: none;
    }

    .ot-team.team-card:hover,
    .ot-team.team-card:focus-within {
        transform: none;
    }

    .ot-team.team-card:hover .box-img img,
    .ot-team.team-card:focus-within .box-img img {
        transform: none;
    }
}