/*
Theme Name: Optimus Studio
Theme URI: https://optimusstudio.rs
Author: Strongweb
Author URI: https://strongweb.rs
Description: Lean custom WordPress theme for Optimus Studio, Optimus Doors, and Optimus Living.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: optimus-studio
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.has-menu-open,
body.has-lightbox-open {
  overflow: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--sp-1);
}

button,
input,
textarea,
select {
  font: inherit;
}

.site-header,
.site-footer {
  background: var(--surface);
  color: var(--on-surface);
  border-color: var(--accent);
}

.site-header {
  border-bottom: 1px solid var(--accent);
  position: relative;
  z-index: 20;
}

.site-footer {
  border-top: 1px solid var(--accent);
}

.site-header__inner,
.site-footer__inner,
.site-main {
  width: min(100% - var(--sp-6), var(--maxw-content));
  margin-inline: auto;
}

.site-header__inner,
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
}

.site-header--studio,
.site-footer--studio {
  --surface: var(--os-paper);
  --on-surface: var(--os-navy);
  --accent: var(--os-gold);
}

.site-header--doors,
.site-footer--doors {
  --surface: var(--os-navy);
  --on-surface: var(--text-on-dark);
  --accent: var(--os-gold);
}

.site-header--living,
.site-footer--living {
  /* v2 Living identity (2026-08-06): Lan surface + žalfija accent, not the
     v1 cream/dusty-blue pair — see tokens.css --os-dusty-blue LEGACY note. */
  --surface: var(--os-linen);
  --on-surface: var(--os-navy);
  --accent: var(--os-sage);
}

.site-logo {
  display: inline-flex;
  align-items: center;
}

.site-logo img {
  width: 180px;
}

/* Studio wordmark nema OD/OL monogram, pa deluje sitnije — dajemo mu veću
   širinu (215px). Logo je kvadratni SVG sa dosta vertikalne praznine u
   artboardu, pa negativnim margin-block vraćamo njegov DOPRINOS visini
   headera na isti kao kod 180px (=(215-180)/2 po strani). Višak je providna
   praznina; glifovi su centrirani, ništa se ne seče. Header ostaje jednake
   visine kao Doors/Living. */
.site-header--studio .site-logo img {
  width: 258px;
  margin-block: calc((258px - 180px) / -2);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: 0;
  list-style: none;
}

.site-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-surface);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}

/* Nav linkovi: hover/focus prelazi u akcentnu boju (brend-svesno).
   focus-visible dodaje podvlačenje za tastaturu (pristupačnost). */
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent);
}

.site-nav a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}



.brand-switcher ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: 0;
  list-style: none;
}

.brand-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sp-6);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}

/* Neaktivne pilule dobijaju suptilan akcentni hover + focus-visible
   (nav dugmad moraju imati affordance; aktivna/trenutna ostaje pun fil). */
.brand-switcher a:not([aria-current="page"]):hover,
.brand-switcher a:not([aria-current="page"]):focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}

.brand-switcher a[aria-current="page"] {
  background: var(--accent);
  color: var(--surface);
}

.site-main {
  padding-block: var(--sp-8);
}

.site-main--full {
  width: 100%;
  max-width: none;
  padding-block: 0;
}

.entry {
  max-width: var(--maxw-prose);
}

.entry-title,
.wp-block-heading h1,
h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, var(--fs-display-l));
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--on-surface);
}

.entry-content {
  margin-top: var(--sp-5);
}

.entry-content > * + * {
  margin-top: var(--sp-4);
}

.theme-blank-state {
  display: grid;
  gap: var(--sp-5);
  max-width: var(--maxw-prose);
}

.theme-blank-state__script {
  font-family: var(--font-script);
  font-size: var(--fs-script-l);
  line-height: 1.2;
  color: var(--accent);
}

.studio-hero .os-section--dark,
.studio-hero .os-section--light,
.contact-split .os-section--dark,
.contact-split .os-section--paper {
  padding-inline: var(--sp-7);
}

.studio-hero {
  position: relative;
}

.studio-hero__panel,
.contact-panel {
  min-height: 78vh;
  display: grid;
  align-items: center;
}

/* Više vazduha oko teksta na naslovnoj split-hero panelima: gore malo, dole
   dosta (Boško 2026-08-26). Paneli su centrirani u 78vh, pa padding pomera
   centriranje i pravi asimetričan prostor — malo gore, znatno dole. */
.studio-hero__panel {
  padding-block: var(--sp-6) var(--sp-10);
}

.studio-hero__content,
.contact-panel__inner {
  width: min(100%, var(--maxw-prose));
  display: grid;
  gap: var(--sp-4);
  margin-inline: auto;
  justify-items: start;
  text-align: left;
}

.studio-hero__logo {
  width: clamp(160px, 32vw, 240px);
  /* EKSPERIMENT (revertabilno): logo SVG je centriran u kvadratnom 317x317
     artboardu, pa vizuelno deluje uvučen udesno u odnosu na tekst ispod.
     Vučemo ga ulevo za ~13% sopstvene sirine da mu se leva ivica poklopi. */
  margin-left: calc(clamp(160px, 32vw, 240px) * -0.13);
}

.studio-hero__script {
  font-size: clamp(var(--fs-script-m), 4vw, var(--fs-script-l));
  color: var(--accent);
}

.studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: flex-start;
}

.studio-corner-menu {
  position: fixed;
  /* U ravni sa header redom (logo/pilule), ne u gornjem ćošku. Header je
     ~228px (logo boks 180 + 2×24 padding), centar reda ~114px; hamburger je
     48px, pa top = 114 − 24 = 90. Ulevo od ivice (sp-7). Mobilni override
     ispod postavlja svoje vrednosti. Boško 2026-08-26. */
  top: 90px;
  right: var(--sp-7);
  z-index: 120;
  display: inline-grid;
  gap: var(--sp-2);
  width: var(--sp-7);
  height: var(--sp-7);
  place-content: center;
  padding: 0;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.studio-corner-menu:hover,
.studio-corner-menu:focus-visible {
  color: var(--os-gold);
  border-color: var(--os-gold);
  outline: none;
}

body.has-menu-open .studio-corner-menu {
  opacity: 0;
  pointer-events: none;
}

.studio-corner-menu span {
  display: block;
  width: var(--sp-4);
  height: 1px;
  background: currentColor;
}

.fullscreen-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  overflow-y: auto;
  color: var(--os-navy);
  background: var(--os-paper);
}

.fullscreen-menu.is-open {
  display: block;
}

.fullscreen-menu__inner {
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: var(--sp-8);
  width: min(100% - var(--sp-6), var(--maxw-wide));
  margin-inline: auto;
  padding-block: var(--sp-8);
}

.fullscreen-menu__top {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.fullscreen-menu__close {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--os-navy);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.fullscreen-menu__close:hover,
.fullscreen-menu__close:focus-visible {
  color: var(--os-gold);
  outline: none;
}

.fullscreen-menu__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(240px, 0.38fr);
  gap: var(--sp-9);
  align-items: center;
}

.fullscreen-menu__primary ul,
.fullscreen-menu__secondary ul {
  display: grid;
  gap: var(--sp-3);
  padding: 0;
  list-style: none;
}

.fullscreen-menu__primary a {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-display-m), 8vw, var(--fs-display-xl));
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--text-on-light-muted);
  text-decoration: none;
}

.fullscreen-menu__primary a.is-active,
.fullscreen-menu__primary a:hover,
.fullscreen-menu__primary a:focus-visible {
  color: var(--os-navy);
  outline: none;
}

.fullscreen-menu__secondary {
  min-height: 280px;
}

.fullscreen-menu__panel {
  display: none;
  gap: var(--sp-5);
}

.fullscreen-menu__panel.is-active {
  display: grid;
}

.fullscreen-menu__panel .os-label {
  color: var(--os-gold);
}

.fullscreen-menu__panel a {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--os-graphite);
  text-decoration: none;
}

.fullscreen-menu__panel a:hover,
.fullscreen-menu__panel a:focus-visible {
  color: var(--os-gold);
  outline: none;
}

.fullscreen-menu__subitems {
  padding-inline-start: var(--sp-4);
  gap: var(--sp-2);
}

.fullscreen-menu__subitems a {
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  text-transform: none;
  color: var(--text-on-light-muted);
}

.studio-intro__inner {
  display: grid;
  gap: var(--sp-5);
  max-width: var(--maxw-prose);
}

.studio-intro .os-divider {
  margin: 0;
  width: var(--sp-8);
}

.studio-card-grid {
  align-items: stretch;
}

/* Studio naslovna: manji razmak između „Dve kuće" uvoda i kartica ispod —
   sekcije nose sp-10 (128px) i gore i dole, pa je gep = 256px. Smanjujemo
   SAMO susedne ivice (uvod-dno + kartice-vrh): desktop ~-30%, mobilni -50%
   (Boško 2026-08-26). */
.studio-intro {
  padding-bottom: calc(var(--sp-10) * 0.7);
}
.studio-cards-section {
  padding-top: calc(var(--sp-10) * 0.7);
}

@media (max-width: 768px) {
  .studio-intro {
    padding-bottom: calc(var(--sp-10) * 0.5);
  }
  .studio-cards-section {
    padding-top: calc(var(--sp-10) * 0.5);
  }
}

.studio-link-card {
  display: grid;
  gap: var(--sp-3);
  text-decoration: none;
}

.studio-bottom-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.contact-lead {
  color: var(--on-surface);
}

.contact-details {
  display: grid;
  gap: var(--sp-4);
}

.contact-details div {
  display: grid;
  gap: var(--sp-1);
}

.contact-details dt {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.contact-details dd {
  color: var(--on-surface);
}

.contact-map-placeholder {
  min-height: 260px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-on-dark);
  color: var(--text-on-dark-muted);
}

.contact-form {
  display: grid;
  gap: var(--sp-4);
}

.contact-form p {
  display: grid;
  gap: var(--sp-2);
}

.contact-form .os-input:focus {
  border-color: var(--os-gold);
  box-shadow: 0 0 0 3px var(--line-gold-soft);
}

/* Honeypot — off-screen, ne prazni prostor u formi (bot ga popuni, čovek ne vidi). */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status poruke posle slanja (?poruka=hvala|greska). Tiho, u duhu sistema —
   uspeh = zlatna kontura, greška = navy kontura (bez crvene drame). */
.contact-status {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--os-paper);
  color: var(--os-navy);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
}

.contact-status--err {
  border-left-color: var(--os-navy);
}

.doors-hero__inner,
.doors-feature-row,
.doors-cta-band,
.doors-single-hero__inner,
.doors-single-content {
  display: grid;
  gap: var(--sp-7);
}

/* Desktop: originalni balansiran hero (bio je u redu — Boško). Na mobilnom
   se min-height gasi (media query) da nema prazne rupe iznad kratkog sadržaja. */
.doors-hero__inner {
  min-height: 52vh;
  align-items: center;
}

.doors-hero__copy,
.doors-section-stack,
.doors-single-hero__copy {
  display: grid;
  gap: var(--sp-5);
}

.doors-hero__copy,
.doors-section-heading,
.doors-single-hero__copy {
  justify-items: start;
  text-align: left;
}

.doors-hero__script {
  font-size: var(--fs-script-l);
  color: var(--accent);
}

.doors-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: flex-start;
}

.doors-section-heading {
  display: grid;
  gap: var(--sp-3);
  max-width: var(--maxw-prose);
}

.doors-section-heading--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.doors-product-card__link {
  text-decoration: none;
}

.doors-collections,
.doors-products-section {
  padding-block: var(--sp-9);
}

.doors-collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.doors-collection-card {
  display: grid;
  align-content: end;
  gap: var(--sp-4);
  min-height: 360px;
  padding: var(--sp-7);
  color: var(--on-surface);
  text-decoration: none;
  border: 1px solid var(--line-on-light);
}

.doors-feature-row {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: start;
}

.doors-proof-list {
  display: grid;
  gap: var(--sp-4);
}

.doors-product-card,
.living-project-card {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.doors-product-card__link,
.living-project-card__link {
  display: grid;
  color: inherit;
  text-decoration: none;
}

.doors-product-card__media,
.doors-single-hero__media,
.doors-gallery-placeholder,
.living-project-card__media,
.living-project-hero__media {
  background: var(--surface-light);
}

.doors-product-card__media,
.living-project-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.doors-product-card__media img,
.doors-single-hero__media img,
.doors-gallery-grid img,
.living-project-card__media img,
.living-project-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doors-product-card__body,
.living-project-card__body {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
}

.doors-product-card__title,
.living-project-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--on-surface);
}

.living-project-card__location {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  color: var(--text-on-light-muted);
}

.living-project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.doors-product-card__excerpt {
  overflow: hidden;
  color: var(--on-surface);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.doors-product-card__cta {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.quote-interlude {
  padding-block: var(--sp-9);
  color: var(--on-surface);
  background: var(--surface);
}

.quote-interlude--cream {
  --surface: var(--os-cream);
  --on-surface: var(--os-navy);
  --accent: var(--os-gold);
}

.quote-interlude--navy {
  --surface: var(--os-navy);
  --on-surface: var(--text-on-dark);
  --accent: var(--os-gold);
}

.quote-interlude__inner {
  display: grid;
  place-items: center;
  text-align: center;
}

.quote-interlude p {
  max-width: var(--maxw-prose);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-display-s), 5vw, var(--fs-display-m));
  font-style: italic;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--on-surface);
}

.studio-about-hero,
.studio-story,
.studio-about-section,
.studio-entry-section,
.living-hero,
.living-intro,
.living-services,
.living-process,
.living-projects,
.living-reasons,
.doors-custom-orders,
.contact-showroom {
  padding-block: var(--sp-9);
}

.studio-narrow,
.living-narrow,
.living-hero__inner {
  display: grid;
  gap: var(--sp-5);
  max-width: var(--maxw-prose);
}

.studio-entry-grid,
.living-card-grid,
.living-before-after-grid,
.living-process-list {
  display: grid;
  gap: var(--sp-5);
}

.studio-entry-grid,
.living-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.living-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Living projekti arhiva: 4 u redu (4 projekta = simetričan red). Boško 2026-08-19.
   Nadjačava .os-grid auto-fit koji je davao 3+1. */
.living-project-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .living-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .living-project-grid { grid-template-columns: 1fr; }
}

.studio-entry-card,
.living-card,
.living-process-list li {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  color: var(--on-surface);
  text-decoration: none;
  border: 1px solid var(--line-on-light);
}

.studio-entry-card--doors {
  --surface: var(--os-navy);
  --on-surface: var(--text-on-dark);
  --accent: var(--os-gold);
  background: var(--surface);
  color: var(--on-surface);
  border-color: var(--line-on-dark);
}

.studio-entry-card--living {
  /* v2 Living identity (2026-08-06): Lan + žalfija, not v1 cream/dusty-blue. */
  --surface: var(--os-linen);
  --on-surface: var(--os-navy);
  --accent: var(--os-sage);
  background: var(--surface);
}

.living-page .os-section--paper,
.living-page .quote-interlude--cream {
  --accent: var(--os-sage);
}

.living-hero__script {
  font-size: clamp(var(--fs-script-m), 4vw, var(--fs-script-l));
  color: var(--accent);
}

.living-card h3,
.living-process-list h3 {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--on-surface);
}

.living-process-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  list-style: none;
}

.living-process-list span {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.living-before-after-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.living-card__subtitle {
  margin-top: calc(-1 * var(--sp-2));
}

.living-projects__archive-link {
  display: flex;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────
   LIVING — projekti (arhiva + pojedinačna strana)
───────────────────────────────────────────────────────────── */

.living-archive-hero,
.living-projects-archive-section,
.living-project-meta,
.living-project-story,
.living-project-before-after,
.living-project-segment {
  padding-block: var(--sp-9);
}

.living-project-hero {
  position: relative;
  display: grid;
  padding: 0;
}

.living-project-hero__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.living-project-hero__copy {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-7);
}

.living-project-meta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.living-project-meta__item {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.living-project-meta__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.living-project-story .entry-content {
  max-width: var(--maxw-prose);
  margin-inline: auto;
}

.before-after {
  --position: 50%;
  display: grid;
  gap: var(--sp-3);
}

.before-after__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line-on-light);
  background: var(--surface-page);
}

.before-after__image {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--surface-card);
}

.before-after__image--before {
  width: var(--position);
  overflow: hidden;
  z-index: 1;
  border-right: 1px solid var(--accent);
}

.before-after__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after__image span {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.before-after__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  z-index: 2;
  width: 3px;
  margin-left: -1.5px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(23, 42, 58, 0.18);
  pointer-events: none;
}
/* Drag handle — bela okrugla ručica sa strelicama, naznaka da se vuče. */
.before-after__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172A3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8l-3 4 3 4'/%3E%3Cpath d='M14 8l3 4-3 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  box-shadow: 0 2px 10px rgba(23, 42, 58, 0.3);
}

.before-after__range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

.before-after__caption {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.doors-archive-description,
.doors-single-excerpt {
  max-width: var(--maxw-prose);
  color: var(--on-surface);
}

/* Client feedback 2026-08-10: narrative group copy needs a tighter reading
   measure than the generic 680px prose column so lines break naturally.
   Scoped modifier (see taxonomy-os_product_cat.php) -- only the sigurnosna
   leaf-group hero description, not every .doors-archive-description. */
.doors-archive-description--prose {
  max-width: 64ch;
  margin-inline: auto;
}

.doors-archive-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  color: var(--accent);
}

/* Sigurnosna vrata group archives only (client feedback 2026-08-10, pass
   #3, revised pass #4): small trail back to Doors / the group hub, sitting
   below the lead description in the hero. Centered to match the rest of
   the hero copy; font-size stays the small "label" scale. Pass #4: client
   wanted allcaps with wider kerning (looked cramped in sentence case) and
   visible breathing room around the "/" separator -- .doors-breadcrumb__sep
   below carries the spacing so it works whether the separator sits inline
   in markup or wraps. */
.doors-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-breadcrumb);
  text-transform: uppercase;
  color: var(--accent);
}

.doors-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.doors-breadcrumb a:hover,
.doors-breadcrumb a:focus-visible {
  text-decoration: underline;
}

.doors-breadcrumb a:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 2px;
}

.doors-breadcrumb__sep {
  padding: 0 var(--sp-2);
}

/* Group hub (e.g. /doors/sigurnosna-vrata/) -- compact choice cards, two per
   row, image on top / text below. Replaces the earlier big side-by-side
   .doors-feature-row layout (client: "napadno"). */
.doors-archive-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-6);
}

.doors-archive-group-card__link {
  display: grid;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
}

.doors-archive-group-card__link:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
}

/* Client feedback 2026-08-10 pass #3 capped this at one carousel-slide's
   width (≈363px at 1200px viewport); pass #4: still read as too small for a
   2-column grid where each card's own column is ≈580px wide at max
   content width -- left a wide empty margin on both sides of every card.
   Cap removed: the media now fills the full width of its card column
   (width:100%, no max-width), same as the card's title/excerpt below it.
   Aspect ratio (4:5) still comes from .door-carousel__image via the
   single-image door-carousel markup this card reuses -- nothing to add
   here. */
.doors-archive-group-card__media {
  width: 100%;
}

/* Client feedback 2026-08-10 (pass #6): the metalni-štok single-image cap
   added to .door-carousel--single below (for the group-page showcase) has
   a higher-specificity selector here, so it wins regardless of media-query
   order -- the hub teaser (which also renders door-carousel in its 1-image
   state, see taxonomy-os_product_cat.php) must ignore that cap and stay at
   the card's own full width, same as it was before the cap existed. */
.doors-archive-group-card__media .door-carousel--single {
  max-width: none;
  margin-inline: 0;
}

.doors-archive-group-card__body {
  display: grid;
  gap: var(--sp-2);
}

.doors-archive-group-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--on-surface);
}

.doors-archive-group-card__excerpt {
  overflow: hidden;
  color: var(--text-on-light-muted);
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  letter-spacing: var(--ls-body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.doors-archive-group-card__cta {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.doors-archive-group-card__link:hover .doors-archive-group-card__cta,
.doors-archive-group-card__link:focus-visible .doors-archive-group-card__cta {
  color: var(--on-surface);
}

.doors-single-hero__inner {
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
  align-items: center;
}

.doors-single-hero__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.doors-single-showcase {
  padding: 0;
}

.doors-single-showcase__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 82vh;
}

.doors-single-showcase .doors-single-hero__media {
  min-height: 82vh;
}

.doors-single-panel {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--sp-6);
  padding: var(--sp-10) var(--sp-8);
}

.doors-spec-list {
  display: grid;
  gap: var(--sp-4);
  width: min(100%, var(--maxw-prose));
  padding-block: var(--sp-2);
}

.doors-spec-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-on-dark);
}

.doors-spec-list dt {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.doors-spec-list dd {
  font-size: var(--fs-body-s);
  color: var(--text-on-dark);
  text-align: right;
}

.doors-single-content {
  grid-template-columns: minmax(0, var(--maxw-prose)) minmax(240px, 0.45fr);
  align-items: start;
}

.doors-detail-list {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius-lg);
}

.doors-detail-list div {
  display: grid;
  gap: var(--sp-1);
}

.doors-detail-list dt {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.doors-detail-list dd {
  color: var(--on-surface);
}

.doors-gallery-grid,
.doors-installation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
}

.doors-gallery-placeholder {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-on-light);
}

/* ─────────────────────────────────────────────────────────────
   SOBNA VRATA — galerija tipova (bez pojedinačnih strana modela)
───────────────────────────────────────────────────────────── */

.sobna-gallery-tile {
  display: grid;
  gap: var(--sp-2);
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sobna-gallery-tile:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
}

.sobna-gallery-tile__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-light);
}

.sobna-gallery-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-soft);
}

.sobna-gallery-tile:hover .sobna-gallery-tile__media img,
.sobna-gallery-tile:focus-visible .sobna-gallery-tile__media img {
  transform: scale(1.03);
}

.sobna-gallery-tile__caption {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  letter-spacing: var(--ls-body);
  color: var(--on-surface);
}

/* Placeholder pločica — nema fotografije još, ne otvara lightbox. */
.sobna-gallery-tile--placeholder {
  cursor: default;
}

.sobna-gallery-tile__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  text-align: center;
  background: var(--os-linen);
  border: 1px solid var(--line-gold-soft);
}

.sobna-gallery-tile__placeholder-label {
  color: var(--text-on-light-muted);
}

/* ─────────────────────────────────────────────────────────────
   DOOR CAROUSEL — reusable term example row (2026-08-10, client redesign
   pass #2). Built for Sigurnosna vrata group archives, reused wherever
   template-parts/door-carousel.php is called (Sobna vrata planned next).
   Native horizontal scroll + scroll-snap does the paging and the touch
   swipe; JS (assets/js/door-carousel.js) only pages the buttons, handles
   ←/→ on the viewport, and dims a button at each scroll end.
   Client feedback: images at least 2x bigger, fewer per row. Visible
   items: ~3 at ≥1200px, 2 by default (769–1199px), 1 at ≤768px.
   Pass #3 (2026-08-10): controls moved out of the image row entirely into
   their own side gutters (.door-carousel__row flex line), transparent (no
   button box), gold -- they were absolutely positioned over the photos
   before and cut into them.
───────────────────────────────────────────────────────────── */

.door-carousel {
  position: relative;
  /* Grid/flex item min-width defaults to `auto`, which refuses to shrink
     below the content's intrinsic width -- the carousel is a grid item of
     .os-container.doors-section-stack, so without this the wide scroll row
     (esp. after the +30% slide bump) expanded the carousel past its grid
     track and pushed the whole page into horizontal overflow at ≤~1100px.
     min-width: 0 lets it shrink to its track; the reel/viewport then clip
     and scroll internally as intended. (Boško 2026-08-10, curenje fix.) */
  min-width: 0;
}

/* Client feedback 2026-08-10 (pass #5, metalni štok): the 1-image state
   rendered its single photo at the full container width ("ogromna
   slika"). Cap it to roughly the same footprint as one slide in the
   multi-image row at each breakpoint (see .door-carousel__slide formulas
   below and at the ≥1200px / ≤768px media queries) so a group with only
   one example photo doesn't look like a different, oversized component.
   Pass #6: that cap then read as too small for a proper showcase -- the
   *1.3 factor keeps it matched to the multi-slide formula's own pass #6
   +30% bump below, rather than reintroducing a second, drifting size. */
.door-carousel--single {
  display: grid;
  gap: var(--sp-3);
  max-width: calc((100% - var(--sp-5)) / 2);
  margin-inline: auto;
}

.door-carousel--single .door-carousel__image {
  border-radius: var(--radius-lg);
}

/* Client feedback 2026-08-10 (pass #3): arrows were position:absolute over
   the image row and cut into the photos. Row is a flex line of
   [prev][reel][next] so the buttons sit in their own side gutters, never
   overlapping an image; .door-carousel__reel now wraps only the scrollable
   viewport and takes the remaining space. min-width: 0 lets the reel shrink
   below its content's intrinsic width instead of forcing the row (and the
   page) to overflow horizontally when the gutters eat into narrow
   viewports -- the viewport itself stays internally scrollable either way. */
.door-carousel__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.door-carousel__reel {
  flex: 1 1 auto;
  min-width: 0;
}

.door-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  border-radius: var(--radius-lg);
  scrollbar-width: none;
}

/* Vučenje mišem: grab kursor; tokom vučenja auto scroll + bez snap-a. */
.door-carousel__viewport { cursor: grab; }
.door-carousel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.door-carousel__viewport.is-dragging { user-select: none; }
.door-carousel__image { -webkit-user-drag: none; user-select: none; }

.door-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.door-carousel__viewport:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
}

/* align-items: flex-start (client feedback 2026-08-10 pass #4): flex's
   default stretch made every slide match the height of the tallest slide
   in the row, then each slide (a grid of [image, caption]) distributed
   that extra height into its own auto-sized rows -- on a slide whose own
   caption was only 1 line (so it started shorter than a 2-line-caption
   sibling), the stretch shoved its caption row (image is pinned by
   aspect-ratio, so it can't absorb the extra space) down, which visually
   read as "the OTHER slide's eyebrow jumped up" relative to it. flex-start
   makes every slide size to only its own content -- image height is
   already identical everywhere (fixed 4:5 aspect-ratio), so image->eyebrow
   spacing is now the slide's own fixed grid gap on every slide regardless
   of whether its caption wraps to 1 or 2 lines. */
.door-carousel__track {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
}

/* Client feedback 2026-08-10 (pass #6): door photos in the carousel still
   read as too small ("veće slike"). +30% on top of the pass #4 sizing at
   every breakpoint (this base formula, and the ≥1200px / ≤768px overrides
   below) -- fewer slides fit per screen now, which is fine, the horizontal
   scroll carries the rest. */
.door-carousel__slide {
  flex: 0 0 calc((100% - 1 * var(--sp-5)) / 2);
  min-width: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  scroll-snap-align: start;
}

.door-carousel__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface-light);
  border-radius: var(--radius-lg);
}

/* Shared-lightbox trigger (2026-08-10): only present when the caller
   passes lightbox_group -- see template-parts/door-carousel.php. Plain
   button reset so .door-carousel__image inside it looks identical to the
   non-lightbox <img> markup it replaces. */
.door-carousel__trigger {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.door-carousel__trigger:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.door-carousel__caption {
  display: grid;
  gap: var(--sp-1);
  text-align: center;
}

.door-carousel__caption-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.door-carousel__caption-text {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  letter-spacing: var(--ls-body);
  color: var(--on-surface);
}

.door-carousel__control {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--accent);
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-soft);
}

.door-carousel__control:hover {
  opacity: 1;
}

.door-carousel__control:focus-visible {
  opacity: 1;
  outline: 1.5px solid var(--accent);
  outline-offset: 2px;
}

.door-carousel__control:disabled {
  opacity: 0.25;
  cursor: default;
}

.door-carousel__chevron {
  width: 28px;
  height: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .door-carousel__viewport {
    scroll-behavior: auto;
  }
}

/* DOOR CAROUSEL — COMPACT modifier (2026-08-11, Doors landing "Iz
   kolekcije" teaser). The base .door-carousel sizing above (2/3/1 per row,
   +30% "veće slike" bump, 1200px+ widened-section rule) was built for the
   group-archive showcase carousels; this landing teaser needs the opposite
   — a small, quiet mixed-photo strip, not a wide "3 whole doors" feature.
   `.door-carousel--compact` overrides slide width + track gap only; every
   other mechanic (scroll-snap, buttons, keyboard, lightbox) is inherited
   unchanged from the base component. Visible-per-row target: ~4 at
   ≥1200px, 3 by default (tablet), 2 at ≤768px, 1 at ≤360px. */
.door-carousel--compact .door-carousel__track {
  gap: var(--sp-3);
}

/* Malo veći vazduh između naslova „Iz kolekcije" i showcase-a (Boško
   2026-08-25) — povrh gap-a iz .doors-section-stack. +20% (2026-08-25). */
.door-carousel--compact {
  margin-top: calc(var(--sp-5) * 1.2);
}

.door-carousel--compact .door-carousel__slide {
  flex-basis: calc((100% - 2 * var(--sp-3)) / 3);
}

.door-carousel--compact.door-carousel--single {
  max-width: calc((100% - 2 * var(--sp-3)) / 3);
}

@media (max-width: 768px) {
  .door-carousel--compact .door-carousel__slide {
    flex-basis: calc((100% - 1 * var(--sp-3)) / 2);
  }

  .door-carousel--compact.door-carousel--single {
    max-width: calc((100% - 1 * var(--sp-3)) / 2);
  }
}

@media (max-width: 360px) {
  .door-carousel--compact .door-carousel__slide {
    flex-basis: 100%;
  }

  .door-carousel--compact.door-carousel--single {
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .door-carousel--compact .door-carousel__slide {
    flex-basis: calc((100% - 3 * var(--sp-3)) / 4);
  }

  .door-carousel--compact.door-carousel--single {
    max-width: calc((100% - 3 * var(--sp-3)) / 4);
  }
}

/* Standard visually-hidden utility (WP core convention) — first use in this
   theme is the door-carousel live-status region; safe to reuse elsewhere. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────
   SOBNA VRATA — „Kako biramo vaša vrata"
───────────────────────────────────────────────────────────── */

.sobna-guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-7);
}

.sobna-guide-list > div {
  display: grid;
  gap: var(--sp-2);
}

.sobna-guide-list dt {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.sobna-guide-list dd {
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  color: var(--on-surface);
}

/* ─────────────────────────────────────────────────────────────
   SIGURNOSNA VRATA PO MERI — „Kako birate vaša vrata" (2026-08-10)
   Separate ruleset mirroring the sobna-guide-list typography/color above
   (dt/dd pair, gold uppercase label + body text) but its own class: a
   4-column grid instead of sobna's 2/4 split, per this section's own
   client brief. Kept independent so future edits to either block cannot
   accidentally affect the other.
───────────────────────────────────────────────────────────── */

.doors-guide-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.doors-guide-list > div {
  display: grid;
  gap: var(--sp-2);
}

.doors-guide-list dt {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.doors-guide-list dd {
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  color: var(--on-surface);
}

/* ─────────────────────────────────────────────────────────────
   METALNI ŠTOK — „Zašto ugradnja na postojeći štok" (2026-08-10)
   Column-count-only modifier on top of .doors-guide-list: typography, gap
   and the mobile 1-column collapse all come from the shared base rule
   above (the ≤768px selector list already targets .doors-guide-list, so an
   element carrying both classes collapses for free). This modifier only
   overrides the desktop column count from 4 to 3. .doors-guide-conclusion
   is the quiet emphasis line below the columns -- larger and medium-weight
   but on-surface (not --accent gold), so it reads as emphasized without
   competing with the dt labels above it.
───────────────────────────────────────────────────────────── */

.doors-guide-list--metalni {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.doors-guide-conclusion {
  max-width: var(--maxw-prose);
  /* margin-top: separates the conclusion into its own block below the columns.
     Bumped 24px -> 64px -> 96px (Boško 2026-08-10, wants a clear standalone block). */
  margin: var(--sp-9) auto 0;
  text-align: center;
  /* font-family: display (Cormorant), NOT body (Lato). Lato ships only 300/400/700
     on Google Fonts -- it has NO 500 weight -- so --fw-medium (500) fell back and the
     Serbian diacritics (č/ć/š/đ/ž) rendered in a system font, visibly mismatched
     (Boško 2026-08-10). Cormorant has a real 500 with full Latin-ext coverage, and a
     serif closing line reads as an elegant, deliberate statement. */
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-medium);
  color: var(--on-surface);
}

/* ─────────────────────────────────────────────────────────────
   B-SLOTS — generic image slot (2026-08-09)
   Renders a real photo edge-to-edge inside its aspect box. Placeholder
   state is handled entirely by .sobna-gallery-tile (see sobna-gallery-tile
   rules above) via template-parts/project-placeholder-tile.php — this
   class only styles the "photo present" branch of template-parts/image-slot.php.
───────────────────────────────────────────────────────────── */

.os-image-slot {
  display: block;
  overflow: hidden;
  background: var(--surface-light);
  border-radius: var(--radius-lg);
}

.os-image-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shared-lightbox trigger variant (2026-08-10): .os-image-slot is normally
   a <span> (see template-parts/image-slot.php, still untouched); the doors
   gallery and Living project segment galleries render it as a <button>
   instead so the tile can open the shared lightbox. Scoped to the button
   element so plain <span> usages elsewhere are unaffected. */
.os-image-slot.os-image-slot--button {
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.os-image-slot.os-image-slot--button:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
}

/* ─────────────────────────────────────────────────────────────
   DOORS — "Po narudžbini" (naslovna kolekcija, dno /doors/)
───────────────────────────────────────────────────────────── */

.doors-custom-groups {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-7);
}

.doors-custom-group {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.doors-custom-group__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.doors-custom-group--featured .doors-custom-group__tiles {
  gap: var(--sp-5);
}

.doors-custom-orders__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

/* ─────────────────────────────────────────────────────────────
   LIVING — usluge kartice sa slikom (#usluge)
───────────────────────────────────────────────────────────── */

.living-card--service {
  padding: 0;
  overflow: hidden;
}

.living-card--service .os-image-slot,
.living-card--service .sobna-gallery-tile--placeholder {
  border-radius: 0;
}

.living-card__body {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
}

/* ─────────────────────────────────────────────────────────────
   STUDIO — "O nama" (radionica / potpisni prostor)
───────────────────────────────────────────────────────────── */

.studio-about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.studio-about-figure {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.studio-about-figure figcaption {
  text-align: center;
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
   KONTAKT — showroom (16:9, odvojeno od contact-map-placeholder)
───────────────────────────────────────────────────────────── */

.contact-showroom .os-image-slot,
.contact-showroom .sobna-gallery-tile--placeholder {
  max-width: var(--maxw-content);
  margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────
   SHARED LIGHTBOX — assets/js/os-lightbox.js (2026-08-10)
   One overlay reused site-wide (door-carousel groups, doors galerija,
   sobna vrata galerija, Living project segment galleries). Replaces the
   previous sobna-only per-page lightbox block. Client-approved design: navy
   fullscreen overlay, image `contain` (never cropped), quiet caption BELOW
   the image (gold eyebrow + Cormorant title + muted note), gold side
   arrows, X close, "n / N" counter. Background is the existing flat
   rgba navy token (--scrim-navy) -- never a gradient. All markup is
   built in JS and appended once to <body>; these rules never see
   per-page markup, only the classes JS assigns.

   Client pass #2 (2026-08-10):
   - X close collided with the fixed corner-menu toggle (both pinned
     top-right at the same offset). Fix is two-layered: (1) z-index here
     raised above .studio-corner-menu's 120 so the lightbox always wins if
     both were ever visible, (2) the actual fix -- .studio-corner-menu is
     hidden outright via body.has-lightbox-open below (that body class is
     already toggled by os-lightbox.js open/close, no JS change needed).
   - Caption used to sit position:absolute over the image's bottom edge
     (a "navy band on top of the photo"). Now flows in normal layout below
     the image: .os-lightbox is a column flexbox, image and caption are
     the only two non-absolute children, so they stack with a gap instead
     of overlapping.
   - Image capped ~20% smaller (both axes) to leave breathing room for the
     caption underneath.
───────────────────────────────────────────────────────────── */

.os-lightbox {
  position: fixed;
  inset: 0;
  /* Above .studio-corner-menu (120, see header/menu block) -- belt and
     suspenders alongside the body.has-lightbox-open hide rule below. */
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-8);
  background: var(--scrim-navy);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-soft), visibility var(--dur-med) var(--ease-soft);
}

.os-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

/* Corner menu toggle would otherwise sit exactly on top of the lightbox's
   own X close (both pinned top-right) -- hide it entirely while the
   lightbox is open. body.has-lightbox-open is toggled by os-lightbox.js. */
body.has-lightbox-open .studio-corner-menu {
  display: none;
}

/* Living: lightbox pozadina žalfija umesto navy (Boško 2026-08-19). Samo na
   Living stranama; Studio/Doors ostaju na navy scrim-u. */
body.is-living .os-lightbox {
  background: var(--scrim-sage);
}

/* Living: lightbox strelice = puna žalfija krug, netransparentno (Boško 2026-08-19). */
body.is-living .os-lightbox__nav {
  background: var(--os-sage);
  border-radius: 999px;
  opacity: 1;
  box-shadow: var(--shadow-md);
}
body.is-living .os-lightbox__nav:hover,
body.is-living .os-lightbox__nav:focus-visible {
  background: color-mix(in srgb, var(--os-sage) 80%, #14180f);
  opacity: 1;
}

.os-lightbox__image {
  max-width: calc((100% - var(--sp-8) * 2) * 0.8);
  max-height: calc((100vh - var(--sp-10)) * 0.8);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* pointer-events: none -- the caption sits below the image (not over it)
   in normal flow, but stays click-through so a click anywhere in its
   area still falls through to the overlay and closes the lightbox,
   matching every other "outside the image" click. */
.os-lightbox__caption {
  display: grid;
  gap: var(--sp-1);
  max-width: var(--maxw-prose);
  text-align: center;
  pointer-events: none;
}

.os-lightbox__eyebrow {
  font-family: var(--font-body);
  font-size: calc(var(--fs-label) * 0.9);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--os-gold);
}

.os-lightbox__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-l);
  line-height: var(--lh-snug);
  color: var(--text-on-dark);
}

.os-lightbox__note {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  color: var(--text-on-dark-muted);
}

.os-lightbox__close,
.os-lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  color: var(--os-gold);
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-soft);
}

.os-lightbox__close:hover,
.os-lightbox__nav:hover {
  opacity: 1;
}

.os-lightbox__close:focus-visible,
.os-lightbox__nav:focus-visible {
  opacity: 1;
  outline: 1.5px solid var(--os-gold);
  outline-offset: 2px;
}

.os-lightbox__icon {
  width: 28px;
  height: 28px;
}

.os-lightbox__close {
  top: var(--sp-5);
  right: var(--sp-5);
}

.os-lightbox__nav--prev {
  top: 50%;
  left: var(--sp-5);
  transform: translateY(-50%);
}

.os-lightbox__nav--next {
  top: 50%;
  right: var(--sp-5);
  transform: translateY(-50%);
}

.os-lightbox__counter {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--text-on-dark-muted);
}

@media (prefers-reduced-motion: reduce) {
  .os-lightbox {
    transition: none;
  }
}

@media (max-width: 768px) {
  .site-header__inner,
  .site-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .doors-hero__inner,
  .doors-feature-row,
  .doors-cta-band,
  .studio-entry-grid,
  .living-card-grid,
  .living-process-list,
  .living-before-after-grid,
  .doors-single-showcase__inner,
  .doors-single-hero__inner,
  .doors-single-content,
  .doors-product-grid,
  .doors-collection-grid,
  .doors-gallery-grid,
  .doors-installation-grid,
  .sobna-gallery-grid,
  .sobna-guide-list,
  .doors-guide-list,
  .doors-custom-groups,
  .studio-about-grid {
    grid-template-columns: 1fr;
  }

  .doors-custom-group__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Hub choice cards stack one below the other under 768px. */
  .doors-archive-groups {
    grid-template-columns: 1fr;
  }

  /* Door carousel row: 1 door visible per screen on mobile (client
     feedback 2026-08-10 pass #4: bigger images, fewer per row). Already at
     100% of the viewport -- pass #6's +30% bump above has nothing left to
     add here, so this stays unchanged. */
  .door-carousel__slide {
    flex-basis: 100%;
  }

  .door-carousel--single {
    max-width: 100%;
  }

  /* Buttons shrink and the row gutter tightens on narrow screens so the
     reel keeps as much width as possible for the image itself -- the reel's
     min-width: 0 plus the viewport's own overflow-x: auto mean it always
     fits without pushing the page into horizontal scroll, even on very
     narrow phones. */
  .door-carousel__row {
    gap: var(--sp-1);
  }

  .door-carousel__control {
    width: 40px;
    height: 40px;
  }

  .door-carousel__chevron {
    width: 22px;
    height: 22px;
  }

  .studio-hero__panel,
  .contact-panel {
    min-height: auto;
    align-items: start;        /* bez centriranja u visokom tracku — nema gornjeg gepa */
    padding-block: var(--sp-6) calc(var(--sp-6) + 30px);  /* ~30px više dole (Boško) */
  }

  /* Naslovna split-hero: gore malo, dole dosta (Boško 2026-08-26). Paneli su
     top-aligned na mobilnom pa padding radi direktno. */
  .studio-hero__panel {
    padding-block: var(--sp-7) var(--sp-10);
  }

  /* Mobilni Doors/Living hero: veći, simetričan padding — gornji jednak
     donjem (Boško 2026-08-26). Min-height se gasi (desktop-only) da centriranje
     ne pravi neuravnotežen prostor. */
  .doors-hero__inner {
    min-height: auto;
  }

  .doors-hero,
  .living-hero {
    padding-block: calc(var(--sp-10) + var(--sp-6));
  }

  .studio-bottom-cta__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .doors-collections,
  .doors-products-section,
  .studio-about-hero,
  .studio-story,
  .studio-about-section,
  .studio-entry-section,
  .living-intro,
  .living-services,
  .living-process,
  .living-projects,
  .living-reasons,
  .quote-interlude,
  .living-archive-hero,
  .living-projects-archive-section,
  .living-project-meta,
  .living-project-story,
  .living-project-before-after,
  .living-project-segment,
  .doors-custom-orders,
  .contact-showroom {
    padding-block: var(--sp-8);
  }

  .doors-collection-card {
    min-height: 280px;
    padding: var(--sp-5);
  }

  .doors-archive-groups {
    gap: var(--sp-8);
  }


  .studio-hero .os-section--dark,
  .studio-hero .os-section--light,
  .contact-split .os-section--dark,
  .contact-split .os-section--paper {
    padding-inline: var(--sp-5);
  }

  .doors-single-showcase .doors-single-hero__media {
    min-height: auto;
  }

  .doors-single-panel {
    padding: var(--sp-8) var(--sp-5);
  }

  .doors-spec-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .doors-spec-list dd {
    text-align: left;
  }

  /* MOBILNI HEADER (Boško 2026-08-26): logo levo, male brand-switcher pilule
     centrirane (brz pristup Studio/Doors/Living), hamburger gore desno.
     Glavni nav ostaje samo u fullscreen meniju. */
  .site-header .site-nav {
    display: none;
  }

  .site-header__inner {
    flex-direction: row;
    align-items: center;
    padding-block: var(--sp-3);   /* niži header na mobilnom */
    padding-right: var(--sp-8);   /* da sadržaj ne uđe pod fiksni hamburger */
  }

  /* Logo veći; margin-block CROPUJE providnu prazninu kvadratnog artboarda.
     Doors/Living logo ima „ink" (script) niže jer monogram gura sadržaj dole,
     pa NE smeju da se cropuju (0) — bilo koji negativni margin pravi preliv
     koji script izbaci preko donje linije headera. Studio ima praznine pa
     podnosi crop. Trajni fiks: tight-crop artboarda u SVG fajlovima (TODO). */
  .site-logo img {
    width: 120px;
    margin-block: 0;
  }

  .site-header--studio .site-logo img {
    width: 128px;
    margin-block: -18px;
  }

  /* Male brand-switcher pilule u STARIM (akcentnim) bojama — bez color
     override-a, pa naslede originalnu shemu (zlatna ivica, aktivna = zlatni
     fill). Bliže logou nego hamburgeru: margin-left mali, margin-right auto
     gura slobodan prostor ka hamburgeru. Sitan font manjeg weight-a, veći
     padding, veći razmak. */
  .site-header .brand-switcher {
    margin-left: var(--sp-3);
    margin-right: auto;
  }

  .site-header .brand-switcher ul {
    flex-wrap: nowrap;
    gap: var(--sp-2);
  }

  .site-header .brand-switcher a {
    min-height: 0;
    padding: 5px 10px;
    font-size: 9px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.1em;
  }

  /* Hamburger centriran u STVARNI mobilni header (~51px izmereno uživo), u
     ravni sa pilulama (pilule centar ~25px). Ranija calc je pretpostavljala
     mnogo viši header (116-144px) pa je dugme padalo ispod headera, na hero.
     Manje dugme (40px) + top 5px = centar 25px = poravnato sa pilulama.
     Isto za sve brendove (mobilni logo je skaliran, header ~51px svuda).
     Boško 2026-09-01. */
  .studio-corner-menu {
    top: 5px;
    right: var(--sp-5);
    width: 40px;
    height: 40px;
  }

  .fullscreen-menu__inner {
    align-content: start;
    gap: var(--sp-7);
    width: min(100% - var(--sp-6), var(--maxw-content));
    padding-block: var(--sp-9) var(--sp-7);
  }

  .fullscreen-menu__top {
    top: var(--sp-4);
    left: var(--sp-4);
    right: var(--sp-4);
  }

  .fullscreen-menu__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .fullscreen-menu__primary ul {
    gap: var(--sp-2);
  }

  .fullscreen-menu__secondary {
    min-height: auto;
  }

  .os-lightbox {
    padding: var(--sp-9) var(--sp-4) var(--sp-8);
    gap: var(--sp-3);
  }

  .os-lightbox__image {
    max-width: calc((100% - var(--sp-4) * 2) * 0.8);
    max-height: calc((100vh - var(--sp-9) * 2) * 0.8);
  }

  .os-lightbox__title {
    font-size: var(--fs-body-s);
  }

  .os-lightbox__close,
  .os-lightbox__nav {
    padding: var(--sp-2);
  }

  .os-lightbox__icon {
    width: 22px;
    height: 22px;
  }

  .os-lightbox__close {
    top: var(--sp-3);
    right: var(--sp-3);
  }

  .os-lightbox__nav--prev {
    left: var(--sp-2);
  }

  .os-lightbox__nav--next {
    right: var(--sp-2);
  }

  .os-lightbox__counter {
    top: var(--sp-3);
    left: var(--sp-3);
  }
}

/* HEADER -- TABLET/LAPTOP GAP FIX (769-1439px, Boško report 2026-08-30,
   iPad portrait + landscape).
   Below the ≤768px phone breakpoint the header switches to the compact
   hamburger-only pattern above. Above it, the desktop header (logo + full
   nav + brand-switcher pills, one row, no wrap) assumed there was always
   enough right-side margin for the fixed-position .studio-corner-menu
   circle to sit clear of the content -- true once the container hits its
   1200px cap and margins grow past the circle's footprint (viewport
   ⪆1392px), but false in the gap below that. In that gap the full 5-item
   nav has no room and wraps to two rows (iPad portrait, ~810-834px), and
   even where the nav still fits on one row (iPad landscape, ~1180-1194px)
   the switcher's last pill runs into the fixed hamburger circle, since
   nothing reserved room for it.
   Fix: reuse the same proven pattern as the phone header -- hide the
   inline nav (still fully reachable one tap away via the hamburger's
   fullscreen menu, unconditionally rendered in fullscreen-menu.php) and
   reserve padding-right on the header row for the fixed hamburger's
   footprint. Logo and pills keep their normal desktop size -- there is
   plenty of room for a two-item row at these widths, no extra shrinking
   needed. Upper bound covers real device widths up to iPad Pro 12.9"
   landscape (1366px) with margin; above 1439px is ordinary laptop/desktop,
   already safe without this rule. */
@media (min-width: 769px) and (max-width: 1439px) {
  .site-header .site-nav {
    display: none;
  }

  .site-header__inner {
    padding-right: var(--sp-9);
  }
}

@media (max-width: 360px) {
  .doors-archive-subtitle {
    font-size: var(--fs-body-m);
  }

  .doors-archive-groups {
    gap: var(--sp-7);
  }

  /* door-carousel__slide already flex-basis: 100% from the ≤768px rule
     above -- nothing further to do at this width. */

  .fullscreen-menu__subitems {
    padding-inline-start: var(--sp-4);
  }

  .sobna-guide-list {
    gap: var(--sp-5);
  }
}

@media (min-width: 1200px) {
  .doors-archive-groups {
    gap: var(--sp-10);
  }

  /* Door carousel row: exactly 3 whole doors per screen, no fractional
     "peek" (client feedback 2026-08-10 pass #7: the +30% left ~2.3 per view
     so the 3rd door was half-cut at rest -- Boško wanted whole doors). The
     *1.3 peek was removed so 3 fit the reel exactly. To keep the doors from
     shrinking back to the size Boško called too small, the group carousel
     band is widened past the 1200 text container below. */
  .door-carousel__slide {
    flex-basis: calc((100% - 2 * var(--sp-5)) / 3);
  }

  .door-carousel--single {
    /* Metalni-štok showcase: +40% over the 3-up slide width (client feedback
       2026-08-10 pass #8: "primer vrata je premali"). Only affects the group
       single showcase -- hub teasers are --single too but overridden to
       full card width by .doors-archive-group-card__media above. */
    max-width: calc(((100% - 2 * var(--sp-5)) / 3) * 1.82);
  }

  /* Widen ONLY the multi-image group carousel (po meri) past the 1200 text
     container so the 3 whole doors stay large. Must exclude .door-carousel--single:
     the hub teaser cards AND the metalni-štok single showcase are both single-image
     door-carousels that also live inside .doors-products-section, and widening them
     blew their size up (hub teasers overlapped, metalni image became huge) because
     `max-width: none` here (specificity 0,0,3,0) outranked their --single cap.
     Also excludes .door-carousel--compact (2026-08-11, Doors landing "Iz
     kolekcije" teaser): that carousel lives in this same
     .doors-products-section wrapper but is meant to stay small, not join
     the "3 whole doors" widened band — same reasoning as the --single
     exclusion, just for the compact modifier instead.
     Bounded to 100vw - 4rem so it never triggers page overflow; .door-carousel
     already has min-width: 0. margin-inline pulls it symmetrically out of parent. */
  .doors-products-section .door-carousel:not(.door-carousel--single):not(.door-carousel--compact) {
    width: min(1360px, calc(100vw - 4rem));
    max-width: none;
    margin-inline: calc((100% - min(1360px, calc(100vw - 4rem))) / 2);
  }

  /* Landing „Iz kolekcije" compact karusel: širimo ga van 1200px teksta na
     ~1800px (+50%) tako da 4 slajda (/4 formula) ostanu u redu, ali svaka
     slika ~50% veća — efektniji showcase (Boško 2026-08-25). Isti self-widen
     obrazac kao gore; capped na 100vw - 4rem da nikad ne izazove overflow. */
  .doors-products-section .door-carousel--compact {
    width: min(1800px, calc(100vw - 4rem));
    max-width: none;
    margin-inline: calc((100% - min(1800px, calc(100vw - 4rem))) / 2);
  }

  .sobna-guide-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 4 modela u redu tek na širokim ekranima (≥1600px); na užim ostaje 3
   (Boško 2026-08-26). Band se širi na 1760px da 4 modela budu komotna. */
@media (min-width: 1600px) {
  .door-carousel__slide {
    flex-basis: calc((100% - 3 * var(--sp-5)) / 4);
  }
  .doors-products-section .door-carousel:not(.door-carousel--single):not(.door-carousel--compact) {
    width: min(1760px, calc(100vw - 4rem));
    margin-inline: calc((100% - min(1760px, calc(100vw - 4rem))) / 2);
  }
}

/* ─────────────────────────────────────────────────────────────
   DOORS GALERIJA — beleška o prikazu + zaključni CTA blok
   (Boško 2026-08-15). Galerija prikazuje stvarno izvedena vrata,
   ali fotografisana/stilizovana u jedinstvenom ambijentu radi
   poređenja — nota ispod mreže to pošteno objašnjava.
   CTA je prebačen sa .os-btn--primary na --gold: na paper/light
   sekciji --primary koristi var(--surface) kao pozadinu, što je
   ista boja kao sekcija, pa je dugme izgledalo kao goli tekst.
   ───────────────────────────────────────────────────────────── */
.doors-gallery-note {
  max-width: var(--maxw-prose);
  margin: var(--sp-5) auto 0;
  text-align: center;
  font-size: var(--fs-body-s);
  line-height: 1.75;
  color: var(--text-on-light-muted);
}

.doors-cta-band--center {
  justify-items: center;
  text-align: center;
}

.doors-cta-band__lead {
  max-width: var(--maxw-prose);
  font-size: var(--fs-body-l);
  line-height: 1.7;
  color: var(--on-surface);
}

/* Galerija — naziv modela + kratka specifikacija ispod slike.
   Isti eyebrow+tekst obrazac kao .door-carousel__caption (karusel primera
   na kategoriji), da galerija i kategorija govore istim jezikom.
   Boško 2026-08-15. */
.doors-gallery-figure {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  /* Kad mreža rastegne figuru na visinu reda, višak ide na dno figure, a
     ne u red sa slikom — inače podrazumevani align-content:stretch gura
     natpis naviše kod dvorednih specifikacija (Bela glatka). Naziv tako
     uvek sedne odmah ispod slike i poravna se kroz ceo red. */
  align-content: start;
}

.doors-gallery-caption {
  display: grid;
  gap: var(--sp-1);
  text-align: center;
}

.doors-gallery-caption__name {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.doors-gallery-caption__spec {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  line-height: 1.6;
  letter-spacing: var(--ls-body);
  color: var(--on-surface);
}

/* Galerija hero — linija sa referencom (broj ugrađenih vrata / godine rada).
   Brojke sa terena / starog optimusdoors.rs (9.500+ vrata, 15+ godina;
   brojka vrata revidirana naviše 2026-09-01 po informaciji klijenta).
   Boško 2026-08-15. */
.doors-archive-credential {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
   PARTNERSKI BRENDOVI (template-parts/brand-strip.php)
   Traka logotipa okova/brava koje ugrađujemo (ABUS, CISA, HOPPE,
   MOTTURA) — revidiran spisak 2026-09-01. Logotipi su prigušeni (grayscale +
   opacity) da ne konkurišu Optimus brendu; na hover se smire u punu
   čitljivost. Boško 2026-08-15.
   ───────────────────────────────────────────────────────────── */
.brand-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
}

.brand-strip__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5) var(--sp-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-strip__logo {
  display: block;
  width: auto;
  height: 34px;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-soft);
}

.brand-strip:hover .brand-strip__logo {
  opacity: 0.8;
}

.brand-strip__heading {
  max-width: 15ch;
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--on-surface);
}

@media (max-width: 768px) {
  .brand-strip {
    flex-direction: column-reverse;
    gap: var(--sp-4);
  }
  .brand-strip__heading {
    max-width: none;
    text-align: center;
  }
  .brand-strip__logo {
    height: 28px;
  }
}

/* Razmak trake partnera kada stoji ispod „Zašto Optimus" bloka. */
.doors-brand-band {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
}

/* Galerija podeljena na celine po tipu vrata (po meri / metalni štok).
   Razmak između blokova + gušći razmak naslova celine do njene mreže.
   Boško 2026-08-17. */
.doors-gallery-block + .doors-gallery-block {
  margin-top: var(--sp-8);
}

.doors-gallery-block .doors-section-heading {
  margin-bottom: var(--sp-7);
}

/* Link ka galeriji ispod karusela primera na kategoriji (po meri / metalni
   štok). Centriran, isti "→" stil kao hub kartice. Boško 2026-08-17. */
.doors-gallery-link {
  margin-top: var(--sp-5);
  text-align: center;
}

/* Da anchor skok ka celini galerije ne sakrije naslov iza vrha prozora
   (WP admin bar na stagingu / dah prostora). */
.doors-gallery-block {
  scroll-margin-top: var(--sp-7);
}

/* Galerija po narudžbini — rolo celina je LANDSCAPE (širi kadar po prirodi
   proizvoda): manje pločica po redu, širi minmax. Podrumska celina koristi
   podrazumevani portret grid. Odnos stranica se postavlja inline po celini
   (aspect-ratio na .os-image-slot). Boško 2026-08-17. */
.doors-gallery-grid--landscape {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

@media (min-width: 1000px) {
  .doors-gallery-grid--landscape {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Fullscreen meni — podstavke (Po meri / Na metalni štok) čine tesnu,
   RAVNOMERNU grupu ispod SIGURNOSNA. Ranije ih je `.fullscreen-menu__secondary
   ul` (viša specifičnost, gap sp-3) razmicao, pa je razmak bio prevelik i
   neravnomeran (dete se lepi za roditelja, drugo dete odleti). Dupla klasa
   ovde pobeđuje po specifičnosti. Razmak roditelj->prvo dete = razmak među
   decom = sp-2. Boško 2026-08-17. */
.fullscreen-menu__secondary .fullscreen-menu__subitems {
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-block: 0;
}

/* Kontakt — mapa (prekobojena Google mapa kad ima ključ, inače locator).
   Boško 2026-08-17. Zamenjuje staru .contact-map-placeholder. */
.contact-map {
  display: grid;
  gap: var(--sp-3);
}

.contact-map__canvas {
  min-height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--os-linen);
}

.contact-map__placeholder {
  min-height: 200px;
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  text-align: center;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark-muted);
}

.contact-map__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--os-gold);
  text-decoration: none;
}

.contact-map__link:hover,
.contact-map__link:focus-visible {
  color: var(--text-on-dark);
  outline: none;
}

/* Kontakt mapa — graciozan fallback kad Google auth padne (gm_authFailure). */
.contact-map__canvas[data-os-map-failed] {
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  text-align: center;
}
.contact-map__canvas[data-os-map-failed]::after {
  content: "Mapa trenutno nije dostupna — otvorite lokaciju u Google kartama.";
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  color: var(--text-on-dark-muted);
  max-width: 28ch;
}

/* Kontakt — forma i mapa da POPUNE širinu panela. Roditelj
   (.contact-panel__inner) ima justify-items:start (da naslovi/tekst budu levo,
   nerastegnuti), što je skupljalo formu i mapu na širinu sadržaja (~340px).
   Eksplicitno ih rastežemo; mapa je i viša. Boško 2026-08-17. */
.contact-form,
.contact-map {
  width: 100%;
}

.contact-map__canvas {
  min-height: 420px;
}

/* ─────────────────────────────────────────────────────────────
   LIVING PROJEKAT — case study (highlights karusel + narativ + tabovi)
   Boško 2026-08-18.
   ───────────────────────────────────────────────────────────── */

/* Highlights karusel — centrirani, mešane orijentacije, peek + nudge */
.project-highlights {
  position: relative;
  padding-block: var(--sp-8);
  overflow: hidden;
  /* Duboka šalfija — Living identitet (razdvaja slajder od Doors navy).
     Tokeni ostaju iz os-section--dark (svetli tekst + zlatne strelice). */
  background-color: color-mix(in srgb, var(--os-sage) 78%, #14180f);
}
.project-highlights__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* Vučenje mišem: grab kursor; tokom vučenja gasimo snap da nema trzanja. */
.project-highlights__viewport { cursor: grab; }
.project-highlights__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.project-highlights__viewport::-webkit-scrollbar { display: none; }
.project-highlights__track {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-inline: 50%;               /* runway da bilo koji slajd može u centar */
  min-height: clamp(320px, 62vh, 560px);
}
.project-highlights__slide {
  flex: 0 0 auto;
  height: clamp(320px, 62vh, 560px);
  margin: 0;
  scroll-snap-align: center;
  opacity: 0.4;
  transform: scale(0.9);
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
  will-change: opacity, transform;
}
.project-highlights__slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.project-highlights__slide img {
  height: 100%;
  width: auto;
  max-width: min(88vw, 900px);
  display: block;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  user-select: none;
}

/* Lightbox trigger — čist button-reset, slika unutra izgleda identično
   kao pre (isti selektor iznad je i dalje na snazi jer je i dalje
   .project-highlights__slide img). */
.project-highlights__trigger {
  display: block;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.project-highlights__trigger:focus-visible {
  outline: 2px solid var(--os-gold);
  outline-offset: 4px;
  border-radius: 8px;
}
.project-highlights__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  /* Living: puna žalfija, netransparentno (Boško 2026-08-19). Slajder je Living-only. */
  background: var(--os-sage);
  color: var(--os-gold);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft);
}
.project-highlights__nav:hover,
.project-highlights__nav:focus-visible { background: color-mix(in srgb, var(--os-sage) 80%, #14180f); outline: none; }
.project-highlights__nav svg { width: 22px; height: 22px; }
.project-highlights__nav--prev { left: var(--sp-4); }
.project-highlights__nav--next { right: var(--sp-4); }
.project-highlights__hint {
  margin: var(--sp-4) 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

/* Naslov + meta + lead */
.living-project-intro__inner {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
  max-width: var(--maxw-prose);
  margin-inline: auto;
}
.living-project-meta__inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.living-project-lead {
  font-size: var(--fs-body-l);
  line-height: 1.7;
  color: var(--on-surface);
}

/* Narativ blokovi */
.living-narrow { max-width: var(--maxw-prose); margin-inline: auto; }
.living-project-narrative { line-height: 1.75; color: var(--on-surface); }
.living-project-narrative p { margin: 0 0 var(--sp-3); }
.living-project-narrative p:last-child { margin-bottom: 0; }
.living-project-narrative .os-label { display: block; color: var(--accent); margin-bottom: var(--sp-2); }
.living-project-process__inner { display: grid; gap: var(--sp-6); }

/* Tabovi galerija */
.project-tabs { margin-top: var(--sp-6); }
.project-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
}
.project-tabs__tab {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-on-light-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.project-tabs__tab:hover { color: var(--on-surface); }
.project-tabs__tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.project-tabs__tab:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.project-tabs__panel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .project-highlights__slide { transition: none; }
}

/* Pre/posle: 4 u jednom redu -> širi kontejner + responsive. Boško 2026-08-18. */
.living-project-before .os-container {
  max-width: min(94vw, 1400px);
}
.living-before-after-grid { gap: var(--sp-4); }
@media (max-width: 900px) {
  .living-before-after-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .living-before-after-grid { grid-template-columns: 1fr; }
}

/* Narativ sub-headinzi (Materijali i dizajn / Izvedba) — serif, isti font kao
   glavni heading; razmak do teksta. */
.living-project-narrative__title {
  color: var(--on-surface);
  margin-bottom: var(--sp-3);
}

/* Ritam pred kraj strane (Boško 2026-08-19). */

/* (1) Izvedba -> Finalni izgled: dve paper sekcije su davale 128+128px razmaka;
   svedeno na ~80px (skoro dve trećine manje). */
.living-project-process { padding-bottom: var(--sp-6); }
.living-project-result  { padding-top: var(--sp-7); }

/* (2) Pre/posle red — veći, „lepa" margina do teksta iznad. */
.living-project-before .living-before-after-grid { margin-top: var(--sp-7); }

/* (3) Završna CTA traka: zelena (žalfija), ne navy — jer smo na Living.
   Svetli tekst + zlatno dugme radi kontrasta na zelenoj. */
.living-project-cta {
  --surface: color-mix(in srgb, var(--os-sage) 82%, #14180f);
  --on-surface: var(--text-on-dark);
  --accent: var(--os-gold);
}

/* ── Bogat footer (2026-08-24) ───────────────────────────────── */
.site-footer__inner--rich {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 2.5rem 2rem;
  align-items: start;
  padding-block: 3.5rem;
}
.site-footer__inner--rich .footer-col { min-width: 0; }
.footer-brand {
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--on-surface);
}
.footer-umbrella {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.footer-umbrella:hover { border-bottom-color: var(--accent); }
.footer-col__title {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 1rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.55rem; }
.footer-links a,
.footer-contact__line {
  color: var(--on-surface);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.88;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer-links a:hover,
a.footer-contact__line:hover { opacity: 1; color: var(--accent); }
.footer-contact { font-style: normal; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-contact__line--addr { opacity: 1; }
.footer-contact__note {
  font-size: 0.8rem;
  opacity: 0.62;
  margin-top: -0.25rem;
  margin-bottom: 0.35rem;
}
.site-footer__bottom {
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  margin-top: 2.5rem;
}
.site-footer__bottom p {
  width: min(100% - var(--sp-6), var(--maxw-content));
  margin-inline: auto;
  padding-block: 1.4rem;
  font-size: 0.82rem;
  opacity: 0.7;
  color: var(--on-surface);
}
@media (max-width: 900px) {
  .site-footer__inner--rich { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer__inner--rich { grid-template-columns: 1fr; padding-block: 2.5rem; }
}
.footer-worlds { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.85rem; }
.footer-worlds .footer-umbrella { margin-top: 0; }

/* ── Studio kartice sa fotkom (2026-08-24) ──────────────────── */
.studio-link-card .os-card__media {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 6px; margin-bottom: 1.1rem;
}
.studio-link-card .os-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.studio-link-card:hover .os-card__media img { transform: scale(1.04); }

/* ── Studio media band (2026-08-24, materijali/proces) ──────── */
.studio-media-band {
  margin: 0 auto;
  width: min(100% - var(--sp-6), var(--maxw-content));
}
.studio-media-band img {
  width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center;
  display: block; border-radius: 8px;
}

/* ── Studio (O nama) tešnji ritam (2026-08-24): kolaps 192px→64px ── */
.studio-page .studio-about-hero { padding-block: var(--sp-8) var(--sp-6); }
.studio-page .studio-story,
.studio-page .studio-about-section { padding-block: var(--sp-6); }
.studio-page .studio-media-band { margin: var(--sp-6) auto; }
.studio-page .studio-entry-section { padding-block: var(--sp-8); }

/* ── Studio (O nama) hairline između blokova (2026-08-24) ── */
.studio-page .studio-story .studio-narrow,
.studio-page .studio-about-section .studio-narrow {
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 15%, transparent);
  padding-top: var(--sp-7);
}