/* Park27 — Home page styles
   Typography for h1–h4 lives in base.css. Body utilities (.t-body, .t-lead, .t-quote)
   handle reusable non-heading text. This file carries layout, color, and spacing only. */

/* =========================================================
   HERO
   ========================================================= */

.hero {
  background: var(--brand);
  color: var(--white);
  padding: 0;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}

.hero h1 { color: var(--bg); margin: 0; }
.hero address {
  color: var(--bg);
  font-style: normal;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 400;
  line-height: 1.23;
  text-align-last: center;
}

.hero-inner {
  display: flex;
  gap: 60px;
  justify-content: space-between;
  align-items: center;
}

.hero-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 80px;
}

.hero-media {
  position: relative;
  width: clamp(320px, 56vw, 975px);
  aspect-ratio: 975 / 402;
}

.hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Homepage hero uses the shared article-hero frame; pull the star bar's line
   in closer to the diamond (shared default leaves a wider gap). */
.hero-media .article-hero__image-marker {
  -webkit-mask:
    url('../img/star.svg') center / auto 100% no-repeat,
    linear-gradient(
        to right,
        #000 calc(50% - 18px),
        transparent calc(50% - 18px),
        transparent calc(50% + 18px),
        #000 calc(50% + 18px)
      )
      0 50% / 100% 6px no-repeat;
  mask:
    url('../img/star.svg') center / auto 100% no-repeat,
    linear-gradient(
        to right,
        #000 calc(50% - 18px),
        transparent calc(50% - 18px),
        transparent calc(50% + 18px),
        #000 calc(50% + 18px)
      )
      0 50% / 100% 6px no-repeat;
}

/* Decorative half-circle SVG corners */
.hero-corner {
  position: absolute;
  width: clamp(95px, 11vw, 185px);
  aspect-ratio: 202 / 179;
  background: url('../img/half-circle.svg') center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
.hero-corner.tl { top: 0; left: 0; transform: scaleX(-1); }
.hero-corner.tr { top: 0; right: 0; }
.hero-corner.bl { bottom: 0; left: 0; transform: rotate(180deg); }
.hero-corner.br { bottom: 0; right: 0; transform: scaleY(-1); }

.hero-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: right;
  gap: 43px;
  padding-top: 0;
  color: var(--bg);
}

.hero-info .park27-wordmark { color: var(--bg); width: 99px; }
.hero-info .park27-divider  { color: var(--bg); width: 240px; height: 50px; }

.hero-btns {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}

/* Home philosophy copy: keep the inline Park27 wordmark at the intended size. */
.page-home .media-content-text .park27-wordmark--inline {
  width: 99px;
}

/* Let the home contact banner finish its sticky reveal before properties
   enter. The scroll room must be in-flow content (::after spacer), NOT
   padding-bottom on the stack: sticky children clamp to the containing
   block's CONTENT box, so parent padding adds no travel and the banner
   freezes short of the header. The spacer paints page-bg above the pinned
   about (z1, later in tree order) so no about sliver shows through it. */
@media (min-width: 992px) {
  .page-home .sticky-stack--contact {
    padding-bottom: 0;
  }

  .page-home .sticky-stack--contact::after {
    content: "";
    display: block;
    height: calc(100vh - var(--header-h));
    position: relative;
    z-index: 1;
    background: var(--bg);
  }

  .page-home .sticky-stack--contact .about {
    z-index: 1;
  }

  .page-home .sticky-stack--contact .banner-contact {
    z-index: 2;
  }

  /* The featured carousel (bare [impress_carousel] shortcode — the block-built
     home has no .properties wrapper) takes over .properties' covering role:
     opaque, above the pinned banner (z2), and pulled up by exactly the
     spacer's height so it sits glued under the banner during the whole rise
     and starts riding over the maroon the moment the banner pins. No static
     maroon dwell, and the banner keeps its natural (padding-driven) height. */
  .page-home .impress-carousel-shortcode {
    position: relative;
    z-index: 3;
    background: var(--bg);
    margin-top: calc(-100vh + var(--header-h));
    padding-top: 80px;
  }

  .page-home .impress-carousel-shortcode + .properties-footer {
    position: relative;
    z-index: 3;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1399px) {
  .hero-main { justify-content: center; gap: 48px; }
}

@media (max-width: 991px) {
  .hero-inner { flex-direction: column; align-items: stretch; min-height: auto; gap: 40px; }
  .hero-info  { align-items: center; text-align: left; padding-top: 0; padding-bottom: 40px; }
  .hero-media { width: 100%; max-width: none; }
}

@media (max-width: 450px) {
  .hero-btns { flex-direction: column; align-items: stretch; }
}

/* On small screens the shared article-hero frame is too heavy for the small
   hero image — slim the border, tighten the insets and shrink the star bar. */
@media (max-width: 480px) {
  .hero-media .article-hero__image-frame {
    inset: 12px 18px 21px;
    border-width: 3px 3px 0;
  }
  .hero-media .article-hero__image-marker {
    left: 22px;
    right: 22px;
    bottom: 9px;
    height: 30px;
    -webkit-mask:
      url('../img/star.svg') center / auto 100% no-repeat,
      linear-gradient(
          to right,
          #000 calc(50% - 13px),
          transparent calc(50% - 13px),
          transparent calc(50% + 13px),
          #000 calc(50% + 13px)
        )
        0 50% / 100% 3px no-repeat;
    mask:
      url('../img/star.svg') center / auto 100% no-repeat,
      linear-gradient(
          to right,
          #000 calc(50% - 13px),
          transparent calc(50% - 13px),
          transparent calc(50% + 13px),
          #000 calc(50% + 13px)
        )
        0 50% / 100% 3px no-repeat;
  }
}

/* =========================================================
   IMPRESS LISTING CAROUSEL — mobile scroll fix
   ========================================================= */

/* The IMPress/owl carousel CSS (owl2.carousel.min.css) sets
   `touch-action: none` on its drag items, which makes the browser hand every
   touch gesture to owl and do no native scrolling — so a finger landing on a
   slide can't scroll the page vertically (the "trapped like a map embed"
   symptom). `pan-y` keeps vertical page scroll with the browser while still
   passing horizontal swipes to owl for slide dragging. Extra class raises
   specificity above the plugin rule (.owl-carousel.owl-drag .owl-item). */
.impress-carousel.owl-carousel.owl-drag .owl-item {
  touch-action: pan-y;
}

/* Breathing room between the slides and the prev/next nav arrows. */
.impress-carousel .owl-nav {
  padding-top: 20px;
}

/* =========================================================
   FOOTER FLUSH FIX
   ========================================================= */

/* The block editor leaves an empty trailing <p> at the end of the page
   content. It renders 0px tall but keeps the default paragraph bottom margin
   (~16px), which collapses out of <main> and pushes the footer down — leaving
   a strip between the contact section and the footer. Dropping empty top-level
   paragraphs lets the last section sit flush against the footer. */
main.page-home > p.wp-block-paragraph:empty {
  display: none;
}

/* Hero video. The <img> stays underneath as poster and fallback, so the hero
   paints from the preloaded still before the video buffers. z-index 1 puts the
   video over the image but under the frame (2) and star marker (3) ornaments
   that shared.css positions on top of it. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

/* An iframe cannot object-fit, so the Vimeo embed is sized 16:9 off the box's
   width and the overflow cropped. .hero-media is always wider than 16:9
   (aspect-ratio 975/402), so this covers at every breakpoint. */
.hero-video--embed {
  overflow: hidden;
}

.hero-video--embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  video.hero-video {
    display: none;
  }
}