/* =========================================================
   📄 /front/pages_blocks/home/badges_custom/badges_custom.css
   📌 Badges Custom — Capsules (HOME)
   КАНОН:
   - GEO = размеры
   - ЦВЕТА = CSS variables
   ========================================================= */



/* =========================================================
   SECTION
   ========================================================= */

.badges-custom{
  padding:var(--space-8) var(--space-4);
  
    margin-bottom:var(--space-12); /* ← ВОТ ЭТО */
}


/* =========================================================
   CONTAINER
   ========================================================= */

.badges-custom .container{
  max-width:1000px;
  margin:var(--space-3) auto;
}


/* =========================================================
   LIST
   ========================================================= */

.badges-custom__list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  column-gap:var(--space-3);
  row-gap:var(--space-4);
}


/* =========================================================
   BADGE CAPSULE — ГЕОМЕТРИЯ (GEO)
   ========================================================= */

.badge-capsule{
  /* масштаб */
  font-size:1.05rem;

  display:inline-flex;
  align-items:center;
  gap:0.6em;

  padding:0.55em 1.1em;
  border-radius:999px;

  line-height:1.2;
  white-space:nowrap;

  /* ЦВЕТА — ТОЛЬКО ПЕРЕМЕННЫЕ */
  background:var(--badge-bg, var(--color-surface-muted));
  color:var(--badge-fg, var(--color-fg));
  
background:var(--badge-bg);
color:var(--badge-fg);

border:1px solid var(--badge-border);

/*
box-shadow:
  0 0 0 2px color-mix(
    in srgb,
    var(--badge-border) 30%,
    transparent
  ),
  var(--shadow-sm);
*/

transition:
  transform .15s ease,
  background var(--transition-base),
  color var(--transition-base),
  border-color var(--transition-base);

}

.badge-capsule:hover{
  transform:translateY(-1px);
}


/* =========================================================
   ICON
   ========================================================= */

.badge-capsule__icon{
  width:1.1em;
  height:1.1em;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.badge-capsule__icon svg{
  width:100%;
  height:100%;
  display:block;
  fill:currentColor;
}


/* =========================================================
   TITLE
   ========================================================= */

.badge-capsule__title{
  display:flex;
  align-items:center;
  line-height:inherit;
}

.badge-capsule__title{
  transform:translateY(-0.03em);
}



/* =========================================================
   COLOR KEYS → VARIABLES (ИСТИННЫЙ ПАТТЕРН)
   ========================================================= */

/* trekking */
.badge-capsule[data-bg="trekking"]{
  --badge-bg: var(--color-trekking-bg);
}
.badge-capsule[data-border="trekking"]{
  --badge-border: var(--color-trekking-border);
}

/* expedition */
.badge-capsule[data-text="expedition"]{
  --badge-fg: var(--color-expedition-fg);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:640px){
  .badge-capsule{
    font-size:0.9rem;
  }

  .badges-custom{
    padding:var(--space-2) var(--space-1);
  }
}
/* =========================================================
   📄 /styles_core/front/ui/badge_color_map.css
   📌 Badge color mapping — CANON
   ---------------------------------------------------------
   JSON        → data-*
   data-*      → CSS vars (--badge-bg / fg / border)
   CSS vars    → :root (--badge-*)
   ========================================================= */


/* =========================================================
   BG (фон)
   ========================================================= */

.badge-capsule[data-bg="expedition"]{
  --badge-bg: var(--badge-expedition);
}

.badge-capsule[data-bg="autotour"]{
  --badge-bg: var(--badge-autotour);
}

.badge-capsule[data-bg="trekking"]{
  --badge-bg: var(--badge-trekking);
}

.badge-capsule[data-bg="hiking"]{
  --badge-bg: var(--badge-hiking);
}

.badge-capsule[data-bg="horse"]{
  --badge-bg: var(--badge-horse);
}

.badge-capsule[data-bg="jeep"]{
  --badge-bg: var(--badge-jeep);
}

.badge-capsule[data-bg="dogfriendly"]{
  --badge-bg: var(--badge-dogfriendly);
}

.badge-capsule[data-bg="direction"]{
  --badge-bg: var(--badge-direction);
}

.badge-capsule[data-bg="feminine"]{
  --badge-bg: var(--badge-feminine);
}

.badge-capsule[data-bg="sad"]{
  --badge-bg: var(--badge-sad);
}

.badge-capsule[data-bg="joy"]{
  --badge-bg: var(--badge-joy);
}


/* =========================================================
   TEXT (текст)
   ========================================================= */

.badge-capsule[data-text="expedition"]{
  --badge-fg: var(--badge-expedition);
}

.badge-capsule[data-text="autotour"]{
  --badge-fg: var(--badge-autotour);
}

.badge-capsule[data-text="trekking"]{
  --badge-fg: var(--badge-trekking);
}

.badge-capsule[data-text="hiking"]{
  --badge-fg: var(--badge-hiking);
}

.badge-capsule[data-text="horse"]{
  --badge-fg: var(--badge-horse);
}

.badge-capsule[data-text="jeep"]{
  --badge-fg: var(--badge-jeep);
}

.badge-capsule[data-text="dogfriendly"]{
  --badge-fg: var(--badge-dogfriendly);
}

.badge-capsule[data-text="direction"]{
  --badge-fg: var(--badge-direction);
}

.badge-capsule[data-text="feminine"]{
  --badge-fg: var(--badge-feminine);
}

.badge-capsule[data-text="sad"]{
  --badge-fg: var(--badge-sad);
}

.badge-capsule[data-text="joy"]{
  --badge-fg: var(--badge-joy);
}


/* =========================================================
   BORDER (рамка)
   ========================================================= */

.badge-capsule[data-border="expedition"]{
  --badge-border: var(--badge-expedition);
}

.badge-capsule[data-border="autotour"]{
  --badge-border: var(--badge-autotour);
}

.badge-capsule[data-border="trekking"]{
  --badge-border: var(--badge-trekking);
}

.badge-capsule[data-border="hiking"]{
  --badge-border: var(--badge-hiking);
}

.badge-capsule[data-border="horse"]{
  --badge-border: var(--badge-horse);
}

.badge-capsule[data-border="jeep"]{
  --badge-border: var(--badge-jeep);
}

.badge-capsule[data-border="dogfriendly"]{
  --badge-border: var(--badge-dogfriendly);
}

.badge-capsule[data-border="direction"]{
  --badge-border: var(--badge-direction);
}

.badge-capsule[data-border="feminine"]{
  --badge-border: var(--badge-feminine);
}

.badge-capsule[data-border="sad"]{
  --badge-border: var(--badge-sad);
}

.badge-capsule[data-border="joy"]{
  --badge-border: var(--badge-joy);
}