/* ── Delivery day video ───────────────────────────────────────────
   One portrait Short that sits directly under the pagination row on the
   homepage and on every grid page, above the "What Families Are Saying"
   reviews carousel. The .bp-delivery-video-frame box holds a thumbnail
   facade until /delivery-day-video.js swaps the player in on tap, so it has
   to hold its own height to avoid a layout jump.

   Sized exactly the way .breed-video in /css/breed-page.css is: the height
   comes from the 9:16 ratio, and capping the *width* at 60vh x 9/16 is what
   keeps the frame near 60% of the screen height — aspect-ratio plus
   max-height is unreliable, aspect-ratio plus max-width is not. On a phone
   the column is usually narrower than that cap, so the viewport width is
   what binds there. */
.bp-delivery-video {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 24px 4px;
  box-sizing: border-box;
  text-align: center;
}
.bp-delivery-video-title {
  margin: 0 0 14px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--brown, #3A2010);
  text-align: center;
}
.bp-delivery-video-frame {
  position: relative;
  width: 100%;
  max-width: calc(60vh * 9 / 16);
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 12px;
  background: #0d0d0d;
  box-shadow: 0 2px 10px rgba(58, 32, 16, 0.14);
}
.bp-delivery-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 700px) {
  .bp-delivery-video { padding: 18px 18px 2px; }
}
/* Hidden by /delivery-day-video.js while a breed is selected. */
.bp-delivery-video[hidden] { display: none; }

/* ── Click-to-play facade ──
   The thumbnail and play button sit in the markup, filling the frame box,
   until the visitor taps; /delivery-day-video.js then swaps in the player in
   the same box. The thumbnail's own inline style already pins it to the box,
   so the frame holds its shape even before this stylesheet arrives. */
.bp-yt-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0d0d0d;
  cursor: pointer;
  display: block;
  -webkit-tap-highlight-color: transparent;
}
.bp-yt-facade[hidden] { display: none; }
.bp-yt-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* YouTube's own play button: red rounded tab, white triangle. */
.bp-yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.bp-yt-play svg { display: block; width: 100%; height: 100%; }
.bp-yt-play .bp-yt-play-bg { fill: #f00; transition: fill .15s; }
.bp-yt-facade:hover .bp-yt-play-bg,
.bp-yt-facade:focus-visible .bp-yt-play-bg { fill: #cc0000; }
.bp-yt-facade:focus-visible { outline: 3px solid #C9893A; outline-offset: -3px; }