/* ==========================================================================
   components.css — gumbi, kartice orodij, drobtinice, obvestila
   ========================================================================== */

/* --- Gumbi -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { color: var(--btn-fg); border-color: var(--color-faint); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-on-primary);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  --btn-bg: var(--color-primary-dark);
  --btn-fg: #fff;
  border-color: var(--color-primary-dark);
}
.btn--ghost {
  --btn-bg: transparent;
  border-color: var(--color-border-strong);
}
.btn--block { width: 100%; }
.btn--lg { padding: 1rem 1.6rem; font-size: var(--text-base); }

.btn[disabled], .btn.is-loading { opacity: 0.7; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-on-primary);
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Besedilna povezava s puščico */
.text-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--color-primary); font-weight: 600; font-size: var(--text-sm);
}
.text-link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

/* --- Mreža orodij ------------------------------------------------------- */
.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* --- Kartica orodja (NE bootstrap kartica: subtilno, tipografsko) ------- */
.tool-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  color: var(--color-text);
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.tool-card:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  transform: translateY(-2px);
}
.tool-card__icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--color-primary);
}
.tool-card__icon svg { width: 22px; height: 22px; }
.tool-card__body { min-width: 0; flex: 1; }
.tool-card__title {
  display: block;              /* span -> blok, sicer se opis izpiše v isti vrstici */
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-snug);
  line-height: 1.3;
}
.tool-card__desc {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
  margin-top: 0.3rem;
}
.tool-card__arrow {
  flex: none;
  color: var(--color-faint);
  align-self: center;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tool-card__arrow svg { width: 18px; height: 18px; }
.tool-card:hover .tool-card__arrow { transform: translateX(3px); color: var(--color-primary); }

/* --- Uredniški seznam kategorij (tipografske povezave) ------------------ */
.category-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
}
.category-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.category-item:hover { color: var(--color-primary); }
.category-item__icon { color: var(--color-primary); flex: none; }
.category-item__icon svg { width: 20px; height: 20px; }
.category-item__name { font-weight: 600; font-size: var(--text-lg); }
.category-item__count { margin-left: auto; color: var(--color-faint); font-size: var(--text-sm); }

/* --- Drobtinice --------------------------------------------------------- */
.breadcrumbs { padding-top: var(--space-5); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.breadcrumbs li { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumbs a { color: var(--color-muted); font-size: var(--text-sm); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-size: var(--text-sm); }
.breadcrumbs .sep { color: var(--color-faint); }

/* --- Obvestila ---------------------------------------------------------- */
.notice {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* --- Oglasna mesta / affiliate ----------------------------------------- */
.ad-slot { margin-block: var(--space-5); }
.ad-slot:empty { display: none; }

/* --- Demo oglas (nadomestek za pregled postavitve) ----------------------
   Uporablja se, dokler ni pravih oglasov: pokaže, koliko prostora bo oglas
   zavzel in kako se stran ob njem obnaša. Namenoma NI slika in NI skript
   tretje osebe — pravne strani trdijo, da teh na portalu ni, in ta trditev
   mora ostati resnična tudi med preizkušanjem.
   Višino nastavi `--ad-h`, širino omeji `--ad-w`. */
.ad-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--ad-h, 90px);
  max-width: var(--ad-w, 728px);
  margin-inline: auto;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-medium);
  background: var(--color-surface-2);
  color: var(--color-faint);
  text-align: center;
}
.ad-demo__label { font-size: var(--text-sm); font-weight: 600; }
.ad-demo__size  { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* Na telefonu se visoki oglasi (npr. 336 × 280) ne smejo raztegniti čez zaslon. */
@media (max-width: 639px) {
  .ad-demo { max-width: 100%; }
}

.affiliate-block {
  margin-block: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}
.affiliate-block__tag {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.affiliate-block h3 { margin-top: var(--space-1); }
.affiliate-block p { color: var(--color-muted); margin-top: var(--space-2); }
.affiliate-block .btn { margin-top: var(--space-4); }
.affiliate-block__disc { font-size: var(--text-xs); color: var(--color-faint); margin-top: var(--space-3); }