/* Shorter homepage hero. Added in 1.2.0.
   Before: min-height 100vh plus 160px top and 120px bottom padding, so the first screen held no news
   and the first story started about 1160px down. Now the hero is capped near 620px on desktop and
   sizes to its content on tablet and phone, so the first stories appear on or just below screen one.
   The .hero-split.hero-split selector beats the page's own inline <style>, which loads later. */

/* Bottom padding of 96px keeps the content clear of the scroll cue (absolute, bottom 36px, ~42px tall). */
@media (min-width: 993px) {
    .hero-split.hero-split { min-height: min(100vh, 620px); }
    .hero-split.hero-split > .container {
        padding-top: 128px !important;   /* clears the fixed header */
        padding-bottom: 96px !important;
    }
}

/* Tablet: the hero is now content height, so the scroll cue would sit on the badges. Hide it. */
@media (min-width: 769px) and (max-width: 992px) {
    .hero-split.hero-split { min-height: 0; }
    .hero-split.hero-split > .container {
        padding-top: 112px !important;
        padding-bottom: 48px !important;
    }
    .hero-scroll-cue { display: none !important; }
}

/* Phones already stack a 16:9 video strip above the text (front-page.php); only drop the forced height. */
@media (max-width: 768px) {
    .hero-split.hero-split { min-height: 0; }
}

/* Story headlines were 15-16px, smaller than the section labels around them (28-42px), so nothing
   read as the news. Inline styles set the old sizes, hence !important. Only loaded on the homepage. */
.kb-cat-card__title { font-size: 18px !important; line-height: 1.35 !important; }
h4[style*="font-size: 15px"] { font-size: 17px !important; }
@media (max-width: 768px) {
    /* two cards per row on phones, so a smaller bump: 14px -> 15px */
    .kb-cat-grid .kb-cat-card__title { font-size: 15px !important; }
    h4[style*="font-size: 15px"] { font-size: 16px !important; }
}