/** File:  \GentlemenSongsters-Valera\assets\css\ClaudeHeroSection_2026-07-20.css
 *  maintained by Jesse M. Heines, jesse@jesseheines.com
 *  Copyright (c) 2026 by Jesse Heines.  All rights reserved.  May be freely
 *    copied or excerpted for educational purposes with credit to the author.
 *
 *  generated by Claude on July 20, 2026 at 9:26 PM
 *  updated by JMH on October 6, 2026 at 2:38 PM
 */

/* ---- Hero section wrapper ---- */
.gs-hero {
  background: linear-gradient(135deg, #6a1230 0%, #8B1A3A 50%, #6a1230 100%);
  padding: 60px 20px 50px;
  font-family: 'Open Sans', sans-serif;
}

/* ---- Eyebrow line above headline.
        margin-top pushes it below the site logo which overlaps the hero. ---- */
.gs-hero .eyebrow {
  font-size: 0.8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #f5e6c8;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 3.2rem;
}

/* ---- Main headline ---- */
.gs-hero h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 6px;
}

/* ---- Subheadline ("of a cappella harmony") ---- */
.gs-hero .subhead {
  font-family: 'Raleway', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #f5e6c8;
  margin-bottom: 22px;
  line-height: 1.3;
}

/* ---- "a cappella" in Times New Roman italic.
        Font size is 1.6rem (vs surrounding 1.4rem Raleway) to compensate for
        Times New Roman's shorter x-height so it reads as visually the same size. ---- */
.gs-hero .subhead .acappella {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 1.6rem;
}

/* ---- Body tagline ---- */
.gs-hero .tagline {
  font-size: 1.05rem;
  color: #f5e6c8;
  line-height: 1.6;
  margin-bottom: 28px;
}

/* ---- Info box shared styles ---- */
.gs-hero .info-box {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  color: #fff;
  height: 100%;
}
.gs-hero .info-box .label {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #f5e6c8;
  margin-bottom: 4px;
}
.gs-hero .info-box .value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  font-family: 'Raleway', sans-serif;
  white-space: nowrap; /* prevents wrapping on desktop; mobile may override */
}
.gs-hero .info-box .sub {
  font-size: 0.9rem;
  color: #f5e6c8;
  margin-top: 2px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap; /* prevents wrapping on desktop; mobile may override */
}

/* ---- Flexbox row holding the two info boxes ---- */
/* Version 5 - info boxes side-by-side
 *  .gs-hero .info-row {
 *    display: flex;
 *    gap: 10px;
 *    margin-bottom: 2rem;
 *  }
 *
 * /* Date & Time box: shrinks to fit its content exactly, no wider ---- * /
 * .gs-hero .info-row .box-datetime {
 *   flex: 0 0 auto;
 * }
 *
 * /* Location box: expands to fill all remaining horizontal space ---- * /
 * .gs-hero .info-row .box-location {
 *   flex: 1 1 auto;
 * }
 *
 */

/* ------ Flexbox row holding the two info boxes ------- */
/* updated by Claude and JMH on July 15, 2026 at 1:34 PM */
.gs-hero .info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2rem;
}

/* On mobile: both boxes share the row equally, so they're the same width ---- */
.gs-hero .info-row .box-datetime,
.gs-hero .info-row .box-location {
  flex: 1 1 0;
}

/* On tablet and wider: side-by-side, datetime sizes to content,
   location fills the rest ---- */
@media (min-width: 576px) {
  .gs-hero .info-row .box-datetime {
    /* updated by JMH on July 16, 2026 at 7:17 PM from flex: 1 1 0; */
    /* this makes both info boxes the same width when side-by-sice, regardless of the
          window size */
    /* the box-datetime and box-location rules could be combined since they're both the
          same, but I left them as two rules for clarity */
    flex: 1 1 auto;
  }
  .gs-hero .info-row .box-location {
    flex: 1 1 auto;
  }
}

/* ---- Primary CTA button (Register Now) ---- */
.gs-hero .btn-register {
  background: #fff;
  color: #8B1A3A;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 12px 32px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  border: 2px solid #fff;
  transition: background 0.2s, color 0.2s;
}
.gs-hero .btn-register:hover {
  background: #8B1A3A;
  color: #fff;
}

/* ---- Secondary CTA button (Learn More) ---- */
.gs-hero .btn-learnmore {
  background: transparent;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.6);
  margin-left: 12px;
  transition: border-color 0.2s, color 0.2s;
}
.gs-hero .btn-learnmore:hover {
  border-color: #fff;
  color: #fff;
}

/* ---- Thin rule between tagline/buttons and info boxes ---- */
.gs-hero .divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 28px 0 20px;
}

/* ---- Gold "FREE" badge next to subheadline ---- */
.gs-hero .free-badge {
  display: inline-block;
  background: #c9a96e;
  color: #3a0010;
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 8px;
}

/* ---- Responsive 16:9 video wrapper ---- */
.gs-hero .video-wrapper {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.2);
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}
.gs-hero .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Video caption ---- */
.gs-hero .video-caption {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}