/**
 * @file
 * Bloc « Como adoptar? » — grille des steps + CSS counter pour le numéro.
 *
 * Le STYLE des steps (.ocdm-step : card blanche, ombre soft) et du numéro
 * (.ocdm-step__number : Fraunces italic framboise) vient de ocdm-v7.css.
 * Ici on s'occupe :
 *   - du fond crème de la section (.home-howto)
 *   - de la grille 4 cols
 *   - du compteur CSS pour générer "01.", "02."…
 *   - du wrapping du field-collection Drupal qui sort les paragraphs
 */

/* Section fond crème — v7.css cible déjà .home-howto, mais on s'assure que
   le padding est correct ici aussi. */
.home-howto {
  padding-block: var(--ocdm-space-8, 3rem);
}

/* Bloc dans homepage = .block--how-to-adopt (compat ascendante). */
.block--how-to-adopt {
  margin: 0;
}

/* Grille des steps — 4 cols desktop, 2 mid, 1 mobile. */
.ocdm-steps,
.how-to-adopt__list,
.block--how-to-adopt .field--name-field-hta-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ocdm-space-4, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step-counter;
}

.ocdm-step,
.how-to-adopt__step {
  counter-increment: step-counter;
  list-style: none;
}

/* Le wrapper Drupal <div class="field"> + <div class="field__item"> casse
   le grid de <ol class="ocdm-steps">. display:contents les rend transparents
   pour que les <li> deviennent enfants directs de la grille. */
.ocdm-steps > .field,
.ocdm-steps > .field > .field__items,
.ocdm-steps .field__item {
  display: contents;
}

/* Numéro auto : 01., 02., 03., 04. — Fraunces italic framboise via v7.css.
   On injecte juste le texte via ::before pour ne pas avoir à le passer
   en preprocess. */
.ocdm-step__number::before {
  content: counter(step-counter, decimal-leading-zero) ".";
}

/* Lecture des fields Drupal (compat champ field_hta_step_title rendu par
   le view display). */
.block--how-to-adopt .field--name-field-hta-step-title {
  font-family: var(--ocdm-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 6px;
  color: var(--ocdm-text-strong);
  letter-spacing: -0.015em;
}

.block--how-to-adopt .field--name-field-hta-step-text {
  color: var(--ocdm-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.block--how-to-adopt .field--name-field-hta-step-text p { margin: 0; }

@media (max-width: 992px) {
  .ocdm-steps,
  .how-to-adopt__list,
  .block--how-to-adopt .field--name-field-hta-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .ocdm-steps,
  .how-to-adopt__list,
  .block--how-to-adopt .field--name-field-hta-steps {
    grid-template-columns: 1fr;
  }
}