/* Compact editorial About section - homepage only */
.intro {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding: 64px 0 50px;
  background: #eee7db;
  border-top: 1px solid rgba(28,28,25,.08);
  border-bottom: 1px solid rgba(28,28,25,.08);
}

.intro::before,
.intro::after {
  display: none;
}

.intro .container {
  width: min(1260px, calc(100% - 72px));
}

.intro-grid {
  display: grid;
  grid-template-columns: 470px minmax(0, 1fr);
  gap: clamp(160px, 11vw, 180px);
  align-items: center;
  min-height: 0;
}

.intro-image-wrap {
  position: relative;
  width: 100%;
  padding: 0;
}

/* Keep the uploaded cathedral image at its natural ratio - never crop it. */
.intro-image-main {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 24px 58px rgba(27,25,20,.15);
}

/*
 * Exact desktop relationship requested:
 * - left edge begins one third into the cathedral image
 * - top edge begins about 20% up from the cathedral image's bottom
 * - the whole image group is shifted down with the new 50px section breathing room,
 *   preserving the same relationship to the section boundary below.
 */
.intro-image-small {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  left: 33%;
  right: auto;
  top: calc(80% + 50px);
  bottom: auto;
  object-fit: cover;
  border: 8px solid #eee7db;
  box-shadow: 0 24px 52px rgba(27,25,20,.20);
}

.intro-image-wrap::after {
  display: none;
}

/* The larger gap is the safety zone - the image never needs to sit under the copy. */
.intro-copy {
  position: relative;
  z-index: 6;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  max-width: 610px;
}

.intro-copy::before {
  content: '';
  display: block;
  width: 42px;
  height: 1px;
  margin-bottom: 22px;
  background: var(--bronze);
}

.intro-copy .eyebrow {
  margin-bottom: 18px;
  color: var(--bronze-dark);
}

.intro-copy .section-title {
  max-width: 590px;
  font-size: clamp(48px, 4.7vw, 72px);
  line-height: .94;
  letter-spacing: -.04em;
}

.intro-copy .lead {
  max-width: 560px;
  margin: 26px 0 28px;
  padding: 0;
  color: #575249;
  font-size: 17px;
  line-height: 1.72;
}

.intro-copy .lead::before {
  display: none;
}

.intro-copy .btn-dark {
  border: 0;
  min-height: auto;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  letter-spacing: .14em;
}

.intro-copy .btn-dark:hover {
  transform: translateX(4px);
  background: transparent;
  color: var(--bronze-dark);
  border-color: var(--bronze-dark);
}

/* Half the second image hangs into this dark area; the heading starts below it. */
.rooms-section {
  position: relative;
  z-index: 1;
  padding-top: 180px;
}

.rooms-section .section-head {
  position: relative;
  z-index: 2;
}

/* Subtle entrance only - no large movement. */
@media (prefers-reduced-motion: no-preference) {
  .intro .intro-image-main,
  .intro .intro-image-small,
  .intro .intro-copy {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .intro .intro-image-small { transition-delay: .08s; }
  .intro .intro-copy { transition-delay: .12s; }
  .intro.is-visible .intro-image-main,
  .intro.is-visible .intro-image-small,
  .intro.is-visible .intro-copy {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1100px) {
  .intro .container { width: min(100% - 56px, 1080px); }
  .intro-grid {
    grid-template-columns: 410px minmax(0,1fr);
    gap: 145px;
  }
  .intro-image-small {
    width: 100%;
    left: 33%;
    top: calc(80% + 50px);
  }
  .rooms-section { padding-top: 165px; }
}

@media (max-width: 940px) {
  .intro { padding: 60px 0 50px; }
  .intro .container { width: min(100% - 48px, 900px); }
  .intro-grid {
    grid-template-columns: 350px minmax(0,1fr);
    gap: 125px;
  }
  .intro-image-small {
    width: 98%;
    left: 32%;
    top: calc(80% + 50px);
  }
  .intro-copy .section-title { font-size: clamp(44px, 5.6vw, 60px); }
  .rooms-section { padding-top: 155px; }
}

/* Once the layout stacks, keep both images together and keep all copy clear. */
@media (max-width: 760px) {
  .intro {
    overflow: hidden;
    padding-bottom: 62px;
  }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 92px;
  }
  .intro-image-wrap {
    width: min(86%, 470px);
    margin: 0 auto;
    padding-bottom: 128px;
  }
  .intro-image-small {
    width: 88%;
    left: 20%;
    right: auto;
    top: 66%;
  }
  .rooms-section { padding-top: 122px; }
}

@media (max-width: 680px) {
  .intro { padding: 54px 0 66px; }
  .intro .container { width: calc(100% - 34px); }
  .intro-grid { gap: 82px; }
  .intro-image-wrap {
    width: min(88%, 420px);
    padding-bottom: 116px;
  }
  .intro-image-small {
    width: 86%;
    left: 18%;
    right: auto;
    top: 66%;
    border-width: 6px;
  }
  .intro-copy {
    max-width: 560px;
  }
  .intro-copy .section-title {
    font-size: clamp(46px, 13vw, 62px);
  }
  .intro-copy .lead {
    font-size: 16px;
    margin: 22px 0 25px;
  }
}