/*
 * Source thumbnails for the home page's three curriculum sources.
 *
 * One object in three tones: a 16:10 plate, three portrait covers fanned bottom-center, and the
 * Library's license mark as a worded pill on the front cover. Everything inside is sized in cqw
 * against the plate, so the fan keeps its proportions in a card of any width. Marketing palette,
 * not the pm- product tokens — the two systems stay apart.
 */

.src-thumb {
    position: relative;
    container-type: inline-size;
    width: 100%;
    max-width: 620px;
    aspect-ratio: 16 / 10;
    margin: 0 auto 1.25rem;
    border-radius: 10px;
    overflow: hidden;
}

.src-thumb.is-open { background: linear-gradient(160deg, #f2fbf5, #dcf5e6); }
.src-thumb.is-licensed { background: linear-gradient(160deg, #f1f6fe, #dbe9fb); }
.src-thumb.is-custom { background: linear-gradient(160deg, #f9f4fd, #f0e2fb); }

/* The contact shadow the whole fan stands on. */
.src-thumb::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 13%;
    height: 2.5cqw;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(5, 43, 69, .3), transparent 70%);
}

.src-cover {
    position: absolute;
    bottom: 16%;
    border-radius: .6cqw;
    background: #fff;
    overflow: hidden;
    transform-origin: bottom center;
    /* Two shadows and a hairline edge: the drop separates a cover from the plate, the tight one
       separates it from the cover it overlaps, and the edge keeps a white cover legible against
       another white cover, where a shadow alone leaves no visible boundary. */
    box-shadow: 0 3cqw 6cqw -2cqw rgba(5, 43, 69, .6),
                0 .6cqw 1.4cqw -.2cqw rgba(5, 43, 69, .45),
                0 0 0 .12cqw rgba(5, 43, 69, .16);
}

/* Insets and angles keep every rotated corner inside the plate down to phone width. */
.src-cover:nth-of-type(1) { left: 7%; width: 28%; transform: rotate(-7deg); z-index: 1; }
.src-cover:nth-of-type(2) { right: 7%; width: 28%; transform: rotate(7deg); z-index: 1; }
.src-cover:nth-of-type(3) { left: 34%; width: 32%; z-index: 2; }

.src-cover > img { display: block; width: 100%; height: auto; }

/* A Library-composed cover. */
.src-lib {
    display: flex;
    flex-direction: column;
    aspect-ratio: 3 / 4;
    padding: 2.4cqw 2.6cqw;
    text-align: center;
    background: var(--g);
    color: var(--t);
}

.src-lib-title {
    font-size: 3.5cqw;
    line-height: 1.25;
    margin-bottom: auto;
    overflow-wrap: break-word;
    text-shadow: 0 .15cqw .45cqw rgba(0, 0, 0, .4);
}

.src-lib-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 76%;
    height: 42%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.src-lib-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.src-lib-authors {
    font-size: 2.3cqw;
    line-height: 1.25;
    margin-top: auto;
    overflow-wrap: break-word;
    text-shadow: 0 .1cqw .2cqw rgba(0, 0, 0, .4);
}

/* An activity template, drawn. */
.src-tpl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2cqw;
    aspect-ratio: 3 / 4;
    padding: 4cqw 2cqw 2cqw;
    border: .2cqw solid rgba(5, 43, 69, .10);
}

.src-tpl::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 9%;
    background: var(--c);
}

.src-tpl i {
    width: 40%;
    aspect-ratio: 1;
    border-radius: 1.6cqw;
    background: var(--bg);
    color: var(--c);
    display: grid;
    place-items: center;
}

.src-tpl i svg { width: 62%; height: 62%; fill: currentColor; }

.src-tpl span {
    font-size: 3cqw;
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
    color: var(--alps-navy, #052B45);
}

/* The Library's license mark in the plate's lower-left, clear of the fan — and carrying its word,
   since a title attribute is unreachable on a phone. */
.src-badge {
    position: absolute;
    left: 5%;
    bottom: 3.5%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 1cqw;
    padding: .9cqw 2.2cqw;
    border-radius: 99px;
    font-size: 3.6cqw;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    box-shadow: 0 .3cqw .8cqw rgba(5, 43, 69, .3);
}

.src-badge i { font-size: 3cqw; }

/* The card's icon, in the plate's top-left corner. A plate that carries one is a little taller, and
   since the fan stands on the plate's bottom edge, the extra height all lands above the covers, where
   the chip sits. The size is clamped so it stays legible on a narrow card and never outgrows the
   48px tile it replaces. */
.src-thumb.has-icon { aspect-ratio: 16 / 11; }

.src-icon {
    position: absolute;
    left: 3.5cqw;
    top: 3.5cqw;
    z-index: 3;
    width: clamp(28px, 9cqw, 44px);
    aspect-ratio: 1;
    border-radius: 22%;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: 0 .3cqw 1cqw rgba(5, 43, 69, .14);
    font-size: clamp(13px, 3.8cqw, 19px);
}

.is-open .src-icon { color: #16a34a; }
.is-licensed .src-icon { color: #2563eb; }
.is-custom .src-icon { color: #9333ea; }

.is-open .src-badge { background: #10b981; }
.is-licensed .src-badge { background: #f59e0b; }
.is-custom .src-badge { background: var(--alps-purple, #9C27B0); }