/*-- Media page (media.html) -------------------------------------------------------
     Loaded only by media.html so nothing here can reach any other page. Reuses the
     site's existing patterns (.image-text-section, .play-btn, .global-overlay,
     .btn-blue geometry) and only adds what the media layout needs. --*/

/*-- navy page-title band --*/
.media-title-band { background: #000935; padding: 40px 0 45px 0; margin-bottom: 90px; }
.media-title-band h1 { margin: 0; padding: 0; color: #fff; text-align: center; }
.media-title-band h1:before { display: none; }

/*-- featured article blocks --*/
.media-article { margin-bottom: 90px; }
.media-article .it-content { text-align: left; }
.media-article .media-article-logo { margin-bottom: 30px; }
.media-article .media-article-logo img { width: auto; max-height: 40px; display: block;
    border-radius: 0; margin-bottom: 0; }
/*   custom.css has .image-text-section .it-content img { border-radius:15px; margin-bottom:30px }
     which was rounding the publication logos and adding stray space - both overridden here --*/
/*   display:block on the logo removes the inline line-box space under it, which was
     adding ~30px on top of the wrapper margin and pushing the rule too far down --*/
.media-article h2 { margin: 0 0 20px 0; padding: 30px 0 0 0; font-size: 187.5%; text-align: left; line-height: 1.3; }
/*   keep the site's short decorative rule above the headline - .image-text-section
     h2:before already left-aligns it, and re-centres it on mobile --*/
.media-article p { margin-bottom: 25px; }
.media-article .btn-area { text-align: left; }

/*-- outline 'read article' button, same geometry as .btn-blue --*/
.btn-read { border-radius: 30px; padding: 11px 38px; font-weight: 700; display: inline-block; border: 2px solid #000935; background: transparent; color: #000935; text-transform: uppercase; letter-spacing: 2px; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.btn-read:hover { background: #000935; color: #fff; text-decoration: none; }

/*-- media appearances (navy) --*/
.media-appearances { background: #000935; padding: 90px 50px; margin-bottom: 90px; }
.media-appearances h2 { color: #fff; }
.media-appearances h2:before { background: #fff; }
.media-appearances .media-appearance-item { margin-bottom: 50px; }
.media-appearances .media-appearance-image { position: relative; border-radius: 10px; overflow: hidden; }
.media-appearances .media-appearance-image img { display: block; width: 100%; }
.media-appearances .play-btn a { width: 62px; height: 62px; font-size: 26px; line-height: 62px; }
.media-appearances .media-appearance-logo { margin: 25px 0 15px 0; }
.media-appearances .media-appearance-logo img { width: auto; max-height: 38px; }
.media-appearances p { margin: 0; color: #fff; font-size: 18px; line-height: 1.4; }

@media (max-width: 991.98px) {
    .media-appearances { padding: 60px 20px; }
    }
@media (max-width: 767.98px) {
    .media-title-band { margin-bottom: 50px; }
    .media-article { margin-bottom: 50px; }
    .media-article .it-image { margin-bottom: 30px; }
    .media-article h2, .media-article .it-content, .media-article .btn-area { text-align: center; }
    .media-article .media-article-logo { text-align: center; }
    .media-article .media-article-logo img { margin: 0 auto; }
    }