/******************************************************************************
    LinkedIn Article Widget
    Dieterle Programmierung
    https://www.dieterle-programmierung.de

    Version : 1.0.0

    Hinweis unter einem Artikel: zum selben Thema gibt es auch einen
    Artikel auf LinkedIn. Aufbau von oben nach unten:

        goldene Trennlinie ueber die volle Breite
        ein Satz dazu (deutsch oder englisch)
        eine oder mehrere Karten, jede ist ein Link zum Artikel

    Gepflegt wird nur ein Variablenblock, linkedin-article.js baut das
    Markup. Je Karte reichen data-name und data-link.

    Es werden keine fremden Server angesprochen: das Zeichen von LinkedIn
    ist eine Strichzeichnung im Quelltext, kein Bild und kein Skript.

    Passend zu article.css (gleiche Breite 880px), groups.css, talks.css,
    shop-teaser.css und project-widget.css (Dark Theme, Gold #FFC439).
******************************************************************************/


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

.LiArticle {

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

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

    --Surface     : #3c3f43;   /* = Seitenhintergrund               */
    --SurfaceAlt  : #474b50;   /* Kartenflaeche                     */
    --SurfaceAlt2 : #40444a;
    --Line        : #565b61;

    /* Farbe von LinkedIn, je Karte ueber data-color aenderbar */
    --Brand       : #0a66c2;

    /* Geometrie */
    --ListMax     : 880px;     /* = max-width von .Article          */
    --IconSize    : 40px;      /* quadratisches Zeichen links       */
    --RuleH       : 3px;       /* Staerke der Trennlinie            */
    --Radius      : 12px;

    max-width   : var(--ListMax);
    margin      : 34px auto;
    padding     : 0 18px;
    color       : var(--Text);
    font-family : "Segoe UI", Arial, sans-serif;
    font-size   : 16px;
    line-height : 1.6;
}


/* Steht das Widget im Artikel, sitzt es schon in dessen Innenabstand -
   dann nicht ein zweites Mal einruecken und nicht erneut zentrieren. */
.Article .LiArticle {

    max-width : none;
    margin    : 34px 0;
    padding   : 0;
}


/******************************************************************************
    Goldene Trennlinie ueber die volle Breite
******************************************************************************/

.LiArticleRule {

    height        : var(--RuleH);
    margin        : 0 0 16px;
    border        : 0;
    border-radius : calc(var(--RuleH) / 2);
    background    : var(--Accent);
}


/* data-rule="fade" - laeuft nach rechts aus */
.LiArticleRule.LiArticleRuleFade {

    background : linear-gradient(90deg,
                 var(--Accent) 0%,
                 var(--Accent) 45%,
                 rgba(255,196,57,.12) 100%);
}


/******************************************************************************
    Ueberschrift (optional) und Satz darunter
******************************************************************************/

.LiArticleTitle {

    margin      : 0 0 6px;
    font-size   : 20px;
    font-weight : 700;
    color       : var(--Heading);
}


.LiArticleText {

    margin    : 0 0 16px;
    max-width : 62ch;
    color     : var(--Text);
    font-size : 15.5px;
}


/******************************************************************************
    Karten
    Sie stehen nebeneinander und brechen um. Bei einem einzigen Link
    bleibt die Karte damit so breit wie ihr Text und laeuft nicht ueber
    die ganze Zeile.
******************************************************************************/

.LiArticleGrid {

    display   : flex;
    flex-wrap : wrap;
    gap       : 12px;
}


/* data-width="full" - jede Karte nimmt eine ganze Zeile ein */
.LiArticle.LiArticleFull .LiArticleGrid {

    display               : grid;
    grid-template-columns : 1fr;
}


.LiArticleCard {

    position        : relative;
    display         : flex;
    align-items     : center;
    gap             : 12px;
    max-width       : 100%;
    padding         : 10px 16px 10px 12px;
    background      : var(--SurfaceAlt);
    border          : 1px solid var(--Line);
    border-radius   : var(--Radius);
    overflow        : hidden;
    text-decoration : none;
    color           : inherit;
    box-shadow      : 0 6px 16px rgba(0,0,0,.28);
    transition      : transform .2s, box-shadow .2s, border-color .2s, background .2s;
}


/* Das Widget steht unter Artikeln - dort setzt article.css eine goldene
   Unterlinie auf jedes a-Element. Hier nicht. */
.LiArticleCard,
.Article .LiArticleCard {

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


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

    transform    : translateY(-3px);
    background   : var(--SurfaceAlt2);
    border-color : var(--Accent);
    box-shadow   : 0 12px 24px rgba(0,0,0,.40), 0 0 14px var(--AccentGlow);
    outline      : none;
}


/* Schmaler Farbstreifen links in der Farbe des Netzwerks. */
.LiArticleCard::before {

    content       : "";
    position      : absolute;
    left          : 0;
    top           : 8px;
    bottom        : 8px;
    width         : 3px;
    border-radius : 0 3px 3px 0;
    background    : var(--Brand);
    opacity       : .85;
}


/******************************************************************************
    Zeichen von LinkedIn
******************************************************************************/

.LiArticleIcon {

    flex            : 0 0 auto;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : var(--IconSize);
    height          : var(--IconSize);
    border-radius   : 10px;
    background      : var(--Brand);
    color           : #ffffff;
    font-size       : 17px;
    font-weight     : 700;
    box-shadow      : 0 4px 12px rgba(0,0,0,.35);
    transition      : transform .2s;
}


.LiArticleCard:hover .LiArticleIcon {

    transform : scale(1.06);
}


.LiArticleIcon svg {

    width  : 21px;
    height : 21px;
    fill   : currentColor;
}


/******************************************************************************
    Name des Artikels
******************************************************************************/

.LiArticleName {

    flex        : 1 1 auto;
    min-width   : 0;
    font-size   : 16px;
    font-weight : 600;
    line-height : 1.35;
    color       : var(--Heading);
}


.LiArticleCard:hover .LiArticleName {

    color : var(--AccentSoft);
}


/******************************************************************************
    Pfeil rechts
******************************************************************************/

.LiArticleGo {

    flex        : 0 0 auto;
    font-size   : 18px;
    line-height : 1;
    color       : var(--TextMuted);
    transition  : transform .2s, color .2s;
}


.LiArticleCard:hover .LiArticleGo {

    color     : var(--Accent);
    transform : translateX(3px);
}


/******************************************************************************
    Schmale Anzeigen
******************************************************************************/

@media (max-width: 600px) {

    .LiArticle {

        --IconSize : 36px;

        padding : 0 12px;
    }

    /* Nebeneinander wird zu untereinander, sonst werden die Karten
       durch lange Titel unruhig. */
    .LiArticleGrid {

        display               : grid;
        grid-template-columns : 1fr;
    }

    .LiArticleName { font-size : 15px; }
}


/******************************************************************************
    Druck - helle Seite wie in article.css
******************************************************************************/

@media print {

    .LiArticle {

        --Heading     : #111111;
        --Text        : #222222;
        --TextMuted   : #555555;

        --SurfaceAlt  : #ffffff;
        --SurfaceAlt2 : #ffffff;
        --Line        : #cccccc;
    }

    .LiArticleCard {

        box-shadow   : none;
        break-inside : avoid;
    }

    .LiArticleGo { display : none; }
}