/* ================================
   LiteYouTube — MD3 Expressive
   (structure unchanged)
   ================================ */
:root{
  /* Brand seeds (fallbacks) */
  --it-purple:#4a154b;
  --it-blue:#64c3eb;
  --it-yellow:#e3b34c;

  /* MD3 roles (fallbacks; your globals can override) */
  --md-surface:#fafbfc;
  --md-surface-bright:#ffffff;
  --md-surface-container:#edf0f5;
  --md-on-surface:#111316;
  --md-outline:#c3c8d1;
  --md-outline-variant:#dbe0e8;

  --md-primary: var(--it-purple);
  --md-on-primary:#ffffff;
  --md-primary-container:#EADDFF;

  /* Elevation */
  --elev-1:0 2px 4px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.04);
  --elev-2:0 8px 20px rgba(0,0,0,.18);
  --elev-3:0 12px 30px rgba(0,0,0,.28);

  /* Shape & states */
  --yt-radius:16px;
  --state-hover:.10; --state-focus:.16;
}

@media (prefers-color-scheme: dark){
  :root{
    --md-surface:#101214;
    --md-surface-bright:#16181c;
    --md-surface-container:#1b1f24;
    --md-on-surface:#e7eaee;
    --md-outline:#454a52;
    --md-outline-variant:#2e3238;
    --elev-1:0 2px 4px rgba(0,0,0,.5);
    --elev-2:0 8px 24px rgba(0,0,0,.55);
    --elev-3:0 14px 36px rgba(0,0,0,.65);
  }
}

/* Card shell */
lite-youtube{
  position:relative;
  display:block;
  width:100%;
  max-width:720px;
  aspect-ratio:16/9;
  min-height:180px;

  /* thumbnail area */
  background-color:#000;
  background-position:center;
  background-size:cover;

  cursor:pointer;
  border-radius:var(--yt-radius);
  overflow:hidden;

  /* MD3 outline + elevation */
  border:1px solid var(--md-outline-variant);
  box-shadow:var(--elev-2);
  transition: box-shadow .25s ease, border-color .2s ease, filter .2s ease;
}
lite-youtube:hover{
  box-shadow:var(--elev-3);
}

/* Title scrim */
lite-youtube::before{
  content:attr(data-title);
  display:block;
  position:absolute; top:0; left:0; right:0;
  height:80px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  font-family:"Fields Light", -apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:#ce375c;
  font-size:16px; font-weight:500;
  padding:20px;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
  box-sizing:border-box;
  z-index:2;
  pointer-events:none;
}

/* Intrinsic ratio shim (kept) */
lite-youtube::after{
  content:"";
  display:block;
  padding-bottom:56.25%;
  background-color:transparent;
  transition: background-color .25s ease;
}
lite-youtube:hover::after{
  /* light state layer on hover */
  background-color:rgba(0,0,0, .12);
}

/* Iframe (unchanged) */
lite-youtube > iframe{
  width:100%; height:100%;
  position:absolute; top:0; left:0;
  border:0;
}

/* Play button overlay — MD3 “filled tonal” feel */
lite-youtube .lyt-playbtn{
  display:flex; align-items:center; justify-content:center;
  position:absolute; inset:0;
  /* semi-tonal veil over thumb */
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18));
  border:none; cursor:pointer; z-index:2;

  font-size:68px; color:#fff;
  transition: transform .18s ease, filter .18s ease, background-color .18s ease;
  /* subtle inner ring */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
@media (hover:hover){
  lite-youtube:hover .lyt-playbtn{
    transform:scale(1.06);
    filter:saturate(112%);
    background:
      radial-gradient(closest-side, rgba(255,255,255,.12), rgba(255,255,255,0) 70%) center,
      linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.14));
  }
}
/* Keyboard focus */
lite-youtube .lyt-playbtn:focus-visible{
  outline:3px solid color-mix(in oklab, var(--md-primary) 35%, #fff);
  outline-offset:2px;
}

/* Activated = hide overlays */
lite-youtube.lyt-activated{ cursor:default; }
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lyt-playbtn{
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}

/* a11y helper (kept) */
.lyt-visually-hidden{
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  height:1px; overflow:hidden; position:absolute;
  white-space:nowrap; width:1px;
}

/* Subtle hover state layer */
lite-youtube .lyt-hover-overlay{
  position:absolute; inset:0;
  background-color:rgba(255,255,255,.06);
  opacity:0; transition:opacity .25s ease;
  z-index:1; pointer-events:none;
}
lite-youtube:hover .lyt-hover-overlay{ opacity:1; }

/* Caption/label chip under video */
.lite-label{
  font-family:"Fields Light", -apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:300; font-size:15px; text-align:center;
  margin:10px auto 30px; max-width:720px;

  color:var(--md-on-surface);
  background:var(--md-surface-bright);
  padding:10px 20px;
  border-radius:12px;
  border:1px solid var(--md-outline-variant);
  box-shadow:var(--elev-1);
}

/* Responsive play icon scaling */
@media (max-width:768px){
  lite-youtube .lyt-playbtn{ font-size:48px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  lite-youtube, lite-youtube .lyt-playbtn,
  lite-youtube::after, lite-youtube .lyt-hover-overlay{
    transition:none !important;
  }
}