/**
 * min_news - Detail Page Styles
 * News-Detailseiten (Einzelansicht)
 *
 * Verwendet:
 * - --mandant-* Tokens (mandant-spezifisches Theming)
 * - --min-* Tokens (System-Tokens aus min-templates.css)
 *
 * WCAG 2.2 AA konform
 * BEM Naming Convention
 *
 * @author LILY - CSS/Theme/Frontend Spezialistin
 * @copyright made in nature Projektagentur
 */

/* ============================================================================
   News Detail Container
   ============================================================================ */

.min-news-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--mandant-space-md, var(--min-space-4, 1.5rem));
}

/* ============================================================================
   Back Link
   ============================================================================ */

.min-news-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--mandant-space-md, var(--min-space-4, 1.5rem));
    font-size: 0.9375rem;
    color: var(--mandant-primary, var(--min-primary, #1a73e8));
    text-decoration: none;
    transition: color var(--mandant-transition, var(--min-transition-fast, 150ms ease));
}

.min-news-detail__back::before {
    content: "←";
    font-size: 1.25rem;
}

.min-news-detail__back:hover,
.min-news-detail__back:focus {
    color: var(--mandant-primary-hover, var(--min-primary-dark, #1557b0));
    text-decoration: underline;
}

.min-news-detail__back:focus-visible {
    outline: 2px solid var(--mandant-primary, var(--min-primary, #1a73e8));
    outline-offset: 2px;
}

/* ============================================================================
   Hero Image
   ============================================================================ */

.min-news-detail__hero {
    position: relative;
    width: 100%;
    max-height: 60vh;
    overflow: hidden;
    border-radius: var(--mandant-radius-lg, var(--min-border-radius, 0.375rem));
    margin-bottom: var(--mandant-space-lg, var(--min-space-5, 2rem));
    background: var(--mandant-muted, var(--min-bg-dark, #e0e0e0));
}

.min-news-detail__hero img {
    width: 100%;
    height: 100%;
    max-height: 60vh;
    object-fit: cover;
    display: block;
}

/* ============================================================================
   Header
   ============================================================================ */

.min-news-detail__header {
    margin-bottom: var(--mandant-space-lg, var(--min-space-5, 2rem));
}

.min-news-detail__title {
    margin: 0 0 var(--mandant-space-sm, var(--min-space-3, 1rem)) 0;
    font-family: var(--mandant-font-heading, var(--min-font-family, sans-serif));
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--mandant-text, var(--min-text-primary, #1e1e1e));
}

.min-news-detail__subtitle {
    margin: 0 0 var(--mandant-space-md, var(--min-space-4, 1.5rem)) 0;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--mandant-text-muted, var(--min-text-secondary, #4a4a4a));
}

/* ============================================================================
   Meta Information
   ============================================================================ */

.min-news-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mandant-space-sm, var(--min-space-3, 1rem));
    padding-bottom: var(--mandant-space-md, var(--min-space-4, 1.5rem));
    margin-bottom: var(--mandant-space-md, var(--min-space-4, 1.5rem));
    border-bottom: 2px solid var(--mandant-muted, var(--min-border-color, #dee2e6));
    font-size: 0.9375rem;
    color: var(--mandant-text-muted, var(--min-text-muted, #6b6b6b));
}

.min-news-detail__date,
.min-news-detail__author,
.min-news-detail__reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.min-news-detail__date::before {
    content: "📅";
}

.min-news-detail__author::before {
    content: "✍️";
}

.min-news-detail__reading-time::before {
    content: "⏱";
}

.min-news-detail__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.min-news-detail__category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mandant-bg, var(--min-text-light, #ffffff));
    background: var(--mandant-primary, var(--min-primary, #1a73e8));
    border-radius: var(--mandant-radius-sm, var(--min-border-radius, 0.375rem));
    text-decoration: none;
}

.min-news-detail__category:hover,
.min-news-detail__category:focus {
    background: var(--mandant-primary-hover, var(--min-primary-dark, #1557b0));
}

/* ============================================================================
   Body Content (Prose Typography)
   ============================================================================ */

.min-news-detail__body {
    font-family: var(--mandant-font-body, var(--min-font-family, sans-serif));
    font-size: var(--mandant-font-size-base, var(--min-font-size-base, 1rem));
    line-height: 1.75;
    color: var(--mandant-text, var(--min-text-primary, #1e1e1e));
    margin-bottom: var(--mandant-space-lg, var(--min-space-5, 2rem));
}

.min-news-detail__body > * + * {
    margin-top: 1.5em;
}

.min-news-detail__body h2,
.min-news-detail__body h3,
.min-news-detail__body h4 {
    font-family: var(--mandant-font-heading, var(--min-font-family, sans-serif));
    font-weight: 600;
    line-height: 1.3;
    color: var(--mandant-text, var(--min-text-primary, #1e1e1e));
    margin-top: 2em;
    margin-bottom: 0.75em;
}

.min-news-detail__body h2 {
    font-size: 1.875rem;
}

.min-news-detail__body h3 {
    font-size: 1.5rem;
}

.min-news-detail__body h4 {
    font-size: 1.25rem;
}

.min-news-detail__body p {
    margin: 0;
}

.min-news-detail__body a {
    color: var(--mandant-primary, var(--min-primary, #1a73e8));
    text-decoration: underline;
}

.min-news-detail__body a:hover,
.min-news-detail__body a:focus {
    color: var(--mandant-primary-hover, var(--min-primary-dark, #1557b0));
}

.min-news-detail__body ul,
.min-news-detail__body ol {
    padding-left: 1.5em;
}

.min-news-detail__body li + li {
    margin-top: 0.5em;
}

.min-news-detail__body blockquote {
    margin: 2em 0;
    padding-left: var(--mandant-space-md, var(--min-space-4, 1.5rem));
    border-left: 4px solid var(--mandant-primary, var(--min-primary, #1a73e8));
    font-style: italic;
    color: var(--mandant-text-muted, var(--min-text-secondary, #4a4a4a));
}

.min-news-detail__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mandant-radius-md, var(--min-border-radius, 0.375rem));
}

.min-news-detail__body figcaption {
    margin-top: 0.5em;
    font-size: 0.875rem;
    color: var(--mandant-text-muted, var(--min-text-muted, #6b6b6b));
    text-align: center;
}

/* ============================================================================
   Tags
   ============================================================================ */

.min-news-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: var(--mandant-space-md, var(--min-space-4, 1.5rem));
    margin-top: var(--mandant-space-md, var(--min-space-4, 1.5rem));
    border-top: 1px solid var(--mandant-muted, var(--min-border-color, #dee2e6));
}

.min-news-detail__tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--mandant-primary, var(--min-primary, #1a73e8));
    background: var(--mandant-bg-alt, var(--min-bg-light, #f8f9fa));
    border: 1px solid var(--mandant-muted, var(--min-border-color, #dee2e6));
    border-radius: var(--mandant-radius-sm, var(--min-border-radius, 0.375rem));
    text-decoration: none;
    transition: all var(--mandant-transition, var(--min-transition-fast, 150ms ease));
}

.min-news-detail__tag::before {
    content: "#";
}

.min-news-detail__tag:hover,
.min-news-detail__tag:focus {
    background: var(--mandant-primary, var(--min-primary, #1a73e8));
    color: var(--min-text-light, #ffffff);
    border-color: var(--mandant-primary, var(--min-primary, #1a73e8));
}

/* ============================================================================
   Related News
   ============================================================================ */

.min-news-detail__related {
    margin-top: var(--mandant-space-section, var(--min-space-7, 4rem));
    padding-top: var(--mandant-space-lg, var(--min-space-5, 2rem));
    border-top: 2px solid var(--mandant-muted, var(--min-border-color, #dee2e6));
}

.min-news-detail__related-title {
    margin: 0 0 var(--mandant-space-md, var(--min-space-4, 1.5rem)) 0;
    font-family: var(--mandant-font-heading, var(--min-font-family, sans-serif));
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mandant-text, var(--min-text-primary, #1e1e1e));
}

.min-news-detail__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--mandant-space-md, var(--min-space-4, 1.5rem));
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
    .min-news-detail__back,
    .min-news-detail__tags,
    .min-news-detail__related {
        display: none;
    }

    .min-news-detail {
        max-width: 100%;
    }

    .min-news-detail__hero {
        max-height: none;
        page-break-inside: avoid;
    }

    .min-news-detail__body {
        font-size: 12pt;
        line-height: 1.6;
    }

    .min-news-detail__body h2 {
        page-break-after: avoid;
    }
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .min-news-detail__back,
    .min-news-detail__category,
    .min-news-detail__tag {
        transition: none;
    }
}