/* t5-projects.css — T5 Projects Archive, mereni 1:1 sa Direction B v2 etalonom.
   SVE vrednosti doslovno iz "T5 Projects Archive.html" inline style objekata (bez derived spec-a).
   Etalon body NEMA line-height → elementi bez lh u source-u dobijaju `line-height: normal`. */

.t5-wrap { max-width: var(--maxw); margin: 0 auto; }
.dot { color: var(--red); }

/* T5 B_SectionLabel default = ink80 */
.t5-submit .section-label--light { color: rgba(255,255,255,0.6); }
.t5-submit .section-label--light::before { background: rgba(255,255,255,0.6); }

/* ── 1. HERO — sekcija nosi padding 88/64 + PAD; blueprint pozadina ────────── */
.t5-hero { position: relative; background: var(--bg); padding: 88px var(--pad) 64px; overflow: hidden; }
.t5-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.t5-hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--t5-hero-bg); background-size: cover; background-position: center 30%;
  filter: grayscale(1) contrast(1.04); opacity: 0.5;
}
/* dva etalonska overlay-a; prvi naveden je gornji sloj (source: 180deg je posle 90deg) */
.t5-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(250,250,247,0.25) 0%, rgba(250,250,247,0) 32%, rgba(250,250,247,0.45) 100%),
    linear-gradient(90deg, #FAFAF7 0%, #FAFAF7 28%, rgba(250,250,247,0.82) 50%, rgba(250,250,247,0.5) 76%, rgba(250,250,247,0.4) 100%);
}
.t5-hero__inner { position: relative; z-index: 1; }
.t5-hero__h1 { margin: 24px 0 0; max-width: 1000px; font-family: var(--font-display); font-weight: 500; font-size: 78px; line-height: 0.98; letter-spacing: -0.04em; color: var(--ink); }
.t5-hero__intro { margin: 28px 0 0; max-width: 680px; font-size: 18px; line-height: 1.55; color: var(--ink70); }
@media (max-width: 1024px) { .t5-hero__h1 { font-size: 58px; } }
@media (max-width: 600px)  {
  .t5-hero { padding: 56px var(--pad) 40px; }
  .t5-hero__bg::before { opacity: 0.32; }
  .t5-hero__h1 { margin-top: 18px; font-size: 40px; }
  .t5-hero__intro { margin-top: 20px; font-size: 15.5px; }
}

/* ── 2. STATS (dark, 5) — ćelija 34/0/4, hairline levo osim prvog u redu ───── */
.t5-stats { background: var(--ink); color: #fff; padding: 64px var(--pad); }
.t5-stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1.5px solid rgba(255,255,255,0.85); }
.t5-stat { padding: 34px 0 4px; padding-left: 30px; border-left: 1px solid rgba(255,255,255,0.16); }
.t5-stat:nth-child(5n+1) { padding-left: 0; border-left: none; }
.t5-stat__num { font-family: var(--font-display); font-weight: 500; font-size: 60px; line-height: 0.9; letter-spacing: -0.03em; }
.t5-stat__label { margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
@media (max-width: 1024px) {
  .t5-stats__grid { grid-template-columns: repeat(3, 1fr); }
  .t5-stat:nth-child(5n+1) { padding-left: 30px; border-left: 1px solid rgba(255,255,255,0.16); }
  .t5-stat:nth-child(3n+1) { padding-left: 0; border-left: none; }
  .t5-stat:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,0.16); }
  .t5-stat__num { font-size: 48px; }
}
@media (max-width: 600px) {
  .t5-stats { padding: 48px var(--pad); }
  .t5-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .t5-stat { padding-left: 18px; }
  .t5-stat:nth-child(5n+1), .t5-stat:nth-child(3n+1) { padding-left: 18px; border-left: 1px solid rgba(255,255,255,0.16); }
  .t5-stat:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .t5-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.16); }
  .t5-stat__num { font-size: 38px; }
}

/* ── 3. FILTER BAR (sticky ispod headera) ─────────────────────────────────── */
.t5-filterbar {
  position: sticky; top: 80px; z-index: 20; background: var(--bg);
  border-top: 1px solid var(--ink15); border-bottom: 1px solid var(--ink);
  padding: 18px var(--pad);
}
.t5-filterbar__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.t5-filterbar__status { margin-left: auto; font-family: var(--font-mono); font-size: 11px; line-height: normal; letter-spacing: 0.04em; color: var(--ink50); }
.t5-filterbar__chips { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.t5-filterbar__active { font-family: var(--font-mono); font-size: 10.5px; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink50); }
.t5-filterbar__chiplist { display: inline-flex; gap: 8px; flex-wrap: wrap; }
/* ActiveChip: etalon = INK pozadina, beo tekst (live je ranije imao inverziju) */
.t5-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px 6px 11px;
  background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: normal; letter-spacing: 0.02em;
}
.t5-chip button {
  background: none; border: 0; cursor: pointer; color: inherit; font: inherit;
  font-size: 13px; line-height: 1; padding: 0 0 0 3px; border-left: 1px solid rgba(255,255,255,0.25);
}
.t5-filterbar__clear {
  background: none; border: 0; cursor: pointer; margin-left: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: normal; color: var(--red);
}

.t5-dd { position: relative; flex: 0 0 auto; min-width: 184px; }
.t5-dd__trigger {
  width: 100%; min-width: 184px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--bg); color: var(--ink); border: 1px solid var(--ink30);
  cursor: pointer; font: inherit; text-align: left;
  line-height: normal; /* MORA posle `font: inherit` — shorthand resetuje lh na nasleđeno 1.6 */
}
.t5-dd__texts { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.t5-dd__label { font-family: var(--font-mono); font-size: 8.5px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink50); }
.t5-dd__val { font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t5-dd__caret { font-size: 10px; opacity: 0.7; transition: transform .25s; }
.t5-dd.is-open .t5-dd__caret { transform: rotate(180deg); }
.t5-dd.is-active .t5-dd__trigger { background: var(--ink); border-color: var(--ink); color: #fff; }
.t5-dd.is-active .t5-dd__label { color: rgba(255,255,255,0.6); }
.t5-dd__list {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; z-index: 30;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 18px 40px -20px rgba(26,26,26,0.4);
  max-height: 320px; overflow-y: auto; display: none;
}
.t5-dd.is-open .t5-dd__list { display: block; }
.t5-dd__opt {
  padding: 11px 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: normal;
  color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--ink08);
  display: flex; justify-content: space-between; gap: 12px;
}
.t5-dd__opt.is-selected { color: var(--red); font-weight: 700; }
/* ✓ samo na izabranoj opciji koja NIJE "All" (etalon uslov) */
.t5-dd__opt.is-selected:not([data-val="All"])::after { content: "✓"; color: var(--red); }
@media (max-width: 1024px) { .t5-filterbar { top: 64px; } }
@media (max-width: 600px) {
  .t5-filterbar { padding: 14px var(--pad); }
  .t5-dd { flex: 1 1 100%; min-width: 0; }
  .t5-dd__trigger { min-width: 0; }
  .t5-dd__list { min-width: 100%; }
  .t5-filterbar__status { margin-left: 0; }
}

/* ── 4. GRID + KARTICE — media FIKSNA 240/210 (ne aspect-ratio) ───────────── */
.t5-grid-sec { background: var(--bg); padding: 60px var(--pad) 100px; }
.t5-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: flex-start; }
.proj-card { background: var(--paper); border: 1px solid var(--ink15); display: flex; flex-direction: column; overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.proj-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(26,26,26,0.42); border-color: var(--ink30); }
.proj-card__media { position: relative; height: 240px; overflow: hidden; background: var(--bg-deep); }
.proj-card__media .pc-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.proj-card:hover .pc-img { transform: scale(1.05); }
.proj-card__sec {
  position: absolute; left: 12px; top: 12px; padding: 5px 9px; background: var(--bg); color: var(--ink);
  font-family: var(--font-mono); font-size: 10px; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase;
}
.proj-card__yr {
  position: absolute; right: 12px; top: 12px; padding: 5px 9px; background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-size: 10px; line-height: normal; letter-spacing: 0.06em;
}
.proj-card__body { padding: 22px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.proj-card__name { font-family: var(--font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); }
.proj-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-mono); font-size: 11.5px; line-height: normal; letter-spacing: 0.02em; color: var(--ink70); }
.proj-card__dot { opacity: 0.4; }
.proj-card__client { font-family: var(--font-mono); font-size: 11px; line-height: normal; color: var(--ink50); }
.proj-card__more {
  margin-top: 2px; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; line-height: normal;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--red);
}
.proj-card__more .more-close { display: none; }
.proj-card.is-expanded .proj-card__more .more-open { display: none; }
.proj-card.is-expanded .proj-card__more .more-close { display: inline; }
.proj-card__desc { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.2,.7,.2,1); }
.proj-card.is-expanded .proj-card__desc { max-height: 200px; }
.proj-card__desc p { margin: 2px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink70); }
.proj-card__tags { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.proj-card__tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: normal; letter-spacing: 0.06em; border: 1px solid var(--ink30); padding: 3px 8px; color: var(--ink70); }
@media (max-width: 1024px) { .t5-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .t5-grid-sec { padding: 36px var(--pad) 56px; }
  .t5-grid { grid-template-columns: 1fr; gap: 16px; }
  .proj-card__media { height: 210px; }
  .proj-card__body { padding: 18px; }
  .proj-card__name { font-size: 19px; }
}

/* Empty state — etalon: padding 110/0, reset link INK (ne crven) sa crvenom linijom */
.t5-empty { text-align: center; padding: 110px 0; }
.t5-empty .section-label { justify-content: center; margin-bottom: 18px; color: var(--red); }
.t5-empty .section-label::before { background: var(--red); }
.t5-empty__h2 { margin: 0 auto; max-width: 560px; font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); }
.t5-empty__p { margin: 16px auto 0; max-width: 460px; font-size: 16px; line-height: 1.55; color: var(--ink70); }
.t5-empty__reset {
  margin-top: 30px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; line-height: normal;
  color: var(--ink); letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1.5px solid var(--red); padding-bottom: 5px;
}
@media (max-width: 600px) {
  .t5-empty { padding: 56px 0; }
  .t5-empty__h2 { font-size: 28px; }
  .t5-empty__p { font-size: 14px; }
}

/* Pagination — etalon mt 56 (m 36), gap 6, mono 12/600 */
.t5-pagination { margin-top: 56px; display: flex; gap: 6px; justify-content: center; align-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: normal; }
/* SR-only wrap: etalon (EN) na 390 stiska ćelije bez preloma — to je zadržano 1:1.
   Srpski „← Prethodna / Sledeća →" je duži i prelivao je 395px, pa se SAMO na SR prelama. */
html[lang^="sr"] .t5-pagination { flex-wrap: wrap; }
.t5-page { padding: 9px 15px; border: 1px solid var(--ink15); color: var(--ink); cursor: pointer; }
.t5-page--prev { padding: 9px 13px; color: var(--ink30); cursor: not-allowed; }
.t5-page.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.t5-page--next { padding: 9px 13px; border-color: var(--ink); }
@media (max-width: 600px) { .t5-pagination { margin-top: 36px; } }

/* ── 5. SUBMIT BRIEF (dark) ───────────────────────────────────────────────── */
.t5-submit { background: var(--ink); color: #fff; padding: 110px var(--pad); }
.t5-submit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: flex-start; }
.t5-submit .section-label { margin-bottom: 28px; }
.t5-submit__h2 { margin: 0; max-width: 480px; font-family: var(--font-display); font-weight: 500; font-size: 56px; line-height: 0.98; letter-spacing: -0.035em; color: #fff; }
.t5-submit__body { margin: 26px 0 1em; max-width: 460px; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.75); }
.t5-submit__contacts { margin-top: 44px; display: flex; gap: 36px; flex-wrap: wrap; }
.t5-submit__clabel { display: block; font-family: var(--font-mono); font-size: 11px; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.t5-submit__contact a { display: inline-block; margin-top: 10px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; line-height: normal; color: #fff; text-decoration: none; border-bottom: 1.5px solid var(--red); padding-bottom: 2px; }
.t5-submit__contact span:last-child { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 14px; line-height: normal; color: #fff; }
/* CF7 na tamnoj — block+margine (CF7 skrivena .screen-reader-response bi sa flex `gap` pravila fantomske razmake) */
.t5-submit__form .wpcf7 { line-height: normal; }
.t5-submit__form .wpcf7-form { display: block; }
.t5-submit__form .wpcf7-form p { margin: 0; }
.t5-submit__form .fld { margin: 0 0 12px; }
.t5-submit__form .fld > label { display: none; }
.t5-submit__form .wpcf7-form-control-wrap { display: block; }
.t5-submit__form input, .t5-submit__form select, .t5-submit__form textarea {
  width: 100%; display: block; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.22); border-radius: 0;
  padding: 15px 16px; font-family: var(--font-sans); font-size: 14px; line-height: normal; color: #fff;
}
.t5-submit__form input::placeholder, .t5-submit__form textarea::placeholder { color: rgba(255,255,255,0.55); }
.t5-submit__form select {
  color: rgba(255,255,255,0.55); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.t5-submit__form select option { color: var(--ink); }
.t5-submit__form textarea { height: 120px; min-height: 120px; resize: vertical; }
.t5-submit__form .t9-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.t5-submit__form .t9-form-row2 .fld { margin-bottom: 0; }
.t5-submit__form .t5-consent { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; }
.t5-submit__form .t5-consent .wpcf7-list-item { margin: 0; }
.t5-submit__form .t5-consent label { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.6); cursor: pointer; }
.t5-submit__form .t5-consent input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; accent-color: var(--red); padding: 0; }
.t5-submit__form .wpcf7-submit {
  display: inline-flex; margin-top: 6px; padding: 14px 24px;
  background: var(--red); border: 1.5px solid var(--red); color: #fff;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; line-height: normal;
  cursor: pointer; border-radius: 0; width: auto;
}
.t5-submit__form .wpcf7-response-output { border: 1px solid rgba(255,255,255,0.3) !important; color: #fff; padding: 12px 16px !important; margin: 16px 0 0 !important; line-height: 1.5; }
.t5-submit__form .wpcf7-not-valid-tip { color: #ffb4b4; font-family: var(--font-mono); font-size: 11px; margin-top: 6px; }
@media (max-width: 1024px) { .t5-submit__grid { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 600px) {
  .t5-submit { padding: 64px var(--pad); }
  .t5-submit__h2 { font-size: 34px; }
  .t5-submit__body { font-size: 15.5px; }
  .t5-submit__contacts { margin-top: 32px; }
  .t5-submit__form .t9-form-row2 { grid-template-columns: 1fr; }
}