/* Secondary Banner Styles */

/* The image/text split is driven by these two values so it can respond to the upload's shape.
   Portrait (the original layout): a narrow column a tall photo fills with almost no crop.
   Landscape: a wider column so a wide photo keeps more of its frame, with the text column
   giving up the difference. Breakpoints only need to restate the widths, not every offset. */
.secondary-banner {
  --banner-image-width: 604px;
  --banner-gap: 120px;
  --banner-text-width: 384px;

  min-height: 100vh;
  background: var(--Primary-100, #680144);
  position: relative;
  overflow: hidden;
}

/* A wide photo in a full-height column is cropped by however much the column is taller than it
   is wide, so the column takes most of the row and the text keeps only what it needs to read
   well. The heading also steps down a size, which is what lets the text column get this narrow. */
.secondary-banner--landscape {
  --banner-image-width: min(72vw, 1080px);
  --banner-gap: 40px;
  --banner-text-width: 320px;
}

.secondary-banner--landscape .secondary-heading-part-1 {
  font-size: 3.25rem; /* 52px */
  line-height: 1.2;
}

.secondary-banner--landscape .secondary-heading-part-2 {
  font-size: 3.625rem; /* 58px */
  line-height: 1.2;
}

.secondary-banner--landscape .secondary-banner-description {
  font-size: 16px;
  line-height: 22px;
}

.secondary-banner-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

/* Left Image - full-bleed column, width set by the orientation variables above */
.secondary-banner-image {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--banner-image-width);
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.secondary-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Right Content - Heading and Description.
   Bounded and centred within the hero rather than pinned to a fixed top offset, so a long
   description can't run off the bottom on a short viewport. Positioning avoids `transform`. */
.secondary-banner-content {
  position: absolute;
  left: calc(var(--banner-image-width) + var(--banner-gap));
  right: 32px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}

.secondary-banner-text {
  width: 100%;
  max-width: var(--banner-text-width);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.secondary-banner-heading {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  line-height: 1;
  gap: 0.25rem;
}

.secondary-heading-part-1 {
  color: var(--Tertiary-100, #F6E0DF);
  font-family: "DM Sans", sans-serif;
  font-size: 4.5rem; /* 72px - text-7xl equivalent */
  font-weight: 400;
  line-height: 88px;
}

.secondary-heading-part-2 {
  color: var(--Tertiary-100, #F6E0DF);
  font-family: "Calluna", serif;
  font-size: 5rem; /* 80px - text-8xl equivalent */
  font-weight: 400;
  font-style: italic;
  line-height: 92.4px;
  margin-left: 0.25rem;
}

.secondary-banner-description {
  width: 100%;
  color: var(--Tertiary-100, #F6E0DF);
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.secondary-banner-description p {
  margin: 0;
  padding: 0;
}

/* Responsive - Large screens / Monitors (1920px+) */
@media (min-width: 1920px) {
  .secondary-banner {
    min-height: 100vh;
    --banner-image-width: 800px;
    --banner-gap: 124px;
  }

  .secondary-banner--landscape {
    --banner-image-width: min(72vw, 1450px);
    --banner-gap: 48px;
    --banner-text-width: 360px;
  }
}

/* Responsive - Laptop screens (1280px - 1919px) */
@media (min-width: 1280px) and (max-width: 1919px) {
  .secondary-banner {
    --banner-image-width: 500px;
    --banner-gap: 100px;
  }

  .secondary-banner--landscape {
    --banner-image-width: 70vw;
    --banner-gap: 36px;
    --banner-text-width: 300px;
  }
}

/* Responsive - Desktop (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .secondary-banner {
    --banner-image-width: 45%;
    --banner-gap: 40px;
    --banner-text-width: 420px;
  }

  .secondary-banner--landscape {
    --banner-image-width: 64%;
    --banner-gap: 28px;
    --banner-text-width: 300px;
  }

  .secondary-heading-part-1 {
    font-size: 3.5rem;
    line-height: 70px;
  }

  .secondary-heading-part-2 {
    font-size: 4rem;
    line-height: 80px;
  }
}

/* Responsive - Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .secondary-banner {
    min-height: auto;
    padding: 3rem 0;
  }

  .secondary-banner-container {
    min-height: auto;
  }

  .secondary-banner-image {
    position: relative;
    width: 100%;
    height: 400px;
    min-height: auto;
  }

  .secondary-banner-content {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
  }

  .secondary-banner-text {
    width: 100%;
    max-width: none;
  }

  .secondary-banner-description {
    width: 100%;
  }

  .secondary-heading-part-1 {
    font-size: 3rem;
    line-height: 60px;
  }

  .secondary-heading-part-2 {
    font-size: 3.5rem;
    line-height: 70px;
  }
}

/* Responsive - Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .secondary-banner {
    min-height: auto;
    padding: 2rem 0;
  }

  .secondary-banner-container {
    min-height: auto;
  }

  .secondary-banner-image {
    position: relative;
    width: 100%;
    height: 300px;
    min-height: auto;
  }

  .secondary-banner-content {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 2rem 1rem;
  }

  .secondary-banner-text {
    width: 100%;
    max-width: none;
  }

  .secondary-banner-heading {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
  }

  .secondary-heading-part-1 {
    font-size: 2.5rem;
    line-height: 50px;
  }

  .secondary-heading-part-2 {
    font-size: 3rem;
    line-height: 60px;
  }

  .secondary-banner-description {
    width: 100%;
    height: auto;
    font-size: 16px;
    line-height: 22px;
  }
}