/* ═══════════════════════════════════════════════
   HSHL — components.css
   Ponovno upotrebljive komponente: oznake, gumbi, chipovi, polja, kartice,
   placeholderi. Izvor: handoff redizajna (faza 2).
═══════════════════════════════════════════════ */

/* ── Nadnaslov ─────────────────────────────── */
.eyebrow {
  font-family: var(--oznaka);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .4em;
  text-transform: uppercase;
  /* Boju zadaje ploha kroz --eyebrow-boja (vidi base.css); --crvena-tekst je
     rezerva za nadnaslov izvan ijedne plohe. */
  color: var(--eyebrow-boja, var(--crvena-tekst));
}
.eyebrow--light { color: var(--tekst-prigusen); }

/* ── Gumbi ─────────────────────────────────────
   Kutovi se režu dijagonalno (trag klizaljke). Zaobljenja i sjene ne postoje.
   Hover je svjetlija crvena ili pomak, nikad box-shadow. */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  clip-path: polygon(var(--rez-s) 0, 100% 0, 100% calc(100% - var(--rez-s)), calc(100% - var(--rez-s)) 100%, 0 100%, 0 var(--rez-s));
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.btn--red   { background: var(--crvena); color: #fff; }
.btn--red:hover { background: var(--crvena-hover); color: #fff; }
.btn--ghost { border-color: rgba(237,241,247,.3); color: var(--bijela); }
.btn--ghost:hover { border-color: var(--crvena); background: rgba(200,16,46,.12); color: var(--bijela); }
.btn--white { background: var(--bijela); color: var(--led); }
.btn--white:hover { background: #fff; color: var(--led); }
.btn--full  { width: 100%; justify-content: center; }

/* ── Tekstualni link ───────────────────────── */
.textlink {
  display: inline-block;
  font-family: var(--oznaka);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  border-bottom: 2px solid var(--crvena);
  padding-bottom: 5px;
  transition: color .25s ease;
}
.textlink:hover { color: #fff; }
.textlink--light { color: var(--bijela); }
.textlink--light:hover { color: #fff; }

/* ── Chip / oznaka ─────────────────────────── */
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--oznaka);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--linija);
  color: var(--tekst-prigusen);
}
.chip--red  { border-color: rgba(200,16,46,.55); color: var(--tag); }
.chip--blue { border-color: rgba(74,144,196,.55); color: var(--plava); }

/* ── Placeholder ───────────────────────────────
   Sve što čeka materijale nosi kosu prugu i monospace oznaku „▸ …" — nikad
   prazna crna ploha. Namjeran dizajnerski element, ne privremeni krpež. */
.placeholder {
  position: relative;
  background-color: var(--panel-tam);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
  border: 1px solid var(--linija);
}
.placeholder__oznaka {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.placeholder--sredina {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed;
  border-color: rgba(237,241,247,.25);
}
.placeholder--sredina .placeholder__oznaka { position: static; }

/* ── Polje forme ───────────────────────────────
   Bez zaobljenja, hairline rub, utisnuta podloga. */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--oznaka);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: .92rem;
  color: var(--bijela);
  background: rgba(8,9,15,.6);
  border: 1px solid var(--linija);
  padding: 14px 16px;
  transition: border-color .25s ease;
}
.field select { cursor: pointer; }
.field input::placeholder,
.field textarea::placeholder { color: var(--tekst-prigusen); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--crvena); }

/* ── Točkica statusa ───────────────────────── */
.dot { width: 9px; height: 9px; flex-shrink: 0; transform: rotate(45deg); background: rgba(237,241,247,.3); }
.dot--red    { background: var(--crvena); }
.dot--navy   { background: var(--navy); }
.dot--blue   { background: var(--plava); }
.dot--bijela { background: var(--bijela); }

/* ── Zastavice ─────────────────────────────── */
.flag { width: 22px; height: 15px; flex-shrink: 0; display: inline-block; }
.flag--hr {
  background:
    linear-gradient(180deg, #FF0000 0 33.33%, #FFFFFF 33.33% 66.66%, #171796 66.66% 100%);
}
.flag--it {
  background:
    linear-gradient(90deg, #008C45 0 33.33%, #F4F5F0 33.33% 66.66%, #CD212A 66.66% 100%);
}

/* ── Infobox ───────────────────────────────── */
.infobox {
  background: var(--panel);
  border: 1px solid var(--linija);
  border-left: 3px solid var(--linija);
  padding: 22px 24px;
  transition: transform .3s var(--krivulja), background .3s ease;
}
.infobox:hover { transform: translateX(6px); background: var(--panel-svj); }
.infobox--red  { border-left-color: var(--crvena); }
.infobox--navy { border-left-color: var(--navy); }
.infobox--blue { border-left-color: var(--plava); }
.infobox h2,
.infobox h3,
.infobox h4 { font-size: 1.2rem; color: var(--bijela); }
.infobox p { font-size: .86rem; color: var(--tekst); }
.infobox .textlink { font-size: .68rem; margin-top: 10px; }

/* ── Monogram kluba ────────────────────────────
   Klub bez grba dobiva rombični monogram — rez klizaljke, ne krug. */
.club__mono {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-size: 1.1rem; font-weight: 900;
  color: var(--bijela);
  background: var(--panel-svj);
  border: 1px solid var(--linija);
  transform: rotate(45deg) scale(.9);
  margin: 8px 0 22px 6px;
  transition: transform .35s ease;
}
.club__mono i { font-style: normal; transform: rotate(-45deg); }
.club__mono--red   { background: var(--crvena); border-color: transparent; }
.club__mono--navy  { background: var(--navy); border-color: transparent; }
.club__mono--blue  { background: var(--plava); border-color: transparent; }
.club__mono--ghost { background: transparent; border: 1px dashed rgba(237,241,247,.35); color: var(--tekst-prigusen); }
.ploha--panel .klub-kartica__grb .club__mono { margin: 0; }

/* ── Samo za čitače ekrana ─────────────────────
   WordPressove standardne klase; koristi ih poveznica „Preskoči na sadržaj"
   u header.php. Pri fokusu postaje vidljiva jer skriveni cilj tipkovnice ne
   pomaže nikome. */
.screen-reader-text,
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus,
.skip-link:focus {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 400;
  width: auto; height: auto;
  margin: 0; padding: 14px 22px;
  overflow: visible;
  clip-path: none;
  font-family: var(--oznaka);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: #fff;
  background: var(--crvena);
}

/* Otkrivanje sa skrolom (`.reveal`, `.is-in`, kašnjenja) živi u css/pokret.css. */