/* Approved homepage: full news bulletin and four story cards. */
.hnx {
    position: relative;
    z-index: 1;
    margin-top: 58px;
    padding: 32px;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    color: #fff;
    scroll-margin-top: 24px;
}

.hnx h2,
.hnx h3,
.hnx p { margin: 0; }

.hnx a { color: inherit; }

.hnx-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--brand-color-light);
    font: 12px Gilroy-SemiBold, Arial, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hnx-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    font: 14px Gilroy-SemiBold, Arial, sans-serif;
    white-space: nowrap;
}

.hnx-link span { font-size: 20px; }

.hnx-empty {
    padding: 18px 0;
    color: #b7c7cb;
    font: 15px/1.5 Gilroy-Regular, Arial, sans-serif;
}

.hnx-player {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #071016;
}

.hnx-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.hnx-player__button {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    color: #fff;
    cursor: pointer;
}

.hnx-player--link {
    display: grid;
    place-items: center;
}

.hnx-player__button > img,
.hnx-player--link > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hnx-player__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 12, 18, .08), rgba(5, 12, 18, .78));
}

.hnx-player__action {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 15px;
    color: #fff;
    text-align: center;
}

.hnx-player__icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--brand-color);
    color: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
    font: 23px Arial, sans-serif;
}

.hnx-player__action strong { font: 20px/1.2 Gilroy-SemiBold, Arial, sans-serif; }
.hnx-player__action small { color: #dfebeb; font: 12px Gilroy-Regular, Arial, sans-serif; }
.hnx-player--empty { display: grid; place-items: center; padding: 24px; text-align: center; }
.hnx-player--empty span { color: #c1d1d3; font: 16px/1.4 Gilroy-Regular, Arial, sans-serif; }

.hnx-mosaic__heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 25px;
}
.hnx--mosaic { background: rgba(10, 20, 27, .94); }
.hnx-mosaic__heading h2 { font: 43px/1.1 Gilroy-ExtraBold, Arial, sans-serif; }
.hnx-mosaic__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 210px); gap: 12px; }
.hnx-mosaic__issue { grid-row: span 2; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 12px; background: #172b32; }
.hnx-mosaic__player { flex: 1; height: auto; min-height: 0; border-radius: 0; aspect-ratio: auto; }
.hnx-mosaic__issue > a { display: flex; flex-direction: column; gap: 5px; padding: 13px 18px; }
.hnx-mosaic__issue > a span { color: var(--brand-color-light); font: 11px Gilroy-SemiBold, Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.hnx-mosaic__issue > a strong { font: 18px/1.2 Gilroy-SemiBold, Arial, sans-serif; }
.hnx-mosaic__story { position: relative; display: block; min-width: 0; overflow: hidden; border-radius: 12px; background: #22343c; }
.hnx-mosaic__story > img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.hnx-mosaic__story:hover > img { transform: scale(1.04); }
.hnx-mosaic__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(4, 13, 18, .93)); }
.hnx-mosaic__story-copy { position: absolute; right: 15px; bottom: 14px; left: 15px; display: flex; flex-direction: column; gap: 6px; }
.hnx-mosaic__story-copy time { color: var(--brand-color-light); font: 12px Gilroy-SemiBold, Arial, sans-serif; }
.hnx-mosaic__story-copy strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font: 16px/1.18 Gilroy-SemiBold, Arial, sans-serif; }
.hnx-mosaic__footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #42555a; font: 14px Gilroy-Regular, Arial, sans-serif; }
.hnx-mosaic__footer strong { color: var(--brand-color-light); font: 14px Gilroy-SemiBold, Arial, sans-serif; }

@media (min-width: 721px) and (max-width: 1020px) {
    .hnx-mosaic__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }
    .hnx-mosaic__issue { grid-column: 1 / -1; grid-row: auto; }
    .hnx-mosaic__player { flex: none; aspect-ratio: 16 / 9; }
    .hnx-mosaic__story { aspect-ratio: 16 / 10; }
}


@media (max-width: 720px) {
    .hnx { margin-top: 35px; padding: 20px 17px; border-radius: 14px; }
    .hnx-mosaic__heading { display: block; }
    .hnx-mosaic__heading h2 { font-size: 31px; }
    .hnx-link { margin-top: 15px; }
    .hnx-mosaic__grid { display: block; }
    .hnx-mosaic__issue { height: auto; margin-bottom: 12px; }
    .hnx-mosaic__player { aspect-ratio: 16 / 9; }
    .hnx-mosaic__story { height: 210px; margin-top: 12px; }
    .hnx-mosaic__footer { display: block; }
    .hnx-mosaic__footer strong { display: block; margin-top: 8px; }
    .hnx-player__action { max-width: 100%; padding: 12px; gap: 6px; }
    .hnx-player__icon { width: 52px; height: 52px; }
    .hnx-player__action strong { font-size: 17px; }
    .hnx-player__action small { font-size: 11px; line-height: 1.35; }
}