/*
 * Blog-Metadaten: Autor (Icon oder Foto), Meta-Icons, Inhaltsverzeichnis-Button
 * ----------------------------------------------------------------------------
 * Ergänzt blog-styles.min.css. Wird in vyn-blog-functions.php über
 * blog_enqueue_assets() nach 'blog-styles' eingebunden.
 *
 * Die Umschaltung erfolgt im Customizer:
 *   Blog -> Card   -> "Darstellung des Autors"  (author_display_type)
 *   Blog -> Single -> "Darstellung des Autors"  (author_display_type_single)
 *
 * Das Foto stammt aus dem ACF-Benutzerfeld "user_bild".
 * Ist kein Bild gepflegt, wird automatisch auf das Icon zurückgefallen.
 */

/* ------------------------------------------------------------------
   0. Grösse der Meta-Icons
   ------------------------------------------------------------------
   blog-styles.min.css setzt für .post-card__meta svg / .search-page__meta svg
   nur margin und fill, aber keine Breite. Ohne Breite rendert ein Inline-SVG
   mit viewBox in seiner Standardgrösse (300x150px). Deshalb hier fixieren.
   ------------------------------------------------------------------ */

.post-card__meta svg,
.search-page__meta svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: -2px 2px 0 0;
}

.post-card__meta,
.search-page__meta {
    flex-wrap: wrap;
}

.post-card__meta a,
.search-page__meta a {
    color: inherit;
    text-underline-offset: 2px;
}

/* ------------------------------------------------------------------
   0b. Suchformular: Grösse der Lupe
   ------------------------------------------------------------------
   blog-styles.min.css setzt für .search-submit svg nur die Füllfarbe,
   keine Abmessungen – das Inline-SVG lief dadurch auf die volle Button-
   fläche von 50x50px auf. Hier auf ein sinnvolles Mass begrenzen.
   ------------------------------------------------------------------ */

.search-form label .search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.search-form label .search-submit svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   1. Karten (Übersicht, Kategorie, Autorenseite) und Suchergebnisse
   ------------------------------------------------------------------ */

.post-card__author,
.search-page__author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.post-card__author-media,
.search-page__author-media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
}

/* Icon-Modus in der Karte: SVG auf Textgrösse begrenzen */
.post-card__author-media svg,
.search-page__author-media svg {
    width: 18px;
    height: 18px;
    margin: 0;
}

.post-card__author-media svg path,
.search-page__author-media svg path {
    fill: var(--secondary, #666);
}

.post-card__author-media img {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    outline: 2px solid var(--secondary, #666);
    object-fit: cover;
    object-position: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}

/* In der Suchtrefferliste wird nie ein Autorenfoto ausgegeben (siehe
   template-parts/search/search.php, force_icon).
   Steht durch einen gecachten HTML-Schnappschuss trotzdem noch ein <img>
   im Markup, wird es ausgeblendet und das Benutzer-Icon per CSS-Maske
   nachgezeichnet – so erscheint nie ein defektes Bild und nie eine Lücke. */
.search-page__author-media img {
    display: none;
}

.search-page__author-media:has(img) {
    width: 18px;
    height: 18px;
    background-color: var(--secondary, #666);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z'/></svg>") center / contain no-repeat;
}

/* Etwas mehr Luft, wenn das Foto aktiv ist */
.post-card-item.author-style-photo .post-card__meta,
.search-page-item.author-style-photo .search-page__meta {
    row-gap: 10px;
}

/* ------------------------------------------------------------------
   2. Einzelbeitrag (single.php)
   ------------------------------------------------------------------ */

/* Icon-Modus: Basisdarstellung aus blog-styles.min.css bleibt gültig
   (.entry-author { grid-template-columns: 41px 1fr }, .entry-icon svg { 100% }).
   Der Autoren-Link darf das Icon nicht unterstreichen. */
.post-single-container .entry-meta .entry-author a.entry-icon {
    display: block;
    text-decoration: none;
    line-height: 0;
}

/* Foto-Modus: breitere erste Spalte für das runde Autorenbild */
.post-single-container .entry-meta.author-style-photo .entry-author {
    grid-template-columns: 76px 1fr;
}

.post-single-container .entry-meta.author-style-photo .entry-author .entry-bild {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-single-container .entry-meta.author-style-photo .entry-author .entry-bild img {
    display: block;
    width: 66px;
    height: 66px;
    border: 2px solid #fff;
    border-radius: 50%;
    outline: 2px solid var(--secondary, #666);
    object-fit: cover;
    object-position: center;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .15);
}

@media (min-width: 992px) {
    .post-single-container .entry-meta.author-style-photo .entry-author {
        grid-template-columns: 82px 1fr;
    }

    .post-single-container .entry-meta.author-style-photo .entry-author .entry-bild img {
        width: 72px;
        height: 72px;
    }
}

/* ------------------------------------------------------------------
   2b. Karte mit Autorenfoto und Meta über dem Titel
       -> Meta-Zeile liegt als Overlay auf dem Beitragsbild
   ------------------------------------------------------------------
   Massgeblich ist nicht die Customizer-Klasse, sondern die Position der
   Meta-Zeile im Markup: steht sie als erstes Kind in .post-card__content,
   liegt sie über dem Titel und wird als Overlay gerendert. Steht sie
   darunter (Layout "title-meta-text"), bleibt die Standarddarstellung.
   ------------------------------------------------------------------ */

.post-card-item.author-style-photo:has(.post-card__content > .post-card__meta:first-child) .post-card__thumbnail::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 45%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child {
    position: relative;
    z-index: 3;
    min-height: 68px;
    margin-top: -68px;
    margin-bottom: 7px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .75);
    transform: translate(0, -50px);
    display: grid;
    grid-template-columns: 68px repeat(3, max-content);
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 3px;
    width: max-content;
    max-width: 100%;
    font-size: 15px;
    line-height: 18px;
    align-content: center;
}

@media (min-width: 768px) {
    .post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child {
        transform: translate(-10px, -60px);
    }
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child a {
    color: #fff;
    text-decoration: none;
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child a:hover {
    text-decoration: underline;
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child svg {
    width: 15px;
    height: 15px;
    margin: 0;
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child svg path {
    fill: #fff;
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child .post-card__author {
    display: contents;
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child .post-card__author-media {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child .post-card__author-media img {
    width: 68px;
    height: 68px;
    border-color: #fff;
    outline: 2px solid var(--secondary, #666);
    text-shadow: none;
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child .author_name {
    grid-column: 2 / 5;
    grid-row: 1;
    align-self: end;
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child .post-card__date {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child .post-card__comments,
.post-card-item.author-style-photo .post-card__content > .post-card__meta:first-child .post-card__views {
    grid-row: 2;
    align-self: start;
}

/* ------------------------------------------------------------------
   2b2. Suchtrefferliste: Autor immer als Icon, nie als Foto
   ------------------------------------------------------------------ */

.search-page__author-media svg {
    width: 18px;
    height: 18px;
}

/* ------------------------------------------------------------------
   2b3. "Bearbeiten"-Link im Suchtreffer (nur für angemeldete Redakteure)
   ------------------------------------------------------------------
   Vorher lag hier .btn.btn-primary aus dem Haupt-Theme darauf. Dessen
   feste Breite und das per ::after eingefügte Icon haben den Text auf
   "ED" abgeschnitten. Deshalb ein eigenständiger, schlanker Link.
   ------------------------------------------------------------------ */

.search-page-item .edit-link {
    margin-top: 15px;
}

.search-page-item .edit-link .post-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    padding: 7px 14px;
    border: 1px solid var(--gray-500, #ccc);
    border-radius: 5px;
    background: transparent;
    color: var(--primary, #333);
    font-size: 13px;
    line-height: 16px;
    text-decoration: none;
    white-space: nowrap;
    overflow: visible;
    transition: background .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out;
}

.search-page-item .edit-link .post-edit-link svg {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 auto;
}

.search-page-item .edit-link .post-edit-link svg path {
    fill: currentColor;
    transition: fill .3s ease-in-out;
}

.search-page-item .edit-link .post-edit-link:hover {
    background: var(--secondary, #666);
    border-color: var(--secondary, #666);
    color: #fff;
}

/* ------------------------------------------------------------------
   2d. Autorenseite: Beitragsraster ab Desktop exakt dreispaltig
   ------------------------------------------------------------------
   Die Basisregel arbeitet mit repeat(auto-fill, minmax(400px, 1fr)) –
   je nach Containerbreite entstehen daraus 2 oder 4 Spalten. Auf der
   Autorenseite sollen es immer genau 3 sein.
   ------------------------------------------------------------------ */

@media (min-width: 992px) {
    .author-page .author-posts .post-card-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .author-page .author-posts .post-card-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------
   2c. Inhaltsverzeichnis-Button im Meta-Block des Einzelbeitrags
   ------------------------------------------------------------------ */

.post-single-container .entry-meta .inhaltsverzeichnis_block .inhaltsverzeichnis_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 18px;
    border: 0;
    border-radius: 5px;
    background: var(--gray-900, #333);
    font: inherit;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .3s ease-in-out;
}

.post-single-container .entry-meta .inhaltsverzeichnis_block .inhaltsverzeichnis_button:hover {
    background: var(--secondary, #666);
}

.post-single-container .entry-meta .inhaltsverzeichnis_block .inhaltsverzeichnis_button span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    white-space: nowrap;
}

.post-single-container .entry-meta .inhaltsverzeichnis_block .inhaltsverzeichnis_button span i {
    font-size: 11px;
    line-height: 1;
}

@media (min-width: 768px) {
    .post-single-container .entry-meta .inhaltsverzeichnis_block .inhaltsverzeichnis_button {
        width: auto;
        padding: 9px 16px;
    }

    .post-single-container .entry-meta .inhaltsverzeichnis_block .inhaltsverzeichnis_liste {
        width: 300px;
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------
   3. Hilfsklasse für Screenreader (falls im Theme noch nicht definiert)
   ------------------------------------------------------------------ */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}