/* A stable three-panel gallery: reveal a landscape image without changing height. */
.apple-v2 #practice .project-triptych {
  --project-gap: 22px;
  --project-height: clamp(320px, 55vh, 650px);
  --project-equal: calc((100% - var(--project-gap) * 2) / 3);
  --project-wide: clamp(var(--project-equal), calc(var(--project-height) * 1.7777778), calc((100% - var(--project-gap) * 2) * .72));
  --project-narrow: calc((100% - var(--project-gap) * 2 - var(--project-wide)) / 2);
  grid-template-columns: minmax(0, var(--project-equal)) minmax(0, var(--project-equal)) minmax(0, var(--project-equal));
  gap: var(--project-gap);
  transition: grid-template-columns 620ms cubic-bezier(.22, .75, .22, 1);
}

.apple-v2 #practice .project-card {
  height: var(--project-height);
  isolation: isolate;
}

.apple-v2 #practice .project-card:focus-visible {
  outline: 3px solid #1689fa;
  outline-offset: 5px;
}

.apple-v2 #practice .project-art,
.apple-v2 #practice .efz-frame,
.apple-v2 #practice .efz-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;
  padding: 0;
  object-fit: cover;
}

.apple-v2 #practice .efz-frame img { object-position: center; }
.apple-v2 #practice .project-caption {
  padding-inline: clamp(18px, 1.7vw, 28px);
  transition: opacity 180ms ease, transform 260ms ease;
}
.apple-v2 #practice .project-caption h4 {
  font-size: clamp(21px, 2.05vw, 38px);
  white-space: nowrap;
}
.apple-v2 #practice .project-caption a { white-space: nowrap; }

/* Keyboard focus mirrors the hover expansion, including the PDF link. */
@media (min-width: 801px) {
  .apple-v2 #practice .project-triptych:has(> .project-card:nth-child(1):focus-visible),
  .apple-v2 #practice .project-triptych:has(> .project-card:nth-child(1) :focus-visible) {
    grid-template-columns: minmax(0, var(--project-wide)) minmax(0, var(--project-narrow)) minmax(0, var(--project-narrow));
  }
  .apple-v2 #practice .project-triptych:has(> .project-card:nth-child(2):focus-visible),
  .apple-v2 #practice .project-triptych:has(> .project-card:nth-child(2) :focus-visible) {
    grid-template-columns: minmax(0, var(--project-narrow)) minmax(0, var(--project-wide)) minmax(0, var(--project-narrow));
  }
  .apple-v2 #practice .project-triptych:has(> .project-card:nth-child(3):focus-visible),
  .apple-v2 #practice .project-triptych:has(> .project-card:nth-child(3) :focus-visible) {
    grid-template-columns: minmax(0, var(--project-narrow)) minmax(0, var(--project-narrow)) minmax(0, var(--project-wide));
  }
  .apple-v2 #practice .project-triptych:has(:focus-visible):not(:has(> .project-card:hover)) > .project-card:not(:focus-visible):not(:has(:focus-visible)) .project-caption {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
}

@media (min-width: 801px) and (hover: hover) and (pointer: fine) {
  .apple-v2 #practice .project-triptych:has(> .project-card:nth-child(1):hover) {
    grid-template-columns: minmax(0, var(--project-wide)) minmax(0, var(--project-narrow)) minmax(0, var(--project-narrow));
  }
  .apple-v2 #practice .project-triptych:has(> .project-card:nth-child(2):hover) {
    grid-template-columns: minmax(0, var(--project-narrow)) minmax(0, var(--project-wide)) minmax(0, var(--project-narrow));
  }
  .apple-v2 #practice .project-triptych:has(> .project-card:nth-child(3):hover) {
    grid-template-columns: minmax(0, var(--project-narrow)) minmax(0, var(--project-narrow)) minmax(0, var(--project-wide));
  }
  .apple-v2 #practice .project-triptych:has(> .project-card:hover) > .project-card:not(:hover) .project-caption {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
  .apple-v2 #practice .project-triptych:has(> .project-card:hover) > .project-card:hover .project-caption {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (min-width: 801px) and (max-height: 780px) {
  .apple-v2 #practice .project-triptych { --project-height: 51vh; }
}

/* Touch screens retain fully readable cards; no hover-dependent content. */
@media (max-width: 800px) {
  .apple-v2 #practice .project-triptych {
    grid-template-columns: minmax(0, 1fr);
    transition: none;
  }
  .apple-v2 #practice .project-card {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 250px;
    max-height: none;
  }
  .apple-v2 #practice .project-caption { padding: 45px 22px 22px; }
  .apple-v2 #practice .project-caption h4 { font-size: clamp(22px, 4.8vw, 32px); }
  .apple-v2 #practice .project-app { width: 52px; height: 52px; margin-bottom: 10px; border-radius: 14px; }
  .apple-v2 #practice .project-ballance-mark { width: 130px; max-height: 58px; margin-bottom: 7px; }
}

.apple-v2.motion-off #practice .project-triptych,
.apple-v2.motion-off #practice .project-caption { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .apple-v2 #practice .project-triptych,
  .apple-v2 #practice .project-caption { transition: none; }
}