/* ==========================================================================
   MIBENO ICONS — customowy font ikonowy
   Przeniesiony 1:1 z motywu mibeno_woodmart-child.
   UWAGA: pliki fontu (mibeno-icons.woff2 / .woff / .ttf) muszą znaleźć się
   w katalogu ../font/ — skopiuj je z motywu:
   wp-content/themes/mibeno_woodmart-child/font/
   ========================================================================== */

@font-face {
  font-family: 'mibeno-icons';
  src: url('../fonts/mibeno/mibeno-icons.woff2?36537904') format('woff2'),
       url('../fonts/mibeno/mibeno-icons.woff?36537904') format('woff'),
       url('../fonts/mibeno/mibeno-icons.ttf?36537904') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "mibeno-icons";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- Glify (47) — mapa 1:1 z oryginału ----- */
.icon-s21:before { content: '\e800'; }
.icon-a1:before  { content: '\e801'; }
.icon-a2:before  { content: '\e802'; }
.icon-a3:before  { content: '\e803'; }
.icon-a4:before  { content: '\e804'; }
.icon-r1:before  { content: '\e805'; }
.icon-r2:before  { content: '\e806'; }
.icon-r3:before  { content: '\e807'; }
.icon-r4:before  { content: '\e808'; }
.icon-r5:before  { content: '\e809'; }
.icon-r6:before  { content: '\e80a'; }
.icon-r7:before  { content: '\e80b'; }
.icon-r8:before  { content: '\e80c'; }
.icon-r9:before  { content: '\e80d'; }
.icon-r10:before { content: '\e80e'; }
.icon-s1:before  { content: '\e80f'; }
.icon-s2:before  { content: '\e810'; }
.icon-s3:before  { content: '\e811'; }
.icon-s4:before  { content: '\e812'; }
.icon-s5:before  { content: '\e813'; }
.icon-s6:before  { content: '\e814'; }
.icon-s7:before  { content: '\e815'; }
.icon-s8:before  { content: '\e816'; }
.icon-s9:before  { content: '\e817'; }
.icon-s10:before { content: '\e818'; }
.icon-s11:before { content: '\e819'; }
.icon-s12:before { content: '\e81a'; }
.icon-s13:before { content: '\e81b'; }
.icon-s14:before { content: '\e81c'; }
.icon-s15:before { content: '\e81d'; }
.icon-s16:before { content: '\e81e'; }
.icon-s17:before { content: '\e81f'; }
.icon-s18:before { content: '\e820'; }
.icon-s19:before { content: '\e821'; }
.icon-s20:before { content: '\e822'; }
.icon-b1:before  { content: '\e823'; }
.icon-b2:before  { content: '\e824'; }
.icon-b3:before  { content: '\e825'; }
.icon-b4:before  { content: '\e826'; }
.icon-c1:before  { content: '\e827'; }
.icon-c2:before  { content: '\e828'; }
.icon-c3:before  { content: '\e829'; }
.icon-c4:before  { content: '\e82a'; }
.icon-d2:before  { content: '\e82b'; }
.icon-d1:before  { content: '\e82c'; }
.icon-e1:before  { content: '\e82d'; }
.icon-e2:before  { content: '\e82e'; }

/* ==========================================================================
   MODUŁ IKON — rozmiary, kolory, siatki graficzne
   Ikony projektowane są w kwadracie 1:1 lub prostokącie 1:2
   i można z nich składać siatki graficzne (dekoracje, ilustracje).
   ========================================================================== */

.icon { color: var(--accent, #427582); }

/* Rozmiary pojedynczej ikony */
.icon--sm { font-size: 24px; }
.icon--md { font-size: 40px; }   /* domyślny w icon-boxach */
.icon--lg { font-size: 64px; }
.icon--xl { font-size: 96px; }

/* Warianty kolorystyczne */
.icon--ink   { color: var(--ink, #000); }
.icon--white { color: #fff; }
.icon--soft  { color: var(--accent-soft, #62929d); }

/* --------------------------------------------------------------------------
   SIATKA IKON (icon-grid)
   Kontener dzielony na moduły o boku --cell; każda komórka mieści
   ikonę 1:1 (span 1) albo 1:2 (span 2 — poziomo lub pionowo).
   Przykład:
   <div class="icon-grid" style="--cols: 3">
     <i class="icon icon-s1"></i>
     <i class="icon icon-r3 icon-grid__wide"></i>
     <i class="icon icon-s5"></i>
     <i class="icon icon-r7 icon-grid__tall"></i>
   </div>
   -------------------------------------------------------------------------- */
.icon-grid {
  --cols: 3;
  --cell: 72px;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell);
  grid-auto-flow: dense;
}
.icon-grid > * {
  display: grid;
  place-items: center;
  font-size: calc(var(--cell) * 0.92);
  line-height: 1;
  overflow: hidden;
}
/* prostokąt 1:2 w poziomie */
.icon-grid__wide {
  grid-column: span 2;
  font-size: calc(var(--cell) * 0.92);
}
.icon-grid__wide:before { width: 2em; }
/* prostokąt 1:2 w pionie (obrót glifu poziomego) */
.icon-grid__tall {
  grid-row: span 2;
}
.icon-grid__tall:before {
  transform: rotate(90deg);
  width: 2em;
}
/* pusta komórka siatki */
.icon-grid__gap { visibility: hidden; }

/* Ramka/obrys pomocniczy przy projektowaniu siatek */
.icon-grid--debug > * { outline: 1px dashed rgba(66,117,130,.35); }