/* CSS-drawn 16:9 thumbnail (matches the images/courses/*-card artwork):
   KodyFier logo, big title, green pill, glass cubes on a marble plinth.
   Markup comes from includes/kody_thumb.php. Everything is sized in
   container units so it scales with its card like an image would; the
   parent must be a size container (.fc-header--thumb or .kthumb-host). */
.fc-header--thumb,
.kthumb-host {
    container-type: inline-size;
}
.kthumb-host {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.fc-thumb {
    --tint: rgba(110, 231, 183, 0.45);
    --tint2: #e5f6ee;
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 28%, var(--tint) 0, transparent 58%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 7cqw, rgba(255, 255, 255, 0.45) 7cqw 10cqw),
        linear-gradient(115deg, #fbfaf7 0 42%, var(--tint2) 100%);
}
.fc-thumb--orange { --tint: rgba(253, 186, 116, 0.45); --tint2: #fdf0e2; }
.fc-thumb--blue   { --tint: rgba(125, 211, 252, 0.5);  --tint2: #e4f3fb; }
.fc-thumb--yellow { --tint: rgba(253, 224, 71, 0.42);  --tint2: #fdf7dc; }
.fc-thumb--green  { --tint: rgba(110, 231, 183, 0.45); --tint2: #e5f6ee; }
.fc-thumb--teal   { --tint: rgba(103, 232, 249, 0.45); --tint2: #e1f6f9; }
.fc-thumb--violet { --tint: rgba(196, 181, 253, 0.5);  --tint2: #efebfd; }
.fc-thumb__logo {
    position: absolute;
    top: 6.5cqw;
    left: 5.5cqw;
    width: 21cqw;
    height: auto;
}
.fc-thumb__text {
    position: absolute;
    left: 5.5cqw;
    top: 17cqw;
    bottom: 4cqw;
    width: 50cqw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
}
.fc-thumb__title {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 8.4cqw;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #0f172a;
}
/* Longer, wrapping titles (blog posts) */
.fc-thumb--compact .fc-thumb__title {
    font-size: 6.6cqw;
    line-height: 1.05;
}
.fc-thumb--compact .fc-thumb__level {
    font-size: 3.2cqw;
}
.fc-thumb__level {
    margin-top: 2.6cqw;
    padding: 0.9cqw 2.8cqw;
    border-radius: 99px;
    background: #0f9f6e;
    color: #ffffff;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 2.9cqw;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fc-thumb__stage {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48cqw;
    height: 100%;
    --s: 25cqw;
}
.fc-thumb__stage--n2 { --s: 17cqw; }
.fc-thumb__stage--n3 { --s: 13cqw; }
.fc-thumb__plinth {
    position: absolute;
    left: 2cqw;
    right: -2cqw;
    bottom: 0;
    height: 21cqw;
    border-top-left-radius: 0.8cqw;
    background:
        linear-gradient(168deg, transparent 38%, rgba(148, 152, 163, 0.28) 39%, transparent 41.5%),
        linear-gradient(24deg, transparent 58%, rgba(148, 152, 163, 0.22) 59%, transparent 60.5%),
        linear-gradient(180deg, #fdfdfd 0 16%, #eef0f3 16.5%, #e2e5ea 100%);
    box-shadow: -1.5cqw 0 3cqw rgba(15, 23, 42, 0.06);
}
.fc-thumb__cubes {
    position: absolute;
    left: 2cqw;
    right: 2cqw;
    bottom: 18.5cqw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1.6cqw;
    z-index: 1;
}
.fc-thumb__cube {
    width: var(--s);
    height: var(--s);
    display: grid;
    place-items: center;
    border-radius: calc(var(--s) * 0.12);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.4),
        inset -0.6cqw -0.9cqw 1.6cqw rgba(15, 23, 42, 0.07),
        0 1.4cqw 2.4cqw rgba(15, 23, 42, 0.12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: calc(var(--s) * 0.52);
    transition: transform 0.4s ease;
}
.fc-thumb__cube img {
    width: 54%;
    height: 54%;
    object-fit: contain;
    border-radius: 12%;
}
.fc-card:hover .fc-thumb__cube,
.bl-card:hover .fc-thumb__cube,
.bl-featured:hover .fc-thumb__cube,
.bl-feature:hover .fc-thumb__cube { transform: translateY(-0.8cqw); }
.fc-thumb__cube--html  { color: #e34f26; }
.fc-thumb__cube--css   { color: #1572b6; }
.fc-thumb__cube--node  { color: #5fa04e; }
.fc-thumb__cube--react { color: #1fb6d9; }
.fc-thumb__cube--mysql { color: #00758f; }
.fc-thumb__cube--mongo { color: #47a248; }
.fc-thumb__cube--cart  { color: #7c3aed; }
.fc-thumb__cube--python { color: #3776ab; }
.fc-thumb__cube--java  { color: #e76f00; }
.fc-thumb__cube--dsa   { color: #a855f7; }
.note-card:hover .fc-thumb__cube { transform: translateY(-0.8cqw); }
.fc-thumb__cube--js i {
    display: grid;
    place-items: end;
    width: 1.15em;
    height: 1.15em;
    padding: 0.08em 0.1em;
    border-radius: 0.08em;
    background: #f7df1e;
    color: #1a1a1a;
    font-size: 0.85em;
}