/* 1) Remove container padding so images can go edge-to-edge */
#ssb-stories-heading {
    padding-bottom: 48px !important;
    margin: 0 !important; /* Remove default margin */
  }
  
  .story-widget__stories {
    display: grid !important;
    grid-template-columns: repeat(3, auto) !important; /* 3 columns, sized to card content */
    gap: 56px !important; /* Gap between cards */
    justify-content: center !important;  /* Centers the group of three cards if the container is wider */
    margin: 0 auto !important;             /* Centers the grid container itself if its parent is wider */
  }      
  
  /* 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: inset 0 0 0 1px #E1E1E1, 0px 2px 10px 0px rgba(0, 0, 0, 0.10) !important;
    border-radius: 0 !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease-in-out !important;
    width: 368px !important; /* Added fixed width */
    height: 477px !important; /* Added fixed height */
    background-color: white !important; /* Added background color */
  }
  
  #news .story:hover {
    transform: translateY(-2px) !important;
    /* You might want to adjust the hover shadow if the main shadow changed significantly, or keep it as is */
    box-shadow: inset 0 0 0 1px #E1E1E1, 0 8px 12px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* 4) Image fills the entire top (edge-to-edge) */
  .story__image {
    width: 100% !important; 
    min-height: 263px !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: 0 !important; /* Ensures date can be flush left if margin is 0 */
    flex-grow: 1 !important; /* Allow header to grow and fill space in its parent (the <a> tag) */
    min-height: 0; /* Prevent content from overflowing flex item in some browsers */
    overflow: hidden !important; /* Add this to clip oversized .story__heading */
  }
  
  .story__post-date {
    order: -1 !important;               /* Moves date above .story__heading visually */
    font-size: 20px !important;         /* Existing style */
    font-weight: bold !important;       /* Existing style */
    text-align: left !important;        /* Align text inside the date element */
    color: var(--ast-global-color-1, white) !important; /* Existing style */
  
    /* New styles for the "tab" look */
    display: inline-block !important;   /* Allows setting height/padding & width fits content */
    align-self: flex-start !important;  /* Prevents stretching in the flex column, allowing inline-block to determine width */
    height: 50px !important;
    line-height: 50px !important;       /* Vertically centers the date text within the 50px height */
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: 0 !important;          /* Makes the element flush with the left of .story__header */
    margin-bottom: 16px !important;     /* Gap between date and heading */
    
    background-color: var(--ast-global-color-0, #cccccc) !important;
    border-top: 1px solid var(--ast-global-color-0, #cccccc) !important; /* Using current border color from your file */
    border-right: 1px solid var(--ast-global-color-0, #cccccc) !important; /* Using current border color from your file */
    border-bottom: 1px solid var(--ast-global-color-0, #cccccc) !important; /* Using current border color from your file */
    border-left: none !important;       /* No left border to "connect" with the edge */
    
    border-top-right-radius: 25px !important;    /* Half of height for a perfect round edge */
    border-bottom-right-radius: 25px !important; /* Half of height for a perfect round edge */
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    transition: none !important; /* Explicitly remove transitions if any were inherited */
  }
  
  #news .story__post-date:hover {
    color: inherit !important;          /* Text color remains unchanged */
  }
  
  .story__heading {
    order: 0 !important;
    margin: 0 !important; /* Ensures no default margins interfere with positioning */
    font-weight: bold !important;
    font-size: 20px !important;
    margin-left: 24px !important; /* Positions text 24px from the left edge of the heading box */
    margin-right: 24px !important;
    margin-bottom: 24px !important; /* Creates a 24px space at the bottom, INSIDE the heading's box */
    overflow: hidden !important; /* Crucial: Hides any text content that exceeds the content box height (which is height - padding-bottom) */
    flex-grow: 1 !important; /* Allows the heading box to expand vertically to fill available space in .story__header */
    min-height: 0; /* Flexbox best practice to prevent overflow issues with content */
    /* Add some top margin if the date's new height pushes the heading too close to the top of the header box visually */
    /* margin-top: 10px !important; /* Optional: Adjust as needed */
  }
  
  /* 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;
  }
  
  h2 {
    padding: 0 !important; /* Remove default padding */
  }
  
  /* --- 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 */
    flex-grow: 1 !important; /* Allow the <a> tag to grow and fill space in .story */
    min-height: 0; /* Prevent content from overflowing flex item in some browsers */
  }
  
  /* --- 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 */
    object-fit: cover !important;
    /* The image will be the base layer for the overlap, z-index auto (effectively 0 or 1) */
  }
  
  .ssb .story__image {
    margin: 0 !important; /* Remove theme 7’s extra margin */
  }
  
  /* --- Position header below the image --- */
  #news #ssb-stories > article > div > article > a > header {
    width: 100% !important;
    margin-top: -40px !important;   /* Adjust this negative value to control the overlap. This pulls the header up. */
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important; /* Ensures the header itself is flush left */
    position: relative !important;    /* Needed for z-index to work */
    z-index: 2 !important;            /* Ensures the header is stacked on top of the image */
    /* The background for the header itself might need to be transparent or carefully chosen if the date has its own background */
    /* background-color: rgba(255, 255, 255, 0.95) !important; /* This was on the header, might conflict or complement date background */
  }
  
  /* --- 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 */
    }
  }