/* Portfolio Generator — base layout
   Design tokens + page geometry shared across all six layouts and four themes.
   Theme overrides only swap the custom properties below. */

:root {
  --page-w: 1920px;
  --page-h: 1080px;
}

/* Default (Neutral) theme tokens. Theme stylesheets override these on .theme-*. */
.page {
  --accent: #1c3a99;
  --accent-text: #ffffff;
  --bg-from: #dee6ff;
  --bg-mid:  #ffffff;
  --bg-to:   #fff4e6;
  --text:    #0a0a0a;
  --muted:   #6b6b6b;
  --rule:    rgba(0, 0, 0, 0.08);
  --pill-bg: rgba(255, 255, 255, 0.92);

  --font-display: 'Space Grotesk', 'Inter Display', 'Inter', -apple-system, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, system-ui, sans-serif;
}

/* The 16:9 page frame. Always exactly 1920x1080. */
.page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  box-sizing: border-box;
  padding: 96px 120px;
  background:
    radial-gradient(55% 55% at 14% 22%, var(--bg-from), transparent 70%),
    radial-gradient(45% 45% at 96% 96%, var(--bg-to), transparent 75%),
    var(--bg-mid);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
  break-after: page;
  page-break-after: always;
}

.page * { box-sizing: border-box; }
.page p, .page h1, .page h2, .page h3 { margin: 0; }

/* ===== Page number ===== Shows on body_text / problems_grid / solution_detail.
   Hidden by default; enabled per-layout below.  Includes a horizontal rule
   that runs in from mid-page to the badge. */
.page .page-number {
  display: none;
}

.layout-body-text .page-number,
.layout-problems-grid .page-number,
.layout-solution-detail .page-number {
  display: inline-flex;
  align-items: center;
  position: absolute;
  right: 120px;
  bottom: 64px;
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.02em;
}

.layout-body-text .page-number::before,
.layout-problems-grid .page-number::before,
.layout-solution-detail .page-number::before {
  content: "";
  position: absolute;
  right: calc(100% + 18px);
  top: 50%;
  width: 760px;
  height: 1.5px;
  background: var(--accent);
  opacity: 0.85;
}

/* ===== Cover ===== */
.layout-cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 110px 120px;
}

.layout-cover .top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
}

.layout-cover .brand {
  display: flex;
  align-items: center;
  gap: 22px;
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}

.layout-cover .brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--text);
  display: inline-block;
  flex: 0 0 auto;
}

.layout-cover .rights {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--text);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.layout-cover .rights::before {
  content: "";
  width: 360px;
  height: 1.5px;
  background: var(--text);
  display: inline-block;
}

.layout-cover .middle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}

.layout-cover .tag {
  display: inline-flex;
  align-items: center;
  padding: 14px 30px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.005em;
}

.layout-cover h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 156px;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--text);
  max-width: 1620px;
}

.layout-cover .stack {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 64px;
  padding: 36px 80px;
  border-radius: 120px;
  background: var(--pill-bg);
  border: 1px solid var(--rule);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.06);
}

.layout-cover .stack .logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -0.015em;
  color: var(--text);
  text-transform: lowercase;
  white-space: nowrap;
}

/* ===== Section divider ===== Centered. Badge inline with title, no page number. */
.layout-section-divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.layout-section-divider .number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 168px;
  height: 168px;
  border-radius: 24px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.layout-section-divider h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 168px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
}

/* ===== Vertical/horizontal accent bar (Mirage's "page mark") =====
   Anchored top-left of the page; sized differently per layout. */
.layout-body-text::before,
.layout-problems-grid::before,
.layout-solution-detail::before {
  content: "";
  position: absolute;
  left: 120px;
  top: 0;
  background: var(--accent);
}

.layout-body-text::before {
  width: 156px;
  height: 320px;
}

.layout-problems-grid::before {
  width: 280px;
  height: 168px;
}

.layout-solution-detail::before {
  width: 220px;
  height: 132px;
}

/* ===== Body text ===== Title + paragraph, anchored vertically centered
   under the page-mark rectangle. */
.layout-body-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 120px 140px;
  gap: 44px;
}

.layout-body-text h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 108px;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text);
  max-width: 1620px;
}

.layout-body-text p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.45;
  color: var(--text);
  max-width: 1500px;
}

/* ===== Problems grid =====
   Top: page-mark rectangle + "Problems" title, both at the top.
   Grid: 2x2 of <number-badge, text> pairs, no card chrome. */
.layout-problems-grid {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 100px;
  padding: 96px 120px 140px;
}

.layout-problems-grid h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 116px;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-left: 308px;
}

.layout-problems-grid .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 60px 100px;
  align-content: center;
}

.layout-problems-grid .card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.layout-problems-grid .card .num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
}

.layout-problems-grid .card .text {
  font-family: var(--font-body);
  font-size: 32px;
  line-height: 1.35;
  color: var(--text);
}

/* ===== Solution detail ===== Two columns: text left, screenshot right. */
.layout-solution-detail {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: center;
  padding: 96px 120px 140px;
}

.layout-solution-detail .left {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.layout-solution-detail .left .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
}

.layout-solution-detail .left h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 84px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 740px;
}

.layout-solution-detail .left p {
  font-family: var(--font-body);
  font-size: 30px;
  line-height: 1.5;
  color: var(--text);
  max-width: 760px;
}

.layout-solution-detail .right {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-solution-detail .right .image-frame {
  width: 100%;
  height: 720px;
  border-radius: 22px;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-solution-detail .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.layout-solution-detail .right .placeholder {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--muted);
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== Thank you ===== Single centered headline, slightly above middle. */
.layout-thank-you {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.layout-thank-you h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 192px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}

.layout-thank-you p {
  font-family: var(--font-body);
  font-size: 36px;
  color: var(--muted);
  margin-top: 28px;
}