/* ==========================================================================
   AWCompany ApS — Byggepriser / price-page component library
   Shared across byggepriser.html (hub), saadan-beregner-vi-priser.html and
   every *-pris.html page. Every number these pages show comes from the
   real calculator engines (see docs/price-page-data.md for the exact
   script + inputs used per page) — this file only styles the container,
   it never invents a figure.
   ========================================================================== */

/* ---------- Price hero — the "above the fold" answer (spec §11): the
   range, the per-m² figure and the CTA must be visible with zero
   scrolling on mobile, before any narrative text. ---------- */
.price-hero{
  /* Same fixed-header clearance as .page-hero (style.css) — this is its
     own class rather than reusing .page-hero because the price card
     needs to sit inside the same narrow container as the breadcrumb/H1,
     not the wider default. */
  padding-block: 9.5rem var(--sp-4);
}
.price-hero__intro{ max-width: 68ch; }
.price-card{
  margin-top: var(--sp-3);
  background: var(--c-ink);
  color: var(--c-on-dark);
  padding: var(--sp-4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
}
.price-card__label{
  font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-sand);
}
.price-card__range{
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.05; margin-top: 0.35rem;
}
.price-card__range small{ font-family: var(--f-body); font-weight: 500; font-size: 0.42em; color: var(--c-on-dark-soft); }
.price-card__submeta{
  margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 1.5rem;
  font-size: var(--fs-small); color: var(--c-on-dark-soft);
}
.price-card__submeta strong{ color: var(--c-on-dark); font-weight: 600; }
.price-card__cta{ display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }
.price-card__cta .btn{ white-space: nowrap; justify-content: center; }
.price-freshness{
  margin-top: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--fs-small); color: var(--c-ink-faint);
}
.price-freshness .dot{ width: 7px; height: 7px; border-radius: 50%; background: #2e8b57; flex: none; }
.price-freshness[data-stale="true"] .dot{ background: #b8862f; }
.price-freshness[data-stale="true"]{ color: #8a6416; }

/* ---------- Cost breakdown — materials/labour/extras as simple bars,
   never a chart library (spec §89). ---------- */
.cost-breakdown{ margin-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.cost-breakdown-row{
  display: grid; grid-template-columns: 10rem 1fr auto; align-items: center; gap: 1rem;
  padding-block: 0.85rem; border-bottom: 1px solid var(--c-line);
}
.cost-breakdown-row dt{ font-weight: 600; color: var(--c-ink); font-size: var(--fs-small); }
.cost-breakdown-row .bar-track{ height: 8px; background: var(--c-bg-alt); overflow: hidden; }
.cost-breakdown-row .bar-fill{ height: 100%; background: var(--c-timber-dark); }
.cost-breakdown-row dd{ margin: 0; font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Cost drivers — what moves the price ---------- */
.cost-drivers{
  margin-top: var(--sp-3);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px;
  background: var(--c-line); border: 1px solid var(--c-line);
}
.cost-driver{ background: var(--c-surface); padding: var(--sp-3); }
.cost-driver h3{ font-size: 1rem; }
.cost-driver p{ margin-top: 0.5rem; font-size: var(--fs-small); color: var(--c-ink-faint); }

/* ---------- Worked example ---------- */
.example-calc{
  margin-top: var(--sp-3);
  border: 1px solid var(--c-line);
  background: var(--c-bg-alt);
  padding: var(--sp-4);
}
.example-calc h3{ margin-bottom: 0.25rem; }
.example-calc__subtitle{ color: var(--c-ink-faint); font-size: var(--fs-small); margin-bottom: 1.25rem; }
.example-calc__rows{ display: flex; flex-direction: column; gap: 0.6rem; }
.example-calc__row{ display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-small); }
.example-calc__row.is-total{
  margin-top: 0.6rem; padding-top: 0.75rem; border-top: 1px solid var(--c-line-strong);
  font-weight: 700; font-size: 1.05rem; color: var(--c-ink);
}

/* ---------- Related pages (silo/hub linking, spec §36/§80) ---------- */
.related-pages{ margin-top: var(--sp-3); }
.related-pages__grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px;
  background: var(--c-line); border: 1px solid var(--c-line);
}
.related-pages__grid a{
  background: var(--c-surface); padding: var(--sp-3);
  display: flex; flex-direction: column; gap: 0.4em;
  transition: background var(--dur-ui) var(--ease-premium);
}
.related-pages__grid a:hover{ background: var(--c-bg-alt); }
.related-pages__grid .name{ font-family: var(--f-display); font-weight: 700; color: var(--c-ink); }
.related-pages__grid .meta{ font-size: var(--fs-small); color: var(--c-ink-faint); }

/* ---------- Hub page cluster grid ---------- */
.cluster-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px;
  background: var(--c-line); border: 1px solid var(--c-line); margin-top: var(--sp-3);
}
.cluster-card{
  background: var(--c-surface); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.cluster-card__range{ font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; color: var(--c-ink); }
.cluster-card__range small{ font-family: var(--f-body); font-weight: 500; font-size: 0.55em; color: var(--c-ink-faint); }
.cluster-card p{ font-size: var(--fs-small); color: var(--c-ink-faint); flex-grow: 1; }

@media (max-width: 640px){
  .price-card{ grid-template-columns: 1fr; }
  .price-card__cta{ margin-top: 0.5rem; }
  .cost-breakdown-row{ grid-template-columns: 6.5rem 1fr auto; gap: 0.6rem; }
}