/* 1) Remove container padding so images can go edge-to-edge */
#ssb-stories-heading {
  padding-bottom: 2rem !important;
}

.story__heading {
  margin-bottom: 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
  flex-grow: 1 !important;
  min-height: 0;
  line-height: 160%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

#news .story__heading {
  padding-bottom: 0 !important;
}

/* 2) If you still want a grid of cards, keep a grid layout. 
   If you only want a single column, change grid-template-columns to 1fr. */
   .story-widget__stories {
      display: grid !important;
      gap: 2rem !important;
      justify-content: center !important;  /* Centers grid tracks */
      justify-items: center !important;     /* Centers items within each cell */
      margin: 0 auto !important;             /* Centers the grid container itself */
    }      

/* 3) Make each story flush to the edges, remove box shadow/border if you had it */
#news .story {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;          /* So we can push footer down if needed */
  flex-direction: column !important; /* Keeps header/content above the footer */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  border-radius: 0 !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease-in-out !important;
  background-color: #FFFFFF !important; /* Add this line */
}

#news .story:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2) !important;
}

/* 4) Image fills the entire top (edge-to-edge) */
.story__image {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  margin: 0 !important;
}

/* Override Theme 7's border-radius on the image with a more specific selector */
#news #ssb-stories > article > div > article > a > img.story__image {
  border-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 5) Reorder date above heading using Flexbox order */
.story__header {
  display: flex !important;
  flex-direction: column !important;
  padding: 1rem !important;
}

.story__post-date {
  order: -1 !important;               /* Moves date above .story__heading visually */
  margin-bottom: 1.5rem !important;     /* Spacing after the date */
  text-align: right !important;         /* Align date to the right (optional) */
}

.story__heading {
  order: 0 !important;
  margin: 0 !important;                /* Reset default H2 margin */
  font-weight: bold !important;
}

/* 6) Footer pinned to bottom of card with slight styling */
.story__footer {
  margin-top: auto !important;         /* Push footer to bottom if there's extra content */
  text-align: right !important;        /* Align source link to the right (optional) */
}

.story__source {
  font-weight: bold !important;
  text-decoration: none !important;
}

/* --- Force single-column layout in theme 7 --- */
#news #ssb-stories > article > div > article > a {
  display: flex !important;
  flex-direction: column !important; /* Image on top, text below */
  align-items: flex-start !important; /* Align text to the left */
  justify-content: flex-start !important;
  text-decoration: none !important;
  border-bottom: none !important; /* Remove the theme 7 border */
  padding: 0 !important; /* Remove theme 7’s extra padding */
  margin-top: 0 !important; /* Remove theme 7’s extra margin */
  margin-bottom: 0 !important; /* Remove theme 7’s extra margin */
}

/* --- Make the image fill the top portion --- */
#news #ssb-stories > article > div > article > a > img {
  width: 100% !important;
  max-width: 100% !important; /* Prevent the 50% max-width from theme 7 */
  height: auto !important;
  margin-bottom: 0.5rem !important;
  object-fit: cover !important;
}

/* --- Position header below the image --- */
#news #ssb-stories > article > div > article > a > header {
  width: 100% !important;
  margin: 0 !important;
}

/* --- Reset absolute positioning on time element (theme 7 sets bottom:0; right:0;) --- */
#news #ssb-stories > article > div > article > a > header > time {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  margin-top: 0.5rem !important; /* Add a little space if you like */
}

/* --- Mobile Styles --- */
@media (max-width: 768px) {
  .story__image {
    height: 150px !important; /* Adjust the height as needed for mobile devices */
  }
}