/* Shared, flexible hero treatment for the public feed, topics, and articles. */
.voicer-hashtag .timeline-cover .card.voicer-banner,
.voicer-public-feed .timeline-cover .card.voicer-banner,
.voicer-blog > main > .card.voicer-banner:first-child {
    position: relative;
    isolation: isolate;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 24px !important;
    overflow: hidden;
    border: 1px solid rgba(201, 232, 255, .2);
    border-radius: 24px !important;
    background: #103e7c url('/brand/voicer-banner-waves.svg') center / cover no-repeat !important;
    box-shadow: 0 16px 38px rgba(17, 66, 130, .17) !important;
    color: #fff;
}
.voicer-public-feed .timeline-cover { margin-top: 0 !important; }
.voicer-banner .card-overlay { display: none !important; }
.voicer-hashtag .timeline-cover .card.voicer-banner > .content,
.voicer-public-feed .timeline-cover .card.voicer-banner > .content {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    padding: 30px 34px 25px !important;
}
.voicer-hashtag .timeline-cover .card.voicer-banner > .content > .voicer-banner__intro,
.voicer-public-feed .timeline-cover .card.voicer-banner > .content > .voicer-banner__intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 175px !important;
    align-items: start;
    gap: 30px;
    margin: 0 !important;
    padding: 0 !important;
}
.voicer-hashtag .timeline-cover .card.voicer-banner .voicer-banner__intro > div,
.voicer-public-feed .timeline-cover .card.voicer-banner .voicer-banner__intro > div {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding: 0 !important;
}
.voicer-banner .voicer-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 27px;
    padding: 4px 10px;
    border: 1px solid rgba(201, 231, 255, .34);
    border-radius: 999px;
    background: rgba(185, 223, 255, .13);
    color: #d9efff !important;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.voicer-hashtag .timeline-cover .voicer-banner .voicer-banner__title,
.voicer-public-feed .timeline-cover .voicer-banner .voicer-banner__title {
    display: block;
    max-width: 100%;
    margin: 13px 0 8px !important;
    color: #fff !important;
    font-size: clamp(31px, 3.4vw, 45px) !important;
    font-weight: 800 !important;
    line-height: 1.13 !important;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}
.voicer-banner .voicer-banner__title i { display: inline-block; margin: 0 0 0 5px !important; vertical-align: .15em; font-size: 15px !important; }
.voicer-hashtag .timeline-cover .voicer-banner .voicer-banner__subtitle,
.voicer-public-feed .timeline-cover .voicer-banner .voicer-banner__subtitle {
    display: block;
    max-width: 650px;
    margin: 0 !important;
    color: #dbeaff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
}
.voicer-banner .voicer-banner__description {
    max-width: 650px;
    margin: 10px 0 0 !important;
    color: #dbeaff !important;
    font-size: 13px;
    line-height: 1.5;
}
.voicer-banner .voicer-banner__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 17px 0 0 !important;
    color: #dbeaff !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}
.voicer-banner .voicer-banner__stats strong { margin-right: 4px; color: #fff; font-size: 15px; font-weight: 800; }
.voicer-banner .voicer-banner__bookmark { margin: 20px 0 0 !important; padding: 0 !important; }
.voicer-banner .voicer-banner__bookmark > div { width: auto !important; max-width: none; margin: 0 !important; padding: 0 !important; }
.voicer-hashtag .voicer-banner .voicer-banner__bookmark :is(#btnBookmark, #btnBookmarkLogin),
.voicer-public-feed .voicer-banner .voicer-banner__bookmark #btnBookmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 152px;
    min-height: 38px;
    margin: 0 !important;
    padding: 8px 17px;
    border: 1px solid rgba(220, 240, 255, .4);
    border-radius: 10px !important;
    background: rgba(212, 236, 255, .12) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: .02em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.voicer-banner .voicer-banner__contributor { align-self: center; }
.voicer-hashtag .timeline-cover .card.voicer-banner .voicer-banner__contributor center { display: grid; justify-items: center; gap: 7px; }
.voicer-banner .voicer-banner__contributor img { width: 76px !important; height: 76px !important; margin: 0 !important; border: 3px solid rgba(255,255,255,.88); border-radius: 50%; object-fit: cover; }
.voicer-banner .voicer-banner__contributor a,
.voicer-banner .voicer-banner__contributor h3 { color: #fff !important; }
.voicer-banner .voicer-banner__contributor a { max-width: 170px; font-size: 13px !important; font-weight: 700; overflow-wrap: anywhere; text-decoration: none; }
.voicer-banner .voicer-banner__contributor h3 { margin: 0 !important; font-size: 11px !important; font-weight: 600; opacity: .76; }
.voicer-public-feed .voicer-banner__intro > div:last-child { align-self: center; }
.voicer-public-feed .voicer-banner__intro > div:last-child center { display: grid; justify-items: center; gap: 6px; }
.voicer-public-feed .voicer-banner__intro > div:last-child a { margin: 0 !important; box-shadow: none !important; }
.voicer-public-feed .voicer-banner__intro > div:last-child img { width: 82px !important; height: 82px !important; margin: 0 !important; filter: drop-shadow(0 8px 18px rgba(0, 24, 65, .2)); }
.voicer-public-feed .voicer-banner__intro > div:last-child h3 { margin: 0 !important; color: #fff !important; font-size: 12px !important; }
.voicer-banner .voicer-banner__navigation {
    display: block !important;
    margin: 24px 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid rgba(216, 236, 255, .22);
}
.voicer-banner .voicer-banner__navigation > div { width: 100%; max-width: none; min-width: 0; padding: 0 !important; }
.voicer-hashtag .voicer-banner .voicer-banner__navigation > div > .m-2.mt-n3 { margin: 0 0 13px !important; }
.voicer-hashtag .voicer-banner .tab-controls,
.voicer-public-feed .voicer-banner .tab-controls { margin: 0 !important; }

.voicer-blog > main > .card.voicer-banner:first-child { min-height: 285px !important; }
.voicer-blog .voicer-banner__actions { position: absolute; z-index: 2; top: 19px; right: 22px; display: flex; gap: 6px; }
.voicer-blog .voicer-banner__actions a { display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 37px; margin: 0; border: 1px solid rgba(219, 239, 255, .32); border-radius: 10px !important; background: rgba(12, 44, 93, .22); color: #fff !important; }
.voicer-blog .voicer-banner__article { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 285px; padding: 38px 126px 34px 36px; }
.voicer-blog .voicer-banner__article .voicer-banner__eyebrow { margin: 0 0 17px !important; }
.voicer-blog > main > .card.voicer-banner:first-child h2.voicer-banner__title {
    max-width: 920px;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(27px, 3vw, 40px) !important;
    font-weight: 800;
    line-height: 1.16 !important;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}
.voicer-blog .voicer-banner__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 28px 0 0; color: #d8eaff; font-size: 12px; font-weight: 550; line-height: 1.5; }
.voicer-blog .voicer-banner__meta span { display: inline-flex; align-items: center; gap: 8px; }
.voicer-blog .voicer-banner__meta i { color: #a7d1fa; }

@media (max-width: 767px) {
    .voicer-hashtag .timeline-cover .card.voicer-banner > .content,
    .voicer-public-feed .timeline-cover .card.voicer-banner > .content { padding: 23px 20px 21px !important; }
    .voicer-hashtag .timeline-cover .card.voicer-banner > .content > .voicer-banner__intro,
    .voicer-public-feed .timeline-cover .card.voicer-banner > .content > .voicer-banner__intro { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 18px; }
    .voicer-hashtag .timeline-cover .voicer-banner .voicer-banner__title,
    .voicer-public-feed .timeline-cover .voicer-banner .voicer-banner__title { margin: 12px 0 8px !important; font-size: clamp(28px, 7.4vw, 35px) !important; line-height: 1.14 !important; }
    .voicer-hashtag .timeline-cover .voicer-banner .voicer-banner__subtitle,
    .voicer-public-feed .timeline-cover .voicer-banner .voicer-banner__subtitle { font-size: 14px !important; }
    .voicer-banner .voicer-banner__bookmark { margin-top: 18px !important; }
    .voicer-banner .voicer-banner__navigation { margin-top: 20px !important; padding-top: 17px !important; }
    .voicer-hashtag .voicer-banner .voicer-banner__contributor { justify-self: start; }
    .voicer-hashtag .timeline-cover .card.voicer-banner > .content > .voicer-banner__intro .voicer-banner__contributor center { display: flex !important; align-items: center; gap: 9px; text-align: left; }
    .voicer-hashtag .voicer-banner .voicer-banner__contributor img { width: 42px !important; height: 42px !important; }
    .voicer-hashtag .voicer-banner .voicer-banner__contributor h3 { display: none; }
    .voicer-public-feed .voicer-banner__intro > div:last-child { display: none !important; }
    .voicer-public-feed .voicer-banner__navigation > div > span { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0 0 12px !important; }
    .voicer-public-feed .voicer-banner__navigation > div > span button { width: 100%; min-width: 0; margin: 0 !important; padding-inline: 6px; white-space: normal; }
    .voicer-public-feed .voicer-banner .tab-controls { display: flex !important; flex-wrap: nowrap; gap: 6px; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .voicer-public-feed .voicer-banner .tab-controls::-webkit-scrollbar { display: none; }
    .voicer-public-feed .voicer-banner .tab-controls a { flex: 0 0 auto; margin: 0 !important; }
    .voicer-blog > main > .card.voicer-banner:first-child { min-height: 0 !important; }
    .voicer-blog .voicer-banner__actions { top: 17px; right: 17px; }
    .voicer-blog .voicer-banner__article { min-height: 0; padding: 75px 22px 26px; }
    .voicer-blog > main > .card.voicer-banner:first-child h2.voicer-banner__title { font-size: clamp(25px, 7vw, 32px) !important; line-height: 1.18 !important; }
    .voicer-blog .voicer-banner__meta { gap: 7px 16px; margin-top: 22px; }
}