/* FABLE — stran »Izpostavitev oglasov« (page-top-si.php, p87; svetla izvedba V3 v produkciji od 2. 11. 2026): zgradba
   V1 (css/top-v1.css), a svetla. Tu so samo preglasitve pod .tp-light ter gumb in svetel zaključek (prej preizkušen
   na različici V2).
   Pasovi: uvod svetlo siv z vzorcem simbola v Ink, plošče predstavitev svetle, koraki in zaključek svetlo sivi, cenik
   bel. Barve po CGP thatbike: Ink #0A0A0A, Paper, sivine, lime samo kot signal. V temnem načinu pasovi sledijo
   spremenljivkam --tb-* (temna podlaga), plošče ostanejo Graphite kot na V1. */

.tb.tp-light {
  --tpl-band: #F5F5F4;
  --tpl-tile: #EFEFF0;
  --tpl-tile-rgb: 239 239 240;
  --tpl-best: #0A0A0A;
}

html[data-theme="dark"] .tb.tp-light {
  --tpl-band: var(--tb-band);
  --tpl-tile: #3A3A3A;
  --tpl-tile-rgb: 58 58 58;
  --tpl-best: #D4FF3A;
}

/* ---------- uvod: svetel pas, vzorec simbola Ink 1,75 % (Luka 2. 11.: pol manj izrazit) (CGP str. 10, isti zamik kot temni uvod V1) ---------- */
.tb.tp-light .ab-hero {
  background-color: var(--tpl-band);
  background-image:
    linear-gradient(to right, var(--tpl-band) 0%, transparent 14%, transparent 86%, var(--tpl-band) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.24 -6.9 260 72'%3E%3Cg opacity='.0175' fill='%230A0A0A' stroke='%230A0A0A' stroke-width='8' stroke-linejoin='round'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3Cg transform='translate(130 36)'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3C/g%3E%3Cg transform='translate(130 -36)'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

html[data-theme="dark"] .tb.tp-light .ab-hero {
  background-image:
    linear-gradient(to right, var(--tpl-band) 0%, transparent 14%, transparent 86%, var(--tpl-band) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.24 -6.9 260 72'%3E%3Cg opacity='.03' fill='%23FFFFFF' stroke='%23FFFFFF' stroke-width='8' stroke-linejoin='round'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3Cg transform='translate(130 36)'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3C/g%3E%3Cg transform='translate(130 -36)'%3E%3Cpath d='M10.24 48 L58 4 L58 48 Z'/%3E%3Cpath d='M121.26 -2.9 L73.5 41.1 L73.5 -2.9 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.tb.tp-light .tp-hero-h1 { color: var(--tb-ink-strong); }
.tb.tp-light .ab-hero-p { color: var(--tb-body); }

/* obljuba: Ink s podčrtovalcem Volt Lime (lime kot besedilo je na svetli podlagi neberljiv) */
.tb.tp-light .ab-hero-promise { color: var(--tb-ink-strong); }

.tb.tp-light .ab-hero-promise {
  display: inline;
  padding: 0 .06em;
  background: linear-gradient(transparent 58%, #D4FF3A 58%, #D4FF3A 92%, transparent 92%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.tb.tp-light .tp-hero-copy .ab-hero-promise { line-height: 1.5; }
.tb.tp-light .tp-hero-copy > .ab-hero-p { margin-bottom: 24px; }

html[data-theme="dark"] .tb.tp-light .ab-hero-promise { background: none; color: #D4FF3A; }

.tb.tp-light .tp-ghost {
  background: #E4E4E7;
  box-shadow: none;
}

html[data-theme="dark"] .tb.tp-light .tp-ghost { background: #2A2E33; }

.tb.tp-light .tp-card { box-shadow: 0 0 0 4px #D4FF3A, 0 24px 50px rgba(10, 10, 10, .14); }

/* ---------- predstavitve: bel pas, svetle plošče; sence ponazoritev mehkejše kot na temnih ploščah ---------- */
.tb.tp-light .tp-how { background: var(--tb-paper); padding-top: 24px; }

.tb.tp-light .ab-how .tb-tile-a .tb-tile-vis,
.tb.tp-light .ab-how .tb-tile-b .tb-tile-vis,
.tb.tp-light .ab-how .tb-tile-c .tb-tile-vis { background: var(--tpl-tile); }

.tb.tp-light .tp-row.is-top { box-shadow: 0 0 0 3px #D4FF3A, 0 20px 34px -14px rgba(10, 10, 10, .28); }
.tb.tp-light .tp-row { opacity: .6; box-shadow: 0 0 0 1px rgba(10, 10, 10, .04); }
.tb.tp-light .tp-row.is-top { opacity: 1; }
.tb.tp-light .tp-search { box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); }
.tb.tp-light .tp-home { box-shadow: 0 24px 44px -18px rgba(10, 10, 10, .26); }
.tb.tp-light .tp-msg > span { box-shadow: 0 10px 20px -12px rgba(10, 10, 10, .24); }

html[data-theme="dark"] .tb.tp-light .tp-row.is-top { box-shadow: 0 0 0 3px #D4FF3A, 0 24px 40px -12px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .tb.tp-light .tp-row { opacity: .5; }
html[data-theme="dark"] .tb.tp-light .tp-row.is-top { opacity: 1; }

/* ---------- koraki na svetlo sivem pasu, cenik na belem ---------- */
.tb.tp-light .tp-steps-sec { background: var(--tpl-band); }
.tb.tp-light #tp-cenik { background: var(--tb-paper); }

/* najugodnejša cena: obroba Ink namesto temne kartice (v temnem načinu obroba Volt Lime) */
.tb.tp-light .tp-price.is-best {
  background: var(--tb-card);
  box-shadow: inset 0 0 0 2px var(--tpl-best), 0 14px 32px rgba(10, 10, 10, .08);
  color: var(--tb-ink);
}

html[data-theme="dark"] .tb.tp-light .tp-price.is-best { background: var(--tb-card); box-shadow: inset 0 0 0 2px var(--tpl-best); }

.tb.tp-light .tp-price.is-best .tp-price-d { color: var(--tb-body); }
.tb.tp-light .tp-price.is-best .tp-price-u { color: var(--tb-muted); }

/* ---------- gumb in povezava (kot V2: Ink z lime puščico; v temnem načinu Volt Lime) ---------- */
.tb.tp-light .ab-out {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform .2s var(--tb-ease);
}

.tb .tp-btn,
.tb .tp-btn:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 12px;
  background: #0A0A0A;
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s var(--tb-ease);
}

.tb .tp-btn:hover { background: #262626; }
.tb .tp-btn:active { transform: scale(.98); }
.tb .tp-btn .ab-out { color: #D4FF3A; }

html[data-theme="dark"] .tb .tp-btn,
html[data-theme="dark"] .tb .tp-btn:hover { background: #D4FF3A; color: #0A0A0A; }
html[data-theme="dark"] .tb .tp-btn:hover { background: #C6F22C; }
html[data-theme="dark"] .tb .tp-btn .ab-out { color: #0A0A0A; }

.tb .tp-link,
.tb .tp-link:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--tb-ink-strong);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .25s var(--tb-ease);
}

.tb .tp-link:hover { background-size: 100% 1.5px; }

.tb .tp-btn:hover .ab-out,
.tb .tp-link:hover .ab-out { transform: translate(2px, -2px); }

.tb .tp-btn:focus-visible,
.tb .tp-link:focus-visible,
.tb .tp-end-foot a:focus-visible {
  outline: 2px solid #9FC400;
  outline-offset: 4px;
}

/* ---------- zaključek: svetlo siv pas, »hitrejšo« s podčrtovalcem Volt Lime (kot V2) ---------- */
.tb .tp-end {
  background: var(--tpl-band);
  text-align: center;
}

.tb .tp-end-h {
  margin: 0;
  font-family: var(--tb-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--tb-ink-strong);
  text-wrap: balance;
}

.tb .tp-end-h span {
  padding: 0 .06em;
  background: linear-gradient(transparent 60%, #D4FF3A 60%, #D4FF3A 92%, transparent 92%);
}

html[data-theme="dark"] .tb .tp-end-h span { background: none; color: #D4FF3A; }

.tb .tp-end-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  margin-top: 36px;
}

.tb .tp-end-foot {
  margin: 44px 0 0;
  font-size: 15px;
  color: var(--tb-muted);
}

.tb .tp-end-foot a,
.tb .tp-end-foot a:hover {
  font-weight: 600;
  color: var(--tb-ink-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .tb .tp-end-actions .tp-btn { width: 100%; }
}

@media (max-width: 560px) {
  .tb .tp-hero-actions .tp-btn { width: 100%; }
}