/******************************************************************************
    Shop Teaser Widget
    Dieterle Programmierung
    https://www.dieterle-programmierung.de

    Version : 1.1.0

    Schmale Hinweiskachel ueber die volle Widgetbreite, die unter einen
    Artikel gesetzt wird: links ein quadratischer Button, rechts davon
    Ueberschrift und Untertitel. Die ganze Kachel ist ein Link.

    Zwei Ausfuehrungen, damit sie untereinander unterscheidbar bleiben:
        shop    - goldener Button, Einkaufstasche (Vorgabe)
        article - blauer Button, Dokument

    Gepflegt wird nur ein Variablenblock, shop-teaser.js baut die Kachel:

        <div class="ShopTeaser"
             data-variant = "shop"
             data-link    = "https://www.dieterle-programmierung.de/shop.html"
             data-title   = "Ueberschrift"
             data-text    = "Untertitel"></div>

    Variante B (ohne JavaScript): das fertige Markup direkt schreiben,
    siehe Shop-Teaser-README.md.

    Passend zu shop.css, article.css, project-widget.css und talks.css.
******************************************************************************/


/******************************************************************************
    Design Tokens
******************************************************************************/

.ShopTeaser {

    --Accent      : #FFC439;   /* brand gold                        */
    --AccentSoft  : #ffd15f;
    --AccentGlow  : rgba(255,196,57,.20);

    --Heading     : #ffffff;
    --Text        : #e6e8eb;
    --TextMuted   : #aab0b7;

    --Surface     : #3c3f43;   /* = Seitenhintergrund               */
    --SurfaceAlt  : #474b50;   /* Kachelflaeche                     */
    --Line        : #565b61;

    /* Geometrie */
    --TeaserMax   : 900px;     /* volle Widgetbreite wie youtube-*  */
    --TeaserIcon  : 92px;      /* Kantenlaenge des Buttons          */
    --TeaserGap   : 14px;      /* Abstand des Buttons zum Rand      */

    display     : block;
    width       : 100%;
    max-width   : var(--TeaserMax);
    margin      : 30px auto;
    color       : var(--Text);
    font-family : "Segoe UI", Arial, sans-serif;
    font-size   : 16px;
    line-height : 1.6;
}


/* Solange shop-teaser.js noch nicht gelaufen ist, bleibt der Variablenblock
   unsichtbar - sonst blitzen die Attribute als leerer Kasten auf. */
.ShopTeaser:not([data-teaser-ready]) {

    min-height : 1px;
}


/******************************************************************************
    Ausfuehrung "article"

    Blau statt Gold (Farbton --Note aus article.css), damit sich die
    Artikel-Kachel und die Shop-Kachel untereinander auf einen Blick
    unterscheiden.

    Eine eigene Farbe je Widget geht auch ohne Aenderung dieser Datei:
    style="--Accent:#4cc38a; --AccentSoft:#84e0b0; --AccentGlow:rgba(76,195,138,.20)"
******************************************************************************/

.ShopTeaser.ShopTeaserArticle {

    --Accent      : #4aa3ff;
    --AccentSoft  : #79bcff;
    --AccentGlow  : rgba(74,163,255,.22);
}


/******************************************************************************
    Kachel

    Die Kachel ist selbst der Link. Deshalb braucht es keine zusaetzliche
    Klickflaeche, und Rechtsklick, Mittelklick und Tastatur arbeiten normal.
******************************************************************************/

.ShopTeaserCard {

    position        : relative;
    display         : flex;
    align-items     : center;
    gap             : 4px;
    background      : var(--SurfaceAlt);
    border          : 1px solid var(--Line);
    border-radius   : 14px;
    overflow        : hidden;
    color           : var(--Text);
    text-decoration : none;
    box-shadow      : 0 8px 20px rgba(0,0,0,.35);
    transition      : transform .25s, box-shadow .25s, border-color .25s;
}


/* article.css setzt auf jedes a eine goldene Unterlinie - hier nicht. */
.Article .ShopTeaserCard,
.Article .ShopTeaserCard:hover {

    text-decoration : none;
    border-bottom   : 1px solid var(--Line);
}


.ShopTeaserCard:hover,
.ShopTeaserCard:focus-visible {

    transform    : translateY(-3px);
    border-color : var(--Accent);
    box-shadow   : 0 12px 26px rgba(0,0,0,.45), 0 0 14px var(--AccentGlow);
}


.ShopTeaserCard:focus-visible {

    outline        : 2px solid #ffffff;
    outline-offset : 2px;
}


/******************************************************************************
    Quadratischer Button links
******************************************************************************/

.ShopTeaserIcon {

    flex            : 0 0 auto;
    width           : var(--TeaserIcon);
    height          : var(--TeaserIcon);
    margin          : var(--TeaserGap);
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : 12px;
    background      : var(--Accent);
    color           : var(--Surface);
    font-size       : 34px;
    line-height     : 1;
    box-shadow      : 0 4px 12px rgba(0,0,0,.30);
    transition      : background .25s, transform .25s, box-shadow .25s;
}


.ShopTeaserCard:hover .ShopTeaserIcon {

    background : var(--AccentSoft);
    transform  : scale(1.04);
    box-shadow : 0 6px 16px rgba(0,0,0,.40);
}


.ShopTeaserIcon svg {

    width           : 46px;
    height          : 46px;
    fill            : none;
    stroke          : currentColor;
    stroke-width    : 1.8;
    stroke-linecap  : round;
    stroke-linejoin : round;
}


/******************************************************************************
    Text rechts
******************************************************************************/

.ShopTeaserBody {

    flex           : 1 1 auto;
    min-width      : 0;
    display        : flex;
    flex-direction : column;
    gap            : 3px;
    padding        : 14px 6px 14px 8px;
}


/* Ohne Button links braucht der Text den vollen Innenabstand. */
.ShopTeaserCard > .ShopTeaserBody:first-child {

    padding-left : 20px;
}


.ShopTeaserTitle {

    margin      : 0;
    font-size   : 20px;
    font-weight : 600;
    line-height : 1.3;
    color       : var(--Heading);
    transition  : color .25s;
}


.ShopTeaserCard:hover .ShopTeaserTitle {

    color : var(--Accent);
}


.ShopTeaserText {

    margin    : 0;
    font-size : 14px;
    color     : var(--TextMuted);
}


.ShopTeaserText:empty {

    display : none;
}


/******************************************************************************
    Pfeil am rechten Rand
******************************************************************************/

.ShopTeaserGo {

    flex        : 0 0 auto;
    padding     : 0 22px 0 10px;
    font-size   : 24px;
    line-height : 1;
    color       : var(--Accent);
    transition  : transform .25s;
}


.ShopTeaserGo:empty {

    display : none;
}


.ShopTeaserCard:hover .ShopTeaserGo {

    transform : translateX(4px);
}


/******************************************************************************
    Responsive
******************************************************************************/

@media (max-width: 560px) {

    .ShopTeaser {

        --TeaserIcon : 70px;
        --TeaserGap  : 12px;
    }

    .ShopTeaserIcon {

        font-size : 26px;
    }

    .ShopTeaserIcon svg {

        width  : 34px;
        height : 34px;
    }

    .ShopTeaserTitle {

        font-size : 17px;
    }

    .ShopTeaserText {

        font-size : 13px;
    }

    .ShopTeaserGo {

        display : none;
    }
}


/******************************************************************************
    Bewegung reduzieren
******************************************************************************/

@media (prefers-reduced-motion: reduce) {

    .ShopTeaserCard,
    .ShopTeaserIcon,
    .ShopTeaserTitle,
    .ShopTeaserGo {

        transition : none;
    }

    .ShopTeaserCard:hover,
    .ShopTeaserCard:hover .ShopTeaserIcon,
    .ShopTeaserCard:hover .ShopTeaserGo {

        transform : none;
    }
}


/******************************************************************************
    Druck / PDF

    Im Druck ist der Hinweis nur als Text sinnvoll, deshalb wird die
    Adresse hinter der Ueberschrift ausgeschrieben.
******************************************************************************/

@media print {

    .ShopTeaser {

        color : #222;
    }

    .ShopTeaserCard {

        background   : #fff;
        border       : 1px solid #ccc;
        box-shadow   : none;
        break-inside : avoid;
    }

    .ShopTeaserTitle {

        color : #111;
    }

    .ShopTeaserIcon {

        background : #eee;
        color      : #111;
        box-shadow : none;
    }

    .ShopTeaserCard::after {

        content   : " (" attr(href) ")";
        font-size : 11px;
        color     : #555;
    }

    .ShopTeaserGo {

        display : none;
    }
}