/* Xavira /use-cases hub + per-use-case pages. Loaded after tokens.css + portal.css. */

.x-eyebrow { font: 500 11px/1 var(--x-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--x-fg-muted); margin-bottom: 14px; }
.x-grad { background: var(--x-gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.x-uc-main { max-width: 1080px; margin: 0 auto; padding: 56px 32px 100px; }

/* ───── Hero (shared: hub + sub-pages) ───── */
.x-uc-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.x-uc-head .x-eyebrow { justify-content: center; display: flex; }
.x-uc-head h1 { font: 600 42px/1.1 var(--x-sans); letter-spacing: -0.03em; margin: 14px 0 16px; }
.x-uc-head p { font: 400 16px/1.6 var(--x-sans); color: var(--x-fg-soft); margin: 0; }
.x-uc-crumb { max-width: 720px; margin: 0 auto 20px; font: 500 12px/1 var(--x-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--x-fg-muted); }
.x-uc-crumb a { color: var(--x-fg-muted); }
.x-uc-crumb a:hover { color: var(--x-accent); }

/* Crawlable "what / who / how" summary — one clear block right under the hero,
   deliberately NOT another centered tagline (that read as a duplicate intro). */
.x-uc-summary { max-width: 720px; margin: 0 auto 48px; padding: 18px 22px; background: var(--x-ink-1); border: 1px solid var(--x-line); border-left: 3px solid var(--x-accent); border-radius: var(--x-r-2); }
.x-uc-summary p { margin: 0; font: 400 15px/1.6 var(--x-sans); color: var(--x-fg-soft); text-align: left; }

/* ───── Hub grid ───── */
.x-uc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.x-uc-card { display: block; background: var(--x-ink-1); border: 1px solid var(--x-line); border-radius: var(--x-r-3); overflow: hidden; transition: border-color var(--x-dur-fast) var(--x-ease), transform var(--x-dur-fast) var(--x-ease), box-shadow var(--x-dur-fast) var(--x-ease); }
.x-uc-card:hover { border-color: var(--x-accent-line); transform: translateY(-2px); box-shadow: var(--x-shadow-md); }
.x-uc-card-image { position: relative; aspect-ratio: 3/4; background: var(--x-ink-2); }
.x-uc-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.x-uc-card-body { padding: 22px 26px 26px; }
.x-uc-card-image .x-uc-card-icon { position: absolute; left: 18px; bottom: -18px; box-shadow: 0 4px 12px rgba(20,20,26,0.18); }
.x-uc-card-icon { width: 40px; height: 40px; border-radius: var(--x-r-2); background: var(--x-accent-soft); color: var(--x-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border: 2px solid var(--x-ink-1); }
.x-uc-card-icon svg { width: 20px; height: 20px; }
.x-uc-card-body h2 { font: 600 18px/1.3 var(--x-sans); letter-spacing: -0.015em; color: var(--x-fg); margin: 14px 0 8px; }
.x-uc-card-body p { font: 400 13.5px/1.55 var(--x-sans); color: var(--x-fg-muted); margin: 0 0 16px; }
.x-uc-card-models { display: flex; gap: 6px; flex-wrap: wrap; }
.x-uc-readmore { display: inline-block; margin-top: 14px; font: 500 13px/1 var(--x-sans); color: var(--x-accent); }
.x-uc-card:hover .x-uc-readmore { color: var(--x-accent-press); }

/* "Your new exciting idea" catch-all CTA card — sits in the grid, not a link */
.x-uc-card-cta { background: var(--x-gradient-hero); display: flex; align-items: center; justify-content: center; text-align: center; min-height: 100%; }
.x-uc-card-cta-body { padding: 32px 26px; display: flex; flex-direction: column; align-items: center; }
.x-uc-card-cta-body .x-uc-card-icon { margin: 0 0 16px; background: var(--x-ink-1); }
.x-uc-card-cta-body h2 { margin: 0 0 8px; }
.x-uc-card-cta-body p { max-width: 380px; }
.x-uc-card-cta:hover { transform: none; box-shadow: none; }

@media (max-width: 720px) { .x-uc-grid { grid-template-columns: 1fr; } }

/* ───── Sub-page sections ───── */
.x-uc-section { margin: 56px 0; }
.x-uc-section h2 { font: 600 24px/1.25 var(--x-sans); letter-spacing: -0.02em; margin: 0 0 8px; }
.x-uc-section .x-uc-section-sub { font: 400 14.5px/1.6 var(--x-sans); color: var(--x-fg-soft); margin: 0 0 24px; max-width: 640px; }

/* Model recommendation cards */
.x-uc-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.x-uc-model { background: var(--x-ink-1); border: 1px solid var(--x-line); border-radius: var(--x-r-3); padding: 20px; }
.x-uc-model.x-uc-model-primary { border-color: var(--x-accent-line); background: linear-gradient(180deg, var(--x-accent-soft) 0%, var(--x-ink-1) 40%); }
.x-uc-model-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.x-uc-model code { font: 500 13px/1 var(--x-mono); color: var(--x-fg); background: var(--x-ink-2); border: 1px solid var(--x-line); padding: 4px 8px; border-radius: var(--x-r-2); }
.x-uc-model p { font: 400 13.5px/1.55 var(--x-sans); color: var(--x-fg-soft); margin: 0; }
.x-uc-model .x-uc-model-meta { font: 500 11px/1 var(--x-mono); color: var(--x-fg-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 10px; }

/* Example prompts */
.x-uc-prompts { display: flex; flex-direction: column; gap: 10px; }
.x-uc-prompt { display: flex; gap: 12px; align-items: flex-start; background: var(--x-ink-1); border: 1px solid var(--x-line); border-radius: var(--x-r-2); padding: 14px 16px; }
.x-uc-prompt-tag { flex: 0 0 auto; font: 500 10px/1 var(--x-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--x-accent); background: var(--x-accent-soft); border-radius: var(--x-r-1); padding: 4px 7px; margin-top: 2px; }
.x-uc-prompt p { margin: 0; font: 400 13.5px/1.55 var(--x-mono); color: var(--x-fg); }

/* Gallery — SFW + blurred NSFW previews */
.x-uc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.x-uc-gen { position: relative; border-radius: var(--x-r-3); overflow: hidden; aspect-ratio: 3/4; background: var(--x-ink-2); border: 1px solid var(--x-line); }
.x-uc-gen img, .x-uc-gen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-uc-gen-nsfw img, .x-uc-gen-nsfw video { filter: blur(22px) saturate(0.9); transform: scale(1.08); }
/* Signed-in visitors see the 18+ previews unblurred; the blur is for logged-out traffic only. */
.x-signed-in .x-uc-gen-nsfw img, .x-signed-in .x-uc-gen-nsfw video { filter: none; transform: none; }
.x-signed-in .x-uc-gen-nsfw .x-uc-gen-overlay { display: none; }
.x-uc-gen-badge { position: absolute; left: 8px; top: 8px; font: 600 10px/1 var(--x-mono); text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 8px; border-radius: var(--x-r-pill); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.x-uc-gen-badge-sfw { background: rgba(10,168,160,0.16); color: #0AA8A0; border: 1px solid rgba(10,168,160,0.3); }
.x-uc-gen-badge-nsfw { background: rgba(230,40,112,0.2); color: #FF6FA0; border: 1px solid rgba(255,111,160,0.35); }
.x-uc-gen-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; text-align: center; padding: 12px; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%); color: #fff; }
.x-uc-gen-overlay svg { width: 22px; height: 22px; opacity: 0.9; }
.x-uc-gen-overlay span { font: 600 11.5px/1.3 var(--x-sans); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.x-uc-gen-model { position: absolute; right: 8px; bottom: 8px; font: 500 10px/1 var(--x-mono); color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.45); padding: 4px 7px; border-radius: var(--x-r-1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Case study card */
.x-uc-case { display: flex; gap: 24px; align-items: center; background: var(--x-ink-1); border: 1px solid var(--x-line); border-radius: var(--x-r-4); padding: 28px; }
.x-uc-case-shot { flex: 0 0 auto; width: 300px; border-radius: var(--x-r-3); overflow: hidden; border: 1px solid var(--x-line); box-shadow: var(--x-shadow-md); }
.x-uc-case-shot img { width: 100%; display: block; }
.x-uc-case-body { min-width: 0; }
.x-uc-case-logo { height: 22px; margin-bottom: 14px; display: block; }
.x-uc-case-logo.x-uc-logo-yspot { height: 20px; }
.x-uc-case-body p { font: 400 14.5px/1.6 var(--x-sans); color: var(--x-fg-soft); margin: 0 0 14px; }
.x-uc-case-link { font: 600 13.5px/1 var(--x-sans); color: var(--x-accent); }

@media (max-width: 720px) {
  .x-uc-case { flex-direction: column; align-items: stretch; }
  .x-uc-case-shot { width: 100%; }
}

/* CTA band */
.x-uc-cta { text-align: center; background: var(--x-gradient-hero); border: 1px solid var(--x-line); border-radius: var(--x-r-4); padding: 44px 32px; margin-top: 56px; }
.x-uc-cta h2 { margin: 0 0 10px; }
.x-uc-cta p { margin: 0 0 22px; color: var(--x-fg-soft); }
.x-uc-cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Showcase strips (2026-09-22): three SFW generations under the page title, and three in place of
   the old product screenshot under "Real example". Same 3:4 frame as the gallery cards. */
.x-uc-hero-gens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 720px; margin: 28px auto 0; }
.x-uc-case-gens { flex: 0 0 auto; width: 360px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.x-uc-hero-gens figure, .x-uc-case-gens figure { margin: 0; position: relative; aspect-ratio: 3/4; border-radius: var(--x-r-3); overflow: hidden; border: 1px solid var(--x-line); background: var(--x-ink-2); box-shadow: var(--x-shadow-md); }
.x-uc-hero-gens img, .x-uc-case-gens img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-uc-hero-gens figcaption, .x-uc-case-gens figcaption { position: absolute; right: 6px; bottom: 6px; font: 500 10px/1 var(--x-mono); color: rgba(255,255,255,0.9); background: rgba(0,0,0,0.45); padding: 4px 6px; border-radius: 4px; }
@media (max-width: 760px) { .x-uc-case-gens { width: 100%; } .x-uc-hero-gens { gap: 8px; } }