/* ===========================================================================
    CrownPreRoll-Web — Hero Section ("/assets/css/sections/index/hero.css")
    v0.1.0-beta : (9/28/25) : Cole Krauter
    HTML Pseudo-Code:
        <section class="hero">
            <div class="hero-inner">
                <div class="hero-statement">
                    <h1>…</h1>
                    <p>…</p>
                </div>
                <div class="hero-cta">
                    <a class="btn-hero" href="…">…</a>
                </div>
            </div>
        </section>
============================================================================== */
/* ========== Hero Section Tokens ========== */
:root {
    /* --- Section Layout --- */
    --hero-min-h: 100vh;
    --hero-bg: url("/assets/img/photos/index_hero_bg.jpg");
    --hero-overlay: rgba(0, 0, 0, 0.5);

    /* --- Section Spacing --- */
    --hero-pad-top: var(--nav-height);
    --hero-pad-x: 2.5rem;

    /* --- Statement Block --- */
    /* Design */
    --hero-text-color: #fff;
    --hero-heading-margin: 5rem 0 0 0;
    --hero-text-margin: 1.5rem 0 0 0;
    /* Heading */
    --hero-heading-size: 56px;
    --hero-heading-wt: 900;
    --hero-heading-lh: 1.25;
    --hero-heading-ls: 1.5px;
    /* Text */
    --hero-text-size: 24px;
    --hero-text-wt: 500;
    --hero-text-lh: 1.5;
    --hero-text-ls: 1px;

    /* --- CTA Block --- */
    --hero-ctas-top-gap: 2.5rem;
    /* Btn Design */
    --hero-btn-font-size: 18px;
    --hero-btn-wt: 600;
    --hero-btn-lh: 1;
    --hero-btn-radius: 9999px;
    --hero-btn-border: 3px solid transparent;
    --hero-btn-pad-y: 0.75rem;
    --hero-btn-pad-x: 1.5rem;
    /* Btn Color */
    --hero-btn-bg: var(--crown-white);
    --hero-btn-fg: var(--crown-black);
    --hero-btn-bg-hover: var(--crown-gold);
    --hero-btn-fg-hover: var(--crown-white);
}

/* ========== Section Containers ========== */
/* --- Hero Section --- */
.hero {
    min-height: var(--hero-min-h);
    background: var(--hero-bg) center / cover no-repeat;
    color: var(--hero-text-color);
    text-align: left;
}
/* --- Dim Overlay --- */
.hero::before {
    position: absolute;
    content: "";
    background: var(--hero-overlay);
    inset: 0;
    z-index: 1;
}
/* --- Inner Content --- */
.hero-inner {
  position: relative;
  padding: var(--hero-pad-top) 0 0 var(--hero-pad-x);
  z-index: 2;
}

/* ========== Statement Block ========== */
/* --- Statement H1 --- */
.hero-statement h1 {
  margin: var(--hero-heading-margin);
  font-size: var(--hero-heading-size);
  font-weight: var(--hero-heading-wt);
  line-height: var(--hero-heading-lh);
  letter-spacing: var(--hero-heading-ls);
}
/* --- Statement P --- */
.hero-statement p {
  margin: var(--hero-text-margin);
  font-size: var(--hero-text-size);
  font-weight: var(--hero-text-wt);
  line-height: var(--hero-text-lh);
  letter-spacing: var(--hero-text-ls);
}

/* ========== CTA Block ========== */
/* --- CTA Block Container --- */
.hero-cta {
  margin-top: var(--hero-ctas-top-gap);
}
/* --- Btn --- */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  user-select: none;
  font-weight: var(--hero-btn-wt);
  font-size: var(--hero-btn-font-size);
  line-height: var(--hero-btn-lh);
  padding: var(--hero-btn-pad-y) var(--hero-btn-pad-x);
  border-radius: var(--hero-btn-radius);
  border: var(--hero-btn-border);
  background: var(--hero-btn-bg);
  color: var(--hero-btn-fg);
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
/* Btn:Hover */
.btn-hero:hover {
  background: var(--hero-btn-bg-hover);
  color: var(--hero-btn-fg-hover);
}
/* Btn:Focus */
.btn-hero:focus-visible {
  background: var(--hero-btn-bg-hover);
  color: var(--hero-btn-fg-hover);
  outline: none;
}