/* Dates landing photographic banner */
.tsf-dates .tsf-dates-hero {
  align-items: center;
  display: flex;
  min-height: clamp(360px, 32vw, 500px);
}

.tsf-dates .tsf-dates-hero__shade {
  /* A restrained veil keeps the city visible while making white editorial
   * text consistently readable over both the façade and the crowd. */
  background:
    radial-gradient(ellipse 52% 72% at 50% 51%, rgba(12, 9, 8, .38) 0%, rgba(12, 9, 8, .2) 57%, rgba(12, 9, 8, 0) 100%),
    linear-gradient(90deg, rgba(12, 9, 8, .3), rgba(12, 9, 8, .18));
}

.tsf-dates .tsf-dates-hero__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 860px;
  padding-bottom: 0;
  text-align: center;
}

/* The warm cream title is legible over the photographic scene without
 * competing with the San Fermín red. A restrained shadow preserves that
 * contrast in the lightest portion of the image. */
.tsf-dates .tsf-dates-hero h1 {
  color: #ffd9c7;
  text-shadow: 0 2px 18px rgba(12, 9, 8, .72);
}

.tsf-dates .tsf-dates-hero__content > p:not(.tsf-label) {
  max-width: 640px;
}

.tsf-dates .tsf-dates-hero .tsf-button {
  box-shadow: 0 8px 22px rgba(12, 9, 8, .2);
}

@media (max-width: 767px) {
  .tsf-dates .tsf-dates-hero {
    align-items: center;
    min-height: 420px;
  }

  .tsf-dates .tsf-dates-hero__shade {
    background:
      linear-gradient(0deg, rgba(12, 9, 8, .74) 0%, rgba(12, 9, 8, .28) 72%, rgba(12, 9, 8, .12) 100%);
  }

  .tsf-dates .tsf-dates-hero__content {
    align-items: center;
    margin: 0 auto;
    padding-bottom: 0;
    text-align: center;
  }
}