/*
 * ============================================================
 *  07 – KATEGORIE – STYL KARET (aktin-style)
 *  Projekt: PRIMAKOUPELNY.CZ
 *  Pořadí načítání: za 06-homepage.css
 *  Poslední revize: 2026-04
 * ============================================================
 *
 *  Komponenta: horizontální grid karet s obrázkem a popiskem,
 *  určená pro výpis stylů / podkategorií na stránkách kategorií.
 *
 *  Třídy:
 *    .aktin-style-grid      – flex kontejner (ul nebo div)
 *    .aktin-style-item      – jednotlivá položka (li nebo div)
 *    .aktin-style-link      – karta (odkaz <a>)
 *    .aktin-style-img-wrapper – obal pro obrázek
 *    .aktin-style-label     – textový popisek pod obrázkem
 *
 *  Breakpointy:
 *    Desktop (≥768px):  fixní šířka karty 112px, výška 145px
 *    Mobil   (≤767px):  3 karty v řadě (33.33%), výška 120px
 *
 *  Proměnné (využívá globální z 01-zaklad-typografie.css):
 *    --color-primary-bg:   #ecf5fe  ← pozadí karty (alias #eef5fd)
 *    --color-primary-hover: #D9EBFD ← hover pozadí karty
 *    --color-text:         #24242E  ← barva popisku
 *    --font-primary:       Poppins  ← font popisku
 * ============================================================
 */


/* =============================================================
   CSS PROMĚNNÉ – lokální pro aktin-style komponenty
   Hodnoty záměrně mapovány na globální projekt proměnné
   ============================================================= */

:root {
  --aktin-card-bg:        var(--color-primary-bg, #ecf5fe);
  --aktin-card-bg-hover:  var(--color-primary-hover, #D9EBFD);
  --aktin-card-radius:    10px;
  --aktin-card-w:         112px;
  --aktin-card-h:         145px;
  --aktin-img-h:          65px;
  --aktin-gap:            10px;
  --aktin-label-size:     12px;
  --aktin-label-color:    var(--color-text, #1a1a1a);

  /* Mobil */
  --aktin-card-h-mobile:  120px;
  --aktin-img-h-mobile:   50px;
  --aktin-gap-mobile:     6px;
  --aktin-label-size-mob: 10px;
}


/* =============================================================
   KONTEJNER
   ============================================================= */

.aktin-style-grid {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--aktin-gap);
  padding:         15px 0;
  list-style:      none;
  margin:          0;
  justify-content: flex-start;
}


/* =============================================================
   JEDNOTLIVÝ PRVEK
   ============================================================= */

.aktin-style-item {
  flex:          0 0 var(--aktin-card-w);
  margin-bottom: 5px !important;
}


/* =============================================================
   KARTA (ODKAZ)
   ============================================================= */

.aktin-style-link {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  background-color: var(--aktin-card-bg);
  border-radius:    var(--aktin-card-radius);
  padding:          12px 8px;
  height:           var(--aktin-card-h);
  text-decoration:  none !important;
  transition:       background-color 0.2s ease-in-out,
                    transform 0.2s ease-in-out,
                    border-color 0.2s ease-in-out;
  box-sizing:       border-box;
  border:           1px solid transparent;
}

.aktin-style-link:hover {
  background-color: var(--aktin-card-bg-hover);
  transform:        translateY(-2px);
}

/* Fokus přístupnost */
.aktin-style-link:focus-visible {
  outline:        2px solid var(--color-primary, #00a8ee);
  outline-offset: 2px;
  border-radius:  var(--aktin-card-radius);
}


/* =============================================================
   OBAL PRO OBRÁZEK
   ============================================================= */

.aktin-style-img-wrapper {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          var(--aktin-img-h);
  width:           100%;
  margin-bottom:   8px;
}

.aktin-style-img-wrapper img {
  max-height:  100%;
  max-width:   100%;
  object-fit:  contain;
  display:     block;
}


/* =============================================================
   TEXTOVÝ POPISEK
   ============================================================= */

.aktin-style-label {
  color:       var(--aktin-label-color);
  font-size:   var(--aktin-label-size);
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-weight: 700;
  text-align:  center;
  line-height: 1.2;
  margin:      0;
  word-wrap:   break-word;
  overflow-wrap: break-word;
}


/* =============================================================
   RESPONZIVITA – MOBIL (≤767px): 3 karty v řadě
   ============================================================= */

@media (max-width: 767px) {
  .aktin-style-grid {
    gap:              var(--aktin-gap-mobile);
    justify-content:  flex-start;
  }

  .aktin-style-item {
    flex:      0 0 calc(33.333% - 4px);
    min-width: 0;
  }

  .aktin-style-link {
    height:        var(--aktin-card-h-mobile);
    padding:       8px 4px;
    border-radius: 8px;
  }

  .aktin-style-img-wrapper {
    height: var(--aktin-img-h-mobile);
  }

  .aktin-style-label {
    font-size: var(--aktin-label-size-mob);
  }
}


/* =============================================================
   TAG – malý štítek (.tag-small)
   Použití: inline označení v textu nebo nadpisech
   ============================================================= */

.tag-small {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  padding:          5px 12px;
  font-family:      var(--font-primary, sans-serif);
  font-size:        9px;
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.5px;
  line-height:      1;
  color:            #1a1d23;
  background-color: #f5f5f5;
  border:           1px solid #e0e0e0;
  border-radius:    50px;
}

/* Odstraní výchozí mezery odstavce, pokud obsahuje pouze .tag-small */
p:has(> .tag-small) {
  margin-bottom: 0 !important;
  margin-top:    0 !important;
}