/* Page-specific styles. Anything reused twice belongs in components.css. */

/* --- Hero -----------------------------------------------------------------
 * Typographic for now. A photograph drops in by adding the file and
 * uncommenting the rule below — it must be set here, not as a style attribute,
 * because the CSP has no nonces and inline styles are dropped silently.
 */

.hero {
  padding-block: var(--space-2xl) var(--space-xl);
  background:
    radial-gradient(90rem 40rem at 70% -10%, color-mix(in srgb, var(--accent-surface) 12%, transparent), transparent 60%),
    var(--surface-sunk);
  border-block-end: 1px solid var(--rule);
}

/*
.hero--image {
  background-image:
    linear-gradient(to right, rgb(251 248 244 / 0.94), rgb(251 248 244 / 0.55)),
    url('/img/hero.jpg');
  background-size: cover;
  background-position: center;
}
*/

.hero__inner {
  max-width: var(--measure);
}

.hero h1 {
  margin-block-end: var(--space-s);
}

.hero .lede {
  max-width: var(--measure-narrow);
  font-size: var(--text-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-start: var(--space-l);
}

/* --- Page headers --------------------------------------------------------- */

.page__header {
  margin-block-end: var(--space-l);
}

/* --- Services ------------------------------------------------------------- */

.service-card__price {
  margin-block-start: auto;
  padding-block-start: var(--space-s);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* --- Testimonials --------------------------------------------------------- */

.testimonial-list {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Contact -------------------------------------------------------------- */

.contact-details {
  margin: 0;
}

.contact-details dt {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.contact-details dd {
  margin-inline-start: 0;
  margin-block-end: var(--space-s);
}

/* --- Legal and privacy ----------------------------------------------------
 * Dense reference text: a tighter measure and clear heading separation matter
 * more here than visual interest.
 */

.page--legal h2,
.page--privacy h2 {
  margin-block-start: var(--space-xl);
  font-size: var(--text-lg);
}

.page--legal dl,
.page--privacy dl {
  padding-inline-start: 0;
}

/* --- Error pages ---------------------------------------------------------- */

.page--error {
  padding-block: var(--space-3xl);
  text-align: center;
}

.page--error .lede {
  margin-inline: auto;
}

.page--error .error-ref {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}