/* Optic Shop · B FINAL (OPTIC_SHOP_OWNER_DIRECTED_B_FINAL_COMPOSITION_R01). Učitava se POSLE p2b.css, samo u 07_PREVIEW/p2f.
   B ostaje osnova (tipografija, boje, hero, navigacija). Owner je izabrao tri izmene i ovaj fajl menja samo njih:
   1. „Okviri koje probate uživo": tamni blok iz A (grafit, sako levo 7/12, sunčane desno 5/12) umesto svetlog B bloka.
   2. „Gde okvir dodiruje lice": izvorni PNG je presečen u kadru (rukav levo od 52 % visine, jakna desno od 60 %, dno).
      Bordo panel ide tačno do ivica slike, pa rez postaje ivica kadra; glava i kosa izlaze iznad panela, ništa se ne seče CSS-om.
   3. Kontakt po arhitekturi C u B tipografiji, sa B fotografijom R05-10 (Vračar u sumrak) kao širokim panelom.
   Pravila za .r5-visit i .r5-intro se ovde NE pišu (lock). */

/* ------------------------------------------------ 1 · vrste: vraća A raspored (p2.css), poništava B pravila iz p2b.css */
.p2-f .p2-kinds { display: block; background: var(--graphite); color: var(--on-dark); padding: var(--r5-sec) var(--edge); }
.p2-f .p2-kinds__grid { display: grid; gap: 40px; margin-top: clamp(40px, 5vw, 96px); }
.p2-f .p2-kind { display: grid; gap: 20px; align-content: start; }
.p2-f .p2-kind__p { color: var(--on-dark-2); }
.p2-f .p2-kind__a { color: var(--on-dark); }
/* nezavisni QA: svetliji „karton" iza isečka se video kao pravougaonik; isečak stoji direktno na grafitu sekcije */
.p2-f .p2-kind--d .p2-kind__fig { aspect-ratio: 4 / 5; background: none; }
.p2-f .p2-kind__fig.is-cutout { background: none; }
.p2-f .p2-kind--s { background: none; color: inherit; padding: 0; }
.p2-f .p2-kind--s .p2-kind__copy { padding: 0; }
.p2-f .p2-kind--s .p2-kind__p { color: var(--on-dark-2); }
.p2-f .p2-kind--s .p2-kind__a { color: var(--on-dark); }
@media (min-width: 960px) {
  .p2-f .p2-kinds { padding-bottom: var(--r5-sec); }
  .p2-f .p2-kinds__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: none; column-gap: clamp(32px, 5vw, 96px); row-gap: 40px; align-items: end; }
  .p2-f .p2-kinds__h { grid-column: auto; }
  .p2-f .p2-kind--d { display: grid; }
  .p2-f .p2-kind--d .p2-kind__copy { grid-column: auto; grid-row: auto; margin-top: 0; }
  .p2-f .p2-kind--d .p2-kind__fig { grid-column: auto; grid-row: auto; align-self: auto; max-width: none; justify-self: stretch; margin-bottom: 0; z-index: auto; animation: none; }
  .p2-f .p2-kind--s { grid-column: auto; grid-row: auto; align-self: auto; display: grid; grid-template-columns: none; gap: 20px; padding: 0 0 clamp(40px, 8vw, 160px); }
  .p2-f .p2-kind--s .p2-kind__fig { aspect-ratio: 4 / 5; }
}
/* tablet: A nema ograničenje širine isečka; telefon: portret je glavni kadar, sunčane niže (16:10) */
@media (min-width: 600px) and (max-width: 959px) {
  .p2-f .p2-kinds__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 24px; align-items: end; }
  .p2-f .p2-kind--d .p2-kind__fig { max-width: none; margin-inline: 0; }
  .p2-f .p2-kind--s .p2-kind__fig { aspect-ratio: 4 / 5; }
}
@media (max-width: 599px) {
  .p2-f .p2-kind--d .p2-kind__fig { margin-inline: calc(-1 * var(--edge)); aspect-ratio: 5 / 6; }
  .p2-f .p2-kind--d .p2-kind__fig img { object-position: 30% 0; }
  .p2-f .p2-kinds__grid { gap: 56px; }
}

/* ------------------------------------------------ 2 · žena u plavoj: panel tačno do ivica slike, glava iznad panela */
.p2-f .p2-fit__person { overflow: visible; }
.p2-f .p2-fit__person::before { inset: 40% 0 0 0; }
@media (min-width: 960px) {
  .p2-f .p2-fit__stage { padding-right: 0; }
  .p2-f .p2-fit__person { max-width: 560px; margin-top: -10vw; }
  .p2-f .p2-fit__person::before { inset: 40% 0 0 0; }
}
@media (max-width: 959px) {
  .p2-f .p2-fit__person { width: min(78vw, 420px); margin-top: 24px; }
}

/* ------------------------------------------------ 3 · Kontakt (struktura C, B tipografija) */
.p2-f .k2-top { background: var(--graphite); color: var(--on-dark); padding: clamp(40px, 6vw, 104px) var(--edge) 0; }
.p2-f .k2-top__grid { display: grid; gap: 32px; }
.p2-f .k2-kicker { margin: 0 0 14px; font: var(--ui-wght) 1rem/1.3 var(--text); color: var(--on-dark-2); }
.p2-f .k2-addr { margin: 0; font: var(--d-wght) clamp(3.25rem, 1rem + 8.2vw, 10.5rem)/var(--d-lh) var(--display); font-stretch: var(--d-stretch);
  letter-spacing: var(--d-track); text-wrap: balance; color: var(--on-dark); }
.p2-f .k2-near { margin: 16px 0 0; font-size: var(--fs-lead, 1.125rem); color: var(--on-dark-2); }
.p2-f .k2-top__main { display: flex; flex-direction: column; align-items: flex-start; }
.p2-f .k2-act { align-self: stretch; }
.p2-f .k2-copy { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--ui-wght) 1rem/1.2 var(--text); color: var(--on-dark); text-decoration: underline 2px var(--red-cta); text-underline-offset: 6px;
  transition: transform 160ms var(--ease); }
.p2-f .k2-copy:active { transform: scale(.97); }
.p2-f .k2-copy.is-done { text-decoration-color: var(--on-dark-2); }
.p2-f .k2-status { margin-top: 18px; font-size: 1.125rem; }
.p2-f .k2-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.p2-f .k2-route { border-color: rgb(244 242 239 / .5); color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) { .p2-f .k2-route:hover { background: var(--on-dark); color: var(--graphite); border-color: var(--on-dark); } }
.p2-f .k2-mail { margin: 24px 0 0; color: var(--on-dark-2); }
.p2-f .k2-mail a { color: var(--on-dark); text-underline-offset: 4px; overflow-wrap: anywhere; }
.p2-f .k2-top a:focus-visible, .p2-f .k2-top button:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }

.p2-f .k2-week { background: var(--graphite-2); padding: clamp(22px, 2.6vw, 40px); align-self: start; }
.p2-f .k2-week__h { margin: 0 0 18px; font: var(--h-wght) 1.375rem/1.1 var(--display); font-stretch: var(--h-stretch); letter-spacing: var(--h-track); }
.p2-f .k2-ruler { --dc: 7.5rem; --xc: 8.25rem; position: relative; font-variant-numeric: tabular-nums; }
.p2-f .k2-ruler .c-ruler__scale { position: relative; height: 18px; margin: 0 var(--xc) 4px var(--dc); font-size: .75rem; color: var(--on-dark-2); }
.p2-f .k2-ruler .c-ruler__scale span { position: absolute; left: calc(var(--p) * 100%); transform: translateX(-50%); }
.p2-f .k2-ruler .c-ruler__rows { list-style: none; margin: 0; padding: 0; }
.p2-f .k2-ruler li { display: grid; grid-template-columns: var(--dc) minmax(0, 1fr) var(--xc); align-items: center; min-height: 42px; border-top: 1px solid var(--line-dark); }
.p2-f .k2-ruler .c-ruler__d { color: var(--on-dark-2); }
.p2-f .k2-ruler .c-ruler__t { position: relative; height: 10px; }
.p2-f .k2-ruler .c-ruler__bar { position: absolute; inset-block: 0; left: calc(var(--a) * 100%); width: calc(var(--b) * 100%); background: var(--on-dark-2); }
.p2-f .k2-ruler .c-ruler__x { text-align: right; font-weight: var(--ui-wght); color: var(--on-dark); }
.p2-f .k2-ruler li.is-today { background: rgb(196 36 48 / .18); margin-inline: -10px; padding-inline: 10px; }
.p2-f .k2-ruler li.is-today .c-ruler__d { color: var(--on-dark); font-weight: 700; }
.p2-f .k2-ruler li.is-today .c-ruler__d::after { content: " danas"; font-weight: 500; font-size: .8125rem; color: var(--on-bordo-2); }
.p2-f .k2-ruler li.is-today .c-ruler__bar { background: var(--red-cta); }
.p2-f .k2-ruler .c-ruler__now { position: absolute; top: 18px; bottom: 0; width: 2px; background: var(--red-cta);
  left: calc(var(--dc) + (100% - var(--dc) - var(--xc)) * var(--now)); }
.p2-f .k2-week__note { margin: 18px 0 0; font-size: .875rem; line-height: 1.5; color: var(--on-dark-2); }

.p2-f .k2-fig { position: relative; margin: clamp(48px, 6vw, 104px) calc(-1 * var(--edge)) 0; background: var(--graphite-2); }
.p2-f .k2-fig picture { display: block; position: relative; }
.p2-f .k2-fig picture::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--graphite) 0%, rgb(29 30 33 / 0) 38%); }
.p2-f .k2-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.p2-f .k2-fig figcaption { padding: 14px var(--edge) 22px; font-size: .8125rem; color: var(--on-dark-2); background: var(--graphite); }

.p2-f .k2-h2 { margin: 0; font: var(--d-wght) clamp(2.75rem, 1rem + 5vw, 7.5rem)/var(--d-lh) var(--display); font-stretch: var(--d-stretch);
  letter-spacing: var(--d-track); text-wrap: balance; }
.p2-f .k2-plan { background: var(--bone); color: var(--ink); padding: var(--r5-sec) var(--edge); }
.p2-f .k2-plan__list { list-style: none; margin: clamp(32px, 4vw, 64px) 0 0; padding: 0; display: grid; gap: 32px; }
.p2-f .k2-plan__list li { border-top: 2px solid var(--ink); padding-top: 18px; }
.p2-f .k2-plan__h { margin: 0; font: var(--h-wght) 1.375rem/1.15 var(--display); font-stretch: var(--h-stretch); letter-spacing: var(--h-track); }
.p2-f .k2-plan__list p { margin: 8px 0 6px; color: var(--ink-2); max-width: 30rem; }
.p2-f .k2-plan__call { margin: clamp(32px, 4vw, 56px) 0 0; max-width: 40rem; font-size: var(--fs-lead, 1.125rem); color: var(--ink); }

.p2-f .k2-sign { background: var(--graphite); color: var(--on-dark); padding: var(--r5-sec) var(--edge); display: grid; gap: 32px; }
/* stvarni ulaz (owner 28.10.) umesto znaka: ceo kadar 3:4 iz make_facade.py, bez sečenja u CSS-u (owner: 4:3 je delovao zumirano) */
.p2-f .k2-sign__fig { margin: 0; }
.p2-f .k2-sign__fig img { background: var(--graphite-2); display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.p2-f .k2-sign__fig figcaption { margin-top: 12px; font-size: .8125rem; color: var(--on-dark-2); }
.p2-f .k2-sign .map__ph { grid-template-columns: 1fr; }
.p2-f .k2-sign .map__cta { grid-column: 1; grid-row: auto; }
.p2-f .k2-sign__txt p { margin: 20px 0 0; max-width: 36rem; font-size: var(--fs-lead, 1.125rem); color: var(--on-dark-2); }
.p2-f .k2-sign .map__frame { background: var(--graphite-2); }
.p2-f .k2-sign .map__ph { padding: clamp(20px, 3vw, 36px); }
.p2-f .k2-sign .map__h { color: var(--on-dark); margin: 0; }
.p2-f .k2-sign .map__ph p { color: var(--on-dark-2); margin: 0; }
.p2-f .k2-sign .btn--ink { background: var(--on-dark); color: var(--graphite); }
.p2-f .k2-sign .link { color: var(--on-dark); }

@media (min-width: 960px) {
  .p2-f .k2-top__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 120px); row-gap: clamp(32px, 3vw, 56px); }
  .p2-f .k2-top__hd { grid-column: 1 / -1; }
  .p2-f .k2-top__main { align-self: start; }
  .p2-f .k2-plan__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p2-f .k2-sign { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 120px); align-items: start; }
  .p2-f .k2-sign__fig { grid-row: 1 / span 2; }
  .p2-f .k2-sign .map__frame { grid-column: 2; }
}
/* telefon: poziv, adresa i ruta su prvi; lenjir postaje obična tabela; fotografija tek posle radnog vremena */
@media (max-width: 599px) {
  .p2-f .k2-act .btn { flex: 1 1 100%; }
  .p2-f .k2-ruler { --dc: 1fr; --xc: auto; }
  .p2-f .k2-ruler .c-ruler__scale, .p2-f .k2-ruler .c-ruler__t, .p2-f .k2-ruler .c-ruler__now { display: none; }
  .p2-f .k2-ruler li { grid-template-columns: minmax(0, 1fr) auto; }
  .p2-f .k2-fig img { aspect-ratio: 4 / 3; object-position: 72% 50%; }
}

/* Owner 28.10. (pregled na 2560 px): Kontakt se razvlačio preko cele širine. Kao u C: sadržaj u centriranoj koloni do 75rem,
   kartica radnog vremena uža (do 31rem), adresa ne raste preko 8.5rem, fotografija i dalje od ivice do ivice ali niža na širokim ekranima. */
.p2-f .k2-top, .p2-f .k2-plan, .p2-f .k2-sign { --k2pad: max(var(--edge), calc((100% - 75rem) / 2)); padding-inline: var(--k2pad); }
/* owner 28.10. (2. pregled): Vračar uvek od ivice do ivice ekrana; potpis poravnat sa kolonom teksta */
.p2-f .k2-top { overflow-x: clip; }
.p2-f .k2-fig { margin-inline: calc(50% - 50vw); }
.p2-f .k2-fig figcaption { padding-inline: max(var(--edge), calc((100% - 75rem) / 2)); }
.p2-f .k2-ruler .c-ruler__x { white-space: nowrap; }
.p2-f .k2-addr { font-size: clamp(3.25rem, 1rem + 7vw, 8.5rem); }
@media (min-width: 960px) {
  .p2-f .k2-top__grid { grid-template-columns: minmax(0, 1fr) minmax(22rem, 31rem); column-gap: clamp(40px, 5vw, 96px); }
  .p2-f .k2-ruler { --dc: 6.75rem; --xc: 8.5rem; }
  .p2-f .k2-fig img { max-height: 70vh; }
  .p2-f .k2-sign { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}