/* ==========================================================================
   PondBase Polished Feature Hero
   The hero treatment originally used on fishing-trips-cpue.html and
   anglers-clubs.html: full-bleed photo, dark gradient, eyebrow label,
   two-tone headline, and a row of pill-style highlights.

   Include on every feature page via:
     <link rel="stylesheet" href="css/polished-hero.css">

   Usage:
     <section class="polished-hero" style="--hero-bg: url('assets/img/YourPhoto.webp');">
       <div class="hero-content">
         <div class="eyebrow">Section Label</div>
         <h1>Plain headline text <span>with an accent phrase.</span></h1>
         <p class="hero-copy">One or two sentences of description.</p>
         <ul class="hero-points">
           <li>Highlight one</li>
           <li>Highlight two</li>
         </ul>
       </div>
     </section>

   Colors fall back to the site's standard palette via var(--name, fallback),
   so this works whether or not the page defines its own :root custom
   properties.
   ========================================================================== */

.polished-hero {
  position: relative;
  min-height: 650px;
  padding: 180px 20px 110px;
  display: flex;
  align-items: center;
  background-color: var(--pond-dark, #04140f);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* background-image is set directly via inline style="background-image:url(...)"
     on each page, NOT through a --custom-property here. A url() stored in a
     custom property declared inline but consumed in an external stylesheet has
     inconsistent relative-path resolution across browsers — setting it directly
     avoids that entirely. */
}

.polished-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 12, 8, 0.73) 0%, rgba(1, 12, 8, 0.52) 47%, rgba(1, 12, 8, 0.08) 100%),
    linear-gradient(0deg, var(--pond-dark, #04140f) 0%, transparent 32%);
}

.polished-hero .hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.polished-hero .eyebrow {
  color: var(--pond-green-light, #63c58a);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.polished-hero h1 {
  max-width: 780px;
  margin: 0 0 20px;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.05;
  font-weight: 800;
  color: #fff;
}

.polished-hero h1 span {
  color: var(--pond-orange, #e2711d);
}

.polished-hero .hero-copy {
  max-width: 720px;
  color: #eee;
  font-size: 18px;
  line-height: 1.75;
  margin: 0 0 30px;
}

.polished-hero .hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.polished-hero .hero-points li {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 14px;
}

@media (max-width: 600px) {
  .polished-hero {
    min-height: 610px;
    padding: 145px 20px 85px;
  }
  .polished-hero::after {
    background: linear-gradient(0deg, var(--pond-dark, #04140f) 0%, rgba(1, 12, 8, 0.62) 55%, rgba(1, 12, 8, 0.82) 100%);
  }
  .polished-hero .hero-copy {
    font-size: 16px;
  }
}