/* ============================================================
   KAY SCIENCE — "Video Lessons" / "Video Library" redesign layer
   UI-ONLY refinement for the approved reference design.

   Used by:
     • student  /video-quiz/{subject}     (student-dashboard/video-quizz)
     • teacher  /teacher/video-library    (teachers/video-library)

   video-quizz.css is SHARED with more pages than those two — the tutor
   Video Library, the single-lesson page and the Key Word Test page — so
   nothing here touches them: every rule is scoped to `.vq--v2`, a
   modifier only the two views above set, and this file is loaded only on
   those two pages (after video-quizz.css, so it wins on equal specificity).
   ============================================================ */

/* ------------------------------------------------------------
   1. PAGE SHELL — nav column / divider / main column
   ------------------------------------------------------------ */
/* Breathing room above the first nav item and the page title. The offset is
   applied INSIDE each column, not on the page block, so the nav's right-hand
   divider still starts at the very top of the page instead of at "Biology". */
.vq.vq--v2 { padding: 0 0 30px; }
.vq--v2 .vq-main {
	padding: 16px;
	background: #fff;
	height: 100%;
}

/* Track follows the widest topic row: 262px floor (the old fixed width), 400px
   ceiling so the main column keeps its space. */
.vq.vq--v2 .vq-body {
    grid-template-columns: fit-content(400px) minmax(0, 1fr);
}

/* ------------------------------------------------------------
   2. SUBJECT LIST — full-width rows, mint pill on the active one
   ------------------------------------------------------------ */
.vq--v2 .vq-subjects,
.vq--v2 .vq-curricula {
    align-items: stretch;
    gap: 2px;
    /* Tight spacing either side of the rule under the subject list — same as the
       Exam Practice nav. */
    padding: 0 0 8px;
    margin-bottom: 9px;
    border-bottom: 1px solid #dcdaeb;
}

.vq--v2 .vq-subject,
.vq--v2 .vq-curriculum {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ks-heading);
    transition: background .15s ease, color .15s ease;
}
.vq--v2 .vq-subject:hover,
.vq--v2 .vq-curriculum:hover { background: #f6f3fe; color: var(--ks-heading); }

/* Selected row, per the reference: mint fill, teal bar down the left edge,
   deep-indigo label. Geometry (padding / size / spacing) is unchanged — the
   bar sits inside the existing left padding, so no text shifts. */
.vq--v2 .vq-subject.is-active,
.vq--v2 .vq-curriculum.is-active {
    background: #e9f7f2;
    color: #3d3b9d;
    font-weight: 700;
    overflow: hidden;   /* clips the bar to the rounded corner */
}
.vq--v2 .vq-subject.is-active::before,
.vq--v2 .vq-curriculum.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 10px 0 0 10px;
    background: #8adcc3;
}

/* ------------------------------------------------------------
   3. CHAPTER (topic) LIST
   ------------------------------------------------------------ */
.vq--v2 .vq-topics-label {
    margin: 0 0 10px 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ks-muted);
}

.vq.vq--v2 .vq-topics { gap: 2px; }

.vq.vq--v2 .vq-topic {
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ks-indigo);
}
.vq.vq--v2 .vq-topic__code {
    margin-right: 12px;
    font-weight: 600;
    color: var(--ks-muted);
}
.vq--v2 .vq-topic:hover { background: #f6f3fe; }

/* Selected chapter — same treatment as the selected subject above. */
.vq--v2 .vq-topic.is-active {
    background: #e9f7f2;
    color: #3d3b9d;
    font-weight: 600;
}
.vq.vq--v2 .vq-topic.is-active .vq-topic__code {
    color: #3d3b9d;
    font-weight: 700;
}
.vq--v2 .vq-topic.is-active::before {
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 10px 0 0 10px;
    background: #8adcc3;
}

/* ------------------------------------------------------------
   4. HEADER — title / subtitle on the left, search on the right
   ------------------------------------------------------------ */
.vq--v2 .vq-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}
.vq--v2 .vq-head__text { min-width: 0; }

.vq--v2 .vq-head__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.2;
    color: var(--ks-heading);
}
.vq--v2 .vq-head__subtitle {
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ks-muted);
}

/* Student Video Lessons heading — 22px, same as the teacher/tutor Video Library
   pages (.vq--teacher). */
.vq--v2:not(.vq--teacher) .vq-head__title {
    font-size: 22px;
    line-height: 1.15;
}

/* ---- Search box ---- */
.vq--v2 .vq-search {
    position: relative;
    flex-shrink: 0;
    width: 262px;
    margin-top: 10px;
}
.vq--v2 .vq-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: #b6b6d0;
    pointer-events: none;
}
.vq--v2 .vq-search__input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 38px;
    border: 1px solid #e9e7f2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(78, 66, 150, .04);
    font-family: var(--ks-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ks-heading);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vq--v2 .vq-search__input::placeholder { color: #a9a9c4; font-weight: 500; }
.vq--v2 .vq-search__input:focus {
    border-color: var(--ks-purple);
    box-shadow: 0 0 0 3px rgba(164, 141, 238, .14);
}
/* kill the WebKit search clear/decoration buttons so the pill stays clean */
.vq--v2 .vq-search__input::-webkit-search-decoration,
.vq--v2 .vq-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Rows/cards filtered out by the header search. */
.vq--v2 .is-search-hidden { display: none !important; }
.vq--v2 .vq-lesson-list li.is-search-first .vq-lesson { border-top-color: transparent; }

.vq--v2 .vq-search-empty {
    margin: 0;
    padding: 22px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ks-muted);
}

/* ------------------------------------------------------------
   5. CHAPTER CARDS ROW
   ------------------------------------------------------------ */
.vq--v2 .vq-chapters {
    gap: 18px;
    margin-bottom: 28px;
}
.vq--v2 .vq-chapter {
    gap: 10px;
    padding: 13px 14px;
    border: 1.5px solid #f0f0f0;
    border-radius: 14px;
    /* Measured off the reference card: one neutral-grey shadow, the SAME 2px
       offset on the right and the bottom (peak ~20% black 1px outside the edge,
       gone by 7px), with only the light blur bleed along the top/left. */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .30);
}
.vq--v2 .vq-chapter:hover {
    transform: translateY(-1px);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .34);
}
/* Selected chapter card: white fill inside a 2px GRADIENT outline that runs
   LEFT-to-RIGHT — purple (#a48dee) to mint (#90ecda) — so the top edge, the
   bottom edge and both side ends carry the same colour stops (a diagonal angle
   made the bottom-left purple and the top-right mint, which is not the design).
   Done with two background layers — the first (flat white) is clipped to the
   padding box, the second (the gradient) fills the border box and so shows only
   through the transparent border. Other cards keep their flat 1.5px grey border. */
.vq--v2 .vq-chapter.is-active {
    border: 2.5px solid transparent;
    background-color: #fff;
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(90deg, #a48dee 0%, #a08fec 30%, #90ecda 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 2px 2px 6px rgba(133, 118, 226, .32);
}
/* keep the purple cast on hover — the generic card hover shadow is grey */
.vq--v2 .vq-chapter.is-active:hover {
    box-shadow: 3px 3px 8px rgba(133, 118, 226, .38);
}

/* Uploaded chapter artwork is already coloured — it sits on white in the design.
   The inline-SVG fallback keeps the lilac tile so it stays legible. */
.vq--v2 .vq-chapter__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: transparent;
}
.vq--v2 .vq-chapter__icon:has(svg) { background: #f2ecfe; }

/* Titles that fit stay on one line; longer ones wrap to a second line rather
   than being cut with an ellipsis. Capped at two lines, and the grid stretches
   every card to the tallest one, so the row stays even. */
.vq--v2 .vq-chapter__title {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
}
.vq--v2 .vq-chapter__count { font-size: 11.5px; font-weight: 500; }

/* ------------------------------------------------------------
   6. LESSONS LIST + NEXT LESSON — column widths
   ------------------------------------------------------------ */
/* The design splits this row almost 50/50 (336 / 355). Held as a percentage so
   the ratio survives wider screens, floored so the card never gets cramped and
   capped so it stops growing on very wide monitors. */
.vq--v2 .vq-content {
    grid-template-columns: minmax(0, 1fr) clamp(380px, 50%, 560px);
    gap: 18px;
}

/* ---- Lessons card: padded head, full-bleed rows ---- */
/* Same shell as the chapter cards: 1.5px border plus the single neutral shadow,
   equal 2px offset right and bottom. */
.vq--v2 .vq-lessons {
    padding: 0 0 6px;
    border: 1.5px solid #f0f0f0;
    border-radius: 14px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .30);
    overflow: hidden;   /* keeps a full-bleed active row inside the rounded corners */
}
.vq--v2 .vq-lessons__head {
    margin: 0;
    padding: 18px 22px 14px;
    /* Same weight as the lesson-row dividers below — measured off the reference
       card: a neutral grey line, not the lighter purple-tinted one. */
    border-bottom: 1px solid #e1e1e1;
}
.vq--v2 .vq-lessons__title { margin: 0 0 3px; font-size: 17px; font-weight: 700; }
.vq--v2 .vq-lessons__count { font-size: 12px; font-weight: 500; }

.vq--v2 .vq-lesson {
    gap: 16px;
    padding: 13px 22px;
    border-radius: 0;   /* rows run edge to edge, as in the design */
    font-weight: 500;
}
.vq--v2 .vq-lesson-list li + li .vq-lesson { border-top: 1px solid #e1e1e1; }
.vq--v2 .vq-lesson__no { min-width: 30px; font-size: 13px; font-weight: 500; }
.vq--v2 .vq-lesson__title { font-size: 13.5px; font-weight: 500; color: var(--ks-indigo); }
.vq--v2 .vq-lesson:hover { background: #f7f7fc; }

.vq--v2 .vq-lesson.is-active { background: var(--mod-green); }
.vq--v2 .vq-lesson.is-active .vq-lesson__no,
.vq--v2 .vq-lesson.is-active .vq-lesson__title {
    color: var(--ks-heading);
    font-weight: 600;
}

/* ------------------------------------------------------------
   7. NEXT LESSON CARD
   ------------------------------------------------------------ */
/* Same shell as the lessons box / chapter cards. */
.vq--v2 .vq-next {
    padding: 24px 22px 24px;
    border: 1.5px solid #f0f0f0;
    border-radius: 14px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .30);
}
.vq--v2 .vq-next__label {
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
    color: #a99cf0;
}
.vq--v2 .vq-next__title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

/* Context line now sits UNDER the title as plain text (the design shows it
   above the thumbnail, not as an overlay pill on it). */
.vq--v2 .vq-next__meta {
    position: static;
    display: block;
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border-radius: 0;
    text-align: left;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ks-muted);
}

.vq--v2 .vq-next__thumb {
    aspect-ratio: 16 / 9;
    margin-bottom: 18px;
    border: 1px solid #edecf5;
    border-radius: 10px;
}
/* Poster shown => clean still, no play overlay (as in the design). The overlay
   comes back on the gradient placeholder, where it is the only affordance. */
.vq--v2 .vq-next__play { display: none; }
.vq--v2 .vq-next__thumb:has(.vq-next__thumb-img[hidden]) .vq-next__play { display: flex; }

.vq--v2 .vq-next .vq-next__btn {
    width: 100%;
    padding: 15px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

/* ------------------------------------------------------------
   8. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .vq--v2 .vq-content { grid-template-columns: 1fr; }
    .vq--v2 .vq-next { max-width: 480px; }
}
@media (max-width: 900px) {
    .vq.vq--v2 .vq-body { grid-template-columns: 1fr; gap: 22px; }
    .vq--v2 .vq-subjects,
    .vq--v2 .vq-curricula { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
    .vq--v2 .vq-subject,
    .vq--v2 .vq-curriculum { width: auto; }
    .vq--v2 .vq-head { flex-direction: column; align-items: stretch; }
    .vq--v2 .vq-search { width: 100%; margin-top: 0; }
}
@media (max-width: 480px) {
    .vq--v2 .vq-head__title { font-size: 23px; }
}