/*
 * PictureGrove – Mobile Overrides der Learn-more-Seite
 * ------------------------------------------------------------
 * Zweck:
 *   Diese Datei enthält ausschließlich die mobilen Anpassungen
 *   der Learn-more-Seite selbst.
 *
 * Was hier bewusst NICHT liegt:
 *   - Header-Mobile-Regeln
 *     → diese liegen in /assets/header-mobile.css
 *
 * Gestalterische Leitidee:
 *   Die Seite soll auf kleineren Geräten dieselbe ruhige,
 *   editoriale Wirkung behalten wie auf Desktop – nur mit
 *   vereinfachtem Raster, kompakteren Abständen und besser
 *   lesbarer Typografie.
 */


/* ============================================================
   TABLET / SCHMALERE DESKTOPS
   ------------------------------------------------------------
   Ab ca. 1100 px wird das dreispaltige Desktop-Raster für die
   Learn-more-Seite auf eine einfache einspaltige Inhaltsführung
   reduziert.
   ============================================================ */
@media (max-width: 1100px) {
    /*
     * Das Inhaltsraster fällt auf eine einzelne Spalte zurück.
     * Der Text läuft dann ohne seitliche Leer-Spalten.
     */
    .content-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /*
     * Der Artikel muss im Einspaltmodus keine explizite mittlere
     * Grid-Spalte mehr belegen.
     */
    .content-grid > article {
        grid-column: auto;
    }

    /*
     * Auch die Hero-Zone wird auf eine einzelne Spalte reduziert.
     * Der Titel sitzt dann direkt im verfügbaren Raum.
     */
    .hero-inner {
        grid-template-columns: 1fr;
    }

    /*
     * Der optische Links-Einzug der Hero-Kopie wird mobil aufgehoben,
     * weil er nur im Desktop-Raster zur Feinkorrektur gebraucht wird.
     */
    .hero-copy {
        grid-column: auto;
        padding-left: 0;
    }
}


/* ============================================================
   SMARTPHONE
   ------------------------------------------------------------
   Weitere Verdichtung für kleinere Displays:
 *   - weniger Top-Abstand
 *   - kürzerer Seitenabschluss
 *   - etwas kompaktere Textzeilen
   ============================================================ */
@media (max-width: 760px) {
    /*
     * Der Hero-Bereich wird oben etwas knapper, damit der Einstieg
     * auf kleinen Displays nicht zu viel Höhe verbraucht.
     */

    .hero {
       padding-top: 16px;
       padding-bottom: 8px;
    }

    /*
     * Der Seitenabschluss wird etwas reduziert, damit die Seite
     * auf Smartphones nicht unnötig lang wirkt.
     */
    .content {
       padding-top: 9px;
       padding-bottom: 56px;
    }

    /*
     * Fließtext und Intro bleiben ruhig, werden aber minimal
     * kompakter gesetzt, um auf kleinen Geräten angenehmer zu lesen.
     */
    .section p,
    .intro {
       font-size: 0.90rem;
       line-height: 1.8;
       line-height: 1.46;
    }

    .intro {
        margin-bottom: 28px;
    }
    
    .section {
        margin-bottom: 32px;
    }

    .lang-switcher {
        gap: 14px;
    }

    .lang-chip {
        padding: 0;
        border-radius: 0;
        background: transparent;
        font-size: 0.70rem;
        letter-spacing: 0.04em;
    }

    .lang-chip.active {
        background: transparent;
        color: var(--text);
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }
}