/* Inset-photo cards inspired by the supplied carousel reference.
   The additional 32px card width exactly offsets its 16px side padding,
   preserving the original photo dimensions and responsive aspect ratio. */
body[data-page="home"] #recentWork .reel-track-wrap {
  padding-block: 22px 28px;
  background-image: linear-gradient(var(--brand-light-gray) 1px, transparent 1px), linear-gradient(90deg, var(--brand-light-gray) 1px, transparent 1px);
  background-size: 36px 36px;
}
body[data-page="home"] #recentWorkTrack { gap: 18px; align-items: stretch; animation: featured-reel-flow 38s linear infinite; }
body[data-page="home"] #recentWorkTrack:hover,
body[data-page="home"] #recentWorkTrack:focus-within { animation-play-state: paused; }
body[data-page="home"] #recentWorkTrack .reel-card {
  flex: 0 0 calc(clamp(264px, 23vw, 340px) + 32px);
  padding: 16px; border: 1px solid rgba(23,16,33,.04); border-radius: 22px;
  background: var(--brand-white); box-shadow: 0 8px 20px rgba(16,0,33,.05);
  transition: box-shadow .25s ease;
}
body[data-page="home"] #recentWorkTrack .reel-card:hover { transform: none; box-shadow: 0 10px 25px rgba(16,0,33,.1); }
body[data-page="home"] #recentWorkTrack .card-photo { flex-shrink: 0; aspect-ratio: 16 / 10.4; border-radius: 12px; }
body[data-page="home"] #recentWorkTrack .card-info { display: flex; flex-direction: column; gap: 7px; min-height: 84px; padding: 15px 0 3px; background: transparent; }
body[data-page="home"] #recentWorkTrack .card-info b { color: var(--brand-dark-text); font: 600 15px/1.35 "Outfit",sans-serif; letter-spacing: -.015em; }
body[data-page="home"] #recentWorkTrack .card-info span { color: var(--brand-muted); font: 400 12px/1.5 "Outfit",sans-serif; }
body[data-page="home"] #recentWorkTrack .card-info .reel-client { margin: 0; letter-spacing: 0; }
body[data-page="home"] #recentWorkTrack .card-info b:empty,
body[data-page="home"] #recentWorkTrack .card-info span:empty { display: none; }
body[data-page="home"] #recentWorkTrack .card-info:has(b:empty) .reel-client { color: var(--brand-dark-text); font-weight: 600; font-size: 14px; }
body[data-page="home"] #recentWorkTrack .card-play { background: rgba(16,0,33,.72); border: 1px solid rgba(255,255,255,.7); }
body[data-page="home"] #recentWorkTrack .reel-card:focus-visible { outline: 3px solid var(--brand-electric-blue); outline-offset: 3px; }
@keyframes featured-reel-flow { to { transform: translateX(calc(-50% - 9px)); } }
@media(max-width:760px) {
  body[data-page="home"] #recentWorkTrack .reel-card { flex-basis: calc(min(78vw, 300px) + 32px); border-radius: 20px; }
}
@media(prefers-reduced-motion:reduce) {
  body[data-page="home"] #recentWorkTrack { animation: none; }
  body[data-page="home"] #recentWork .reel-track-wrap { overflow-x: auto; }
}

/* Keep the single heading close to the CMS-powered gallery. */
body[data-page="home"] #recentWork { padding-top: 32px; padding-bottom: 24px; }
body[data-page="home"] #recentWork .reel-head { max-width: none; width: 100%; display: block; margin: 0 0 18px; padding: 0; border: 0; text-align: center; }
body[data-page="home"] #recentWork .section-title { max-width: none; width: 100%; margin: 0; text-align: center; }
body[data-page="home"] #recentWork .reel-track-wrap { margin-top: 0; padding-top: 12px; }
@media(max-width:760px) {
  body[data-page="home"] #recentWork { padding-top: 24px; }
  body[data-page="home"] #recentWork .reel-head { margin-bottom: 12px; }
}

/* Three-card fan preview. Original CMS video triggers remain the clickable cards. */
body[data-page="home"] #recentWork { padding: 30px 0 28px; background: var(--brand-off-white); overflow: hidden; }
body[data-page="home"] #recentWork .reel-head { margin-bottom: 18px; }
body[data-page="home"] #recentWork .reel-track-wrap { padding: 0; overflow: visible; background: none; }
body[data-page="home"] #recentWorkTrack { position: relative; display: block; height: 386px; animation: none; transform: none; overflow: visible; }
body[data-page="home"] #recentWorkTrack .reel-card { position: absolute; top: 22px; left: 50%; width: clamp(264px,30vw,320px); padding: 12px; border-radius: 24px; transform: translateX(calc(-50% + var(--fan-offset) * clamp(112px,17vw,180px))) translateY(calc(var(--fan-depth) * 14px)) rotate(calc(var(--fan-offset) * 6deg)); box-shadow: 0 18px 35px -22px rgba(16,0,33,.35); z-index: 1; cursor: pointer; }
body[data-page="home"] #recentWorkTrack .reel-card[hidden] { display: none; }
body[data-page="home"] #recentWorkTrack .reel-card.is-featured-center { z-index: 3; }
body[data-page="home"] #recentWorkTrack .reel-card:hover { transform: translateX(calc(-50% + var(--fan-offset) * clamp(112px,17vw,180px))) translateY(calc(var(--fan-depth) * 14px - 4px)) rotate(calc(var(--fan-offset) * 6deg)); }
body[data-page="home"] #recentWorkTrack .card-photo { aspect-ratio: 16 / 10.4; border-radius: 15px; }
body[data-page="home"] #recentWorkTrack .card-photo .card-play { display: none; }
body[data-page="home"] #recentWorkTrack .card-info { position: relative; min-height: 124px; padding: 12px 6px 48px; gap: 5px; }
body[data-page="home"] #recentWorkTrack .card-info b { font-size: 13px; line-height: 1.3; }
body[data-page="home"] #recentWorkTrack .card-info .reel-client { font-size: 12px; }
.featured-wave { display: block; height: 24px; width: 100%; background: repeating-linear-gradient(90deg,var(--brand-brand-blue) 0 2px,transparent 2px 6px); opacity: .5; clip-path: polygon(0 30%,10% 45%,20% 10%,30% 40%,40% 25%,50% 45%,60% 0,70% 25%,80% 40%,90% 10%,100% 35%,100% 65%,90% 90%,80% 60%,70% 75%,60% 100%,50% 55%,40% 75%,30% 60%,20% 90%,10% 55%,0 70%); }
.featured-play-mark { display: grid; position: absolute; bottom: 0; left: calc(50% - 20px); width: 40px; height: 40px; padding-left: 2px; place-items: center; border-radius: 50%; color: var(--brand-white); background: var(--brand-deep-purple); font-size: 14px; }
.is-featured-center .featured-play-mark { background: var(--brand-cta-gradient); }
.featured-fan-controls { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 12px; color: var(--brand-muted); font: 400 13px "Outfit",sans-serif; }
.featured-fan-controls button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--brand-light-gray); border-radius: 50%; background: var(--brand-white); color: var(--brand-deep-purple); cursor: pointer; }
.featured-fan-controls button:focus-visible { outline: 2px solid var(--brand-electric-blue); outline-offset: 3px; }
@media(max-width:600px) {
  body[data-page="home"] #recentWorkTrack { height: 352px; }
  body[data-page="home"] #recentWorkTrack .reel-card { width: 244px; }
  body[data-page="home"] #recentWorkTrack .card-info { min-height: 124px; }
}
body[data-page="home"] #recentWorkTrack { width: 100%; max-width: none; }
body[data-page="home"] #recentWorkTrack .card-info .featured-wave:empty { display: block; flex: 0 0 24px; }
body[data-page="home"] #recentWorkTrack .card-info .featured-play-mark { display: grid; color: var(--brand-white); }

/* Five visible videos; each card opens its existing video without footer controls. */
body[data-page="home"] #recentWorkTrack .reel-card { z-index: calc(3 - var(--fan-depth)); }
body[data-page="home"] #recentWorkTrack .card-info { padding-bottom: 8px; min-height: 96px; }
body[data-page="home"] #recentWorkTrack { height: 378px; }
@media(max-width:600px) {
  body[data-page="home"] #recentWorkTrack .reel-card { width: clamp(150px,40vw,220px); padding: 8px; transform: translateX(calc(-50% + var(--fan-offset) * 18vw)) translateY(calc(var(--fan-depth) * 14px)) rotate(calc(var(--fan-offset) * 6deg)); }
  body[data-page="home"] #recentWorkTrack .reel-card:hover { transform: translateX(calc(-50% + var(--fan-offset) * 18vw)) translateY(calc(var(--fan-depth) * 14px - 4px)) rotate(calc(var(--fan-offset) * 6deg)); }
  body[data-page="home"] #recentWorkTrack .card-info b, body[data-page="home"] #recentWorkTrack .card-info .reel-client { font-size: 11px; }
  body[data-page="home"] #recentWorkTrack { height: 310px; }
}

/* Raise the card under the pointer without changing its carousel position. */
body[data-page="home"] #recentWorkTrack .reel-card:hover,
body[data-page="home"] #recentWorkTrack .reel-card:focus-visible { z-index: 10; }