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

    Version : 1.0.0

    Karten-Raster mit Verweisen auf externe Seiten, auf denen ich als
    Sprecher gelistet bin. Jede Karte zeigt eine kleine Vorschau der
    Zielseite und oeffnet diese beim Klick in einem neuen Tab.

    Vorschau-Modi (pro Karte ueber data-mode):
        plain  - erzeugte Kachel (Initial + Domain), kein externer Request
        shot   - statischer Screenshot aus data-shot
        live   - verkleinerter Live-<iframe> der Zielseite

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


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

.TalkList {

    --Accent      : #FFC439;   /* brand gold                        */
    --AccentSoft  : #ffd15f;

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

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

    /* Geometrie der Vorschau */
    --PreviewH    : 200px;     /* Hoehe des Vorschaufensters        */
    --FrameScale  : .28;       /* kleiner = mehr Seite sichtbar     */
    --CardMin     : 300px;     /* Mindestbreite einer Karte         */
    --CardMax     : 1fr;       /* 1fr = Karten fuellen die Zeile    */

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


/******************************************************************************
    Ueberschrift des Blocks
******************************************************************************/

.TalkListTitle {

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


.TalkListLead {

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


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

.TalkGrid {

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


/* Einzelkarte je HTML-Widget: nimmt die volle Breite ein und zeigt die
   Zielseite dadurch fast in Originalgroesse. Mehrere solcher Bloecke
   stehen sauber untereinander. */
.TalkList.TalkSingle {

    --PreviewH   : 300px;
    --FrameScale : .78;    /* ~1280px virtuelle Breite bei 1000px Karte */

    margin : 22px auto;
}


/* Genau EINE Spalte - sonst legt auto-fill mehrere Spalten an und die
   einzelne Karte besetzt nur die erste davon. */
.TalkList.TalkSingle .TalkGrid {

    grid-template-columns : 1fr;
}


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

.TalkCard {

    display         : flex;
    flex-direction  : column;
    background      : var(--SurfaceAlt);
    border          : 1px solid var(--Line);
    border-radius   : 14px;
    overflow        : hidden;
    text-decoration : none;
    color           : inherit;
    box-shadow      : 0 8px 20px rgba(0,0,0,.35);
    transition      : transform .25s, box-shadow .25s, border-color .25s;
}


/* Das Widget wird auch innerhalb von .Article eingesetzt - dort setzt
   article.css eine goldene Unterlinie auf jedes <a>. Hier nicht. */
.TalkCard,
.Article .TalkCard {

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


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

    transform    : translateY(-4px);
    border-color : var(--Accent);
    box-shadow   : 0 12px 26px rgba(0,0,0,.45), 0 0 14px rgba(255,196,57,.20);
    outline      : none;
}


/******************************************************************************
    Browserleiste ueber der Vorschau
******************************************************************************/

.TalkChrome {

    display       : flex;
    align-items   : center;
    gap           : 8px;
    padding       : 8px 12px;
    background    : #2f3135;
    border-bottom : 1px solid rgba(255,255,255,.08);
}


.TalkDots {

    display : flex;
    gap     : 5px;
    flex    : 0 0 auto;
}


.TalkDot {

    width         : 9px;
    height        : 9px;
    border-radius : 50%;
    background    : #5a5f65;
}


.TalkCard:hover .TalkDot:nth-child(1) { background : #ff5f57; }
.TalkCard:hover .TalkDot:nth-child(2) { background : #febc2e; }
.TalkCard:hover .TalkDot:nth-child(3) { background : #28c840; }


.TalkUrl {

    flex          : 1 1 auto;
    min-width     : 0;
    padding       : 3px 10px;
    background    : #3c3f43;
    border-radius : 20px;
    font-size     : 11px;
    color         : var(--TextMuted);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}


/******************************************************************************
    Vorschau-Flaeche
******************************************************************************/

.TalkPreview {

    position   : relative;
    height     : var(--PreviewH);
    overflow   : hidden;
    background : var(--SurfaceAlt2);
}


/* Faengt alle Klicks ab, damit nicht die eingebettete Seite reagiert,
   sondern immer der umgebende Link. Liegt ueber iframe / Bild / Kachel. */
.TalkShield {

    position   : absolute;
    inset      : 0;
    z-index    : 3;
    background : linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35));
    transition : background .25s;
}


.TalkCard:hover .TalkShield {

    background : linear-gradient(180deg, rgba(255,196,57,.06) 0%, rgba(0,0,0,.45));
}


/* --- Modus "live": verkleinerter iframe -----------------------------------
   Breite/Hoehe werden aus dem Massstab zurueckgerechnet, damit der
   verkleinerte iframe das Vorschaufenster exakt ausfuellt - unabhaengig
   von der Kartenbreite. Die virtuelle Browserbreite der Zielseite ist
   damit  Kartenbreite / --FrameScale  (bei .78 und 1000px rund 1280px).
-------------------------------------------------------------------------- */

.TalkFrame {

    position         : absolute;
    top              : 0;
    left             : 0;
    width            : calc(100% / var(--FrameScale));
    height           : calc(var(--PreviewH) / var(--FrameScale));
    border           : 0;
    transform        : scale(var(--FrameScale));
    transform-origin : 0 0;
    z-index          : 1;
    pointer-events   : none;
    background       : #ffffff;
}


/* --- Modus "shot": statischer Screenshot --------------------------------- */

.TalkShot {

    position   : absolute;
    inset      : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    object-position : top center;
    z-index    : 1;
    display    : block;
    transition : transform .35s;
}


.TalkCard:hover .TalkShot {

    transform : scale(1.04);
}


/* --- Modus "plain": erzeugte Kachel -------------------------------------- */

.TalkFallback {

    position        : absolute;
    inset           : 0;
    z-index         : 1;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    background      :
        radial-gradient(circle at 30% 20%, rgba(255,196,57,.18), transparent 60%),
        linear-gradient(160deg, #4a4f56 0%, #34373b 100%);
}


.TalkInitial {

    font-size      : 46px;
    font-weight    : 700;
    line-height    : 1;
    color          : var(--Accent);
    text-shadow    : 0 4px 12px rgba(0,0,0,.45);
    letter-spacing : 1px;
}


.TalkHost {

    font-size      : 13px;
    color          : var(--TextMuted);
    letter-spacing : .4px;
}


/******************************************************************************
    Badge (optional, z. B. "Konferenz", "Podcast", "2026")
******************************************************************************/

/* Unten links, damit der Kopfbereich der eingebetteten Seite frei bleibt. */
.TalkBadge {

    position      : absolute;
    bottom        : 10px;
    left          : 10px;
    z-index       : 4;
    padding       : 3px 10px;
    border-radius : 20px;
    background    : rgba(60,63,67,.88);
    border        : 1px solid var(--Accent);
    color         : var(--Accent);
    font-size     : 11px;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    backdrop-filter : blur(4px);
}


/******************************************************************************
    Textteil der Karte
******************************************************************************/

.TalkBody {

    display        : flex;
    flex-direction : column;
    gap            : 6px;
    padding        : 16px 18px 14px;
    flex           : 1 1 auto;
}


.TalkTitle {

    font-size   : 17px;
    font-weight : 600;
    line-height : 1.35;
    color       : var(--Heading);
}


.TalkCard:hover .TalkTitle {

    color : var(--Accent);
}


.TalkText {

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


.TalkText:empty {

    display : none;
}


/******************************************************************************
    Fusszeile der Karte
******************************************************************************/

.TalkFoot {

    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 10px;
    margin-top      : auto;
    padding         : 12px 18px;
    border-top      : 1px solid rgba(255,255,255,.08);
    background      : rgba(0,0,0,.12);
    font-size       : 13px;
}


.TalkDomain {

    color         : var(--TextMuted);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}


.TalkDomain:empty {

    display : none;
}


.TalkOpen {

    flex        : 0 0 auto;
    color       : var(--Accent);
    font-weight : 600;
    white-space : nowrap;
    transition  : transform .25s;
}


.TalkCard:hover .TalkOpen {

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


/******************************************************************************
    Variante: breite Karte (hervorgehobener Auftritt)
******************************************************************************/

.TalkCard.TalkWide {

    grid-column : span 2;
}


@media (max-width: 700px) {

    .TalkCard.TalkWide {

        grid-column : span 1;
    }
}


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

@media (max-width: 620px) {

    .TalkList {

        --CardMin    : 100%;
        --FrameScale : .4;
    }

    .TalkList.TalkSingle {

        --PreviewH   : 200px;
        --FrameScale : .45;
    }
}


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

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

    .TalkCard,
    .TalkShot,
    .TalkOpen {

        transition : none;
    }

    .TalkCard:hover {

        transform : none;
    }

    .TalkCard:hover .TalkShot {

        transform : none;
    }
}


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

@media print {

    .TalkList {

        color : #222;
    }

    .TalkListTitle {

        color : #111;
    }

    .TalkCard {

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

    .TalkTitle {

        color : #111;
    }

    .TalkChrome,
    .TalkShield {

        display : none;
    }
}