/* ===== Ток – общ стил (veliko.info) =====
   Цветовете НЕ са тук: всяка страница ги задава в своя <style> като --bg, --surface, --fg, --muted,
   --accent, --on-accent, --gold, --chip, --frame, --shade, --shade-soft, --tag-on-image.
   Оформление: един екран — горна лента с раздели, вертикален поток от карти (9:16 на компютър), долна лента. */
:root{
  --on-image:#fbf4e8;
  --display:"Yeseva One", "Georgia", "Times New Roman", serif;
  --body:"Golos Text", "Segoe UI", system-ui, sans-serif;
}
html,body{height:100%;margin:0}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;overflow:hidden}
.app{height:100%;display:grid;grid-template-rows:auto 1fr auto;
  width:min(100%, calc(100dvh * 9 / 16));margin-inline:auto;background:var(--bg)}
/* На широк екран: колона с пропорции на телефон (9:16), както в TikTok */
@media (min-width: 640px){
  body{background:var(--frame)}
  .app{box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 30%,transparent),0 20px 60px rgba(0,0,0,.35)}
}
header{
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:10px 8px;
  display:flex;flex-direction:column;gap:8px;
  border-bottom:1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  background:var(--bg);z-index:5;min-width:0;
}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand h1{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:0;letter-spacing:.01em}
.brand h1 b{color:var(--accent);font-weight:400}
.brand span{color:var(--muted);font-size:.82rem}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chipbar{position:relative;display:flex;align-items:center;gap:6px;min-width:0}
.chipbar .chips{flex:1;min-width:0}
.arrow{
  flex:none;width:32px;height:32px;border-radius:50%;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  background:var(--surface);color:var(--fg);font:600 1.1rem/1 var(--body);cursor:pointer;
  display:none;align-items:center;justify-content:center;padding:0
}
.arrow:disabled{opacity:.3;cursor:default}
.arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .arrow{display:inline-flex} }
.foot{
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:8px calc(8px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;
  border-top:1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  background:var(--bg);font-size:.8rem;color:var(--muted);min-width:0
}
.foot a{color:var(--fg);text-decoration:none;font-weight:600}
.foot a:hover{text-decoration:underline}
.foot a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.foot .home{color:var(--accent)}
.foot .links{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center}
.foot .hub{display:inline-flex;align-items:center;gap:5px}
.foot .hub::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--gold);
  box-shadow:4px 4px 0 -1px color-mix(in srgb,var(--gold) 55%,transparent)}
.chip{
  flex:none;border:1px solid transparent;background:var(--chip);color:var(--fg);
  font:500 .85rem/1 var(--body);padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap
}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.chip:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.feed{overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;min-height:0}
.card{
  position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;container-type:size;
  background:var(--surface);
}
.card .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:100%}
.card.has-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--shade) 0%,var(--shade) 32%,var(--shade-soft) 62%,transparent 85%);
}
.letter{
  position:absolute;top:8%;right:max(16px, env(safe-area-inset-right,0px));
  font-family:var(--display);font-size:min(46cqw,18rem);line-height:1;
  color:color-mix(in srgb,var(--gold) 22%,transparent);user-select:none
}
.body{
  position:relative;z-index:1;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:20px 22px;display:flex;flex-direction:column;gap:12px;max-width:42rem;min-width:0
}
.has-img .body{color:var(--on-image)}
.tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600}
.has-img .tag{color:var(--tag-on-image)}
.card h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,8cqw,2.4rem);line-height:1.1;margin:0;text-wrap:balance}
.card p{margin:0;font-size:1.06rem;line-height:1.55;max-width:62ch;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
/* Трите бутона са винаги на един ред: делят ширината, падингите се свиват на тесен екран */
.card .actions{display:flex;gap:6px;flex-wrap:nowrap!important;min-width:0}
.card .actions .btn{white-space:nowrap;flex:1 1 auto;justify-content:center;min-width:0;
  padding:9px 8px;font-size:.82rem;                                         /* за по-стари браузъри */
  padding:9px clamp(6px,2.5cqw,12px);font-size:clamp(.8rem,3.6cqw,.9rem)}   /* за нови браузъри */
.card .actions .btn.primary{flex-grow:1.4}
.btn{
  font:600 .9rem/1 var(--body);padding:11px 14px;border-radius:10px;cursor:pointer;
  border:1px solid currentColor;background:transparent;color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px
}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.state{align-items:center;justify-content:center;text-align:center}
.state .body{align-items:center}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--chip);border-top-color:var(--accent);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none}.feed{scroll-behavior:auto}}

/* На тесен екран лентата остава на един ред: лицензът се крие (всяка карта има връзка към източника) */
.app{container-type:inline-size}
@container (max-width: 440px){ .foot .lic{display:none} .foot{gap:6px 10px} .foot .links{gap:6px 10px} }