/*
 * Shared responsive structure for every secondary page.
 * Keeps the existing visual language while allowing the canvas, typography,
 * cards and page sections to scale coherently from 1080P through 4K.
 */
:root {
  --secondary-header-height: clamp(78px, 5.1vw, 104px);
  --secondary-content-width: min(92vw, 2880px);
  --secondary-gutter: clamp(24px, 4vw, 154px);
  --secondary-section-y: clamp(52px, 4.8vw, 132px);
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

body > .common-site-header {
  flex: 0 0 auto;
}

body > main {
  width: 100%;
  min-width: 0;
  flex: 1 0 auto;
}

body > footer,
body > .site-footer {
  flex: 0 0 auto;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* Use one fluid horizontal grid across navigation and page content. */
.container {
  width: var(--secondary-content-width);
  max-width: none;
}

/* List pages: hero and result area always occupy the available viewport. */
.page-hero,
.page-hero-inner {
  min-height: clamp(360px, 36svh, 720px);
}

.page-hero-inner {
  padding-block: clamp(58px, 5vw, 118px);
}

.page-hero h1 {
  font-size: clamp(40px, 2.4vw, 72px);
}

.page-hero-inner > p:not(.page-eyebrow) {
  max-width: min(900px, 62vw);
  font-size: clamp(16px, .92vw, 24px);
}

.page-hero-ornament {
  right: 4vw;
  width: clamp(330px, 22vw, 660px);
  height: clamp(230px, 16vw, 470px);
}

.landing-section {
  min-height: max(520px, calc(100svh - var(--secondary-header-height) - clamp(360px, 36svh, 720px)));
  padding-block: var(--secondary-section-y);
}

.section-heading {
  margin-bottom: clamp(28px, 2vw, 52px);
}

.section-heading h2 {
  font-size: clamp(28px, 1.8vw, 52px);
}

.section-heading p {
  font-size: clamp(14px, .82vw, 21px);
}

.scene-showcase-grid {
  grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 18vw, 430px), 1fr));
  gap: clamp(18px, 1.25vw, 34px);
}

.scene-showcase-card {
  min-height: clamp(280px, 22vw, 560px);
  padding: clamp(92px, 7vw, 170px) clamp(24px, 1.5vw, 42px) clamp(24px, 1.5vw, 42px);
}

.scene-showcase-card h3 {
  min-height: 0;
  font-size: clamp(18px, 1.1vw, 29px);
}

.scene-showcase-card p,
.scene-showcase-link {
  font-size: clamp(13px, .76vw, 19px);
}

.demand-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 22vw, 520px), 1fr));
  gap: clamp(20px, 1.3vw, 36px);
}

.demand-card {
  min-height: clamp(318px, 24vw, 590px);
  padding: clamp(24px, 1.55vw, 42px);
}

.catalog-card h3,
.demand-card h3,
.demand-main h3,
.news-row h3 {
  font-size: clamp(17px, 1.05vw, 28px);
}

.catalog-card p,
.demand-card > p,
.demand-card-main > p,
.demand-main p,
.news-row p {
  font-size: clamp(13px, .74vw, 19px);
}

.news-list-full {
  width: 100%;
}

.news-list-full .news-row {
  min-height: clamp(126px, 8vw, 220px);
}

.site-footer {
  width: 100%;
}

/* Scene detail: full-width visual hero followed by a viewport-filling body. */
.scene-topic-hero,
.scene-topic-hero-inner {
  min-height: clamp(430px, 48svh, 960px);
}

.scene-topic-hero-inner {
  padding-block: clamp(60px, 5vw, 130px);
}

.scene-topic-hero h1 {
  max-width: min(1100px, 68vw);
  font-size: clamp(42px, 3.6vw, 92px);
}

.scene-topic-hero-inner > p:last-child {
  max-width: min(980px, 64vw);
  font-size: clamp(17px, 1vw, 26px);
}

.topic-content {
  min-height: max(680px, calc(100svh - var(--secondary-header-height)));
  padding-bottom: var(--secondary-section-y);
}

.topic-tabs {
  margin-bottom: clamp(44px, 3vw, 78px);
}

/* Demand detail and publishing pages share the same fluid content frame. */
.demand-detail-section,
.publish-section,
.article-section {
  min-height: calc(100svh - var(--secondary-header-height));
}

.demand-detail-section {
  padding: clamp(42px, 3.2vw, 86px) var(--secondary-gutter) var(--secondary-section-y);
}

.demand-detail-heading,
.demand-info-card {
  width: 100%;
  max-width: none;
}

.demand-detail-heading {
  padding: clamp(30px, 2vw, 56px);
}

.demand-detail-heading h1 {
  font-size: clamp(30px, 2vw, 54px);
}

.demand-detail-heading p,
.demand-info-grid dd {
  font-size: clamp(14px, .85vw, 21px);
}

.demand-info-grid {
  padding: clamp(20px, 1.8vw, 48px);
  column-gap: clamp(42px, 4vw, 120px);
}

.publish-section {
  padding: clamp(42px, 3.2vw, 86px) var(--secondary-gutter) var(--secondary-section-y);
}

.publish-page-head,
.publish-form {
  width: min(100%, 1880px);
}

.publish-page-head h1 {
  font-size: clamp(32px, 2vw, 54px);
}

.publish-form {
  padding: clamp(38px, 2.8vw, 78px);
}

.form-grid {
  gap: clamp(18px, 1.4vw, 38px);
}

/* News article keeps a readable measure but grows enough on 2K/4K. */
.article-section {
  width: var(--secondary-content-width);
  max-width: none;
  padding-block: clamp(42px, 3.2vw, 86px) var(--secondary-section-y);
}

.article-body {
  padding: clamp(46px, 4vw, 112px) clamp(42px, 6vw, 170px) clamp(64px, 5vw, 140px);
}

.article-summary {
  max-width: min(1200px, 74vw);
}

.article-cover,
.article-inline-figure img {
  max-height: clamp(520px, 34vw, 980px);
}

.article-body h2 {
  font-size: clamp(26px, 1.5vw, 42px);
}

.article-body section p,
.article-lead {
  font-size: clamp(18px, 1vw, 25px);
}

/* AI workspace fills the current screen instead of stopping at a fixed canvas. */
.ai-main {
  min-height: calc(100svh - var(--secondary-header-height));
  padding-block: clamp(24px, 2vw, 52px);
}

.ai-layout {
  height: calc(100svh - var(--secondary-header-height) - clamp(48px, 4vw, 104px));
  min-height: clamp(680px, 72svh, 1400px);
}

.ai-workspace {
  min-height: 100%;
}

/* Login remains immersive at every aspect ratio. */
.login-screen {
  width: 100%;
  min-height: 100svh;
}

.login-brand-copy {
  left: var(--secondary-gutter);
  width: min(48vw, 1080px);
}

.login-brand-copy h1 {
  font-size: clamp(42px, 4vw, 104px);
}

.login-brand-copy > span {
  max-width: min(820px, 42vw);
  font-size: clamp(16px, .9vw, 23px);
}

.login-card {
  right: var(--secondary-gutter);
  width: min(26vw, 680px);
  min-width: 440px;
  padding: clamp(34px, 2.2vw, 60px);
}

/* Lightweight legal pages use the same page frame and fill short screens. */
.page {
  width: min(76vw, 1800px) !important;
  min-height: calc(100svh - var(--secondary-header-height) - clamp(80px, 8vw, 180px));
  margin-block: clamp(40px, 4vw, 90px) !important;
  padding: clamp(44px, 4vw, 96px) !important;
}

.page h1 {
  font-size: clamp(32px, 2.2vw, 58px);
}

.page p {
  font-size: clamp(16px, .95vw, 24px);
}

@media (max-width: 1180px) {
  :root {
    --secondary-content-width: calc(100% - 40px);
    --secondary-gutter: 24px;
  }

  .scene-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-card {
    min-width: 400px;
  }
}

@media (max-width: 860px) {
  :root {
    --secondary-header-height: 68px;
    --secondary-content-width: calc(100% - 32px);
    --secondary-gutter: 16px;
  }

  .page-hero,
  .page-hero-inner {
    min-height: 300px;
  }

  .landing-section {
    min-height: calc(100svh - var(--secondary-header-height) - 300px);
  }

  .scene-topic-hero,
  .scene-topic-hero-inner {
    min-height: 390px;
  }

  .scene-topic-hero h1,
  .scene-topic-hero-inner > p:last-child {
    max-width: 100%;
  }

  .login-card {
    min-width: 0;
    width: min(440px, calc(100% - 40px));
  }

  .article-section {
    width: var(--secondary-content-width);
  }

  .page {
    width: var(--secondary-content-width) !important;
  }
}

@media (max-width: 760px) {
  .scene-showcase-grid,
  .demand-card-grid {
    grid-template-columns: 1fr;
  }

  .scene-showcase-card,
  .demand-card {
    min-height: 0;
  }

  .demand-detail-section,
  .publish-section {
    padding: 30px var(--secondary-gutter) 64px;
  }

  .article-body {
    padding: 32px 22px 44px;
  }
}

@media (max-width: 520px) {
  :root {
    --secondary-content-width: calc(100% - 22px);
  }

  .page {
    padding: 30px 22px !important;
  }
}