/* ============================================================
   AudioHacz — per-plugin page
   Builds on styles.css tokens. Series identity (Forged = molten,
   Signature = cool platinum) swaps via body[data-series].
   Designed to look complete from {icon, hue, tagline, blurb, specs,
   series} ALONE — screenshot + feature grid are progressive enhancement.
   ============================================================ */

/* ---- series accent swap (the only thing that differs Forged vs Signature) ---- */
body[data-series="forged"]{
  --acc-1:var(--molten-1); --acc-2:var(--molten-2); --acc-3:var(--molten-3);
  --grad-acc:var(--grad-molten);
  --acc-glow:0 0 40px rgba(255,90,31,.32);
  --acc-soft:rgba(255,122,36,.16);
  --acc-on:#160A03;            /* label color on the accent fill */
}
body[data-series="signature"]{
  --acc-1:#8FB7C9; --acc-2:#B9D4DE; --acc-3:#E2ECF1;
  --grad-acc:linear-gradient(100deg,#6F93A6 0%,#A9C6D3 48%,#DCE9EE 100%);
  --acc-glow:0 0 40px rgba(150,185,205,.30);
  --acc-soft:rgba(160,195,212,.16);
  --acc-on:#0A1418;
}

/* hue → a warm/cool wash tied to the plugin's own catalog hue */
.pg-hue{ --wash:hsl(var(--hue) 70% 55% / .16); }

/* ---------------------------- BREADCRUMB ---------------------------- */
.pg-back{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-weight:600;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--text-mute);
  transition:color .15s var(--ease-hover);
}
.pg-back:hover,.pg-back:focus-visible{color:var(--acc-2)}
.pg-back svg{width:14px;height:14px}

/* ------------------------------- HERO ------------------------------- */
.pg-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(28px,5vw,52px) 0 clamp(40px,6vw,72px);
}
.pg-hero-atmos{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pg-hero-atmos::before{ /* plugin-hue bloom */
  content:"";position:absolute;left:-10%;top:-40%;width:70%;height:140%;
  background:radial-gradient(50% 50% at 50% 50%, var(--wash), transparent 70%);
  filter:blur(40px);
}
.pg-hero-atmos::after{ /* series-accent ember anchored bottom */
  content:"";position:absolute;left:50%;bottom:-30%;translate:-50% 0;
  width:120%;height:80%;
  background:radial-gradient(50% 60% at 50% 100%, var(--acc-soft), transparent 70%);
}

.pg-hero-inner{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,46px);
  align-items:center;margin-top:clamp(22px,4vw,40px);
}
.pg-icon{
  width:clamp(104px,15vw,168px);height:clamp(104px,15vw,168px);
  border-radius:26px;flex:none;
  box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 1px var(--line-hi), var(--acc-glow);
}
.pg-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--body);font-weight:600;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--acc-on);
  background:var(--grad-acc);
  padding:5px 12px;border-radius:999px;
  box-shadow:var(--acc-glow);
}
.pg-badge .dotmark{width:6px;height:6px;border-radius:50%;background:var(--acc-on);opacity:.7}
.pg-h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.4rem,6vw,4.5rem);line-height:.98;letter-spacing:-.02em;
  color:var(--text);margin:14px 0 6px;
}
.pg-tagline{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.6rem);color:var(--text-soft);
  letter-spacing:.01em;
}
.pg-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;
}
.pg-chip{
  display:inline-flex;align-items:center;
  font-family:var(--body);font-weight:600;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);
  border:1px solid var(--line-hi);border-radius:7px;padding:6px 11px;
}
.pg-chip.cat{color:var(--acc-2);border-color:var(--line-molten)}
.pg-chip.cat{border-color:color-mix(in srgb, var(--acc-2) 45%, transparent)}

.pg-buy{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px;
}
.pg-price{
  font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--text);
}
.pg-price .free{
  background:var(--grad-acc);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-weight:900;
}
.pg-price .placeholder{font-size:.7rem;color:var(--text-faint);letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-top:2px}
.btn.acc{
  background:var(--grad-acc);color:var(--acc-on);box-shadow:var(--acc-glow);
}
.btn.acc:hover{transform:translateY(-1px)}

/* ----------------------------- SCREENSHOT --------------------------- */
.pg-shot-wrap{margin:clamp(30px,5vw,56px) 0}
.pg-shot{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-hi);
  /* presentation frame: the real screenshot floats on a soft accent backdrop
     with breathing room, instead of being stretched edge-to-edge */
  background:
    radial-gradient(70% 90% at 50% 0%, var(--acc-soft), transparent 70%),
    linear-gradient(180deg,var(--surface-hi),var(--surface));
  padding:clamp(18px,3.2vw,44px);
  display:flex;align-items:center;justify-content:center;
}
.pg-shot img{
  display:block;height:auto;
  /* width:100% scales DOWN on small screens; the inline max-width (= the shot's
     native pixel width) means it is NEVER upscaled, so it always stays crisp */
  width:100%;
  border-radius:11px;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.pg-shot-frame{ /* subtle top sheen across the whole frame */
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 14%);
}
.pg-shot.fallback{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;min-height:clamp(220px,34vw,420px);
  background:
    radial-gradient(60% 80% at 50% 0%, var(--acc-soft), transparent 70%),
    var(--surface);
  text-align:center;padding:40px;
}
.pg-shot.fallback img{width:96px;height:96px;border-radius:20px;opacity:.92;
  box-shadow:0 10px 40px rgba(0,0,0,.5)}
.pg-shot.fallback figcaption{
  font-family:var(--body);font-weight:600;font-size:.8125rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--text-faint);
}

/* ------------------------------ SECTIONS ---------------------------- */
.pg-section{padding-block:clamp(34px,5vw,60px);border-top:1px solid var(--line)}
.pg-section-h{
  font-family:var(--display);font-weight:900;
  font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.05;color:var(--text);
  margin-bottom:18px;
}
.pg-eyebrow{
  font-family:var(--body);font-weight:600;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.32em;color:var(--acc-2);
  margin-bottom:12px;
}
.pg-overview p{
  font-family:var(--body);font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.65;color:var(--text-soft);max-width:62ch;
}

/* "what you get" — honest, always-true value cards (no fake feature claims) */
.pg-getgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;margin-top:6px;
}
.wy{
  border:1px solid var(--line);border-radius:14px;padding:20px;
  background:linear-gradient(180deg,var(--surface-hi),var(--surface));
}
.wy-ic{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--acc-soft);color:var(--acc-2);margin-bottom:12px;
}
.wy-ic svg{width:18px;height:18px}
.wy h3{font-family:var(--body);font-weight:600;font-size:.95rem;color:var(--text);margin-bottom:5px}
.wy p{font-family:var(--body);font-size:.85rem;line-height:1.5;color:var(--text-mute)}

/* optional real feature highlights (only render when per-plugin copy exists) */
.pg-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.pg-feat li{
  list-style:none;border:1px solid var(--line);border-left:2px solid var(--acc-2);
  border-radius:10px;padding:16px 18px;background:var(--surface);
}
.pg-feat b{display:block;font-family:var(--body);font-weight:600;color:var(--text);margin-bottom:4px}
.pg-feat span{font-family:var(--body);font-size:.875rem;line-height:1.5;color:var(--text-mute)}

/* specs */
.pg-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pg-spec{background:var(--surface);padding:18px 20px}
.pg-spec .k{display:block;font-family:var(--body);font-weight:600;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);margin-bottom:6px}
.pg-spec .v{font-family:var(--body);font-size:.95rem;color:var(--text)}

/* related plugins (same series) */
.pg-rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.pg-rel a{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:12px;padding:12px;
  background:var(--surface);transition:border-color .15s var(--ease-hover),transform .15s var(--ease-hover);
}
.pg-rel a:hover{border-color:var(--line-molten);transform:translateY(-2px)}
.pg-rel img{width:44px;height:44px;border-radius:10px;flex:none}
.pg-rel .rn{font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--text)}
.pg-rel .rt{font-family:var(--body);font-size:.75rem;color:var(--text-mute)}

/* final CTA band (reuses the chrome-slab look) */
.pg-cta-band{
  margin-top:clamp(40px,6vw,72px);
  text-align:center;border:1px solid var(--line-hi);border-radius:20px;
  padding:clamp(36px,6vw,64px) clamp(24px,5vw,56px);
  background:
    radial-gradient(60% 100% at 50% 0%, var(--acc-soft), transparent 70%),
    linear-gradient(180deg,var(--surface-hi),var(--ink-800));
  position:relative;overflow:hidden;
}
.pg-cta-band h2{font-family:var(--display);font-weight:900;
  font-size:clamp(1.8rem,4vw,3rem);color:var(--text);margin-bottom:12px}
.pg-cta-band p{font-family:var(--body);color:var(--text-soft);max-width:48ch;
  margin:0 auto 24px;font-size:1.05rem}

/* responsive */
@media (max-width:640px){
  .pg-hero-inner{grid-template-columns:1fr;text-align:center;justify-items:center}
  .pg-meta,.pg-buy{justify-content:center}
}

/* changelog / version history */
.cl-list{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line-hi);margin-left:6px}
.cl-entry{position:relative;padding:0 0 26px 26px}
.cl-entry:last-child{padding-bottom:0}
.cl-entry::before{ /* node on the timeline */
  content:"";position:absolute;left:-5px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--grad-acc);box-shadow:var(--acc-glow);
}
.cl-head{display:flex;align-items:baseline;gap:12px;margin-bottom:9px}
.cl-ver{
  font-family:var(--display);font-weight:900;font-size:1.15rem;letter-spacing:-.01em;
  background:var(--grad-acc);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--acc-2);
}
.cl-date{font-family:var(--body);font-size:.75rem;letter-spacing:.08em;color:var(--text-faint);
  text-transform:uppercase}
.cl-notes{display:flex;flex-direction:column;gap:6px}
.cl-notes li{
  position:relative;padding-left:16px;
  font-family:var(--body);font-size:.95rem;line-height:1.55;color:var(--text-soft);
}
.cl-notes li::before{content:"";position:absolute;left:2px;top:.7em;width:5px;height:5px;
  border-radius:50%;background:var(--text-faint)}

/* not-found */
.pg-404{padding:18vh 0;text-align:center}
.pg-404 h1{font-family:var(--display);font-weight:900;font-size:clamp(2rem,5vw,3rem);color:var(--text);margin-bottom:10px}
.pg-404 p{color:var(--text-soft);margin-bottom:24px}