/* Optic Shop P2 · zajedničke nove sekcije (učitava se POSLE motion.css; samo 07_PREVIEW/p2a i p2b).
   Ovo je varijanta A (Refined): isti tokeni, tipografija i oblici kao R05/R06; nove sekcije dopunjuju ritam tonova
   film → bone → GRAFIT (vrste) → hladna svetla → BONE (oblik) → bordo → bordo → HAZE (stakla) → chalk → bone → grafit.
   Oblici: fotografije oštri uglovi, dugmad i oznake pun radijus. Hero, „Vračar" i HOME_VISIT se ne diraju. */

.p2-h2 { font: var(--d-wght) clamp(2.75rem, 1rem + 4.6vw, 7rem)/var(--d-lh) var(--display); font-stretch: var(--d-stretch);
  letter-spacing: var(--d-track); text-wrap: balance; margin: 0; }
.p2 .p2-kind__a, .p2 .p2-lens__a, .p2 .p2-band__a, .p2 .p2-fit__more .link { font-weight: var(--ui-wght); }
.p2-ico { flex: none; color: var(--red); }
.p2 figure.is-cutout { background: none; }
.p2 figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p2 figure.is-cutout img { object-fit: contain; }

/* ------------------------------------------------ S1 · vrste naočara (grafit, dve fotografije različite veličine) */
.p2-kinds { background: var(--graphite); color: var(--on-dark); padding: var(--r5-sec) var(--edge); }
.p2-kinds__grid { display: grid; gap: 40px; margin-top: clamp(40px, 5vw, 96px); }
.p2-kind { display: grid; gap: 20px; align-content: start; }
.p2-kind__fig { aspect-ratio: 4 / 5; overflow: hidden; background: var(--graphite-2); }
.p2-kind__h { font: var(--h-wght) clamp(1.75rem, 1.1rem + 1.4vw, 2.75rem)/1 var(--display); letter-spacing: var(--h-track); margin: 0; }
.p2-kind__p { color: var(--on-dark-2); max-width: 34rem; margin: 12px 0 18px; }
.p2-kind__a { color: var(--on-dark); }
@media (min-width: 960px) {
  .p2-kinds__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; }
  .p2-kind--s { padding-bottom: clamp(40px, 8vw, 160px); }
  .p2-kind--s .p2-kind__fig { aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------ S2 · gde okvir dodiruje lice (bone, okvir sa oznakama + osoba) */
.p2-fit { background: var(--bone); padding: var(--r5-sec) var(--edge); }
.p2-fit__lead { max-width: 34rem; margin: 18px 0 0; font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem); color: var(--ink-2); }
.p2-fit__stage { display: grid; gap: 32px; margin-top: clamp(40px, 5vw, 88px); align-items: end; }
.p2-fit__frame { position: relative; }
.p2-fit__fig { margin: 0; }
.p2-fit__person { margin: 0; justify-self: center; width: min(80vw, 420px); aspect-ratio: 4 / 5; }
.p2-dots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.p2-dots li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 999px; background: var(--red-cta); color: #FBF8F5; font: 700 .875rem/1 var(--text); font-stretch: 100%;
  box-shadow: 0 0 0 6px rgb(195 36 48 / .2); }
.p2-spots { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.p2-spot { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.p2-spot__dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--red-cta);
  color: #FBF8F5; font: 700 .8125rem/1 var(--text); font-stretch: 100%; }
.p2-spot__txt { line-height: 1.45; }
.p2-spot__txt b { display: block; font-weight: var(--ui-wght); }
.p2-fit__more { margin: clamp(32px, 4vw, 56px) 0 0; max-width: 46rem; color: var(--ink-2); }
.p2-fit__more .link { margin-left: .4em; color: var(--ink); }
@media (min-width: 960px) {
  .p2-fit__stage { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(24px, 4vw, 72px); }
  .p2-fit__person { width: 100%; justify-self: end; }
  .p2-spots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
  .p2-spot { display: block; border-top: 1px solid var(--line); padding-top: 14px; }
  .p2-spot__dot { margin-bottom: 10px; }
}

/* ------------------------------------------------ S3 · stakla (haze, slika + tri navike sa ikonicama) */
.p2-lens { background: var(--haze); padding: var(--r5-sec) var(--edge); display: grid; gap: 40px; align-items: center; }
.p2-lens__fig { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; max-width: 560px; }
.p2-lens__p { max-width: 34rem; margin: 18px 0 0; font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem); color: var(--ink-2); }
.p2-lens__list { list-style: none; padding: 0; margin: clamp(28px, 3vw, 44px) 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.p2-lens__it { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.p2-lens__it .p2-ico { grid-row: span 2; margin-top: 2px; color: var(--bordo-2); }
.p2-lens__it b { font-weight: var(--ui-wght); }
.p2-lens__it span { color: var(--ink-2); }
.p2-lens__a { color: var(--ink); }
@media (min-width: 960px) {
  .p2-lens { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 7vw, 140px); }
  .p2-lens__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; column-gap: 28px; }
  .p2-lens__it { display: grid; grid-template-columns: 1fr; row-gap: 8px; border-bottom: 0; border-top: 1px solid var(--line); padding-top: 20px; }
  .p2-lens__it .p2-ico { grid-row: auto; }
}

/* ------------------------------------------------ Dioptrijska stakla: ikonice uz navike */
.r6-hab__i .p2-ico { display: block; width: 34px; height: 34px; margin-bottom: 14px; color: var(--red-cta); }

/* ------------------------------------------------ vodič: delovi okvira (svetla podloga vodiča) */
.p2-parts { padding: clamp(56px, 7vw, 120px) var(--edge); }
.p2-parts__h { font: var(--h-wght) clamp(1.875rem, 1.1rem + 1.8vw, 3rem)/1.02 var(--display); letter-spacing: var(--h-track); margin: 0 0 clamp(28px, 4vw, 56px); max-width: 22ch; }
.p2-parts__col { max-width: 980px; }
@media (min-width: 960px) { .p2-parts .p2-spots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------ B traka (u A se ne gradi) */
.p2-band { display: none; }

/* ------------------------------------------------ pokret: isti sistem kao MOTION_R01 (naslov maska, slika se otkriva) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .p2-h2 { animation: mx-wipe linear both; animation-timeline: view(); animation-range: entry 5% cover 32%; }
    .p2-kind__fig:not(.is-cutout), .p2-lens__fig { animation: mx-card linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .p2-kind__fig img { transition: transform .9s var(--mx-out, cubic-bezier(.23, 1, .32, 1)); }
  .p2-kind:hover .p2-kind__fig img { transform: scale(1.04); }
  .p2-spot__dot { transition: transform .18s cubic-bezier(.23, 1, .32, 1); }
  .p2-spot:hover .p2-spot__dot { transform: scale(1.12); }
}

/* telefon: sunčane u nižem kadru da sekcija ne bude dvostruko duga; osoba u S2 manja */
@media (max-width: 959px) {
  .p2-kind--s .p2-kind__fig { aspect-ratio: 16 / 10; }
  .p2-fit__person { width: min(64vw, 340px); }
}

/* QA korekcija: A prva pločica je isečak (sako) poravnat dole desno; slika stakala na strani Dioptrijska stakla; S2 bez osobe u A */
.p2-kind__fig.is-cutout { background: var(--graphite-2); }
.p2-kind__fig.is-cutout img { object-position: right bottom; }
.p2-lensfig { background: var(--bone); padding: clamp(48px, 6vw, 96px) var(--edge) 0; }
.p2-lensfig__fig { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; max-width: 1240px; }
.p2-lensfig__fig img { object-position: 50% 62%; }
@media (min-width: 960px) { .p2-a .p2-fit__stage { grid-template-columns: 1fr; } .p2-a .p2-fit__col { max-width: 1040px; } }
@media (max-width: 767px) { .p2-dots li { width: 24px; height: 24px; font-size: .75rem; box-shadow: 0 0 0 4px rgb(195 36 48 / .2); } .p2-lensfig__fig { aspect-ratio: 4 / 5; } }