/**
 * Ausmalraster – Oeffentliches Stylesheet
 *
 * Gestaltet das Ausmalbilder-Raster und alle zugehoerigen Elemente
 * im Frontend. Die Farbwerte und Abstandsgroessen orientieren sich
 * an den CSS-Variablen des Elternthemas (ausmal-kinder/style.css).
 *
 * Inhaltsverzeichnis
 * ──────────────────
 * 1. Designvariablen (spiegeln das Elternthema wider)
 * 2. Raster-Wrapper und Gitterlayout
 * 3. Einzelne Ausmalkarte
 * 4. Kartenbereich: Vorschaubild
 * 5. Kartenbereich: Textinhalt (Titel, Beschreibung, Aktionen)
 * 6. Download-Schaltflaeche mit Ladezustand und Spinner
 * 7. Einzelne Druckseite (Shortcode [coloring_printable])
 * 8. Druckmodus – Schaltflaechen ausblenden
 * 9. Reaktionsschnelles Layout (Mobilgeraete)
 *
 * @paket  Ausmalraster
 * @autor  Entwicklerteam ausmal.de
 */

/* ==========================================================================
   1. Designvariablen
   Werden als --cg-* Praefix definiert, damit kein Konflikt mit dem
   Elternthema entsteht. Werte entsprechen ausmal-kinder/style.css.
   ========================================================================== */

:root {
    /* Hintergrundfarben */
    --cg-hintergrund:        #f8fafc;
    --cg-flaeche:            #ffffff;
    --cg-flaeche-weich:      #f1f5f9;

    /* Schriftfarben */
    --cg-text:               #334155;
    --cg-text-dunkel:        #0f172a;
    --cg-text-gedaempft:     #64748b;

    /* Rahmen */
    --cg-rahmen:             #e2e8f0;
    --cg-rahmen-hover:       #a5f3fc;

    /* Akzentfarbe (Thema-Primaerfarbe: Tuerkis) */
    --cg-primaer:            #0891b2;
    --cg-primaer-dunkel:     #0e7490;

    /* Abstands- und Formwerte */
    --cg-radius:             14px;
    --cg-abstand-karte:      16px;

    /* Schatten */
    --cg-schatten-klein:     0 4px 6px -1px rgba(0, 0, 0, .05),
                             0 2px 4px -1px rgba(0, 0, 0, .03);
    --cg-schatten-hover:     0 20px 35px -5px rgba(8, 145, 178, .12),
                             0 10px 15px -5px rgba(0, 0, 0, .04);

    /* Uebergangsgeschwindigkeit */
    --cg-uebergang:          .3s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. Raster-Wrapper und Gitterlayout
   ========================================================================== */

/* Aeusserer Wrapper – begrenzungslos, passt sich dem Inhaltsbereich an */
.ausmal-raster-wrapper {
    margin: 24px 0;
    width: 100%;
    box-sizing: border-box;
}

/* Zweispaltiges CSS-Grid fuer Tablets und Desktop */
.ausmal-raster {
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
    gap: var( --cg-abstand-karte );
    box-sizing: border-box;
}

/* ==========================================================================
   3. Einzelne Ausmalkarte
   Jedes <article class="ausmal-karte"> ist eine eigenstaendige Karte
   mit Vorschaubild oben und Textbereich unten.
   ========================================================================== */

.ausmal-karte {
    background:    var( --cg-flaeche );
    border:        1px solid var( --cg-rahmen );
    border-radius: var( --cg-radius );
    box-shadow:    var( --cg-schatten-klein );
    overflow:      hidden;
    display:       flex;
    flex-direction: column;

    /* Sanfter Hover-Uebergang */
    transition:
        transform      var( --cg-uebergang ),
        box-shadow     var( --cg-uebergang ),
        border-color   .3s ease;
}

.ausmal-karte:hover {
    transform:    translateY( -4px ) scale( 1.01 );
    box-shadow:   var( --cg-schatten-hover );
    border-color: var( --cg-rahmen-hover );
}

/* ==========================================================================
   4. Kartenbereich: Vorschaubild
   ========================================================================== */

.ausmal-karte__bild {
    width:           100%;
    background:      var( --cg-flaeche );
    padding:         12px;
    box-sizing:      border-box;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* Bild skaliert proportional und nimmt nie mehr als den verfuegbaren
   Platz in Anspruch */
.ausmal-karte__bild img {
    max-width:  100%;
    height:     auto;
    display:    block;
    margin:     0 auto;
}

/* ==========================================================================
   5. Kartenbereich: Textinhalt
   ========================================================================== */

.ausmal-karte__inhalt {
    padding:          14px 16px 16px;
    border-top:       1px solid var( --cg-rahmen );
    background:       var( --cg-flaeche-weich );
    flex:             1;          /* nimmt restliche Hoehe ein */
    display:          flex;
    flex-direction:   column;
    gap:              6px;
}

/* -- Titel ----------------------------------------------------------------- */

.ausmal-karte__titel {
    margin:      0;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size:   0.95rem;
    font-weight: 700;
    color:       var( --cg-text-dunkel );
    line-height: 1.3;
}

/* Laufende Nummer vor dem Titel */
.ausmal-karte__nummer {
    color:        var( --cg-primaer-dunkel );
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
}

/* -- Beschreibung ---------------------------------------------------------- */

.ausmal-karte__beschreibung {
    font-size:   0.85rem;
    color:       var( --cg-text-gedaempft );
    margin:      0;
    line-height: 1.55;
}

/* Absaetze innerhalb der Beschreibung normalisieren */
.ausmal-karte__beschreibung p {
    margin: 0 0 4px;
}

.ausmal-karte__beschreibung p:last-child {
    margin-bottom: 0;
}

/* -- Aktionsbereich -------------------------------------------------------- */

.ausmal-karte__aktionen {
    margin-top:  auto;   /* drueckt Schaltflaeche ans untere Ende */
    padding-top: 10px;
    text-align:  center;
}

/* ==========================================================================
   6. Download-Schaltflaeche
   Entspricht dem .button-Stil des Elternthemas (Farbverlauf, Pillenform).
   Zusaetzlich: Ladezustand mit CSS-Spinner.
   ========================================================================== */

.download-button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;

    /* Farbverlauf identisch zum Thema-Button */
    background:      linear-gradient( to right, var( --cg-primaer ), var( --cg-primaer-dunkel ) );
    color:           #fff !important;
    text-decoration: none !important;

    padding:         9px 20px;
    border-radius:   999px;       /* Pillenform wie im Elternthema */
    border:          none;
    cursor:          pointer;

    font-family:     'Outfit', system-ui, -apple-system, sans-serif;
    font-size:       0.875rem;
    font-weight:     600;
    letter-spacing:  0.02em;
    white-space:     nowrap;

    box-shadow:      0 4px 12px rgba( 8, 145, 178, .3 );
    transition:
        transform    .2s cubic-bezier( .4, 0, .2, 1 ),
        box-shadow   .2s ease;
}

.download-button:hover,
.download-button:focus-visible {
    transform:       translateY( -2px );
    box-shadow:      0 6px 16px rgba( 8, 145, 178, .4 );
    text-decoration: none !important;
    outline:         none;
}

/* Fokus-Sichtbarkeit fuer Tastaturnavigation */
.download-button:focus-visible {
    outline:        2px solid var( --cg-primaer );
    outline-offset: 3px;
}

/* -- Ladezustand: Schaltflaeche deaktiviert --------------------------------- */

.download-button[data-laedt="true"] {
    opacity:        .75;
    cursor:         wait;
    pointer-events: none;
}

/* -- CSS-Spinner (nur sichtbar waehrend des Ladens) ------------------------ */

.download-button .cg-spinner {
    display:       none;        /* standardmaessig ausgeblendet */
    width:         14px;
    height:        14px;
    border:        2px solid rgba( 255, 255, 255, .4 );
    border-top-color: #fff;
    border-radius: 50%;
    flex-shrink:   0;
    animation:     ausmal-drehen .7s linear infinite;
}

/* Spinner einblenden sobald Schaltflaeche laedt */
.download-button[data-laedt="true"] .cg-spinner {
    display: inline-block;
}

/* Spinner-Keyframes */
@keyframes ausmal-drehen {
    to { transform: rotate( 360deg ); }
}

/* ==========================================================================
   7. Einzelne Druckseite  [coloring_printable]
   ========================================================================== */

.ausmal-druckseite {
    max-width:  800px;
    margin:     24px auto;
    text-align: center;
    padding:    0 12px;
}

.ausmal-druckseite__bild img {
    max-width:     100%;
    height:        auto;
    display:       block;
    margin:        0 auto 20px;
    border-radius: var( --cg-radius );
    box-shadow:    var( --cg-schatten-klein );
}

.ausmal-druckseite__aktion {
    margin: 0;
}

/* ==========================================================================
   8. Druckmodus – Schaltflaechen ausblenden
   ========================================================================== */

@media print {
    .ausmal-karte__aktionen,
    .ausmal-druckseite__aktion {
        display: none !important;
    }
}

/* ==========================================================================
   9. Reaktionsschnelles Layout
   ========================================================================== */

/* Einspaltiges Raster auf schmalen Bildschirmen */
@media screen and ( max-width: 520px ) {

    .ausmal-raster {
        grid-template-columns: 1fr;
    }

    /* Schaltflaeche nimmt volle Breite ein */
    .download-button {
        width:       100%;
        box-sizing:  border-box;
    }
}