/* ==========================================================================
   Valdosta Symphony Orchestra - 2026 site update
   --------------------------------------------------------------------------
   Additive styles only. This file is loaded AFTER style.css and responsive.css
   so anything here wins on ties. It does not redefine existing classes from
   style.css except for the few scoped overrides marked "OVERRIDE" below.

   Colors inherit from style.css so the new pages match the existing palette.
   The variables below are the only color decisions made here.
   ========================================================================== */

:root {
  --vso-rule: rgba(0, 0, 0, 0.12);   /* thin divider lines */
  --vso-muted: rgba(0, 0, 0, 0.62);  /* secondary text */
  --vso-card: rgba(255, 255, 255, 0.9); /* sponsor logo tiles */
}

/* --------------------------------------------------------------------------
   Homepage hero
   The hero background stays as style.css sets it (images/home-banner.jpg,
   which is already Howard's photo). To use the Dropbox file instead,
   uncomment:
   .banner_section { background-image: url("../images/Howard_Banner_Image.jpg"); }

   style.css sets background-position: center, so on narrow screens the
   browser crops both edges evenly and Howard (right of centre in the photo)
   falls outside the frame. Shifting the focal point right keeps him visible.
   Tune the percentages if the crop lands wrong: higher = further right.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .banner_section {
    background-position: 72% center;
  }
}

@media (max-width: 575px) {
  .banner_section {
    background-position: 78% center;
  }
}

/* The hero text sits over the photo, which is lighter on the right. Keep the
   left side dark enough to read against once the image has shifted. */
@media (max-width: 991px) {
  .banner_section {
    position: relative;
  }

  .banner_section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(13, 13, 13, 0.72) 0%,
      rgba(13, 13, 13, 0.45) 55%,
      rgba(13, 13, 13, 0.12) 100%
    );
    pointer-events: none;
  }

  .banner_section .container {
    position: relative;
    z-index: 1;
  }
}


/* Two hero buttons side by side. style.css floats .there_text at 50% width,
   so the button row must clear it or it gets placed beside the paragraph. */
.hero_buttons {
  clear: both;
  float: left;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hero_buttons .learnmore_bt a {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Page title block (About, Programs, Partners) and the homepage Season block
   -------------------------------------------------------------------------- */
.page_title_section,
.season_section,
.roster_section {
  width: 100%;
  float: left;
}

.page_title_section {
  padding-bottom: 0;
}

.page_title_wrap {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.page_title_wrap .about_text_it {
  text-align: center;
}

.page_title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 48px;
  line-height: 1.15;
  margin: 8px 0 16px;
}

/* Intro that sits under a .title_section header instead of a .page_title */
.page_intro_section {
  width: 100%;
  float: left;
  padding-bottom: 0;
}

.page_lead {
  font-size: 32px;
  line-height: 1.3;
  color: #4c4c4b;
  text-align: center;
  margin: 0 0 12px;
}

.page_intro--large {
  font-size: 20px;
  max-width: 760px;
}

@media (max-width: 767px) {
  .page_lead {
    font-size: 27px;
  }

  .page_intro--large {
    font-size: 17px;
  }
}

.page_title--small {
  font-size: 34px;
}

.page_intro {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 800px;
}

/* --------------------------------------------------------------------------
   Homepage: next concert poster, cosplay strip, season graphic + list
   -------------------------------------------------------------------------- */
.poster_img {
  border-radius: 10px;
}

/* Cosplay competition box (homepage, under the Frankenstein poster) */
.cosplay_box {
  margin-top: 60px;
  padding: 36px 40px 40px;
  background: #f7f4f0;
  border-radius: 10px;
}

.cosplay_title {
  font-size: 32px;
  line-height: 1.2;
  color: rgb(37, 37, 37);
  margin: 0 0 16px;
}

.cosplay_list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #4c4c4b;
}

.cosplay_list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
}

/* brochure-style red triangle bullet */
.cosplay_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  border-left: 8px solid #cf3d2d;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* Three 3:4 photos plus a square QR. Giving the QR column 4/3 the width of a
   photo column makes all four images exactly the same height. */
.cosplay_gallery {
  display: grid;
  grid-template-columns: 3fr 3fr 3fr 4fr;
  gap: 16px;
  align-items: start;
}

.cosplay_gallery figure {
  margin: 0;
}

.cosplay_gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 10px;
}

.cosplay_gallery_qr img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.cosplay_gallery figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: #4c4c4b;
}

.cosplay_box .button_row {
  padding-top: 0px;
  margin-top: 0px;
}

.cosplay_box .button_row .read_bt {
  padding-top: 32px;
}

.season_graphic {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 36px auto;
  border-radius: 10px;
}

/* Text version of the season graphic */
.season_list {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  border-top: 1px solid var(--vso-rule);
}

.season_list li {
  display: grid;
  grid-template-columns: 130px 180px 1fr;
  gap: 8px 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--vso-rule);
  font-size: 16px;
  line-height: 1.5;
}

.season_list_date {
  font-weight: 700;
  white-space: nowrap;
}

.season_list_title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
}

.season_list_note {
  color: var(--vso-muted);
}

/* A centered row of the site's existing .read_bt buttons.
   OVERRIDE (scoped): .read_bt is floated (.fr) on the homepage; not here. */
.button_row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.button_row .read_bt {
  float: none;
  margin: 0;
  padding-top: 0;
}

/* Promo video row under the next-concert poster (uncomment in index.php) */
.promo_video_row {
  margin-top: 50px;
}

/* --------------------------------------------------------------------------
   Tickets and Venue pages
   .title_section, .coffee_title_text and .long-form-text already come from
   style.css; these only cover the bits those pages add.
   -------------------------------------------------------------------------- */
.tickets_note {
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  max-width: 615px;
  margin: 40px auto 0;
}

@media (max-width: 575px) {
  .tickets_note {
    max-width: 465px;
  }
}


.tickets_note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The VBO plugin renders into #MyEvent; keep it from overflowing on phones */
#MyEvent {
  max-width: 100%;
  overflow-x: auto;
}

#MyEvent {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#MyEvent iframe#MyEventWrapper {
  display: block;
  min-height: 0 !important;
}

.long-form-text h2 {
  font-size: 40px;
  color: rgb(37, 37, 37);
  margin-bottom: 16px;
}

.long-form-text p,
.long-form-text li {
  font-size: 16px;
  line-height: 1.8;
  color: #4c4c4b;
}

.long-form-text ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

/* --------------------------------------------------------------------------
   Venue page: Google Maps embeds for the parking lots
   Three across on desktop, stacked on small screens.
   -------------------------------------------------------------------------- */
.map_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0 32px;
}

.map_card {
  margin: 0;
}

/* Responsive 4:3 frame - the iframe's own width/height attributes are ignored */
.map_embed {
  position: relative;
  width: 100%;
  padding-top: 75%;
  overflow: hidden;
  border-radius: 10px;
  background: #eceae7;
}

.map_embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map_card figcaption {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: #4c4c4b;
}

@media (max-width: 991px) {
  .map_grid {
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .map_grid {
    grid-template-columns: 1fr;
  }

  .map_embed {
    padding-top: 62%;
  }
}

/* --------------------------------------------------------------------------
   Testimonials: four vertical videos instead of three
   OVERRIDE (scoped to the --four modifier only)
   -------------------------------------------------------------------------- */
.testimonial_container--four {
  flex-wrap: nowrap;
}

.testimonial_container--four .testimonial {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Responsive 16:9 video wrapper (YouTube iframe or self-hosted <video>)
   -------------------------------------------------------------------------- */
.video_embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
}

.video_embed iframe,
.video_embed video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Photo strips (cosplay, youth concerts, Tunes for Tots, LARC)
   -------------------------------------------------------------------------- */
.photo_strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.photo_strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 10px;
  display: block;
}

.photo_strip--portrait img {
  aspect-ratio: 3 / 4;
}

.photo_strip--two {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --------------------------------------------------------------------------
   Programs / Partners: alternating media + copy rows
   -------------------------------------------------------------------------- */
.program_block {
  align-items: center;
}

.program_block + .program_block,
.photo_strip + .program_block,
.row + .program_block {
  margin-top: 80px;
}

.program_media {
  display: flex;
  align-items: center;
}

.program_media .video_embed {
  width: 100%;
}

.program_copy {
  display: flex;
  align-items: center;
}

.program_copy .about_taital_main {
  width: 100%;
}

.program_copy .read_bt {
  float: none;
  display: inline-block;
  margin-top: 8px;
}

.program_copy .about_text a,
.partner_links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.program_dates,
.program_meta {
  float: left;
  width: 100%;
  clear: both;
}

.program_dates {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  list-style: none;
  margin: 12px 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* Separators between dates only - nothing above the first or below the last */
.program_dates li {
  padding: 8px 0;
  border-top: 1px solid var(--vso-rule);
}

.program_dates li:first-child {
  border-top: 0;
  padding-top: 0;
}

.program_meta {
  font-size: 14px;
  color: var(--vso-muted);
  margin: 0;
}

.more_programs_row {
  margin-top: 90px;
}

.more_programs_grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.more_programs_grid p {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  color: var(--vso-muted);
}

/* Partner copy column: logo above the heading */
.partner_logo {
  display: block;
  width: 100%;
  max-width: 170px;
  height: auto;
  margin-bottom: 16px;
}

.partner_links {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  text-align: center;
  margin: 24px auto 0;
  max-width: 680px;
}

/* --------------------------------------------------------------------------
   Partner boxes (Partners page) - same treatment as the homepage cosplay box
   -------------------------------------------------------------------------- */
.partner_box,
.section_box {
  padding: 36px 40px;
  background: #f7f4f0;
  border-radius: 10px;
}

.row + .row > .col-sm-12 > .partner_box,
.row + .row > .col-sm-12 > .section_box {
  margin-top: 40px;
}

/* Inside a box the media/copy row needs no extra top margin */
.partner_box .program_block,
.section_box .program_block {
  margin-top: 0;
}

.partner_box .photo_strip,
.section_box .photo_strip {
  margin-top: 28px;
}

.partner_box .partner_copy .read_bt {
  padding-top: 24px;
}

@media (max-width: 767px) {
  .partner_box,
  .section_box {
    padding: 24px 20px 28px;
  }
}

/* --------------------------------------------------------------------------
   Sponsors grid (Partners page)
   -------------------------------------------------------------------------- */
.sponsors_row {
  margin-top: 90px;
}

.sponsor_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px 24px;
  margin-top: 24px;
}

.sponsor_card {
  text-align: center;
}

.sponsor_logo_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  padding: 18px;
  background: var(--vso-card);
  border: 1px solid var(--vso-rule);
  border-radius: 10px;
  margin-bottom: 12px;
}

.sponsor_logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sponsor_name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  margin: 0 0 4px;
}

.sponsor_role {
  font-size: 14px;
  line-height: 1.5;
  color: var(--vso-muted);
  margin: 0;
}

.sponsor_thanks {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  margin: 36px 0 0;
}

/* --------------------------------------------------------------------------
   About: history logo, conductor, musician roster
   -------------------------------------------------------------------------- */
.history_logo {
  width: 100%;
  max-width: 360px;
  height: auto;
}

/* Conductor: the photo floats left and the bio wraps around and under it.
   style.css gives .about_text width: 100%, which would push each paragraph
   below the float, so the paragraphs here are auto-width instead. */
.conductor_intro {
  width: 100%;
  float: left;
  margin-bottom: 8px;
}

.conductor_photo {
  float: left;
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: 10px;
  margin: 6px 32px 16px 0;
}

.conductor_section .about_text {
  width: auto;
  float: none;
  margin-bottom: 18px;
}

.conductor_link {
  clear: both;
  float: none;
  display: inline-block;
}

@media (max-width: 575px) {
  .conductor_photo {
    float: none;
    max-width: 100%;
    margin: 0 0 20px;
  }
}

.roster_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px 40px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--vso-rule);
}

.roster_heading {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  margin: 0 0 10px;
}

.roster_list {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  list-style: none;
  margin: 0;
  padding: 0;
}

.roster_list li {
  color: var(--vso-muted);
}

.roster_list li:first-child {
  color: inherit; /* principal / concertmaster reads slightly stronger */
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .page_title {
    font-size: 34px;
  }

  .page_title--small {
    font-size: 28px;
  }

  .page_intro {
    font-size: 16px;
  }

  .program_block + .program_block,
  .row + .program_block {
    margin-top: 56px;
  }

  .program_media {
    margin-bottom: 24px;
  }

  .conductor_photo {
    margin-bottom: 24px;
  }

  .cosplay_box {
    margin-top: 40px;
    padding: 24px 20px 28px;
  }

  .cosplay_title {
    font-size: 26px;
  }

  .cosplay_gallery {
    grid-template-columns: 1fr 1fr;
  }

  .cosplay_gallery_qr img {
    aspect-ratio: 3 / 4;
    background: #fff;
  }

  .season_list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .photo_strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .roster_grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 24px 24px;
  }

  .more_programs_grid,
  .sponsor_grid {
    grid-template-columns: 1fr;
  }

  .testimonial_container--four {
    flex-wrap: wrap;
  }

  .testimonial_container--four .testimonial {
    flex: 1 1 45%;
  }
}

/* --------------------------------------------------------------------------
   OPTIONAL - wider content column. The site uses Bootstrap's 1140px container.
   Uncomment to widen every page that loads this file.
   -------------------------------------------------------------------------- */
/*
@media (min-width: 1260px) {
  .container { max-width: 1200px; }
}
*/

/* --------------------------------------------------------------------------
   Accessibility: respect reduced-motion for the AOS entrance animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}