/* =================================================================
   211 Design System — Components
   Maps existing intranet patterns to the 211 UI Kit.
   Requires tokens.css to be loaded first.
   ================================================================= */

/* ------------------------------------------------------------------
   Typography classes
   ------------------------------------------------------------------ */
.t-h2  { font: var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-display); color: var(--text-primary); letter-spacing: -0.01em; }
.t-h4  { font: var(--fw-bold) var(--fs-h4)/var(--lh-h4) var(--font-display); color: var(--text-primary); }
.t-h6  { font: var(--fw-bold) var(--fs-h6)/var(--lh-h6) var(--font-display); color: var(--text-primary); }
.t-h7  { font: var(--fw-bold) var(--fs-h7)/var(--lh-h7) var(--font-display); color: var(--text-primary); }
.t-body       { font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font-body); color: var(--text-primary); }
.t-body-bold  { font: var(--fw-bold)     var(--fs-body)/var(--lh-body) var(--font-body); color: var(--text-primary); }
.t-label      { font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-body); color: var(--text-primary); }
.t-muted      { color: var(--text-secondary); }
.t-eyebrow {
  font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-gray-500);
}

/* ------------------------------------------------------------------
   Button — pill, M (48) and S (40)
   Source: /UI-Kit/Tla-tka
     Primary  = "Hlavní"    (bg primary, white text)
     Subtle   = "Doplňkové" (bg gray-100, primary text)
     Outline  = "Sekundární" (3px border)
     Text     = "Textové"   (transparent, primary text)
     Danger   = derived for destructive action (Smazat)
   ------------------------------------------------------------------ */
.btn {
  --_h: var(--control-h-m);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--_h);
  padding: 0 var(--s-6);
  border: 0;
  border-radius: var(--r-pill);
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
  white-space: nowrap;
}
.btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.btn--s { --_h: var(--control-h-s); padding: 0 var(--s-5); font-size: var(--fs-body); }

/* Variants */
.btn--primary {
  background: var(--c-primary);
  color: var(--text-onbrand);
}
.btn--primary:hover  { background: var(--c-primary-hover); }
.btn--primary:active { background: var(--c-primary-deep); }
.btn--primary[disabled],
.btn--primary.is-disabled { background: var(--c-gray-300); color: var(--c-white); cursor: not-allowed; }

.btn--subtle {
  background: var(--c-gray-100);
  color: var(--c-primary);
}
.btn--subtle:hover { background: var(--c-primary-100); }

.btn--outline {
  background: var(--c-white);
  color: var(--c-primary);
  box-shadow: inset 0 0 0 3px var(--c-primary);
}
.btn--outline:hover { background: var(--c-primary-100); }

.btn--text {
  background: transparent;
  color: var(--c-primary);
  padding: 0 var(--s-3);
}
.btn--text:hover { color: var(--c-primary-hover); text-decoration: underline; text-underline-offset: 4px; }

.btn--danger {
  background: var(--c-danger);
  color: var(--text-onbrand);
}
.btn--danger:hover  { background: var(--c-danger-soft); }
.btn--danger:active { background: #D85A5A; }

/* Iconography slot inside a button */
.btn .ico { width: 20px; height: 20px; display: inline-block; }

/* ------------------------------------------------------------------
   Input / Textarea
   Source: /UI-Kit/Textov-pole
   ------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--s-3); }
.field__label-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
}
.field__label  { font: var(--fw-bold) var(--fs-label)/1 var(--font-body); color: var(--c-primary-deep); }
.field__req    { font: var(--fw-bold) var(--fs-label)/1 var(--font-body); color: var(--c-danger); }

.input,
.textarea {
  display: flex; align-items: center;
  width: 100%;
  height: var(--control-h-m);
  padding: 0 var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  color: var(--c-primary-deep);
  outline: 0;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.input::placeholder,
.textarea::placeholder { color: var(--c-primary-200); }
.input:hover, .textarea:hover { border-color: var(--c-primary); }
.input:focus, .textarea:focus { border-color: var(--c-primary); box-shadow: var(--shadow-focus); }
.input[disabled], .textarea[disabled] {
  background: var(--c-gray-50);
  color: var(--c-primary-200);
  cursor: not-allowed;
}
.field.is-error .input,
.field.is-error .textarea { border-color: var(--c-danger); }
.field.is-error .field__label { color: var(--c-danger); }

.textarea { height: auto; min-height: 176px; padding: var(--s-3) var(--s-5); align-items: flex-start; }

/* ------------------------------------------------------------------
   Checkbox
   Source: /UI-Kit/Za-krt-vac-pole
   ------------------------------------------------------------------ */
.checkbox {
  display: inline-flex; align-items: center; gap: var(--s-3);
  cursor: pointer;
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  color: var(--c-primary-deep);
  user-select: none;
}
.checkbox__box {
  width: 22px; height: 22px;
  border: 1.5px solid var(--c-primary-200);
  border-radius: 6px;
  background: var(--c-white);
  display: inline-grid; place-items: center;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.checkbox__box::after {
  content: ""; width: 12px; height: 12px;
  background: var(--c-white);
  clip-path: polygon(14% 49%, 0 63%, 38% 100%, 100% 24%, 87% 13%, 38% 73%);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox input:checked + .checkbox__box { background: var(--c-primary); border-color: var(--c-primary); }
.checkbox input:checked + .checkbox__box::after { transform: scale(1); }
.checkbox:hover .checkbox__box { border-color: var(--c-primary); }

/* ------------------------------------------------------------------
   Tag / Chip
   Source: /UI-Kit/t-tky  (Štítky)
   ------------------------------------------------------------------ */
.tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font: var(--fw-bold) var(--fs-label)/1 var(--font-body);
  letter-spacing: 0;
}
.tag--active   { background: var(--c-primary-100); color: var(--c-primary); }
.tag--inactive { background: var(--c-gray-100);    color: var(--c-gray-500); }
.tag--success  { background: #E0F8E6;              color: #1F8A3F; }
.tag--warning  { background: #FFE9D6;              color: #B86A1E; }
.tag--danger   { background: #FBE0E0;              color: #B23A3A; }

/* ------------------------------------------------------------------
   Card
   Source: /UI-Kit/Karty
   ------------------------------------------------------------------ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
}
.card--flush  { padding: 0; }
.card--raised { box-shadow: var(--shadow-2); }

.card__header { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.card__meta   { display: flex; align-items: center; gap: var(--s-3); color: var(--text-secondary); font-size: var(--fs-label); }
.card__title  { font: var(--fw-bold) var(--fs-h7)/1.3 var(--font-display); color: var(--text-primary); margin: var(--s-2) 0 var(--s-3); }
.card__body   { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* Title-less post: the opening line of the body acts as the headline.
   No separate title field — author just starts writing. */
.card__post   { margin: var(--s-2) 0 0; }
.card__post .lead {
  display: block;
  font: var(--fw-bold) var(--fs-h7)/1.35 var(--font-display);
  color: var(--text-primary);
}
.card__post .cont {
  color: var(--text-primary); font-weight: var(--fw-semibold);
  margin-top: var(--s-2);
}
/* Collapsed/preview state: clamp the running text under the lead */
.card__post .cont--clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__footer { display: flex; gap: var(--s-3); margin-top: var(--s-5); }

/* Pinned variant: a highlighted card — accent-tinted surface, accent border,
   raised elevation, and a labelled badge. No gradient strip. */
.card--pinned {
  position: relative;
  background: var(--c-primary-100);
  border-color: var(--c-primary);
  box-shadow: var(--shadow-2);
}

.pin-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; flex: 0 0 auto;
  height: 24px; padding: 0 11px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  font: var(--fw-bold) 11px/1 var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.pin-badge::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3l7 7-4 1-3 3v3l-2 2-4-4-4 4v-2l4-4-4-4 2-2h3l3-3 2-1z' fill='black'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3l7 7-4 1-3 3v3l-2 2-4-4-4 4v-2l4-4-4-4 2-2h3l3-3 2-1z' fill='black'/></svg>") no-repeat center / contain;
}
/* Legacy hook: hide any leftover corner-pin span from old markup. */
.card__pin { display: none; }

/* ------------------------------------------------------------------
   Sidebar panel — used for KATEGORIE and RYCHLÉ ODKAZY
   ------------------------------------------------------------------ */
.panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-5) var(--s-6);
}
.panel__title {
  font: var(--fw-bold) var(--fs-label)/1 var(--font-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-gray-500);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-gray-100);
}
.panel__list { display: flex; flex-direction: column; gap: var(--s-3); }

/* Quick link inside RYCHLÉ ODKAZY */
.qlink {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2);
  border-radius: var(--r-sm);
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  color: var(--c-primary-deep);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.qlink:hover { background: var(--c-primary-100); color: var(--c-primary); }
.qlink--manage { color: var(--c-gray-500); font-weight: var(--fw-semibold); }

/* Category list item with checkbox */
.cat-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
}
.cat-item:hover { background: var(--c-primary-100); }
.cat-item.is-selected { background: var(--c-primary-100); }
.cat-item.is-selected::before {
  content: ""; position: absolute; left: -20px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px; background: var(--c-primary);
}

/* ------------------------------------------------------------------
   Top bar — brand band + secondary nav band
   ------------------------------------------------------------------ */
.brandbar {
  background: var(--c-primary-deep);
  color: var(--c-white);
  padding: var(--s-5) var(--s-7);
  display: flex; align-items: center; gap: var(--s-6);
}
.brandbar__logo {
  display: flex; align-items: center; gap: var(--s-5);
  font: var(--fw-bold) var(--fs-h4)/1 var(--font-display);
}
.brandbar__divider { width: 1px; height: 36px; background: rgba(255,255,255,0.25); }
.brandbar__product {
  font: var(--fw-bold) var(--fs-label)/1 var(--font-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.navbar {
  background: var(--c-primary);
  color: var(--c-white);
  padding: 0 var(--s-7);
  height: 56px;
  display: flex; align-items: center;
}
.navbar__title { font: var(--fw-bold) var(--fs-body)/1 var(--font-body); color: var(--c-white); }
.navbar__links { margin-left: auto; display: flex; align-items: center; gap: var(--s-7); }
.navbar__link {
  color: var(--c-white);
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--dur-base) var(--ease);
}
.navbar__link:hover, .navbar__link.is-active { opacity: 1; }
.navbar .btn--outline {
  background: transparent;
  color: var(--c-white);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.9);
  height: 40px; padding: 0 var(--s-5);
}
.navbar .btn--outline:hover { background: rgba(255,255,255,0.10); }

/* Grouped dropdown nav (js/nav.js parity) */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd__btn {
  background: transparent; border: 0; cursor: pointer;
  height: 56px; padding: 0; display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-white); opacity: 0.85;
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  transition: opacity var(--dur-base) var(--ease);
}
.nav-dd:hover .nav-dd__btn,
.nav-dd.is-active .nav-dd__btn,
.nav-dd.is-open .nav-dd__btn { opacity: 1; }
.nav-dd .caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.8; transition: transform var(--dur-fast) var(--ease);
}
.nav-dd.is-open .caret { transform: rotate(180deg); }
.nav-dd__menu {
  position: absolute; top: 100%; right: 0; margin-top: 6px; min-width: 184px;
  display: none; flex-direction: column; gap: 2px;
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px; z-index: 200;
}
.nav-dd.is-open .nav-dd__menu { display: flex; }
.nav-dd__menu a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--text-primary); text-decoration: none; white-space: nowrap;
  font: var(--fw-semibold) var(--fs-label)/1.2 var(--font-body);
}
.nav-dd__menu a:hover { background: var(--c-primary-100); color: var(--c-primary); }
.nav-dd__menu a.is-current { background: var(--c-primary); color: var(--text-onbrand); }

/* ------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------ */
.app          { min-height: 100vh; background: var(--surface-app); }
.app__main    { max-width: var(--container); margin: 0 auto; padding: var(--s-8) var(--s-7); }
.layout-3col  { display: grid; grid-template-columns: 240px 1fr 240px; gap: var(--s-7); align-items: start; }

/* Responsive (spec §06): below ~980px the 3-col grid collapses to a single
   column, ordered feed → filters → quick links; the nav wraps. */
@media (max-width: 980px) {
  .app__main   { padding: var(--s-6) var(--s-5); }
  .layout-3col { grid-template-columns: 1fr; gap: var(--s-5); }
  .layout-3col > :nth-child(1) { order: 2; } /* filters */
  .layout-3col > :nth-child(2) { order: 1; } /* feed */
  .layout-3col > :nth-child(3) { order: 3; } /* quick links */
  .navbar       { height: auto; flex-wrap: wrap; padding: var(--s-2) var(--s-5); row-gap: 0; }
  .navbar__links { gap: var(--s-4); flex-wrap: wrap; }
}

.page-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.page-title   { font: var(--fw-bold) var(--fs-h4)/1.2 var(--font-display); color: var(--text-primary); }
.post-list    { display: flex; flex-direction: column; gap: var(--s-5); }

/* ── Pill menu (filter nav + segmented pickers) ── */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill     { border: 1px solid var(--border-divider); background: var(--c-white); color: var(--text-primary); border-radius: var(--r-pill); padding: 7px 14px; font: var(--fw-semibold) var(--fs-cap-13)/1 var(--font-body); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pill:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pill.is-on { background: var(--c-primary); border-color: var(--c-primary); color: var(--text-onbrand); }

/* ── Page builder (display) ── */
.pb-page        { max-width: 880px; margin: 0 auto; }
.pb-page__title { font: var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-display); color: var(--text-primary); margin: 0 0 var(--s-5); letter-spacing: -.01em; }
.pb-section     { margin: 0 0 var(--s-4); }
.pb-row         { display: grid; gap: var(--s-4); }
.pb-row[data-cols="1"] { grid-template-columns: 1fr; }
.pb-row[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.pb-row[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
.pb-para        { margin: 0; font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body); color: var(--text-primary); }
.pb-list        { margin: 0; padding-left: 1.25em; font: var(--fw-regular) var(--fs-body)/1.7 var(--font-body); color: var(--text-primary); }
/* Strict block dimensions: the image fills its aspect-ratio box on the longer
   axis and the overflow is cropped, regardless of the source proportions. */
.pb-block--image     { overflow: hidden; border-radius: var(--r-md); background: var(--c-gray-100); }
.pb-block--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .pb-row { grid-template-columns: 1fr !important; } }