/* --- KOLOROWANKI - MOBILE --- */
/* Tylko wygląd mobilny. Bez zmian logiki PDF, miniatur i pobierania. */

@media (max-width: 900px) {
    .coloring-page-hero {
        width: calc(100% - 24px) !important;
        min-height: 0 !important;
        margin: 0 auto 10px !important;
        padding: 28px 0 22px !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        text-align: center !important;
    }

    .coloring-page-hero::before {
        inset: 10px -8px 14px -8px !important;
        border-radius: 0 0 34px 34px !important;
    }

    .coloring-hero-dog {
        justify-content: center !important;
    }

    .coloring-hero-dog img {
        width: min(310px, 72vw) !important;
        max-width: 100% !important;
    }

    .coloring-hero-text {
        max-width: 640px !important;
        margin: 0 auto !important;
        padding: 26px 22px !important;
        border-radius: 28px !important;
        text-align: center !important;
    }

    .coloring-hero-text h1 {
        margin-bottom: 14px !important;
        font-size: clamp(31px, 8.4vw, 46px) !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
    }

    .coloring-hero-text p {
        max-width: 560px !important;
        margin: 0 auto !important;
        font-size: clamp(16px, 4.1vw, 18px) !important;
        line-height: 1.55 !important;
    }

    .coloring-hero-highlight {
        margin-top: 12px !important;
    }

    .coloring-intro {
        width: calc(100% - 24px) !important;
        max-width: 760px !important;
        margin: 24px auto 22px !important;
        padding: 22px 20px !important;
        border-radius: 28px !important;
        font-size: 16px !important;
        line-height: 1.62 !important;
    }

    .coloring-intro p {
        margin: 0 0 14px !important;
    }

    .coloring-intro p:last-child {
        margin-bottom: 0 !important;
    }

    .coloring-section {
        width: calc(100% - 24px) !important;
        max-width: 760px !important;
        padding: 18px 0 42px !important;
    }

    .coloring-header {
        margin: 12px 0 18px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .coloring-header h2 {
        font-size: clamp(25px, 6.2vw, 32px) !important;
        line-height: 1.16 !important;
    }

    .coloring-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .coloring-card {
        border-radius: 20px !important;
    }

    .coloring-body {
        padding: 13px 12px 14px !important;
    }

    .coloring-title {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    .coloring-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .btn-download {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 10px !important;
        text-align: center !important;
        font-size: 13px !important;
    }

    .file-size {
        text-align: center !important;
        font-size: 11px !important;
    }

    #scrollToTopBtn {
        right: 14px !important;
        bottom: 20px !important;
        width: 50px !important;
        height: 50px !important;
        line-height: 50px !important;
    }
}

@media (max-width: 560px) {
    .coloring-page-hero {
        width: calc(100% - 20px) !important;
        padding: 24px 0 18px !important;
    }

    .coloring-hero-dog img {
        width: min(280px, 74vw) !important;
    }

    .coloring-hero-text {
        padding: 24px 18px !important;
    }

    .coloring-hero-text h1 {
        font-size: clamp(30px, 9vw, 38px) !important;
    }

    .coloring-intro,
    .coloring-section {
        width: calc(100% - 20px) !important;
    }

    .coloring-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .coloring-thumb,
    .pdf-fallback {
        aspect-ratio: 16 / 11 !important;
    }
}

@media (max-width: 380px) {
    .coloring-hero-text h1 {
        font-size: 29px !important;
    }

    .coloring-header h2 {
        font-size: 24px !important;
    }

    .coloring-title {
        font-size: 13px !important;
    }
}