/* Videos — module styles (inc/videos/). Enqueued after i18n.css; adapted from books.css. */

/* Same gutter fix as books.css: the template renders a bare .container-inner, without agnar's .pad.
   One 880px column (940 incl. gutters) for title, player and text, so their edges line up — with the
   books' 1100px measure the title ran 80px past each side of the capped player. */
.zia-video-page .container-inner { max-width: 940px; margin: 0 auto; box-sizing: border-box; padding-inline: 30px; }
@media (max-width: 719px) { .zia-video-page .container-inner { padding-inline: 20px; } }
.zia-video-single { padding-top: 2rem; padding-bottom: 3.25rem; }
.zia-video-page .zia-video-title { margin: 0 0 .25em; }
.zia-video-info { color: #777; margin: 0 0 1.4em; font-size: .95rem; }

/* ---- player ---------------------------------------------------------------------------------- */
/* Full column width (880px max, see the container) so a 4:3 film does not fill a laptop screen top to
   bottom; the aspect ratio comes inline from the post meta (zia_video_width / _height). */
.zia-video-player { position: relative; width: 100%; margin: 0 0 1.6em;
    background: #000; border-radius: 10px; overflow: hidden; }
.zia-video-el { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.zia-video-player--empty { display: flex; align-items: center; justify-content: center; color: #aaa;
    aspect-ratio: 4 / 3; max-height: 60vh; }

/* The big start button covers the poster until playback starts (then the native controls take over). */
.zia-video-start { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0;
    border: 0; background: transparent; cursor: pointer; }
.zia-video-start::before { content: ""; position: absolute; top: 50%; left: 50%; width: 84px; height: 84px;
    margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(0,0,0,.55); border: 2px solid #dd9933;
    box-sizing: border-box; transition: background-color .15s, transform .15s; }
/* play triangle — drawn with borders; nudged right so it looks centred in the circle */
.zia-video-start::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -8px;
    border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent #fff; }
.zia-video-start:hover::before, .zia-video-start:focus-visible::before { background: rgba(221,153,51,.85); transform: scale(1.06); }
.zia-video-start:focus-visible { outline: 3px solid #dd9933; outline-offset: -3px; }
@media (hover: none) { .zia-video-start:hover::before { background: rgba(0,0,0,.55); transform: none; } }
.zia-video-player.is-started .zia-video-start { display: none; }
/* loading: the triangle gives way to a spinning ring */
.zia-video-player.is-loading .zia-video-start { cursor: progress; }
.zia-video-player.is-loading .zia-video-start::after { margin: -15px 0 0 -15px; width: 30px; height: 30px;
    border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; box-sizing: border-box;
    animation: zia-video-spin .9s linear infinite; }
@keyframes zia-video-spin { to { transform: rotate(360deg); } }
.zia-video-player.has-error .zia-video-start { display: none; }
.zia-video-msg { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px 16px;
    background: rgba(0,0,0,.78); color: #fff; text-align: center; font-size: .95rem; }

.zia-video-page .zia-video-summary, .zia-video-page .zia-video-notes { margin: 0 0 1.2em; }

/* ---- hub grid ([video_library]) ------------------------------------------------------------ */
.zia-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.zia-video-card { display: block; border: 1px solid #ddd; border-radius: 10px; overflow: hidden;
    text-decoration: none !important; color: inherit; transition: box-shadow .12s, transform .12s; }
.zia-video-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
.zia-video-poster { position: relative; display: block; background: #000; }
.zia-video-thumb { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 !important; }
.zia-video-thumb--empty { background: linear-gradient(135deg, #3a3a3a, #1f1f1f); }
.zia-video-playmark { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
    border-radius: 50%; background: rgba(0,0,0,.55); border: 2px solid #dd9933; box-sizing: border-box; }
.zia-video-playmark::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -5px;
    border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff; }
.zia-video-meta { display: block; padding: 10px 12px 13px; }
.zia-video-t { display: block; font-weight: 700; line-height: 1.5; }
.zia-video-d { display: block; font-size: .82rem; color: #777; margin-top: 3px; }

/* ---- dark mode -------------------------------------------------------------------------------- */
html[data-theme="dark"] .zia-video-info, html[data-theme="dark"] .zia-video-d { color: #aaa; }
html[data-theme="dark"] .zia-video-card { border-color: #444; }
/* The grid sits inside the hub Page's .entry, where agnar's dark mode colours links with
   -webkit-text-fill-color — which overrides `color` — so both are set (see CLAUDE.md). */
html[data-theme="dark"] .zia-video-card, html[data-theme="dark"] .zia-video-card .zia-video-t {
    color: #ececec !important; -webkit-text-fill-color: #ececec !important; }
html[data-theme="dark"] .zia-video-card .zia-video-d { color: #aaa !important; -webkit-text-fill-color: #aaa !important; }
html[data-theme="dark"] .zia-video-card:hover { box-shadow: 0 5px 20px rgba(255,255,255,.30); }