// ==========================================================================
// News Extension Styles
//
// OVERRIDE PATTERN:
// This block customizes child components via descendant selectors.
// Never create component modifiers for block-specific styling.
//
// ✓  .b-testimonials .c-card { ... }
// ✗  .c-card--testimonial { ... }
// ==========================================================================

// --------------------------------------------------------------------------
// News List (.b-news-list)
// --------------------------------------------------------------------------

.b-news-list {
  padding-bottom: $block-spacing-md;

  &__empty {
    text-align: center;
    padding: $block-spacing-sm 0;
    color: $black-50;
  }

  &__pagination {
    margin-top: $block-spacing-sm;
  }
}

// --------------------------------------------------------------------------
// News Categories (shared)
// --------------------------------------------------------------------------

.b-news__categories {
  display: inline-flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.b-news__category {
  background: $primary-15;
  color: $primary;
  font-size: $font-size-xs;
  font-weight: $font-weight-semibold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

// --------------------------------------------------------------------------
// News Detail (.b-news-detail)
// --------------------------------------------------------------------------

.b-news-detail {
  &__header {
    margin-bottom: 2rem;
  }

  &__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }

  &__date {
    font-size: $font-size-sm;
    color: $black-50;
    font-weight: $font-weight-semibold;
  }

  &__title {
    color: $primary;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    font-size: $h2-font-size;
    @include media-breakpoint-down(sm) {
      font-size: 1.5rem;
    }
  }

  &__author {
    color: $black-50;
    font-size: $font-size-sm;
  }

  &__hero {
    margin-bottom: 2.5rem;
    position: relative;
  }

  &__hero-image {
    width: 100%;
    height: auto;
  }

  &__body {
    max-width: 960px;
  }

  &__teaser {
    margin-bottom: 2rem;
    color: $primary;
  }

  &__text {
    margin-bottom: 2.5rem;

    img {
      max-width: 100%;
      height: auto;
    }
  }

  &__content-elements {
    margin-bottom: 2rem;
  }

  &__tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid $primary-15;
  }

  &__files,
  &__links {
    margin-bottom: 2rem;

    h4 {
      font-size: $h3-font-size;
      margin-bottom: 1rem;
    }

    li {
      margin-bottom: 0.5rem;
    }
  }

  &__related {
    margin-top: $block-spacing-sm;
    padding-top: $block-spacing-sm;
    border-top: 1px solid $primary-15;

    h3 {
      margin-bottom: 1.5rem;
    }
  }

  &__media-gallery {
    margin-bottom: 2rem;
  }

  &__media-item {
    margin-bottom: 0;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
    }

    .c-copyright--below {
      position: static;
    }
  }

  &__back {
    margin-top: $block-spacing-sm;

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .material-symbols-outlined {
      font-size: 1.25rem;
    }
  }
}