/* Shared Språki page furniture, loaded on every node page:
 *   .sp-av      — calm robot avatar (partials/spraki_avatar.ejs)
 *   .page-hero  — unified section-page hero (partials/page_hero.ejs)
 * Fully namespaced so it is safe to load globally. The avatar reuses the
 * dashboard rig's layered look + proportions (www/css/home-node.css
 * .d-hero-robot) but only the gentle idle bob; the mouse-tracking look-around
 * stays on the dashboard (spraki-rig.js). */

/* ============================ calm robot avatar ============================ */
.sp-av {
  position: relative;
  display: inline-block;
  overflow: visible;
  flex-shrink: 0;
}
.sp-av--lg { width: 92px;  height: 95px; }
.sp-av--md { width: 64px;  height: 66px; }
.sp-av--sm { width: 46px;  height: 47px; }   /* compact header avatar */
.sp-av--xs { width: 30px;  height: 31px; }   /* per-reply byline avatar */
/* The byline avatar repeats on every reply — keep it calm (no idle bob). */
.sp-av--xs .sp-av-body,
.sp-av--xs .sp-av-head { animation: none; }

.sp-av img,
.sp-av .sp-av-bg,
.sp-av .sp-av-sh { position: absolute; }

/* Gold glow disc behind the robot. */
.sp-av-bg {
  width: 98.3%; height: 90.8%; left: .8%; top: 6.5%;
  border-radius: 50%;
  background: var(--accent, #fbc24b);
  border: 3px solid rgba(255, 255, 255, .45);
  box-shadow: inset 0 -8px 20px rgba(0, 0, 0, .08);
}
/* Soft contact shadow — lives *outside* the disc (overflow:visible) so it is
   never clipped the way a border-radius'd <img> clips its baked-in shadow. */
.sp-av-sh {
  bottom: -8%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 12%;
  background: radial-gradient(ellipse, rgba(0,0,0,.3) 0%, rgba(0,0,0,.12) 45%, transparent 75%);
  border-radius: 50%;
  z-index: 0;
}
.sp-av img { object-fit: fill; }
.sp-av-body {
  width: 80.9%; height: 89.7%; left: 9.7%; top: 8.7%;
  z-index: 2;
  animation: spavBody 5s ease-in-out infinite;
  transition: opacity .3s ease;
}
.sp-av-head {
  width: 92.4%; height: 60.7%; left: 4.7%; top: .8%;
  z-index: 3;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
  animation: spavHead 5s ease-in-out infinite;
  transition: opacity .3s ease;
}

/* Progressive load (slow networks): the static circle logo — tiny and already
   cached from the nav — paints instantly, while the two robot layers stay
   hidden until BOTH have loaded (a half-loaded robot looks broken). The
   .sp-av--wait class is removed by the avatar's loader (spraki_avatar.ejs
   inline script / sprakiAvLoaded in lese-node-common.js). */
.sp-av-static {
  width: 98.3%; height: 90.8%; left: .8%; top: 6.5%;
  border-radius: 50%;
  object-fit: cover !important;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.sp-av--wait .sp-av-static { opacity: 1; }
.sp-av--wait .sp-av-body,
.sp-av--wait .sp-av-head { opacity: 0; }

/* Gentle idle bob (body sway + head bob) — calmer companion to the dashboard's
   dspB / dspH; global prefers-reduced-motion rule in base.css neutralises it. */
@keyframes spavHead {
  0%   { transform: translate(0, 0) rotate(0); }
  12%  { transform: translate(2px, -3px) rotate(1.8deg); }
  28%  { transform: translate(.5px, -5px) rotate(-1deg); }
  45%  { transform: translate(-2px, -4px) rotate(-2.2deg); }
  62%  { transform: translate(-.5px, -2.5px) rotate(.7deg); }
  78%  { transform: translate(1.5px, -2px) rotate(1.5deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes spavBody {
  0%   { transform: translate(0, 0) rotate(0); }
  15%  { transform: translate(.5px, -1px) rotate(.2deg); }
  35%  { transform: translate(-.5px, -2px) rotate(-.15deg); }
  55%  { transform: translate(.3px, -1.5px) rotate(.1deg); }
  75%  { transform: translate(-.3px, -.5px) rotate(-.2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

/* ============================== unified hero ============================== */
.page-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  /* Align the hero to the page's content column. Default (none / 0) means
     "fill the parent" — correct for pages whose wrapper already defines the
     column + horizontal padding (skrive, samtale, bildeordbok). Pages with a
     bare wrapper (only padding-top) instead set --hero-max / --hero-pad on
     their wrapper to match the content container below, so the hero lines up
     with the cards instead of running edge-to-edge. See the overrides below. */
  max-width: var(--hero-max, none);
  margin: 4px auto 28px;
  padding-inline: var(--hero-pad, 0);
  font-family: "proxima-nova", sans-serif;
}

/* Per-page content-column alignment (bare-wrapper pages). Each value matches
   that page's content container max-width so the hero centers identically.
   The var cascades to the hero even when it is injected client-side into an
   inner #...Content node. New pages: set --hero-max on your page wrapper. */
.lese-node-page      { --hero-max: 1100px; --hero-pad: 20px; }
.jobb-node-page      { --hero-max: 760px;  --hero-pad: 20px; }
/* 1000px, not 1100: lytte's column is .lytte-content, which is narrower than
   lese's — at 1100 the robot sat 50px left of the cards it belongs to. */
.lytte-node-page     { --hero-max: 1000px; --hero-pad: 20px; }
.bilder-node-page    { --hero-max: 1200px; --hero-pad: 20px; }
.oversette-node-page { --hero-max: 900px;  --hero-pad: 20px; }
.page-hero-text { min-width: 0; flex: 1; }

.page-hero-titlerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.page-hero-title {
  font-family: "proxima-nova", sans-serif;
  font-weight: 200;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--text-strong, #3d342a);
  margin: 0;
}
.page-hero--question .page-hero-title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.page-hero-accent {
  font-weight: 400;
  background: linear-gradient(135deg, var(--accent, #fbc24b), #e8a020);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-hero-sub {
  color: var(--text-muted, #5f5238);
  font-size: 1rem;
  margin: 5px 0 0;
  max-width: 640px;
}

/* Section-icon chip — keeps a page's own glyph (e.g. Bildeordbok's image icon)
   as a secondary accent without losing the Språki avatar's branding. */
.page-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent-soft, #fef6dd);
  border: 1px solid #f3e2b3;
  color: var(--accent-text, #7d6428);
  font-size: .82rem;
  font-weight: 600;
}
.page-hero-chip i { font-size: .8em; }

/* Info (i) button — e.g. Historier's Sjøhavn intro. */
.page-hero-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--border-soft, #ece6da);
  color: var(--text-muted, #5f5238);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.page-hero-info:hover { border-color: var(--accent, #fbc24b); color: var(--accent-text, #7d6428); background: #fffaf0; }
.page-hero-info i { font-size: .95em; }

/* Right-hand action slot (e.g. Skrive's "Mine interesser" / "Mine tekster").
   Logical properties so the whole hero mirrors correctly under dir="rtl"
   (the layout sets dir per locale) when we add RTL languages. */
.page-hero-right {
  margin-inline-start: auto;
  align-self: flex-start;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .page-hero { gap: 14px; flex-wrap: wrap; }
  .page-hero-right { margin-inline-start: 0; width: 100%; justify-content: flex-start; }
}