/* /public_html/assets/css/services.css
   services.css – dopune za unutarnje stranice (transport, skladište, carine, logistika, FAQ)
   Oslanja se na main.css varijable i hero stil. Ne dira postojeći dizajn naslovnice. */

:root{
  --service-radius: 12px;
}

/* centriranje kao na indexu */
.section-center{display:flex;justify-content:center}
.section-center>.container{max-width:var(--container, 1180px);margin-inline:auto;padding:0 16px}

/* H1 + uvod (odmah ispod headera) */
.service-hero{padding:36px 0 8px}

/* SVJETLA PODLOGA — IDENTIČNA hero podlozi s naslovnice */
.service-intro,
.service-section.alt-1{
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(31,58,138,.16), transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#f9fafb 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* bijela varijanta (izmjena) */
.service-section.alt-0{background:#fff}

/* univerzalno za sekcije */
.service-section{padding:40px 0}
.service-section .container{max-width:980px}
.service-section h2{margin:0 0 14px}
.subhead{font-weight:600;margin:10px 0 4px}

/* velika media s okvirom kao hero photo-slot */
.service-media{padding:20px 0 28px}
.media-frame{
  position:relative; border-radius:var(--radius,12px); overflow:hidden;
  box-shadow:var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06));
  aspect-ratio:16/9; background:#eef2f7; /* ne vidi se jer slika prekriva */
}
.media-frame picture,
.media-frame img,
.media-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.media-frame .frame-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.16));
}

/* CTA */
.service-cta{padding:36px 0}
.service-cta .container{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ===========================
   FAQ – puna širina kao na naslovnici
   =========================== */

/* Glava sekcije ostaje centrirana */
.faq-section .section-head{
  text-align:center;
  margin-bottom:32px;
}
.faq-section .section-head h2{
  font-size:2rem;
  font-weight:700;
  margin:0 0 6px;
}
.faq-section .section-head p{
  color:#6b7280;
  margin:0;
}

/* Pitanja preko cijele širine kontejnera */
.faq-section .faq-list{
  width:100%;
}
.faq-section details{
  width:100%;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:16px 20px;
  margin:0 0 14px 0;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.faq-section details:hover{
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
.faq-section details[open]{border-color:#d1d5db}

/* Naslov pitanja – lijevo, + / – desno */
.faq-section summary{
  cursor:pointer;
  font-weight:600;
  font-size:1rem;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:space-between;
  list-style:none;
}
.faq-section summary::-webkit-details-marker{display:none}
.faq-section summary::after{
  content:"+";
  font-weight:700;
  color:#233876; /* primarna tamna */
  padding-left:12px;
  transition:transform .2s ease;
}
.faq-section details[open] summary::after{
  content:"–";
  transform:rotate(180deg);
}
.faq-section details[open] summary{color:#233876}

/* Tekst odgovora */
.faq-section details div{
  margin-top:10px;
  color:#374151;
  line-height:1.6;
  font-size:.975rem;
  text-align:left; /* važno: tekst pitanja/odgovora poravnat lijevo */
  animation:faq-open .25s ease;
}

/* Glatko otvaranje (CSS-only) */
@keyframes faq-open{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:translateY(0);}
}

/* Fokus tipkovnice */
.faq-section summary:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:4px;
  border-radius:6px;
}

/* Responsive */
@media (max-width:640px){
  .service-hero{padding:24px 0 4px}
  .media-frame{aspect-ratio:16/10}
  .service-cta .container{flex-direction:column;align-items:flex-start}
  .faq-section .section-head h2{font-size:1.5rem}
  .faq-section details{padding:14px 16px;}
}