/* =================================================================
   NEWS-KOMPONENTEN CSS
   Spielmannszug Rhede 2025 - Moderne Nachrichtendarstellung
   ================================================================= */

/* === NEWS GRID === */
.news-grid {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
  }
  
  /* === NEWS CARDS === */
  .news-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    border: 1px solid var(--color-gray-100);
  }
  
  .news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
  }
  
  .news-card--featured {
    border: 2px solid var(--color-primary);
    position: relative;
  }
  
  .news-card--featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  }
  
  /* === NEWS CARD STRUCTURE === */
  .news-card__content-wrapper {
    display: flex;
    flex-direction: column;
  }
  
  @media (min-width: 768px) {
    .news-card__content-wrapper {
      display: block; /* Allows natural flow layout */
    }
  }
  
  /* === NEWS CARD HEADER === */
  .news-card__header {
    padding: var(--space-6) var(--space-6) 0;
  }
  
  .news-card__meta,
  .news-card__meta-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    align-items: center;
  }
  
  .news-card__date {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  
  /* === NEWS CARD BYLINE === */
  .news-card__byline {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
  }
  
  @media (min-width: 576px) {
    .news-card__byline {
      flex-direction: row;
      gap: var(--space-4);
      align-items: center;
    }
  }
  
  .news-card__published,
  .news-card__author {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: var(--font-medium);
  }
  
  .news-card__published i,
  .news-card__author i {
    color: var(--color-primary);
    font-size: var(--text-xs);
  }
  
  /* === NEWS CARD IMAGES === */
  .news-card__images {
    margin: var(--space-4) var(--space-6);
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
  }
  
  @media (min-width: 576px) {
    .news-card__images {
      grid-template-columns: 1fr 1fr;
    }
    
    /* Single image container on mobile/tablet - stays 1fr */
    .news-card__images--single {
      grid-template-columns: 1fr;
    }
  }
  
  @media (min-width: 768px) {
    .news-card__images {
      margin: var(--space-6) var(--space-8);
      grid-template-columns: 2fr 1fr; /* Only for multiple images */
      gap: var(--space-4);
    }
    
    /* Single image container - no empty space! */
    .news-card__images--single {
      grid-template-columns: 1fr; /* Only one column, no empty space */
      max-width: 500px; /* Reasonable max width */
    }
  }
  
  /* Single Image Layout */
  .news-card__image--single {
    grid-column: 1; /* Only takes first column */
  }
  
  .news-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-sm);
  }
  
  .news-card__image:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
  }
  
  @media (min-width: 768px) {
    .news-card__image--primary {
      height: 280px;
    }
    
    .news-card__image--secondary {
      height: 280px;
    }
    
    .news-card__image--single {
      height: 280px;
    }
  }
  
  /* === NEWS CARD CONTENT === */
  .news-card__content {
    padding: var(--space-6);
  }
  
  @media (min-width: 768px) {
    .news-card__content {
      padding: var(--space-6) var(--space-8) var(--space-8);
    }
  }
  
  .news-card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    line-height: var(--leading-tight);
  }
  
  .news-card--featured .news-card__title {
    font-size: var(--text-2xl);
  }
  
  .news-card__excerpt {
    color: var(--color-gray-700);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
  }
  
  .news-card__excerpt p {
    margin-bottom: var(--space-4);
  }
  
  .news-card__excerpt p:last-child {
    margin-bottom: 0;
  }
  
  /* === HIGHLIGHTS BOX === */
  .highlights-box {
    background: var(--color-primary-pale);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
  }
  
  .highlights-box h3 {
    color: var(--color-primary);
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  
  .highlights-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }
  
  @media (min-width: 576px) {
    .highlights-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .highlight-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-white);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid rgba(52, 98, 63, 0.2);
  }
  
  .highlight-item i {
    color: var(--color-primary);
    font-size: var(--text-lg);
    margin-top: 2px;
    flex-shrink: 0;
  }
  
  .highlight-item strong {
    color: var(--color-primary-dark);
  }
  
  /* === VORSTAND PREVIEW === */
  .vorstand-preview {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
  }
  
  .vorstand-preview h3 {
    color: var(--color-primary);
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  
  .vorstand-list {
    display: grid;
    gap: var(--space-3);
  }
  
  .vorstand-item {
    padding: var(--space-3);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
  }
  
  .vorstand-item strong {
    color: var(--color-primary-dark);
  }
  
  .vorstand-more {
    margin-top: var(--space-4);
    text-align: center;
  }
  
  /* === NEWS CARD FOOTER === */
  .news-card__footer {
    border-top: 1px solid var(--color-gray-100);
    padding-top: var(--space-4);
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  
  @media (min-width: 576px) {
    .news-card__footer {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  .news-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  
  .tag {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
  }
  
  .tag:hover {
    background: var(--color-primary-pale);
    color: var(--color-primary-dark);
  }
  
  .news-card__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  
  /* === ARCHIVE NAVIGATION === */
  .archive-navigation {
    margin-top: var(--space-16);
    text-align: center;
  }
  
  .archive-navigation h3 {
    color: var(--color-primary);
    font-size: var(--text-xl);
    margin-bottom: var(--space-8);
  }
  
  .archive-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .archive-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-decoration: none;
    transition: all var(--transition-fast);
    text-align: center;
  }
  
  .archive-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
  }
  
  .archive-card__year {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
  }
  
  .archive-card__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
  }
  
  .archive-card__count {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
  }
  
  .archive-card:hover .archive-card__year {
    color: var(--color-primary-dark);
  }
  
  .archive-card:hover .archive-card__title {
    color: var(--color-primary);
  }
  
  /* === RESPONSIVE DESIGN === */
  @media (min-width: 768px) {
    .news-card--featured .news-card__title {
      font-size: var(--text-3xl);
    }
    
    .highlights-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* === MOBILE SPECIFIC === */
  @media (max-width: 767px) {
    .news-card__images {
      margin: var(--space-4);
    }
    
    .news-card__content {
      padding: var(--space-4);
    }
  }

  /* =================================================================
   HOCHFORMAT-BILDER ERGÄNZUNG FÜR NEWS.CSS
   Optimierte Darstellung für Portrait-Format Bilder
   ================================================================= */

/* === PORTRAIT IMAGE CLASSES === */

/* Portrait Images - höhere Container für bessere Darstellung */
.news-card__image--portrait {
  width: 100%;
  height: 300px; /* Höher als standard (200px) */
  object-fit: cover;
  object-position: center center; /* Zentral positionieren */
  border-radius: var(--radius-lg);
  transition: transform var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.news-card__image--portrait:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

/* Portrait Single Image */
.news-card__image--portrait-single {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.news-card__image--portrait-single:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

/* Desktop Portrait Images - noch höhere Container */
@media (min-width: 768px) {
  .news-card__image--portrait {
    height: 400px; /* Deutlich höher für Desktop */
  }
  
  .news-card__image--portrait-single {
    height: 400px;
    max-width: 600px; /* Maximale Breite für Single Portrait */
    margin: 0 auto; /* Zentrieren */
  }
}

/* === PORTRAIT GRID LAYOUT === */

/* Spezielle Grid-Layouts für Portrait-Bilder */
.news-card__images--portrait {
  margin: var(--space-4) var(--space-6);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .news-card__images--portrait {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .news-card__images--portrait {
    margin: var(--space-6) var(--space-8);
    grid-template-columns: 1fr 1fr; /* Zwei Portrait-Bilder nebeneinander */
    gap: var(--space-4);
  }
  
  /* Single Portrait Image Container */
  .news-card__images--portrait-single {
    grid-template-columns: 1fr;
    max-width: 600px;
    justify-self: center;
  }
}

/* === MIXED LAYOUT === */
/* Für Kombination aus einem Portrait und einem Querformat */

.news-card__images--mixed {
  margin: var(--space-4) var(--space-6);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .news-card__images--mixed {
    margin: var(--space-6) var(--space-8);
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: center; /* Bilder vertikal zentrieren */
  }
}

/* Mixed Layout: Portrait als Primary */
.news-card__image--mixed-portrait {
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

/* Mixed Layout: Landscape als Secondary */
.news-card__image--mixed-landscape {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .news-card__image--mixed-portrait {
    height: 400px;
  }
  
  .news-card__image--mixed-landscape {
    height: 280px;
  }
}

/* === PORTRAIT TALL VARIANT === */
/* Für sehr hohe Bilder (z.B. 9:16 Format) */

.news-card__image--portrait-tall {
  width: 100%;
  height: 350px; /* Noch höher für sehr hohe Bilder */
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .news-card__image--portrait-tall {
    height: 450px;
    max-width: 500px;
    margin: 0 auto;
  }
}