/* ==========================================================================
   Training Course Library (/cyber-security-training-course-library)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the "why" copy and its sign-up card, the video preview cards, the course library (category filter
   and course cards), the closing panel and the dialogs (each course's details, and the video preview). Every class
   starts with ccl-. Views/Public/TrainingCourses2026.cshtml links it in its FinalHeader section with a ?v= cache buster
   from StaticAssetVersion; Scripts/training-course-library/training-course-library.js runs the filter and the video.
   ========================================================================== */

/* ---------- Why training matters: the copy beside the sign-up card ---------- */
.ccl-why { display: grid; gap: 28px; align-items: center; }
@media (min-width: 992px) { .ccl-why { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; } }
.ccl-why__copy > :last-child { margin-bottom: 0; }
.ccl-text { font-size: 1.0625rem; color: var(--tc-ink-2); }
.ccl-ask { background: var(--tc-cream); }
.ccl-ask p { color: var(--tc-ink-2); }
.ccl-ask .tc-btns { margin-top: 18px; }
/* The text link beside Start Free: a hit area over 44 px tall around it (::after is placed from the padding box, above
   the 3 px underline, hence the deeper bottom), its underline where it was */
.ccl-ask .tc-arrow { position: relative; }
.ccl-ask .tc-arrow::after { content: ""; position: absolute; inset: -10px -4px -14px; }

/* ---------- Cards with a 16:9 picture: the video previews and the courses ---------- */
.ccl-pop, .ccl-course { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 3px solid var(--tc-ink); border-radius: 20px; box-shadow: 0 4px 0 var(--tc-ink); transition: transform .15s ease, box-shadow .15s ease; }
.ccl-pop:hover, .ccl-pop:focus-within, .ccl-course:hover, .ccl-course:focus-within { transform: translateY(-3px); box-shadow: 0 7px 0 var(--tc-ink); }
/* Keeps the pointer over the card when the lift moves its bottom edge away, so :hover doesn't flicker */
.ccl-pop::before, .ccl-course::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.ccl-pop__shot, .ccl-course__shot { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 3px solid var(--tc-ink); border-radius: 17px 17px 0 0; background: var(--tc-sky-0); }
.ccl-root .ccl-pop__shot img, .ccl-root .ccl-course__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The video previews: a play badge over the screenshot */
/* In the corner, clear of the course name the screenshots carry in their middle. The badge scales with the picture
   (container units: 52 px on a 412 px card, down to 36 px), so it keeps the same place in the artwork at every width */
.ccl-pop__shot { container-type: inline-size; }
.ccl-pop__play { position: absolute; left: 14px; bottom: 14px; display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid var(--tc-ink); border-radius: 50%; background: var(--tc-yellow); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 58%); box-shadow: 0 4px 0 var(--tc-ink); font-size: 1.75rem; color: var(--tc-ink); transition: transform .15s ease; }
.ccl-pop__play { left: clamp(8px, 3.4cqi, 14px); bottom: clamp(8px, 3.4cqi, 14px); width: clamp(36px, 12.6cqi, 52px); height: clamp(36px, 12.6cqi, 52px); font-size: clamp(1.25rem, 6.8cqi, 1.75rem); }
.ccl-pop__play i { margin-left: 3px; }
.ccl-pop:hover .ccl-pop__play, .ccl-pop:focus-within .ccl-pop__play { transform: scale(1.08); }
.ccl-pop__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 16px 18px 12px; }
.ccl-pop__level { margin-bottom: -2px; }
.ccl-root .ccl-pop__title { margin: 0; font: 700 1.25rem/1.25 var(--tc-display); color: var(--tc-ink); }
.ccl-pop__meta { margin-bottom: 4px; }

/* The button that opens a card's dialog: its ::after covers the card, so the whole card opens it */
.ccl-open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; padding: 6px 0; border: 0; background: none; font: 600 1rem/1.2 var(--tc-display); color: var(--tc-ink); text-align: left; cursor: pointer; }
.ccl-open span { text-decoration: underline; text-decoration-color: var(--tc-yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.ccl-open i { font-size: 1.25rem; }
.ccl-open::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 17px; }
.ccl-open:hover span { text-decoration-color: var(--tc-coral); }
.ccl-root .ccl-open:focus-visible { outline: none; box-shadow: none; }
.ccl-root .ccl-open:focus-visible::after { outline: 3px solid var(--tc-ink); outline-offset: 5px; box-shadow: 0 0 0 9px var(--tc-yellow); }

/* The blog link: padded to a 44 px tall tap target on one line, the margins trimmed by as much so it sits where it did */
.ccl-more { margin: 31px 0 -9px; text-align: center; }
.ccl-more__link { display: inline-block; padding: 9px 0; font: 600 1.0625rem/1.6 var(--tc-display); color: var(--tc-ink); text-decoration: underline; text-decoration-color: var(--tc-yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.ccl-more__link:hover, .ccl-more__link:focus { color: var(--tc-ink); text-decoration-color: var(--tc-coral); }
.ccl-more__link i { margin-left: 4px; font-size: 1.25rem; vertical-align: -4px; }

/* ---------- Why CanIPhish: reasons without titles, the icon beside the text ---------- */
.ccl-reason { align-items: center; }
.ccl-reason .tc-feature__icon { grid-row: auto; }

/* ---------- The library: the category filter and the course cards ---------- */
.ccl-library__head { display: grid; gap: 4px; }
.ccl-library__intro { margin: 0 0 16px; color: var(--tc-ink-2); max-width: 52rem; }
.ccl-tabs { margin: 0; }
.ccl-tab { white-space: nowrap; }
.ccl-tab[aria-pressed="true"] { background: var(--tc-yellow); }
@media (max-width: 575.98px) { .ccl-tab { padding: 8px 13px 7px; font-size: .875rem; } }
.ccl-grid { display: grid; gap: 22px; }
@media (min-width: 600px) { .ccl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ccl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.ccl-course__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; padding: 16px 18px 10px; }
.ccl-course__cat { max-width: 100%; white-space: normal; }
.ccl-root .ccl-course__title { margin: 2px 0 0; font: 700 1.1875rem/1.25 var(--tc-display); color: var(--tc-ink); overflow-wrap: anywhere; }
.ccl-course__desc { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--tc-ink-2); }
.ccl-course__open { font-size: .9375rem; }

/* ---------- The closing panel ---------- */
.ccl-panel { margin-top: 72px; }
.ccl-panel__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 0 18px; border: 3px solid var(--tc-deep); border-radius: 18px; background: var(--tc-yellow); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 4px 0 var(--tc-deep); font-size: 1.85rem; color: var(--tc-ink); }
.ccl-root .ccl-panel__title { margin: 0 0 12px; font: 700 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.12 var(--tc-display); color: #fff; text-wrap: balance; }
.ccl-panel .ccl-panel__text { margin: 0; max-width: 40rem; }
@media (min-width: 992px) { .ccl-panel__ctas { justify-content: flex-end; } }

/* ==========================================================================
   DIALOGS (Bootstrap 5 modals in their own .tc-root, after the page's): ink-outlined like the cards
   ========================================================================== */
/* The dialogs' root only lends them the family's tokens and type: no box of its own */
.ccl-dialogs.tc-root { background: none; overflow: visible; }
/* Silicon pads .modal-content (0 1.5rem) and pulls .modal-body back out with negative margins: neither here */
.ccl-modal .ccl-modal__content { overflow: hidden; padding: 0; border: 3px solid var(--tc-ink); border-radius: 24px; background: #fff; box-shadow: 0 8px 0 var(--tc-ink); color: var(--tc-ink); }
.ccl-modal .ccl-modal__head { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 18px 18px 16px 22px; background: var(--tc-sky-0); border-bottom: 3px solid var(--tc-ink); border-radius: 0; }
.ccl-modal__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.ccl-modal .ccl-modal__title { margin: 0; font: 700 clamp(1.35rem, 1.15rem + .8vw, 1.75rem)/1.2 var(--tc-display); color: var(--tc-ink); text-wrap: balance; overflow-wrap: anywhere; }
.ccl-modal__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 0 auto; padding: 0 0 3px; border: 2px solid var(--tc-ink); border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); font: 600 1.75rem/1 var(--tc-display); color: var(--tc-ink); cursor: pointer; transition: background-color .2s ease; }
.ccl-modal__close:hover { background: var(--tc-yellow); }
.ccl-modal .ccl-modal__body { margin: 0; padding: 22px; }
@media (min-width: 768px) { .ccl-modal .ccl-modal__head { padding: 20px 20px 18px 28px; } .ccl-modal .ccl-modal__body { padding: 26px 28px; } }
.ccl-modal .ccl-modal__intro { margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.6; color: var(--tc-ink-2); }
.ccl-modal__meta { margin: 0 0 24px; }
.ccl-modal .ccl-modal__label { margin: 0 0 10px; font: 700 .8125rem/1.25 var(--tc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.ccl-modal__frameworks { margin: 0 0 24px; }
.ccl-modal__learn { margin: 0 0 24px; }
.ccl-modal .ccl-modal__why { margin: 0; color: var(--tc-ink-2); }
.ccl-modal .ccl-modal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 14px; margin: 0; padding: 16px 22px 22px; background: #fff; border-top: 2px dashed rgba(47, 42, 79, .25); border-radius: 0; }
@media (min-width: 768px) { .ccl-modal .ccl-modal__foot { padding: 16px 28px 22px; } }
.ccl-modal .ccl-modal__foot > * { margin: 0; }

/* The video preview: a dark dialog around the player */
.ccl-modal--video .ccl-modal__content { background: var(--tc-night); }
.ccl-modal--video .ccl-modal__head { align-items: center; background: transparent; border-bottom-color: var(--tc-deep); }
.ccl-modal--video .ccl-modal__title { color: #fff; }
.ccl-modal--video .ccl-modal__body { padding: 0; background: #000; }
@media (min-width: 768px) { .ccl-modal--video .ccl-modal__body { padding: 0; } }
.ccl-modal__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

@media (prefers-reduced-motion: reduce) {
  .ccl-pop:hover, .ccl-pop:focus-within, .ccl-course:hover, .ccl-course:focus-within { transform: none; }
  .ccl-pop:hover .ccl-pop__play, .ccl-pop:focus-within .ccl-pop__play { transform: none; }
  .ccl-pop, .ccl-course, .ccl-pop__play, .ccl-modal__close { transition: none; }
}