/* ============================================================================
   hero.css — THE inner-page hero. One source of truth for Lessons, Rentals, Shop,
   Certified Pre-Owned, and About so they are size/font/style identical.

   Linked LAST on each page (after its inline <style>), so these rules win over any
   older inline .hero* rules — no removal needed. The HOMEPAGE has its own signature
   carousel hero and does NOT load this file.
   ============================================================================ */

.hero {
  height: clamp(600px, 82vh, 780px);  /* FIXED height → every inner hero is the same size */
  display: flex;
  align-items: flex-end;
  padding: 0 48px 136px;              /* bottom padding reserves clearance for the .hero-bar strip */
  position: relative;
  overflow: hidden;
  margin-top: 104px;                 /* clear the fixed nav (exactly its height) */
  background:
    radial-gradient(ellipse at 60% 40%, rgba(0,150,166,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 70%, rgba(27,213,254,.07) 0%, transparent 45%),
    var(--navy);
}
.hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(27,213,254,.2), transparent);
}

.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(27,213,254,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,213,254,.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 30% 50%, black 20%, transparent 70%);
}

.hero-content { position: relative; z-index: 2; max-width: 700px; }

.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Rubik', sans-serif; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--light); opacity: .5; margin-bottom: 24px;
}
.breadcrumb a { color: var(--light); text-decoration: none; }
.breadcrumb a:hover { color: var(--cyan); }
/* Breadcrumb is moved to be a DIRECT child of .hero and pinned to the TOP (just below the nav),
   instead of floating above the bottom-aligned content. */
.hero > .breadcrumb { position: absolute; top: 30px; left: 48px; margin: 0; z-index: 3; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Rubik', sans-serif; font-weight: 300; letter-spacing: .4em;
  font-size: 11px; color: var(--cyan); text-transform: uppercase; margin-bottom: 20px;
}
.hero-tag::before { content: ''; display: block; width: 24px; height: 1px; background: var(--cyan); }

.hero-h1 {
  font-family: 'Rubik', sans-serif; font-style: italic;
  font-size: clamp(52px, 7vw, 76px); line-height: .92; letter-spacing: .01em;
  margin-bottom: 24px;
}
.hero-h1 .w1 { display: block; color: var(--white); }
.hero-h1 .w2 { display: block; color: var(--cyan); }

.hero-sub {
  font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--light);
  max-width: 540px; margin-bottom: 36px;
}
.hero-sub strong { color: var(--white); font-weight: 500; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Full-width BOTTOM BAR (like the homepage stats bar): an absolute strip flush at the hero's
   bottom edge with centered, divided cells. Requires .hero-bar to be a DIRECT CHILD of .hero
   (moved out of .hero-content on each page) so it spans the full width. */
.hero-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  min-height: 105px;                 /* SAME height as the homepage stats bar */
  display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 0;
  background: rgba(16,33,43,.65);
  border-top: 1px solid rgba(0,150,166,.13);
  backdrop-filter: blur(12px);
  z-index: 3;
}
.hero-bar .pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; border-right: 1px solid rgba(0,150,166,.1);
  border-radius: 0; padding: 0 40px; white-space: nowrap;   /* full-height cells → full-height dividers */
  font-family: 'Rubik', sans-serif; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--light);
}
.hero-bar .pill:last-child { border-right: none; }

@media (max-width: 768px) {
  /* Stack the hero as a COLUMN: breadcrumb → content → bottom bar. On desktop the hero is a
     bottom-aligned flex ROW with the breadcrumb/bar positioned absolutely; if we only flip the
     bar to position:relative (as before) it becomes a flex item BESIDE the text and overflows
     off the right, while align-items:flex-end clips the eyebrow off the top. Going column fixes
     both. */
  .hero {
    height: auto; min-height: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 32px 24px 0; margin-top: 72px;
  }
  .hero > .breadcrumb { position: relative; top: auto; left: auto; margin: 0 0 18px; }
  .hero-content { max-width: none; margin-bottom: 32px; }
  /* Bottom bar: full-bleed to the hero's padded edges, pills stacked vertically, labels wrap. */
  .hero-bar {
    position: relative; left: auto; right: auto;
    margin: 0 -24px; min-height: 0;
    flex-direction: column; flex-wrap: nowrap;
    backdrop-filter: none;
  }
  .hero-bar .pill {
    justify-content: flex-start; white-space: normal;
    border-right: 0; border-bottom: 1px solid rgba(0,150,166,.1);
    padding: 14px 24px;
  }
  .hero-bar .pill:last-child { border-bottom: 0; }
}