/* ==========================================================================
   DAP Homepage ACF Blocks - additions layered on top of the ported design
   system. Tokens only, zero new hex. Two purposes:
   1. Accessible "stretched link" so the whole Audit card and the whole
      Vertical panel are clickable (matching the Services cards), while
      nested links stay focusable.
   2. Optional client-logo mark inside a case-study tile.
   ========================================================================== */

/* ---- Stretched link (whole-card click target) -------------------------- */
/* The host card gets position:relative. The link is visually hidden text but
   its ::after overlays the entire card, carrying the accessible name and the
   click. Real, visible interactive children sit above it via z-index. */
.has-stretch { position: relative; }

.stretched-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* keeps the pointer cursor across the whole card */
  cursor: pointer;
}
.stretched-link:focus-visible::after {
  outline: 3px solid var(--accent-main);
  outline-offset: 3px;
  border-radius: var(--radius-lg, 14px);
}

/* Visible interactive children must clear the overlay so they stay clickable
   and individually focusable. */
.has-stretch a:not(.stretched-link),
.has-stretch button:not(.stretched-link) {
  position: relative;
  z-index: 2;
}

/* ---- Team band photos: guaranteed reveal ------------------------------- */
/* The .film-cell images start at opacity:0 and were revealed by a JS observer
   that depends on scroll. To make the band reliable (it was rendering blank),
   reveal them with a CSS entrance animation that ends visible, independent of
   JS. The hover effects in the ported CSS still apply. */
@keyframes dapFilmReveal {
  from { opacity: 0; transform: translateY(24px); filter: saturate(0.6); }
  to   { opacity: 1; transform: none; filter: saturate(1); }
}
.film-cell {
  opacity: 1;
  animation: dapFilmReveal 0.7s ease both;
}
.film-col:nth-child(2) .film-cell { animation-delay: 0.08s; }
.film-col:nth-child(3) .film-cell { animation-delay: 0.16s; }
.film-col:nth-child(4) .film-cell { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .film-cell { animation: none; opacity: 1; transform: none; filter: saturate(1); }
}

/* ---- CTA overflow guard ------------------------------------------------ */
/* Base .btn uses white-space:nowrap, so a long label inside a narrow column
   (e.g. an audit card, or a constrained theme content width) overflows its
   container. Keep buttons within their box: let labels wrap inside cards and on
   small screens, and never exceed the container width. Wide-screen standalone
   buttons keep the designed single-line look. */
.btn { max-width: 100%; }

.card .btn,
.audit-v5-card .btn,
.case .btn,
.motto-card .btn {
  white-space: normal;
}

@media (max-width: 640px) {
  .btn { white-space: normal; }
}

/* ---- Optional client logo inside a case-study tile --------------------- */
.case-logo {
  max-height: 30px;
  max-width: 140px;
  width: auto;
  margin-bottom: var(--space-2, 8px);
  object-fit: contain;
}