/* ===== Dogwood Video Grid — front end ===== */
.dwvg{ position:relative; margin:1.5rem 0; }
.dwvg__viewport{ overflow:hidden; }
.dwvg__track{ display:flex; }
.dwvg__track.dwvg--fs{ transform:none !important; }

.dwvg__slide{
  flex:0 0 100%;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
  padding:0 calc( var(--dwvg-gap,16px) / 2 );
}

.dwvg__tile{
  position:relative; display:block; width:100%;
  margin:0;
  border-radius:var(--dwvg-radius,14px); overflow:hidden; background:#000;
  aspect-ratio:9 / 16; max-width:300px;
}
.dwvg--r-9-16 .dwvg__tile{ aspect-ratio:9 / 16; max-width:300px; }
.dwvg--r-1-1  .dwvg__tile{ aspect-ratio:1 / 1;  max-width:460px; }
.dwvg--r-16-9 .dwvg__tile{ aspect-ratio:16 / 9; max-width:720px; }

.dwvg__thumb{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; z-index:1; }
.dwvg__thumb--tall{ display:none; }
@media (max-width:781px){
  .dwvg__thumb--wide{ display:none; }
  .dwvg__thumb--tall{ display:block; }
}

.dwvg__facade{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; border:0; padding:0; margin:0;
  background:transparent; cursor:pointer;
}
.dwvg__facade:focus-visible{ outline:3px solid var(--dwvg-accent,#1d4ed8); outline-offset:-3px; }

.dwvg__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background:rgba(0,0,0,.55); transition:background .2s ease; pointer-events:none;
}
.dwvg__facade:hover .dwvg__play{ background:rgba(0,0,0,.75); }
.dwvg__play::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:12px 0 12px 19px;
  border-color:transparent transparent transparent #fff;
}

.dwvg__tile iframe{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important; border:0 !important; z-index:3; background:#000; }

.dwvg__close{
  position:absolute; top:8px; right:8px; z-index:4;
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border:0; border-radius:50%;
  background:rgba(0,0,0,.72); cursor:pointer; line-height:1;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.4);
}
.dwvg__close::before{ content:"\00d7"; color:#fff; font-size:24px; }
.dwvg__close:hover{ background:rgba(0,0,0,.9); }

/* when playing: hide the play facade, show the close button */
.dwvg__tile.is-playing .dwvg__facade{ display:none; }
.dwvg__tile.is-playing .dwvg__close{ display:flex; }

/* custom fullscreen button — only when YouTube's own controls are hidden,
   and only where the Fullscreen API is usable (added by JS: .dwvg--fs-ok) */
.dwvg__fs{
  position:absolute; bottom:8px; right:8px; z-index:4;
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border:0; border-radius:50%;
  background:rgba(0,0,0,.72); color:#fff; cursor:pointer; line-height:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.4);
}
.dwvg__fs:hover{ background:rgba(0,0,0,.9); }
.dwvg--no-controls.dwvg--fs-ok .dwvg__tile.is-playing .dwvg__fs{ display:flex; }
/* ...and on small players, where YouTube hides its own fullscreen button */
.dwvg--fs-ok .dwvg__tile.dwvg--small.is-playing .dwvg__fs{ display:flex; }

/* fullscreen: force the tile (and iframe) to fill the screen with a black
   backdrop so any device safe-area gap blends with the video letterbox */
.dwvg__tile:-webkit-full-screen{ width:100% !important; height:100% !important; max-width:none !important; aspect-ratio:auto !important; background:#000; }
.dwvg__tile:fullscreen{ width:100% !important; height:100% !important; max-width:none !important; aspect-ratio:auto !important; background:#000; }

/* fullscreen: force fill + black background so any device safe-area
   gap blends with the video letterbox instead of showing white */
.dwvg__tile iframe:-webkit-full-screen{ width:100% !important; height:100% !important; background:#000; }
.dwvg__tile iframe:fullscreen{ width:100% !important; height:100% !important; background:#000; }

.dwvg__dots{ display:flex; gap:7px; justify-content:center; margin-top:12px; }
.dwvg__dots span{
  width:7px; height:7px; border-radius:50%; background:currentColor;
  opacity:.3; transition:opacity .2s ease, transform .2s ease;
}
.dwvg__dots span.on{ opacity:1; transform:scale(1.3); }

.dwvg__arrow{ display:none; }
.dwvg--carousel .dwvg__viewport{ touch-action:pan-y; }

/* ----- Desktop ----- */
@media (min-width:782px){
  /* On desktop, when YouTube's own controls are visible, the X is redundant
     (click-to-pause closes, YT handles fullscreen) — so hide it there.
     It stays on mobile, and on desktop when controls are hidden. */
  .dwvg:not(.dwvg--no-controls) .dwvg__tile.is-playing .dwvg__close{ display:none; }

  /* CAROUSEL multi-up: show N videos across, sized to fill the width */
  .dwvg--carousel .dwvg__slide{
    flex-basis:calc( 100% / var(--dwvg-per,1) );
    max-width:calc( 100% / var(--dwvg-per,1) );
  }
  .dwvg--multi .dwvg__tile{ max-width:none; }
  /* Multi-up columns are portrait-shaped, so prefer the vertical (mobile)
     poster here when one is set, instead of the cropped landscape poster. */
  .dwvg--multi .dwvg__thumb--wide{ display:none; }
  .dwvg--multi .dwvg__thumb--tall{ display:block; }

  .dwvg--grid .dwvg__viewport{ overflow:visible; }
  .dwvg--grid .dwvg__dots{ display:none; }

  .dwvg--grid .dwvg__track{
    transform:none !important;
    display:grid;
    grid-template-columns:repeat( var(--dwvg-cols,3), 1fr );
    gap:var(--dwvg-gap,16px);
    align-items:start;             /* plain-grid fallback before JS masonry */
  }
  .dwvg--grid .dwvg__slide{ flex:none; display:block; padding:0; }
  .dwvg--grid .dwvg__tile{ max-width:none; width:100%; }

  /* JS-enabled masonry packing */
  .dwvg--grid .dwvg__track.is-masonry{
    grid-auto-rows:8px;
    grid-auto-flow:dense;
    align-items:stretch;
  }
  .dwvg--grid .dwvg__track.is-masonry .dwvg__tile{ height:100%; }

  /* CAROUSEL on desktop: swipe + arrows (look chosen in settings) */
  .dwvg--carousel .dwvg__arrow{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:44px; height:44px; padding:0; border:0; cursor:pointer;
    background:transparent; color:#fff; --dwvg-chev:3px;
    transition:background .2s ease, color .2s ease, opacity .2s ease;
  }
  .dwvg--carousel .dwvg__arrow[disabled]{ opacity:.2; cursor:default; }
  .dwvg--carousel .dwvg__arrow--prev{ left:10px; }
  .dwvg--carousel .dwvg__arrow--next{ right:10px; }

  /* Chevron glyph (open outline) — deliberately unlike the solid play triangle */
  .dwvg--carousel .dwvg__arrow::after{
    content:""; width:13px; height:13px; box-sizing:border-box; border:0 solid currentColor;
  }
  .dwvg--carousel .dwvg__arrow--prev::after{ border-width:0 0 var(--dwvg-chev) var(--dwvg-chev); transform:rotate(45deg); margin-left:4px; }
  .dwvg--carousel .dwvg__arrow--next::after{ border-width:var(--dwvg-chev) var(--dwvg-chev) 0 0; transform:rotate(45deg); margin-right:4px; }

  /* style: light circle (default) */
  .dwvg--arr-light .dwvg__arrow{ background:rgba(255,255,255,.92); color:#1a1a1a; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.28); }
  .dwvg--arr-light .dwvg__arrow:hover{ background:#fff; }

  /* style: dark circle */
  .dwvg--arr-dark .dwvg__arrow{ background:rgba(0,0,0,.55); color:#fff; border-radius:50%; }
  .dwvg--arr-dark .dwvg__arrow:hover{ background:rgba(0,0,0,.82); }

  /* style: minimal chevron (no chip) */
  .dwvg--arr-chevron .dwvg__arrow{ background:transparent; color:#fff; --dwvg-chev:4px; filter:drop-shadow(0 1px 4px rgba(0,0,0,.7)); }
  .dwvg--arr-chevron .dwvg__arrow::after{ width:17px; height:17px; }
  .dwvg--arr-chevron .dwvg__arrow:hover{ opacity:.8; }

  /* style: none */
  .dwvg--arr-none .dwvg__arrow{ display:none; }
}

/* Arrow placement: Outside — only when the viewport is wide enough to have
   margin room. Below this it falls back to the overlay position above. */
@media (min-width:1080px){
  .dwvg--arr-outside.dwvg--carousel .dwvg__arrow--prev{ left:-56px; }
  .dwvg--arr-outside.dwvg--carousel .dwvg__arrow--next{ right:-56px; }
}

@media (prefers-reduced-motion:reduce){
  .dwvg__track{ transition:none !important; }
}