/* News > Media Hub. The hero, the card grid and the closing band are the shared ones (archive.css, components.css); the introduction is
   the one of page.css. Here: what is specific to this page. BEM "wttc-mh". */

.wttc-mh { background: var(--wttc-white); }
.wttc-mh .wttc-archive__head { padding-bottom: 0; }
.wttc-mh__title { margin: 0; color: var(--wttc-navy); font: 400 clamp(28px, 3.2vw, 42px)/1.12 var(--wttc-font-serif); letter-spacing: -.3px; text-wrap: balance; }

/* Introduction: the text on the right has a list ("What we do") */
.wttc-mh__intro { padding-top: clamp(24px, 5vh, 56px); background: var(--wttc-white); }
.wttc-mh__intro .wttc-intro__text ul { margin: 0 0 1.1rem; padding-left: 1.2em; }
.wttc-mh__intro .wttc-intro__text li { margin-bottom: .5em; }
.wttc-mh__intro .wttc-intro__text strong { color: var(--wttc-navy); }

/* Recent press releases: title, text and button, then the three latest news */
.wttc-mh__press { padding-top: clamp(40px, 7vh, 64px); background: var(--wttc-cream); }
.wttc-mh__press-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 28px; }
.wttc-mh__press-copy { min-width: 0; }
.wttc-mh__press-text { margin: 10px 0 0; color: rgba(21, 27, 52, .82); font-size: 16px; line-height: 1.55; }

/* Photography and logo: navy band, text on the left, picture on the right */
.wttc-mh__photo { padding: clamp(48px, 8vh, 88px) 0; background: var(--wttc-navy); color: var(--wttc-white); }
.wttc-mh__photo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.wttc-mh__photo-grid.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wttc-mh__photo .wttc-mh__title { color: var(--wttc-white); }
.wttc-mh__photo-text { margin-top: 20px; max-width: 56ch; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.7; }
.wttc-mh__photo-text > * { margin-block: 0 1.1rem; }
.wttc-mh__photo-text a, .wttc-mh__photo-text a:visited { color: var(--wttc-white); text-decoration: underline; text-underline-offset: 3px; }
.wttc-mh__photo-text a:hover, .wttc-mh__photo-text a:focus-visible { text-decoration-thickness: 2px; }
.wttc-mh__photo-media { margin: 0; }
.wttc-mh__photo-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }

/* Closing band (peach, from components.css): a text under the title */
.wttc-mh__cta-copy { flex: 1 1 420px; min-width: 0; }
.wttc-mh__cta-text { margin: 12px 0 0; max-width: 58ch; color: var(--wttc-navy); font-size: 16px; line-height: 1.6; }

/* Social channels */
.wttc-mh__social { padding: clamp(48px, 8vh, 80px) 0 clamp(56px, 9vh, 96px); background: var(--wttc-cream); }
.wttc-mh__social-text { margin: 14px 0 0; max-width: 62ch; color: rgba(21, 27, 52, .82); font-size: 16px; line-height: 1.65; }
.wttc-mh__social-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.wttc-mh__social-list li { margin: 0; }
.wttc-mh__social-list a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #D1CFC8; border-radius: 50%; color: var(--wttc-navy); background: var(--wttc-white); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.wttc-mh__social-list a:hover, .wttc-mh__social-list a:focus-visible { background: var(--wttc-accent); border-color: var(--wttc-accent); color: var(--wttc-navy); }
.wttc-mh__social-list a:focus-visible { outline: 2px solid var(--wttc-navy); outline-offset: 2px; }

@media (max-width: 960px) {
	.wttc-mh__photo-grid.has-image { grid-template-columns: minmax(0, 1fr); }
	.wttc-mh__photo-media { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .wttc-mh__social-list a { transition: none; } }