/* ═══════════════════════════════════════════════════════
   IVAN.BAR — Hero (Sea Birds partnership variant)
   Sponsorship of The Sea Birds in the World's Toughest Row
   ═══════════════════════════════════════════════════════ */

#hero {
  position: relative;
  overflow: hidden;
  /* Override .section padding so we can size the hero to exactly the visible
     viewport (minus the fixed header and the promo ribbon above it) and
     vertically center its content with symmetric whitespace top/bottom. */
  padding: 0;
  --hero-fill: calc(100vh - var(--header-height) - var(--promo-height));
  min-height: var(--hero-fill);
  min-height: calc(100dvh - var(--header-height) - var(--promo-height));
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 15% 15%, #DCE7EE 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, #F4ECE0 0%, transparent 60%),
    linear-gradient(180deg, #F8F4ED 0%, #EFE9DF 100%);
}

#hero > .container { width: 100%; }

.hero--seabirds {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: var(--space-12);
  /* Symmetric padding inside the viewport-height section so content
     doesn't bump the top/bottom edges on short viewports. */
  padding: var(--space-6) 0;
  width: 100%;
}

/* ─── Left column ─── */
.hero--seabirds .hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
  z-index: 2;
}

.hero--seabirds .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.hero--seabirds .hero__eyebrow:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.hero--seabirds .hero__eyebrow strong {
  color: var(--color-dark);
  font-weight: var(--weight-semibold);
}

.hero--seabirds .hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand-red);
  box-shadow: 0 0 0 4px rgba(196, 27, 27, 0.15);
  animation: pulseDot 2.4s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(196, 27, 27, 0.15); }
  50%      { box-shadow: 0 0 0 8px rgba(196, 27, 27, 0.05); }
}

.hero--seabirds .hero__tagline {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6.5vw, 5.25rem);
  color: var(--color-dark);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.hero--seabirds .hero__tagline em {
  font-style: normal;
  color: var(--color-brand-red);
}

.hero--seabirds .hero__desc {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 520px;
  line-height: var(--leading-relaxed);
}

.hero--seabirds .hero__inline-link {
  color: var(--color-dark);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

.hero--seabirds .hero__inline-link:hover {
  color: var(--color-brand-red);
}

.hero--seabirds .hero__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.hero--seabirds .hero__footnote {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              gap var(--duration-normal) var(--ease-out);
}

.hero--seabirds .hero__footnote:hover {
  color: var(--color-brand-red);
  gap: var(--space-3);
}

.hero--seabirds .hero__footnote-arrow {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

.hero--seabirds .hero__footnote-arrow .icon {
  width: 100%;
  height: 100%;
}

/* ─── Right column / image ─── */
.hero--seabirds .hero__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero--seabirds .hero__image-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(20, 40, 60, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  background: #1E3A5A;
}

.hero--seabirds .hero__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the rower + WTR graphic visible — slightly left of center horizontally,
     biased toward the top so the head/shoulders are anchored. */
  object-position: 35% 25%;
  display: block;
  transition: transform var(--duration-slower) var(--ease-out);
}

.hero--seabirds .hero__image-frame:hover img {
  transform: scale(1.03);
}

.hero--seabirds .hero__image-tag {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  background: rgba(20, 40, 60, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero--seabirds .hero__image-tag-kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.hero--seabirds .hero__image-tag-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hero--seabirds .hero__image-tag-sub {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: var(--tracking-wide);
}

/* ─── Decorative accent: faint anchor mark behind image ─── */
.hero--seabirds .hero__image::before {
  content: "";
  position: absolute;
  left: -8%;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 70%;
  height: 90%;
  background: linear-gradient(225deg, rgba(196, 27, 27, 0.08), rgba(30, 58, 90, 0.06));
  border-radius: var(--radius-2xl);
  z-index: 0;
}

.hero--seabirds .hero__image-frame { z-index: 1; }

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .hero--seabirds {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    min-height: auto;
    padding: var(--space-8) 0 var(--space-12);
    text-align: left;
  }

  .hero--seabirds .hero__image {
    order: -1;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
  }

  .hero--seabirds .hero__image-frame {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .hero--seabirds .hero__tagline {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .hero--seabirds .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero--seabirds .hero__actions .btn {
    justify-content: center;
    text-align: center;
  }

  .hero--seabirds .hero__image-frame {
    aspect-ratio: 3 / 4;
  }

  .hero--seabirds .hero__image-tag {
    padding: var(--space-3) var(--space-4);
  }

  .hero--seabirds .hero__image-tag-title {
    font-size: var(--text-xl);
  }
}