/* ado-casestudy.css — ADO batch 2026-06-12 round 3. Loaded LAST (after donna365.css).
   Owner: single subagent. Scope rules to avoid leaking to other pages. */

/* ==========================================================================
   ADO-907  —  Make case-study slider cards clickable (stretched-link fix)
   ========================================================================== */

/*
 * Problem: The .image area has overflow:hidden + position:relative.
 *   - The .view-project pill (<a>) has opacity:0; visibility:hidden until hover.
 *   - The GSAP cursor-follower tracks mouse position and shows the pill on hover,
 *     but the pill is only clickable inside its pill bounds.
 *   - Nothing covers the full image area to intercept clicks.
 *
 * Fix: Add .ado-card-link — an absolutely-positioned transparent <a> that
 *   covers the entire .image area. It sits at z-index:5, above the ::after
 *   shimmer (z-index:1). The visual .view-project pill is raised to z-index:6
 *   so it renders above the overlay (purely decorative; pointer-events:none).
 *
 * The .tf-mouse cursor follower element is given pointer-events:none so GSAP
 *   animation still works but the element never blocks clicks.
 */

/* --- Stretched-link overlay ------------------------------------------------ */
.section-featured-works .featured-works-item .image .ado-card-link {
  position: absolute;
  inset: 0;              /* top/right/bottom/left: 0 — fills the whole image */
  z-index: 5;
  display: block;
  pointer-events: auto;
  background: transparent;
  /* inherit the rounded corners from .image */
  border-radius: inherit;
  /* no text content — purely clickable surface */
  font-size: 0;
  line-height: 0;
  color: transparent;
  /* remove default anchor underline/outline on this invisible layer */
  text-decoration: none;
  /* keep focus ring for accessibility */
  outline-offset: -3px;
}

/* --- Raise the visual pill above the stretched-link (decorative only) ------ */
.section-featured-works .featured-works-item .image .view-project {
  z-index: 6;
  /* pill itself shouldn't swallow pointer events — stretched-link handles it */
  pointer-events: none;
}

/* --- Ensure GSAP tf-mouse follower never intercepts clicks ----------------- */
.section-featured-works .featured-works-item .image .tf-mouse {
  pointer-events: none;
}

/* --- Hover: trigger the visual pill reveal when hovering the card (via link) */
/*
 * The existing CSS triggers pill reveal on .featured-works-item:hover.
 * No change needed there — our <a> sits inside .featured-works-item so
 * hovering the <a> (stretched-link) naturally triggers :hover on the item too.
 */