/* ==========================================================================
   microcement.css — Hands of Luxury Clean
   --------------------------------------------------------------------------
   Microcement-specifieke laag. Wordt geladen bovenop service.css op
   tpl-service-microcement.php én tpl-ad-microcement.php.

   Bevat alleen overrides en extra's die specifiek zijn voor de
   microcement-pagina's. Als iets generiek genoeg is voor andere services,
   hoort het in service.css of components.css.

   Volgorde:
     1.  Container / pagina-niveau
     2.  Hero accent
     3.  Trust
     4.  Intro
     5.  Proof
     6.  Benefits
     7.  Applications
     8.  Process
     9.  Reviews
     10. FAQ
     11. CTA
     12. Reduced motion
     13. Ad-landing minimal shell
   ========================================================================== */

/* ============================================================
   1. Container / pagina-niveau
   ============================================================ */
.hol-microcement {
  /* Container-niveau van de microcement-pagina. Bewust leeg —
     het luxe ritme wordt opgebouwd in de losse secties. */
}

/* ============================================================
   2. Hero accent
   ============================================================ */
.hol-microcement .hol-service-hero {
  background:
    radial-gradient(
      80% 60% at 70% 40%,
      rgba(176, 138, 77, 0.18),
      transparent 70%
    ),
    var(--hol-color-bg-deep);
}

.hol-microcement .hol-service-hero__title {
  /* Iets ruimere ademruimte bovenop de eyebrow voor de microcement hero. */
  margin-top: var(--hol-space-lg);
}

/* ============================================================
   3. Trust strip
   ============================================================ */
.hol-microcement-trust {
  /* Component .hol-trust-strip levert layout. We voegen alleen een
     subtiele verticale ademruimte toe zodat hij netjes los staat van
     de hero en de daaropvolgende intro. */
  border-bottom: 1px solid var(--hol-color-line-soft);
}

/* ============================================================
   4. Intro
   ============================================================ */
.hol-microcement-intro__body {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--hol-space-md);
  margin-top: var(--hol-space-lg);
}

.hol-microcement-intro__lead {
  font-size: var(--hol-fs-lg);
  color: var(--hol-color-ink);
  line-height: var(--hol-lh-normal);
  margin: 0;
}

.hol-microcement-intro__text {
  font-size: var(--hol-fs-md);
  color: var(--hol-color-ink-soft);
  line-height: var(--hol-lh-normal);
  margin: 0;
}

/* ============================================================
   5. Proof
   ============================================================ */
.hol-microcement-proof .hol-section-title {
  margin-bottom: var(--hol-space-xl);
}

.hol-microcement .hol-service-proof__grid {
  /* Microcement-specifieke proof-grid mag iets ruimer ademen. */
  gap: var(--hol-space-lg);
}

.hol-microcement-proof__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--hol-space-2xl);
}

/* ============================================================
   6. Benefits
   ============================================================ */
.hol-microcement-benefits .hol-section-title {
  margin-bottom: var(--hol-space-xl);
}

.hol-microcement-benefits .hol-service-benefits__item {
  /* Iets warmer accent voor microcement: subtiele top-border in goud. */
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.hol-microcement-benefits .hol-service-benefits__item::before {
  content: "";
  position: absolute;
  inset-inline: var(--hol-space-lg);
  top: 0;
  height: 2px;
  background: var(--hol-color-accent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hol-microcement-benefits .hol-service-benefits__item:hover {
  transform: translateY(-2px);
}

.hol-microcement-benefits .hol-service-benefits__item:hover::before {
  opacity: 1;
}

/* ============================================================
   7. Applications
   ============================================================ */
.hol-microcement-applications .hol-section-title {
  margin-bottom: var(--hol-space-xl);
}

.hol-microcement-applications__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hol-space-sm);
  max-width: 880px;
  margin-inline: auto;
}

.hol-microcement-applications__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--hol-space-2xs) var(--hol-space-md);
  border: 1px solid var(--hol-color-line);
  border-radius: 999px;
  font-size: var(--hol-fs-sm);
  color: var(--hol-color-ink-soft);
  background: var(--hol-color-bg);
  letter-spacing: 0.01em;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.hol-microcement-applications__chip:hover {
  border-color: var(--hol-color-accent);
  color: var(--hol-color-ink);
}

/* ============================================================
   8. Process
   ============================================================ */
.hol-microcement-process .hol-section-title {
  margin-bottom: var(--hol-space-xl);
}

.hol-microcement .hol-service-process__step {
  position: relative;
  padding-top: var(--hol-space-md);
}

.hol-microcement .hol-service-process__number {
  /* Iets dieper en zwaarder voor de microcement-pagina. */
  font-size: var(--hol-fs-2xl);
  letter-spacing: var(--hol-tracking-tight);
  color: var(--hol-color-accent);
}

/* ============================================================
   9. Reviews
   ============================================================ */
.hol-microcement-reviews .hol-section-title {
  margin-bottom: var(--hol-space-xl);
}

/* ============================================================
   10. FAQ
   ============================================================ */
.hol-microcement-faq-section .hol-section-title {
  margin-bottom: var(--hol-space-xl);
}

/* ============================================================
   11. CTA
   ============================================================ */
.hol-microcement-cta-section {
  /* Het cta-block component levert de donkere achtergrond zelf.
     We zorgen alleen dat hij ruimte krijgt en goed eindigt. */
  padding-bottom: var(--hol-space-3xl);
}

/* ============================================================
   12. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hol-microcement-benefits .hol-service-benefits__item,
  .hol-microcement-benefits .hol-service-benefits__item::before,
  .hol-microcement-applications__chip {
    transition: none;
  }

  .hol-microcement-benefits .hol-service-benefits__item:hover {
    transform: none;
  }
}

/* ============================================================
   13. Subtiele texture overlay placeholder
   ============================================================ */
.hol-microcement-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
}

/* ============================================================
   AD-LANDING SPECIFIEK — minimal shell
   --------------------------------------------------------------
   De ad-landing draait op dezelfde Type B service-shell maar
   krijgt:
     - extra-tall hero (mobile-first ad-traffic)
     - één primaire CTA (geen ghost)
     - compact 3-koloms benefits-grid
     - smalle FAQ
     - prominente sluit-CTA
   Alle blokken hieronder zijn scoped aan .hol-microcement--ad
   zodat de servicepagina ongemoeid blijft.
   ============================================================ */
.hol-microcement.hol-microcement--ad .hol-service-hero {
  min-height: clamp(620px, 92vh, 920px);
}

.hol-microcement.hol-microcement--ad .hol-service-hero__inner {
  padding-block: var(--hol-space-2xl);
}

/* Ad-landings tonen geen secundaire CTA's — alleen primary. */
.hol-microcement.hol-microcement--ad .hol-button--ghost,
.hol-microcement.hol-microcement--ad .hol-button--ghost-light {
  display: none;
}

/* --- Ad hero ---------------------------------------------- */
.hol-ad-microcement-hero__actions {
  margin-top: var(--hol-space-xl);
}

/* --- Ad trust strook -------------------------------------- */
.hol-ad-microcement-trust {
  border-bottom: 1px solid var(--hol-color-line-soft);
}

/* --- Ad benefits ------------------------------------------ */
.hol-ad-microcement-benefits .hol-section-title {
  margin-bottom: var(--hol-space-xl);
}

.hol-ad-microcement-benefits__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hol-space-md);
  grid-template-columns: 1fr;
  max-width: 1080px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .hol-ad-microcement-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .hol-ad-microcement-benefits__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hol-ad-microcement-benefits__item {
  padding: var(--hol-space-lg);
  background: var(--hol-color-bg);
  border: 1px solid var(--hol-color-line-soft);
  border-radius: var(--hol-radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--hol-space-2xs);
}

.hol-ad-microcement-benefits__title {
  font-size: var(--hol-fs-lg);
  margin: 0;
}

.hol-ad-microcement-benefits__body {
  font-size: var(--hol-fs-sm);
  color: var(--hol-color-ink-soft);
  line-height: var(--hol-lh-normal);
  margin: 0;
}

/* --- Ad FAQ ----------------------------------------------- */
.hol-ad-microcement-faq-section .hol-section-title {
  margin-bottom: var(--hol-space-xl);
}

.hol-ad-microcement-faq-section .hol-service-faq {
  max-width: 760px;
}

/* --- Ad CTA ----------------------------------------------- */
.hol-ad-microcement-cta-section {
  padding-bottom: var(--hol-space-3xl);
}

/* Geen reveal-flikker op ad-landing: animaties op de
   ad-secties worden minder agressief — pagina moet
   meteen 'staan' voor paid traffic. */
.hol-microcement--ad .hol-reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hol-microcement--ad .hol-reveal {
    opacity: 1;
    transform: none;
  }
}