/* =====================================================================
   coursematter — skeleton loaders (.cosk)

   The grey-block-with-a-shine placeholder used while a panel's content is
   being fetched, in place of a spinner. A spinner says "something is
   happening"; a skeleton says "this is what is coming, and roughly where
   it will be", so the page does not jump when the real content lands.

   How to use it: build the skeleton out of .cosk-b blocks laid out like
   the real thing, inside a .cosk wrapper. Widths that only exist to make
   the fake text look like text are inline on the element — they are
   decoration, not layout.

   Currently used by Views/Shared/_CourseViewSkeleton.cshtml (the learner
   course page, Views/Learner/CourseView.cshtml) and the course builder's
   right-hand panel (coBuilderSkeleton() in wwwroot/js/co-instructor.js).
   ===================================================================== */

.cosk {
    --cosk-bg: #e8e8ef;
    --cosk-shine: rgba(255, 255, 255, .85);
    --cosk-radius: 10px;

    padding-top: 15px;
}

/* one block. ::after sweeps the shine across it. */
.cosk-b {
    position: relative;
    overflow: hidden;
    background-color: var(--cosk-bg);
    border-radius: var(--cosk-radius);
}
.cosk-b::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, transparent 0%, var(--cosk-shine) 50%, transparent 100%);
    animation: cosk-shine 1.4s ease-in-out infinite;
}
@keyframes cosk-shine {
    100% { transform: translateX(100%); }
}

/* the blocks are decoration; the wrapper carries the message for a screen reader */
.cosk-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- shapes ---------- */
.cosk-line { height: 14px; border-radius: 7px; margin-bottom: 10px; }
.cosk-line.is-title { height: 28px; border-radius: 10px; margin-bottom: 12px; }
.cosk-line.is-sub { height: 18px; border-radius: 9px; }
.cosk-line:last-child { margin-bottom: 0; }

.cosk-pill { height: 26px; border-radius: 999px; }
.cosk-btn { height: 46px; border-radius: 999px; }
.cosk-square { aspect-ratio: 1 / 1; }

.cosk-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cosk-gap { height: 22px; }

/* ---------- the learner course page ---------- */
/* hero + four thumbnails on the left, the course's own text on the right,
   so the skeleton sits where _CourseDetailsPartial will */
.cosk-hero { aspect-ratio: 1 / 1; max-height: 420px; border-radius: 12px; margin: 5px; }
.cosk-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 5px 0; }
.cosk-card { height: 86px; border-radius: 14px; }

/* ---------- the course builder's right-hand panel ---------- */
/* the course page preview (info strip, hero, text) and the topic create/edit form
   (title, inputs, editor, buttons) — see coBuilderSkeleton() in co-instructor.js */
.cosk-builder { padding: 22px 18px 26px; }
.cosk-builder > .row { margin: 0; }
.cosk-strip { height: 44px; border-radius: 10px; margin: 0 5px 22px; max-width: 780px; }
.cosk-input { height: 44px; border-radius: 12px; margin-bottom: 4px; }
.cosk-editor { height: 240px; border-radius: 12px; }

/* ---------- the learner course grid ---------- */
/* one placeholder card: image on top, two lines of title, a price/enrol bar —
   the shape of a card in _CourseItemsPartial */
.cosk-card-course {
    width: 100%;
    border: 1px solid #e6e6ee;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.cosk-card-img { aspect-ratio: 1 / 1; border-radius: 0; }
.cosk-card-body { padding: 12px; }
.cosk-card-cta { height: 34px; border-radius: 8px; margin-top: 14px; }

@media (max-width: 767px) {
    .cosk-hero { max-height: 240px; }
    .cosk-line.is-title { height: 24px; }
}

@media (max-width: 575.98px) {
    /* matches the tighter card gutter the phone grid uses */
    .cosk-card-body { padding: 10px; }
    .cosk-card-body .cosk-line { height: 12px; margin-bottom: 8px; }
    .cosk-card-cta { height: 30px; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .cosk-b::after { animation: none; opacity: .5; }
}