/**
 * H2J Ecosystem — CUBX Product Reassurance block CSS (v2.15.35)
 *
 * Style cube-gradient identité CUBX pour le bloc réassurance fiche produit.
 * Cube plein 44×44px arrondi avec gradient primary→secondary du preset CUBX,
 * icône Material Icons standard (filled, blanche) au centre.
 *
 * Densité alignée sur le bloc dispo h2jstock v3.0.20 :
 *   - Padding cellule    : 12px verticaux, 8px horizontaux
 *   - Font label         : 13px / 600
 *   - Font sublabel      : 11px / 400 / --h2j-text-light
 *   - Cube 44×44px       : gradient --h2j-primary → --h2j-secondary
 *   - Icône blanche 24px : Material Icons filled
 *
 * Couleurs : 100% via vars CSS du preset (suit dynamiquement le thème).
 * Pas de couleur en dur sauf le blanc de l'icône et les ombres rgba().
 *
 * Responsive :
 *   - >= 1024px : 4 colonnes en ligne (desktop)
 *   - < 1024px et >= 600px : 4 colonnes restent en ligne (tablette — David Q1)
 *   - < 600px (mobile) : 4 colonnes compactes maintenues, cube 36×36, icon 20px
 *
 * @author    H2J Ecosystem <info@2klove.fr>
 * @copyright 2024-2026 H2J sas RCS 978391720
 * @license   Commercial license
 *
 * @since v2.15.35
 */

/* ════════════════════════════════════════════════════════════════════
   Container — carte englobante avec ombre légère
   ════════════════════════════════════════════════════════════════════ */
.cubx-pp-card--reass {
  margin-top: 8px;
  padding: 12px 8px;
  background: var(--h2j-bg-card, #ffffff);
  border: 1px solid var(--h2j-border, #e2e8f0);
  border-radius: var(--h2j-radius, 8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ════════════════════════════════════════════════════════════════════
   Grid — 4 colonnes égales avec séparateurs verticaux fins
   ════════════════════════════════════════════════════════════════════ */
.cubx-pp-reass__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
}

.cubx-pp-reass__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 6px;
  text-align: center;
  position: relative;
}

/* Séparateur vertical entre items (sauf le dernier) */
.cubx-pp-reass__item + .cubx-pp-reass__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--h2j-border, #e2e8f0);
}

/* ════════════════════════════════════════════════════════════════════
   Cube — carré plein avec gradient CUBX (identité visuelle)
   ════════════════════════════════════════════════════════════════════ */
.cubx-pp-reass__cube {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    var(--h2j-primary, #6366f1) 0%,
    var(--h2j-secondary, #8b5cf6) 100%
  );
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.18),
              0 1px 2px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Icon — Material Icons filled, blanche, dans le cube
   ════════════════════════════════════════════════════════════════════ */
.cubx-pp-reass__icon {
  font-size: 24px;
  color: #ffffff;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
   Label / Sublabel
   ════════════════════════════════════════════════════════════════════ */
.cubx-pp-reass__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2j-text, #1e293b);
  line-height: 1.25;
  letter-spacing: 0.1px;
}

.cubx-pp-reass__sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--h2j-text-light, #64748b);
  line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════════════
   Mobile — David Q1 : 4 colonnes maintenues, densité réduite
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
  .cubx-pp-card--reass {
    padding: 8px 4px;
  }
  .cubx-pp-reass__item {
    padding: 6px 2px;
    gap: 4px;
  }
  .cubx-pp-reass__cube {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  .cubx-pp-reass__icon {
    font-size: 20px;
  }
  .cubx-pp-reass__label {
    font-size: 11px;
    line-height: 1.2;
  }
  .cubx-pp-reass__sub {
    font-size: 10px;
    line-height: 1.25;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Position context (info — pas d'effet visuel par défaut)
   La position est déjà gérée côté product.tpl (deux insertions conditionnelles).
   Le data-position permet juste un ciblage CSS futur si besoin (ex: ajuster
   le margin-top selon que le bloc suit la dispo ou le sharegate).
   ════════════════════════════════════════════════════════════════════ */
.cubx-pp-card--reass[data-position="after_share"] {
  margin-top: 12px;
}