/* ==========================================================
   CENTRÁLNÍ TYPOGRAFIE + DESIGN SYSTEM  - tstbhg
   Joomla 5/6 + Cassiopeia + Bootstrap 5
   ========================================================== */

/* ==========================================================
   1) TYPOGRAPHY SCALE
   Design source:
   Desktop:
     H1 96/84, H1.2 84/74, H2 64/64, H3 48/48, H4 36/36
     S1 32/40, S2 24/32, S3 18/26
     B1 16/24, C1 14/22, C2 12/20, Label 12/20, Button 12/20
   Mobile:
     H1 64/52, H1.2 48/40, H2 36/36
     S1 24/32, S2 18/26
     B1 16/24, C1 14/22, C2 12/20, Label 12/20, Button 12/20
   Fluid range:
     360px → 1200px
   ========================================================== */

:root{
  /* Fluid helpers */
  --typo-vw-min: 360;
  --typo-vw-max: 1200;
  /* Safe fluid range helpers (pro stabilitu ve vypoctech) */
  --typo-from: 360px;
  --typo-to: 1200px;
  --typo-range: 840px;

  /* Headings */
  --typo-h1-fs:  clamp(64px, calc(50.285714286px + 3.80952381vw), 96px);
  --typo-h1-lh:  clamp(52px, calc(38.285714286px + 3.80952381vw), 84px);

  /* “H1.2” */
  --typo-h12-fs: clamp(48px, calc(32.571428571px + 4.285714286vw), 84px);
  --typo-h12-lh: clamp(40px, calc(25.428571429px + 4.047619048vw), 74px);

  --typo-h2-fs:  clamp(36px, calc(24px + 3.333333333vw), 64px);
  --typo-h2-lh:  clamp(36px, calc(24px + 3.333333333vw), 64px);

  /* H3/H4 – rozumné minimum na mobile */
  --typo-h3-fs:  clamp(28px, calc(19.428571429px + 2.380952381vw), 48px);
  --typo-h3-lh:  clamp(28px, calc(19.428571429px + 2.380952381vw), 48px);

  --typo-h4-fs:  clamp(22px, calc(16px + 1.666666667vw), 36px);
  --typo-h4-lh:  clamp(22px, calc(16px + 1.666666667vw), 36px);

  /* Subtitles */
  --typo-s1-fs:  clamp(24px, calc(20.571428571px + 0.952380952vw), 32px);
  --typo-s1-lh:  clamp(32px, calc(28.571428571px + 0.952380952vw), 40px);

  --typo-s2-fs:  clamp(18px, calc(15.428571429px + 0.714285714vw), 24px);
  --typo-s2-lh:  clamp(26px, calc(23.428571429px + 0.714285714vw), 32px);

  --typo-s3-fs:  clamp(16px, calc(15.142857143px + 0.238095238vw), 18px);
  --typo-s3-lh:  clamp(24px, calc(23.142857143px + 0.238095238vw), 26px);

  --typo-b2-fs: clamp(16px, calc(14.591549296px + 0.375586854vw), 20px);
  --typo-b2-lh: clamp(24px, calc(22.591549296px + 0.375586854vw), 28px);
  /* Body / Captions / Label / Button */
  --typo-b1-fs:  16px;
  --typo-b1-lh:  24px;

  --typo-c1-fs:  14px;
  --typo-c1-lh:  22px;

  --typo-c2-fs:  12px;
  --typo-c2-lh:  20px;

  --typo-label-fs: 12px;
  --typo-label-lh: 20px;

  --typo-btn-fs:  12px;
  --typo-btn-lh:  20px;

  /* Global letter spacing */
  --typo-letter-spacing: 0;

  /* Weights */
  --typo-w-head: 700;
  --typo-w-sub:  600;
  --typo-w-body: 400;
  --typo-w-ui:   500;

  /* Bootstrap base body */
  --bs-body-font-size: var(--typo-b1-fs);
  --bs-body-line-height: 1.5; /* 24/16 */
}
:root{
  --space-2r: clamp(1.25rem, calc(0.928571429rem + 1.428571429vw), 2rem);
}
/* Element defaults (headings) */
h1, .h1{
  font-size: var(--typo-h1-fs);
  line-height: var(--typo-h1-lh);
  letter-spacing: var(--typo-letter-spacing);
  font-weight: var(--typo-w-head);
}
h2, .h2{
  font-size: var(--typo-h2-fs);
  line-height: var(--typo-h2-lh);
  letter-spacing: var(--typo-letter-spacing);
  font-weight: var(--typo-w-head);
}
h3, .h3{
  font-size: var(--typo-h3-fs);
  line-height: var(--typo-h3-lh);
  letter-spacing: var(--typo-letter-spacing);
  font-weight: var(--typo-w-head);
}
h4, .h4{
  font-size: var(--typo-h4-fs);
  line-height: var(--typo-h4-lh);
  letter-spacing: var(--typo-letter-spacing);
  font-weight: var(--typo-w-head);
}
.ff-body{ font-family: var(--cassiopeia-font-family-body) !important; }
.ff-head{ font-family: var(--cassiopeia-font-family-headings) !important; }

/* Utility classes (doporučené používání) */
.typo-h1,h1{  font-size: var(--typo-h1-fs);  line-height: var(--typo-h1-lh);  font-weight: var(--typo-w-head); letter-spacing: var(--typo-letter-spacing); }
.typo-h12{ font-size: var(--typo-h12-fs); line-height: var(--typo-h12-lh); font-weight: var(--typo-w-head); letter-spacing: var(--typo-letter-spacing); }
.typo-h2{  font-size: var(--typo-h2-fs);  line-height: var(--typo-h2-lh);  font-weight: var(--typo-w-head); letter-spacing: var(--typo-letter-spacing); }
.typo-h3,h2{  font-size: var(--typo-h3-fs);  line-height: var(--typo-h3-lh);  font-weight: var(--typo-w-head); letter-spacing: var(--typo-letter-spacing); }
.typo-h4{  font-size: var(--typo-h4-fs);  line-height: var(--typo-h4-lh);  font-weight: var(--typo-w-sub); letter-spacing: var(--typo-letter-spacing); }

.typo-s1{  font-size: var(--typo-s1-fs);  line-height: var(--typo-s1-lh);  font-weight: var(--typo-w-sub);  letter-spacing: var(--typo-letter-spacing); }
.typo-s2{  font-size: var(--typo-s2-fs);  line-height: var(--typo-s2-lh);  font-weight: var(--typo-w-sub);  letter-spacing: var(--typo-letter-spacing); }
.typo-s3{  font-size: var(--typo-s3-fs);  line-height: var(--typo-s3-lh);  font-weight: var(--typo-w-sub);  letter-spacing: var(--typo-letter-spacing); }

.typo-b1{  font-size: var(--typo-b1-fs);  line-height: var(--typo-b1-lh);  font-weight: var(--typo-w-body); letter-spacing: var(--typo-letter-spacing); }
.typo-c1{  font-size: var(--typo-c1-fs);  line-height: var(--typo-c1-lh);  font-weight: var(--typo-w-body); letter-spacing: var(--typo-letter-spacing); }
.typo-c2{  font-size: var(--typo-c2-fs);  line-height: var(--typo-c2-lh);  font-weight: var(--typo-w-body); letter-spacing: var(--typo-letter-spacing); }

.typo-label{ font-size: var(--typo-label-fs); line-height: var(--typo-label-lh); font-weight: var(--typo-w-ui); letter-spacing: var(--typo-letter-spacing); }
.typo-btn{   font-size: var(--typo-btn-fs);   line-height: var(--typo-btn-lh);   font-weight: var(--typo-w-ui); letter-spacing: var(--typo-letter-spacing); }

/* Small text helper */
.small, small{
  font-size: var(--typo-c2-fs);
  line-height: var(--typo-c2-lh);
}

/* Form labels */
.form-label,
.control-label,
.form-check-label{
  font-size: var(--typo-label-fs);
  line-height: var(--typo-label-lh);
  font-weight: var(--typo-w-ui);
}
/* =========================================
   Border radius – design systém override
   ========================================= */

/* 8px */
.rounded-4{
  border-radius: 8px !important;
}

/* 16px */
.rounded-5{
  border-radius: 16px !important;
}

/* ==========================================================
   2) DESIGN SYSTEM
   ========================================================== */

:root{
  /* ======================================================
     Base surfaces
     ====================================================== */
  --c-surface: #FAF6EE;
  --c-canvas:  #F1E5CB;
  --c-paper:   #F2EBE4;

  /* ======================================================
     Golden Grain (warm) 50–400
     ====================================================== */
  --c-grain-50:  #FAF6EE;
  --c-grain-100: #F1E5CB;
  --c-grain-200: #EAD8B4;
  --c-grain-300: #DDC186;
  --c-grain-400: #CFA752;

  /* ======================================================
     Golden Grain (muted) 50–400
     ====================================================== */
  --c-grain2-50:  #F7F4ED;
  --c-grain2-100: #E6DDCA;
  --c-grain2-200: #DCCEB3;
  --c-grain2-300: #C6B184;
  --c-grain2-400: #AD8F4F;

  /* ======================================================
     Ember Orange 50–400
     ====================================================== */
  --c-ember-50:  #FDEEEB;
  --c-ember-100: #F9CDC3;
  --c-ember-200: #F5B8A9;
  --c-ember-300: #F08972;
  --c-ember-400: #EA5736;

  /* ======================================================
     Heritage Red 50–400
     ====================================================== */
  --c-heritage-50:  #F4EBEA;
  --c-heritage-100: #DFC2C1;
  --c-heritage-200: #D2AAA6;
  --c-heritage-300: #B3726D;
  --c-heritage-400: #93352F;

  /* ======================================================
     Deep Merlot 50–400
     ====================================================== */
  --c-merlot-50:  #EEE9EA;
  --c-merlot-100: #CDBDBF;
  --c-merlot-200: #BAA3A4;
  --c-merlot-300: #8B656A;
  --c-merlot-400: #5A232A;

  /* ======================================================
     Forest Black 50–400
     ====================================================== */
  --c-forest-50:  #E5EBE9;
  --c-forest-100: #B2C3BE;
  --c-forest-200: #97ABA2;
  --c-forest-300: #4D7366;
  --c-forest-400: #003725;

  /* ======================================================
     Semantic tokens
     ====================================================== */
  --color-bg:           var(--c-surface);
  --color-bg-alt:       var(--c-canvas);
  --color-surface:      var(--c-surface);

  --color-border:       color-mix(in srgb, var(--c-merlot-400) 18%, transparent);
  --color-text:         color-mix(in srgb, var(--c-merlot-400) 92%, #000);
  --color-text-muted:   color-mix(in srgb, var(--c-merlot-400) 65%, transparent);

  /* Default “primary” (pokud nechceš, aby byl merlot, změň tady) */
  --color-primary:      var(--c-merlot-400);
  --color-primary-weak: var(--c-merlot-100);
  --color-accent:       var(--c-ember-400);

  --color-success:      #137333;
  --color-info:         #1E88A8;
  --color-warning:      #F5A000;
  --color-danger:       #D93025;

  --on-primary:         var(--c-surface);
  --on-accent:          var(--c-surface);

  /* ======================================================
     Radius
     ====================================================== */
  --radius-card: 16px;

  /* ======================================================
     Focus ring
     ====================================================== */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-ember-400) 35%, transparent);

  /* ======================================================
     Shadow
     ====================================================== */
  --shadow-1: 0 0 20px color-mix(in srgb, #93352F 15%, transparent);

  /* ======================================================
     Misc / compatibility tokens
     ====================================================== */
  --secondary-color: var(--c-merlot-300);

  /* ======================================================
     Derived helpers (project-specific)
     ====================================================== */
  /* rgba(147, 53, 47, 0.10) */
  --bg-heritage-08: color-mix(in srgb, var(--c-heritage-400) 8%, transparent);
  --bg-heritage-10: color-mix(in srgb, var(--c-heritage-400) 10%, transparent);

  /* rgba(231, 210, 202, 1) */
  --c-heritage-50-warm: #E7D2CA;
}


/* ----------------------------------------------------------
   2b) COLOR UTILITIES (bg/text) – rychlé použití ve view
   ---------------------------------------------------------- */

/* Background utilities */
.bg-surface{ background-color: var(--c-surface) !important; }          /* #FAF6EE */
.bg-canvas{  background-color: var(--c-canvas) !important; }           /* #F1E5CB */
.bg-paper{   background-color: var(--c-paper) !important; }            /* #F2EBE4 */

.bg-merlot-400{   background-color: var(--c-merlot-400) !important; }  /* #5A232A */
.bg-merlot-300{   background-color: var(--c-merlot-300) !important; }  /* #8B656A */

.bg-heritage-400{ background-color: var(--c-heritage-400) !important; }/* #93352F */
.bg-heritage-10{  background-color: var(--bg-heritage-10) !important; }/* heritage 10% */
.bg-heritage-warm{background-color: var(--c-heritage-50-warm) !important; } /* #E7D2CA */

/* Text utilities */
.text-surface{ color: var(--c-surface) !important; }
.text-canvas{  color: var(--c-canvas) !important; }
.text-paper{   color: var(--c-paper) !important; }

.text-merlot-300{   color: var(--c-merlot-300) !important; }
.text-merlot-400{   color: var(--c-merlot-400) !important; }
.text-heritage-400{ color: var(--c-heritage-400) !important; }
.text-heritage-60{ color: color-mix(in srgb, var(--c-heritage-400) 60%, transparent) !important;  }

.text-canvas-80{
  color: color-mix(in srgb, var(--c-canvas) 80%, transparent) !important;
}
.text-canvas-60{
  color: color-mix(in srgb, var(--c-canvas) 60%, transparent);
}
.text-opacity-70{ opacity: .7; }

/* Border utilities (doplňkové – často se hodí) */
.border-heritage-400{ border-color: var(--c-heritage-400) !important; }
.border-merlot-400{   border-color: var(--c-merlot-400) !important; }
.border-canvas{       border-color: var(--c-canvas) !important; }
.border-paper{        border-color: var(--c-paper) !important; }

/* Base surface */
body{
  background: var(--color-bg);
  color: var(--color-text);
}

/* Cards */
.card,
.container-component,
.com-content-article{
  border-radius: var(--radius-card);
}
/* ==========================================================
   GLOBAL LINKS (a) – like buttons (default/hover/focus/disabled)
   Applies to all <a> without needing classes.
   Excludes buttons and typical UI link components.
   ========================================================== */

:root{
  --link-color: var(--c-heritage-400);      /* rgba(147,53,47,1) */
  --link-hover: var(--c-merlot-400);        /* rgba(90,35,42,1)  */
  --link-disabled: color-mix(in srgb, var(--c-heritage-400) 40%, transparent); /* rgba(147,53,47,0.4) */
  --link-focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-heritage-400) 60%, transparent); /* rgba(147,53,47,0.6) */
}

/* všechno <a>, ale NE tlačítka a NE některé UI prvky */
a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item-action){
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  transition: color .15s ease, text-decoration-color .15s ease, box-shadow .15s ease;
}

a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item-action):hover{
  color: var(--link-hover);
}

a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item-action):focus,
a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item-action):focus-visible{
  outline: none;
  color: var(--link-color);
  box-shadow: var(--link-focus-ring);
  border-radius: 6px; /* aby ring vypadal dobře */
}

/* “disabled link” – HTML <a> nemá disabled, řeší se aria/třídou */
a.is-disabled,
a[aria-disabled="true"]{
  color: var(--link-disabled);
  pointer-events: none;
  cursor: not-allowed;
  text-decoration-color: transparent;
  box-shadow: none;
}

/* ==========================================================
   3) BUTTONS (CASSIOPEIA SAFE – nepoužíváme .btn-primary)
   Použití jen přes tvoje třídy:
   - typ:     .btn-heritage / .btn-ember / .btn-grain
   - varianta .btn-fill / .btn-outline / .btn-soft
   ========================================================== */

/* ==========================================================
   BUTTON SYSTEM (Cassiopeia/BS5)
   - Base: .btn
   - Families (color): .btn-heritage / .btn-ember / .btn-grain  -> sets --btn-color
   - Types (3): .btn-fill / .btn-outline / .btn-soft
   - Special pattern: .btn-canvas (light pill on canvas)
   ========================================================== */

/* ==========================================================
   BUTTON SYSTEM (Cassiopeia/BS5) – FIXED
   - řeší "mizící pozadí" při držení myši (a.btn:active v BS5)
   - sjednocený focus/disabled (bez duplicit)
   - kompatibilní pro <a class="btn"> i <button class="btn">
   - ALIAS: .btn-primary => .btn-heritage .btn-fill
            .btn-outline-secondary => .btn-heritage .btn-outline
   ========================================================== */

/* Families – nastaví barvu tlačítka */
.btn-heritage{ --btn-color: var(--c-heritage-400); }
.btn-ember{    --btn-color: var(--c-ember-400); }
.btn-grain{    --btn-color: var(--c-grain-400); }

/* ==========================================================
   Bootstrap alias – FAMILY mapping (jen barva)
   - aby .btn-primary a .btn-outline-secondary jely jako "heritage"
   ========================================================== */
.btn.btn-primary,
.btn.btn-outline-secondary{
  --btn-color: var(--c-heritage-400);
}

/* Base .btn (Figma: h=44, r=40, py=12, px=24, gap=10) */
.btn{
  /* Typography */
  font-size: var(--typo-btn-fs);
  line-height: var(--typo-btn-lh);
  font-weight: var(--typo-w-ui);
  letter-spacing: var(--typo-letter-spacing);
  text-transform: uppercase;
  text-align: center;

  /* Shape & spacing */
  border-radius: 40px;
  padding: 12px 24px;
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* Neutral base */
  border: 1px solid transparent;
  background-color: transparent;
  background-image: none;
  color: inherit;

  box-shadow: none;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .05s ease;
}

/* ==========================================================
   Focus + Disabled (sjednocené)
   ========================================================== */
.btn:focus{ outline: none; }

.btn:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"]{
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* ==========================================================
   TYPE 1: Filled (1-color)
   Použití: .btn .btn-heritage .btn-fill
   Alias:   .btn .btn-primary
   ========================================================== */

.btn-fill,
.btn.btn-primary{
  /* Bootstrap compatibility (BS5 používá tyto proměnné v :active) */
  --bs-btn-bg: var(--btn-color, var(--color-primary));
  --bs-btn-border-color: var(--btn-color, var(--color-primary));
  --bs-btn-color: var(--c-canvas);

  --bs-btn-hover-bg: var(--c-merlot-400);
  --bs-btn-hover-border-color: var(--c-merlot-400);
  --bs-btn-hover-color: var(--c-canvas);

  --bs-btn-active-bg: var(--c-merlot-400);
  --bs-btn-active-border-color: var(--c-merlot-400);
  --bs-btn-active-color: var(--c-canvas);

  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}

.btn-fill:hover,
.btn.btn-primary:hover{
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

.btn-fill:active,
.btn-fill.active,
.btn-fill:active:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:active:focus{
  /* !important = pojistka proti a.btn:active z BS/Cassiopeia */
  background-color: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
  color: var(--bs-btn-active-color) !important;
  background-image: none !important;
}

/* Fill focus – Figma: border 3px ring (bez box-shadow) */
.btn-fill:focus,
.btn-fill:focus-visible,
.btn.btn-primary:focus,
.btn.btn-primary:focus-visible{
  box-shadow: none;
  border-width: 3px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 60%, transparent);
}

/* disabled */
.btn-fill:disabled,
.btn-fill.disabled,
.btn-fill[aria-disabled="true"],
.btn.btn-primary:disabled,
.btn.btn-primary.disabled,
.btn.btn-primary[aria-disabled="true"]{
  background-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 40%, transparent);
  border-color: transparent;
  color: var(--c-canvas);
}

/* Merlot fill (speciální varianta) */
.btn-fill-merlot{
  --bs-btn-bg: var(--c-merlot-400);
  --bs-btn-border-color: var(--c-merlot-400);
  --bs-btn-color: var(--c-canvas);

  --bs-btn-hover-bg: var(--c-heritage-400);
  --bs-btn-hover-border-color: var(--c-merlot-400);
  --bs-btn-hover-color: var(--c-canvas);

  --bs-btn-active-bg: var(--c-heritage-400);
  --bs-btn-active-border-color: var(--c-merlot-400);
  --bs-btn-active-color: var(--c-canvas);

  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}

.btn-fill-merlot:hover{
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

.btn-fill-merlot:active,
.btn-fill-merlot.active,
.btn-fill-merlot:active:focus{
  background-color: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
  color: var(--bs-btn-active-color) !important;
  background-image: none !important;
}

.btn-fill-merlot:focus,
.btn-fill-merlot:focus-visible{
  box-shadow: none;
  border-width: 3px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--c-merlot-400) 60%, transparent);
}

/* ==========================================================
   TYPE 2: Outline (2-color)
   Použití: .btn .btn-heritage .btn-outline
   Alias:   .btn .btn-outline-secondary
   ========================================================== */

.btn-outline,
.btn.btn-outline-secondary{
  --bs-btn-color: var(--btn-color, var(--color-primary));
  --bs-btn-border-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 55%, transparent);

  --bs-btn-hover-bg: color-mix(in srgb, var(--btn-color, var(--color-primary)) 10%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 65%, transparent);
  --bs-btn-hover-color: var(--btn-color, var(--color-primary));

  --bs-btn-active-bg: color-mix(in srgb, var(--btn-color, var(--color-primary)) 14%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 75%, transparent);
  --bs-btn-active-color: var(--btn-color, var(--color-primary));

  background-color: transparent;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
}

.btn-outline:hover,
.btn.btn-outline-secondary:hover{
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

.btn-outline:active,
.btn-outline.active,
.btn-outline:active:focus,
.btn.btn-outline-secondary:active,
.btn.btn-outline-secondary.active,
.btn.btn-outline-secondary:active:focus{
  background-color: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
  color: var(--bs-btn-active-color) !important;
  background-image: none !important;
}

.btn-outline:disabled,
.btn-outline.disabled,
.btn-outline[aria-disabled="true"],
.btn.btn-outline-secondary:disabled,
.btn.btn-outline-secondary.disabled,
.btn.btn-outline-secondary[aria-disabled="true"]{
  color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 35%, transparent);
  border-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 20%, transparent);
}

/* ==========================================================
   TYPE 3: Soft/Ghost (3-color)
   Použití: .btn .btn-heritage .btn-soft
   ========================================================== */

.btn-soft{
  --bs-btn-bg: color-mix(in srgb, var(--btn-color, var(--color-primary)) 12%, transparent);
  --bs-btn-color: var(--btn-color, var(--color-primary));

  --bs-btn-hover-bg: color-mix(in srgb, var(--btn-color, var(--color-primary)) 16%, transparent);
  --bs-btn-hover-color: var(--btn-color, var(--color-primary));

  --bs-btn-active-bg: color-mix(in srgb, var(--btn-color, var(--color-primary)) 20%, transparent);
  --bs-btn-active-color: var(--btn-color, var(--color-primary));

  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
  border-color: transparent;
}

.btn-soft:hover{
  background-color: var(--bs-btn-hover-bg);
  color: var(--bs-btn-hover-color);
  box-shadow: var(--shadow-1);
}

.btn-soft:active,
.btn-soft.active,
.btn-soft:active:focus{
  background-color: var(--bs-btn-active-bg) !important;
  color: var(--bs-btn-active-color) !important;
  background-image: none !important;
}

.btn-soft:disabled,
.btn-soft.disabled,
.btn-soft[aria-disabled="true"]{
  background-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 6%, transparent);
  color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 35%, transparent);
  border-color: transparent;
}

/* ==========================================================
   HERITAGE – Soft (Figma exact, bez stínu)
   btn btn-heritage btn-soft
   ========================================================== */
.btn-heritage.btn-soft:hover{
  box-shadow: none;
}

/* ==========================================================
   BUTTON – Heritage 10% (soft surface variant)
   Použití: btn btn-heritage-10
   ========================================================== */

.btn-heritage-10{
  --bs-btn-bg: var(--bg-heritage-10);
  --bs-btn-color: var(--c-heritage-400);
  --bs-btn-border-color: transparent;

  --bs-btn-hover-bg: color-mix(in srgb, var(--c-heritage-400) 16%, transparent);
  --bs-btn-hover-color: var(--c-heritage-400);

  --bs-btn-active-bg: color-mix(in srgb, var(--c-heritage-400) 20%, transparent);
  --bs-btn-active-color: var(--c-heritage-400);

  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
}

.btn-heritage-10:hover{
  background-color: var(--bs-btn-hover-bg);
  color: var(--bs-btn-hover-color);
}

.btn-heritage-10:active,
.btn-heritage-10.active,
.btn-heritage-10:active:focus{
  background-color: var(--bs-btn-active-bg) !important;
  color: var(--bs-btn-active-color) !important;
  background-image: none !important;
}

.btn-heritage-10:focus,
.btn-heritage-10:focus-visible{
  box-shadow: none;
  border-width: 3px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--c-heritage-400) 60%, transparent);
}

.btn-heritage-10:disabled,
.btn-heritage-10.disabled,
.btn-heritage-10[aria-disabled="true"]{
  background-color: color-mix(in srgb, var(--c-heritage-400) 6%, transparent);
  color: color-mix(in srgb, var(--c-heritage-400) 35%, transparent);
  border-color: transparent;
}

/* ==========================================================
   SPECIAL: Canvas button (Figma exact)
   btn btn-heritage btn-canvas
   ========================================================== */

.btn.btn-canvas{
  --bs-btn-bg: var(--c-canvas);
  --bs-btn-color: var(--c-heritage-400);
  --bs-btn-border-color: transparent;

  --bs-btn-hover-bg: #E8DBBF;
  --bs-btn-hover-color: var(--c-heritage-400);

  --bs-btn-active-bg: #E8DBBF;
  --bs-btn-active-color: var(--c-heritage-400);

  background-color: var(--bs-btn-bg);
  background-image: none;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
}

.btn.btn-canvas:hover{
  background-color: var(--bs-btn-hover-bg);
  color: var(--bs-btn-hover-color);
  border-color: transparent;
}

.btn.btn-canvas:active,
.btn.btn-canvas.active,
.btn.btn-canvas:active:focus{
  background-color: var(--bs-btn-active-bg) !important;
  color: var(--bs-btn-active-color) !important;
  background-image: none !important;
}

/* Canvas focus = hover (jak máš v systému) */
.btn.btn-canvas:focus,
.btn.btn-canvas:focus-visible{
  box-shadow: none;
  border: 1px solid transparent;
  background-color: var(--bs-btn-hover-bg);
  color: var(--bs-btn-hover-color);
}

.btn.btn-canvas:disabled,
.btn.btn-canvas.disabled,
.btn.btn-canvas[aria-disabled="true"]{
  background-color: var(--c-canvas);
  color: var(--c-heritage-400);
  border-color: transparent;
}
/* Icon in button */
.btn .btn-icon,
.btn .icon{
  inline-size: 16px;
  block-size: 16px;
  vertical-align: -0.15em;
}
/* =========================
   BADGES (pill 32) – quick semantic variants
   ========================= */
.badge-merlot{
  background: var(--c-merlot-400); /* rgba(90,35,42,1) */
  color: var(--c-canvas);
}
/* Badge / Chip (32px pill) */
.badge-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  border-radius: 30px;

  background: color-mix(in srgb, var(--c-merlot-200) 30%, transparent); /* ~ rgba(205,189,191,0.3) */
  color: var(--c-merlot-400); /* rgba(90,35,42,1) */

  font-family: var(--cassiopeia-font-family-body); /* Inter Tight */
  font-size: var(--typo-c2-fs);   /* 12px (clamp) */
  line-height: var(--typo-c2-lh);
  font-weight: 500;              /* Medium (typicky pro badge) */
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
/* ==========================================================
   4) ALERTS
   ========================================================== */

.alert{
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: none;
}
.alert--default{
  background: color-mix(in srgb, var(--c-heritage-400) 18%, transparent);
  border-color: color-mix(in srgb, var(--c-heritage-400) 28%, transparent);
  color: var(--color-text);
}
.alert--success{
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 26%, transparent);
  color: color-mix(in srgb, var(--color-success) 55%, #000);
}
.alert--info{
  background: color-mix(in srgb, var(--color-info) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 26%, transparent);
  color: color-mix(in srgb, var(--color-info) 55%, #000);
}
.alert--warning{
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
  color: color-mix(in srgb, var(--color-warning) 55%, #000);
}
.alert--error{
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 26%, transparent);
  color: color-mix(in srgb, var(--color-danger) 55%, #000);
}

/* ==========================================================
   5) TOOLTIP (BS)
   ========================================================== */

.tooltip .tooltip-inner{
  background: var(--color-primary);
  color: var(--on-primary);
  border-radius: 10px;
  padding: .45rem .6rem;
  box-shadow: var(--shadow-1);
}
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before{
  border-top-color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  border-left-color: var(--color-primary);
  border-right-color: var(--color-primary);
}

/* =========================================================
   PAGINATION (override jen pro .pagination__wrapper)
   - pill vzhled jako mockup
   - hover pouze na klikací (ne .disabled, ne .active, ne href="#")
   - používá tvoje tokeny/typografii
   ========================================================= */

.pagination__wrapper{
  /* velikosti */
  --pg-size: 16px; /* fallback kdyby prohlížeč neznal clamp apod. */
  --pg-h: 44px;
  --pg-radius: 10px;
  --pg-gap: .5rem;

  /* barvy z tvého design systému */
  --pg-text: var(--color-text-muted);
  --pg-hover-bg: var(--c-grain2-100);   /* jemná světlá "pill" na hover */
  --pg-active-bg: var(--color-primary);
  --pg-active-text: var(--on-primary);
  --pg-disabled-text: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.pagination__wrapper .pagination{
  gap: var(--pg-gap);
  align-items: center;
}

/* BS5 reset + tvoje typografie */
.pagination__wrapper .page-link{
  border: 1px solid transparent;
  background: transparent;
  color: var(--pg-text);

  min-height: var(--pg-h);
  min-width: var(--pg-h);
  padding: 0 14px;

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

  border-radius: var(--pg-radius);
  box-shadow: none;

  /* využij "UI" typografii (label/button) */
  font-size: var(--typo-label-fs);
  line-height: var(--typo-label-lh);
  font-weight: var(--typo-w-ui);
  letter-spacing: var(--typo-letter-spacing);
  text-decoration: none;

  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}

/* Hover jen na klikací:
   - ne disabled
   - ne active
   - ne href="#" (u tebe je current page href="#") */
.pagination__wrapper .page-item:not(.disabled):not(.active) .page-link[href]:not([href="#"]):hover{
  background: var(--pg-hover-bg);
  color: var(--color-text);
}

/* Active (selected) */
.pagination__wrapper .page-item.active .page-link{
  background: var(--pg-active-bg);
  color: var(--pg-active-text);
  border-color: transparent;
}

/* Disabled */
.pagination__wrapper .page-item.disabled .page-link,
.pagination__wrapper .page-item.disabled span.page-link{
  color: var(--pg-disabled-text);
  background: transparent;
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

/* Fokus – použij tvůj focus ring token */
.pagination__wrapper .page-item:not(.disabled) .page-link:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* jemné "pressed" jen na klikací */
.pagination__wrapper .page-item:not(.disabled):not(.active) .page-link[href]:not([href="#"]):active{
  transform: translateY(1px);
}

/* ikonové šipky (Joomla icon-* span) */
.pagination__wrapper .page-link [class^="icon-"],
.pagination__wrapper .page-link [class*=" icon-"]{
  font-size: 18px;
  line-height: 1;
}

/* první/druhá + poslední/druhá od konce (šipky) jako čtverce */
.pagination__wrapper .page-item:first-child .page-link,
.pagination__wrapper .page-item:nth-child(2) .page-link,
.pagination__wrapper .page-item:nth-last-child(2) .page-link,
.pagination__wrapper .page-item:last-child .page-link{
  padding: 0;
  width: var(--pg-h);
}


/* ==========================================================
   7) CHECKBOX
   ========================================================== */

.form-check-input{
  width: 1rem;
  height: 1rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  background-color: transparent;
  box-shadow: none;
}
.form-check-input:focus{
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  box-shadow: var(--focus-ring);
}
.form-check-input:checked{
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-check-input:indeterminate{
  background-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  border-color: var(--color-primary);
}
.form-check-input:disabled{
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* ==========================================================
   8) UTILITIES
   ========================================================== */

.u-shadow-1{ box-shadow: var(--shadow-1) !important; }
.u-radius-card{ border-radius: var(--radius-card) !important; }

/* ==========================================================
   9) ICON SIZES
   ========================================================== */

.icon{ inline-size: 16px; block-size: 16px; }
.icon-10{ inline-size: 10px; block-size: 10px; }
.icon-12{ inline-size: 12px; block-size: 12px; }
.icon-16{ inline-size: 16px; block-size: 16px; }
.icon-40{ inline-size: 40px; block-size: 40px; }

/* ============================================================
   Fluid spacing override pro Bootstrap utility (1..5 + gap)
   - Desktop (>= 992px): BS velikosti zachovány (resp. naše maxy)
   - Pod 992px: plynule zmenšuje až k minům (cca 320px)
   Centrální ladění: --space-5-max a --space-5-min
   ============================================================ */

:root {
  /* Breakpointy pro interpolaci (můžeš změnit) */
  --fluid-from: 320px;   /* úzký mobil */
  --fluid-to:   992px;   /* hranice lg (>=992 desktop) */

  --fluid-range: 672px; /* 992-320 (pro stabilni deleni) */

  /* Jediné, co typicky budeš ladit: */
  --space-5-max: 48px;  /* desktop velikost pro “5” */
  --space-5-min:  25px;  /* mobilní velikost pro “5” */
  --space-6-max: 96px;  /* desktop velikost pro “5” */
  --space-6-min:  50px;  /* mobilní velikost pro “5” */

  /* Proporce podle Bootstrap spacing škály (5=3rem; 4=1.5; 3=1; 2=.5; 1=.25) */
  --k-5: 1;
  --k-4: 0.5;          /* 1.5 / 3 */
  --k-3: 0.3333333;    /* 1 / 3 */
  --k-2: 0.1666667;    /* 0.5 / 3 */
  --k-1: 0.0833333;    /* 0.25 / 3 */
  /* Firefox-safe fluid spacing (původní výsledek zachován; bez dělení délkami) */
  --space-6: clamp(3rem, calc(1.571428571rem + 7.142857143vw), 6rem);
  --space-5: clamp(25px, calc(14.047619048px + 3.422619048vw), 48px);
  --space-4: clamp(12.5px, calc(7.023809524px + 1.711309524vw), 24px);
  --space-3: clamp(8.333333333px, calc(4.682539683px + 1.140873016vw), 16px);
  --space-2: clamp(4.166666667px, calc(2.341269841px + 0.570436508vw), 8px);
  --space-1: clamp(2.083333333px, calc(1.170634921px + 0.285218254vw), 4px);
}

/* Přepisujeme jen pod 992px (desktop necháváme být) */
.p-6  { padding: var(--space-6-max) !important; }
.px-6 { padding-left: var(--space-6-max) !important; padding-right: var(--space-6-max) !important; }
.py-6 { padding-top: var(--space-6-max) !important; padding-bottom: var(--space-6-max) !important; }
.pt-6 { padding-top: var(--space-6-max) !important; }
.pb-6 { padding-bottom: var(--space-6-max) !important; }
.ps-6 { padding-left: var(--space-6-max) !important; }
.pe-6 { padding-right: var(--space-6-max) !important; }

/* (pokud chceš i margin) */
.m-6  { margin: var(--space-6-max) !important; }
.mx-6 { margin-left: var(--space-6-max) !important; margin-right: var(--space-6-max) !important; }
.my-6 { margin-top: var(--space-6-max) !important; margin-bottom: var(--space-6-max) !important; }
.mt-6 { margin-top: var(--space-6-max) !important; }
.mb-6 { margin-bottom: var(--space-6-max) !important; }
.ms-6 { margin-left: var(--space-6-max) !important; }
.me-6 { margin-right: var(--space-6-max) !important; }

/* (pokud chceš i gap-6) */
.gap-6 { gap: var(--space-6) !important; }
.row-gap-6 { row-gap: var(--space-6-max) !important; }
.column-gap-6 { column-gap: var(--space-6-max) !important; }

@media (max-width: 991.98px) {
    .p-6  { padding: var(--space-6) !important; }
  .px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .pt-6 { padding-top: var(--space-6) !important; }
  .pb-6 { padding-bottom: var(--space-6) !important; }
  .ps-6 { padding-left: var(--space-6) !important; }
  .pe-6 { padding-right: var(--space-6) !important; }
    .m-6  { margin: var(--space-6) !important; }
  .mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
  .mt-6 { margin-top: var(--space-6) !important; }
  .mb-6 { margin-bottom: var(--space-6) !important; }
  .ms-6 { margin-left: var(--space-6) !important; }
  .me-6 { margin-right: var(--space-6) !important; }

  .gap-6 { gap: var(--space-6) !important; }
  .row-gap-6 { row-gap: var(--space-6) !important; }
  .column-gap-6 { column-gap: var(--space-6) !important; }
  /* ====== MARGINS 5..1 ====== */
  .m-5  { margin: var(--space-5) !important; }
  .mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
  .mt-5 { margin-top: var(--space-5) !important; }
  .mb-5 { margin-bottom: var(--space-5) !important; }
  .ms-5 { margin-left: var(--space-5) !important; }
  .me-5 { margin-right: var(--space-5) !important; }

  .m-4  { margin: var(--space-4) !important; }
  .mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .mt-4 { margin-top: var(--space-4) !important; }
  .mb-4 { margin-bottom: var(--space-4) !important; }
  .ms-4 { margin-left: var(--space-4) !important; }
  .me-4 { margin-right: var(--space-4) !important; }

  .m-3  { margin: var(--space-3) !important; }
  .mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
  .mt-3 { margin-top: var(--space-3) !important; }
  .mb-3 { margin-bottom: var(--space-3) !important; }
  .ms-3 { margin-left: var(--space-3) !important; }
  .me-3 { margin-right: var(--space-3) !important; }

  .m-2  { margin: var(--space-2) !important; }
  .mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
  .mt-2 { margin-top: var(--space-2) !important; }
  .mb-2 { margin-bottom: var(--space-2) !important; }
  .ms-2 { margin-left: var(--space-2) !important; }
  .me-2 { margin-right: var(--space-2) !important; }

  .m-1  { margin: var(--space-1) !important; }
  .mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
  .mt-1 { margin-top: var(--space-1) !important; }
  .mb-1 { margin-bottom: var(--space-1) !important; }
  .ms-1 { margin-left: var(--space-1) !important; }
  .me-1 { margin-right: var(--space-1) !important; }


  /* ====== PADDINGS 5..1 ====== */

    /* 1) Desktop default (platí všude, pokud nepřepíše media query) */


  .p-5  { padding: var(--space-5) !important; }
  .px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
  .pt-5 { padding-top: var(--space-5) !important; }
  .pb-5 { padding-bottom: var(--space-5) !important; }
  .ps-5 { padding-left: var(--space-5) !important; }
  .pe-5 { padding-right: var(--space-5) !important; }

  .p-4  { padding: var(--space-4) !important; }
  .px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .pt-4 { padding-top: var(--space-4) !important; }
  .pb-4 { padding-bottom: var(--space-4) !important; }
  .ps-4 { padding-left: var(--space-4) !important; }
  .pe-4 { padding-right: var(--space-4) !important; }

  .p-3  { padding: var(--space-3) !important; }
  .px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .pt-3 { padding-top: var(--space-3) !important; }
  .pb-3 { padding-bottom: var(--space-3) !important; }
  .ps-3 { padding-left: var(--space-3) !important; }
  .pe-3 { padding-right: var(--space-3) !important; }

  .p-2  { padding: var(--space-2) !important; }
  .px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .pt-2 { padding-top: var(--space-2) !important; }
  .pb-2 { padding-bottom: var(--space-2) !important; }
  .ps-2 { padding-left: var(--space-2) !important; }
  .pe-2 { padding-right: var(--space-2) !important; }

  .p-1  { padding: var(--space-1) !important; }
  .px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
  .py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
  .pt-1 { padding-top: var(--space-1) !important; }
  .pb-1 { padding-bottom: var(--space-1) !important; }
  .ps-1 { padding-left: var(--space-1) !important; }
  .pe-1 { padding-right: var(--space-1) !important; }


  /* ====== GAP (Bootstrap .gap-1..5) ====== */
  .gap-5 { gap: var(--space-5) !important; }
  .gap-4 { gap: var(--space-4) !important; }
  .gap-3 { gap: var(--space-3) !important; }
  .gap-2 { gap: var(--space-2) !important; }
  .gap-1 { gap: var(--space-1) !important; }

  /* (Volitelně) i row/column gap pokud používáš */
  .row-gap-5 { row-gap: var(--space-5) !important; }
  .row-gap-4 { row-gap: var(--space-4) !important; }
  .row-gap-3 { row-gap: var(--space-3) !important; }
  .row-gap-2 { row-gap: var(--space-2) !important; }
  .row-gap-1 { row-gap: var(--space-1) !important; }

  .column-gap-5 { column-gap: var(--space-5) !important; }
  .column-gap-4 { column-gap: var(--space-4) !important; }
  .column-gap-3 { column-gap: var(--space-3) !important; }
  .column-gap-2 { column-gap: var(--space-2) !important; }
  .column-gap-1 { column-gap: var(--space-1) !important; }
}