/* ================================================================
   INNER BANNER — Global
   Used across: About, Menu, Events, Merch, Contact, Team pages
   Add to: theme style.css or enqueue as inner-banner.css
================================================================ */

/* ── Wrapper ── */
.inner-banner {
  position:    relative;
  height:      360px;
  display:     flex;
  align-items: flex-end;
  overflow:    hidden;
}

/* ── Background image ── */
.inner-banner-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.inner-banner-bg img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 40%;
  display:          block;
}

/* ── Gold gradient overlay ── */
.inner-banner-overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(
    to right,
    rgba(235, 166, 31, 0.90) 0%,
    rgba(235, 166, 31, 0.70) 40%,
    rgba(0,   0,   0,  0.20) 100%
  );
}

/* ── Content container ── */
.inner-banner-content {
  position:       relative;
  z-index:        2;
  width:          100%;
  padding-bottom: 50px;
}

/* ── H1 title ── */
.inner-banner-text h1 {
  font-family:    var(--font-display, 'Georgia', serif);
  font-size:      clamp(42px, 7vw, 90px);
  font-weight:    400;
  line-height:    1;
  letter-spacing: 4px;
  text-transform: uppercase;
  color:          #ffffff;
  margin:         0;
  text-shadow:    0 2px 20px rgba(0, 0, 0, 0.15);
}

/* ── Optional subtitle below H1 ── */
.inner-banner-text .banner-sub {
  display:        block;
  font-family:    var(--font-body, sans-serif);
  font-size:      14px;
  font-weight:    600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.85);
  margin-top:     12px;
}

/* ── Optional breadcrumb ── */
.inner-banner-breadcrumb {
  position:    absolute;
  bottom:      18px;
  right:       0;
  z-index:     2;
  font-family: var(--font-body, sans-serif);
  font-size:   12px;
  font-weight: 600;
  letter-spacing: 1px;
  color:       rgba(255, 255, 255, 0.75);
}
.inner-banner-breadcrumb a {
  color:           rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition:      color 0.2s;
}
.inner-banner-breadcrumb a:hover { color: #ffffff; }
.inner-banner-breadcrumb span    { margin: 0 6px; opacity: 0.5; }

/* ================================================================
   PAGE-SPECIFIC HEIGHT OVERRIDES
   Uncomment / adjust as needed per page
================================================================ */

/* Taller banner for homepage-style inner pages */
/* .page-template-about-page    .inner-banner { height: 400px; } */
/* .page-template-contact-page  .inner-banner { height: 300px; } */

/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 1024px) {
  .inner-banner {
    height: 300px;
  }
  .inner-banner-text h1 {
    font-size: clamp(36px, 6vw, 70px);
    letter-spacing: 3px;
  }
}

@media (max-width: 768px) {
  .inner-banner {
    height: 260px;
  }
  .inner-banner-content {
    padding-bottom: 36px;
  }
  .inner-banner-text h1 {
    font-size: clamp(30px, 8vw, 56px);
    letter-spacing: 2px;
  }
  .inner-banner-overlay {
    background: linear-gradient(
      to right,
      rgba(235, 166, 31, 0.92) 0%,
      rgba(235, 166, 31, 0.80) 50%,
      rgba(0,   0,   0,  0.30) 100%
    );
  }
}

@media (max-width: 480px) {
  .inner-banner {
    height: 220px;
  }
  .inner-banner-content {
    padding-bottom: 28px;
  }
  .inner-banner-text h1 {
    font-size: clamp(26px, 9vw, 44px);
    letter-spacing: 1.5px;
  }
}