/* Home + hub photography (Unsplash License). Hero background, group panel strips, hub heroes. */
body{overflow-x:clip}
/* hero: full-bleed photo, darkened with near-black gradient */
.hero{position:relative;isolation:isolate}
.hero-photo{position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;overflow:hidden;pointer-events:none;background:var(--bg)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.55) contrast(1.05);opacity:.9}
.hero-photo:after{content:"";position:absolute;inset:0;background:
 linear-gradient(90deg,rgba(11,11,14,.94) 0%,rgba(11,11,14,.78) 38%,rgba(11,11,14,.52) 70%,rgba(11,11,14,.62) 100%),
 linear-gradient(180deg,rgba(11,11,14,.55) 0%,rgba(11,11,14,0) 30%,rgba(11,11,14,.2) 70%,var(--bg) 100%)}
.hero .ticker{background:rgba(11,11,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero .stats{position:relative}
/* group panels: translucent tint + faded photo strip behind the group heading */
.grp{position:relative;isolation:isolate;overflow:hidden;padding:30px 28px!important;margin:0 0 14px;border:1px solid var(--panel-edge,var(--line))!important;border-radius:var(--radius);background:linear-gradient(90deg,var(--panel,transparent),transparent 65%)!important}
.grp:first-child{padding-top:30px!important}
.grp .gph{position:absolute;z-index:-1;top:0;left:0;height:100%;width:62%;object-fit:cover;opacity:.3;filter:grayscale(.35) contrast(1.05);
 -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.75) 30%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.75) 30%,transparent 100%)}
.group-run{--panel:rgba(31,165,151,.10);--panel-edge:rgba(31,165,151,.26)}
.group-tri{--panel:rgba(245,165,36,.09);--panel-edge:rgba(245,165,36,.26)}
.group-other{--panel:rgba(177,171,165,.07);--panel-edge:rgba(242,242,245,.14)}
.group-tri .gph{opacity:.38}
.grp .row:hover{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 70%)}
/* footer credit */
footer .photo-credit{flex-basis:100%;order:3;font-size:11px;color:var(--dim)}
footer .photo-credit a{color:var(--muted);text-decoration:none}
footer .photo-credit a:hover{color:var(--blue-hi)}
@media (max-width:720px){
 .hero-photo img{object-position:38% 50%}
 .hero-photo:after{background:linear-gradient(180deg,rgba(11,11,14,.7) 0%,rgba(11,11,14,.72) 45%,rgba(11,11,14,.85) 80%,var(--bg) 100%)}
 .grp{padding:22px 18px 6px!important}
 .grp .gph{width:100%;height:150px;opacity:.32;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%)}
}
/* Hub heroes (Medal Missions, My races): compact full-bleed band behind the hub heading, same dark treatment as home. */
.hub-heading,.bv-top{position:relative;isolation:isolate}
.hub-heading.has-hub-photo,.bv-top.has-hub-photo{padding-top:28px;padding-bottom:36px;margin-bottom:8px}
.hub-ph{position:absolute;z-index:-1;inset:0;left:calc(50% - 50vw);width:100vw;height:100%;object-fit:cover;object-position:50% 40%;opacity:.55;filter:saturate(.55) contrast(1.05);pointer-events:none}
.hub-heading.has-hub-photo:after,.bv-top.has-hub-photo:after{content:"";position:absolute;z-index:-1;inset:0;left:calc(50% - 50vw);width:100vw;pointer-events:none;background:
 linear-gradient(90deg,rgba(11,11,14,.92) 0%,rgba(11,11,14,.72) 42%,rgba(11,11,14,.55) 78%,rgba(11,11,14,.7) 100%),
 linear-gradient(180deg,rgba(11,11,14,.5) 0%,rgba(11,11,14,.15) 40%,rgba(11,11,14,.55) 85%,var(--bg) 100%)}
#missionsHub .hub-ph{object-position:50% 48%}
#alertsHub .hub-ph{object-position:40% 55%;opacity:.5}
@media (max-width:720px){
 .hub-ph{opacity:.48;object-position:42% 45%}
 .hub-heading.has-hub-photo,.bv-top.has-hub-photo{padding-top:22px;padding-bottom:28px}
}
/* Other panel: dark GPS-watch band crop (watch ~20% from left, beside the type); needs more opacity than the other strips; applies on mobile too — last so it beats the mobile .32 */
.grp.group-other .gph{opacity:.42;object-position:15% 50%}