/* ==========================================================================
   home-allwork-05 · yt/yt.css — Google Ads Audits: real video cards + the player
   Scoped to .p-audits / .aw5-v (the audit cards) and .s05-ov.k-audits (their
   lightbox); no other tab or section is reached. The plate, card width and
   type come from compose.css; this tab's band is 18px taller (12px on a phone)
   to hold the view-count line under a two-line title. The thumbnail is 16:9
   and reserved before it loads, so nothing moves when it arrives.
   ========================================================================== */

/* ---- the band: room for thumbnail + two-line title + one meta line ---- */
#hx .aw5-host .aw5-panel.p-audits { --bh: 198px; }
@media (max-width: 760px) { #hx .aw5-host .aw5-panel.p-audits { --bh: 184px; } }

/* ---- the card: thumbnail, a quiet play mark, the length, a two-line title, views ---- */
#hx .aw5-host .s05-g.aw5-v .aw5-vt {
  position: relative; display: block; flex: none; aspect-ratio: 16 / 9; margin: 0 0 9px;
  border-radius: 7px; overflow: hidden; background: #E3EAF3;
}
#hx .aw5-host .s05-g.aw5-v .aw5-vt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#hx .aw5-host .s05-g.aw5-v .aw5-pb {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .95); color: var(--brand, #0760C6); box-shadow: 0 2px 10px rgba(11, 13, 18, .28);
  transition: background-color .25s ease, color .25s ease;
}
#hx .aw5-host .s05-g.aw5-v .aw5-pb svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
#hx .aw5-host .s05-g.aw5-v:is(:hover, :focus-visible) .aw5-pb { background: var(--brand, #0760C6); color: #fff; }
#hx .aw5-host .s05-g.aw5-v .aw5-du {
  position: absolute; right: 6px; bottom: 6px; padding: 3px 5px; border-radius: 4px;
  background: rgba(11, 13, 18, .82); color: #fff; font: 700 11.5px/1 var(--sans); font-variant-numeric: tabular-nums;
}
/* the video's own title, two lines — the same 15/700 ink as every name in the band */
#hx .aw5-host .s05-g.aw5-v b {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important;
  white-space: normal !important; text-overflow: clip; overflow: hidden; line-height: 1.25 !important;
}
/* views · age — secondary, the band's mute grey, never bold */
#hx .aw5-host .s05-g.aw5-v .aw5-vm {
  display: block; margin-top: 2px; padding: 0 4px; font-size: 12.5px; font-weight: 400; line-height: 1.3;
  color: var(--mute, #5A6678); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the band clips anything drawn outside a card, so the focus ring sits inside it */
#hx .aw5-host .s05-g.aw5-v:focus-visible { outline: 2px solid var(--tab-ring, #003F8A); outline-offset: -2px; }

/* ---- the lightbox for a video: sized to the video, centred, never taller than the screen ---- */
.s05-ov.k-audits { --aw5-chrome: 242px; }
.s05-ov.k-audits .s05-box { top: 50%; bottom: auto; height: auto; max-height: calc(100dvh - 20px); translate: 0 -50%; }
@media (min-width: 900px) {
  .s05-ov.k-audits { --aw5-chrome: 314px; }
  .s05-ov.k-audits .s05-box { top: 50%; bottom: auto; height: auto; max-height: calc(100dvh - 80px); translate: -50% -50%; }
}
.s05-ov.k-audits .aw5-vw { width: min(100%, 880px, calc((100dvh - var(--aw5-chrome)) * 16 / 9)); margin: 0 auto; }
.s05-ov.k-audits .aw5-vp { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0B0D12; }
.s05-ov.k-audits .aw5-vp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s05-ov.k-audits .aw5-vp iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* a shared link opens on the poster: one play button, the player loads on the tap */
.s05-ov.k-audits .aw5-go {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .96); color: var(--accent, #1A73E8); box-shadow: 0 4px 18px rgba(11, 13, 18, .3);
  transition: background-color .25s ease, color .25s ease;
}
.s05-ov.k-audits .aw5-go svg { width: 30px; height: 30px; margin-left: 3px; fill: currentColor; }
.s05-ov.k-audits .aw5-go:is(:hover, :focus-visible) { background: var(--accent, #1A73E8); color: #fff; }
.s05-ov.k-audits .aw5-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* under the player: views · age, then Share and View on YouTube — secondary, one quiet row
   (on a narrow phone the two buttons drop under the views, still right-aligned) */
.s05-ov.k-audits .aw5-vb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; min-height: 36px; }
.s05-ov.k-audits .aw5-vb .aw5-vm { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s05-ov.k-audits .aw5-acts { display: flex; gap: 8px; margin-left: auto; }
.s05-ov.k-audits .aw5-act {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2);
  font: 600 13.5px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.s05-ov.k-audits .aw5-yt { padding: 0 12px 0 14px; }
.s05-ov.k-audits .aw5-act svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s05-ov.k-audits .aw5-yt svg { width: 15px; height: 15px; }
@media (hover: hover) { .s05-ov.k-audits .aw5-act:hover { border-color: #A9C5EA; color: var(--accent-ink); } }
.s05-ov.k-audits .aw5-act:focus-visible { outline: 2px solid var(--tab-ring); outline-offset: 2px; }
@media (max-width: 599px) {
  .s05-ov.k-audits { --aw5-chrome: 286px; }                 /* the second line of the row */
  .s05-ov.k-audits .aw5-act { height: 38px; padding: 0 12px 0 11px; font-size: 13px; }
  .s05-ov.k-audits .aw5-yt { padding: 0 11px 0 12px; }
}
/* filmstrip: the real thumbnails, 16:9 */
.s05-ov.k-audits .s05-fi img { display: block; width: 100%; height: 100%; object-fit: cover; }