/* ======================================================================
 * videos.css - /videos, "Get to know the CRM" (views/marketing/videos.php).
 *
 * Rides on marketing.css (layouts/marketing: no Bootstrap, no core.css) and
 * uses its tokens (--mk-navy, --mk-accent, --mk-line ...). Three parts: the
 * hero with the search box, the card grid (by section, or one flat list of
 * results while searching), and the player window - a native <dialog>, big on
 * a desktop (video left, notes and chapters right), full screen on a phone.
 * ====================================================================== */

.pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Hero + search ---------------------------------------------------- */
.pv-hero { padding: 8.5rem 0 3.5rem; }
.pv-hero h1 { max-width: 20ch; }
.pv-search {
    position: relative;
    max-width: 40rem;
    margin-top: 1.8rem;
}
.pv-search > i {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mk-navy-2);
    font-size: 1.05rem;
    pointer-events: none;
}
.pv-search input {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    padding: 1rem 1.2rem 1rem 3rem;
    border: 2px solid transparent;
    border-radius: 999px;
    background: #ffffff;
    color: var(--mk-ink);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    outline: none;
    transition: border-color .15s ease;
}
.pv-search input:focus { border-color: var(--mk-accent); }
.pv-search input::placeholder { color: #8594ab; }

/* ---- Sections and cards ----------------------------------------------- */
.pv-main { padding: 3.5rem 0 4.5rem; background: var(--mk-bg); border-bottom: 1px solid var(--mk-line); }
.pv-main + .mk-section--tight { padding-top: 4.5rem; }
.pv-section + .pv-section { margin-top: 3.5rem; }
.pv-section-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; }
.pv-section-head h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: var(--mk-navy-deep); }
.pv-section-head p { margin: .25rem 0 0; color: var(--mk-muted); max-width: 62ch; }
.pv-section-no {
    font-family: Fraunces, Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mk-navy-2);
    border-bottom: 2px solid var(--mk-accent);
    padding-bottom: .1rem;
    font-variant-numeric: tabular-nums;
}

.pv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.6rem;
}
.pv-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-radius: 1rem;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.pv-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 49, 124, .13); }
.pv-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--mk-navy-deep); }
.pv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-playbtn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3.6rem;
    height: 3.6rem;
    margin: -1.8rem 0 0 -1.8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 200, 255, .92);
    color: var(--mk-navy-deep);
    font-size: 2rem;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .18s ease, transform .18s ease;
}
.pv-playbtn i { margin-left: .2rem; line-height: 1; }
.pv-card:hover .pv-playbtn, .pv-thumb:focus-visible .pv-playbtn { opacity: 1; transform: scale(1); }
.pv-len {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    padding: .12rem .45rem;
    border-radius: .35rem;
    background: rgba(0, 17, 44, .82);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pv-body { padding: 1.1rem 1.2rem 1.25rem; }
.pv-body h3 { margin: 0 0 .4rem; font-size: 1.12rem; }
.pv-body h3 a { color: var(--mk-navy-deep); text-decoration: none; }
.pv-body h3 a:hover { color: var(--mk-navy-2); }
.pv-body p { margin: 0; color: var(--mk-muted); font-size: .93rem; line-height: 1.5; }

/* Why a card matched a search: its chapters, and where the words are said. */
.pv-hits { margin-top: .85rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.pv-hit {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    max-width: 100%;
    font: inherit;
    font-size: .8rem;
    line-height: 1.35;
    text-align: left;
    padding: .3rem .6rem;
    border: 1px solid var(--mk-line);
    border-radius: .5rem;
    background: var(--mk-bg);
    color: var(--mk-ink);
    cursor: pointer;
}
.pv-hit:hover { border-color: var(--mk-navy-2); }
.pv-hit b { color: var(--mk-navy-2); font-variant-numeric: tabular-nums; flex: none; }
.pv-hit mark { background: rgba(0, 200, 255, .25); color: inherit; border-radius: .15rem; }
.pv-hit--said { font-style: italic; }
.pv-status { margin: 0 0 1.4rem; color: var(--mk-muted); }
.pv-status b { color: var(--mk-ink); }
.pv-status button { font: inherit; color: var(--mk-navy-2); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.pv-empty { color: var(--mk-muted); }

/* ---- The player window ------------------------------------------------ */
.pv-dialog {
    width: min(1320px, 95vw);
    max-width: none;
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 1.1rem;
    background: #0a1426;
    color: #e6eefb;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    overflow: hidden;
}
.pv-dialog::backdrop { background: rgba(0, 12, 32, .78); backdrop-filter: blur(3px); }
.pv-dialog[open] { animation: pv-in .22s ease-out; }
@keyframes pv-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.pv-dlg { display: grid; grid-template-columns: minmax(0, 1fr) 340px; max-height: 92vh; }
.pv-stage { position: relative; background: #000; display: flex; align-items: center; min-width: 0; }
/* The marketing layout has no global [hidden] rule, and `.pv-stage video {display:block}` below would
   otherwise beat the browser's own: the unused stand-in player then took half the stage as a grey box
   and squeezed YouTube's player into the other half (2026-09-30). */
.pv-dialog [hidden] { display: none !important; }
.pv-yt { flex: 1 1 100%; width: 100%; aspect-ratio: 16 / 9; max-height: 92vh; }
.pv-yt iframe, .pv-yt > div { display: block; width: 100%; height: 100%; border: 0; }
.pv-stage video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 92vh; background: #000; }
.pv-side {
    position: relative;
    padding: 1.6rem 1.5rem 1.4rem;
    overflow-y: auto;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.pv-close {
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}
.pv-close:hover { background: rgba(255, 255, 255, .16); }
.pv-side-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mk-accent); padding-right: 2.6rem; }
.pv-side h2 { color: #fff; font-size: 1.45rem; margin: .3rem 2.4rem .5rem 0; }
.pv-side-summary { color: #b8c8e2; font-size: .92rem; line-height: 1.55; }
.pv-side-block { margin-top: 1rem; }
.pv-side h3 { font-family: Inter, system-ui, sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8ea4c7; margin: 0 0 .5rem; }
.pv-side ul { margin: 0; padding-left: 1.1rem; color: #d7e2f4; font-size: .88rem; line-height: 1.5; }
.pv-side ul li + li { margin-top: .3rem; }
.pv-side ul li::marker { color: var(--mk-accent); }
.pv-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.pv-chapters button {
    display: flex;
    gap: .7rem;
    width: 100%;
    font: inherit;
    font-size: .88rem;
    text-align: left;
    padding: .45rem .6rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: #d7e2f4;
    cursor: pointer;
}
.pv-chapters button:hover { background: rgba(255, 255, 255, .07); }
.pv-chapters button b { color: #8ea4c7; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.6rem; }
.pv-chapters button.is-now { background: rgba(0, 200, 255, .14); color: #fff; }
.pv-chapters button.is-now b { color: var(--mk-accent); }
.pv-side-foot { margin-top: auto; padding-top: 1.2rem; display: grid; gap: .6rem; }
.pv-side-foot a { color: #b8c8e2; font-size: .86rem; text-decoration: none; }
.pv-side-foot a:hover { color: #fff; }
.pv-next {
    font: inherit;
    font-size: .88rem;
    text-align: left;
    padding: .7rem .9rem;
    border-radius: .6rem;
    border: 1px solid rgba(0, 200, 255, .4);
    background: rgba(0, 200, 255, .1);
    color: #fff;
    cursor: pointer;
}
.pv-next:hover { background: rgba(0, 200, 255, .2); }
.pv-next span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-accent); }

/* Below a laptop the notes go under the video; on a phone the window is the screen. */
@media (max-width: 960px) {
    .pv-dlg { grid-template-columns: 1fr; overflow-y: auto; }
    .pv-side { max-height: none; overflow: visible; }
    .pv-stage video, .pv-yt { max-height: 60vh; }
}
@media (max-width: 640px) {
    .pv-hero { padding: 7rem 0 2.8rem; }
    .pv-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .pv-dlg { max-height: 100dvh; height: 100%; align-content: start; }
    .pv-card:hover { transform: none; }
    .pv-playbtn { opacity: 1; transform: none; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pv-dialog[open] { animation: none; }
    .pv-card, .pv-playbtn { transition: none; }
}

/* ---- The banner video (the featured overview) --------------------------
   Two columns: heading + search left, the video large on the right. Below
   960px it drops under the search. */
.pv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 3rem; align-items: center; }
.pv-hero-grid .pv-hero-copy { min-width: 0; }
.pv-feature { display: block; color: #fff; text-decoration: none; }
.pv-feature-frame {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 1.1rem;
    overflow: hidden;
    background: var(--mk-navy-deep);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .14);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pv-feature-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-feature:hover .pv-feature-frame, .pv-feature:focus-visible .pv-feature-frame { transform: translateY(-4px); box-shadow: 0 38px 80px rgba(0, 0, 0, .5), 0 0 0 2px var(--mk-accent); }
.pv-feature-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5.2rem;
    height: 5.2rem;
    margin: -2.6rem 0 0 -2.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mk-accent);
    color: var(--mk-navy-deep);
    font-size: 2.9rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 10px rgba(0, 200, 255, .22);
    transition: transform .2s ease;
}
.pv-feature-play i { margin-left: .3rem; line-height: 1; }
.pv-feature:hover .pv-feature-play { transform: scale(1.08); }
.pv-feature-meta { display: grid; gap: .2rem; margin-top: 1rem; }
.pv-feature-tag { font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mk-accent); }
.pv-feature-title { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; color: #fff; }
.pv-feature-sum { color: #cfe3f7; font-size: .93rem; line-height: 1.5; max-width: 60ch; }
@media (max-width: 960px) {
    .pv-hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pv-feature-frame, .pv-feature-play { transition: none; }
}

/* When a YouTube video ends: our own panel over the player, never YouTube's grid of other videos. */
.pv-end {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: radial-gradient(120% 100% at 80% 0%, rgba(0, 200, 255, .2), transparent 55%), linear-gradient(150deg, #00112c 0%, #001a41 55%, #002454 100%);
    color: #fff;
    text-align: center;
}
.pv-end-title { font-family: Fraunces, Georgia, serif; font-size: 1.5rem; font-weight: 600; max-width: 28ch; }
.pv-end-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.pv-end button {
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
}
.pv-end button.is-next { background: var(--mk-accent); border-color: var(--mk-accent); color: var(--mk-navy-deep); }
.pv-end button:hover { filter: brightness(1.1); }