/*
 * rem-host-guide.css
 * Real Estate Moguls — Host Studio Guide Page
 *
 * Editorial-magazine styling, sibling to rem-about.css. All rules are
 * scoped to .rem-hsg-page so nothing leaks into the rest of the theme.
 *
 * Section map matches template-page-host-studio-guide.php:
 *   1. Hero
 *   2. Confidence (light split)
 *   3. Image row 1
 *   4. Value cards (3, image-topped)
 *   5. Recording day (dark split, reversed)
 *   6. Image row 2
 *   7. Guest resources
 *   8. Schedule (dark gradient)
 *   9. Host resources
 *  10. Image row 3
 *  11. Closing (dark)
 */

/* ── Smooth-scroll for the hero CTA anchor (only when this template is on the page). ── */
html:has(.rem-hsg-page) { scroll-behavior: smooth; }

/* ── Page wrapper. ── */
.rem-hsg-page { -webkit-font-smoothing: antialiased; color: #4A5568; }
.rem-hsg-page * { box-sizing: border-box; }

/* ──────────────────────────────────────────────
   1. HERO
   ────────────────────────────────────────────── */
.rem-hsg-page .hsg-hero { position: relative; height: 700px; overflow: hidden; }
.rem-hsg-page .hsg-hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.rem-hsg-page .hsg-hero__ov {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13,27,42,.92) 0%, rgba(13,27,42,.68) 44%, rgba(13,27,42,.15) 100%);
  display: flex; align-items: center; padding: 0 80px;
}
.rem-hsg-page .hsg-hero__box { max-width: 660px; }
.rem-hsg-page .hsg-hero__box h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.06;
  color: #fff;
  margin: 0 0 24px;
  letter-spacing: -.025em;
}
.rem-hsg-page .hsg-hero__box h1 em { font-style: normal; color: var(--primary); }
.rem-hsg-page .hsg-hero__box p {
  font-family: var(--font-body);
  font-size: 20px;
  color: rgba(255,255,255,.82);
  line-height: 1.7;
  max-width: 560px;
  margin: 0;
}
.rem-hsg-page .hsg-hero__cta { margin-top: 36px; }

/* ──────────────────────────────────────────────
   2. EYEBROWS, HEADLINES, BODY
   ────────────────────────────────────────────── */
.rem-hsg-page .hsg-eye {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  margin-bottom: 18px;
}
.rem-hsg-page .hsg-eye--lt { color: rgba(41,171,226,.85); }

.rem-hsg-page h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--authority, #0D1B2A);
  margin: 0 0 22px;
  letter-spacing: -.02em;
}
.rem-hsg-page h2 em { font-style: normal; color: var(--primary); }
.rem-hsg-page .hsg-h2--lt { color: #fff; }

.rem-hsg-page .hsg-body {
  font-family: var(--font-body);
  font-size: 20px;
  color: #4A5568;
  line-height: 1.75;
}
.rem-hsg-page .hsg-body--lt {
  font-family: var(--font-body);
  font-size: 20px;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
}
.rem-hsg-page .hsg-body--narrow { max-width: 760px; }
.rem-hsg-page .hsg-text--center { text-align: center; }
.rem-hsg-page .hsg-text--center .hsg-body--narrow,
.rem-hsg-page .hsg-text--center .hsg-eye,
.rem-hsg-page .hsg-text--center .hsg-eye--lt { margin-left: auto; margin-right: auto; }

/* ──────────────────────────────────────────────
   3. SECTIONS / CONTAINERS
   ────────────────────────────────────────────── */
.rem-hsg-page .hsg-sec      { padding: 90px 40px; background: #fff; }
.rem-hsg-page .hsg-sec--alt { padding: 90px 40px; background: var(--background, #F2F4F7); }
.rem-hsg-page .hsg-sec--dark {
  padding: 90px 40px;
  background: var(--authority, #0D1B2A);
  border-top: 5px solid var(--primary);
  border-bottom: 5px solid var(--primary);
}
.rem-hsg-page .hsg-sec--sched {
  padding: 110px 40px;
  background:
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(41,171,226,.06) 0%, transparent 70%),
    linear-gradient(175deg, #060D19 0%, var(--authority, #0D1B2A) 40%);
  border-top: 5px solid var(--primary);
  border-bottom: 5px solid var(--primary);
}
.rem-hsg-page .hsg-inn { max-width: 1100px; margin: 0 auto; }
.rem-hsg-page .hsg-nrw { max-width: 760px; margin: 0 auto; }

/* ──────────────────────────────────────────────
   4. SPLIT (copy + image)
   ────────────────────────────────────────────── */
.rem-hsg-page .hsg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.rem-hsg-page .hsg-split--reverse .hsg-split__img  { order: 1; }
.rem-hsg-page .hsg-split--reverse .hsg-split__copy { order: 2; }
.rem-hsg-page .hsg-split__copy { display: flex; flex-direction: column; justify-content: center; }
.rem-hsg-page .hsg-split__img { overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 3; }
.rem-hsg-page .hsg-split__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.rem-hsg-page .hsg-split__img:hover img { transform: scale(1.03); }

/* ──────────────────────────────────────────────
   5. IMAGE ROWS
   ────────────────────────────────────────────── */
.rem-hsg-page .hsg-imgrow { display: grid; grid-template-columns: repeat(3, 1fr); }
.rem-hsg-page .hsg-imgrow__i { overflow: hidden; }
.rem-hsg-page .hsg-imgrow__i img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.rem-hsg-page .hsg-imgrow__i:hover img { transform: scale(1.04); }
.rem-hsg-page .hsg-imgrow--tall  .hsg-imgrow__i { height: 340px; }
.rem-hsg-page .hsg-imgrow--short .hsg-imgrow__i { height: 240px; }

/* ──────────────────────────────────────────────
   6. VALUE CARDS (image-topped pillars)
   ────────────────────────────────────────────── */
.rem-hsg-page .hsg-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.rem-hsg-page .hsg-pillar {
  background: #fff;
  border: 1px solid #E2E5E9;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease;
}
.rem-hsg-page .hsg-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(13,27,42,.08);
}
.rem-hsg-page .hsg-pillar__img { aspect-ratio: 16 / 10; overflow: hidden; }
.rem-hsg-page .hsg-pillar__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.rem-hsg-page .hsg-pillar:hover .hsg-pillar__img img { transform: scale(1.04); }
.rem-hsg-page .hsg-pillar__body { padding: 32px 28px 36px; }
.rem-hsg-page .hsg-pillar__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--authority, #0D1B2A);
  margin: 0 0 14px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.rem-hsg-page .hsg-pillar__body p {
  font-family: var(--font-body);
  font-size: 17px;
  color: #4A5568;
  line-height: 1.7;
  margin: 0;
}

/* ──────────────────────────────────────────────
   7. RESOURCES (guest + host)
   ────────────────────────────────────────────── */
.rem-hsg-page .hsg-resources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.rem-hsg-page .hsg-resource {
  display: block;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid #E2E5E9;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rem-hsg-page .hsg-resource:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 10px 28px rgba(13,27,42,.08);
}
.rem-hsg-page .hsg-resource__label {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--authority, #0D1B2A);
  line-height: 1.3;
  margin-bottom: 6px;
}
.rem-hsg-page .hsg-resource__desc {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  color: #4A5568;
  line-height: 1.55;
  margin-bottom: 14px;
}
.rem-hsg-page .hsg-resource__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
}

.rem-hsg-page .hsg-empty {
  margin-top: 36px;
  padding: 28px;
  border: 1px dashed #C9CED5;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  color: #8892A0;
  text-align: center;
  font-style: italic;
}

/* ──────────────────────────────────────────────
   8. SCHEDULE
   ────────────────────────────────────────────── */
.rem-hsg-page .hsg-cal-embed {
  margin: 44px auto 0;
  max-width: 900px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(41,171,226,.18);
  border-radius: 8px;
  overflow: hidden;
}
.rem-hsg-page .hsg-cal-embed iframe {
  width: 100%;
  min-height: 720px;
  border: 0;
  display: block;
}
.rem-hsg-page .hsg-sched-cta { margin-top: 40px; }
.rem-hsg-page .hsg-placeholder {
  margin: 36px auto 0;
  max-width: 600px;
  padding: 26px;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255,255,255,.55);
  text-align: center;
  font-style: italic;
}

/* ──────────────────────────────────────────────
   9. BUTTONS
   ────────────────────────────────────────────── */
.rem-hsg-page .hsg-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 40px;
  border-radius: var(--rad-btn, 4px);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.rem-hsg-page .hsg-btn--primary { background: var(--primary); color: #fff; }
.rem-hsg-page .hsg-btn--primary:hover { background: #1d8ab5; color: #fff; transform: translateY(-1px); }
.rem-hsg-page .hsg-btn--lg { padding: 18px 46px; font-size: 16px; }

/* ──────────────────────────────────────────────
   10. CLOSING
   ────────────────────────────────────────────── */
.rem-hsg-page .hsg-closing {
  background: var(--authority, #0D1B2A);
  padding: 110px 40px;
  text-align: center;
  border-top: 5px solid var(--primary);
}
.rem-hsg-page .hsg-closing__eye {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  margin-bottom: 20px;
}
.rem-hsg-page .hsg-closing h2 { color: #fff; margin-bottom: 28px; }
.rem-hsg-page .hsg-closing__body {
  font-family: var(--font-body);
  font-size: 20px;
  color: rgba(255,255,255,.66);
  line-height: 1.85;
  margin: 0 auto 24px;
}
.rem-hsg-page .hsg-closing__bold {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .04em;
  margin-top: 36px;
}

/* ──────────────────────────────────────────────
   11. RESPONSIVE
   ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .rem-hsg-page .hsg-hero { height: 620px; }
  .rem-hsg-page .hsg-hero__ov { padding: 0 36px; }

  .rem-hsg-page .hsg-sec,
  .rem-hsg-page .hsg-sec--alt,
  .rem-hsg-page .hsg-sec--dark { padding: 64px 24px; }
  .rem-hsg-page .hsg-sec--sched { padding: 80px 24px; }
  .rem-hsg-page .hsg-closing { padding: 72px 24px; }

  .rem-hsg-page .hsg-split { grid-template-columns: 1fr; gap: 40px; }
  .rem-hsg-page .hsg-split--reverse .hsg-split__img  { order: 1; }
  .rem-hsg-page .hsg-split--reverse .hsg-split__copy { order: 2; }
  .rem-hsg-page .hsg-split__img { aspect-ratio: 16 / 10; }

  .rem-hsg-page .hsg-pillars { grid-template-columns: 1fr; gap: 24px; }
  .rem-hsg-page .hsg-resources { grid-template-columns: 1fr; }

  .rem-hsg-page .hsg-imgrow { grid-template-columns: 1fr 1fr; }
  .rem-hsg-page .hsg-imgrow__i:last-child { display: none; }

  .rem-hsg-page .hsg-cal-embed iframe { min-height: 620px; }
}

@media (max-width: 640px) {
  .rem-hsg-page .hsg-hero { height: 560px; }
  .rem-hsg-page .hsg-hero__ov { padding: 0 24px; }
  .rem-hsg-page .hsg-hero__box h1 { font-size: 36px; }
  .rem-hsg-page .hsg-hero__box p { font-size: 17px; }

  .rem-hsg-page .hsg-imgrow { grid-template-columns: 1fr; }
  .rem-hsg-page .hsg-imgrow__i { display: block !important; }
  .rem-hsg-page .hsg-imgrow--tall  .hsg-imgrow__i { height: 240px; }
  .rem-hsg-page .hsg-imgrow--short .hsg-imgrow__i { height: 200px; }

  .rem-hsg-page .hsg-resource { padding: 22px 22px; }
  .rem-hsg-page .hsg-cal-embed iframe { min-height: 560px; }

  .rem-hsg-page .hsg-btn { padding: 14px 30px; font-size: 14px; }
  .rem-hsg-page .hsg-btn--lg { padding: 16px 34px; font-size: 15px; }
}

@media (max-width: 375px) {
  .rem-hsg-page .hsg-hero__box h1 { font-size: 32px; }
  .rem-hsg-page .hsg-pillar__body { padding: 26px 22px 30px; }
}

/* ──────────────────────────────────────────────
   12. ACCESSIBILITY — REDUCED MOTION
   ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html:has(.rem-hsg-page) { scroll-behavior: auto; }
  .rem-hsg-page * {
    transition: none !important;
    animation: none !important;
  }
  .rem-hsg-page .hsg-imgrow__i:hover img,
  .rem-hsg-page .hsg-pillar:hover .hsg-pillar__img img,
  .rem-hsg-page .hsg-split__img:hover img { transform: none; }
}