/*
 * RUNPO Race Calendar 2027
 * Softer editorial calendar layer. Loaded after the existing race styles.
 */

:root{
  --rc-yellow:#ffd000;
  --rc-lime:#c8ff55;
  --rc-violet:#7657ff;
  --rc-ink:#0b0d0f;
  --rc-paper:#f4f2eb;
  --rc-card:#fff;
  --rc-muted:#666962;
  --rc-line:rgba(11,13,15,.12);
  --rc-shadow:0 22px 70px rgba(24,25,21,.09);
}

body.calendar-data-center{
  background:
    radial-gradient(circle at 0 18%,rgba(118,87,255,.08),transparent 29rem),
    radial-gradient(circle at 100% 42%,rgba(255,208,0,.11),transparent 34rem),
    var(--rc-paper);
}

.calendar-v2 .shell{
  width:min(1380px,calc(100% - 48px));
}

/* Hero: editorial rather than a full-bleed rectangular banner. */
.calendar-v2 .race-hero{
  min-height:590px;
  margin:0 14px;
  border-radius:0 0 52px 52px;
  background:#090b0d;
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.calendar-v2 .race-hero img{
  inset:0 0 0 45%;
  width:55%;
  height:100%;
  border-radius:0 0 52px 0;
  filter:saturate(.82) contrast(1.06);
  opacity:.72;
}

.calendar-v2 .race-hero::before{
  background:
    linear-gradient(90deg,#090b0d 0%,#090b0d 40%,rgba(9,11,13,.88) 54%,rgba(9,11,13,.16) 80%),
    linear-gradient(0deg,rgba(9,11,13,.84),transparent 62%);
}

.calendar-v2 .race-hero::after{
  z-index:1;
  background:
    radial-gradient(circle at 87% 20%,var(--rc-yellow) 0 5px,transparent 6px),
    radial-gradient(circle at 92% 26%,var(--rc-lime) 0 3px,transparent 4px),
    linear-gradient(118deg,transparent 0 76%,rgba(255,208,0,.66) 76.1% 76.22%,transparent 76.34%);
}

.calendar-v2 .race-hero-inner{
  padding:146px 0 52px;
}

.calendar-v2 .race-hero .kicker{
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.calendar-v2 .hero-copy{
  display:block;
}

.calendar-v2 .race-hero h1{
  max-width:720px;
  font-size:clamp(74px,8.5vw,126px);
  text-shadow:0 7px 36px rgba(0,0,0,.26);
}

.calendar-v2 .hero-copy-side{
  max-width:520px;
  margin:28px 0 0;
  padding:0 0 0 18px;
  border:0;
  border-left:3px solid var(--rc-yellow);
  background:transparent;
  backdrop-filter:none;
}

.calendar-v2 .stats{
  width:min(860px,100%);
  margin-top:38px;
  border:0;
  border-radius:24px 24px 42px 24px;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.calendar-v2 .stats div{
  min-height:82px;
  border-color:rgba(255,255,255,.1);
}

/* Floating search studio. */
.calendar-v2 .race-filter-zone{
  margin-top:-30px;
  padding-bottom:42px;
}

.calendar-v2 .race-scope-switcher{
  width:min(720px,calc(100% - 40px));
  margin:0 auto;
  gap:8px;
  padding:8px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:var(--rc-shadow);
  backdrop-filter:blur(20px);
}

.calendar-v2 .race-scope-switcher a{
  min-height:54px;
  border-radius:999px;
  background:transparent;
  color:var(--rc-muted);
}

.calendar-v2 .race-scope-switcher a:hover,
.calendar-v2 .race-scope-switcher a.active{
  background:var(--rc-ink);
  color:#fff;
}

.calendar-v2 .race-scope-switcher a.active strong{
  background:var(--rc-yellow);
  color:var(--rc-ink);
}

.calendar-v2 .race-filter-form{
  gap:14px;
  padding-top:20px;
}

.calendar-v2 .race-filter-location-panel,
.calendar-v2 .race-filter-detail-panel{
  overflow:hidden;
  border:1px solid rgba(11,13,15,.1);
  border-radius:30px;
  box-shadow:0 16px 48px rgba(24,25,21,.07);
}

.calendar-v2 .race-filter-location-panel{
  background:
    radial-gradient(circle at 0 0,rgba(255,208,0,.24),transparent 18rem),
    linear-gradient(135deg,#0c0e10,#1a1d20);
}

.calendar-v2 .race-filter-detail-panel{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
}

.calendar-v2 .race-filter-panel-heading > span{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:0;
  border-radius:15px 15px 21px 15px;
  background:var(--rc-yellow);
  box-shadow:none;
}

.calendar-v2 .race-filter-field input,
.calendar-v2 .race-filter-field select,
.calendar-v2 .race-filter-check{
  min-height:48px;
  border-radius:15px;
  background:#fff;
}

.calendar-v2 .race-filter-submit,
.calendar-v2 .race-filter-reset{
  min-height:46px;
  border-radius:999px;
}

.calendar-v2 .race-filter-submit{
  background:var(--rc-yellow);
  color:var(--rc-ink);
}

.calendar-v2 .race-utility-links{
  gap:8px;
  margin-top:16px;
}

.calendar-v2 .race-utility-links > a{
  padding:8px 11px;
  border:1px solid var(--rc-line);
  border-radius:999px;
  background:rgba(255,255,255,.58);
  color:#40433e;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}

.calendar-v2 .race-utility-links > a:hover{
  transform:translateY(-2px);
  background:var(--rc-ink);
  color:#fff;
}

/* Calendar: spacious month groups and deliberately varied card silhouettes. */
.calendar-v2 .calendar{
  padding:34px 0 104px;
}

.calendar-v2 .calendar-section-head{
  align-items:center;
  margin-bottom:46px;
  padding:0;
  border:0;
}

.calendar-v2 .calendar-section-head h2{
  max-width:850px;
  font-size:clamp(52px,6vw,84px);
}

.calendar-v2 .calendar-head-meta{
  align-items:flex-start;
  min-width:190px;
  padding:17px 18px;
  border:1px solid var(--rc-line);
  border-radius:18px 18px 30px 18px;
  background:rgba(255,255,255,.62);
}

.calendar-v2 .calendar-head-meta strong{
  padding:0;
  border:0;
  background:transparent;
  font-size:9px;
}

.calendar-v2 .month{
  position:relative;
  margin-bottom:64px;
  padding-left:124px;
}

.calendar-v2 .month-title{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  width:94px;
  padding:14px 10px;
  border-radius:18px 18px 30px 18px;
  background:var(--rc-ink);
  color:#fff;
  line-height:1.5;
}

.calendar-v2 .month-title::before{
  width:30px;
  height:5px;
  border-radius:999px;
}

.calendar-v2 .race-row{
  grid-template-columns:84px minmax(0,1fr) auto;
  gap:24px;
  margin-bottom:12px;
  padding:19px 20px 19px 16px;
  border:1px solid rgba(11,13,15,.1);
  border-radius:24px 24px 24px 38px;
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 32px rgba(20,21,18,.045);
  backdrop-filter:blur(14px);
}

.calendar-v2 .race-row:nth-child(3n){
  border-radius:38px 22px 38px 22px;
}

.calendar-v2 .race-row:nth-child(4n){
  background:linear-gradient(115deg,#fff 0 76%,rgba(200,255,85,.14));
}

.calendar-v2 .race-row:hover{
  transform:translateY(-4px) rotate(-.1deg);
  border-color:rgba(11,13,15,.24);
  box-shadow:0 22px 58px rgba(20,21,18,.09);
}

.calendar-v2 .race-row-runpo{
  background:
    radial-gradient(circle at 98% 0,rgba(255,208,0,.2),transparent 18rem),
    #111416;
  color:#fff;
}

.calendar-v2 .race-date{
  min-height:82px;
  border-radius:18px 18px 28px 18px;
  background:#f0eee7;
  color:var(--rc-ink);
}

.calendar-v2 .race-date strong{
  color:var(--rc-ink);
}

.calendar-v2 .race-date span{
  color:var(--rc-muted);
}

.calendar-v2 .race-row-runpo .race-date{
  background:var(--rc-yellow);
}

.calendar-v2 .race-main h3{
  font-size:clamp(29px,2.8vw,43px);
  line-height:.94;
  text-wrap:balance;
}

.calendar-v2 .race-main h3 a{
  background-position:0 calc(100% - 1px);
  border-radius:4px;
}

.calendar-v2 .chips{
  gap:7px;
}

.calendar-v2 .chip{
  padding:6px 9px;
  border-color:transparent;
  border-radius:999px;
  background:#eeece5;
}

.calendar-v2 .race-row-runpo .race-meta,
.calendar-v2 .race-row-runpo .race-utility-links,
.calendar-v2 .race-row-runpo .race-utility-links span{
  color:rgba(255,255,255,.62);
}

.calendar-v2 .race-row-runpo .chip{
  background:rgba(255,255,255,.1);
  color:#fff;
}

.calendar-v2 .race-row-runpo .chip.yellow{
  background:var(--rc-yellow);
  color:var(--rc-ink);
}

.calendar-v2 .race-actions{
  min-width:126px;
}

.calendar-v2 .race-actions .btn{
  min-height:44px;
  border-radius:999px;
}

.calendar-v2 .race-actions .btn.ghost{
  border-color:var(--rc-line);
  background:#fff;
}

.calendar-v2 .archive-panel{
  overflow:hidden;
  border:1px solid var(--rc-line);
  border-radius:28px 28px 44px 28px;
  background:rgba(255,255,255,.75);
}

.calendar-v2 .archive-card{
  border-radius:18px 18px 28px 18px;
}

.calendar-v2 .calendar-seo{
  margin:0 14px 14px;
  border-radius:52px;
  background:
    radial-gradient(circle at 92% 15%,rgba(118,87,255,.3),transparent 25rem),
    linear-gradient(130deg,#0a0c0e,#171a1d);
}

.calendar-v2 .calendar-seo::after{
  content:"RUN";
  right:-35px;
  bottom:-78px;
  font-size:240px;
}

@media(max-width:1000px){
  .calendar-v2 .race-hero img{
    inset:0;
    width:100%;
  }

  .calendar-v2 .race-hero::before{
    background:linear-gradient(90deg,rgba(7,9,10,.96),rgba(7,9,10,.72) 68%,rgba(7,9,10,.42));
  }

  .calendar-v2 .month{
    padding-left:0;
  }

  .calendar-v2 .month-title{
    position:static;
    width:max-content;
    margin-bottom:13px;
    flex-direction:row;
    align-items:center;
    padding:9px 13px;
    border-radius:999px;
  }
}

@media(max-width:720px){
  .calendar-v2 .shell{
    width:min(100% - 24px,1380px);
  }

  .calendar-v2 .race-hero{
    min-height:690px;
    margin:0 5px;
    border-radius:0 0 34px 34px;
  }

  .calendar-v2 .race-hero img{
    border-radius:0 0 34px 34px;
  }

  .calendar-v2 .race-hero-inner{
    padding:112px 0 34px;
  }

  .calendar-v2 .race-hero h1{
    font-size:clamp(58px,18vw,78px);
  }

  .calendar-v2 .hero-copy-side{
    margin-top:22px;
  }

  .calendar-v2 .stats{
    border-radius:20px 20px 30px 20px;
  }

  .calendar-v2 .race-scope-switcher{
    width:calc(100% - 14px);
    gap:4px;
    padding:5px;
    border-radius:24px;
  }

  .calendar-v2 .race-scope-switcher a{
    min-height:58px;
    border-radius:19px;
  }

  .calendar-v2 .race-filter-location-panel,
  .calendar-v2 .race-filter-detail-panel{
    border-radius:24px;
  }

  .calendar-v2 .calendar-section-head{
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:32px;
  }

  .calendar-v2 .calendar-head-meta{
    width:100%;
    border-radius:17px 17px 26px 17px;
  }

  .calendar-v2 .month{
    margin-bottom:46px;
  }

  .calendar-v2 .race-row,
  .calendar-v2 .race-row:nth-child(3n){
    grid-template-columns:64px minmax(0,1fr);
    gap:13px;
    padding:13px;
    border-radius:20px 20px 29px 20px;
  }

  .calendar-v2 .race-date{
    min-height:68px;
    border-radius:15px 15px 23px 15px;
  }

  .calendar-v2 .race-main h3{
    font-size:29px;
  }

  .calendar-v2 .race-actions{
    padding-left:0;
  }

  .calendar-v2 .calendar-seo{
    margin:0 5px 5px;
    border-radius:34px;
  }
}

@media(max-width:430px){
  .calendar-v2 .race-main{
    min-width:0;
  }

  .calendar-v2 .race-main h3,
  .calendar-v2 .race-main h3 a{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .calendar-v2 .race-scope-switcher{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .calendar-v2 .race-scope-switcher a{
    justify-items:center;
    text-align:center;
  }

  .calendar-v2 .race-scope-switcher a span{
    font-size:8px;
  }

  .calendar-v2 .race-utility-links{
    flex-wrap:wrap;
    overflow-x:hidden;
    padding-bottom:2px;
  }

  .calendar-v2 .race-utility-links > a{
    flex:0 1 auto;
  }
}