/* ========================================
   RESOURCE COVER (pilot)
   HTML/CSS thumbnail for resource cards.
   All text is real markup, so the same cover
   works in BG and EN without separate images.

   Reuse: copy the markup, change the text and
   pick a theme modifier (e.g. .resource-cover-eco)
   that sets the --cover-* variables and art.
======================================== */

.resource-cover {
    --cover-bg-1: var(--light-green);
    --cover-bg-2: var(--cream);
    --cover-accent: var(--green);
    --cover-ink: var(--navy);
    --cover-grid: rgba(15, 143, 114, 0.14);

    container-type: inline-size;
    position: relative;
    min-height: 260px;
    padding: 22px;

    display: flex;
    flex-direction: column;
    gap: 12px;

    overflow: hidden;
    isolation: isolate;
    color: var(--cover-ink);
    background:
        radial-gradient(var(--cover-grid) 1.2px, transparent 1.3px) 0 0 / 16px 16px,
        linear-gradient(150deg, var(--cover-bg-1) 0%, var(--cover-bg-2) 100%);
}

.resource-cover p,
.resource-cover ul {
    margin: 0;
}

/* Top row: resource type + age */

.resource-cover-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.resource-cover-type,
.resource-cover-age {
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.resource-cover-type {
    color: var(--white);
    background-color: var(--cover-accent);
}

.resource-cover-age {
    color: var(--cover-ink);
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(11, 46, 79, 0.1);
    white-space: nowrap;
}

/* Title + subjects */

.resource-cover-body {
    max-width: 70%;
    margin-top: 6px;
}

.resource-cover-title {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.resource-cover-subjects {
    margin-top: 8px !important;
    color: var(--cover-accent);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

/* Key features */

.resource-cover-tags {
    margin-top: auto !important;
    padding: 0;
    list-style: none;

    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}

.resource-cover-tags li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(11, 46, 79, 0.08);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.resource-cover-tags li::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 2px;
    background-color: var(--cover-accent);
}

/* Decorative art layer */

.resource-cover-art {
    position: absolute;
    inset: 0 0 0 auto;
    width: 48%;
    z-index: -1;
    pointer-events: none;
}

.cover-shape {
    position: absolute;
    display: block;
}

/* ---------- Eco Park theme ---------- */

.resource-cover-eco .cover-sun {
    top: 58px;
    right: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ffd36e;
    box-shadow: 0 0 0 8px rgba(255, 211, 110, 0.25);
}

.resource-cover-eco .cover-hill {
    right: -40px;
    bottom: -70px;
    width: 260px;
    height: 150px;
    border-radius: 50%;
    background: #bfe3d5;
}

.resource-cover-eco .cover-pyramid {
    right: 92px;
    bottom: 58px;
    width: 64px;
    height: 58px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(90deg, #13a583 50%, var(--green) 50%);
}

.resource-cover-eco .cover-cylinder {
    right: 50px;
    bottom: 58px;
    width: 34px;
    height: 62px;
    border-radius: 0 0 17px 17px / 0 0 7px 7px;
    background: linear-gradient(90deg, #6fa6ec, var(--blue));
}

.resource-cover-eco .cover-cylinder::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    width: 100%;
    height: 14px;
    border-radius: 50%;
    background: #a9cbf5;
}

.resource-cover-eco .cover-cube {
    right: 152px;
    bottom: 58px;
    width: 34px;
    height: 34px;
    background: #f2a65a;
}

.resource-cover-eco .cover-cube::before,
.resource-cover-eco .cover-cube::after {
    content: "";
    position: absolute;
}

.resource-cover-eco .cover-cube::before {
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: #f8c48d;
    transform: skewX(-45deg);
    transform-origin: bottom left;
}

.resource-cover-eco .cover-cube::after {
    top: 0;
    left: 100%;
    width: 10px;
    height: 100%;
    background: #d9873d;
    transform: skewY(-45deg);
    transform-origin: top left;
}

.resource-cover-eco .cover-tree {
    right: 10px;
    bottom: 58px;
    width: 30px;
    height: 30px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #2f9e6b;
}

.resource-cover-eco .cover-tree::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 5px;
    height: 18px;
    transform: translateX(-50%);
    background: #7a5232;
}

/* ---------- Medallion theme (escape room) ---------- */

.resource-cover-medallion {
    --cover-bg-1: #efe9fb;
    --cover-bg-2: #fffaf3;
    --cover-accent: #5b3fa0;
    --cover-grid: rgba(91, 63, 160, 0.13);
}

/* Координатни оси на заден план */
.resource-cover-medallion .cover-axes {
    right: 24px;
    bottom: 22px;
    width: 150px;
    height: 120px;
    opacity: 0.35;
}

.resource-cover-medallion .cover-axes::before,
.resource-cover-medallion .cover-axes::after {
    content: "";
    position: absolute;
    background: var(--cover-accent);
}

.resource-cover-medallion .cover-axes::before {
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
}

.resource-cover-medallion .cover-axes::after {
    left: 0;
    right: 0;
    bottom: 30px;
    height: 2px;
}

.resource-cover-medallion .cover-medallion {
    top: 58px;
    right: 28px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe7a3, #e0a93b 70%);
    box-shadow:
        inset 0 0 0 5px #c98d22,
        0 0 0 6px rgba(224, 169, 59, 0.22);
}

.resource-cover-medallion .cover-medallion::before {
    content: "";
    position: absolute;
    inset: 17px;
    border: 3px solid #fff4d2;
    transform: rotate(45deg);
    border-radius: 4px;
}

.resource-cover-medallion .cover-magnifier {
    right: 112px;
    bottom: 66px;
    width: 44px;
    height: 44px;
    border: 7px solid var(--navy);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
}

.resource-cover-medallion .cover-magnifier::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 100%;
    width: 8px;
    height: 26px;
    border-radius: 4px;
    background: var(--navy);
    transform: translate(-4px, -6px) rotate(-45deg);
    transform-origin: top center;
}

.resource-cover-medallion .cover-lock {
    right: 34px;
    bottom: 60px;
    width: 40px;
    height: 32px;
    border-radius: 7px;
    background: var(--cover-accent);
}

.resource-cover-medallion .cover-lock::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 24px;
    height: 18px;
    transform: translateX(-50%);
    border: 5px solid #8e78c9;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
}

.resource-cover-medallion .cover-lock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 8px;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 4px;
    background: #efe9fb;
}


/* ---------- School Trip theme (budget & travel) ---------- */

.resource-cover-trip {
    --cover-bg-1: var(--light-blue);
    --cover-bg-2: var(--cream);
    --cover-accent: #1a5fb4;
    --cover-grid: rgba(31, 111, 210, 0.13);
}

.resource-cover-trip .cover-ground {
    right: -50px;
    bottom: -76px;
    width: 280px;
    height: 150px;
    border-radius: 50%;
    background: #cfe2fa;
}

/* Маршрут: пунктирна дъга между старт и цел */
.resource-cover-trip .cover-route {
    right: 44px;
    bottom: 66px;
    width: 128px;
    height: 64px;
    border: 3px dashed var(--cover-accent);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    opacity: 0.55;
}

.resource-cover-trip .cover-start {
    right: 160px;
    bottom: 72px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--navy);
    box-shadow: 0 0 0 4px rgba(11, 46, 79, 0.15);
}

.resource-cover-trip .cover-pin {
    right: 30px;
    bottom: 96px;
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #e8624a;
    transform: rotate(-45deg);
}

.resource-cover-trip .cover-pin::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--white);
}

.resource-cover-trip .cover-coins {
    right: 96px;
    bottom: 56px;
    width: 40px;
    height: 12px;
    border-radius: 50%;
    background: #f2c14e;
    box-shadow:
        0 -7px 0 #e0a93b,
        0 -14px 0 #f2c14e,
        0 -21px 0 #e0a93b,
        0 -28px 0 #f6d27a;
}

.resource-cover-trip .cover-percent {
    top: 62px;
    right: 34px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 6px 16px rgba(26, 95, 180, 0.15);
}

/* Знак за процент, построен от форми */
.resource-cover-trip .cover-percent::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 3px;
    height: 28px;
    background: var(--cover-accent);
    transform: translateX(-50%) rotate(35deg);
}

.resource-cover-trip .cover-percent::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 11px;
    width: 7px;
    height: 7px;
    border: 3px solid var(--cover-accent);
    border-radius: 50%;
    box-shadow: 14px 14px 0 -3px var(--white), 14px 14px 0 0 var(--cover-accent);
}


/* ---------- Narrow cards / phones ---------- */

@container (max-width: 300px) {
    .resource-cover-body {
        max-width: 100%;
    }

    .resource-cover-title {
        font-size: 30px;
    }

    /* Типът и възрастта остават на един ред,
       за да е еднаква височината на covers */
    .resource-cover-type,
    .resource-cover-age {
        padding: 5px 7px;
        font-size: 11px;
    }

    .resource-cover-top {
        gap: 6px;
    }

    .resource-cover-tags {
        max-width: 100%;
    }

    .resource-cover-art {
        width: 60%;
        opacity: 0.45;
    }
}