/* ===========================================================================
   EverOn — Components
   ---------------------------------------------------------------------------
   Reusable pieces shared by the home page and the blog:

     .hslide / #hero-mark   the hero cross-fade carousel
     #b-hero.on-light|warm  per-slide colour themes for the hero copy
     .badv-row              the numbered "advantage" rows
     .art-card / #art-track the horizontal article carousel
     .art-arrow             its prev/next buttons
     .a-chip / .a-toc       article chips and the sticky table of contents
     .art-tag               tag pills in the article header
   =========================================================================== */

.art-card{ transition:transform .3s ease, box-shadow .3s ease; }
.art-card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,6,40,0.14); }
.art-card:hover h4{ color:#FF5A00; }
.art-card h4{ transition:color .25s ease; }
.art-card{ scroll-snap-align:start; }
#art-track{ scrollbar-width:none; -ms-overflow-style:none; }
#art-track::-webkit-scrollbar{ display:none; }
.art-arrow{ transition:background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease; }
.art-arrow:hover{ background:#000628; color:#fff; }
.art-arrow[disabled]{ opacity:0.3; cursor:default; }
.art-arrow[disabled]:hover{ background:transparent; color:#000628; }
.badv-row{ transition:background .25s ease; }
.badv-row:hover{ background:rgba(255,255,255,0.05); }
.badv-row .badv-num{ transition:color .25s ease; }
.badv-row:hover .badv-num{ color:#FF842F; }
.hslide{ opacity:0; transition:opacity 1.4s ease; will-change:opacity; }
/* The decorative hero mark.
   v2 anchors it to the top-right and lets it bleed off the edge; v1 had it
   smaller and lower. #hero-mark is a wrapper div — the <picture> inside cannot
   be positioned reliably, so the wrapper carries the geometry and the image
   just fills it. */
#hero-mark {
  position: absolute;
  top: 114px;
  right: -150px;
  left: auto;
  bottom: auto;
  width: calc(54vw + 66px);
  height: auto;
  max-width: none;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  filter: drop-shadow(0 14px 44px rgba(0, 6, 40, 0.45));
}
#hero-mark img { width: 100%; height: auto; display: block; }
#b-hero.on-warm .hero-scrim{ background:linear-gradient(90deg,rgba(198,68,0,0.82) 0%,rgba(206,72,0,0.6) 17%,rgba(225,80,0,0.18) 32%,rgba(255,90,0,0) 46%) !important; }
#b-hero.on-light .hero-scrim{ background:linear-gradient(90deg,rgba(255,255,255,0.72) 0%,rgba(255,255,255,0.46) 26%,rgba(255,255,255,0.12) 50%,rgba(255,255,255,0) 70%) !important; }
#b-hero .hero-h1, #b-hero .hero-lede{ transition:color 1.4s ease; }
#b-hero.on-light .hero-h1{ color:#003CF9 !important; }
#b-hero.on-light .hero-lede{ color:#001351 !important; }
#b-hero.on-light .hero-eyebrow{ color:#003CF9 !important; }
#b-hero.on-warm .hero-eyebrow{ color:#fff !important; }
#b-hero.on-light .hero-rule{ background:#003CF9 !important; }
#b-hero.on-warm .hero-rule{ background:#fff !important; }
.hslide.on{ opacity:1; }
.a-chip{ transition:background .25s ease, color .25s ease, border-color .25s ease; }
.a-chip:hover{ background:#000628 !important; color:#fff !important; border-color:#000628 !important; }

.a-toc{ transition:color .25s ease, border-color .25s ease; }
.a-toc:hover{ color:#000628 !important; border-left-color:#9aa2b8 !important; }
.a-toc.on{ color:#0022CC !important; border-left-color:#F56604 !important; font-weight:500 !important; }
.art-tag{ display:inline-flex; align-items:center; padding:7px 15px; border-radius:999px; border:1px solid rgba(255,255,255,0.4); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:#fff; text-decoration:none; transition:background .25s ease, border-color .25s ease, color .25s ease; }
.art-tag:hover{ background:#fff; border-color:#fff; color:#000628 !important; }
body.no-art-cta #art-cta{ display:none; }

/* ---------------------------------------------------------------------------
   Responsive behaviour for the shared components.
   The article carousel shows 4 cards on desktop, 2 on tablet, 1 on mobile.
   Card width is set inline in the markup for the 4-up case; these override it.
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .art-card { flex: 0 0 calc((100% - 22px) / 2) !important; }
}
@media (max-width: 720px) {
  .art-card { flex: 0 0 86% !important; }
  .art-arrow { display: none !important; }
}

/* The hero decorative mark is a large off-canvas graphic; hide it on phones
   where it would push the headline out of view. */
@media (max-width: 900px) {
  #hero-mark { display: none; }
}

/* ---------------------------------------------------------------------------
   Footer links
   Replaces the `style-hover="..."` attributes carried over from the design
   export — that attribute is not real HTML and never did anything in a browser.
   --------------------------------------------------------------------------- */
.f-link {
  color: var(--c-on-dark-90);
  font-size: var(--f-small);
  font-weight: var(--fw-light);
  transition: color .25s ease;
}
.f-link:hover { color: var(--c-orange-light); }