/* ════════════════════════════════════════════════════════════════
   GamesOMG — Palworld effigy pages: shared skin
   File: assets/css/effigy.css

   The template crystallized on the hand-built Pengullet reference page,
   now emitted by tools/palworld-effigies/build.mjs for every per-effigy
   page. CSS + markup are COUPLED — edit both together.

   Scoped so it can't touch the older centered-hero effigy pages:
     • the split hero rules require .ref-hero.ref-hero-split (the Lifmunk
       megalist + the hub keep the plain centered .ref-hero)
     • .page-2col.full-70, .rail-links, .effigy-shot are new classes
     • the .rail-ad restyle is shared on purpose (one ad, every page)
   ════════════════════════════════════════════════════════════════ */

/* ── Split hero: breadcrumb/title/lede/verified on the left, a lifted
      screenshot on the right; stacks on narrow screens. ── */
.ref-hero.ref-hero-split { text-align: left; padding-left: 2.5vw; padding-right: 2.5vw; }
.ref-hero.ref-hero-split::before { display: none; }
.ref-hero-split .ref-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; max-width: none; margin: 0 auto; }
.ref-hero-split .ref-hero-copy { min-width: 0; }
.ref-hero-split h1 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.ref-hero-split .lede { margin-top: 1rem; }
.ref-hero-split .lede a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.ref-hero-split .lede a:hover { text-decoration: none; }
.ref-hero-split .ref-verified { margin-top: 1.3rem; }
.ref-hero-photo { margin: 0; }
/* Layered shadow = the photo reads as "lifted" off the page. */
.ref-hero-photo img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 22px 48px -12px rgba(0,0,0,.32), 0 6px 14px rgba(0,0,0,.14); }
.ref-hero-photo figcaption { margin-top: .7rem; font-size: .85rem; color: var(--blue); font-style: italic; }
@media (max-width: 760px) { .ref-hero-split .ref-hero-inner { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ── Full-page 70/30: content 70% / rail 30%, small side gutter.
      Prose stays measure-capped inside the wide column. ── */
.page-2col.full-70 { max-width: none; margin: 0; padding: 0 2.5vw; grid-template-columns: minmax(0, 70fr) minmax(0, 30fr); gap: 2.5rem; }
.page-2col.full-70 .ref-section-intro,
.page-2col.full-70 .ref-list,
.page-2col.full-70 .ref-tip { max-width: 78ch; }
.page-2col.full-70 .rail-card { width: 100%; }
@media (max-width: 900px) { .page-2col.full-70 { display: block; padding: 0 4vw; } }

/* ── In-content screenshot figure (light theme). ── */
.effigy-shot { margin: 4px 0 2px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
.effigy-shot img { display: block; width: 100%; height: auto; }
.effigy-shot figcaption { font-size: 13px; color: var(--text-muted); padding: 9px 14px; line-height: 1.5; border-top: 1px solid var(--border); }

/* ── Rail related-links blocks (sibling effigies + more Palworld). ── */
.rail-links { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px 15px; }
.rail-links h3 { font-family: 'Manrope', sans-serif; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 800; margin: 0 0 6px; }
.rail-links a { display: block; padding: 7px 0; font-size: 0.82rem; font-weight: 600; color: var(--text); text-decoration: none; border-top: 1px solid var(--border); transition: color .15s; }
.rail-links a:first-of-type { border-top: 0; }
.rail-links a:hover { color: var(--orange); }

/* ── Rail AdSense slot (ARK pages use this in place of the AcidNodes ad —
      we can't sell ARK hosting, so the sidebar monetizes traffic instead). ── */
.rail-adsense { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; text-align: center; }
.rail-adsense-label { display: block; font-family: 'Manrope', sans-serif; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; opacity: 0.75; }
.rail-adsense ins { display: block; }
/* Collapse the whole unit (label + box) while AdSense has no ad to serve —
   no ugly empty grey rectangle during the new-placement crawl period or any
   later unfilled impression. Shows normally once Google fills it. */
.rail-adsense:has(ins[data-ad-status="unfilled"]) { display: none; }

/* ── Restyled AcidNodes rail ad (bigger head, "what 12 GB handles" block). ── */
.rail-ad .roc-head { font-size: 21px; }
.rail-ad .roc-sub { display: flex; flex-direction: column; gap: 5px; margin: 9px 0 15px; font-size: 14.5px; color: #ECE3D1; line-height: 1.4; }
.rail-ad .roc-sub strong { color: #A6E22E; font-weight: 800; font-size: 15.5px; margin-bottom: 3px; }
.rail-ad .roc-sub .roc-floor { color: #8a949f; font-style: italic; margin-top: 4px; }
.rail-ad .roc-fine { font-size: 13.5px; }