<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Racing | The Sporting Almanac</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Global site styles -->
  <link rel="stylesheet" href="style.css">

  <style>
    /* =========================
       RACING PAGE (LOCAL ONLY)
       ========================= */

    .racing-hero {
      max-width: 1200px;
      margin: 36px auto 24px;
      padding: 0 24px;
      position: relative;
    }

    .racing-hero img {
      width: 100%;
      height: 360px;
      object-fit: cover;
      border-radius: 18px;
      box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    }

    /* Overlay text */
    .racing-hero-overlay {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 24px;
      padding: 22px 26px;
      border-radius: 14px;
      background: linear-gradient(
        to top,
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.00)
      );
      color: #fff;
    }

    .racing-hero-overlay h1 {
      margin: 0 0 6px 0;
      font-size: 36px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      line-height: 1.1;
    }

    .racing-hero-overlay p {
      margin: 0;
      font-size: 16px;
      max-width: 720px;
      color: rgba(255,255,255,0.92);
    }

    .racing-intro {
      max-width: 900px;
      margin: 36px auto 24px;
      padding: 0 24px;
      text-align: center;
    }

    .racing-intro h2 {
      font-size: 32px;
      margin-bottom: 12px;
    }

    .racing-intro p {
      font-size: 18px;
      color: #444;
    }

    /* Scope strip */
    .racing-stats {
      max-width: 1000px;
      margin: 30px auto 10px;
      padding: 0 24px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .racing-stat {
      background: #f8f8f8;
      border-radius: 14px;
      padding: 18px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.06);
      text-align: center;
    }

    .racing-stat span {
      display: block;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #777;
      margin-bottom: 6px;
    }

    .racing-stat strong {
      font-size: 20px;
      color: #111;
    }

    /* Cards */
    .racing-sections {
      max-width: 1200px;
      margin: 48px auto 80px;
      padding: 0 24px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 28px;
    }

    .racing-card {
      text-decoration: none;
      color: #111;
      border-radius: 16px;
      overflow: hidden;
      background: #f4f4f4;
      box-shadow: 0 10px 22px rgba(0,0,0,0.10);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .racing-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(0,0,0,0.16);
    }

    .racing-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .racing-card h3 {
      font-size: 20px;
      margin: 16px 16px 6px;
    }

    .racing-card p {
      font-size: 15px;
      color: #555;
      margin: 0 16px 18px;
    }

    /* Responsive */
    @media (max-width: 700px) {
      .racing-hero img {
        height: 240px;
      }

      .racing-hero-overlay h1 {
        font-size: 28px;
      }

      .racing-hero-overlay p {
        font-size: 15px;
      }

      .racing-intro h2 {
        font-size: 26px;
      }
    }
  </style>
</head>

<body>

  <!-- =========================
       NAV
       ========================= -->
  <nav class="main-nav">
    <a href="index.html">Home</a>
    <a href="racing.html" class="active">Racing</a>
    <a href="g1-archive.html">G1 Archive</a>
    <a href="breeders-cup.html">Breeders’ Cup</a>
    <a href="hong-kong.html">Hong Kong</a>
  </nav>

  <!-- =========================
       HERO
       ========================= -->
  <div class="racing-hero">
    <img src="images/racing-hero-global.jpg" alt="Global horse racing archive">
    <div class="racing-hero-overlay">
      <h1>Racing Archive</h1>
      <p>The global history of elite thoroughbred racing.</p>
    </div>
  </div>

  <!-- =========================
       INTRO
       ========================= -->
  <div class="racing-intro">
    <h2>The Racing Archive</h2>
    <p>
      A curated record of the world’s most important races — spanning centuries,
      continents and champions.
    </p>
  </div>

  <!-- =========================
       STATS
       ========================= -->
  <div class="racing-stats">
    <div class="racing-stat">
      <span>Coverage</span>
      <strong>Global</strong>
    </div>
    <div class="racing-stat">
      <span>History</span>
      <strong>250+ Years</strong>
    </div>
    <div class="racing-stat">
      <span>Focus</span>
      <strong>Elite Racing</strong>
    </div>
    <div class="racing-stat">
      <span>Explore</span>
      <strong>By Race & Year</strong>
    </div>
  </div>

  <!-- =========================
       SECTIONS
       ========================= -->
  <div class="racing-sections">

    <a class="racing-card" href="g1-archive.html">
      <img src="images/g1-hero.jpg" alt="Group 1 Archive">
      <h3>Group 1 Archive</h3>
      <p>Over 250 years of the world’s greatest races.</p>
    </a>

    <a class="racing-card" href="breeders-cup.html">
      <img src="images/carnival-breeders-cup.jpg" alt="Breeders’ Cup">
      <h3>Breeders’ Cup</h3>
      <p>The richest two days in world racing.</p>
    </a>

    <a class="racing-card" href="hong-kong.html">
      <img src="images/hong-kong-hero.jpg" alt="Hong Kong International Races">
      <h3>Hong Kong International</h3>
      <p>The crown jewel of Asian racing.</p>
    </a>

  </div>

</body>
</html>
