/**
 * Apadrinhamento — « duo émotionnel » : 2 cartes de séniors à parrainer,
 * rendues via un #type radios à labels riches. Sélection en CSS pur (:checked),
 * aucun JS. Charte framboise.
 */

.apadri-eyebrow {
  text-align: center;
  font-style: italic;
  color: var(--ocdm-primary-hover, #a4205f);
  margin: 0 0 6px;
}

/* Titre du groupe (Que tal apadrinhar o Boby ou o Rex ?) */
.apadri-picker > legend,
.apadri-picker > label,
.apadri-picker .fieldset__legend,
.apadri-picker .form-item__label {
  display: block;
  width: 100%;
  float: none;          /* Bootstrap applique float:left aux <legend> */
  text-align: center;
  font-family: var(--ocdm-font-display, Georgia, serif);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  color: #1a0e14;
  margin: 0 0 18px;
}
/* La pastille interne est un bloc à largeur ajustée : sans inline-block +
   marges auto, le text-align du <legend> ne la recentre pas. */
.apadri-picker .fieldset-legend {
  display: inline-block;
  float: none;
  margin-inline: auto;
  text-align: center;
}

/* Grille des options : le thème (Barrio) enveloppe TOUS les radios dans un
   unique <div class="radio"> — c'est LUI le conteneur grille, pas
   .fieldset-wrapper (qui n'aurait qu'un seul enfant → 1 colonne). */
.apadri-picker .fieldset-wrapper > .radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  /* Sans plafond, sur grand écran chaque carte dépassait 900px : photos
     upscalées (donc floues) et cadrage démesuré. ~420px par carte suffit. */
  max-width: 880px;
  margin-inline: auto;
}
.apadri-picker .fieldset-wrapper > .radio > .form-check {
  margin: 0;
  padding: 0;        /* annule le padding réservé à la puce Bootstrap */
  min-height: 0;
}

/* Masque la puce radio, le label devient la carte cliquable */
.apadri-picker input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.apadri-picker label {
  display: block;
  cursor: pointer;
  margin: 0;
  font-weight: inherit;
}

.apadri-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 2px solid #eadfd3;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  padding-bottom: 14px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.apadri-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;          /* format 4:3 pour bien voir l'animal */
  background: #e9d8c8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* object-position remonté : sur une photo verticale, un recadrage centré
   coupait la tête du chien — on privilégie le haut du cadre. */
.apadri-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
.apadri-card__emoji { font-size: 3rem; }
.apadri-card__name {
  font-family: var(--ocdm-font-display, Georgia, serif);
  font-weight: 800;
  font-size: 1.25rem;
  margin-top: 10px;
  color: #1a0e14;
}
.apadri-card__meta {
  color: var(--ocdm-text-muted, #76616b);
  font-size: .82rem;
  margin: 2px 12px 10px;
}
.apadri-card__pick {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 2px solid var(--ocdm-primary, #c9357a);
  color: var(--ocdm-primary-hover, #a4205f);
  font-weight: 700;
  font-size: .85rem;
}
.apadri-picker label:hover .apadri-card { transform: translateY(-3px); border-color: var(--ocdm-primary, #c9357a); }
.apadri-picker input:checked + label .apadri-card {
  border-color: var(--ocdm-primary, #c9357a);
  box-shadow: 0 6px 16px rgba(201, 53, 122, .25);
}
.apadri-picker input:checked + label .apadri-card__pick {
  background: var(--ocdm-primary, #c9357a);
  color: #fff5f0;
}

/* Option « os dois » — pleine largeur (span les 2 colonnes) */
.apadri-picker .fieldset-wrapper > .radio > .form-check:has(.apadri-both) { grid-column: 1 / -1; }
/* C'est LE choix qu'on veut voir cliqué : bloc framboise plein, plus grand
   et plus contrasté que les 2 cartes blanches, pour qu'il attire l'œil. */
.apadri-both {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
  padding: 24px 20px;
  border: 3px solid #c9357a;
  border-radius: 16px;
  background-color: #fff;
  color: #a4205f;
  font-family: var(--ocdm-font-display, Georgia, serif);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem);
  line-height: 1.2;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.apadri-both strong { font-weight: 800; }
.apadri-both__heart { font-size: 1.9rem; line-height: 1; }

/* Battement discret du cœur pour accrocher le regard. */
@keyframes apadri-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
.apadri-both__heart { animation: apadri-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .apadri-both__heart { animation: none; }
}

/* Blanc + liseré framboise au repos ; framboise plein au survol et une fois
   choisi. Couleurs littérales (pas de var()) pour éviter toute surprise. */
.apadri-picker label:hover .apadri-both,
.apadri-picker input:checked + label .apadri-both {
  background-color: #c9357a;
  border-color: #a4205f;
  color: #fff5f0;
  box-shadow: 0 10px 26px rgba(201, 53, 122, .35);
}
.apadri-picker label:hover .apadri-both { transform: translateY(-3px); }
.apadri-picker input:checked + label .apadri-both::after {
  content: "✓";
  font-size: 1.4rem;
  line-height: 1;
  margin-left: 4px;
}

.apadri-more {
  display: block;
  text-align: center;
  margin-top: 14px;
  color: var(--ocdm-text-muted, #76616b);
  font-size: .85rem;
  text-decoration: none;
}
.apadri-more:hover { color: var(--ocdm-primary, #c9357a); }

/* Champs nom/référence masqués (remplis par le choix côté serveur). */
.apadri-hidden { display: none !important; }

@media (max-width: 520px) {
  .apadri-picker .fieldset-wrapper > .radio { grid-template-columns: 1fr; }
}