/* ============================================================================
   ut-lineups.css — Postave (lineups) PHOTO-PITCH.
   Ported verbatim from css/tip-details-new.css so utakmica-new's Postave matches
   tip-details exactly (owner 2026-07-27). Rendered by sections/bet-centar/lineups.php
   (.pitch__* markup). Loaded LAST by utakmica-new.php so these rules win same-
   specificity ties against the .ut-page * reset. Hardcoded pitch colors are
   intentional (lineup exemption — do not tokenise).
   ============================================================================ */

.lineups-field { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; min-width: 0; max-width: 100%; }

.lineups-team { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; color: #14171C; border: 1px solid #E7E9EC; box-sizing: border-box; }
.lineups-team__logo { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }
.lineups-team__name { font-weight: 500; font-size: 14px; }
.lineups-team__formation { margin-left: auto; font-size: 13px; opacity: 0.85; }
.lineups-team--home { flex: 1 1 50%; order: 1; border-radius: 8px 0 0; }
.lineups-team--away { flex: 1 1 50%; order: 2; border-radius: 0 8px 0 0; flex-direction: row-reverse; text-align: right; }
.lineups-team--away .lineups-team__formation { margin-left: 0; margin-right: auto; }

.pitch { flex: 1 1 100%; order: 3; display: flex; flex-direction: row; min-width: 0; max-width: 100%; min-height: 360px; padding: 12px 0; box-sizing: border-box; border-radius: 0 0 8px 8px; position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, rgb(47,128,73) 0, rgb(47,128,73) 48px, rgb(43,118,68) 48px, rgb(43,118,68) 96px); }
.pitch::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,0.3); }
.pitch::after { content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; transform: translate(-50%, -50%); }

.pitch__half { flex: 1 1 0; display: flex; min-width: 0; position: relative; z-index: 1; }
.pitch__half--home { flex-direction: row; }
.pitch__half--away { flex-direction: row-reverse; }
.pitch__half--home::before, .pitch__half--away::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 58%; border: 2px solid rgba(255,255,255,0.3); pointer-events: none; }
.pitch__half--home::before { left: 0; border-left: 0; border-radius: 0 6px 6px 0; }
.pitch__half--away::before { right: 0; border-right: 0; border-radius: 6px 0 0 6px; }
.pitch__half--home::after, .pitch__half--away::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 30%; border: 2px solid rgba(255,255,255,0.3); pointer-events: none; }
.pitch__half--home::after { left: 0; border-left: 0; border-radius: 0 4px 4px 0; }
.pitch__half--away::after { right: 0; border-right: 0; border-radius: 4px 0 0 4px; }

.pitch__line { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 6px; min-width: 0; }
.pitch__player { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 74px; max-width: 100%; text-align: center; }
.pitch__avatar { position: relative; width: 32px; height: 32px; flex: 0 0 32px; }
.pitch__photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; background: #FFFFFF; }
.pitch__num { font-weight: 700; color: rgba(255,255,255,0.75); }
.pitch__name { max-width: 74px; font-size: 10px; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: rgba(0,0,0,0.5) 0 1px 2px; }

/* Coach cards — restored to the ORIGINAL utakmica lineup styling (28px avatar,
   bordered chip, --kl-* tokens); only the PITCH was meant to change (owner). */
.lineups-coaches { display: flex; gap: var(--kl-sp-12); margin-top: 0; padding: 0; }
.lineups-coaches .sastav__trener { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--kl-sp-8); padding: var(--kl-sp-8); border: 1px solid var(--kl-border); border-radius: var(--kl-r-10); background: var(--kl-surface); font-family: "Red Hat Display", sans-serif; }
.sastav__trenerImg { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; }
.sastav__trenerMain { display: flex; flex-direction: column; min-width: 0; }
.sastav__trenerMain span { font-size: var(--kl-fs-11); color: var(--kl-text-3); }
.sastav__trenerMain strong { font-size: var(--kl-fs-13); color: var(--kl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 768px) {
  .lineups-field { flex-direction: column; }
  .lineups-team--home { flex: 1 1 100%; border-radius: 8px 8px 0 0; }
  .lineups-team--away { flex: 1 1 100%; order: 3; border-radius: 0 0 8px 8px; flex-direction: row; text-align: left; }
  .lineups-team--away .lineups-team__formation { margin-left: auto; margin-right: 0; }
  .pitch { order: 2; flex-direction: column; border-radius: 0; min-height: 540px; padding: 0 12px; background: repeating-linear-gradient(rgb(47,128,73) 0, rgb(47,128,73) 48px, rgb(43,118,68) 48px, rgb(43,118,68) 96px); }
  .pitch::before { inset: 50% 0 auto; width: auto; height: 2px; }
  .pitch__half--home { flex-direction: column; }
  .pitch__half--away { flex-direction: column-reverse; }
  .pitch__line { flex-direction: row; }
  .pitch__line .pitch__player { width: auto; flex: 1 1 0; min-width: 0; }
  .pitch__line .pitch__name { max-width: 100%; }
  .pitch__half--home::before, .pitch__half--away::before { inset: auto auto auto 50%; transform: translateX(-50%); width: 58%; height: 34px; }
  .pitch__half--home::before { top: 0; border-width: 0 2px 2px; border-style: none solid solid; border-color: transparent rgba(255,255,255,0.3) rgba(255,255,255,0.3); border-radius: 0 0 6px 6px; }
  .pitch__half--away::before { bottom: 0; border-width: 2px 2px 0; border-style: solid solid none; border-color: rgba(255,255,255,0.3) rgba(255,255,255,0.3) transparent; border-radius: 6px 6px 0 0; }
  .pitch__half--home::after, .pitch__half--away::after { inset: auto auto auto 50%; transform: translateX(-50%); width: 30%; height: 16px; }
  .pitch__half--home::after { top: 0; border-width: 0 2px 2px; border-style: none solid solid; border-color: transparent rgba(255,255,255,0.3) rgba(255,255,255,0.3); border-radius: 0 0 4px 4px; }
  .pitch__half--away::after { bottom: 0; border-width: 2px 2px 0; border-style: solid solid none; border-color: rgba(255,255,255,0.3) rgba(255,255,255,0.3) transparent; border-radius: 4px 4px 0 0; }
}