/*
 * File: wp-content/themes/fanclub-base/assets/css/blog.css
 * Blog-Styles (CPT fc_blog): Kacheln (Onepage-Section + Übersicht),
 * Einzelansicht, Kategorie-Chips. Farb-Tokens aus base.css.
 * Enqueue in functions.php (Onepage, single-fc_blog, archive-fc_blog).
 */

/* ── KACHEL-GRID ─────────────────────────────────────────────────────────── */
.fc-bericht-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* stabil 3 Spalten ab ~1100px Fenster */
    gap:                   40px 28px; /* Luft für die verdrehten Kacheln */
}
/* Übersicht /blog/: gleiche Breite wie die Onepage-Section (nav-shell deckelt sonst auf 1040) */
#fc-main > main.fc-bericht-archive { max-width: 1400px; }
/* Headline sitzt IM Container — Seitenabstand kommt von .fc-container, nicht doppelt */
.fc-bericht-archive .fc-page-title { padding-inline: 0; }
@media (max-width: 1024px) { .fc-bericht-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .fc-bericht-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ── KACHEL (Street Style: verdreht, schräge Kanten, Slap-Tag) ──────────── */
.fc-bericht-card {
    position:        relative; /* Anker für „mehr…"-Knick in allen Stilen */
    display:         flex;
    flex-direction:  column;
    gap:             10px;
    text-decoration: none;
    text-align:      left;
    transition:      transform 0.3s ease;
}
/* Jede Kachel kippt leicht anders — beim Hover richtet sie sich auf */
.fc-bericht-grid .fc-bericht-card:nth-child(odd)  { transform: rotate(-1.2deg); }
.fc-bericht-grid .fc-bericht-card:nth-child(even) { transform: rotate(1deg); }
@media (hover: hover) {
    .fc-bericht-grid .fc-bericht-card:hover { transform: rotate(0deg) scale(1.02); }
}

/* Media-Zone: Basis für beide Stile */
.fc-bericht-card__media {
    position: relative;
    display:  block;
}
.fc-bericht-card__frame {
    position:     relative;
    z-index:      1; /* über Kontur + Schatten */
    display:      block;
    aspect-ratio: 3 / 2;
    overflow:     hidden;
    background:   var(--fc-surface-2);
}

/* ═══ STIL „SLAP-TAG" (Backend: Fanclub → Kachel-Design) ═════════════════
   Schräge Bildkanten, Kontur (--fcb-kontur) + Versatz-Schatten (--fcb-schatten) */
.fc-bericht-grid--tag .fc-bericht-card__media::before,
.fc-bericht-grid--tag .fc-bericht-card__media::after {
    content:   '';
    position:  absolute;
    inset:     -6px;
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}
.fc-bericht-grid--tag .fc-bericht-card__media::before { /* Versatz-Schatten */
    background: var(--fcb-schatten, var(--fc-accent));
    transform:  translate(9px, 11px);
}
.fc-bericht-grid--tag .fc-bericht-card__media::after { /* Kontur */
    background: var(--fcb-kontur, var(--fc-color-white));
}
.fc-bericht-grid--tag .fc-bericht-card__frame {
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}
.fc-bericht-grid--tag .fc-bericht-card:nth-child(even) .fc-bericht-card__frame,
.fc-bericht-grid--tag .fc-bericht-card:nth-child(even) .fc-bericht-card__media::before,
.fc-bericht-grid--tag .fc-bericht-card:nth-child(even) .fc-bericht-card__media::after {
    clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
}
/* Schatten wirft bei jeder zweiten Kachel in die andere Richtung */
.fc-bericht-grid--tag .fc-bericht-card:nth-child(even) .fc-bericht-card__media::before {
    transform: translate(-9px, 11px);
}
/* Knick-Ecke oben rechts */
.fc-bericht-grid--tag .fc-bericht-card__frame::after {
    content:      '';
    position:     absolute;
    top:          0;
    right:        0;
    border-style: solid;
    border-width: 0 26px 26px 0;
    border-color: transparent var(--fc-color-grey-100) transparent transparent;
}

/* ═══ STIL „STICKER" (wie die Marker auf der Mitglieder-Karte) ═══════════
   Rand (--fcb-rand) rundherum um die GANZE Kachel, hand-cut Form,
   dunkle Innenfläche, Versatz-Schatten (--fcb-schatten), Knick unten rechts */
.fc-bericht-grid--sticker .fc-bericht-card {
    position: relative;
    padding:  24px 24px 106px; /* Inhalt klebt nicht am Rand · unten Platz für „mehr…" + Knick */
}
.fc-bericht-grid--sticker .fc-bericht-card::before { /* Rand = Grundfläche + Schatten */
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--fcb-rand, var(--fc-color-white));
    clip-path:  polygon(1.5% 1%, 98.5% 0, 100% 99%, 0.5% 100%);
    filter:     drop-shadow(9px 11px 0 var(--fcb-schatten, var(--fc-accent)));
}
.fc-bericht-grid--sticker .fc-bericht-card:nth-child(even)::before {
    filter: drop-shadow(-9px 11px 0 var(--fcb-schatten, var(--fc-accent)));
}
.fc-bericht-grid--sticker .fc-bericht-card::after { /* dunkle Innenfläche */
    content:    '';
    position:   absolute;
    inset:      7px;
    background: var(--fc-color-grey-950);
    clip-path:  polygon(1.5% 1%, 98.5% 0, 100% 99%, 0.5% 100%);
}
.fc-bericht-grid--sticker .fc-bericht-card > *:not(.fc-bericht-card__fold):not(.fc-bericht-card__date):not(.fc-bericht-card__corner) {
    position: relative;
    z-index:  1; /* Inhalt über Rand/Innenfläche — „mehr…", Datum + Knick bleiben absolut im Eck */
}

/* ── „mehr…" (rechts, auf Datum-Höhe) + Knick (fest im Eck) — alle Stile ── */
.fc-bericht-card__fold {
    position: absolute;
    right:    6px;
    bottom:   30px; /* gleiche Höhe wie das Datum links */
    z-index:  2;
}
.fc-bericht-card__fold::before {
    content:     'mehr…';
    font-family: 'Sedgwick Ave Display', cursive;
    font-size:   26px;
    line-height: 1;
    color:       var(--fcb-kontur, var(--fc-color-white));
}
/* Knick-Dreieck — klebt IMMER im Eck unten rechts, wandert nicht mit */
.fc-bericht-card__corner {
    position:     absolute;
    right:        0;
    bottom:       0;
    z-index:      2;
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent var(--fcb-kontur, var(--fc-color-white)) transparent;
}
/* SLAP-TAG: Kachel reserviert unten Platz für Datum/„mehr…" + Knick */
.fc-bericht-grid--tag .fc-bericht-card { padding-bottom: 86px; }
/* STICKER/DIE-CUT: „mehr…" innerhalb des Rands, Knick auf der Rand-Ecke */
.fc-bericht-grid--sticker .fc-bericht-card__fold   { right: 12px; bottom: 44px; }
.fc-bericht-grid--diecut  .fc-bericht-card__fold   { right: 16px; bottom: 48px; }
/* Ecken sitzen auf der SCHRÄGEN Randkante (Polygon läuft rechts unten hoch) */
.fc-bericht-grid--sticker .fc-bericht-card__corner { right: 4px; bottom: 12px; }
.fc-bericht-grid--diecut  .fc-bericht-card__corner { right: 8px; bottom: 22px; }

/* ═══ STIL „DIE-CUT" (wie der Karten-Marker, „falsch ausgeschnitten") ════
   Viele schiefe Schnittkanten, dicker Rand (--fcb-rand),
   „mehr…" neben der Knick-Ecke unten rechts */
.fc-bericht-grid--diecut .fc-bericht-card {
    position: relative;
    padding:  28px 28px 114px; /* Inhalt klebt nicht am Rand · unten Platz für „mehr…" + Knick */
}
.fc-bericht-grid--diecut .fc-bericht-card::before { /* dicker Rand = Grundfläche + Schatten */
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--fcb-rand, var(--fc-color-white));
    clip-path:  polygon(2% 1.5%, 30% 0, 68% 1.8%, 98% 0.5%, 100% 30%, 98.4% 65%, 100% 97%, 70% 99%, 35% 100%, 2% 98.5%, 0 60%, 1.4% 25%);
    filter:     drop-shadow(9px 11px 0 var(--fcb-schatten, var(--fc-accent)));
}
.fc-bericht-grid--diecut .fc-bericht-card:nth-child(even)::before {
    filter: drop-shadow(-9px 11px 0 var(--fcb-schatten, var(--fc-accent)));
}
.fc-bericht-grid--diecut .fc-bericht-card::after { /* dunkle Innenfläche, Rand ~12px */
    content:    '';
    position:   absolute;
    inset:      12px;
    background: var(--fc-color-grey-950);
    clip-path:  polygon(2% 1.5%, 30% 0, 68% 1.8%, 98% 0.5%, 100% 30%, 98.4% 65%, 100% 97%, 70% 99%, 35% 100%, 2% 98.5%, 0 60%, 1.4% 25%);
}
.fc-bericht-grid--diecut .fc-bericht-card > *:not(.fc-bericht-card__fold):not(.fc-bericht-card__date):not(.fc-bericht-card__corner) {
    position: relative;
    z-index:  1; /* „mehr…", Datum + Knick bleiben absolut im Eck */
}
.fc-bericht-card__frame img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
@media (hover: hover) {
    .fc-bericht-card:hover .fc-bericht-card__frame img { transform: scale(1.05) rotate(-1deg); }
}

/* Kategorie als gelber Slap-Tag über der Bildkante */
.fc-bericht-card__tag {
    position:         absolute;
    left:             -8px;
    bottom:           -10px; /* liegt über der Bild-Schnittkante und kaschiert sie */
    z-index:          2;
    background:       var(--fc-accent);
    color:            var(--fc-color-black);
    font-family:      'Barlow Condensed', sans-serif;
    font-weight:      800;
    font-style:       italic;
    font-size:        15px;
    letter-spacing:   0.08em;
    text-transform:   uppercase;
    padding:          6px 14px;
    transform:        rotate(-4deg);
    transform-origin: left bottom;
    transition:       transform 0.25s ease;
}
.fc-bericht-card:hover .fc-bericht-card__tag { transform: rotate(-7deg); }

/* Fallback ohne Titelbild: dunkle Fläche mit Sticker-Schriftzug */
.fc-bericht-card__fallback {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     'Sedgwick Ave Display', cursive;
    font-size:       clamp(28px, 3vw, 42px);
    color:           var(--fc-accent);
    transform:       rotate(-8deg);
    transition:      transform 0.35s ease;
}
@media (hover: hover) {
    .fc-bericht-card:hover .fc-bericht-card__fallback { transform: rotate(-8deg) scale(1.08); }
}

/* Headline-Duo wie FAQ: kleine weiße H2 sitzt schräg fast auf der H1 */
.fc-bericht-card__head {
    display:        flex;
    flex-direction: column;
    margin-top:     28px; /* Luft zum überhängenden Kategorie-Tag — Vorschautext rückt mit */
}
.fc-bericht-card__intro {
    position:         relative;
    z-index:          1;
    font-family:      'Sedgwick Ave Display', cursive;
    font-weight:      400;
    font-size:        20px;
    line-height:      1.3;
    color:            var(--fc-color-white);
    text-transform:   uppercase;
    transform:        rotate(-2deg);
    transform-origin: left bottom;
    margin-bottom:    -10px; /* liegt fast auf der H1 (FAQ-Optik) */
}

/* „…" automatisch: H2 endet damit, H1 beginnt damit (nicht mittippen!) */
.fc-bericht-card__intro::after,
.fc-bericht-head__intro::after,
.fc-bericht-content h2::after  { content: '\2026'; }
.fc-bericht-card__title::before,
.fc-bericht-head__title::before,
.fc-bericht-content h1::before { content: '\2026'; }

/* Datum unten links im Eck — auf Höhe von „mehr…" */
.fc-bericht-card > .fc-bericht-card__date {
    position: absolute;
    left:     0;
    bottom:   33px;
    z-index:  2;
}
.fc-bericht-grid--sticker .fc-bericht-card > .fc-bericht-card__date { left: 24px; bottom: 47px; }
.fc-bericht-grid--diecut  .fc-bericht-card > .fc-bericht-card__date { left: 28px; bottom: 51px; }

/* Kategorie-Textlabel — nur noch in der Einzelansicht (Kachel nutzt den Slap-Tag) */
.fc-bericht-card__cat {
    font-family:    'Barlow Condensed', sans-serif;
    font-weight:    700;
    font-size:      15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--fc-accent);
}
/* Datum in Handschrift */
.fc-bericht-card__date {
    font-family:    'Sedgwick Ave Display', cursive;
    font-weight:    400;
    font-size:      18px;
    line-height:    1; /* exakt gleiche Grundlinie wie „mehr…" */
    letter-spacing: 0.04em;
    color:          var(--fc-text-muted);
}

.fc-bericht-card__title {
    font-family:    'Barlow Condensed', sans-serif;
    font-weight:    900;
    font-style:     italic;
    font-size:      clamp(28px, 2.4vw, 36px);
    line-height:    1.05;
    text-transform: uppercase;
    color:          var(--fcb-h1, var(--fc-text)); /* H1-Farbe aus Fanclub → Kachel-Design */
    transition:     opacity 0.2s ease;
}
.fc-bericht-card:hover .fc-bericht-card__title { opacity: 0.8; }

.fc-bericht-card__excerpt {
    font-family:        'Barlow Condensed', sans-serif;
    font-weight:        400;
    font-size:          17px;
    line-height:        1.45;
    color:              var(--fc-color-white);
    /* fest 3 Zeilen Vorschau, unabhängig von der Kachelbreite */
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* ── KATEGORIE-CHIPS (Übersicht) ─────────────────────────────────────────── */
.fc-bericht-filter {
    display:       flex;
    flex-wrap:     wrap;
    gap:           10px;
    margin-bottom: 40px;
}
.fc-bericht-filter__chip {
    font-family:     'Barlow Condensed', sans-serif;
    font-weight:     700;
    font-size:       14px;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    color:           var(--fc-text-muted);
    border:          1px solid var(--fc-border);
    padding:         7px 16px;
    text-decoration: none;
    transition:      border-color 0.2s, color 0.2s;
}
.fc-bericht-filter__chip:hover { border-color: var(--fc-accent); color: var(--fc-accent); }
.fc-bericht-filter__chip.is-active {
    background:   var(--fc-accent);
    border-color: var(--fc-accent);
    color:        var(--fc-color-black);
}

/* ── SEITENNAVIGATION (Übersicht) ────────────────────────────────────────── */
.fc-bericht-pagination { margin-top: 56px; }
.fc-bericht-pagination .nav-links {
    display:         flex;
    justify-content: center;
    gap:             8px;
}
.fc-bericht-pagination .page-numbers {
    font-family:     'Barlow Condensed', sans-serif;
    font-weight:     700;
    font-size:       16px;
    letter-spacing:  0.08em;
    color:           var(--fc-text-muted);
    border:          1px solid var(--fc-border);
    padding:         6px 14px;
    text-decoration: none;
    transition:      border-color 0.2s, color 0.2s;
}
.fc-bericht-pagination .page-numbers:hover { border-color: var(--fc-accent); color: var(--fc-accent); }
.fc-bericht-pagination .page-numbers.current {
    background:   var(--fc-accent);
    border-color: var(--fc-accent);
    color:        var(--fc-color-black);
}

/* ── EINZELANSICHT ───────────────────────────────────────────────────────── */

/* Kopf = FAQ-Duo: kleine weiße Headline (Sedgwick, leicht gedreht) über der
   grossen gelben Headline (Barlow 700 = WP-Titel) */
.fc-bericht-head { padding: 48px 0 8px; }
.fc-bericht-head__intro {
    position:         relative;
    z-index:          1;
    display:          block;
    font-family:      'Sedgwick Ave Display', cursive;
    font-weight:      400;
    font-size:        clamp(20px, 2vw, 30px);
    line-height:      1.3;
    color:            var(--fc-color-white);
    text-transform:   uppercase;
    transform:        rotate(-2deg);
    transform-origin: left bottom;
    margin-bottom:    -20px; /* liegt fast auf der H1 (FAQ-Optik) */
}
.fc-bericht-head__title {
    font-family:    'Barlow Condensed', sans-serif;
    font-weight:    700;
    font-style:     normal;
    font-size:      clamp(48px, 6vw, 90px);
    line-height:    1;
    color:          var(--fcb-h1, var(--fc-accent)); /* Farbe aus Fanclub → Kachel-Design */
    text-transform: uppercase;
    margin:         0 0 16px;
}
@media (max-width: 1024px) {
    .fc-bericht-head { padding-top: 90px; } /* Diagonale der mobilen Nav-Leiste (wie .fc-page-title) */
}

.fc-bericht-single__meta {
    display:     flex;
    align-items: baseline;
    gap:         14px;
    flex-wrap:   wrap;
    margin:      -4px 0 32px;
}
.fc-bericht-single__meta .fc-bericht-card__date { font-size: 16px; }
.fc-bericht-single__meta .fc-bericht-card__cat  { font-size: 16px; }

/* Titelbild im Bericht: Bild selbst die-cut geschnitten (schiefe Schnittkanten,
   kein farbiger Rand — helle Fotos wirken wie mit der Schere ausgeschnitten) */
.fc-bericht-single__image { margin-bottom: 48px; }
.fc-bericht-single__image img {
    display:   block;
    width:     100%;
    height:    auto;
    clip-path: polygon(2% 1.5%, 30% 0, 68% 1.8%, 98% 0.5%, 100% 30%, 98.4% 65%, 100% 97%, 70% 99%, 35% 100%, 2% 98.5%, 0 60%, 1.4% 25%);
}

.fc-bericht-content {
    font-family:   'Barlow Condensed', sans-serif;
    font-weight:   400;
    font-size:     22px;
    line-height:   1.6;
    color:         var(--fc-text);
    max-width:     820px;
    margin-inline: auto; /* mittig unter dem vollbreiten Titelbild */
}
.fc-bericht-content p     { margin: 0 0 1.2em; }
.fc-bericht-content a     { color: var(--fc-accent); text-decoration: none; }
.fc-bericht-content a:hover { text-decoration: underline; }
/* Headline-Duo wie FAQ-Karten (cua.php):
   H2 = weiße Einleitung (Sedgwick, klein, leicht gedreht) direkt über
   H1 = gelbem Stichwort (Barlow 700, groß) */
.fc-bericht-content h2 {
    position:         relative;
    z-index:          1;
    font-family:      'Sedgwick Ave Display', cursive;
    font-weight:      400;
    font-style:       normal;
    font-size:        clamp(18px, 1.6vw, 24px);
    line-height:      1.3;
    color:            var(--fc-color-white);
    text-transform:   uppercase;
    transform:        rotate(-2deg);
    transform-origin: left bottom;
    margin:           2em 0 0;
}
.fc-bericht-content h1 {
    font-family:    'Barlow Condensed', sans-serif;
    font-weight:    700;
    font-style:     normal;
    font-size:      clamp(34px, 4vw, 60px);
    line-height:    1;
    color:          var(--fcb-h1, var(--fc-accent)); /* Farbe aus Fanclub → Kachel-Design */
    text-transform: uppercase;
    margin:         1.5em 0 0.4em;
}
.fc-bericht-content h2 + h1 { margin-top: -8px; } /* Duo: Einleitung liegt fast auf dem Stichwort */
.fc-bericht-content h3,
.fc-bericht-content h4 {
    font-weight:    700;
    font-style:     italic;
    text-transform: uppercase;
    font-size:      clamp(18px, 1.8vw, 22px);
    line-height:    1.2;
    color:          var(--fc-text-muted);
    margin:         1.3em 0 0.4em;
}
.fc-bericht-content ul,
.fc-bericht-content ol   { margin: 0 0 1.2em; padding-left: 1.4em; }
.fc-bericht-content li   { margin-bottom: 0.4em; }
.fc-bericht-content blockquote {
    margin:      0 0 1.2em;
    padding:     4px 0 4px 20px;
    border-left: 3px solid var(--fc-accent);
    color:       var(--fc-text-muted);
    font-style:  italic;
}
.fc-bericht-content img {
    max-width: 100%;
    height:    auto;
}
.fc-bericht-content strong { font-weight: 700; }

.fc-bericht-back {
    display:         inline-block;
    margin-top:      48px;
    font-family:     'Barlow Condensed', sans-serif;
    font-weight:     700;
    font-size:       15px;
    letter-spacing:  0.14em;
    text-transform:  uppercase;
    color:           var(--fc-accent);
    text-decoration: none;
    transition:      opacity 0.2s;
}
.fc-bericht-back:hover { opacity: 0.75; }