/* media: home brand video + YouTube lite embeds (inc/media.php, assets/js/media.js). */

/* ---------- Home video ---------- */
.nv-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--nv-radius); background: var(--wp--preset--color--ink); margin-top: var(--wp--preset--spacing--40); }
.nv-video__frame > * { margin: 0; }   /* flow layout adds block-gap margins to every child after the first */
.nv-video__frame > .nv-video__poster { position: absolute; inset: 0; }
.nv-video__poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.nv-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.nv-video__soon {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); margin: 0; max-width: calc(100% - 2rem);
  padding: .5rem 1rem; border-radius: 999px; background: rgba(43, 24, 16, .78); color: #fff;
  font-size: .9rem; font-weight: 600; text-align: center; white-space: nowrap;
}
.nv-video__controls { position: absolute; left: .75rem; bottom: .75rem; display: flex; gap: .5rem; }
.nv-video__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(43, 24, 16, .72); color: #fff; cursor: pointer; transition: background-color .15s;
}
.nv-video__btn:hover { background: var(--wp--preset--color--maroon); }
.nv-video__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nv-video__btn svg { width: 20px; height: 20px; fill: currentColor; }
.nv-video__btn [data-on] { display: none; }
.nv-video__btn.is-on [data-on] { display: block; }
.nv-video__btn.is-on [data-off] { display: none; }
@media (max-width: 599px) {
  .nv-video__frame { border-radius: var(--nv-radius-sm); }
  .nv-video__soon { font-size: .8rem; bottom: .6rem; }
}

/* ---------- Recipes page: YouTube grid ---------- */
.nv-recipes__group { margin-top: var(--wp--preset--spacing--40); }
.nv-recipes__group .nv-h { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.nv-admin-hint { padding: .75rem 1rem; border: 1.5px dashed var(--wp--preset--color--sand); border-radius: var(--nv-radius-sm); font-size: .9rem; color: var(--wp--preset--color--ink-soft); }
/* empty boxes and the "coming soon" line hide once a video is pasted */
.nv-recipes:has(.wp-block-embed) .nv-recipes__empty,
.nv-recipes__group:not(:has(.wp-block-embed)) { display: none; }
.nv-yt-grid { gap: 1.25rem; }
.nv-yt-grid > p:empty { display: none; }   /* the empty line the owner pastes a link into */
.nv-yt-grid--shorts { max-width: 100%; }

.nv-yt { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--nv-radius-sm); background: var(--wp--preset--color--ink); }
.nv-yt--short { aspect-ratio: 9 / 16; }
.nv-yt__link, .nv-yt iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.nv-yt__link img { width: 100%; height: 100%; object-fit: cover; }
.nv-yt__link::after {   /* play badge, YouTube red */
  content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 46px; margin: -23px 0 0 -32px; border-radius: 12px;
  background: #E62117 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center / 28px no-repeat;
  transition: background-color .15s;
}
.nv-yt__link:hover::after, .nv-yt__link:focus-visible::after { background-color: var(--wp--preset--color--maroon); }
.nv-yt__link:focus-visible { outline: 3px solid var(--wp--preset--color--maroon); outline-offset: -3px; }
@media (max-width: 599px) {
  .nv-yt-grid--shorts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem; }
}
/* sample video (scripts/fb1-samples.php): tag top left, clear of the controls */
.nv-video__tag { position: absolute; z-index: 1; left: .75rem; top: .75rem; margin: 0; line-height: 1; }   /* above the video media.js appends */
.nv-video__tag .nv-sample { margin: 0; }