/* ==========================================================================================================
   product-premium.css: the visual layer for ProductDetail.aspx (hero, rating, reviews, articles, comparisons,
   sidebar). CSS only. Every class below already exists on the page, and the page's own style block loads first,
   so these rules win by order. Palette: the site's ivory paper, ink, rust accent and champagne gold.
   Empty states are drawn here (no text in the database needed): "no articles yet", "no comparisons yet".
   ========================================================================================================== */

:root {
  --pp-gold: #c9a227;
  --pp-gold-hi: #e9cf72;
  --pp-gold-lo: #8f7010;
  --pp-ivory: #fffdf9;
  --pp-line: rgba(10,10,10,.09);
  --pp-ease: cubic-bezier(.2,.7,.2,1);
  --pp-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --pp-text-muted: #5b5650;   /* secondary text: 6.6:1 on ivory (the site's #7a7570 was 4.4:1) */
  --pp-link: #a33512;         /* rust for links on paper: 5.8:1 (the accent #c8401a is 4.2:1 on paper) */
}

/* ---------- hero ---------- */
.pd-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 380px at 88% -10%, rgba(201,162,39,.16), transparent 60%),
    radial-gradient(640px 320px at 0% 110%, rgba(200,64,26,.10), transparent 60%),
    var(--ink);
  color: var(--paper); padding: 64px 0 56px; border-bottom: 0;
}
.pd-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--pp-gold) 60%, var(--pp-gold-hi)); }
.pd-hero-inner { position: relative; z-index: 1; }
.pd-eyebrow { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pp-gold-hi); }
.pd-title { font-family: var(--pp-serif); font-weight: 700; letter-spacing: -.015em; color: #fff;
  font-size: clamp(30px, 4.4vw, 56px); line-height: 1.06; margin: 6px 0 10px; }
.pd-company { color: rgba(245,242,236,.7); font-size: 15px; }
.pd-desc { color: rgba(245,242,236,.82); font-size: 16px; line-height: 1.65; max-width: 62ch; }

.pd-visit-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 13px 24px;
  background: linear-gradient(135deg, #d9542b, var(--accent) 60%, #a53213); color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 16px 30px -16px rgba(200,64,26,.9), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .18s var(--pp-ease), box-shadow .18s; text-decoration: none; }
.pd-visit-btn:hover { transform: translateY(-1px); box-shadow: 0 20px 36px -16px rgba(200,64,26,.95), inset 0 1px 0 rgba(255,255,255,.25); }
.pd-visit-btn:focus-visible, .pd-gold-btn:focus-visible, .pd-full-btn:focus-visible, .pd-section-link:focus-visible,
.pd-art-card:focus-visible, .pd-cmp-row:focus-visible, .btn:focus-visible { outline: 2px solid var(--pp-gold-hi); outline-offset: 3px; }

.pd-logo, .pd-banner { border-radius: 18px; }

/* ---------- the rating card (score) ---------- */
.pd-hero-score { position: relative; text-align: center; padding: 26px 22px 20px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(201,162,39,.32); box-shadow: 0 30px 60px -36px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); }
.pd-score-circle { width: 112px; height: 112px; margin: 0 auto 6px; border-radius: 50%; color: var(--pp-gold-hi);
  background: radial-gradient(circle at 30% 25%, rgba(233,207,114,.22), rgba(201,162,39,.06) 60%, transparent 70%);
  border: 1.5px solid rgba(201,162,39,.55); font-family: var(--pp-serif); font-size: 34px; font-weight: 700;
  box-shadow: 0 0 0 6px rgba(201,162,39,.06); }
.pd-score-label { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(245,242,236,.6); margin-top: 4px; }
.pd-score-meta { color: rgba(245,242,236,.75); font-size: 13px; margin-top: 6px; }

/* the stars: five outlines, filled to the average (see ProductDetail.aspx.cs StarsHtml) */
.pd-stars { position: relative; display: inline-block; font-size: 19px; letter-spacing: 3px; line-height: 1;
  color: rgba(201,162,39,.28); white-space: nowrap; margin: 4px 0 2px; }
.pd-stars-bg { color: rgba(201,162,39,.28); }
.pd-stars-fg { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--pp-gold);
  text-shadow: 0 0 14px rgba(201,162,39,.45); }
.pd-stars-empty .pd-stars-bg { color: rgba(245,242,236,.28); }
.pd-stars-note { display: block; font-size: 12px; color: rgba(245,242,236,.7); margin-top: 6px; }

.pd-mini-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 16px; }
.pd-mini-stat { border-radius: 12px; padding: 10px 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.pms-val { display: block; font-family: var(--pp-serif); font-size: 20px; font-weight: 700; color: #fff; }
.pms-lbl { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(245,242,236,.55); margin-top: 2px; }

/* ---------- section headers ---------- */
.pd-section { margin-bottom: 44px; }
.pd-section-hdr { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--pp-line); position: relative; }
.pd-section-hdr::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px;
  background: linear-gradient(90deg, var(--pp-gold), var(--pp-gold-hi)); }
.pd-section-title { font-family: var(--pp-serif); font-size: 24px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.pd-section-link { font-size: 13px; font-weight: 600; color: var(--pp-link); text-decoration: none; letter-spacing: .02em; }
.pd-section-link:hover { text-decoration: underline; }

/* ---------- empty states: the page never shows a bare gap ---------- */
.pd-empty-block { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 36px 24px 32px; margin: 0 0 8px; border-radius: 18px; border: 1px dashed rgba(201,162,39,.55);
  background: linear-gradient(180deg, var(--pp-ivory), #faf6ec); color: #4a4640; }
.pd-empty-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(201,162,39,.12); color: var(--pp-gold-lo); font-size: 24px; }
.pd-empty-block p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 46ch; color: #4a4640; }
.pd-empty-block p strong { color: var(--ink); }
.pd-empty-block .btn { margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 11px 20px;
  border: 1px solid var(--ink); color: var(--ink); background: transparent; font-weight: 700; font-size: 14px; text-decoration: none;
  transition: background .15s, color .15s; }
.pd-empty-block .btn:hover { background: var(--ink); color: var(--paper); }

.pd-art-grid:not(:has(.pd-art-card)) {
  display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 30px 24px; border-radius: 18px;
  border: 1px dashed rgba(201,162,39,.55); background: linear-gradient(180deg, var(--pp-ivory), #faf6ec); }
.pd-art-grid:not(:has(.pd-art-card))::after {
  content: "No article has been published about this tool yet. Guides and reviews appear here as they are published.";
  color: #4a4640; font-size: 15px; line-height: 1.55; text-align: center; max-width: 52ch; }
.pd-cmp-list:not(:has(a)) {
  display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 30px 24px; border-radius: 18px;
  border: 1px dashed rgba(201,162,39,.55); background: linear-gradient(180deg, var(--pp-ivory), #faf6ec); }
.pd-cmp-list:not(:has(a))::after {
  content: "No comparison includes this tool yet. Side-by-side comparisons are added as we publish them.";
  color: #4a4640; font-size: 15px; line-height: 1.55; text-align: center; max-width: 52ch; }

/* ---------- article cards ---------- */
.pd-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.pd-art-card { display: block; padding: 20px 20px 18px; border-radius: 16px; border: 1px solid var(--pp-line);
  background: var(--pp-ivory); color: var(--ink); text-decoration: none; position: relative; overflow: hidden;
  transition: transform .2s var(--pp-ease), box-shadow .2s, border-color .2s; }
.pd-art-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pp-gold);
  transform: scaleY(.25); transform-origin: top; transition: transform .25s var(--pp-ease); }
.pd-art-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -24px rgba(10,10,10,.5); border-color: rgba(201,162,39,.4); }
.pd-art-card:hover::before { transform: scaleY(1); }
.pac-cat { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pac-title { font-family: var(--pp-serif); font-size: 18px; font-weight: 700; line-height: 1.3; margin: 8px 0 10px; color: var(--ink); }
.pac-meta { font-size: 12.5px; color: var(--pp-text-muted); }

/* ---------- review cards ---------- */
.ur-card { border-radius: 16px; border: 1px solid var(--pp-line); background: var(--pp-ivory); padding: 20px 22px; margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(10,10,10,.03); transition: box-shadow .2s, border-color .2s; }
.ur-card:hover { box-shadow: 0 16px 30px -24px rgba(10,10,10,.45); border-color: rgba(201,162,39,.35); }
.ur-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ur-stars { color: var(--pp-gold); font-size: 16px; letter-spacing: 2px; text-shadow: 0 0 10px rgba(201,162,39,.25); }
.ur-score { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--ink); }
.ur-date { font-size: 12px; color: var(--pp-text-muted); margin-left: auto; }
.ur-title { font-family: var(--pp-serif); font-size: 18px; font-weight: 700; color: var(--ink); margin: 10px 0 6px; }
.ur-summary, .ur-meta { color: #4a4640; line-height: 1.6; font-size: 15px; }

/* ---------- comparison rows ---------- */
.pd-cmp-list { display: flex; flex-direction: column; gap: 10px; }
.pd-cmp-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--pp-line);
  background: var(--pp-ivory); color: var(--ink); text-decoration: none; transition: transform .18s var(--pp-ease), border-color .18s, box-shadow .18s; }
.pd-cmp-row:hover { transform: translateX(3px); border-color: rgba(201,162,39,.45); box-shadow: 0 12px 26px -22px rgba(10,10,10,.5); }
.pcr-title { font-family: var(--pp-serif); font-size: 17px; font-weight: 700; color: var(--ink); }
.pcr-meta { font-size: 13.5px; color: var(--pp-text-muted); margin-top: 3px; line-height: 1.5; }
.pcr-arrow { margin-left: auto; font-size: 20px; color: var(--accent); transition: transform .18s; }
.pd-cmp-row:hover .pcr-arrow { transform: translateX(4px); }

/* ---------- sidebar ---------- */
.pd-sb-box { border-radius: 18px; border: 1px solid var(--pp-line); background: var(--pp-ivory); overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,10,10,.03); margin-bottom: 18px; }
.pd-sb-title { font-family: var(--pp-serif); font-size: 16px; font-weight: 700; padding: 14px 18px;
  background: transparent; color: var(--ink); border-bottom: 1px solid var(--pp-line); }
.pd-sb-title-gold { font-family: var(--pp-serif); font-size: 16px; font-weight: 700; padding: 14px 18px; color: var(--ink); border-bottom: 1px solid var(--pp-line); }
.pd-sb-title-accent { font-family: var(--pp-serif); font-size: 16px; font-weight: 700; padding: 14px 18px; color: #fff; border-bottom: 1px solid var(--pp-line); }
.pd-sb-title-gold { background: linear-gradient(90deg, rgba(201,162,39,.16), rgba(201,162,39,.04)); }
.pd-sb-body { padding: 14px 18px; }
.pd-qi-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pp-line); font-size: 14px; }
.pd-qi-row:last-child { border-bottom: 0; }
.pd-qi-row > span:first-child { color: var(--pp-text-muted); }
.pd-qi-row > span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.pd-gold-btn, .pd-full-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-radius: 12px; padding: 13px 18px;
  background: linear-gradient(135deg, var(--pp-gold-hi), var(--pp-gold) 55%, var(--pp-gold-lo)); color: #1a1305; font-weight: 700; font-size: 14px;
  text-decoration: none; box-shadow: 0 14px 28px -16px rgba(201,162,39,.9), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .18s; }
.pd-gold-btn:hover, .pd-full-btn:hover { transform: translateY(-1px); }


/* ---------- the three action tiles (shown in the hero card when there is no article, comparison or prompt yet) ---------- */
.pd-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.pd-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  min-height: 98px; padding: 14px 8px; border-radius: 14px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08); text-decoration: none; color: #fff;
  transition: transform .18s var(--pp-ease), border-color .18s, background .18s; }
.pd-action:hover { transform: translateY(-2px); border-color: rgba(201,162,39,.5); background: rgba(201,162,39,.07); }
.pd-action:focus-visible { outline: 2px solid var(--pp-gold-hi); outline-offset: 3px; }
.pd-action-ic { width: 22px; height: 22px; fill: none; stroke: var(--pp-gold-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.pd-action-t { font-size: 14.5px; font-weight: 600; color: #fff; line-height: 1.2; }
.pd-action-s { font-size: 12px; color: rgba(245,242,236,.6); line-height: 1.3; }
@media (max-width: 560px) {
  .pd-actions { gap: 8px; }
  .pd-action { min-height: 92px; padding: 12px 6px; }
  .pd-action-t { font-size: 13.5px; }
  .pd-action-s { font-size: 11.5px; }
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .pd-hero { padding: 44px 0 40px; }
  .pd-hero-score { margin-top: 18px; }
}
@media (max-width: 560px) {
  .pd-mini-stats { grid-template-columns: 1fr 1fr 1fr; }
  .pd-visit-btn { width: 100%; justify-content: center; }
  .pd-art-grid { grid-template-columns: 1fr; }
  .pd-section-title { font-size: 21px; }
  .pd-empty-block { padding: 28px 18px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-art-card, .pd-cmp-row, .pd-visit-btn, .pd-gold-btn, .pd-full-btn, .pcr-arrow { transition: none !important; }
}