/* Varaa aika -sivun bannerikortti */

.booking-page .booking-header.booking-header-banner {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-bottom: 24px;
  padding: 0;
  overflow: hidden;

  background: #ffffff;
  border: 1px solid #cde9fa;
  border-radius: 24px;
  box-shadow: 0 14px 36px rgba(13, 94, 160, 0.1);
}

/* Taustakuva näkyy vain otsikkoalueella */

.booking-page
  .booking-header-banner
  .booking-banner-content {
  display: flex;
  height: 180px;
  min-height: 0;
  padding: 22px 40px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;

  background-color: #0d3d7a;
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 39, 79, 0.2) 0%,
      rgba(4, 39, 79, 0.05) 55%,
      rgba(4, 39, 79, 0) 100%
    ),
    url("/ajanvaraus/assets/banner-desktop-background.png");

  background-position:
    center,
    center;

  background-repeat:
    no-repeat,
    no-repeat;

  background-size:
    100% 100%,
    cover;
}

/* Tarinan Karisma */

.booking-page
  .booking-header-banner
  .booking-brand-title {
  margin: 0 0 4px;
  color: #0d3d7a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: none;
}

/* Varaa aika */

.booking-page .booking-header-banner h1 {
  max-width: 760px;
  margin: 0;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  text-shadow:
    0 2px 8px rgba(4, 31, 65, 0.38),
    0 1px 2px rgba(4, 31, 65, 0.5);
}

/* Bannerin alapuolinen ohjealue */

.booking-page
  .booking-header-banner
  .booking-banner-intro {
  padding: 18px 30px;
  background: #ffffff;
  border-top: 1px solid rgba(205, 233, 250, 0.9);
}

.booking-page
  .booking-header-banner
  .booking-banner-intro
  .booking-intro,
.booking-page
  .booking-header-banner
  .booking-banner-intro
  .booking-location-notice {
  max-width: 760px;
  color: #285c92;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

.booking-page
  .booking-header-banner
  .booking-banner-intro
  .booking-intro {
  margin: 0;
}

.booking-page
  .booking-header-banner
  .booking-banner-intro
  .booking-location-notice {
  margin: 10px 0 0;
  font-size: inherit;
}

.booking-page
  .booking-header-banner
  .booking-banner-intro
  .booking-location-notice strong {
  color: inherit;
}

/* Mobiilinäkymä */

@media (max-width: 700px) {
  .booking-page
    .booking-header-banner
    .booking-banner-content {
    height: 120px;
    min-height: 0;
    max-height: 120px;
    padding: 14px 20px;
    justify-content: center;

    background-color: #0d3d7a;

    background-image:
      linear-gradient(
        to top,
        rgba(4, 39, 79, 0.25) 0%,
        rgba(4, 39, 79, 0.05) 75%,
        rgba(4, 39, 79, 0) 100%
      ),
      url("/ajanvaraus/assets/banner-mobile-background.png");

    background-position:
      center,
      center;

    background-repeat:
      no-repeat,
      no-repeat;

    background-size:
      100% 100%,
      cover;
  }

  .booking-page
    .booking-header-banner
    .booking-banner-intro {
    padding: 14px px;
  }

  .booking-page
    .booking-header-banner
    .booking-banner-intro
    .booking-location-notice {
    margin-top: 8px;
  }
}