/* t9-contact.css — T9 Contact, mereno 1:1 sa „T9 Contact.html" (Direction B v2).
   Sve vrednosti čitane iz inline style objekata IZVORA.
   (Prethodna verzija je u zaglavlju priznavala „Mere iz build-spec/t9.md" —
   dakle izvedeni spec, što pravilo copy-1-1-verbatim zabranjuje. Prepisano.)

   JEDAN model omotača na celoj strani: <section padding: V PAD> + <div maxW:1440>
   ⇒ @1920 left 240, sadržaj 1440. (T4 i T8 mešaju dva modela — T9 ne.)

   ODOBRENA IZMENA (Stevan 2026-07-21): hero pozadina je SVETLA (--bg-deep)
   umesto etalonovog --ink; tekst i linkovi invertovani u ink rampu, linija
   linkova crvena. Sve ostalo ostaje 1:1. Geometrija heroja je netaknuta.

   base.css daje body { line-height: 1.6 }, a etalon body NEMA line-height →
   korenu svake sekcije postavljamo `normal` da se nasleđivanje poklopi. */

.t9-hero, .t9-form, .t9-offices, .t9-promise, .t9-cta { line-height: normal; }
.t9-inner { max-width: var(--maxw); margin: 0 auto; }
.dot { color: var(--red); }   /* per-strana definicija — ispala je pri prepisu T7 */

.eyebrow--red { color: var(--red); }
.eyebrow--red::before { background: var(--red); }

/* ══ 1. HERO — tekst + direktan telefon/mejl ══════════════════════════════ */
.t9-hero { background: var(--bg-deep); padding: 104px var(--pad) 64px; }
.t9-hero__h1 { margin: 30px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 96px; line-height: 0.96; letter-spacing: -0.04em; color: var(--ink); max-width: 1180px; }
.t9-hero__intro { margin: 32px 0 0; max-width: 660px; font-size: 18px; line-height: 1.6; color: var(--ink70); }
.t9-hero__links { margin-top: 38px; display: flex; gap: 32px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 15px; }
/* Etalon: beo tekst + bela linija rgba(255,255,255,0.6). Na svetloj pozadini →
   ink tekst + CRVENA linija (odluka Stevan) — isti tretman kao mejl u footeru. */
.t9-hero__link { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--red); padding-bottom: 2px; }
@media (max-width: 1024px) { .t9-hero__h1 { font-size: 66px; } }
@media (max-width: 600px) {
  .t9-hero { padding: 56px var(--pad) 44px; }
  .t9-hero__h1 { margin: 22px 0 0; font-size: 42px; }
  .t9-hero__intro { margin: 22px 0 0; font-size: 15.5px; }
  .t9-hero__links { margin-top: 28px; gap: 18px; font-size: 13px; }
}

/* ══ 2. SEND A MESSAGE — forma (CF7 46/48, DELE ih T3 i T5) ═══════════════ */
.t9-form { background: var(--bg); padding: 96px var(--pad) 110px; }
.t9-form__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; }
.t9-form__lab { margin-bottom: 22px; }
.t9-form__h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 46px; line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); }
.t9-form__body { margin: 20px 0 0; font-size: 16px; line-height: 1.62; color: var(--ink70); max-width: 420px; }
.t9-form__note { margin-top: 28px; padding: 16px 18px; background: var(--bg-deep); border-left: 2px solid var(--red); font-size: 13px; color: var(--ink70); line-height: 1.55; max-width: 420px; }
.t9-form__note b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 6px; font-weight: 400; }

.t9-form__col .wpcf7-form { display: flex; flex-direction: column; gap: 20px; }
/* CF7 autop obavija sadržaj SVAKOG reda u <p>, a base.css daje p { margin:0 0 1em }
   → bez ovoga je svaki red 16px viši (uhvaćeno na T4). */
.t9-form__col p { margin: 0; }
.t9-form__col .wpcf7-form-control-wrap { display: block; }
.t9-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* U formi 46/48 polje „Service interest" ima PRELOM REDA između [select*] i
   <span class="t9-hint">. Taj beli razmak pravi anonimni line-box od ~20px i
   diže blok na 116 umesto 96. Flex kontejner NE renderuje čisto-bele tekstualne
   čvorove između blokova → rešeno bez diranja deljene forme. */
.t9-form__col .fld > p { display: flex; flex-direction: column; }
/* …i taj prelom CF7 autop pretvara u PRAVI <br>, koji kao flex-item zauzima ceo
   red (~20px). Zato ga skrivamo — polja su ionako blokovi jedno ispod drugog. */
.t9-form__col .fld > p > br { display: none; }
/* CF7 autop gura <label> u <p>, pa `>` selektor promaši — gađaj po dubini. */
.t9-form__col .fld label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink70); margin-bottom: 8px; display: block; line-height: normal; }
.t9-form__col input[type="text"],
.t9-form__col input[type="email"],
.t9-form__col select,
.t9-form__col textarea {
  width: 100%; display: block; border-radius: 0;
  padding: 15px 16px; border: 1.5px solid var(--ink30); background: var(--paper);
  font-family: var(--font-sans); font-size: 15px; line-height: normal; color: var(--ink);
}
/* Izvor polja nosi `color: ink30` jer je njegov tekst zapravo placeholder. */
.t9-form__col input::placeholder,
.t9-form__col textarea::placeholder { color: var(--ink30); opacity: 1; }
/* Izvorni „select" je div sa ▾ desno — pravi <select> to daje nativno preko
   appearance, ali strelicu crtamo sami da bude mono 12px ink50 kao u izvoru. */
.t9-form__col select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
}
/* Forma 46/48 je DELJENA sa T3/T5 i ne sme se menjati → ne mogu dodati klasu na
   .fld sa selektom. `:has(select)` to rešava čisto iz CSS-a. */
.t9-form__col .fld:has(select) { position: relative; }
.t9-form__col .fld:has(select)::after {
  content: "▾"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-family: var(--font-mono); font-size: 12px; color: var(--ink50); line-height: 1;
}
.t9-hint { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink50); margin-top: 8px; line-height: 1.6; }
.t9-form__col textarea { min-height: 150px; height: 150px; resize: vertical; line-height: 1.55; }
.t9-gdpr, .t9-gdpr > p { display: flex; gap: 12px; align-items: flex-start; }
.t9-gdpr { font-size: 12px; color: var(--ink70); line-height: 1.5; margin-top: 2px; }
.t9-gdpr .wpcf7-form-control-wrap,
.t9-gdpr .wpcf7-acceptance,
.t9-gdpr .wpcf7-list-item { display: flex; align-items: flex-start; margin: 0; }
.t9-gdpr label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.t9-gdpr input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 2px 0 0; border-radius: 0;
  width: 16px; height: 16px; border: 1.5px solid var(--ink50); flex: 0 0 16px;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--ink); line-height: 1;
}
.t9-gdpr input[type="checkbox"]:checked::before { content: "✓"; }
.t9-gdpr .wpcf7-list-item-label { font-size: 12px; color: var(--ink70); line-height: 1.5; }
.t9-gdpr a { border-bottom: 1px solid var(--ink50); }
.t9-submit, .t9-submit > p { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.t9-submit { margin-top: 8px; }
.t9-form__col .wpcf7-submit {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 0;
  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;
}
.t9-required { font-family: var(--font-mono); font-size: 12px; color: var(--ink50); line-height: normal; }
/* CF7 JS ubacuje spinner kao dodatni flex element — etalon ga nema (uhvaćeno na T4). */
.t9-form__col .wpcf7-spinner { display: none; margin: 0 0 0 8px; }
.t9-form__col .wpcf7-form.submitting .wpcf7-spinner,
.t9-form__col .wpcf7-form[data-status="submitting"] .wpcf7-spinner { display: inline-block; }
.t9-form__col .wpcf7-response-output { border: 1px solid var(--ink30) !important; padding: 12px 16px !important; margin: 16px 0 0 !important; font-size: 14px; }
.t9-form__col .wpcf7-not-valid-tip { font-size: 12px; color: var(--red); margin-top: 6px; }

@media (max-width: 1024px) { .t9-form__grid { grid-template-columns: 1fr; gap: 48px; } .t9-form__h2 { font-size: 38px; } }
@media (max-width: 600px) {
  .t9-form { padding: 56px var(--pad) 64px; }
  .t9-form__grid { gap: 32px; }
  .t9-form__h2 { font-size: 28px; }
  .t9-form__body { font-size: 14.5px; }
  .t9-form__col .wpcf7-form { gap: 16px; }
  .t9-form-row2 { grid-template-columns: 1fr; gap: 16px; }
  .t9-form__col input[type="text"], .t9-form__col input[type="email"],
  .t9-form__col select, .t9-form__col textarea { padding: 13px 14px; font-size: 14px; }
  .t9-form__col textarea { min-height: 120px; height: 120px; }
}

/* ══ 3. OFFICES — mapa + adresne kartice ══════════════════════════════════ */
.t9-offices { background: var(--bg-deep); padding: 110px var(--pad); border-top: 1px solid var(--ink15); }
/* izvor drži label I h2 u ISTOM <Reveal> omotaču — margina je na omotaču */
.t9-offices__head { margin-bottom: 52px; }
.t9-offices__h2 { margin: 20px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 72px; line-height: 0.98; letter-spacing: -0.04em; color: var(--ink); }
.t9-offices__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: stretch; }
.t9-offices__grid > .rv { height: 100%; }
.t9-map { background: var(--bg); border: 1px solid var(--ink15); height: 100%; display: flex; flex-direction: column; padding: 24px; }
.t9-map__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink50); margin-bottom: 14px; line-height: normal; }
.t9-map-svg { position: relative; width: 100%; flex: 1; min-height: 0; }
.t9-map-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; }
.t9-cards { display: flex; flex-direction: column; gap: 20px; }
.off-card { background: var(--paper); border: 1px solid var(--ink15); padding: 30px; }
.off-card .eyebrow { margin-bottom: 12px; }
.off-card__city { font-family: var(--font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 14px; line-height: normal; }
.off-card__addr { font-size: 15px; line-height: 1.55; color: var(--ink70); margin-bottom: 16px; }
.off-card__contacts { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); margin-bottom: 16px; line-height: normal; }
.off-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--ink15); flex-wrap: wrap; }
.off-card__hrs { font-family: var(--font-mono); font-size: 10px; color: var(--ink50); letter-spacing: 0.04em; text-transform: uppercase; line-height: normal; }
.off-card__map { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink); border-bottom: 1.5px solid var(--red); padding-bottom: 1px; line-height: normal; }
@media (max-width: 1024px) {
  .t9-offices__grid { grid-template-columns: 1fr; }
  .t9-offices__h2 { font-size: 52px; }
}
@media (max-width: 600px) {
  .t9-offices { padding: 64px var(--pad); }
  .t9-offices__head { margin-bottom: 32px; }
  .t9-offices__h2 { font-size: 36px; }
  .t9-offices__grid { gap: 24px; }
  .t9-offices__grid > .rv { height: auto; }
  /* izvor na mobilu pušta karticu da se skupi i crta mapu u toku (260px), ne apsolutno */
  .t9-map { height: auto; padding: 14px 10px 10px; }
  .t9-map__label { margin-bottom: 6px; padding-left: 6px; }
  /* izvor: `mobile ? 'auto' : height` — 260 se na mobilu NE koristi, visina prati viewBox */
  .t9-map-svg { flex: none; height: auto; }
  .t9-map-svg svg { position: relative; height: auto; }
  .t9-cards { gap: 16px; }
  .off-card { padding: 22px; }
  .off-card__city { font-size: 26px; }
  .off-card__addr { font-size: 14px; }
}

/* ══ 4. RESPONSE PROMISE — tamna traka ════════════════════════════════════ */
.t9-promise { background: var(--ink); color: #fff; padding: 100px var(--pad); }
.t9-promise__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
/* ćelija JE Reveal omotač — u izvoru ivica i padding stoje na <Reveal style> */
.t9-promise__grid > .rv { border-top: 2px solid rgba(255,255,255,0.22); padding-top: 24px; }
.t9-stat__num { font-family: var(--font-display); font-weight: 500; font-size: 84px; line-height: 0.92; letter-spacing: -0.04em; color: var(--red); }
.t9-stat__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 16px; margin-bottom: 10px; line-height: normal; }
.t9-stat__desc { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.72); max-width: 320px; }
@media (max-width: 1024px) { .t9-stat__num { font-size: 64px; } }
@media (max-width: 600px) {
  .t9-promise { padding: 64px var(--pad); }
  .t9-promise__grid { grid-template-columns: 1fr; gap: 36px; }
  .t9-stat__num { font-size: 56px; }
  .t9-stat__desc { font-size: 14px; }
}

/* ══ 5. CAREERS CTA ═══════════════════════════════════════════════════════ */
.t9-cta { background: var(--bg); padding: 120px var(--pad); text-align: center; }
.t9-cta__inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.t9-cta__h2 { margin: 34px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.02; letter-spacing: -0.04em; color: var(--ink); max-width: 920px; }
.t9-cta__body { margin: 28px 0 0; max-width: 600px; font-size: 16.5px; line-height: 1.6; color: var(--ink70); }
.t9-cta__btns { margin-top: 44px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 1024px) { .t9-cta__h2 { font-size: 48px; } }
@media (max-width: 600px) {
  .t9-cta { padding: 64px var(--pad); }
  .t9-cta__h2 { margin: 26px 0 0; font-size: 32px; }
  .t9-cta__body { margin: 20px 0 0; font-size: 15px; }
  .t9-cta__btns { margin-top: 30px; }
}