/* ============================================================
   Inner pages — banner hero + listing iframe embeds + content blocks
   Shared by listing/city shells and content pages (about/buyer/seller…).
   ============================================================ */

/* ---- Page banner (hero: bg image + dark overlay + centered title) ---- */
/* Prod parallaxes these banners at half speed, same rule as the home page
   (contact: a 650px layer over a 400px banner in a 900px viewport). Its scrim
   is a separate node pinned to the banner, so it must NOT ride the photo
   layer — the title's contrast depends on it staying put. Photo sits on
   .parallax__layer (z 0), scrim above it (z 1), title on top (z 2). */
.page-banner {
  min-height: 300px;
  display: flex;
  align-items: center;
}
.page-banner .parallax__layer { z-index: 0; }
.page-banner::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, .5);   /* was baked into the inline linear-gradient */
}
.page-banner > .container { position: relative; z-index: 2; }
.page-banner__title {
  width: 100%;
  margin: 0;
  text-align: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);   /* legibility over banner image (WCAG safety) */
}

/* ---- Listing iframe embed (mygoodreal widget) ---- */
.listing-embed { padding-block: var(--space-7); }
.listing-iframe {
  width: 100%;
  border: 0;
  display: block;
  height: var(--ifr-h, 2000px);
}

/* ---- Empty parent/orphan pages (blank on prod too) ---- */
.page-empty { min-height: 42vh; }

/* ---- Simple intro / prose block under a banner ---- */
.page-intro { padding-block: var(--space-8); text-align: center; }
.page-intro p { color: var(--c-text-soft); max-width: 64ch; margin-inline: auto; }

@media (max-width: 768px) {
  .page-banner { min-height: 220px; }
  .page-banner__title { font-size: var(--text-xl); }
}
/* Sitejet "sm" breakpoint: mobile iframe is short with internal scroll */
@media (max-width: 575px) {
  .listing-iframe { height: 600px; }
}

/* ============================================================
   Content pages — about / buyer / seller / contact
   ============================================================ */

/* ---- About: navy-accent hero (bio left, cut-out photo right on navy) ---- */
.about-hero { padding-block: var(--space-8); overflow: hidden; }
.about-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.about-hero__body { min-width: 0; }   /* prevents grid-blowout: long email CTA forced the mobile 1-col track to ~483px, clipping all hero text */
.about-hero__body h1 { font-size: var(--text-2xl); color: var(--c-primary); margin-bottom: var(--space-3); }
.about-hero__role { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--c-primary); font-size: 20px; margin: 0 0 var(--space-1); }   /* prod: navy 20px Manrope */
.about-hero__langs { color: var(--c-primary); font-weight: var(--fw-regular); font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-5); }
.about-hero__body p { color: var(--c-primary); }   /* prod: bio copy renders navy, not gray */
.about-hero__cta { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; margin-top: var(--space-5); max-width: 100%; }
.about-hero__cta .btn { max-width: 100%; overflow-wrap: break-word; }   /* long email CTA must wrap instead of overflowing on narrow viewports */
.about-hero__photo { background: #3182b9; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; min-height: 480px; }   /* prod steel-blue panel; navy made Betty's black suit merge in */
.about-hero__photo img { display: block; max-height: 640px; width: auto; }

/* ---- About extra: more bio + awards + badge row ---- */
.about-extra p { color: var(--c-primary); max-width: 72ch; }   /* prod: bio copy renders navy, not gray */
.about-awards__label { font-weight: var(--fw-regular); color: var(--c-primary); margin-bottom: var(--space-2); }
.about-awards { margin: 0 0 var(--space-6); }
.about-awards li { position: relative; padding-left: 22px; margin-bottom: var(--space-2); color: var(--c-primary); }
.about-awards li::before { content: "\25B8"; position: absolute; left: 0; color: var(--c-primary); }
.about-badges { display: flex; flex-wrap: wrap; gap: var(--space-7); align-items: center; }
.about-badges img { height: 130px; width: auto; }

/* ---- Buyer/Seller: blue hero — white text card + photo ---- */
.content-hero { background: #3182b9; padding-block: var(--space-8); }   /* prod buyer/seller hero panel (bg-shape-blue) */
.content-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.content-hero__card { background: var(--c-bg); padding: var(--space-7); }
.content-hero__card h1 { font-size: var(--text-2xl); color: var(--c-primary); margin-bottom: var(--space-4); }
.content-hero__card p { color: var(--c-primary); font-size: 20px; }   /* prod: navy 20px */
.content-hero__card .seller-guide { display: inline-block; margin: var(--space-2) 0 0; color: var(--c-primary); font-weight: var(--fw-regular); text-decoration: underline; }
.content-hero__cta { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; margin-top: var(--space-5); }
.content-hero__photo img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; }

/* ---- Contact: tall banner + 3 info boxes ---- */
.page-banner--tall { min-height: 400px; }
.page-banner--tall .page-banner__title { font-size: var(--text-3xl); }   /* prod contact banner = 48px (bigger than listing shells' 32px) */
.contact-info { background: #ededed; padding-block: var(--space-9); }
.contact-info__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); text-align: center; }
.contact-info__box { display: flex; flex-direction: column; align-items: center; }
.contact-info__box svg { width: 34px; height: 34px; color: var(--c-primary); margin-bottom: var(--space-3); }
.contact-info__box h2 { text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--text-xl); font-weight: var(--fw-light); margin-bottom: var(--space-3); }   /* prod: 21px w300 */
.contact-info__box p { margin: 0; color: var(--c-text-soft); line-height: 1.7; }
.contact-info__box a { color: var(--c-primary); }

/* ---- "Get in touch" CTA + form (dark image variant / light variant) ---- */
.contact-cta { padding-block: var(--space-9); }
.contact-cta__head { text-align: center; margin-bottom: var(--space-7); }
.contact-cta__head h2 { margin-bottom: var(--space-3); }
.contact-cta__head p { text-transform: uppercase; letter-spacing: var(--ls-wide); margin: 0; }
.contact-cta--dark { background-size: cover; background-position: center; color: #fff; }
.contact-cta--dark .contact-cta__head h2, .contact-cta--dark .contact-cta__head p { color: #fff; }
.contact-cta--light .contact-cta__head h2 { color: var(--c-primary); }
.contact-cta--light .contact-cta__head p { color: var(--c-text-soft); }

@media (max-width: 768px) {
  .about-hero__grid, .content-hero__grid { grid-template-columns: 1fr; }
  .contact-info__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-badges { justify-content: center; }
  .about-hero__photo { min-height: 0; }
  .content-hero__cta .btn { font-size: var(--text-base); padding: 8px 16px; }   /* prod: 16px + tighter padding on mobile — keeps long email button on one line */
}