/* Races page: hero, then race cards (photo + details), upcoming then previous.
   Loaded after site.css by races.html only. */
.rc-hero { padding: 104px 26px 48px; border-bottom: 1px solid var(--line); }
.rc-hero-in { max-width: var(--max); margin-inline: auto; }
.rc-hero .explore-h { margin-bottom: 20px; }
.evx-hero .explore-h { margin-bottom: 0; }
.rc-sub { margin-top: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--bone-60); }
@media (min-width: 900px) { .rc-hero { padding: 160px var(--sp-xl) 72px; } }

.rc-sec { max-width: calc(var(--max) + 52px); margin-inline: auto; padding: 48px 26px 0; }
.rc-sec:last-of-type { padding-bottom: 120px; }
@media (min-width: 900px) { .rc-sec { max-width: calc(var(--max) + 96px); padding: 72px var(--sp-xl) 0; }
  .rc-sec:last-of-type { padding-bottom: 160px; } }
.rc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }

.race { background: var(--ink2); overflow: hidden; }
@media (min-width: 900px) { .race { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.race-pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--charcoal); }
.race-pic img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .race-pic { aspect-ratio: 4 / 3; } }
/* Two photos side by side (Rome) */
.race-pic-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 9 / 8; }
.race-pic-duo img { object-position: center 30%; }
.race-badge { position: absolute; top: 16px; left: 16px; padding: 6px 10px; font-family: var(--font-mono); font-size: 9px;
              letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); background: var(--bone); }
.race-body { display: flex; flex-direction: column; padding: 24px 24px 28px; }
@media (min-width: 900px) { .race-body { padding: 40px; } }
.race-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-tag { padding: 5px 9px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
          color: var(--bone-60); border: 1px solid var(--line); }
.rc-tag-go { color: #7FD08A; border-color: rgba(127,208,138,0.4); }
.rc-tag-warn { color: #FFDC4D; border-color: rgba(255,220,77,0.4); }
.race-name { margin-top: 18px; font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; letter-spacing: -0.01em; }
.race-meta { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.8; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-40); }
.race-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 20px;
             border-top: 1px solid var(--line); }
@media (min-width: 900px) { .race-foot { margin-top: auto; } }
.race-price { font-weight: 700; font-size: 20px; line-height: 1.1; }
.race-note { margin-top: 4px; font-size: 13px; color: var(--bone-40); }
.race-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
            background: var(--bone); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none;
            transition: background-color 200ms ease; }
.race-cta:hover { background: #fff; }
.race-past .race-cta { background: none; color: var(--bone); border: 1px solid var(--bone-40); }
.race-past .race-cta:hover { border-color: var(--bone); }
/* Rome: the race reel loops silently behind the card photo slot */
.race-pic-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .race-pic-vid video { display: none; }
  .race-pic-vid { background: url(images/races/rome-poster.jpg) center / cover; } }

/* Rome: landscape card - the reel runs full width at its own shape (1280 x 528),
   nothing cropped, details underneath */
.race-wide { display: block; }
.race-wide .race-pic { aspect-ratio: 1280 / 528; }
.race-wide .race-pic-vid video { object-fit: contain; background: #000; }
@media (min-width: 900px) { .race-wide .race-body { padding: 32px 40px 36px; }
  .race-wide .race-foot { margin-top: 24px; } }

/* Green "Now booking" button above the page heading */
.rc-hero-tag { display: inline-block; margin-bottom: 18px; font-size: 11px; padding: 8px 12px; text-decoration: none; }
.rc-hero-tag:hover { background: rgba(127,208,138,0.12); }