/*
 * nabusocial.css - Frontend von CMS_NABUSOCIAL (Social-Media-Beitrag)
 *
 * Ablage: Site-CSS einbinden oder nach nabu2.css uebernehmen.
 * Vertrag: konzept_cms_nabusocial.md, Abschnitt 6 (CSS-Vertrag).
 *
 * Breite und Seitenverhaeltnis stehen NUR hier (je Dienst ueber die Klasse am figure). Das PHP setzt weder
 * --nsm-breite noch --nsm-ratio noch ein style-Attribut.
 *
 * Gestaltung (Farben, Abstaende, Schrift) ist frei aenderbar. Bestehen bleiben muessen die
 * Systemregeln, die unten mit "SYSTEMREGEL" markiert sind.
 */

/* ---------------------------------------------------------------- Farben (Gestaltung) */
/* Die Werte folgen den Variablen der Site (nabu2.css, auch im Dunkelmodus); der zweite Wert
   ist der neutrale Startwert, falls die Site-Variable fehlt. */
.nsm {
    --nsm-bg: var(--body-background, #e8eadf);
    --nsm-fg: var(--normal-text-color, #1d1d1b);
    --nsm-link: var(--text-highlight, #0e6bb1);
}

/* ---------------------------------------------------------------- Breite und Seitenverhaeltnis je Dienst */
/* Startwerte; nach dem Test auf dem Server anpassen.
   Mindestbreiten der Anbieter, die --nsm-breite nicht unterschreiten darf:
   Instagram 326 px, TikTok 325 px, X 250 px, Facebook 350 px. */
.nsm--facebook  { --nsm-breite: 25rem; --nsm-ratio: 0.58; }
.nsm--instagram { --nsm-breite: 25rem; --nsm-ratio: 0.58; }
.nsm--tiktok    { --nsm-breite: 25rem; --nsm-ratio: 0.58; }
.nsm--twitter   { --nsm-breite: 25rem; --nsm-ratio: 0.58; }



/* ---------------------------------------------------------------- Rahmen und Medium */
/* Kein eigener margin an der figure: Abstand und Rahmen kommen ueber "picture pictureAlignFull"
   aus nabu2.css (Uebergangsloesung bis zum Vereinsdesign). */

figure.nsm.nsm--facebook.picture.pictureAlignFull {
    max-width: var(--nsm-breite);
    margin-left: auto;
    margin-right: auto;
}

.nsm .nsm__frame {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--nsm-breite);
    margin: 0 auto;
}

/* SYSTEMREGEL: zwei Klassen schlagen "article iframe { width:100%; height:auto; aspect-ratio:683/440 }"
   aus nabu2.css. Keine feste Hoehe: sie ergibt sich aus der Breite und --nsm-ratio (Breite / Hoehe). */
.nsm .nsm__media {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--nsm-ratio);
    border: 0 !important;
}

/* Das Facebook-Plugin hat keinen eigenen Hintergrund, setzt aber immer dunkle Schrift. Ohne
   festen hellen Grund scheint im Dunkelmodus der Seitenhintergrund durch (dunkel auf dunkel),
   und beim Laden blitzt ein weisser Rahmen auf. */
.nsm--facebook .nsm__media {
    background: #fff;
    color-scheme: light;
}

/* Die Hoehe ist fest (Breite und --nsm-ratio); laengere Beitragstexte laufen unten weich aus statt hart
   abzubrechen. pointer-events: none laesst Klicks zum Beitrag durch. */
.nsm--facebook:not(.nsm--blocked) .nsm__frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3rem;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

/* ---------------------------------------------------------------- Hinweiskasten ohne Einwilligung */
/* SYSTEMREGEL: position: relative; kein overflow:hidden (der Kasten waechst mit langem Text mit). */
.nsm .nsm__notice {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: clamp(1rem, 4vw, 2rem);
    background: var(--nsm-bg);
    color: var(--nsm-fg);
    text-align: center;
}

.nsm .nsm__notice p {
    margin: 0.3rem 0;
}

.nsm .nsm__notice-icon {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.nsm .nsm__notice-title {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    color: inherit;
}

.nsm .nsm__notice-cats code {
    font-family: inherit;
    font-weight: bold;
}

.nsm .nsm__notice a {
    color: var(--nsm-link);
    text-decoration: underline;
}

.nsm .nsm__direct {
    margin-top: 0.8rem;
}

/* SYSTEMREGEL: sichtbarer Fokusrahmen */
.nsm .nsm__notice a:focus-visible,
.nsm .nsm__media:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* SYSTEMREGEL: [hidden]-Gegenregel (falls Elemente mit dem Attribut ein- und ausgeblendet werden) */
.nsm [hidden] {
    display: none;
}

/* ---------------------------------------------------------------- Untertitel und Quelle */
/* Bildunterschrift wie span.imageInfo, Quelle wie span.imageCopyright aus nabu2.css. */
.nsm .nsm__caption {
    box-sizing: border-box;
    max-width: var(--nsm-breite);
    margin: 0 auto;
    padding: 0.5rem;
    font-size: 0.7rem;
    font-weight: bold;
}

.nsm .nsm__copyright {
    display: block;
    margin: 0;
    padding: 0.25rem 0 0;
    font-weight: normal;
    font-style: italic;
    text-align: right;
}

/* ---------------------------------------------------------------- Druck */
/* SYSTEMREGEL: Beitraege werden nicht mitgedruckt (Untertitel und Quelle bleiben). */
@media print {
    .nsm .nsm__frame {
        display: none;
    }
}