/* =======================================================================
   Template "Signature" — éditorial premium
   Overrides and specifics on top of base.css + components.css + sections.css
   ======================================================================= */

/* Background & base feel */
body.template-signature {
  background: var(--color-bg);
}

/* Section surfaces — position-aware alternation (surfaces/surface-plan.ts).
 * Neutral light sections alternate 'base' (the white body) / 'raised' (a faint
 * brand-tinted surface) by position, so no two adjacent share a tone. Intrinsic
 * sections (hero gradient, simulator/testimonials/cta dark) carry NO
 * data-surface and keep their own background. 'base' needs no rule (= --color-bg).
 * --surface-raised is brand-derived so the rhythm follows the org's colors. */
body.template-signature {
  --surface-raised: color-mix(in srgb, var(--color-primary) 3.5%, var(--color-bg));
  /* Dark section backgrounds (cta, simulator, testimonials) follow the brand
   * color instead of a fixed navy — same idea as maison. These tokens are
   * background-only (text keeps --color-ink, untouched) and stay deep enough
   * for white text. --color-bg-darker stays deeper so testimonials ≠ cta. */
  --color-bg-dark: color-mix(in srgb, var(--color-primary) 90%, black);
  --color-bg-darker: color-mix(in srgb, var(--color-primary) 75%, black);
}
body.template-signature [data-surface="base"] {
  background: var(--surface-base);
}
body.template-signature [data-surface="raised"] {
  background: var(--surface-raised);
}

/* Strong serif for display text */
.template-signature h1,
.template-signature h2,
.template-signature .hero__title,
.template-signature .manifesto__quote,
.template-signature .testimonial__text {
  font-weight: 400;
  letter-spacing: -0.03em;
}

/* Hero — full-size editorial feel */
.template-signature .hero {
  padding-top: clamp(7rem, 16vw, 11rem);
  padding-bottom: clamp(5rem, 12vw, 9rem);
  background:
    radial-gradient(ellipse 80% 60% at 70% -10%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 60%),
    var(--color-bg);
}

.template-signature .hero__title {
  font-size: clamp(3rem, 8vw, var(--fs-7xl));
  line-height: 0.95;
}

.template-signature .hero__image-wrap {
  border-radius: var(--radius-xl);
}

/* Trust bar — darker contrast line */
.template-signature .trust-bar {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

/* Services — remove card borders, let the grid lines do the work */
.template-signature .services {
  background: var(--color-bg);
}

/* Manifesto — dramatic display */
.template-signature .manifesto {
  padding-block: clamp(6rem, 14vw, 11rem);
  background: var(--color-bg-alt);
}

.template-signature .manifesto__quote {
  font-size: clamp(2rem, 5vw, var(--fs-5xl));
  line-height: 1.15;
  font-style: normal;
}

.template-signature .manifesto__quote::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-primary);
  margin-inline: auto;
  margin-bottom: var(--s-10);
}

/* Showcase cards — more editorial */
.template-signature .showcase-card__media {
  border-radius: var(--radius-md);
}

.template-signature .showcase-card__title {
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-tight);
}

/* Testimonials — dark elegant section. Uses --color-bg-darker (deeper than the
 * cta-final --color-bg-dark that follows it) so the two dark sections don't
 * merge into one navy block. White text stays legible (even higher contrast). */
.template-signature .testimonials {
  background: var(--color-bg-darker);
  color: #fff;
}

.template-signature .testimonials__title,
.template-signature .testimonial__text,
.template-signature .testimonial__name {
  color: #fff;
}

.template-signature .testimonial__text::before,
.template-signature .testimonial__text::after {
  color: var(--color-secondary);
}

.template-signature .testimonial__role {
  color: rgba(255, 255, 255, 0.6);
}

.template-signature .testimonials__prev,
.template-signature .testimonials__next {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.template-signature .testimonials__prev:hover,
.template-signature .testimonials__next:hover {
  background: #fff;
  color: var(--color-ink);
  border-color: #fff;
}

.template-signature .testimonials__pagination {
  color: rgba(255, 255, 255, 0.6);
}

/* CTA final — full color statement */
.template-signature .cta-final--dark {
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 60%),
    var(--color-bg-dark);
}

.template-signature .cta-final__title {
  font-size: clamp(2.5rem, 6vw, var(--fs-5xl));
  line-height: 1.05;
}

/* Contact block — refined */
.template-signature .contact-block__form {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
}

/* Header specifics */
.template-signature .site-header__brand {
  font-style: italic;
}

/* Subtle noise texture overlay (optional, via ::before pseudo on body) */
.template-signature {
  position: relative;
}

/* Typography refinements — italic emphasis on specific display text */
.template-signature .hero__title em,
.template-signature .services__title em,
.template-signature .manifesto__quote em,
.template-signature .cta-final__title em {
  font-style: italic;
  color: var(--color-primary);
}