/* Contact 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. */
.contact-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. */
.contact-banner--landscape {
  --banner-image-width: min(72vw, 1080px);
  --banner-gap: 40px;
  --banner-text-width: 320px;
}

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

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

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

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

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

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

/* Right Content - Heading and Description.
   Bounded to the space above the card row and centred in it, so a long description can never
   slide underneath the cards on a short viewport. Positioning avoids `transform`, which the
   js-reveal animation owns and resets to translate(0) once revealed. */
.contact-banner-content {
  position: absolute;
  left: calc(var(--banner-image-width) + var(--banner-gap));
  right: 32px;
  top: 0;
  bottom: 208px; /* height of the contact card row */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}

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

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

.contact-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;
}

.contact-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;
}

.contact-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;
}

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

/* Bottom Contact Cards */
.contact-banner-cards {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 378px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
}

.contact-card {
  flex: 1;
  height: 208px; /* h-52 = 13rem = 208px */
  padding: 24px; /* p-6 = 1.5rem = 24px */
  background: var(--Secondary-40, #F9C5C3);
  border-right: 1.5px solid var(--Primary-100, #680144);
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
}

.contact-card:last-child {
  border-right: none;
}

.contact-card-inner {
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  position: relative;
}

.contact-card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 12px; /* gap-3 = 0.75rem = 12px */
}

.contact-card-label {
  width: 100%;
  color: var(--Primary-100, #680144);
  font-family: "Calluna", serif;
  font-size: 1.875rem; /* text-3xl = 30px */
  font-weight: 400;
  font-style: italic;
  line-height: 36px; /* leading-9 */
  text-align: left;
  transform: rotate(180deg);
  transform-origin: top left;
}

.contact-card-value {
  width: 100%;
  color: var(--Primary-100, #680144);
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px; /* leading-6 */
  text-align: left;
  transform: rotate(180deg);
  transform-origin: top left;
}

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

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

  .contact-banner-cards {
    left: 924px;
  }
}

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

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

  .contact-banner-cards {
    left: 280px;
    right: 0;
  }
}

/* Responsive - Desktop (1024px+) */
@media (min-width: 1024px) {
  .contact-card-value {
    padding-top: 100px;
  }
}

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

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

  /* Bounded above the cards. Was centred with translateX(-50%), which js-reveal overwrites
     once revealed — so it never actually centred. */
  .contact-banner-content {
    right: 32px;
    bottom: 200px; /* clears the 180px card row */
  }

  .contact-banner-cards {
    left: auto;
    right: 0;
    bottom: 0;
  }

  .contact-card {
    height: 180px;
    padding: 20px;
  }

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

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

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

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

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

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

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

  .contact-banner-description {
    width: 100%;
    height: auto;
  }

  .contact-banner-cards {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    padding: 2rem;
  }

  .contact-card {
    width: 100%;
    border-right: none;
    border-bottom: 1.5px solid var(--Primary-100, #680144);
    height: auto;
    min-height: 150px;
  }

  .contact-card:last-child {
    border-bottom: none;
  }

  .contact-card-inner {
    transform: none;
  }

  .contact-card-content {
    transform: none;
    align-items: flex-start;
  }

  .contact-card-label,
  .contact-card-value {
    transform: none;
  }

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

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

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

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

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

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

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

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

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

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

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

  .contact-banner-cards {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    padding: 0 1rem 2rem;
  }

  .contact-card {
    width: 100%;
    border-right: none;
    border-bottom: 1.5px solid var(--Primary-100, #680144);
    height: auto;
    min-height: 140px;
    padding: 20px;
  }

  .contact-card:last-child {
    border-bottom: none;
  }

  .contact-card-inner {
    transform: none;
  }

  .contact-card-content {
    transform: none;
    align-items: flex-start;
  }

  .contact-card-label,
  .contact-card-value {
    transform: none;
  }

  .contact-card-label {
    font-size: 1.5rem;
    line-height: 32px;
  }

  .contact-card-value {
    font-size: 16px;
    line-height: 22px;
  }
}