// ─────────────────────────────────────────────────────────────────────────────
// pdf-download.scss
// Content Block: bgm-theme-flatex/pdfdownload
// Compiled to: EXT:bgm_theme_flatex/Resources/Public/Css/atom/pdf-download.css
// ─────────────────────────────────────────────────────────────────────────────

// ── Tokens ───────────────────────────────────────────────────────────────────
$pdf-dl-purple:         #6b1e6e;
$pdf-dl-violet:         #7b2d8b;
$pdf-dl-pink:           #c73487;
$pdf-dl-gradient-start: #851e77;
$pdf-dl-gradient-end:   #e95e27;

$pdf-dl-btn-radius:     100px;
$pdf-dl-gap:            24px;
$pdf-dl-section-pad-v:  64px;
$pdf-dl-section-pad-h:  40px;

$pdf-dl-img-max-single: 320px;
$pdf-dl-img-shadow:     0 8px 32px rgba(0, 0, 0, .25);

// ── Base wrapper ─────────────────────────────────────────────────────────────
.pdf-dl {
    position: relative;
    width: 100%;
    padding: $pdf-dl-section-pad-v $pdf-dl-section-pad-h;
    box-sizing: border-box;
    overflow: hidden;

    // ── Background variants ───────────────────────────────────────────────────

    // Gradient (default) — white text
    &.gradient {
        background: linear-gradient(
            90deg,
            $pdf-dl-gradient-start 0%,
            $pdf-dl-pink           25%,
            $pdf-dl-pink           75%,
            $pdf-dl-gradient-end   100%
        );
        color: #fff;
    }

    // Solid violet — white text
    &.violet {
        background: $pdf-dl-violet;
        color: #fff;
    }

    // Image with overlay + transparent image cards — gradient text on header
    &.image-transparent {
        background: $pdf-dl-purple;
        color: #fff;

        .pdf-dl__header {
            background: linear-gradient(
                90deg,
                $pdf-dl-gradient-start,
                $pdf-dl-gradient-end
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .pdf-dl__img {
            opacity: .85;
            mix-blend-mode: luminosity;
        }
    }

    // Image without transparency — white text, full-colour covers
    &.image-opaque {
        background: $pdf-dl-purple;
        color: #fff;
    }
}

// ── Text block ───────────────────────────────────────────────────────────────
.pdf-dl__text {
    text-align: center;
    margin-bottom: 40px;
}

.pdf-dl__header {
    margin: 0 0 10px;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.pdf-dl__subheader {
    margin: 0;
    font-size: clamp(.875rem, 1.4vw, 1rem);
    opacity: .8;
}

// ── Grid ─────────────────────────────────────────────────────────────────────
.pdf-dl__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: $pdf-dl-gap;
}

// ── Single-image layout ───────────────────────────────────────────────────────
.pdf-dl--single {
    .pdf-dl__grid {
        flex-direction: column;
        align-items: center;
    }

    .pdf-dl__img {
        max-width: $pdf-dl-img-max-single;
        width: 100%;
        max-height: 60vh;
    }
}

// ── Multi-image layout ────────────────────────────────────────────────────────
.pdf-dl--multi {
    .pdf-dl__item {
        flex: 1 1 160px;
        max-width: 220px;
    }
}

// ── Item ─────────────────────────────────────────────────────────────────────
.pdf-dl__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

// ── Image link ────────────────────────────────────────────────────────────────
.pdf-dl__img-link {
    display: block;
    transition: transform .25s ease, opacity .25s ease;

    &:hover,
    &:focus-visible {
        transform: translateY(-4px);
        opacity: .9;
    }
}

.pdf-dl__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: $pdf-dl-img-shadow;
    object-fit: cover;
}

// ── Button ────────────────────────────────────────────────────────────────────
.pdf-dl__btn {
    display: inline-block;
    padding: 9px 22px;
    border-radius: $pdf-dl-btn-radius;
    background: $pdf-dl-pink;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, transform .2s ease;

    &:hover,
    &:focus-visible {
        background: darken($pdf-dl-pink, 8%);
        transform: translateY(-2px);
    }

    // On gradient background, use a lighter pill so it doesn't disappear
    .gradient & {
        background: rgba(255, 255, 255, .2);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, .5);

        &:hover,
        &:focus-visible {
            background: rgba(255, 255, 255, .35);
        }
    }
}

// ── Responsive ───────────────────────────────────────────────────────────────
@media (max-width: 768px) {
    .pdf-dl {
        padding: 40px 20px;
    }

    .pdf-dl--multi {
        .pdf-dl__item {
            flex: 1 1 130px;
            max-width: 160px;
        }
    }
}

@media (max-width: 480px) {
    .pdf-dl__grid {
        gap: 16px;
    }

    .pdf-dl--multi {
        .pdf-dl__item {
            flex: 1 1 120px;
            max-width: 140px;
        }
    }
}