/*
 * press2pixel — reusable design-element library.
 *
 * Companion to template-base.css. Where template-base.css gives the boring-but-
 * safe scaffolding (header/footer/stack/grid + the type ladder), THIS file gives
 * the graphic vocabulary that lets a template look art-directed instead of
 * corporate: color-blocking, geometric shapes, oversized "ghost" type, sticker
 * badges, overlapping cards, decorative strokes and textures.
 *
 * Everything here is built from primitives that survive the export path
 * (html-to-image rasterises the DOM through an SVG <foreignObject>): solid
 * fills, border-radius, linear/radial gradients, transforms, box-shadow,
 * -webkit-text-stroke and inline <svg>. We deliberately AVOID mix-blend-mode and
 * backdrop-filter — they render inconsistently in that path.
 *
 * All sizing stays em-/token-based so the Headline/Text/Density sliders still
 * reach it. Decorations are pointer-events:none and sit behind content; put them
 * inside a position:relative ancestor and give real content a higher z-index.
 */

/* ── Decoration layer ─────────────────────────────────────────────────────── */
/* Wrap shapes in .p2p-deco so they fill the panel, clip, and never catch the
   layout. Content siblings should set position:relative; z-index:1. */
.p2p-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.p2p-deco > * { position: absolute; }

/* Geometric primitives — position with inline top/left/right/bottom + size. */
.p2p-shape-circle { border-radius: 50%; background: var(--p2p-accent); }
.p2p-shape-ring   { border-radius: 50%; background: transparent; border: 0.12em solid var(--p2p-accent); }
.p2p-shape-blob   { background: var(--p2p-accent); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
.p2p-shape-pill   { border-radius: 999px; background: var(--p2p-accent); }
.p2p-shape-square { background: var(--p2p-accent); }
/* Triangles / wedges via clip-path. */
.p2p-shape-tri      { background: var(--p2p-accent); clip-path: polygon(0 100%, 100% 100%, 0 0); }
.p2p-wedge-tl       { background: var(--p2p-accent); clip-path: polygon(0 0, 100% 0, 0 100%); }
.p2p-wedge-tr       { background: var(--p2p-accent); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.p2p-wedge-br       { background: var(--p2p-accent); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.p2p-wedge-bl       { background: var(--p2p-accent); clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* Texture fields — set width/height + position; tweak --dot/--gap if needed. */
.p2p-tex-dots {
  --dot: 0.18em; --gap: 1.4em;
  background-image: radial-gradient(var(--p2p-accent) var(--dot), transparent calc(var(--dot) + 0.5px));
  background-size: var(--gap) var(--gap);
  opacity: 0.85;
}
.p2p-tex-grid {
  --gap: 1.6em;
  background-image:
    linear-gradient(var(--p2p-accent-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--p2p-accent-soft) 1px, transparent 1px);
  background-size: var(--gap) var(--gap);
}
.p2p-tex-stripes {
  background-image: repeating-linear-gradient(45deg,
    var(--p2p-accent) 0, var(--p2p-accent) 0.5em,
    transparent 0.5em, transparent 1.4em);
}
.p2p-tex-rays {
  background-image: repeating-conic-gradient(from 0deg at 50% 50%,
    var(--p2p-accent) 0deg 6deg, transparent 6deg 18deg);
  border-radius: 50%;
}
/* Soft radial glow — great for dark heroes. Set color via --p2p-accent. */
.p2p-glow {
  background: radial-gradient(circle at center,
    var(--p2p-accent) 0%, transparent 70%);
  opacity: 0.5; filter: blur(2px);
}

/* Photo scrims so text stays legible over imagery. */
.p2p-scrim-b { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.78) 100%); }
.p2p-scrim-t { background: linear-gradient(0deg,   transparent 30%, rgba(0,0,0,0.78) 100%); }
.p2p-scrim-l { background: linear-gradient(90deg,  rgba(0,0,0,0.80) 0%, transparent 65%); }
.p2p-scrim-full { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.70) 100%); }

/* ── Oversized typography as graphic ─────────────────────────────────────── */
/* Outlined "ghost" word/number that sits behind the headline. */
.p2p-ghost {
  font-family: var(--p2p-font);
  font-weight: 900;
  line-height: 0.8;
  font-size: calc(11em * var(--p2p-headline-mul));
  color: transparent;
  -webkit-text-stroke: 2px var(--p2p-accent-soft);
  letter-spacing: -0.04em;
  white-space: nowrap;
  user-select: none;
}
.p2p-ghost--fill { color: var(--p2p-accent-soft); -webkit-text-stroke: 0; }
.p2p-display-xl { font-size: calc(7em  * var(--p2p-headline-mul)); line-height: 0.92; font-weight: 900; letter-spacing: -0.03em; margin: 0; }
.p2p-display-hero { font-size: calc(9em * var(--p2p-headline-mul)); line-height: 0.88; font-weight: 900; letter-spacing: -0.04em; margin: 0; }
/* Vertical sidebar label. */
.p2p-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ── Strokes, rules, markers ─────────────────────────────────────────────── */
.p2p-rule       { display: block; height: 0.28em; width: 3em; background: var(--p2p-accent); border-radius: 999px; }
.p2p-rule--thin { height: 0.12em; }
.p2p-rule--full { width: 100%; }
.p2p-underline  { box-shadow: inset 0 -0.28em 0 var(--p2p-accent-soft); }   /* highlighter on a span */
.p2p-index      { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--p2p-accent); }

/* ── Sticker / badge ─────────────────────────────────────────────────────── */
.p2p-sticker {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  width: 6.5em; height: 6.5em; border-radius: 50%;
  background: var(--p2p-accent); color: var(--p2p-on-accent);
  font-weight: 800; line-height: 1.05; padding: 0.6em;
  font-size: calc(0.9em * var(--p2p-text-mul));
  transform: rotate(-12deg);
  box-shadow: var(--p2p-shadow);
}
.p2p-sticker--starburst {
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 13%, 78% 8%, 78% 26%, 95% 30%, 85% 45%, 100% 55%,
    84% 64%, 92% 82%, 73% 80%, 66% 98%, 50% 87%, 34% 98%, 27% 80%, 8% 82%,
    16% 64%, 0% 55%, 15% 45%, 5% 30%, 22% 26%, 22% 8%, 39% 13%);
}

/* ── Composite components ────────────────────────────────────────────────── */
/* Caption card that overlaps a full-bleed photo. */
.p2p-overlap-card {
  position: relative; z-index: 2;
  background: var(--p2p-surface-1); color: var(--p2p-ink);
  border-radius: var(--p2p-radius); box-shadow: 0 1.5em 3em rgba(0,0,0,0.22);
  padding: calc(var(--p2p-space) * 1.6);
}
.p2p-overlap-card--accent { background: var(--p2p-accent); color: var(--p2p-on-accent); }

/* Keyline frame with content inset. Pair with .p2p-corner ticks if wanted. */
.p2p-frame {
  position: absolute; inset: calc(var(--p2p-space) * 1.25);
  border: 2px solid var(--p2p-accent); border-radius: calc(var(--p2p-radius) * 0.5);
  pointer-events: none; z-index: 1;
}
.p2p-corner { position: absolute; width: 1.4em; height: 1.4em; border: 2px solid var(--p2p-accent); }
.p2p-corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.p2p-corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.p2p-corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.p2p-corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Stat block — big tabular number over a small label. */
.p2p-stat { display: flex; flex-direction: column; gap: 0.1em; }
.p2p-stat__num { font-size: calc(2.6em * var(--p2p-headline-mul)); font-weight: 900; line-height: 1; color: var(--p2p-accent); font-variant-numeric: tabular-nums; }
.p2p-stat__lbl { font-size: calc(0.82em * var(--p2p-text-mul)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--p2p-ink-soft); }

/* ── Layout archetypes (the root composition) ────────────────────────────── */
/* Each makes .p2p-template-root a positioned canvas; build content as children
   with z-index. They replace the header/content/footer rhythm. */
.p2p-canvas { position: relative; overflow: hidden; }

/* Hard diagonal two-tone background. --p2p-split-from/-to default to surfaces. */
.p2p-bg-diagonal {
  background: linear-gradient(115deg,
    var(--p2p-accent) 0% 46%, var(--p2p-surface-1) 46% 100%);
}
.p2p-bg-split-v { background: linear-gradient(90deg, var(--p2p-accent) 0% 38%, var(--p2p-surface-1) 38% 100%); }
.p2p-bg-accent  { background: var(--p2p-accent); color: var(--p2p-on-accent); }

/* Asymmetric editorial grid: wide text column + narrow image rail. */
.p2p-split-2 { display: grid; grid-template-columns: 1.3fr 1fr; height: 100%; }
.p2p-split-rail { display: grid; grid-template-columns: auto 1fr; height: 100%; }
.p2p-split-rail--r { grid-template-columns: 1fr auto; }

/* ── SVG partial host ─────────────────────────────────────────────────────── */
/* Drop a {{> shape}} inside this; size/position the host with inline styles and
   the SVG fills it. Sits behind content (pair with .p2p-deco or set z-index). */
.p2p-deco-item { position: absolute; line-height: 0; pointer-events: none; }
.p2p-deco-item > svg { width: 100%; height: 100%; display: block; }

/* ── More components ──────────────────────────────────────────────────────── */
/* Circular / pill-cropped photo. Set a width+height (or aspect) inline. */
.p2p-circle-img { border-radius: 50%; overflow: hidden; background: var(--p2p-surface-2); }
.p2p-circle-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p2p-arch-img { border-radius: 999px 999px var(--p2p-radius) var(--p2p-radius); overflow: hidden; background: var(--p2p-surface-2); }
.p2p-arch-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Washi-tape accent — a short rotated translucent strip to pin a card/photo. */
.p2p-tape {
  position: absolute; width: 5.5em; height: 1.7em;
  background: var(--p2p-accent); opacity: 0.85;
  box-shadow: 0 0.2em 0.6em rgba(0,0,0,0.15);
}

/* Edge ticker — repeat a phrase along a strip. Put short text inside; it clips. */
.p2p-marquee {
  display: flex; align-items: center; gap: 0.8em; white-space: nowrap; overflow: hidden;
  background: var(--p2p-accent); color: var(--p2p-on-accent);
  font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  font-size: calc(0.9em * var(--p2p-text-mul));
  padding: calc(var(--p2p-space) * 0.5) calc(var(--p2p-space) * 1);
}

/* ── More archetypes ──────────────────────────────────────────────────────── */
/* Full-bleed poster: image fills root, content pinned bottom over a scrim. */
.p2p-poster { position: relative; overflow: hidden; }
.p2p-poster > .p2p-poster__img { position: absolute; inset: 0; }
.p2p-poster > .p2p-poster__img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p2p-poster > .p2p-poster__body { position: relative; z-index: 2; margin-top: auto; }

/* Stacked color bands (e.g. a header band + body + footer band). */
.p2p-bands { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }