/* ==========================================================================
   FUTURE SHOWS SECTION STYLES
   ========================================================================== */

/* Controls a div that contains all of the future shows (if any) or does not exist. */
.shows-grid {
  /* Items inside the container can flex. */
  display: flex;
  /* We are not going to try to put multiple beside each other. */
  flex-direction: column;
  gap: 2rem;
  max-width: 900px;
  margin: 2rem auto 0 auto;
}

/* Controls an article for a specific future show. */
.show-card {
  /* This is itself a container whose contents can flex. */
  display: flex;
  /* Not quite black, for some contrast. */
  background-color: #111111;
  /* Add a border to make each show stand out. */
  border: 1px solid #222222;
  border-radius: 6px;
  /* Make everything fit nicely inside the border. */
  overflow: hidden;
  text-align: left;
}

/* Controls a div that contains (only) the show flyer. */
.show-poster-container {
  /* This section must be exactly 280px wide. */
  flex: 0 0 280px;
}

/* Controls the flyer image itself. */
.show-poster {
  /* Stretch it to fill the whole container. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Controls a div containing all of the text about a show. */
.show-details {
  padding: 1.5rem;
  /* Take up whatever space is left after the flyer div. */
  flex: 1;
}

/* Controls a div containing most of the info about a show except for the lineup. */
.show-meta p {
  margin: 0.35rem 0;
  color: #cccccc;
}

/* Controls a div containing the lineup for a show. */
.show-lineup {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #222222;
}

/* Controls the list of bands appearing at a show. */
.show-lineup ul {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
  color: #e0e0e0;
}

/* Controls a specific band in a lineup. */
.show-lineup li {
  margin-bottom: 0.25rem;
}

/* Controls the indicator that a show is all-ages or 21+. */
.badge {
  display: inline-block;
  background-color: #222222;
  color: #ffffff;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

/* Special rules for mobile devices. */
@media (max-width: 768px) {

  /* Controls the entire article for a show. */
  .show-card {
    /* Put the components above each other instead of side-by-side. */
    flex-direction: column;
    /* Center each component, since it won't have anything beside it. */
    align-items: center;
  }

  /* Controls the div that contains only the flyer image. */
  .show-poster-container {
    flex: 0 0 auto;
    width: 100%;
    /* Keeps the poster at its normal desktop width */
    max-width: 280px;
    /* Lets natural height take over based on width */
    max-height: none;
  }

  /* Controls the flyer image itself. */
  .show-poster {
    /* Ensure the image scales down cleanly without overflowing */
    width: 100%;
    /* Overrides desktop height: 100% to preserve natural aspect ratio. */
    height: auto;
  }

  /* Controls a div containing all of the text about a show. */
  .show-details {
    /* Ensure details take up full width below the poster. */
    width: 100%;
    box-sizing: border-box;
  }
}