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

// ── CSS custom properties ─────────────────────────────────────────────────────
.pdf-dl {
    --pdf-dl-purple:          #6b1e6e;
    --pdf-dl-violet:          #602965;
    --pdf-dl-pink:            #c73487;
    --pdf-dl-pink-hover:      #a8267a;
    --pdf-dl-gradient-start:  #851e77;
    --pdf-dl-gradient-end:    #e95e27;

    --pdf-dl-btn-radius:      100px;
    --pdf-dl-gap:             40px;
    --pdf-dl-pad-v:           64px;
    --pdf-dl-pad-h:           40px;
    --pdf-dl-img-shadow:      0 8px 32px rgba(0, 0, 0, .25);
}

// ── Page section reset ────────────────────────────────────────────────────────
.annualReport .page-section.pdfdownload {
    padding: 0;
    height: 100%;
}

// ── Base wrapper ──────────────────────────────────────────────────────────────
.annualReport .page-section.pdfdownload .pdf-dl,
.pdf-dl {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--pdf-dl-pad-v) var(--pdf-dl-pad-h);
    box-sizing: border-box;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 50px;
    color: #fff;

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

    &.gradient {
        background: linear-gradient(
                90deg,
                var(--pdf-dl-gradient-start)  0%,
                var(--pdf-dl-pink)            25%,
                var(--pdf-dl-pink)            75%,
                var(--pdf-dl-gradient-end)    100%
        );
    }

    &.violet {
        background: var(--pdf-dl-violet);
    }

    &.image-transparent {
        background: var(--pdf-dl-purple);

        .pdf-dl__header {
            background: linear-gradient(90deg, var(--pdf-dl-gradient-start), var(--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-opaque {
        background: var(--pdf-dl-purple);
    }

    // ── Button variant on gradient bg ─────────────────────────────────────────
    &.gradient .pdf-dl__btn {
        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);
        }
    }

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

        .pdf-dl__img {
            max-width: 550px;
            width: 100%;
            max-height: 60vh;
        }
    }

    // ── Multi layout — widths by item count ───────────────────────────────────
    &.pdf-dl--multi {
        .pdf-dl__grid[data-count="2"] .pdf-dl__item {
            flex: 1 1 280px;
            max-width: 380px;
        }

        .pdf-dl__grid[data-count="3"] .pdf-dl__item {
            flex: 1 1 200px;
            max-width: 280px;
        }

        .pdf-dl__grid[data-count] .pdf-dl__item {   // 4+ fallback
            flex: 1 1 160px;
            max-width: 220px;
        }

        // specific counts re-declared after to win cascade over generic above
        .pdf-dl__grid[data-count="2"] .pdf-dl__item { flex: 1 1 280px; max-width: 380px; }
        .pdf-dl__grid[data-count="3"] .pdf-dl__item { flex: 1 1 200px; max-width: 280px; }
    }


    // ── Text block ────────────────────────────────────────────────────────────────
    .pdf-dl__text {
        text-align: center;
    }

    .pdf-dl__header {
        font-family: Noto-Serif, sans-serif;
        font-size: 3rem;
        font-weight: 500;
        margin: 0 0 20px;
    }

    .pdf-dl__subheader {
        margin: 0;
        font-family: Frutiger, sans-serif;
        font-size: clamp(.875rem, 1.4vw, 1.25rem);
    }

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

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

    // ── Image link ────────────────────────────────────────────────────────────────
    .pdf-dl__img-link {
        display: block;
        overflow: hidden;
        box-shadow:
            0 2px 4px rgba(0, 0, 0, .15),
            0 8px 16px rgba(0, 0, 0, .25),
            0 24px 48px rgba(0, 0, 0, .20);
        img {
            transition: transform .25s ease, opacity .25s ease;
        }

        &:hover,
        &:focus-visible {
            img {
                transform: scale(1.04);
                opacity: .9;
            }

            &::after {
                display: none;
            }
        }
    }

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

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

        &:hover,
        &:focus-visible {
            background: var(--pdf-dl-pink-hover);
        }
    }



}



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

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

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

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