/*
 * Shared product-page hero geometry.
 * project-management.html is the visual baseline; page-specific colors and
 * component contents remain owned by each page stylesheet.
 */
:root {
  --product-hero-width: 1180px;
  --product-hero-height: 720px;
  --product-hero-gap: 56px;
  --product-hero-copy: minmax(0, .9fr);
  --product-hero-media: minmax(0, 1.1fr);
  --product-hero-title: 58px;
  --product-hero-media-ratio: 16 / 11;
}

/* Keep the first viewport deterministic even when a page-specific demo script
 * initializes before the shared intersection observer. */
.pm-page .pm-hero .reveal,
.ai-engine-hero .reveal,
.fm-page .fm-hero .reveal,
.wiki-page .wiki-hero .reveal,
.mind-page .mind-hero .reveal {
  opacity: 1;
  transform: none;
}

/* Product, customer, and bug pages share the pm-* component family. */
.pm-page .pm-hero > .pm-hero-inner {
  width: min(var(--product-hero-width), calc(100% - 40px));
  min-height: var(--product-hero-height);
  padding: 80px 0 64px;
  grid-template-columns: var(--product-hero-copy) var(--product-hero-media);
  gap: var(--product-hero-gap);
}
.pm-page .pm-hero-copy { max-width: 530px; }
.pm-page .pm-hero-copy h1 {
  margin: 22px 0 24px;
  font-size: var(--product-hero-title);
  line-height: 1.14;
}
.pm-page .pm-hero-lead {
  max-width: 520px;
  font-size: 18px;
  line-height: 1.8;
}
.pm-page .pm-hero-copy .hero-actions { margin-top: 32px; }
.pm-page .pm-proof { margin-top: 40px; padding-top: 22px; }
.pm-page .pm-product-window {
  width: 100%;
  aspect-ratio: var(--product-hero-media-ratio);
  transform: none;
}
.pm-page .pm-window-body { height: calc(100% - 65px); min-height: 0; }
.bt-page .bt-board-body { height: calc(100% - 54px); min-height: 0; }
.bt-page .bt-hero-window { transform: none; }

/* ThisSprint AI */
.ai-engine-hero { padding: 68px 0 0; }
.ai-engine-hero .ai-hero-grid {
  width: min(var(--product-hero-width), calc(100% - 40px));
  min-height: var(--product-hero-height);
  grid-template-columns: var(--product-hero-copy) var(--product-hero-media);
  gap: var(--product-hero-gap);
}
.ai-engine-hero h1 {
  margin: 22px 0 24px;
  font-size: var(--product-hero-title);
  line-height: 1.14;
}
.ai-engine-hero .hero-lead {
  max-width: 520px;
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.8;
}
.ai-engine-hero .ai-hero-kpis { margin-top: 40px; padding-top: 22px; }
.ai-engine-hero .ai-screenshot {
  width: 100%;
  aspect-ratio: var(--product-hero-media-ratio);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ai-engine-hero .ai-screenshot img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

/* File management */
.fm-page .fm-hero { padding: 68px 0 0; }
.fm-page .fm-hero-grid {
  width: min(var(--product-hero-width), calc(100% - 40px));
  min-height: var(--product-hero-height);
  grid-template-columns: var(--product-hero-copy) var(--product-hero-media);
  gap: var(--product-hero-gap);
}
.fm-page .fm-hero-copy { max-width: 530px; }
.fm-page .fm-hero-copy h1 {
  margin: 22px 0 24px;
  font-size: var(--product-hero-title);
  line-height: 1.14;
  white-space: normal;
}
.fm-page .fm-hero-copy > p:nth-of-type(2) {
  max-width: 520px;
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.8;
}
.fm-page .fm-proof-row { margin-top: 40px; }
.fm-page .fm-browser {
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--product-hero-media-ratio);
  transform: none;
}
.fm-page .fm-browser-body { height: calc(100% - 58px); min-height: 0; }
.fm-page .fm-hero-foot { margin-top: 0; }

/* Wiki knowledge hub */
.wiki-page .wiki-hero-inner {
  width: min(var(--product-hero-width), calc(100% - 40px));
  min-height: var(--product-hero-height);
  padding: 80px 0 64px;
  grid-template-columns: var(--product-hero-copy) var(--product-hero-media);
  gap: var(--product-hero-gap);
}
.wiki-page .wiki-hero-copy { max-width: 530px; }
.wiki-page .wiki-hero-copy h1 {
  margin: 22px 0 24px;
  font-size: var(--product-hero-title);
  line-height: 1.14;
}
.wiki-page .wiki-hero-lead {
  max-width: 520px;
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.8;
}
.wiki-page .wiki-proof-row { margin-top: 40px; }
.wiki-page .wiki-product-shot {
  width: 100%;
  aspect-ratio: var(--product-hero-media-ratio);
  transform: none;
}
.wiki-page .wiki-product-image img { width: 100%; height: 100%; object-fit: fill; }

/* Wiki mind map */
.mind-page .mind-hero { padding: 68px 0 0; }
.mind-page .mind-hero-inner {
  width: min(var(--product-hero-width), calc(100% - 40px));
  min-height: var(--product-hero-height);
  padding: 80px 0 64px;
  grid-template-columns: var(--product-hero-copy) var(--product-hero-media);
  gap: var(--product-hero-gap);
}
.mind-page .mind-hero-copy { max-width: 530px; }
.mind-page .mind-hero-copy h1 {
  margin: 22px 0 24px;
  font-size: var(--product-hero-title);
  line-height: 1.14;
}
.mind-page .mind-hero-lead {
  max-width: 520px;
  font-size: 18px;
  line-height: 1.8;
}
.mind-page .mind-proof { margin-top: 40px; }
.mind-page .hero-shot {
  width: 100%;
  aspect-ratio: var(--product-hero-media-ratio);
  transform: none;
}
.mind-page .shot-workspace { height: calc(100% - 101px); min-height: 0; }
.mind-page .map-canvas-hero { min-height: 0; }

@media (max-width: 1100px) {
  .pm-page .pm-hero > .pm-hero-inner,
  .ai-engine-hero .ai-hero-grid,
  .fm-page .fm-hero-grid,
  .wiki-page .wiki-hero-inner,
  .mind-page .mind-hero-inner {
    min-height: auto;
    padding: 108px 0 72px;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .pm-page .pm-hero-copy,
  .fm-page .fm-hero-copy,
  .wiki-page .wiki-hero-copy,
  .mind-page .mind-hero-copy { max-width: 720px; }
  .ai-engine-hero .ai-screenshot,
  .pm-page .pm-product-window,
  .fm-page .fm-browser,
  .wiki-page .wiki-product-shot,
  .mind-page .hero-shot { max-width: 760px; margin-inline: auto; }
}

@media (max-width: 640px) {
  :root { --product-hero-title: 40px; }
  .pm-page .pm-hero > .pm-hero-inner,
  .ai-engine-hero .ai-hero-grid,
  .fm-page .fm-hero-grid,
  .wiki-page .wiki-hero-inner,
  .mind-page .mind-hero-inner {
    width: calc(100% - 36px);
    padding: 96px 0 58px;
    gap: 38px;
  }
  .pm-page .pm-hero-copy h1,
  .ai-engine-hero h1,
  .fm-page .fm-hero-copy h1,
  .wiki-page .wiki-hero-copy h1,
  .mind-page .mind-hero-copy h1 { line-height: 1.16; }
  .pm-page .pm-hero-copy,
  .ai-engine-hero .ai-hero-grid > div:first-child,
  .fm-page .fm-hero-copy,
  .wiki-page .wiki-hero-copy,
  .mind-page .mind-hero-copy { min-width: 0; overflow: hidden; }
  .pm-page .pm-hero-copy h1,
  .pm-page .pm-hero-lead,
  .ai-engine-hero h1,
  .ai-engine-hero .hero-lead,
  .fm-page .fm-hero-copy h1,
  .fm-page .fm-hero-copy > p:nth-of-type(2),
  .wiki-page .wiki-hero-copy h1,
  .wiki-page .wiki-hero-lead,
  .mind-page .mind-hero-copy h1,
  .mind-page .mind-hero-lead {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .pm-page .pm-hero-copy h1 br,
  .ai-engine-hero h1 br,
  .fm-page .fm-hero-copy h1 br,
  .wiki-page .wiki-hero-copy h1 br,
  .mind-page .mind-hero-copy h1 br { display: none; }
  .pm-page .pm-hero-copy h1 strong,
  .wiki-page .wiki-hero-copy h1 strong,
  .mind-page .mind-hero-copy h1 strong { display: inline; }
  .pm-page .pm-hero-lead,
  .ai-engine-hero .hero-lead,
  .fm-page .fm-hero-copy > p:nth-of-type(2),
  .wiki-page .wiki-hero-lead,
  .mind-page .mind-hero-lead { font-size: 15px; line-height: 1.75; }
  .ai-engine-hero .ai-screenshot,
  .pm-page .pm-product-window,
  .fm-page .fm-browser,
  .wiki-page .wiki-product-shot,
  .mind-page .hero-shot { aspect-ratio: 4 / 3; }
}