/* ============================================================
   RWJBarnabas Health × Red Bull New York — Landing Page
   Namespace: rb26-
   Notes:
   - Class selectors only (no #id styling), native CSS nesting.
   - Wrap the whole page in <div class="rb26"> for isolation.
   - Swap ./assets/* paths for your CMS image paths (/images/...).
   ============================================================ */

.rb26 {
  /* Brand palette (sampled from the approved mock) */
  --rb-red:       #cc0000;
  --rb-red-ink:   #df0001;
  --rb-red-deep:  #a91414;
  --rb-blue:      #0057a2;
  --rb-blue-soft: #5d9ccf;
  --rb-navy:      #003087;
  --rb-ink:       #111111;
  --rb-body:      #333333;
  --rb-white:     #ffffff;
  --rb-footer-bg: #eaf2fa;
  --rb-line:      #d7e1ec;

  /* Grass band: photo + green darkening so white type stays legible */
  --rb-grass-tint: linear-gradient(180deg, rgba(20,58,22,.72), rgba(15,46,18,.80));

  --rb-max:    1520px;
  --rb-radius: 4px;
  --rb-shadow: 0 14px 34px rgba(3, 18, 33, .16);

  --rb-display: "Anton", "Arial Narrow", Arial, Helvetica, sans-serif;
  /* Anton is single-weight; this stroke thickens the big headlines ~50% heavier */
  --rb-heavy-stroke: 0.04em;
  --rb-body-font: Arial, Helvetica, "Segoe UI", sans-serif;

  font-family: var(--rb-body-font);
  color: var(--rb-ink);
  line-height: 1.6;
  background: var(--rb-white);

  *, *::before, *::after { box-sizing: border-box; }

  img { max-width: 100%; height: auto; display: block; }

  /* ---------- Shared layout ---------- */
  .rb26-wrap {
    max-width: var(--rb-max);
    margin: 0 auto;
    padding: 0 40px;
  }

  .rb26-display {
    font-family: var(--rb-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.05;
    margin: 0;
  }

  /* ============================================================
     1. TOP HEADER BAR
     ============================================================ */
  .rb26-topbar {
    background: var(--rb-white);
    border-bottom: 1px solid var(--rb-line);

    .rb26-topbar-inner {
      max-width: var(--rb-max);
      margin: 0 auto;
      padding: 18px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .rb26-topbar-logo img { height: 52px; width: auto; }

    .rb26-topbar-contact {
      color: var(--rb-blue);
      font-weight: 700;
      font-size: 17px;
      text-align: right;

      a { color: inherit; text-decoration: none; }
      a:hover { color: var(--rb-red); }
    }
  }

  /* ============================================================
     2. HERO
     ============================================================ */
  .rb26-hero {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    background-color: #8fb8dd;
    background-image: url("/images/red-bull/hero.jpg");
    background-size: cover;
    background-position: center right;
    overflow: hidden;

    /* left-side scrim for headline legibility */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,0) 72%);
      pointer-events: none;
    }

    .rb26-hero-inner {
      position: relative;
      z-index: 1;
      max-width: var(--rb-max);
      width: 100%;
      margin: 0 auto;
      padding: 40px;
    }

    .rb26-hero-content { max-width: 820px; }

    .rb26-hero-lockup img {
      width: 340px;
      max-width: 72%;
      margin-bottom: 18px;
    }

    .rb26-hero-tagline {
      color: var(--rb-white);
      font-weight: 800;
      font-size: 22px;
      margin: 0 0 12px;
      text-shadow: 0 2px 6px rgba(0,0,0,.45);
    }

    .rb26-hero-title {
      color: var(--rb-white);
      font-size: clamp(44px, 6.4vw, 84px);
      text-shadow: 0 3px 10px rgba(0,0,0,.45);
      -webkit-text-stroke: var(--rb-heavy-stroke) currentColor;
      paint-order: stroke fill;
    }
  }

  /* ============================================================
     3. INTRO — two columns + pull quote
     ============================================================ */
  .rb26-intro {
    padding: 56px 0;

    .rb26-intro-top {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 48px;
      align-items: start;
      margin-bottom: 28px;
    }

    .rb26-intro-head {
      color: var(--rb-red);
      font-weight: 800;
      font-size: clamp(26px, 2.6vw, 34px);
      line-height: 1.08;
      -webkit-text-stroke: var(--rb-heavy-stroke) currentColor;
      paint-order: stroke fill;
    }

    p { margin: 0 0 1em; color: var(--rb-ink); font-size: 16px; }

    .rb26-quote {
      margin: 16px 0 18px;
      font-size: 21px;
      line-height: 1.55;
      color: var(--rb-ink);

      .rb26-qmark {
        color: var(--rb-ink);
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 700;
        font-size: 40px;
        line-height: 0;
        vertical-align: -10px;
      }
    }

    .rb26-quote-attr { font-size: 16px; margin-bottom: 1.5em;

      strong { color: var(--rb-ink); }
      span { color: var(--rb-body); }
    }
  }

  /* ============================================================
     4. GRASS BAND — health of the game + Find a doctor CTA
     ============================================================ */
  .rb26-grass {
    background-image: var(--rb-grass-tint), url("/images/red-bull/grass.jpg");
    background-size: cover;
    background-position: center;
    color: var(--rb-white);
    padding: 52px 0;

    .rb26-grass-inner {
      max-width: var(--rb-max);
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1.25fr 1fr;
      gap: 48px;
      align-items: center;
    }

    .rb26-grass-lockup img { width: 300px; max-width: 80%; margin-bottom: 18px; }

    .rb26-grass-head {
      color: var(--rb-white);
      font-size: clamp(26px, 3.4vw, 40px);
      margin-bottom: 14px;
      text-shadow: 0 2px 6px rgba(0,0,0,.5);
      -webkit-text-stroke: var(--rb-heavy-stroke) currentColor;
      paint-order: stroke fill;
    }

    .rb26-grass-body {
      color: var(--rb-white);
      max-width: 520px;
      font-size: 15px;
      line-height: 1.7;
      text-shadow: 0 1px 3px rgba(0,0,0,.55);
      margin: 0;

      strong { color: var(--rb-white); }
    }

    .rb26-grass-cta { text-align: left; }

    .rb26-cta-head {
      color: var(--rb-white);
      font-size: clamp(24px, 2.8vw, 34px);
      margin-bottom: 8px;
      text-shadow: 0 2px 6px rgba(0,0,0,.5);
      -webkit-text-stroke: var(--rb-heavy-stroke) currentColor;
      paint-order: stroke fill;
    }

    .rb26-cta-sub {
      color: var(--rb-white);
      font-size: 17px;
      margin: 0 0 18px;
      text-shadow: 0 1px 3px rgba(0,0,0,.5);
    }

    .rb26-find {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      min-width: 240px;
      background: var(--rb-white);
      color: var(--rb-ink);
      text-decoration: none;
      font-weight: 700;
      font-size: 15px;
      padding: 13px 20px;
      border-radius: 2px;
      box-shadow: var(--rb-shadow);
      transition: transform .15s ease, box-shadow .2s ease;

      .rb26-find-arrow { color: var(--rb-red); font-size: 18px; font-weight: 700; }
      &:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(3,18,33,.26); }
    }
  }

  /* ============================================================
     5. SERVICES + big blue statement
     ============================================================ */
  .rb26-services {
    padding: 56px 0;

    .rb26-services-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: start;
      margin-bottom: 36px;
    }

    .rb26-guided {
      font-size: 15px;
      line-height: 1.65;
      margin: 0;

      strong {
        font-family: var(--rb-display);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .3px;
        font-size: 23px;
        color: var(--rb-ink);
        margin-right: 6px;
      }
    }

    .rb26-services-label {
      font-size: 23px;
      color: var(--rb-ink);
      margin: 0 0 12px;
    }

    .rb26-services-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;

      li {
        font-size: 15px;
        line-height: 1.5;
        padding-left: 16px;
        position: relative;

        &::before {
          content: "•";
          position: absolute;
          left: 0;
          color: var(--rb-ink);
        }
      }
    }

    .rb26-statement {
      color: var(--rb-blue);
      font-size: clamp(28px, 4vw, 48px);
      margin-bottom: 18px;
      -webkit-text-stroke: var(--rb-heavy-stroke) currentColor;
      paint-order: stroke fill;
    }

    .rb26-services-foot { font-size: 15px; line-height: 1.7; margin: 0; }
  }

  /* ============================================================
     6. FOOTER
     ============================================================ */
  .rb26-footer {
    background: var(--rb-footer-bg);
    border-top: 3px solid var(--rb-navy);
    padding: 44px 0 36px;

    .rb26-footer-logo img { width: 280px; margin-bottom: 10px; }

    .rb26-footer-tag { font-weight: 700; color: var(--rb-ink); margin: 0 0 28px; }

    .rb26-footer-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      margin-bottom: 28px;
    }

    .rb26-footer-col-label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--rb-navy);
      font-weight: 700;
      border-bottom: 1px solid var(--rb-line);
      padding-bottom: 8px;
      margin-bottom: 10px;
    }

    .rb26-footer-phone {
      color: var(--rb-navy);
      font-weight: 700;
      font-size: 18px;
      text-decoration: none;
    }

    .rb26-social {
      display: flex;
      gap: 10px;

      a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 4px;
        background: var(--rb-blue);
        color: var(--rb-white);
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
        transition: background .2s ease;

        &:hover { background: var(--rb-navy); }
      }
    }

    .rb26-lang-label { font-weight: 700; color: var(--rb-navy); margin: 0 0 8px; }

    .rb26-lang {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 6px 22px;

      li { color: var(--rb-blue); font-size: 14px; }
    }
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 992px) {
    .rb26-intro .rb26-intro-top,
    .rb26-grass .rb26-grass-inner,
    .rb26-services .rb26-services-top,
    .rb26-footer .rb26-footer-cols {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .rb26-grass .rb26-grass-cta { text-align: left; }
  }

  @media (max-width: 768px) {
    .rb26-wrap,
    .rb26-topbar .rb26-topbar-inner,
    .rb26-hero .rb26-hero-inner,
    .rb26-grass .rb26-grass-inner { padding-left: 22px; padding-right: 22px; }

    .rb26-topbar .rb26-topbar-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .rb26-topbar .rb26-topbar-contact { text-align: left; }

    .rb26-hero { min-height: 380px; background-position: 70% center; }
    .rb26-hero .rb26-hero-title { font-size: clamp(40px, 11vw, 60px); }

  }
}