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

    Version : 1.0.0

    Linkliste der Gruppen und Communitys, in denen ich aktiv bin
    (LinkedIn, Facebook, Foren). Jede Zeile ist eine Karte mit dem
    Zeichen des Netzwerks, dem Namen der Gruppe und einem kurzen Text.
    Die ganze Karte ist der Link und oeffnet in einem neuen Tab.

    Gepflegt wird nur ein Variablenblock, groups.js baut das Markup:

        div class="GroupList" mit data-title und data-lead, darin je
        Gruppe ein div class="GroupItem" mit data-network, data-name,
        data-link und optional data-text, data-members, data-role.

    Es werden keine fremden Server angesprochen: die Zeichen der
    Netzwerke sind Strichzeichnungen im Quelltext, keine Bilder.

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


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

.GroupList {

    --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 des jeweiligen Netzwerks, je Karte ueberschrieben */
    --Brand       : var(--Accent);

    /* Geometrie */
    --ListMax     : 900px;     /* volle Widgetbreite wie shop-teaser */
    --CardMin     : 320px;     /* Mindestbreite einer Karte          */
    --IconSize    : 46px;      /* quadratisches Zeichen links        */
    --Radius      : 14px;

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


/******************************************************************************
    Ueberschrift und Einleitung des Blocks
******************************************************************************/

.GroupListTitle {

    font-size    : 24px;
    font-weight  : 700;
    margin       : 0 0 10px;
    padding-left : 14px;
    border-left  : 5px solid var(--Accent);
    color        : var(--Heading);
}


.GroupListLead {

    margin    : 0 0 22px;
    color     : var(--TextMuted);
    font-size : 15px;
    max-width : 62ch;
}


/* Zweite Zeile der Einleitung, etwas kraeftiger - der Satz, der zur
   Liste hinfuehrt. */
.GroupListLeadStrong {

    display : block;
    margin  : 8px 0 0;
    color   : var(--Text);
}


/******************************************************************************
    Raster
******************************************************************************/

.GroupGrid {

    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(var(--CardMin), 1fr));
    gap                   : 14px;
    justify-content       : start;
}


/* Eine Karte je Zeile ueber die volle Breite - data-columns="1" */
.GroupList.GroupSingle .GroupGrid {

    grid-template-columns : 1fr;
}


/******************************************************************************
    Karte
******************************************************************************/

.GroupCard {

    position        : relative;
    display         : flex;
    align-items     : center;
    gap             : 14px;
    padding         : 14px 16px;
    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 wird auch innerhalb von .Article eingesetzt - dort setzt
   article.css eine goldene Unterlinie auf jedes a-Element. Hier nicht. */
.GroupCard,
.Article .GroupCard {

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


.GroupCard:hover,
.GroupCard: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. */
.GroupCard::before {

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


/******************************************************************************
    Zeichen des Netzwerks
******************************************************************************/

.GroupIcon {

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


.GroupCard:hover .GroupIcon {

    transform : scale(1.06);
}


.GroupIcon svg {

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


/******************************************************************************
    Text der Karte
******************************************************************************/

.GroupBody {

    flex      : 1 1 auto;
    min-width : 0;
}


.GroupName {

    display     : block;
    margin      : 0;
    font-size   : 17px;
    font-weight : 600;
    line-height : 1.3;
    color       : var(--Heading);
}


.GroupCard:hover .GroupName {

    color : var(--AccentSoft);
}


.GroupText {

    display   : block;
    margin    : 3px 0 0;
    font-size : 14px;
    color     : var(--Text);
}


/* Zeile unter dem Namen: Netzwerk, Mitgliederzahl, Rolle. */
.GroupMeta {

    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    gap         : 6px 10px;
    margin      : 5px 0 0;
    font-size   : 12.5px;
    color       : var(--TextMuted);
}


/* Die Markenfarben sind auf dunklem Grund zu dunkel zum Lesen, deshalb
   wird der Name des Netzwerks mit Weiss aufgehellt. Die erste Zeile ist
   der Rueckfall fuer Browser ohne color-mix. */
.GroupNetwork {

    color          : var(--Brand);
    color          : color-mix(in srgb, var(--Brand) 55%, #ffffff);
    font-weight    : 600;
    letter-spacing : .2px;
}


/* Trennpunkt vor der Mitgliederzahl. */
.GroupMembers::before {

    content      : "\00B7";
    margin-right : 7px;
    color        : var(--Line);
}


/* Rolle, z. B. Member, Moderator, Admin */
.GroupBadge {

    padding        : 1px 8px;
    border         : 1px solid var(--Line);
    border-radius  : 20px;
    background     : rgba(255,255,255,.04);
    font-size      : 11px;
    letter-spacing : .3px;
    color          : var(--TextMuted);
    white-space    : nowrap;
}


.GroupBadge.GroupBadgeAccent {

    border-color : rgba(255,196,57,.45);
    background   : rgba(255,196,57,.10);
    color        : var(--AccentSoft);
}


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

.GroupGo {

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


.GroupCard:hover .GroupGo {

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


/******************************************************************************
    Fussnote unter der Liste (optional, data-note)
******************************************************************************/

.GroupNote {

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


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

@media (max-width: 600px) {

    .GroupList {

        --CardMin  : 100%;
        --IconSize : 40px;

        padding : 0 12px;
    }

    .GroupCard {

        padding : 12px;
        gap     : 12px;
    }

    .GroupName { font-size : 16px; }
    .GroupGo   { display   : none; }
}


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

@media print {

    .GroupList {

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

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

    .GroupCard {

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

    .GroupGo { display : none; }
}