/*
 * Service landing title calibration
 *
 * These are the recurring editorial headings on enquiry landings.  They are
 * intentionally scoped to those templates so individual line-composition
 * rules for other pages remain untouched.
 */
.tsf-service-landing .tsf-balcony-hero h1,
.tsf-balcony-landing .tsf-balcony-hero h1 {
  font-size: clamp(40px, 3.8vw, 62px);
}

/* These line groups are authored in the template, rather than inferred from
 * a width. They keep each approved banner composition stable after font or
 * scale changes. */
.tsf-balcony-landing .tsf-balcony-hero h1 .tsf-hero-title-line {
  display: block;
  white-space: nowrap;
}

.tsf-service-landing--experiencias .tsf-balcony-hero h1 {
  max-width: none;
}

.tsf-service-landing .tsf-understand-moment__intro h2,
.tsf-balcony-landing .tsf-understand-moment__intro h2 {
  font-size: clamp(32px, 2.7vw, 42px);
}

.tsf-service-landing .tsf-balcony-moments__heading h2,
.tsf-balcony-landing .tsf-balcony-moments__heading h2 {
  font-size: clamp(32px, 2.9vw, 44px);
}

.tsf-service-landing .tsf-balcony-faq .tsf-faq-intro h2,
.tsf-balcony-landing .tsf-balcony-faq .tsf-faq-intro h2 {
  font-size: clamp(30px, 2.5vw, 40px);
}

/* Keep the left-hand introduction beside every enquiry form compact.  The
 * title now keeps its authored line breaks but no longer competes with the
 * form card, and the quieter eyebrow has room to remain on one line. */
.tsf-service-landing .tsf-balcony-story .tsf-label,
.tsf-balcony-landing .tsf-balcony-story .tsf-label {
  font-size: clamp(10px, .62vw, 12px) !important;
  line-height: 1.3;
  margin-bottom: 14px;
  white-space: nowrap;
}

.tsf-service-landing .tsf-balcony-story h2,
.tsf-balcony-landing .tsf-balcony-story h2 {
  font-size: clamp(40px, 3vw, 52px) !important;
  line-height: .91;
  max-width: 100%;
}

/* Accommodation's two-part route title reads as one thought: the lead-in is
 * black and substantial enough to balance the italic second line. */
.tsf-service-landing--alojamiento #accommodation-options-title {
  line-height: .98;
}

.tsf-service-landing--alojamiento #accommodation-options-title > span {
  color: var(--ink, #161514);
  display: block;
  font-size: clamp(28px, 2.05vw, 36px);
  line-height: 1;
}

.tsf-service-landing--alojamiento #accommodation-options-title > em {
  font-size: clamp(36px, 2.8vw, 48px);
  line-height: .92;
}

/* Encierro: the editorial eyebrow remains one quiet line and the two-line
 * story title stays fully within the copy column beside the enquiry card. */
.tsf-balcony-landing .tsf-encierro-story-label {
  font-size: 9px;
  letter-spacing: .1em;
  white-space: nowrap;
}

.tsf-balcony-landing #balcony-story-title {
  font-size: clamp(38px, 3vw, 50px);
  line-height: .9;
  max-width: 100%;
}

@media (max-width: 767px) {
  .tsf-service-landing .tsf-balcony-hero h1,
  .tsf-balcony-landing .tsf-balcony-hero h1 {
    font-size: clamp(37px, 10vw, 50px);
    line-height: .94;
    max-width: min(100%, 15ch);
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  /* The title groups are composed on desktop, but they must be allowed to
   * wrap on a narrow screen instead of being clipped by the image banner. */
  .tsf-balcony-landing .tsf-balcony-hero h1 .tsf-hero-title-line {
    white-space: normal;
  }

  .tsf-service-landing .tsf-balcony-hero,
  .tsf-balcony-landing .tsf-balcony-hero {
    min-height: 520px;
  }

  .tsf-service-landing .tsf-balcony-hero__inner,
  .tsf-balcony-landing .tsf-balcony-hero__inner {
    box-sizing: border-box;
    min-height: 520px;
    padding-bottom: 58px;
    padding-top: 68px;
    transform: none;
  }

  .tsf-service-landing .tsf-balcony-hero .tsf-label,
  .tsf-balcony-landing .tsf-balcony-hero .tsf-label,
  .tsf-service-landing .tsf-balcony-hero > .tsf-balcony-hero__inner > p:not(.tsf-label),
  .tsf-balcony-landing .tsf-balcony-hero > .tsf-balcony-hero__inner > p:not(.tsf-label) {
    max-width: min(100%, 34rem);
    overflow-wrap: break-word;
    white-space: normal;
  }

  .tsf-service-landing .tsf-balcony-story h2,
  .tsf-balcony-landing .tsf-balcony-story h2 {
    font-size: clamp(29px, 8vw, 36px) !important;
  }

  .tsf-service-landing .tsf-balcony-story .tsf-label,
  .tsf-balcony-landing .tsf-balcony-story .tsf-label {
    white-space: normal;
  }

  .tsf-service-landing--alojamiento #accommodation-options-title > span {
    font-size: clamp(27px, 8vw, 34px);
  }

  .tsf-service-landing--alojamiento #accommodation-options-title > em {
    font-size: clamp(34px, 10vw, 42px);
  }

  .tsf-balcony-landing .tsf-encierro-story-label {
    font-size: 8px;
    letter-spacing: .08em;
    white-space: normal;
  }

  .tsf-balcony-landing #balcony-story-title {
    font-size: clamp(32px, 8vw, 40px);
  }

  .tsf-service-landing .tsf-understand-moment__intro h2,
  .tsf-balcony-landing .tsf-understand-moment__intro h2,
  .tsf-service-landing .tsf-balcony-moments__heading h2,
  .tsf-balcony-landing .tsf-balcony-moments__heading h2,
  .tsf-service-landing .tsf-balcony-faq .tsf-faq-intro h2,
  .tsf-balcony-landing .tsf-balcony-faq .tsf-faq-intro h2 {
    font-size: clamp(30px, 8.5vw, 42px);
  }
}

/* Tablet widths still use a constrained banner column on some landings.
 * Let the authored title groups wrap before they can run beyond that column. */
@media (min-width: 768px) and (max-width: 1023px) {
  .tsf-service-landing .tsf-balcony-hero h1,
  .tsf-balcony-landing .tsf-balcony-hero h1 {
    font-size: clamp(42px, 5.2vw, 54px);
    max-width: min(100%, 15ch);
    text-wrap: balance;
  }

  .tsf-balcony-landing .tsf-balcony-hero h1 .tsf-hero-title-line {
    white-space: normal;
  }

  .tsf-service-landing .tsf-balcony-hero .tsf-label,
  .tsf-balcony-landing .tsf-balcony-hero .tsf-label,
  .tsf-service-landing .tsf-balcony-hero > .tsf-balcony-hero__inner > p:not(.tsf-label),
  .tsf-balcony-landing .tsf-balcony-hero > .tsf-balcony-hero__inner > p:not(.tsf-label) {
    max-width: min(100%, 38rem);
    white-space: normal;
  }
}