/*
  Hero placement — composition only. Type, glass, and padding: components.css.
  One rail width + gallery band + ceremony tile; no per-page glass drift.
*/

@media (min-width: 769px) {
  /* --- Home — panel right; same rail as standard interiors --- */
  body[data-page="index"] .hero {
    justify-content: flex-end;
    align-items: center;
    padding-inline: max(24px, var(--side-pad));
    padding-top: clamp(108px, 11vh, 148px);
    padding-bottom: clamp(52px, 7vh, 96px);
  }

  body[data-page="index"] .hero-content {
    margin-left: auto;
    margin-right: 0;
    width: var(--hero-panel-w-rail);
    max-width: var(--hero-panel-w-rail);
    align-items: flex-start;
    text-align: left;
  }

  body[data-page="index"] .hero-eyebrow,
  body[data-page="index"] .hero-title,
  body[data-page="index"] .hero-script,
  body[data-page="index"] .hero-subtitle {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    align-self: flex-start;
  }

  body[data-page="index"] .hero-actions {
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
  }

  /* --- Standard left rail (micro, FAQ, area, marguerite) --- */
  body[data-page="micro-weddings"] .page-hero,
  body[data-page="faq"] .page-hero,
  body[data-page="area-guide"] .page-hero,
  body[data-page="marguerite-house"] .page-hero {
    justify-content: flex-start;
    align-items: center;
    padding-inline: max(24px, var(--side-pad));
    padding-top: clamp(108px, 11vh, 148px);
    padding-bottom: clamp(52px, 7vh, 96px);
  }

  body[data-page="marguerite-house"] .page-hero {
    padding-top: clamp(104px, 11vh, 144px);
    padding-bottom: clamp(56px, 8vh, 100px);
  }

  body[data-page="micro-weddings"] .page-hero-content,
  body[data-page="faq"] .page-hero-content,
  body[data-page="area-guide"] .page-hero-content,
  body[data-page="marguerite-house"] .page-hero-content {
    margin-left: 0;
    margin-right: auto;
    width: var(--hero-panel-w-rail);
    max-width: var(--hero-panel-w-rail);
    align-items: flex-start;
    text-align: left;
  }

  body[data-page="micro-weddings"] .page-eyebrow,
  body[data-page="micro-weddings"] .page-title,
  body[data-page="micro-weddings"] .page-script,
  body[data-page="micro-weddings"] .hero-sub,
  body[data-page="faq"] .page-eyebrow,
  body[data-page="faq"] .page-title,
  body[data-page="faq"] .page-script,
  body[data-page="faq"] .hero-sub,
  body[data-page="area-guide"] .page-eyebrow,
  body[data-page="area-guide"] .page-title,
  body[data-page="area-guide"] .page-script,
  body[data-page="area-guide"] .hero-sub,
  body[data-page="marguerite-house"] .page-eyebrow,
  body[data-page="marguerite-house"] .page-title,
  body[data-page="marguerite-house"] .page-script,
  body[data-page="marguerite-house"] .hero-sub {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    align-self: flex-start;
  }

  /* --- Pricing — slightly wider for headline + value clarity --- */
  body[data-page="pricing"] .page-hero {
    justify-content: flex-start;
    align-items: center;
    padding-inline: max(24px, var(--side-pad));
    padding-top: clamp(108px, 11vh, 148px);
    padding-bottom: clamp(52px, 7vh, 96px);
  }

  body[data-page="pricing"] .page-hero-content {
    margin-left: 0;
    margin-right: auto;
    width: var(--hero-panel-w-pricing);
    max-width: var(--hero-panel-w-pricing);
    align-items: flex-start;
    text-align: left;
  }

  body[data-page="pricing"] .page-eyebrow,
  body[data-page="pricing"] .page-title,
  body[data-page="pricing"] .page-script,
  body[data-page="pricing"] .hero-sub {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    align-self: flex-start;
  }

  /* --- Gallery — bottom band; slim tile, maximum sky + scene --- */
  body[data-page="gallery"] .page-hero {
    justify-content: center;
    align-items: flex-end;
    padding-inline: max(24px, var(--side-pad));
    padding-top: clamp(96px, 12vh, 140px);
    padding-bottom: clamp(52px, 10vh, 96px);
  }

  body[data-page="gallery"] .page-hero-content {
    margin-top: auto;
    margin-bottom: 0;
    margin-inline: auto;
    width: var(--hero-panel-w-gallery);
    max-width: var(--hero-panel-w-gallery);
    text-align: center;
    align-items: center;
    gap: var(--hero-stack-gap);
    padding: var(--hero-panel-pad-y) var(--hero-panel-pad-x)
      calc(var(--hero-panel-pad-y) + 1px);
  }

  body[data-page="gallery"] .page-eyebrow,
  body[data-page="gallery"] .page-title,
  body[data-page="gallery"] .page-script {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-self: center;
  }

  /* --- Ceremony — landscape hero, bottom-left tile --- */
  body[data-page="ceremony-spaces"] .ceremony-hero {
    justify-content: flex-start;
    align-items: flex-end;
    padding-inline: max(24px, var(--side-pad));
    padding-top: clamp(96px, 11vh, 138px);
    padding-bottom: clamp(56px, 9vh, 104px);
  }

  body[data-page="ceremony-spaces"] .ceremony-hero .page-hero-content {
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 0;
    align-self: flex-end;
    width: var(--hero-panel-w-landscape);
    max-width: var(--hero-panel-w-landscape);
    align-items: flex-start;
    text-align: left;
    padding: var(--hero-panel-pad-y) var(--hero-panel-pad-x)
      calc(var(--hero-panel-pad-y) + 1px);
  }

  body[data-page="ceremony-spaces"] .page-eyebrow,
  body[data-page="ceremony-spaces"] .page-title,
  body[data-page="ceremony-spaces"] .page-script,
  body[data-page="ceremony-spaces"] .hero-sub {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    align-self: flex-start;
  }

  /* --- Contact: photo column — soft bleed into ivory column (no hard seam) --- */
  body[data-page="contact"] .hero-left-overlay {
    background: linear-gradient(
      to right,
      rgba(28, 25, 22, 0.06) 0%,
      rgba(28, 25, 22, 0.03) 38%,
      rgba(250, 247, 242, 0.35) 68%,
      rgba(250, 247, 242, 0.88) 88%,
      #faf7f2 100%
    );
  }

  body[data-page="contact"] .hero-right-inner {
    width: min(100%, 500px);
    max-width: 500px;
  }
}

@media (max-width: 768px) {
  /* Gallery: tall editorial frame; same glass width token as other heroes */
  body[data-page="gallery"] .page-hero {
    min-height: min(90svh, 820px);
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }

  body[data-page="ceremony-spaces"] .ceremony-hero {
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
  }

  body[data-page="gallery"] .page-hero-content {
    width: var(--hero-content-max);
    max-width: var(--hero-content-max);
  }
}