/* ═══════════════════════════════════════════════════════════════════════════
   MORPHOME — seo-page.css v1
   Stand-alone styling for thematic SEO landing pages
   (modern-urban-architecture.html, minimalist-architecture.html, …).

   Inherits design tokens from shared.css:
     --accent, --text, --muted, --surface, --line, --glass, --shadow-soft.

   Layout choice
   ─────────────
   These pages are content-driven, not app-screens, so we use a centred
   single-column flow rather than the dashboard-style sidebar layouts.
   Hero image goes full-width up to 1100px, descriptive prose is
   capped at 760px for readable line length (~70 char measure).

   The two interactive blocks — copyable prompt and "Generate random
   idea" — are visually distinct cards so the page doesn't read as a
   wall of text. Both align to the same max-width as the prose.

   We deliberately do NOT load the main generate-engine.css here; this
   page has none of those widgets. Self-contained.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ────────────────────────────────────────────────────────── */
.seo-page {
  max-width: 880px;       /* was 1100; everything else on the page caps at
                             760, so 880 keeps the hero only ~120px wider
                             than the prose — visually one column. */
  margin: 0 auto;
  padding: 32px var(--page-pad) 80px;
}

@media (max-width: 720px) {
  .seo-page { padding-left: 20px; padding-right: 20px; }
}

.seo-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px 'DM Sans', sans-serif;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: .15s ease;
  margin-bottom: 16px;
}
.seo-back:hover {
  background: rgba(53, 96, 240, .06);
  color: var(--accent);
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Two-column grid (text + image). Earlier iteration used a fixed
   image height of 480px which produced an unintended portrait crop
   on the (16:9) source — the image visually became "vertical" because
   its column was narrower than 480px tall. Switched to real aspect-
   ratio sizing so the image always shows in its native 16:9.

   Column ratio: 6fr text / 5fr image. Slightly more weight to text
   (it's the SEO anchor) and the image column comes in around
   ~360px wide on a 880px page — small, supporting, not dominating.

   align-items: start — text and image align at the top edge instead
   of vertically centring on the (now shorter) image, which used to
   leave the title floating in mid-air against the image bottom.

   Breakpoints:
     • >900px — side by side as described above
     • ≤900px — single column, image on top, full-width 16:9
   ────────────────────────────────────────────────────────────────────────── */
.seo-hero {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

.seo-hero-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Tiny top nudge so the title's cap-height aligns optically with
     the image's top edge — text x-height sits a few pixels lower
     than where the bounding box starts. */
  padding-top: 4px;
}

.seo-hero h1 {
  font: 500 clamp(28px, 3.6vw, 38px)/1.1 'DM Sans', sans-serif;
  color: var(--text);
  letter-spacing: -.02em;
  margin: 0;
}

.seo-hero-tagline {
  font: 400 15px/1.6 'DM Sans', sans-serif;
  color: var(--muted);
  margin: 0;
}

.seo-hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;       /* honour the image's native ratio — no
                                  more forced height that cropped it. */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(10,20,40,.14);
  background: #f1f3f8;
}
.seo-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(1.04);
}

@media (max-width: 900px) {
  .seo-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 36px;
  }
  .seo-hero-text { padding-top: 0; }
}
@media (max-width: 600px) {
  .seo-hero-image { border-radius: 14px; }
}

/* ── Prose blocks ──────────────────────────────────────────────────────────
   No internal max-width any more — the page shell caps the column at
   880 px, which is a comfortable measure (~80 chars at 16px). Earlier
   versions had a 760 px cap inside an 1100 px page, which produced the
   "one left, one right" jagged look on wide screens. With everything
   now flowing inside the page shell, content reads as a single column.
   ────────────────────────────────────────────────────────────────────────── */
.seo-prose {
  font: 400 16px/1.65 'DM Sans', sans-serif;
  color: var(--text);
}
.seo-prose h2 {
  font: 600 24px/1.3 'DM Sans', sans-serif;
  color: var(--text);
  letter-spacing: -.01em;
  margin: 48px 0 14px;
}
.seo-prose p { margin: 0 0 14px; }
.seo-prose p + p { margin-top: 0; }

/* ── Prompt card (copyable hero prompt) ────────────────────────────────── */
.seo-prompt-card {
  margin: 36px 0;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.seo-prompt-label {
  font: 600 11px/1 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 12px;
}
.seo-prompt-text {
  font: 500 17px/1.55 'DM Sans', sans-serif;
  color: var(--text);
  margin: 0;
  padding-right: 56px;     /* room for the copy button */
  white-space: pre-wrap;   /* respect any line breaks in the prompt */
}
.seo-prompt-copy {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: .15s ease;
}
.seo-prompt-copy:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.seo-prompt-copy:active { transform: scale(.94); }
.seo-prompt-copy svg { width: 18px; height: 18px; }
.seo-prompt-copy[data-copied="true"] {
  color: #16a34a;             /* success green */
  border-color: #16a34a;
  background: rgba(22,163,74,.08);
}

/* ── Combined CTA block — "Try it yourself" ────────────────────────────────
   Section that holds the two side-by-side action cards. Sits directly
   under the hero prompt card so the relationship is obvious: prompt
   → two ways to act on it.

   The two cards have visually different weights so the hierarchy is
   readable at a glance:
     • PRIMARY (Generate similar)  — solid accent fill, the "obvious"
       action since we just showed the prompt.
     • SECONDARY (Random idea)     — outline card with a faint accent
       wash, clearly an alternative path.

   Both cards have a title + arrow row at the top and a short
   sub-line beneath, so a user knows what each option actually does
   without hovering.

   Responsive: ≤700px the grid collapses to a single column with the
   cards stacked, primary on top.
   ────────────────────────────────────────────────────────────────────────── */
.seo-cta-block {
  margin: 36px 0 0;
}
.seo-cta-title {
  font: 600 22px/1.3 'DM Sans', sans-serif;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.seo-cta-intro {
  font: 400 15px/1.65 'DM Sans', sans-serif;
  color: var(--muted);
  margin: 0 0 20px;
}

.seo-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Shared card chrome. The primary/secondary modifiers below override
   colors and shadow, but layout/spacing/transition are the same so
   both cards feel like a matched pair. */
.seo-cta-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border-radius: 16px;
  text-decoration: none;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.seo-cta-card:hover { transform: translateY(-2px); }
.seo-cta-card:active { transform: translateY(0); }
.seo-cta-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.seo-cta-card-title {
  font: 600 17px/1.2 'DM Sans', sans-serif;
  letter-spacing: -.005em;
}
.seo-cta-card-arrow {
  font: 500 18px/1 'DM Sans', sans-serif;
  transition: transform .15s ease;
}
.seo-cta-card:hover .seo-cta-card-arrow { transform: translateX(3px); }
.seo-cta-card-sub {
  font: 400 13.5px/1.5 'DM Sans', sans-serif;
  margin: 0;
  opacity: .85;
}

/* PRIMARY — "Generate similar". Filled accent surface. */
.seo-cta-card-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(53,96,240,.28);
}
.seo-cta-card-primary:hover {
  background: #2849c7;
  box-shadow: 0 12px 32px rgba(53,96,240,.36);
}
.seo-cta-card-primary .seo-cta-card-sub { color: rgba(255,255,255,.85); }

/* SECONDARY — "Random idea". Outline card with a faint accent wash.
   The wash is gradient-light rather than solid so it doesn't compete
   with the primary card visually. */
.seo-cta-card-secondary {
  background: linear-gradient(135deg, rgba(53,96,240,.05), rgba(53,96,240,.02));
  color: var(--text);
  border-color: rgba(53,96,240,.22);
}
.seo-cta-card-secondary:hover {
  background: linear-gradient(135deg, rgba(53,96,240,.10), rgba(53,96,240,.04));
  border-color: rgba(53,96,240,.4);
  box-shadow: 0 8px 22px rgba(53,96,240,.12);
}
.seo-cta-card-secondary .seo-cta-card-arrow { color: var(--accent); }
.seo-cta-card-secondary .seo-cta-card-sub  { color: var(--muted); }

/* Disabled state used while the random-idea picker is loading. */
.seo-cta-card-secondary:disabled {
  cursor: progress;
  opacity: .7;
  transform: none;
}
.seo-cta-card-secondary:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Collapse to a single column on narrower screens — cards become
   full-width and stack with the primary on top. */
@media (max-width: 700px) {
  .seo-cta-grid { grid-template-columns: 1fr; }
}

/* Secondary prose section — used for the long-form random-idea
   description that lives below the CTA block. Tones the H2 down a
   notch so the CTA-block H2 above stays the visual anchor. */
.seo-prose-secondary {
  margin-top: 56px;
}
.seo-prose-secondary h2 {
  font-size: 20px;
  margin-top: 0;
}
.seo-prose-secondary p {
  font-size: 15px;
  color: var(--muted);
}

/* ── Toast (copy confirmation + random-idea preview) ───────────────────────
   Single toast surface, used for both "Prompt copied" confirmations
   and "✨ <picked random prompt>" previews before redirect. Widened
   compared to a plain status toast so a 90-char prompt snippet fits
   on one or two lines without clipping the viewport.
   ────────────────────────────────────────────────────────────────────────── */
.seo-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 12px);
  max-width: min(560px, calc(100vw - 32px));
  background: #111827;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font: 500 14px/1.45 'DM Sans', sans-serif;
  text-align: center;
  box-shadow: 0 12px 28px rgba(10,20,40,.25);
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  z-index: 1000;
}
.seo-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}