/* 09-buttons.css — solid-ink primary + ghost-underline secondary + tabs + filters. */

.tl-btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ink);
  color: var(--c-bone);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 13px 28px;
  border-radius: var(--r-md);
  border: none;
  text-decoration: none;
  transition: background var(--t-fast);
  white-space: nowrap;
}
.tl-btn-solid:hover {
  background: var(--c-ox);
  color: var(--c-bone);
  text-decoration: none;
}

.tl-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 12px 24px;
  border: 1px solid var(--c-ink);
  border-radius: var(--r-md);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.tl-btn-ghost:hover {
  background: var(--c-ink);
  color: var(--c-bone);
  text-decoration-thickness: 2px;
}

/* Tabs — ink-pen slanted underline (Phartenaas signature) */
.tl-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tl-tabs__btn {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  padding: 12px 0;
  margin-right: 32px;
  position: relative;
  background: transparent;
  border: none;
  color: var(--c-ink-muted);
  cursor: pointer;
}
.tl-tabs__btn:last-child { margin-right: 0; }

.tl-tabs__btn:hover { color: var(--c-ink); }

.tl-tabs__btn[aria-selected="true"] {
  color: var(--c-ink);
}
.tl-tabs__btn[aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-ox);
  transform: skewX(-12deg);
  transform-origin: left bottom;
}

.tl-tabs__panel {
  display: none;
  animation: tl-fade var(--t-mid) var(--ease-soft);
}
.tl-tabs__panel[data-active="true"] { display: block; }

@keyframes tl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Filters — inline tekst z hairline separators (NIE pills) */
.tl-filters {
  display: flex;
  gap: 0;
  align-items: center;
  font-family: var(--f-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tl-filters__item {
  padding: 8px 16px;
  color: var(--c-ink-muted);
  cursor: pointer;
  border: none;
  background: transparent;
}
.tl-filters__item + .tl-filters__item {
  border-left: 1px solid var(--c-stone);
}
.tl-filters__item:hover { color: var(--c-ink); }
.tl-filters__item[aria-pressed="true"] {
  color: var(--c-ox);
  font-weight: 500;
}

/* FAQ accordion */
.tl-faq {
  border-top: 1px solid var(--c-line);
  margin-top: 24px;
}
.tl-faq__item { border-bottom: 1px solid var(--c-line); }
.tl-faq__btn {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--c-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
.tl-faq__chevron {
  transition: transform var(--t-mid);
  font-size: 0.9rem;
  color: var(--c-ink-muted);
}
.tl-faq__btn[aria-expanded="true"] .tl-faq__chevron {
  transform: rotate(180deg);
}
.tl-faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-soft);
}
.tl-faq__btn[aria-expanded="true"] + .tl-faq__panel {
  max-height: 600px;
}
.tl-faq__panel-inner {
  padding: 0 0 20px;
  font-size: var(--f-body-s);
  color: var(--c-ink-muted);
  line-height: 1.7;
}