/* ============================================================
   BIRO 404 — R12 /izrada-sajtova/ PHASE 1B-A sections (isolated)
   Business-tool message · Od pretrage do upita · Component spotlight
   · Poslovni vs Premium · external references. Reuses site tokens.
   ============================================================ */

/* ---------------------------------------------------------------
   1. SAJT KAO POSLOVNI ALAT (business-tool message)
   --------------------------------------------------------------- */
.biz-lead{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,3vw,3rem);align-items:center}
.biz-lead .biz-say{font-family:var(--font-display);text-transform:uppercase;font-weight:400;line-height:1.02;
  font-size:clamp(1.6rem,3.2vw,2.4rem);color:var(--text)}
.biz-lead .biz-say .am{color:var(--accent)}
.biz-lead p{color:var(--silver);line-height:1.62;margin-top:1rem;font-size:1.02rem}
.biz-points{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.6rem}
.biz-point{display:flex;gap:.7rem;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:.9rem 1rem}
.biz-point svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:.1rem}
.biz-point b{display:block;color:var(--text);font-size:.95rem;font-weight:600;margin-bottom:.15rem}
.biz-point span{color:var(--text-2);font-size:.85rem;line-height:1.5}
.biz-note{margin-top:1.4rem;color:var(--muted);font-size:.86rem;line-height:1.55;max-width:44rem}
@media (max-width:860px){.biz-lead{grid-template-columns:1fr}.biz-points{grid-template-columns:1fr}}

/* ---------------------------------------------------------------
   2. OD PRETRAGE DO UPITA (interactive flow)
   --------------------------------------------------------------- */
.flow{position:relative}
.flow-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:.55rem;margin-top:.4rem}
.flow-step{position:relative;text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;padding:1rem .95rem 1.05rem;cursor:pointer;color:inherit;font:inherit;
  transition:border-color .25s,background .25s,transform .25s var(--ease-out);overflow:hidden}
.flow-step:hover{border-color:var(--line-2);transform:translateY(-3px)}
.flow-step[aria-selected="true"]{border-color:rgba(247,168,27,.55);
  box-shadow:0 24px 60px -42px rgba(247,168,27,.5)}
.flow-step .fs-n{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--muted)}
.flow-step .fs-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;margin:.5rem 0 .55rem;
  background:rgba(247,168,27,.1);color:var(--accent)}
.flow-step[aria-selected="true"] .fs-ic{background:var(--accent);color:var(--accent-deep)}
.flow-step .fs-ic svg{width:18px;height:18px}
.flow-step h4{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:1rem;
  color:var(--text);line-height:1.05}
.flow-arrows{display:none}
.flow-detail{margin-top:.9rem;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(1.15rem,2.4vw,1.7rem);display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.flow-detail .fd-badge{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--accent);padding:.26rem .6rem;border-radius:5px;white-space:nowrap}
.flow-detail h3{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:1.35rem;
  color:var(--text);margin-bottom:.4rem}
.flow-detail p{color:var(--silver);line-height:1.62;max-width:52rem}
.flow-detail .fd-mini{margin-top:.7rem;color:var(--text-2);font-size:.86rem;line-height:1.5}
.flow-foot{margin-top:1rem;color:var(--muted);font-size:.84rem;line-height:1.55;max-width:46rem}
@media (max-width:860px){
  .flow-rail{grid-template-columns:1fr 1fr 1fr;gap:.5rem}
  .flow-detail{grid-template-columns:1fr}
}
@media (max-width:460px){.flow-rail{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------
   3. COMPONENT SPOTLIGHT (interactive examples from real projects)
   --------------------------------------------------------------- */
.spec{position:relative}
.spec .wrap{max-width:1300px}                 /* R16 §2: wider useful width for the showcase */
.spec-cats{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.6rem}
.spec-cat{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.01em;color:var(--text-2);white-space:nowrap;
  background:var(--panel);border:1px solid var(--line-2);border-radius:999px;padding:.62rem 1.15rem;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s,transform .2s}
.spec-cat:hover{color:var(--text);border-color:var(--silver);transform:translateY(-1px)}
.spec-cat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.spec-cat[aria-selected="true"]{color:var(--accent-deep);background:var(--accent);border-color:var(--accent);font-weight:600;
  box-shadow:0 10px 26px -14px rgba(247,168,27,.7)}
.spec-stage{display:grid;grid-template-columns:1.95fr 1fr;gap:clamp(1.2rem,2.6vw,2.2rem);align-items:stretch}
/* the framed preview */
.spec-frame{position:relative;border-radius:14px;overflow:hidden;background:#0b0e12;border:1px solid var(--line-2);
  box-shadow:var(--shadow)}
.spec-frame .sf-bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:#0e1216;
  border-bottom:1px solid var(--line)}
.spec-frame .sf-bar i{width:10px;height:10px;border-radius:50%;background:#2a2f37;display:block}
.spec-frame .sf-bar .sf-url{margin-left:.5rem;font-family:var(--font-mono);font-size:.7rem;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spec-media{position:relative;aspect-ratio:16/10;background:#0b0e12}
.spec-media img,.spec-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;animation:specFade .34s ease}
@keyframes specFade{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.spec-media img,.spec-media video{animation:none}}
.spec-media.is-mobile{aspect-ratio:16/10;background:#0b0e12;display:grid;place-items:center}
.spec-media.is-mobile img{position:relative;inset:auto;width:auto;height:92%;object-fit:contain;
  border-radius:14px;border:1px solid var(--line-2);box-shadow:0 20px 50px -30px #000}
.spec-play{position:absolute;left:.7rem;bottom:.7rem;z-index:3;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:6px;background:rgba(8,10,13,.78);color:var(--text);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.spec-play .d{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 1px rgba(247,168,27,.6)}
/* text panel */
.spec-info{display:flex;flex-direction:column;justify-content:center}
.spec-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.spec-proj{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:1.4rem;color:var(--text)}
.spec-status{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.24rem .5rem;border-radius:5px;background:rgba(8,10,13,.6);
  border:1px solid var(--line)}
.spec-status .d{width:6px;height:6px;border-radius:50%}
.spec-status--live{color:var(--ok)}.spec-status--live .d{background:var(--ok);box-shadow:0 0 8px 1px rgba(95,208,139,.55)}
.spec-status--preview{color:var(--accent)}.spec-status--preview .d{background:var(--accent);box-shadow:0 0 8px 1px rgba(247,168,27,.55)}
.spec-solves{font-size:.7rem;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.spec-info h3{font-family:var(--font-body);font-weight:600;font-size:1.16rem;color:var(--text);line-height:1.32;margin-bottom:.55rem}
.spec-info p{color:var(--silver);line-height:1.62;font-size:1rem}
.spec-link{margin-top:.9rem;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);
  font-size:.78rem;color:var(--accent);align-self:flex-start}
.spec-link svg{width:14px;height:14px;transition:transform .25s}
.spec-link:hover svg{transform:translate(2px,-2px)}
.spec-link--muted{color:var(--text-2);pointer-events:none}
/* thumbnail strip within a category */
.spec-thumbs{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1rem}
.spec-thumb{position:relative;width:74px;height:50px;border-radius:8px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);background:#0b0e12;transition:border-color .2s,transform .2s}
.spec-thumb img,.spec-thumb video{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.spec-thumb:hover{transform:translateY(-2px);border-color:var(--line-2)}
.spec-thumb[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.spec-count{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-top:.6rem}
@media (max-width:1080px){.spec .wrap{max-width:var(--wrap)}.spec-stage{grid-template-columns:1.7fr 1fr}}
@media (max-width:860px){
  .spec-stage{grid-template-columns:1fr;gap:1.1rem;align-items:start}
  .spec-info{justify-content:flex-start}
  /* categories: tidy horizontal scroll strip instead of cramped wrap */
  .spec-cats{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .spec-cat{flex:0 0 auto;scroll-snap-align:start}
}

/* ---------------------------------------------------------------
   4. POSLOVNI vs PREMIUM (comparison) + premium proof
   --------------------------------------------------------------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,2vw,1.4rem)}
.cmp-col{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:clamp(1.3rem,2.4vw,1.9rem)}
.cmp-col--prem{border-color:rgba(247,168,27,.42);box-shadow:0 30px 70px -44px rgba(247,168,27,.32)}
.cmp-tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.cmp-col--prem .cmp-tag{color:var(--accent)}
.cmp-h{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:1.5rem;color:var(--text);margin:.35rem 0 .2rem}
.cmp-for{color:var(--muted);font-size:.9rem;line-height:1.5;margin-bottom:1rem}
.cmp-list{display:grid;gap:.55rem;margin-top:.4rem}
.cmp-list li{display:flex;gap:.6rem;align-items:flex-start;color:var(--silver);font-size:.94rem;line-height:1.5;list-style:none}
.cmp-list svg{width:16px;height:16px;flex:none;margin-top:.18rem;color:var(--accent)}
.cmp-when{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--text-2);font-size:.88rem;line-height:1.55}
.cmp-when b{color:var(--text)}
.cmp-help{margin-top:1.5rem;background:linear-gradient(135deg,rgba(247,168,27,.08),rgba(247,168,27,0));
  border:1px solid rgba(247,168,27,.28);border-radius:14px;padding:1.1rem 1.3rem;display:flex;gap:1rem;
  align-items:center;flex-wrap:wrap;justify-content:space-between}
.cmp-help p{color:var(--silver);line-height:1.55;max-width:40rem}
.cmp-help b{color:var(--text)}
@media (max-width:760px){.cmp{grid-template-columns:1fr}}