/* PisteKart Italia Racing Edition V4.2
   Track detail: single continuous photo, featured events below hero, compact mobile.
   Shared nav contrast fix on every public page. Existing API/Thymeleaf bindings unchanged. */

/* Mobile login: the legacy CSS hides BOTH the label and the icon; force a real label. */
@media (max-width:1080px) {
  html body .site-navbar .navbar-links .login-btn {
    background:#e40b39 !important;
    color:#fff !important;
    min-width:74px !important;
    width:auto !important;
    height:36px !important;
    padding:0 11px !important;
    font:700 1rem/1 Teko,Arial,sans-serif !important;
    white-space:nowrap !important;
    border:1px solid #ff4a69 !important;
    border-radius:4px !important;
    -webkit-text-fill-color:#fff !important;
  }
  html body .site-navbar .navbar-links .login-btn span {
    display:inline !important;
    visibility:visible !important;
    font:700 1rem/1 Teko,Arial,sans-serif !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
  }
  html body .site-navbar .navbar-links .login-btn i { display:none !important; }
}
@media (max-width:350px) {
  html body .site-navbar .navbar-links .login-btn {min-width:61px !important;padding:0 7px !important;}
  html body .site-navbar .navbar-brand {gap:4px !important;}
  html body .site-navbar .site-powered {padding-left:5px !important;gap:2px !important;}
  html body .site-navbar .site-powered span {display:none !important;}
  html body .site-navbar .site-powered img {height:17px !important;}
}

/* One uninterrupted cover. No artificial right-hand photo plane or hard crop line. */
html body:not(.promotion-management) .track-top-stage {
  isolation:isolate !important;
  background:#092d48 !important;
  border-bottom:0 !important;
  padding:55px max(20px,calc((100vw - 1400px)/2)) 58px !important;
}
html body:not(.promotion-management) .track-top-stage .track-top-bg {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:1 !important;
  filter:saturate(1.04) contrast(1.015) !important;
  transform:none !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
html body:not(.promotion-management) .track-top-stage::before {
  z-index:1 !important;
  background:linear-gradient(90deg,
    rgba(5,34,55,.97) 0%,rgba(5,34,55,.94) 23%,rgba(5,34,55,.77) 39%,
    rgba(5,34,55,.30) 63%,rgba(5,34,55,.03) 86%,rgba(5,34,55,0) 100%) !important;
}
html body:not(.promotion-management) .track-top-stage::after {content:none !important;}
html body:not(.promotion-management) .track-top-stage .track-top-inner {
  max-width:1400px !important;
  display:block !important;
  margin:0 auto !important;
  position:relative !important;
  z-index:2 !important;
}
html body:not(.promotion-management) .track-top-stage .track-identity {
  padding:8px 0 !important;
  max-width:820px !important;
}
html body:not(.promotion-management) .track-top-stage .track-identity .track-title {
  font-size:clamp(4.5rem,6.6vw,8rem) !important;
  max-width:860px !important;
  color:#fff !important;
  line-height:.85 !important;
  text-wrap:balance;
}
html body:not(.promotion-management) .track-top-stage .track-identity .title-underline {
  display:block !important;background:#f00c42 !important;width:65px !important;margin:18px 0 !important;
}
html body:not(.promotion-management) .track-top-stage .track-identity .hero-social-row {max-width:750px !important;}
html body:not(.promotion-management) .track-top-stage .track-identity .hero-facts {max-width:740px !important;}

/* Featured events: a true section after the cover, using existing event data and links. */
html body:not(.promotion-management) .track-featured-events {
  position:relative;
  background:#f7f9fb;
  color:#102e43;
  padding:29px 20px 36px;
  border-bottom:1px solid #dce6ec;
}
html body:not(.promotion-management) .track-featured-inner {width:100%;max-width:1400px;margin:0 auto;min-width:0;}
html body:not(.promotion-management) .track-featured-header {
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 17px;
}
html body:not(.promotion-management) .track-featured-header h2 {
  font:700 clamp(2.3rem,3vw,3.4rem)/.92 Teko,Arial,sans-serif !important;
  color:#0a2d47 !important;
  text-transform:uppercase;letter-spacing:-.01em;margin:0 !important;
}
html body:not(.promotion-management) .track-featured-header h2::before {
  content:'';display:inline-block;width:32px;height:4px;background:#ef0c43;
  vertical-align:middle;margin-right:10px;transform:translateY(-4px);
}
html body:not(.promotion-management) .track-featured-all {
  display:inline-flex;align-items:center;gap:8px;
  color:#c60935 !important;text-decoration:none;
  font:700 1rem/1 Teko,Arial,sans-serif;text-transform:uppercase;white-space:nowrap;
}
html body:not(.promotion-management) .track-featured-events .desktop-hero-events {
  display:block !important;
  max-width:none !important;width:100% !important;
  margin:0 !important;padding:0 !important;
  background:transparent !important;border:0 !important;
  box-shadow:none !important;backdrop-filter:none !important;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-events-row {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
  width:100% !important;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-event {
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:space-between !important;
  gap:0 !important;
  min-width:0 !important;
  min-height:260px !important;
  padding:16px !important;
  color:#fff !important;
  border:1px solid #d7e1e6 !important;
  border-radius:5px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background-color:#102e43 !important;
  background-image:var(--hero-mini-bg,linear-gradient(135deg,#123b59,#071e32)) !important;
  background-size:cover !important;
  background-position:center !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-event::before,
html body:not(.promotion-management) .track-featured-events .hero-mini-event.has-photo::before {
  content:'' !important;position:absolute !important;inset:0 !important;z-index:-1 !important;
  border-radius:inherit !important;
  background:linear-gradient(180deg,rgba(6,28,46,.03) 4%,rgba(5,26,44,.22) 26%,rgba(4,26,43,.89) 92%) !important;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-event::after,
html body:not(.promotion-management) .track-featured-events .hero-mini-event.has-photo::after {
  content:none !important;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-date {
  display:flex !important;position:relative !important;align-self:flex-start !important;
  z-index:2 !important;flex:0 0 auto !important;
  width:53px !important;height:65px !important;padding:7px 4px !important;
  border-radius:4px !important;background:#ef0d41 !important;box-shadow:none !important;
  text-transform:uppercase !important;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-date strong {font-size:2rem !important;color:#fff !important;line-height:.85 !important;}
html body:not(.promotion-management) .track-featured-events .hero-mini-date span {font-size:1rem !important;color:#fff !important;line-height:1 !important;}
html body:not(.promotion-management) .track-featured-events .hero-mini-copy {
  display:flex !important;flex-direction:column !important;align-items:flex-start !important;
  z-index:2 !important;gap:5px !important;width:100% !important;
  color:#fff !important;margin-top:18px !important;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-eyebrow {
  font:600 .68rem/1.2 Inter,Arial,sans-serif !important;text-transform:uppercase !important;
  letter-spacing:.12em !important;color:#e6edf2 !important;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-title {
  display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;
  font:700 clamp(1.55rem,2vw,2rem)/.95 Teko,Arial,sans-serif !important;
  letter-spacing:0 !important;color:#fff !important;text-transform:uppercase !important;
  text-shadow:0 1px 6px rgba(0,0,0,.55) !important;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-meta {
  font:500 .8rem/1.25 Inter,Arial,sans-serif !important;
  color:#f3f7fa !important;margin:0 0 5px !important;
  white-space:normal !important;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-action {
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;
  min-width:180px;min-height:40px;padding:6px 16px;border-radius:3px;
  background:#e80d3c !important;color:#fff !important;
  font:700 1.13rem/1 Teko,Arial,sans-serif !important;text-transform:uppercase;
}
html body:not(.promotion-management) .track-featured-events .hero-mini-event:is(:hover,:focus-visible) .hero-mini-action {
  background:#ff1e4e !important;
}
html body:not(.promotion-management) .track-featured-empty {
  margin:0;padding:19px 0;color:#48667b;font:500 .95rem/1.45 Inter,Arial,sans-serif;
}

/* Video is available on demand, rather than floating over a second backdrop. */
html body:not(.promotion-management) .track-media-details {
  max-width:1400px !important;margin:0 auto !important;
  padding:0 20px !important;background:#fff !important;
}
html body:not(.promotion-management) .track-media-details > summary {
  display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;
  color:#123b56;font:700 1.15rem/1 Teko,Arial,sans-serif;text-transform:uppercase;
  border-bottom:1px solid #dbe5eb;list-style:none;
}
html body:not(.promotion-management) .track-media-details > summary::-webkit-details-marker {display:none;}
html body:not(.promotion-management) .track-media-details > summary i:first-child {color:#e90b40;}
html body:not(.promotion-management) .track-media-details > summary i:last-child {margin-left:auto;}
html body:not(.promotion-management) .track-media-details > .hero-video-card {
  display:block !important;width:min(100%,780px) !important;max-width:100% !important;
  margin:16px auto !important;position:relative !important;
}
html body:not(.promotion-management) .track-media-details .video-frame {
  width:100% !important;height:auto !important;aspect-ratio:16/9 !important;
  border-radius:5px !important;overflow:hidden !important;
}

@media (max-width:768px) {
  html body:not(.promotion-management) .track-top-stage {
    padding:30px 15px 29px !important;
    min-height:0 !important;
  }
  html body:not(.promotion-management) .track-top-stage .track-top-bg {
    top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;
    width:100% !important;height:100% !important;
    background-position:56% center !important;
  }
  html body:not(.promotion-management) .track-top-stage::before {
    background:linear-gradient(90deg,rgba(5,34,55,.97) 0%,rgba(5,34,55,.82) 55%,rgba(5,34,55,.53) 100%),
               linear-gradient(0deg,rgba(5,34,55,.60),transparent 65%) !important;
  }
  html body:not(.promotion-management) .track-top-stage .track-identity {padding:0 !important;max-width:100% !important;}
  html body:not(.promotion-management) .track-top-stage .track-title {
    font-size:clamp(2.6rem,12.2vw,5.5rem) !important;
    line-height:.85 !important;
    max-width:100% !important;
    text-wrap:balance !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
  html body:not(.promotion-management) .track-top-stage .hero-social-row {gap:7px !important;}
  html body:not(.promotion-management) .track-top-stage .hero-facts {gap:12px 6px !important;}
  html body:not(.promotion-management) .track-featured-events {padding:21px 13px 22px !important;}
  html body:not(.promotion-management) .track-featured-header {margin-bottom:12px !important;align-items:center;}
  html body:not(.promotion-management) .track-featured-header h2 {
    font-size:clamp(2.1rem,7.7vw,2.8rem) !important;
  }
  html body:not(.promotion-management) .track-featured-header h2::before {width:18px;margin-right:7px;}
  html body:not(.promotion-management) .track-featured-all {font-size:.92rem !important;}
  html body:not(.promotion-management) .track-featured-events .hero-mini-events-row {
    display:flex !important;flex-direction:column !important;gap:10px !important;
  }
  html body:not(.promotion-management) .track-featured-events .hero-mini-event {
    min-height:198px !important;
    padding:12px !important;
  }
  html body:not(.promotion-management) .track-featured-events .hero-mini-date {
    width:44px !important;height:54px !important;
  }
  html body:not(.promotion-management) .track-featured-events .hero-mini-date strong {font-size:1.55rem !important;}
  html body:not(.promotion-management) .track-featured-events .hero-mini-date span {font-size:.84rem !important;}
  html body:not(.promotion-management) .track-featured-events .hero-mini-title {font-size:1.65rem !important;}
  html body:not(.promotion-management) .track-featured-events .hero-mini-action {min-height:36px !important;min-width:150px !important;font-size:1rem !important;}
  html body:not(.promotion-management) .track-media-details {padding:0 13px !important;}
}
@media(max-width:360px) {
  html body:not(.promotion-management) .track-top-stage .track-title {font-size:clamp(2.32rem,12vw,3.3rem) !important;}
  html body:not(.promotion-management) .track-featured-header h2 {font-size:2rem !important;}
  html body:not(.promotion-management) .track-featured-all {font-size:.8rem !important;}
}

/* Accent tracks dynamically, without changing the original track name or binding. */
html body:not(.promotion-management) .track-top-stage .track-identity .track-title-accent {
  color:#f11245 !important;
  -webkit-text-fill-color:#f11245 !important;
  text-shadow:0 2px 9px rgba(5,24,39,.28) !important;
}
@media(max-width:768px) {
  /* Two strong cards mobile; the complete event list stays in Calendario. */
  html body:not(.promotion-management) .track-featured-events .hero-mini-event:nth-child(n+3) { display:none !important; }
}