/**
 * G2RD Counter — feuille de style du bloc (éditeur + front).
 *
 * Deux principes :
 *
 * 1. Aucune valeur en dur : chaque taille, rayon et couleur passe par une
 *    variable dont le repli est la valeur historique du bloc. Un site qui n'a
 *    jamais touché aux réglages rend donc exactement comme avant, et une
 *    variation de styles peut tout retoucher via
 *    `settings.custom.counter.*` (→ --wp--custom--counter--*) sans !important.
 *
 * 2. L'alignement du bloc pilote réellement le rendu. L'attribut `alignment`
 *    n'existe dans le HTML sauvegardé que sous forme de `text-align` inline
 *    sur le conteneur — et le save() ne peut pas changer sans invalider tout
 *    le contenu existant. La feuille mappe donc text-align → alignement flex
 *    au lieu de forcer le centrage plus bas dans la cascade.
 */

.g2rd-counter {
  /* Tailles locales : les media queries ne retouchent que ces variables. */
  --g2rd-counter-number-size: var(--wp--custom--counter--number-size, 48px);
  --g2rd-counter-affix-size: var(--wp--custom--counter--affix-size, 24px);
  --g2rd-counter-title-size: var(--wp--custom--counter--title-size, 18px);
  --g2rd-counter-circle-number-size: var(
    --wp--custom--counter--circle-number-size,
    24px
  );
}

.wp-block-g2rd-counter {
  padding: var(--wp--custom--counter--padding, 20px);
  border-radius: var(--wp--custom--radius--s, 8px);
  position: relative;
  overflow: hidden;
}

/* Counter Content */
.g2rd-counter .counter-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--custom--counter--content-gap, 16px);
}

.g2rd-counter.layout-number .counter-content {
  align-items: center;
}

.g2rd-counter.layout-circle .counter-content,
.g2rd-counter.layout-bar .counter-content {
  align-items: center;
}

/* Horizontal Layout */
.g2rd-counter .counter-horizontal {
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: var(--wp--custom--counter--horizontal-gap, 20px);
}

.g2rd-counter .counter-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--custom--counter--text-gap, 8px);
}

/* Icon Positioning */
.g2rd-counter.icon-left .counter-content {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.g2rd-counter.icon-right .counter-content {
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
}

.g2rd-counter.icon-top .counter-content {
  flex-direction: column;
}

.g2rd-counter.icon-bottom .counter-content {
  flex-direction: column-reverse;
}

/* Icon Wrapper */
.g2rd-counter .counter-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.g2rd-counter .counter-icon {
  transition: transform 0.3s ease;
}

.g2rd-counter:hover .counter-icon {
  transform: scale(1.1);
}

.g2rd-counter .counter-image {
  border-radius: var(--wp--custom--radius--s, 8px);
  transition: transform 0.3s ease;
}

.g2rd-counter:hover .counter-image {
  transform: scale(1.05);
}

/* Number Styles */
.g2rd-counter .counter-number-wrapper {
  display: flex;
  align-items: baseline;
  /* La rangée est en largeur au contenu : c'est `align-items` du parent
     (.counter-content) qui porte l'alignement — voir la section Alignement. */
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--wp--custom--counter--affix-gap, 4px);
}

.g2rd-counter .counter-number {
  font-size: var(--g2rd-counter-number-size);
  font-weight: bold;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.g2rd-counter .counter-prefix,
.g2rd-counter .counter-suffix {
  font-size: var(--g2rd-counter-affix-size);
  font-weight: 600;
  opacity: 0.8;
}

/* Title Styles */
.g2rd-counter .counter-title {
  font-size: var(--g2rd-counter-title-size);
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  /* Hérité du conteneur, où le save() pose l'attribut `alignment`. */
  text-align: inherit;
}

/* ─── Alignement ────────────────────────────────────────────────────────────
   Les deux écritures de chaque sélecteur couvrent la sérialisation sans
   espace (HTML sauvegardé par Gutenberg) et avec espace (attribut style
   recalculé par le navigateur dans l'éditeur). `center` restant le défaut du
   bloc, aucune de ces règles ne s'applique au contenu existant non modifié. */
/* Contenu en colonne (icône en haut/en bas) : l'axe transversal est
   horizontal, c'est donc align-items qui porte l'alignement. */
.g2rd-counter[style*="text-align:left"]:not(.icon-left):not(.icon-right) .counter-content,
.g2rd-counter[style*="text-align: left"]:not(.icon-left):not(.icon-right) .counter-content {
  align-items: flex-start;
}

.g2rd-counter[style*="text-align:right"]:not(.icon-left):not(.icon-right) .counter-content,
.g2rd-counter[style*="text-align: right"]:not(.icon-left):not(.icon-right) .counter-content {
  align-items: flex-end;
}

/* Contenu en ligne (icône à gauche/à droite) : l'axe principal est
   horizontal → justify-content, et le bloc texte s'aligne en interne. */
.g2rd-counter[style*="text-align:left"]:is(.icon-left, .icon-right) .counter-content,
.g2rd-counter[style*="text-align: left"]:is(.icon-left, .icon-right) .counter-content {
  justify-content: flex-start;
}

.g2rd-counter[style*="text-align:right"]:is(.icon-left, .icon-right) .counter-content,
.g2rd-counter[style*="text-align: right"]:is(.icon-left, .icon-right) .counter-content {
  justify-content: flex-end;
}

.g2rd-counter[style*="text-align:left"] .counter-text-wrapper,
.g2rd-counter[style*="text-align: left"] .counter-text-wrapper {
  align-items: flex-start;
}

.g2rd-counter[style*="text-align:right"] .counter-text-wrapper,
.g2rd-counter[style*="text-align: right"] .counter-text-wrapper {
  align-items: flex-end;
}

/* Circle Layout */
.g2rd-counter.layout-circle .counter-circle {
  position: relative;
  display: inline-block;
}

.g2rd-counter .counter-svg {
  transform: rotate(-90deg);
}

.g2rd-counter .counter-circle-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.g2rd-counter .counter-circle-content .counter-number-wrapper {
  margin-bottom: var(--wp--custom--counter--affix-gap, 4px);
}

.g2rd-counter .counter-circle-content .counter-number {
  font-size: var(--g2rd-counter-circle-number-size);
}

.g2rd-counter .counter-circle-progress {
  transition: stroke-dasharray 0.3s ease;
}

/* Bar Layout */
.g2rd-counter.layout-bar .counter-bar {
  width: 100%;
  max-width: var(--wp--custom--counter--bar-max-width, 300px);
  height: var(--wp--custom--counter--bar-height, 40px);
  background-color: var(--wp--preset--color--surface, #e6e6e6);
  border-radius: var(--wp--custom--radius--full, 20px);
  overflow: hidden;
  position: relative;
}

.g2rd-counter .counter-bar-fill {
  height: 100%;
  border-radius: var(--wp--custom--radius--full, 20px);
  position: relative;
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--wp--custom--counter--bar-padding, 12px);
}

.g2rd-counter .counter-bar-content {
  color: var(--wp--preset--color--white, #fff);
  font-weight: bold;
  font-size: var(--wp--custom--counter--bar-font-size, 14px);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .g2rd-counter {
    --g2rd-counter-number-size: var(
      --wp--custom--counter--number-size-tablet,
      36px
    );
    --g2rd-counter-affix-size: var(
      --wp--custom--counter--affix-size-tablet,
      18px
    );
    --g2rd-counter-title-size: var(
      --wp--custom--counter--title-size-tablet,
      16px
    );
    --g2rd-counter-circle-number-size: var(
      --wp--custom--counter--circle-number-size-tablet,
      18px
    );
  }

  .g2rd-counter .counter-horizontal {
    flex-direction: column !important;
    gap: var(--wp--custom--counter--text-gap, 12px);
  }

  .g2rd-counter .counter-icon {
    font-size: var(--wp--custom--counter--icon-size-tablet, 36px) !important;
    width: var(--wp--custom--counter--icon-size-tablet, 36px) !important;
    height: var(--wp--custom--counter--icon-size-tablet, 36px) !important;
  }
}

@media (max-width: 480px) {
  .wp-block-g2rd-counter {
    padding: var(--wp--custom--counter--padding-mobile, 16px);
  }

  .g2rd-counter {
    --g2rd-counter-number-size: var(
      --wp--custom--counter--number-size-mobile,
      28px
    );
    --g2rd-counter-affix-size: var(
      --wp--custom--counter--affix-size-mobile,
      14px
    );
    --g2rd-counter-title-size: var(
      --wp--custom--counter--title-size-mobile,
      14px
    );
  }

  .g2rd-counter .counter-content {
    gap: var(--wp--custom--counter--content-gap-mobile, 12px);
  }
}

/* Animation States */
.g2rd-counter.counting .counter-number {
  animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Accessibility */
.g2rd-counter:focus-within {
  outline: 2px solid var(--wp--preset--color--primary, #0a0e27);
  outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .g2rd-counter .counter-number,
  .g2rd-counter .counter-prefix,
  .g2rd-counter .counter-suffix,
  .g2rd-counter .counter-title {
    text-shadow: none;
  }

  .g2rd-counter .counter-bar {
    border: 2px solid currentColor;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .g2rd-counter .counter-icon,
  .g2rd-counter .counter-image,
  .g2rd-counter .counter-circle-progress,
  .g2rd-counter .counter-bar-fill {
    transition: none;
  }

  .g2rd-counter.counting .counter-number {
    animation: none;
  }
}


/*# sourceMappingURL=style-index.css.map*/