/* Optic Shop P2 · varijanta B (Editorial). Učitava se POSLE p2.css, samo u 07_PREVIEW/p2b.
   Isti logo, paleta, tipografija, hero, „Vračar" i HOME_VISIT. Menja se režija: veći kadrovi, isečci koji prelaze ivicu
   sekcije, slojevi (bordo panel iza osobe), smelija skala naslova, puna fotografska traka.
   Plava jakna je jedini hladni akcenat i ostaje samo u fotografiji; nijedna površina ne dobija plavu.
   Telefon: isečci u toku dokumenta, bez preklapanja teksta. Pravila za .r5-visit i .r5-intro se ovde NE pišu (lock). */

.p2-b .p2-h2 { font-size: clamp(3rem, .8rem + 6.2vw, 9.5rem); }
.p2-b .r6-ph__h, .p2-b .r6-split__h, .p2-b .r8-ab__h { font-size: clamp(2.75rem, 1rem + 5vw, 7.5rem); line-height: .92; }

/* ------------------------------------------------ S1 · vrste: prosed muškarac kao veliki isečak, stoji na donjoj ivici sekcije */
.p2-b .p2-kinds { position: relative; z-index: 2; background: var(--bone); color: var(--ink); }
.p2-b .p2-kind__p { color: var(--ink-2); }
.p2-b .p2-kind__a { color: var(--ink); }
.p2-b .p2-kind--d .p2-kind__fig { aspect-ratio: auto; background: none; }
.p2-b .p2-kind--s { background: var(--bordo); color: var(--on-dark); padding: 0 0 28px; }
.p2-b .p2-kind--s .p2-kind__copy { padding: 0 24px; }
.p2-b .p2-kind--s .p2-kind__p { color: var(--on-bordo-2); }
.p2-b .p2-kind--s .p2-kind__a { color: var(--on-dark); }
.p2-b .p2-kind--s .p2-kind__fig { aspect-ratio: 5 / 4; }
@media (min-width: 960px) {
  .p2-b .p2-kinds { padding-bottom: clamp(64px, 7vw, 128px); }
  .p2-b .p2-kinds__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: clamp(16px, 2vw, 40px); row-gap: 48px; align-items: start; margin-top: 0; }
  .p2-b .p2-kinds__h { grid-column: 1 / 8; }
  .p2-b .p2-kinds { display: grid; }
  .p2-b .p2-kind--d { display: contents; }
  .p2-b .p2-kind--d .p2-kind__copy { grid-column: 1 / 6; grid-row: 1; align-self: start; margin-top: clamp(28px, 3vw, 56px); }
  .p2-b .p2-kind--d .p2-kind__h { font-size: clamp(2rem, 1.2rem + 1.6vw, 3.25rem); }
  .p2-b .p2-kind--d .p2-kind__fig { grid-column: 7 / 13; grid-row: 1 / 3; align-self: end; width: 100%; max-width: 640px; justify-self: end;
    margin-bottom: calc(-1 * clamp(64px, 7vw, 128px)); position: relative; z-index: 3; }
  .p2-b .p2-kind--s { grid-column: 1 / 6; grid-row: 2; align-self: end; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px; padding: 0 24px 0 0; }
  .p2-b .p2-kind--s .p2-kind__fig { aspect-ratio: 4 / 5; }
  .p2-b .p2-kind--s .p2-kind__copy { padding: 0 0 24px; }
}

/* ------------------------------------------------ S2 · oblik: grafit, veliki providni okvir, žena u plavoj ispred bordo panela */
.p2-b .p2-fit { background: var(--graphite); color: var(--on-dark); position: relative; overflow: hidden; }
.p2-b .p2-fit__lead, .p2-b .p2-fit__more { color: var(--on-dark-2); }
.p2-b .p2-fit__more .link { color: var(--on-dark); }
.p2-b .p2-fit .p2-spot__txt b { color: var(--on-dark); }
.p2-b .p2-fit .p2-spot__txt { color: var(--on-dark-2); }
.p2-b .p2-fit .p2-spot { border-color: var(--line-dark); }
.p2-b .p2-fit__person { position: relative; isolation: isolate; }
.p2-b .p2-fit__person::before { content: ""; position: absolute; z-index: -1; inset: 28% -12% 0 -12%; background: var(--bordo); }
@media (min-width: 960px) {
  .p2-b .p2-fit__stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .p2-b .p2-fit__frame { margin-left: calc(-1 * var(--edge) + 8px); }
  .p2-b .p2-fit .p2-spots { padding-right: 8px; }
  .p2-b .p2-fit__person { width: 100%; max-width: 520px; justify-self: end; margin-top: -12vw; }
  .p2-b .p2-fit__person::before { inset: 34% -18% -1px -6%; }
}

/* ------------------------------------------------ S3 · stakla: slika do ivice ekrana, ikonice veće i crvene */
.p2-b .p2-lens { background: var(--chalk); }
.p2-b .p2-lens__it .p2-ico { color: var(--red-cta); width: 36px; height: 36px; }
@media (min-width: 960px) {
  .p2-b .p2-lens { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); padding-left: 0; }
  .p2-b .p2-lens__fig { max-width: none; aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------ B traka: pun kadar, tekst u tamnom delu slike */
.p2-b .p2-band { display: grid; position: relative; background: var(--graphite); color: var(--on-dark); }
.p2-b .p2-band__fig { margin: 0; aspect-ratio: 836 / 941; }
.p2-b .p2-band__copy { padding: 40px var(--edge) 56px; }
.p2-b .p2-band__h { font: var(--d-wght) clamp(2.5rem, 1rem + 4.4vw, 6.5rem)/var(--d-lh) var(--display); font-stretch: var(--d-stretch);
  letter-spacing: var(--d-track); margin: 0 0 24px; max-width: 14ch; text-wrap: balance; }
.p2-b .p2-band__a { color: var(--on-dark); }
@media (min-width: 768px) {
  .p2-b .p2-band { min-height: min(56.3vw, 92vh); }
  .p2-b .p2-band__fig { position: absolute; inset: 0; aspect-ratio: auto; }
  .p2-b .p2-band__fig img { object-position: 70% 30%; }
  .p2-b .p2-band__copy { position: relative; z-index: 1; align-self: end; padding: var(--r5-sec) var(--edge); max-width: 52%; }
}

/* ------------------------------------------------ vodič: delovi okvira na grafitu (crni okvir dobija svetlu podlogu kartice) */
.p2-b .p2-parts { background: var(--bone); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
    /* isečak u S1 lagano izranja dok sekcija ulazi; samo transform/opacity */
    .p2-b .p2-kind--d .p2-kind__fig { animation: p2b-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes p2b-rise { from { transform: translateY(6%); opacity: .4; } to { transform: none; opacity: 1; } }
    .p2-b .p2-band__fig img { animation: mx-cardimg linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}


/* QA korekcija: B na tabletu (768-959) isečak u S1 manji, da sekcija ne bude duga */
@media (min-width: 600px) and (max-width: 959px) { .p2-b .p2-kind--d .p2-kind__fig { max-width: 460px; margin-inline: auto; } }
.p2-b .p2-kind__fig.is-cutout { background: none; }