/* =========================================
   Base Card Styles
   ========================================= */
.nssc-blog-card {
  background-color: #ffffff;
  border-radius: 20px; /* Increased from 8px to 20px */
  overflow: hidden;
}

/* Because Drupal wraps the image in a link, we must make the link a block element */
.nssc-blog-card-image a {
  display: block;
  height: 100%;
  width: 100%;
}

.nssc-blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

/* Background color for the text areas */
.nssc-blog-card-body {
  background-color: rgba(225, 229, 234, 0.41);
}

/* Force Splide to make the left and right columns equal height */
#nssc-blog-slider .splide__list {
  align-items: stretch;
}


/* =========================================
   Column Width & Exact Height Locks (Desktop)
   Forces Left to 1/3 and Right to 2/3
   ========================================= */
@media (min-width: 992px) {
  #nssc-blog-slider .splide__slide.nssc-slide-featured {
    width: calc(33.333% - 1rem) !important;
    height: 640px !important; /* Locks entire column to 308 + 308 + 24px gap */
  }
  
  #nssc-blog-slider .splide__slide.nssc-slide-stacked {
    width: calc(66.666% - 1rem) !important;
    height: 640px !important; /* Locks entire column to 308 + 308 + 24px gap */
  }
  
  .nssc-blog-card--featured {
    height: 100% !important;
  }
}


/* =========================================
   1. Featured Card (Vertical Layout / Left)
   ========================================= */
.nssc-blog-card--featured {
  height: 100%;
}

.nssc-blog-card--featured .nssc-blog-card-inner {
  height: 100%;
}

.nssc-blog-card--featured .nssc-blog-card-image {
  /* Force exactly 55% of the card height, zero padding */
  flex: 0 0 55%;
  height: 55%;
}

.nssc-blog-card--featured .nssc-blog-card-image img {
  border-radius: 4px; 
}

/* CRITICAL: min-height: 0 prevents long text from blowing out the card height */
.nssc-blog-card--featured .nssc-blog-card-body {
  flex: 0 0 45%;
  height: 45%;
  min-height: 0; 
  overflow: hidden;
}


/* =========================================
   2. Horizontal Cards (Stacked Layout / Right)
   ========================================= */
@media (min-width: 768px) {
  .nssc-blog-card--horizontal {
    height: 308px !important; /* Force exact 308px height */
    overflow: hidden;
  }

  .nssc-blog-card--horizontal .nssc-blog-card-inner {
    flex-direction: row !important;
    height: 100%;
  }

  /* Image explicitly 308px square with zero padding */
  .nssc-blog-card--horizontal .nssc-blog-card-image {
    width: 308px !important; 
    height: 308px !important;
    flex-shrink: 0;
    padding: 0; 
  }
  
  /* CRITICAL: min-height: 0 prevents long text from blowing out the 308px height */
  .nssc-blog-card--horizontal .nssc-blog-card-body {
    flex-grow: 1; 
    height: 308px !important;
    min-height: 0;
    overflow: hidden;
  }
}


/* =========================================
   3. Typography & Elements
   ========================================= */

/* Pill / Category Container */
.nssc-blog-card-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; 
  margin-bottom: 1rem;
}

/* The actual Pill Links */
.nssc-blog-card-pill a {
  display: inline-block;
  background-color: #042969; 
  color: #ffffff !important;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}

.nssc-blog-card-pill a:hover {
  background-color: #006BB6; 
  text-decoration: none;
}

/* Title Styling */
.nssc-blog-card-title {
  margin-bottom: 0.75rem;
}

.nssc-blog-card-title,
.nssc-blog-card-title a {
  color: #042969;
  text-decoration: none;
  font-weight: 700;
}

.nssc-blog-card-title a:hover {
  text-decoration: none; 
  opacity: 0.85;
}

/* Excerpt Styling */
.nssc-blog-card-excerpt {
  color: #4a4a4a;
  font-size: 0.95rem;
  line-height: 1.5;
  /* Automatically truncates the text with an ellipsis (...) if it's too long */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;
}

/* Read More Link */
.nssc-blog-card-link a {
  color: #006BB6;
  font-size: 1rem;
  font-weight: 500; 
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nssc-blog-card-link a:hover {
  text-decoration: underline;
}