/*
Theme Name: Walls by Natasa
Theme URI: https://wallsbynatasa.rs
Author: Nataša Lajović
Description: Custom tema za portfolio mural umetnice. Editorial, minimalistički vizuelni sistem sa ultramarin akcentom.
Version: 3.2
Requires PHP: 7.4
Text Domain: walls
*/

:root{
  --bg: #FFFFFF;
  --bg-alt: #F4F4F2;
  --ink: #171B2E;
  --ink-soft: #4B4F5C;
  --muted: #8A8D96;
  --line: #E6E5E1;
  --accent: #2B3FA6;
  --accent-dark: #1F2E80;
  --card: #FAFAF9;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.label{
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 40px; }
a{ color: inherit; text-decoration: none; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 14px 30px;
  border-radius: 100px;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all .2s ease;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.btn-primary{ background: var(--ink); color: #FFFFFF; }
.btn-primary:hover{ background: var(--accent); color:#fff; }
.btn-ghost{ border: 1px solid var(--ink); color: var(--ink); background:transparent; }
.btn-ghost:hover{ background: var(--ink); color: #fff; }

.ph{
  position: relative;
  background: linear-gradient(160deg, #E4E3DD, #D2D0C6);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ph::after{
  content: attr(data-ph);
  font-family:'Inter'; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(23,27,46,0.4);
  text-align:center; padding: 0 20px;
}

/* ===== HEADER / NAV ===== */
header.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; flex-wrap: nowrap; align-items:center; justify-content:space-between;
  gap: 24px;
  padding: 22px 0;
}
.logo{ font-size: 18px; font-weight:600; letter-spacing:0.02em; color: var(--accent); white-space:nowrap; }
.navlinks{ display:flex; flex-wrap: nowrap; align-items:center; gap: 32px; font-size: 12px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; list-style:none; }
.navlinks li{ display:inline; }
.navlinks a:hover, .navlinks a.active{ color: var(--accent); }
.nav .btn-primary{ white-space:nowrap; flex-shrink:0; }

/* Hamburger dugme - vidljivo samo na mobilnom, vidi @media (max-width:860px) nize */
.menu-toggle{
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
}
.menu-toggle-bar{ display:block; width: 100%; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle.open .menu-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.open .menu-toggle-bar:nth-child(2){ opacity: 0; }
.menu-toggle.open .menu-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobilni dropdown meni - skriven na desktopu, otvara se preko .open klase koju dodaje JS */
.mobile-menu{ display: none; }
.mobile-menu-list{ list-style: none; }
.mobile-menu-list li a{ display:block; }
.mobile-menu-cta{ }
.back-row{ padding: 24px 0 0; }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-size: 13px; color: var(--muted); }
.back-link:hover{ color: var(--ink); }

/* ===== HERO (homepage) ===== */
.hero{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; min-height: 620px; }
.hero-copy{ display:flex; flex-direction:column; justify-content:center; padding: 60px 60px 60px 40px; }
.hero-copy h1{ font-size: 46px; font-weight:300; margin: 18px 0 22px; max-width: 480px; }
.hero-copy p{ font-size: 16px; color: var(--ink-soft); max-width: 400px; margin-bottom: 34px; }
.hero-actions{ display:flex; gap:14px; }
.hero-img{ height: 620px; overflow: hidden; }
.hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* O meni hero - potpuno odvojeno od Pocetne, prati koncept fajl tacno */
.om-hero{ padding: 48px 0 60px; }
.om-hero-photo{ height: 520px; overflow: hidden; }
.om-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.om-hero-copy h1{ font-size: 38px; font-weight:300; margin: 14px 0 20px; }
.om-hero-copy p{ color: var(--ink-soft); font-size: 16px; margin-bottom: 16px; max-width: 460px; }

section{ padding: 60px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 48px; gap: 24px; }
.section-head h2{ font-size: 32px; font-weight:300; margin-top: 10px; }
.section-head p{ color: var(--muted); font-size: 14px; max-width: 320px; text-align:right; }

/* ===== PORTFOLIO GRID (shared: home teaser + archive) ===== */
.grid-work{ display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 90px; grid-auto-flow: dense; gap: 20px; }
.work-item{ position:relative; cursor:pointer; overflow: hidden; }
.work-item.hidden{ display:none; }
.work-item:hover .ph, .work-item:hover img{ filter: brightness(0.94); }
.work-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: var(--fokus, 50% 50%); transition: transform .4s ease; z-index:0; }

/* Gradient-overlay za citljivost teksta preko fotografije, isti princip kao .hero-plaque na projektu */
.work-item::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:55%;
  background: linear-gradient(to top, rgba(23,27,46,0.75) 0%, rgba(23,27,46,0.32) 55%, transparent 100%);
  pointer-events:none;
  z-index:1;
}

.work-plaque{ position:absolute; left:14px; bottom:14px; right:14px; z-index:2; }
.work-plaque .wt{ font-size:19px; font-weight:500; color:#fff; margin-bottom:2px; text-shadow:0 1px 3px rgba(0,0,0,.3); }
.work-plaque .wl{ display: none; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.85); text-shadow:0 1px 3px rgba(0,0,0,.3); }

.size-a{ grid-column: span 3; grid-row: span 5; }
.size-b{ grid-column: span 3; grid-row: span 4; }
.size-c{ grid-column: span 2; grid-row: span 4; }
.w1{ grid-column: 1 / 4; grid-row: span 5; }
.w2{ grid-column: 4 / 7; grid-row: span 3; }
.w3{ grid-column: 4 / 6; grid-row: span 2; }
.w4{ grid-column: 6 / 7; grid-row: span 2; }
.w5{ grid-column: 1 / 3; grid-row: span 4; }
.w6{ grid-column: 3 / 7; grid-row: span 4; }
.work-more{ text-align:center; margin-top: 44px; }

/* ===== FILTERS ===== */
.filters{ display:flex; flex-wrap: wrap; gap: 10px; padding: 0 0 50px; border-bottom: 1px solid var(--line); margin-bottom: 50px; }
.filter-btn{ padding: 9px 18px; border-radius: 100px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-family:'Inter',sans-serif; font-size: 13px; cursor: pointer; transition: all .15s ease; }
.filter-btn:hover{ border-color: var(--ink); color: var(--ink); }
.filter-btn.active{ background: var(--ink); border-color: var(--ink); color: #fff; }

/* ===== AUDIENCE (Murali za razlicite prostore) ===== */
.audience{ background: var(--bg-alt); }
.aud-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.aud-item{ background: var(--bg-alt); padding: 36px 28px; min-height: 110px; display:flex; align-items:center; }
.aud-item h3{ font-size: 19px; font-weight:400; }

/* ===== PROCESS ===== */
.process-row{ display:grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.process-item{ padding: 48px 28px 0 28px; border-right: 1px solid var(--line); }
.process-item:first-child{ padding-left: 0; }
.process-item:last-child{ border-right:none; }
.process-item .label{ margin-bottom: 40px; }
.process-item h3{ font-size: 18px; font-weight:400; margin-bottom: 10px; }
.process-item p{ font-size: 14px; color: var(--ink-soft); }
.process-more{ margin-top: 44px; }
.process-more a{ font-size: 16px; color: var(--ink-soft); text-decoration: underline; }
.process-more a:hover{ color: var(--accent); }

/* ===== COMMUNITY (Murali za zajednicu) ===== */
.community{ background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 42px 0; }
.community-inner{ display:flex; justify-content:space-between; align-items:center; gap: 40px; }
.community-copy{ max-width: 620px; }
.community-copy h2{ font-size: 22px; font-weight:300; margin: 10px 0 8px; }
.community-copy p{ font-size: 14px; color: var(--ink-soft); }
.community .btn-ghost{ flex-shrink:0; }

/* ===== ABOUT teaser (homepage) + O meni page ===== */
.about{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items:center; }
.about-img{ height: 460px; overflow: hidden; }
.about-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.about h2{ font-size: 30px; font-weight:300; margin-bottom: 22px; }
.about p{ color: var(--ink-soft); font-size: 16px; margin-bottom: 16px; max-width: 460px; }

.hero-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:70px; align-items:center; }
.story{ padding:60px 0; }
.story-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:70px; align-items:center; }
.story-img{ height:420px; overflow: hidden; }
.story-img img, .about-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.story-copy p{ color:var(--ink-soft); font-size:16px; margin-bottom:18px; max-width:460px; }
.principles{ background:var(--bg-alt); padding:60px 0; }
.approach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.approach-img{ height:260px; margin-bottom:16px; overflow: hidden; }
.approach-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.approach-cap{ font-size:14px; color:var(--ink-soft); }

/* ===== PROJECT SINGLE PAGE ===== */
.project-hero{ padding: 30px 0 0; }
.project-hero-img{ height: 560px; position: relative; overflow: hidden; }
.project-hero-img img{ width:100%; height:100%; object-fit:cover; object-position: var(--fokus, 50% 50%); display:block; }
.hero-plaque{ position:absolute; left:0; bottom:0; right:0; padding: 40px; background: linear-gradient(to top, rgba(15,13,20,0.88) 0%, rgba(15,13,20,0.55) 45%, transparent 100%); color: #fff; }
.hero-plaque h1{ color:#fff; font-size: 26px; font-weight:300; margin-bottom: 6px; text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
.hero-plaque .wl{ font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.9); text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.meta-row{ display:grid; grid-template-columns: 220px 1fr; gap: 60px; padding: 40px 0 60px; border-bottom: 1px solid var(--line); }
.meta-list{ display:flex; flex-direction:column; gap: 22px; }
.meta-item .label{ margin-bottom: 6px; }
.meta-item .val{ font-size: 15px; }
.story-text p{ font-size: 17px; color: var(--ink-soft); max-width: 620px; margin-bottom: 16px; }
.gallery{ padding: 8px 0 56px; }
.gallery-head{ margin-bottom: 40px; }
.gallery-head span{ display:block; margin-bottom: 10px; }
.gallery-head h2{ font-size: 26px; font-weight:300; }
.grid-gallery{
  display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 90px; grid-auto-flow: dense; gap: 20px;
}
.g1{ grid-column: 1 / 4; grid-row: span 5; }
.g2{ grid-column: 4 / 7; grid-row: span 3; }
.g3{ grid-column: 4 / 6; grid-row: span 2; }
.g4{ grid-column: 6 / 7; grid-row: span 2; }
.g5{ grid-column: 1 / 3; grid-row: span 4; }
.g6{ grid-column: 3 / 7; grid-row: span 4; }
.gallery-item{ position: relative; cursor: pointer; overflow: hidden; }
.gallery-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.work-item:hover img, .gallery-item:hover img{ transform: scale(1.06); }
.gallery-item::after{
  content: "";
  position:absolute; inset:0;
  background: rgba(23,27,46,0);
  transition: background .15s ease;
}
.gallery-item:hover::after{ background: rgba(23,27,46,0.12); }

/* Foto kredit - prikazuje se diskretno u lightbox-u pored brojaca, samo ako je popunjeno u SCF polju uz tu fotografiju */
.walls-lightbox-credit{
  position: absolute;
  bottom: 24px;
  right: 32px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  letter-spacing: .04em;
}
@media (max-width: 640px){
  .walls-lightbox-credit{ right: 18px; bottom: 54px; font-size: 11px; }
}

/* ===== LIGHTBOX ===== */
.walls-lightbox{
  position: fixed; inset: 0; z-index: 999;
  background: rgba(15,13,11,0.94);
  display: none;
  align-items: center; justify-content: center;
}
.walls-lightbox.open{ display: flex; }
.walls-lightbox img{
  max-width: 88vw; max-height: 84vh;
  object-fit: contain;
  display: block;
}
.walls-lightbox-close{
  position: absolute; top: 24px; right: 32px;
  color: #fff; font-size: 32px; font-weight: 300;
  cursor: pointer; line-height: 1; background: none; border: none;
}
.walls-lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: 40px; font-weight: 300;
  cursor: pointer; background: none; border: none;
  padding: 20px; opacity: 0.8; transition: opacity .15s ease;
}
.walls-lightbox-nav:hover{ opacity: 1; }
.walls-lightbox-prev{ left: 12px; }
.walls-lightbox-next{ right: 12px; }
.walls-lightbox-counter{
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.7); font-size: 13px; letter-spacing: .06em;
}
@media (max-width: 640px){
  .walls-lightbox-nav{ font-size: 28px; padding: 10px; }
  .walls-lightbox-close{ top: 14px; right: 18px; font-size: 26px; }
}
.video-block{ padding: 0 0 80px; }
.video-frame{ height: 420px; }
.video-frame iframe{ width:100%; height:100%; border:0; display:block; }
.next-project{ display:grid; grid-template-columns: 1fr 1.4fr; border-top: 1px solid var(--line); }
.next-copy{ display:flex; flex-direction:column; justify-content:center; padding: 60px 60px 60px 0; }
.next-copy .label{ margin-bottom: 12px; }
.next-copy h3{ font-size: 26px; font-weight:300; margin-bottom: 16px; }
.next-img{ height: 320px; overflow: hidden; }
.next-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== CTA ===== */
.cta{ background: var(--ink); color: #FFFFFF; text-align:center; padding: 60px 0; }
.cta h2{ color:#FFFFFF; font-size: 34px; font-weight:300; max-width: 560px; margin: 0 auto 16px; }
.cta p{ color: #A9ACC0; margin-bottom: 30px; }
.cta .btn-primary{ background: var(--accent); color: #fff; }
.cta .btn-primary:hover{ background: #3F52C4; }

/* ===== PAGE HEAD (Portfolio / FAQ / Kontakt / Zajednica) ===== */
.page-head{ padding:56px 0 40px; }
.page-head h1{ font-size:38px; margin:14px 0 14px; }
.page-head p{ color:var(--ink-soft); font-size:16px; max-width:520px; }

/* ===== FAQ ===== */
.faq-list{ padding-bottom:100px; max-width:900px; margin:0 auto; }
details{ border-top:1px solid var(--line); padding: 26px 0; }
details:last-child{ border-bottom:1px solid var(--line); }
summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; font-size:18px; font-weight:400; gap:20px; }
summary::-webkit-details-marker{ display:none; }
summary .icon{ font-size:20px; color:var(--muted); flex-shrink:0; transition: transform .2s ease; font-weight:300; }
details[open] summary .icon{ transform: rotate(45deg); }
.answer{ color:var(--ink-soft); font-size:15px; max-width:640px; margin-top:16px; }
.answer a{ color: inherit; text-decoration: underline; }
.answer a:hover{ color: var(--accent); }

/* ===== CONTACT / ZAJEDNICA FORMS ===== */
.contact-layout{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:70px; padding-bottom:100px; }
.field{ margin-bottom: 22px; }
.field label{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.field-optional{ color:var(--muted); text-transform:none; letter-spacing:0; font-size:12px; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:4px; padding:13px 14px;
  font-family:'Inter',sans-serif; font-size:15px; color:var(--ink); background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field-file{ border: 1px dashed var(--line); border-radius: 4px; padding: 26px 20px; text-align: center; cursor: pointer; position: relative; transition: border-color .15s ease, background .15s ease; }
.field-file:hover{ border-color: var(--accent); background: var(--bg-alt); }
.field-file.has-files{ border-color: var(--accent); background: var(--bg-alt); }
.field-file.has-files .fu-title{ color: var(--accent); font-weight: 500; }
.field-file input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.field-file .fu-title{ font-size:14px; color: var(--ink); margin-bottom:4px; }
.field-file .fu-hint{ font-size:12px; color: var(--muted); }
.field-hint{ font-size:12px; color: var(--muted); margin-top:8px; }
.radio-row{ display:flex; gap:24px; flex-wrap:wrap; }
.radio-opt{ display:flex; align-items:center; gap:8px; font-size:14px; }
.radio-opt input{ accent-color: var(--accent); }
.info-card{ background:var(--bg-alt); border-radius:4px; padding:36px; }
.info-item{ margin-bottom:26px; }
.info-item:last-child{ margin-bottom:0; }
.info-item .label{ margin-bottom:8px; }
.info-item .val{ font-size:17px; }
.info-item .val a:hover{ color:var(--accent); }
.form-success{ background:var(--bg-alt); border:1px solid var(--line); border-radius:4px; padding:24px; margin-bottom:30px; font-size:15px; }
.form-error{ background:#FBEAEA; border:1px solid #E5B4B4; border-radius:4px; padding:24px; margin-bottom:30px; font-size:15px; color:#8A2A2A; }

/* ===== FOOTER ===== */
footer.site-footer{ padding: 50px 0; border-top: 1px solid var(--line); }
.foot-row{ display:flex; justify-content:space-between; align-items:center; font-size: 13px; color: var(--muted); flex-wrap:wrap; gap:16px; }
.foot-links{ display:flex; gap: 24px; text-transform:uppercase; letter-spacing:.06em; font-size:12px; list-style:none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px){
  section{ padding: 48px 0; }
  .wrap{ padding: 0 22px; }
  .hero{ grid-template-columns: 1fr; min-height:auto; }
  .hero-img{ height: 340px; overflow: hidden; order:-1; }
  .hero-copy{ padding: 40px 22px; }
  .hero-copy h1{ font-size: 34px; }
  .hero-actions{ flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-actions .btn{ width: 100%; justify-content: center; }
  .om-hero{ padding: 30px 0 45px; }
  .om-hero-photo{
    height: 320px; order:-1;
    position: relative; left: 50%; right: 50%;
    width: 100vw; margin-left: -50vw; margin-right: -50vw;
  }
  .om-hero-copy h1{ font-size: 30px; }
  .project-hero-img{
    height: 320px;
    position: relative; left: 50%; right: 50%;
    width: 100vw; margin-left: -50vw; margin-right: -50vw;
  }
  .project-hero-img img{ object-position: var(--fokus-m, var(--fokus, 50% 50%)); }
  .story-text p{ font-size: 20px; line-height: 1.5; }
  .work-item img{ object-position: var(--fokus-m, var(--fokus, 50% 50%)); }
  .work-plaque .wt{ font-size: 14px; }

  /* Hamburger meni: sakrij desktop linkove i CTA dugme iz reda sa logom, prikazi hamburger */
  .navlinks{ display:none; }
  .nav-cta{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-menu{
    display: block;
    max-height: 0; overflow: hidden;
    position: absolute; top: 100%; left:0; right:0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(23,27,46,0.08);
    transition: max-height .25s ease;
  }
  .mobile-menu.open{ max-height: 80vh; overflow-y: auto; }
  .mobile-menu-list{ padding: 8px 22px 20px; }
  .mobile-menu-list li a{ padding: 15px 0; font-size: 13px; letter-spacing:.08em; text-transform:uppercase; border-bottom: 1px solid var(--line); }
  .mobile-menu-cta{ padding-top: 12px; }
  .mobile-menu-cta a{ border-bottom: none !important; padding: 0 !important; }
  .mobile-menu-cta a.btn{ display:flex; width:100%; justify-content:center; margin-bottom: 6px; }

  /* Portfolio grid (Pocetna + Portfolio stranica) - vidi posebnu, uzu media query
     nizu (max-width:640px), da se ne bi mesao sa tablet/desktop prikazom. */
  .g1{ grid-column: span 2; grid-row: span 3; }
  .g2{ grid-column: span 1; grid-row: span 2; }
  .g3{ grid-column: span 1; grid-row: span 2; }
  .g4{ grid-column: span 2; grid-row: span 2; }
  .g5{ grid-column: span 1; grid-row: span 3; }
  .g6{ grid-column: span 2; grid-row: span 2; }
  .aud-grid{ grid-template-columns: 1fr 1fr; }
  .process-row{ grid-template-columns: 1fr 1fr; }
  .process-item{ border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 4px; padding-left:12px; padding-right:12px; }
  .process-item:first-child{ padding-left:12px; }
  .about{ grid-template-columns: 1fr; }
  .hero-grid{ grid-template-columns:1fr; }
  .story-grid{ grid-template-columns:1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .section-head p{ text-align:left; }
  .community-inner{ flex-direction:column; align-items:flex-start; gap:20px; }
  .page-head h1{ font-size:30px; }
  .meta-row{ grid-template-columns: 1fr; gap: 24px; padding: 20px 0 40px; }
  .grid-gallery{
    grid-template-columns: repeat(2,1fr); grid-auto-rows: 110px; gap: 10px;
    position: relative; left: 50%; right: 50%;
    width: 100vw; margin-left: -50vw; margin-right: -50vw;
  }
  .next-project{ grid-template-columns: 1fr; }
  .next-copy{ padding: 40px 0; }
  .contact-layout{ grid-template-columns:1fr; gap:40px; }
  .field-row{ grid-template-columns:1fr; }
  .approach-grid{ grid-template-columns:1fr; }
}

/* ===== PORTFOLIO GRID - iskljucivo mobilni telefoni (ne tablet, ne desktop) =====
   Namerno odvojeno od gornjeg @media(max-width:860px) bloka: prethodna verzija je
   delila isti prag sa ostatkom mobilnog prikaza, pa se masonry/full-bleed raspored
   pogresno primenjivao i na tablet/manje desktop prozore. Sada se primenjuje samo
   ispod 640px, sto pokriva telefone; tablet i desktop i dalje koriste originalni
   6-kolonski .grid-work/.size-a/.size-b/.size-c raspored definisan gore u fajlu. */
@media (max-width: 640px){
  .grid-work{
    grid-template-columns: repeat(2,1fr); grid-auto-rows: 130px; gap: 10px;
    position: relative; left: 50%; right: 50%;
    width: 100vw; margin-left: -50vw; margin-right: -50vw;
  }

  /* Raspored po redosledu kartice (nth-child), ne po size-a/b/c klasi -
     obezbedjuje nameran ritam bez obzira koju je velicinu neko izabrao u ACF-u:
     1) puna sirina  2) dve kolone  3) puna sirina  4) dve kolone ... (ciklus od 6)
     Svaki par u 2 kolone ima MEDJUSOBNO istu visinu (da nema praznih rupa), a
     razlikuje se od prethodnog/sledeceg punog reda i od drugog para - tako se
     dobija masonry ritam bez ijedne prazne celije. */
  .grid-work .work-item{ grid-column: span 1; grid-row: span 2; }
  .grid-work .work-item:nth-child(6n+1){ grid-column: span 2; grid-row: span 3; }
  .grid-work .work-item:nth-child(6n+4){ grid-column: span 2; grid-row: span 2; }
  .grid-work .work-item:nth-child(6n+5){ grid-row: span 3; }
  .grid-work .work-item:nth-child(6n){ grid-row: span 3; }
}

/* ===== CENA MURALA (nova stranica) - koristi postojece klase/varijable svuda gde je moguce ===== */

/* Asimetricni 2-kolonski editorial grid, isti odnos kao .about/.story-grid */
.cm-split{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: start;
}
.cm-split h2{ font-size: 30px; }

/* Deljena lista za oba bloka (faktori / ukljuceno) - tanke separator linije, dosta whitespace-a */
.cm-row-list{ border-bottom: 1px solid var(--line); }
.cm-row{
  padding: 26px 0;
  border-top: 1px solid var(--line);
  font-size: 17px;
  color: var(--ink-soft);
}

/* Foto traka - editorial "predah", 3:1 na desktopu, fokus kadriranja isti sistem kao ostale fotografije na sajtu */
.cm-photo-wrap{ padding-top: 20px; padding-bottom: 44px; }
.cm-photo-strip{ position: relative; overflow: hidden; aspect-ratio: 3 / 1; }
.cm-photo-strip img{ width:100%; height:100%; object-fit:cover; display:block; object-position: var(--fokus, 50% 50%); }

/* Tekst o individualnoj ceni pri dnu - normalan body tekst, ne fusnota */
.cm-note{ color: var(--ink-soft); font-size: 16px; max-width: 640px; }

@media (max-width: 860px){
  .cm-split{ grid-template-columns: 1fr; gap: 8px; }
  .cm-photo-strip{ aspect-ratio: 16 / 9; }
}