/* =============================================================================
   co-social-feed :: Social Wall
   Hand-authored modern CSS. No build step needed.
   Uses CSS custom properties for easy themeing from the outside.
   ============================================================================= */

.co-socialwall {
    /* Alle Werte leiten sich aus den Bootstrap-Tokens des Hosts ab, mit
       neutralen Fallbacks fuer Projekte ohne Bootstrap. Dadurch uebernimmt die
       Wall Hausfarbe, Radius, Rahmenstaerke und Schrift automatisch, ohne dass
       hier je eine kundenspezifische Farbe steht. */
    --co-sw-gap: clamp(0.75rem, 2vw, 1.25rem);
    --co-sw-accent: var(--bs-primary, #1a1a1e);
    --co-sw-accent-fg: #fff;
    --co-sw-radius: var(--bs-border-radius, 1rem);
    --co-sw-border-width: var(--bs-border-width, 1px);
    --co-sw-card-bg: var(--bs-body-bg, #fff);
    --co-sw-card-fg: var(--bs-body-color, #1a1a1e);
    /* 62 Prozent statt 55: bei einer Textfarbe wie #292929 auf Weiss lag der
       alte Wert bei rund 3,5:1 und damit unter den 4,5:1 aus WCAG 1.4.3.
       Betroffen waren die Zahlen unter den Karten. */
    --co-sw-muted: color-mix(in oklab, var(--co-sw-card-fg) 78%, transparent);
    --co-sw-line: color-mix(in oklab, var(--co-sw-card-fg) 12%, transparent);
    --co-sw-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -12px rgba(0,0,0,0.10);
    --co-sw-shadow-hover: 0 4px 8px rgba(0,0,0,0.06), 0 20px 40px -14px rgba(0,0,0,0.16);
    --co-sw-brand-instagram: #E1306C;
    --co-sw-brand-facebook: #1877F2;

    /* Kein eigener Abstand nach oben und unten. Die Wall ist ein Inhaltselement
       und sitzt in TYPO3 immer in einem Rahmen, der seinen Abstand selbst
       mitbringt, bei co_theme ueber die Klassen pt-medium und pb-medium am
       Section-Container. Frueher standen hier bis zu 80px zusaetzlich,
       zusammen mit der Ueberschrift ergab das 126px Luft zwischen Titel und
       erster Karte. */
    padding-block: 0;
}

/* Kein prefers-color-scheme mehr: die Wall folgt dem Host, nicht dem
   Betriebssystem. Vorher wurden die Karten auf einer hellen Seite dunkel,
   sobald der Besucher den Dark Mode aktiviert hatte. Hat der Host selbst ein
   dunkles Theme, traegt er das ueber --bs-body-bg und --bs-body-color herein. */

/* ---------- Header --------------------------------------------------------- */

.co-socialwall__head {
    max-width: 60ch;
    margin: 0 0 2.5rem;
}

.co-socialwall__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.75rem;
}

.co-socialwall__headline {
    font-size: clamp(1.85rem, 3.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    line-height: 1.15;
}

.co-socialwall__lead {
    opacity: 0.85;
    p:last-child { margin-bottom: 0; }
}

/* ---------- Filter chips --------------------------------------------------- */

.co-socialwall__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

/* Aussehen der Hausbuttons: inaktiv wie btn-outline-primary, aktiv wie
   btn-primary. Radius und Rahmenstaerke kommen aus den Host-Tokens, damit die
   Chips neben den uebrigen Buttons der Seite nicht als Fremdkoerper stehen. */
.co-socialwall__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: var(--co-sw-border-width) solid var(--co-sw-accent);
    background: transparent;
    color: var(--co-sw-accent);
    border-radius: var(--co-sw-radius);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.co-socialwall__chip:hover {
    background: var(--co-sw-accent);
    color: var(--co-sw-accent-fg);
}

.co-socialwall__chip:focus-visible {
    outline: 2px solid var(--co-sw-accent);
    outline-offset: 2px;
}

.co-socialwall__chip.is-active {
    background: var(--co-sw-accent);
    color: var(--co-sw-accent-fg);
    border-color: var(--co-sw-accent);
}

.co-socialwall__chip-icon {
    display: inline-flex;
    align-items: center;
    width: 1em;
    height: 1em;
}

/* Die Netzwerkfarben lagen frueher auch auf den aktiven Chips. Damit standen
   drei verschiedene Buttonfarben nebeneinander und keine davon war die des
   Kunden. Die Markenfarbe bleibt auf dem kleinen Logo-Badge der Karte, wo sie
   der Wiedererkennung dient, die Bedienelemente folgen der Hausfarbe. */

/* ---------- Stage & tracks: layouts --------------------------------------- */

.co-socialwall__stage {
    position: relative;
}

/* Layout: WALL --------- 12-col grid, cards span 1 unit each */
/* Die Mindestbreite bestimmt indirekt die Spaltenzahl. 280px ergaben in einem
   1536px breiten Container fuenf Spalten; die Karten wurden dadurch schmaler
   als ein Instagram-Post hoch ist. 300px ergeben dort vier Spalten und in
   einem 960px-Container weiterhin drei. */
.co-socialwall--wall .co-socialwall__track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--co-sw-gap);
}

/* Layout: MASONRY --------- CSS multi-column, DOM order = sort order (posted_at DESC) */
.co-socialwall--masonry .co-socialwall__track {
    column-count: 1;
    column-gap: var(--co-sw-gap);
}
@media (min-width: 576px) { .co-socialwall--masonry .co-socialwall__track { column-count: 2; } }
@media (min-width: 992px) { .co-socialwall--masonry .co-socialwall__track { column-count: 3; } }
@media (min-width: 1400px) { .co-socialwall--masonry .co-socialwall__track { column-count: 4; } }
.co-socialwall--masonry .co-socialwall__card {
    break-inside: avoid;
    margin-bottom: var(--co-sw-gap);
    display: inline-block;
    width: 100%;
}

/* Layout: CAROUSEL --------- horizontal scroll-snap rail */
.co-socialwall--carousel .co-socialwall__stage { padding-block: 0.5rem; }
.co-socialwall--carousel .co-socialwall__track {
    display: flex;
    gap: var(--co-sw-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.5rem 0 1rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 1rem;
}
.co-socialwall--carousel .co-socialwall__track::-webkit-scrollbar { height: 6px; }
.co-socialwall--carousel .co-socialwall__track::-webkit-scrollbar-thumb { background: var(--co-sw-line); border-radius: 3px; }
.co-socialwall--carousel .co-socialwall__card {
    flex: 0 0 clamp(260px, 32vw, 360px);
    scroll-snap-align: start;
}

.co-socialwall__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: var(--co-sw-border-width) solid var(--co-sw-accent);
    background: var(--co-sw-card-bg);
    color: var(--co-sw-accent);
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: var(--co-sw-shadow);
    transform: translateY(-50%);
    transition: transform 0.2s ease, background 0.2s ease;
    display: none;
}
.co-socialwall--carousel .co-socialwall__nav { display: inline-flex; align-items: center; justify-content: center; }
.co-socialwall__nav--prev { left: -8px; }
.co-socialwall__nav--next { right: -8px; }
.co-socialwall__nav:hover { transform: translateY(-50%) scale(1.06); }
.co-socialwall__nav[disabled] { opacity: 0.4; cursor: default; }

/* ---------- Card ----------------------------------------------------------- */

.co-socialwall__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--co-sw-card-bg);
    color: var(--co-sw-card-fg);
    border: 1px solid var(--co-sw-line);
    border-radius: var(--co-sw-radius);
    overflow: hidden;
    box-shadow: var(--co-sw-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.4s ease;
    isolation: isolate;
}

.co-socialwall__card:hover {
    box-shadow: var(--co-sw-shadow-hover);
    transform: translateY(-2px);
}

.co-socialwall__card.is-filtered-out {
    display: none;
}

/* Reveal animation */
.co-socialwall--reveal .co-socialwall__card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
    transition-delay: calc(var(--co-sw-idx, 0) * 40ms);
}
.co-socialwall--reveal .co-socialwall__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .co-socialwall--reveal .co-socialwall__card { opacity: 1; transform: none; transition-delay: 0ms; }
    .co-socialwall__card:hover { transform: none; }
}

.co-socialwall__card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
}

.co-socialwall__avatar {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--co-sw-line);
    flex-shrink: 0;
}
.co-socialwall__avatar img { width: 100%; height: 100%; object-fit: cover; }
.co-socialwall__avatar--placeholder {
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--co-sw-muted);
    text-transform: uppercase;
    font-size: 1.1rem;
}

.co-socialwall__author {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.co-socialwall__author-name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.co-socialwall__author-handle {
    font-size: 0.8rem;
    /* Vorher opacity 0.6. Bei einer Textfarbe wie #292929 auf Weiss sind das
       rund 4,0:1 bei 12,8 px Schrift und damit unter den 4,5:1 aus WCAG 1.4.3.
       Ueber die gedaempfte Farbe sind es 7,1:1. */
    color: var(--co-sw-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-socialwall__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--co-sw-line);
    color: inherit;
    flex-shrink: 0;
}
.co-socialwall__card--instagram .co-socialwall__badge { background: var(--co-sw-brand-instagram); color: #fff; }
.co-socialwall__card--facebook  .co-socialwall__badge { background: var(--co-sw-brand-facebook); color: #fff; }

/* 4:5, nicht 4:3 und nicht quadratisch. Massgeblich ist, womit der Kunde
   postet: die Stadtwerke Gronau nutzen eine Instagram-Vorlage in 480x600,
   und 29 der 30 aktuell importierten Bilder liegen als 600x750 vor, also
   genau 4:5. In diesem Verhaeltnis wird nichts beschnitten. Andere Kunden
   mit quadratischen Vorlagen verlieren hier links und rechts je zehn
   Prozent; sollte das auftreten, gehoert das Verhaeltnis ins Element und
   nicht ins Stylesheet. */
.co-socialwall__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--co-sw-line);
}
.co-socialwall--masonry .co-socialwall__media {
    aspect-ratio: auto;
}
.co-socialwall__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.co-socialwall--masonry .co-socialwall__media-img {
    height: auto;
}
.co-socialwall__card:hover .co-socialwall__media-img { transform: scale(1.03); }
.co-socialwall__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    pointer-events: none;
}
.co-socialwall__media-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
}

.co-socialwall__text {
    padding: 0.75rem 1rem 0.5rem;
    font-size: 0.92rem;
    line-height: 1.5;
    p:last-child { margin-bottom: 0; }
}
.co-socialwall__card--media-text .co-socialwall__text { padding-top: 0.25rem; font-size: 1rem; }

.co-socialwall__card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem 1rem;
    gap: 0.75rem;
    margin-top: auto;
    font-size: 0.85rem;
}

.co-socialwall__metrics {
    display: inline-flex;
    gap: 0.75rem;
    color: var(--co-sw-muted);
}
.co-socialwall__metric {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Die Karte als Linkflaeche --------------------------------------
   Frueher stand im Fuss jeder Karte ein Textlink "Auf Instagram ansehen".
   Der Kunde wollte die Karte selbst klickbar haben. Umgesetzt mit einem
   einzigen Link, der die Karte per Absolutposition abdeckt: ein Link je
   Karte, kein JavaScript, kein role auf dem article.

   Der Fokusrahmen liegt innen (negativer Offset), weil die Karte
   overflow: hidden hat und ein aeusserer Rahmen abgeschnitten wuerde.
   Ohne ihn waere die Karte per Tastatur nicht erkennbar (WCAG 2.4.7). */
.co-socialwall__cardlink {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--co-sw-radius);
    text-decoration: none;
    color: inherit;
}
.co-socialwall__cardlink:focus-visible {
    outline: 2px solid var(--co-sw-accent);
    outline-offset: -4px;
}

/* Mehrbild-Beitraege behalten ihre Wischspur. Laege die Linkflaeche darueber,
   liesse sich die Galerie weder mit dem Finger noch mit der Maus bewegen. Auf
   diesen Karten ist alles ausser dem Bild der Link. */
.co-socialwall__media--gallery {
    z-index: 2;
}

.co-socialwall__empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--co-sw-muted);
    border: 1px dashed var(--co-sw-line);
    border-radius: var(--co-sw-radius);
}

/* ------------------------------------------------------------------
   Bildergalerie innerhalb einer Karte (mediaType carousel)
   Vorher wurden alle Bilder untereinander gestapelt und das Badge
   zeigte konstant "1/N". Jetzt eine echte Scroll-Snap-Spur.
   ------------------------------------------------------------------ */
.co-socialwall__media--gallery {
    position: relative;
}
.co-socialwall__gallery {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.co-socialwall__gallery::-webkit-scrollbar {
    display: none;
}
.co-socialwall__gallery:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}
.co-socialwall__gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    margin: 0;
    height: 100%;
}
.co-socialwall--masonry .co-socialwall__gallery-item {
    height: auto;
}

/* Sichtbar nur für Screenreader. Eigene Definition, damit die Extension
   nicht auf eine Klasse des Themes angewiesen ist. */
.co-socialwall .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.co-socialwall__filter-legend {
    font-size: 0.875rem;
    opacity: 0.75;
    align-self: center;
    margin-right: 0.25rem;
}
.co-socialwall__chip[aria-pressed="true"] {
    /* Zustand nicht nur über die Klasse is-active, damit er auch dann
       stimmt, wenn das JS noch nicht gelaufen ist. */
    font-weight: 600;
}