/* ==================================================
   Highlighted News Styles
================================================== */

/* Container styling */
.highlighted-news {
  padding: 2rem 0 !important;
}

.highlighted-news .row.g-4 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 2rem !important;
  margin: 0 auto !important;
  max-width: 1240px !important; /* Limits row width based on 2x600px + gaps */
}

/* Column sizing */
.highlighted-news .col-md-6 {
  width: 100% !important; /* Mobile first - full width */
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
@media (min-width: 768px) {
  .highlighted-news .col-md-6 {
    flex: 0 0 calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }
}

/* Card styling */
.highlighted-news .card {
  padding: 1rem !important;
  width: 100% !important;
  max-width: 600px !important;
  border-radius: 12px !important;
  margin: 0 auto !important;
}

/* Card hover effect */
.highlighted-news .card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

/* Image styling */
.highlighted-news .card-img-top {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

/* Card body layout */
.highlighted-news .card-body {
  display: flex !important;
  flex-direction: column !important;
}
.highlighted-news .card-title {
  order: 2 !important;
  margin-bottom: 0.5rem !important;
}
.highlighted-news .card-text.text-muted.small {
  order: 1 !important;
  margin-bottom: 0.75rem !important;
  margin-top: -0.5rem !important;
}
.highlighted-news .card-text:not(.text-muted) {
  order: 3 !important;
}

/* Description text styling */
.highlighted-news .card-text {
  line-height: 1.5 !important;
}

/* Card footer styling */
.highlighted-news .card-footer {
  background-color: transparent !important;
  border-top: none !important;
  padding: 1rem !important;
}

/* Date background styling */
.highlighted-news .card-text.text-muted.small {
  background: var(--color_two) !important;
  padding: 0.4rem 0.4rem !important;
  border-radius: 6px !important;
  display: inline-block !important;
  width: fit-content !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
}


/* ==================================================
 Normal News Styles
================================================== */

/* Container styling */
.normal-news {
  padding: 2rem 0 !important;
}
.normal-news .card {
  border: none !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}

/* Grid layout for news items */
.normal-news .list-group {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
}

@media (max-width: 768px) {
  .normal-news .list-group {
    grid-template-columns: 1fr !important;
  }
}

/* List item (card) styling */
.normal-news .list-group-item {
  display: flex !important;
  flex-direction: column !important;
  padding: 1.5rem !important; /* Provides breathing room so text isn’t touching the box-shadow */
  width: 100% !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important; /* Ensures hover box-shadow isn’t clipped */
}

/* Hover effect on list items */
.normal-news .list-group-item:hover {
  box-shadow: none !important;
}

/* Image styling */
.normal-news .list-group-item img {
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important; /* Rounded top edges */
  display: block !important;
  order: -2; /* Places image at the top */
  margin-bottom: 0.5rem !important;
}

/* Content styling */
.normal-news .d-flex {
  display: flex !important;
  flex-direction: column !important;
}

/* Date styling within list items */
.normal-news .list-group-item .text-muted {
  order: -1 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Title styling */
.normal-news .list-group-item h5 {
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  order: 0 !important;
}

/* Description text styling */
.normal-news .list-group-item p {
  line-height: 1.5 !important;
  margin-bottom: 0.5rem !important;
}

/* Header styling */
.normal-news .card-header {
  background-color: transparent !important;
  border: none !important;
  text-align: center !important;
}
.normal-news .card-header h3 {
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
}

/* Additional positioning for normal news items */
.normal-news .list-group-item {
  position: relative;
}
.normal-news .text-muted.small {
  order: -1 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.normal-news .flex-grow-1 {
  display: flex !important;
  flex-direction: column !important;
}
.normal-news .flex-grow-1 > h5 {
  order: 1 !important;
}
.normal-news .flex-grow-1 > p {
  order: 2 !important;
  margin-bottom: 0.25rem !important;
}
.normal-news .flex-grow-1 > small {
  order: 0 !important;
}

/* Normal news date background styling */
.normal-news .flex-grow-1 > small.text-muted {
  background: var(--color_two) !important;
  padding: 0.4rem 0.4rem !important;
  border-radius: 6px !important;
  display: inline-block !important;
  width: fit-content !important;
  margin: 0.5rem 0 !important;
}