/*
 * Home hero. Desktop positions are percentages of the Figma frame (1440 × 901),
 * so the collage keeps its exact composition at any width.
 */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1440 / 901;
  background-color: var(--color-brown);
  color: var(--color-white);
}

.hero__collage {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Figma "NOIR" layer: near-black image at 16% opacity. */
.hero__collage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(7 7 7 / 16%);
}

.hero__photo {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}

.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.hero__photo--laptop {
  left: -4.028%;
  width: 34.306%;
}

.hero__photo--laptop img {
  object-position: 44.4% 50%;
}

.hero__photo--palm {
  left: 63.542%;
  width: 40.486%;
}

.hero__photo--portrait {
  left: 30.278%;
  width: 33.889%;
}

/* Figma crops the portrait tighter than a plain "cover". */
.hero__photo--portrait img {
  inset: 0 auto auto -94.95%;
  width: 301.02%;
  height: 109.3%;
  object-fit: fill;
}

.hero__frame {
  position: absolute;
  top: 10.433%;
  left: 3.958%;
  width: 91.875%;
  height: 83.019%;
  border: 3px solid var(--color-white);
  border-radius: clamp(28px, 3.75vw, 54px);
  pointer-events: none;
}

.hero__content {
  position: absolute;
  inset: 0;
}

.hero__title {
  position: absolute;
  top: 66.926%;
  left: 48.403%;
  width: max-content;
  max-width: 90%;
  font-size: clamp(1.5rem, 2.778vw, 2.5rem);
  font-weight: 400;
  line-height: 1.075;
  text-align: center;
  text-shadow: 0 4px 4px rgb(0 0 0 / 25%);
  transform: translateX(-50%);
}

.hero__cta {
  --btn-border: #fffefe;
  --btn-color: var(--color-blush);
  --btn-focus: var(--color-white);

  position: absolute;
  top: 74.473%;
  left: 46.917%;
  translate: -50% 0;
  width: clamp(200px, 20.22vw, 291px);
  height: clamp(42px, 3.222vw, 46px);
  padding: 0;
  border-width: 3px;
  border-radius: 21px;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.667vw, 1.5rem);
  font-weight: 500;
}

.hero__cta:focus-visible {
  border-radius: 21px;
}

/* Tablet and mobile: the three photos become full-height columns behind the frame. */
@media (max-width: 1023.98px) {
  .hero {
    aspect-ratio: auto;
    height: clamp(560px, 100svh, 900px);
  }

  .hero__photo--laptop {
    left: 0;
    width: 30%;
  }

  .hero__photo--portrait {
    left: 30%;
    width: 40%;
  }

  .hero__photo--portrait img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% 0;
  }

  .hero__photo--palm {
    left: 70%;
    width: 30%;
  }

  .hero__frame {
    top: calc(var(--header-height) + 4px);
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    height: auto;
    border-radius: 32px;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding: 0 32px clamp(56px, 12svh, 120px);
  }

  .hero__title,
  .hero__cta {
    position: static;
    translate: none;
    transform: none;
  }

  .hero__title {
    width: auto;
    max-width: 16ch;
    font-size: clamp(1.75rem, 6.5vw, 2.5rem);
    text-wrap: balance;
  }
}

/*
 * Phones: a single photo instead of the three columns. It starts below the header so the face
 * never sits under the logo or the frame, and is wide enough to keep Thelma, her drink and the laptop.
 */
@media (max-width: 719.98px) {
  .hero {
    height: clamp(540px, 75svh, 640px);
  }

  .hero__collage::after {
    background: linear-gradient(to bottom, rgb(7 7 7 / 8%) 40%, rgb(28 16 6 / 68%) 100%);
  }

  .hero__photo--laptop,
  .hero__photo--palm {
    display: none;
  }

  .hero__photo--portrait {
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: auto;
    bottom: 0;
  }

  .hero__photo--portrait img {
    object-position: 53% 0;
  }

  .hero__frame {
    top: calc(var(--header-height) + 12px);
    right: var(--space-margin);
    bottom: var(--space-margin);
    left: var(--space-margin);
    border-width: 2px;
    border-radius: 24px;
  }

  .hero__content {
    gap: 18px;
    padding: 0 32px clamp(36px, 6svh, 48px);
  }

  .hero__title {
    max-width: none;
    font-size: clamp(1.25rem, 6.4vw, 1.75rem);
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-shadow: 0 2px 10px rgb(0 0 0 / 45%);
  }

  .hero__cta {
    --btn-color: var(--color-white);
    --btn-border: var(--color-white);

    width: auto;
    min-width: 168px;
    height: 44px;
    padding: 0 28px;
    border-width: 2px;
    border-radius: 22px;
    font-size: 1.1875rem;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 6px rgb(0 0 0 / 45%);
  }

  body:has(.hero) .site-header__logo img {
    height: 54px;
  }
}