/* Home Page Specific Styles */

/* 
   Hero Typography Tweaks 
*/
@media (max-width: 576px) {
    h1.display-3 {
        font-size: 2.5rem; 
    }
}

@media (max-width: 400px) {
    .d-flex.gap-3 {
        flex-direction: column;
    }
    .btn-lg {
        width: 100%;
    }
}

/* 
   LATEST STORIES CARD FIXES
   -------------------------
   We use the ID selector #latest-stories to ensure these overrides 
   win over any Bootstrap or Global styles.
*/

/* 
   1. The Card Container 
   We set the background to DARK (primary). 
   This hides the "White Slivers" at the top corners because the 
   background behind the rounded image is now the same color as the border.
*/
#latest-stories .card {
    background-color: var(--color-primary);
    /* Ensure the card itself maintains its board radius */
    border-radius: var(--radius-board);
    /* Overflow hidden ensures the white card-body doesn't spill out the bottom rounded corners */
    overflow: hidden; 
}

/* 
   2. The Card Body
   Since the card background is now dark (to fix the slivers), 
   we must explicitly make the text area background white.
*/
#latest-stories .card .card-body {
    background-color: white;
}

/* 
   3. The Image Container (.ratio)
   Shorthand border-radius is used to force bottom corners to be SQUARE (0).
*/
#latest-stories .card .ratio {
    /* Top-Left, Top-Right, Bottom-Right, Bottom-Left */
    border-radius: var(--radius-board) var(--radius-board) 0 0 !important;
    
    /* Remove borders touching the outer card border */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    
    /* Force the separator line at the bottom */
    border-bottom: 3px solid var(--color-primary) !important;
    
    /* Dark background adds a second layer of defense against slivers */
    background-color: var(--color-primary) !important;
}

/* 
   4. The Image Inside
   Square corners, slight bleed to ensure coverage.
*/
#latest-stories .card .ratio > img,
#latest-stories .card .ratio > .img-cover {
    border-radius: 0 !important;
    /* 102% is enough to cover the edge without cutting off too much content */
    width: 102% !important; 
    height: 102% !important;
    top: -1%;
    left: -1%;
}