/* ═══════════════════════════════════════════════════════════════
   D3 — Hero hover-expand + thematic pictograms — Variant "3 — Edge Tab"
   (client-approved, the most restrained of 3 options)
   Ported from design-variants/D3-hero-hover-expand.html,
   [data-variant="3"] block, with the ancestor prefix stripped since
   this page only ever uses variant 3, plus the shared (non-gated)
   base rules that variant 3 depends on.

   Effect: the 3 .hero-service-card cards keep a stable, equal-width grid
   while hover only lifts the hovered card and gently brightens its
   thematic pictogram tile — no dimming, desaturation, or layout shift.

   CSS-only (:has()), no JS dependency for the core effect.

   Integration note: D1's foil-bevel sheen sweep (css/d1-card-system.css)
   relies on `.hero-service-card { overflow: hidden; }` to clip its
   diagonal ::after sheen layer — removing that would leak stray light
   streaks beside the cards at rest. So the icon can't live *inside*
   the clipped .hero-service-card and still be allowed to poke out
   above its top edge. Instead, index.php wraps each card in a
   `.hero-card-slot` (position: relative, overflow: visible) and
   places `.hero-card-icon` as its sibling — `.hero-service-card`
   itself, and its overflow, are left completely untouched.
   Reuses existing tokens from premium.css :root — no new colors.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Stable hero grid ──────────────────────────────────────────
   The cards keep their original columns on hover; only the card surface
   and its pictogram respond, so the surrounding layout never jumps. */

/* ─── Card slot wrapper: keeps the pictogram above the clipped card ─ */
.hero-card-slot {
    position: relative;
    display: flex;
}

.hero-card-slot .hero-service-card {
    width: 100%;
    /* Keep the screen-blended sheen inside the card's opaque surface so it
       cannot sample the rotating background artifact behind the card. */
    isolation: isolate;
    /* Keep the opaque foil surface discrete on enter/leave. Interpolating
       `background` here briefly cross-fades the card and reveals the moving
       artifact behind it. */
    transition: transform 0.6s var(--ease-out), box-shadow 0.7s var(--ease-out), border-color 0.55s var(--ease-out);
}

.hero-card-slot .hero-service-card:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.52),
        0 20px 42px -18px rgba(0, 0, 0, 0.78),
        0 8px 24px -12px rgba(201, 162, 85, 0.2);
}

/* Keep the sheen layer composited continuously. The card itself stays fully
   opaque when the pointer enters; only the existing sheen movement changes. */
.hero-card-slot .hero-service-card::after,
.hero-card-slot .hero-service-card:hover::after {
    opacity: 1;
}

/* ─── Always-visible thematic pictogram tile ──────────────────── */
.hero-card-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: linear-gradient(155deg, rgba(201, 162, 85, 0.3), rgba(201, 162, 85, 0.08));
    border: 1px solid rgba(201, 162, 85, 0.42);
    pointer-events: none;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.05rem;
    top: 20px;
    right: 20px;
    left: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px -10px rgba(0, 0, 0, 0.72);
    transition: color 0.5s var(--ease-out), background 0.6s var(--ease-out), border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    z-index: 3;
}

.hero-card-icon img {
    display: block;
    width: 82%;
    height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.58));
}

.hero-card-slot:has(.hero-service-card:hover) .hero-card-icon,
.hero-card-slot:focus-within .hero-card-icon {
    color: var(--white);
    background: linear-gradient(155deg, rgba(240, 211, 138, 0.5), rgba(201, 162, 85, 0.16));
    border-color: rgba(240, 211, 138, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px -10px rgba(201, 162, 85, 0.36);
    transform: translateY(-3px) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .hero-card-icon {
        transition: none !important;
    }
}