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

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  background: linear-gradient(135deg, #ffffff, #f0f0f0);
  color:#222;
  line-height:1.6;
}

.visually-hidden {
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ================= HERO (MODERN) ================= */
/* Remove old hero definitions before this block */
.hero {
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 25% 30%, rgba(255,255,255,0.35),rgba(255,255,255,0)) #111;
  isolation:isolate;
  overflow:hidden;
  padding-top:90px; /* ensure below fixed header on very small heights */
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:url('images/1.jpeg') center/cover no-repeat;
  filter:brightness(.68);
  transition:opacity .7s ease-in-out;
  z-index:0;
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.15) 45%,rgba(0,0,0,.2) 70%,rgba(0,0,0,0));
  z-index:1;
  pointer-events:none;
}

.hero-text {
  position:relative;
  z-index:2;
  max-width:880px;
  padding:0 1.5rem;
  animation:fadeInHero .9s ease;
  text-align:center;
  color:#fff;
}

.hero-text h1 {
  font-size:clamp(1.9rem,4.4vw,3rem);
  margin:.8rem 0 1rem;
  font-weight:600;
  line-height:1.15;
}

.hero-sub {
  font-size:clamp(.95rem,1.3vw,1.15rem);
  line-height:1.5;
  color:#eee;
  max-width:680px;
  margin:0 auto 1.6rem;
  text-wrap:balance;
}

.cta-row {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.btn-prim, .btn-sec {
  text-decoration:none;
  padding:12px 26px;
  border-radius:40px;
  font-size:.9rem;
  letter-spacing:.5px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.35s;
}

.btn-prim {
  background:#fe1e1e;
  color:#fff;
  box-shadow:0 10px 28px -10px rgba(254,30,30,.55);
}
.btn-prim:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 40px -12px rgba(254,30,30,.65);
}

.btn-sec {
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
}
.btn-sec:hover { background:rgba(255,255,255,.2); transform:translateY(-3px); }

@keyframes fadeInHero {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}

@media (max-width:680px){
  .hero { min-height:78vh; }
  .hero-text h1 { margin-top:.2rem; }
  .cta-row { flex-direction:column; }
  .btn-prim, .btn-sec { justify-content:center; width:100%; }
}

/* --- HERO FULL SCREEN --- */
.hero {
  min-height:100dvh;        /* koristi dinamičku visinu (mobilni adres bar) */
  height:100vh;
  padding-top: clamp(110px, 14vh, 170px); /* prostor da tekst ne ide ispod headera */
}

/* Ako želiš H1 još niže na manjim visinama ekrana */
@media (max-height:620px){
  .hero { padding-top:130px; }
}

/* ================= KVALITETA SEKCIJA ================= */
.kvalitetaSekcija {
  padding:8% 5%;
  scroll-margin-top:95px;
}

.kvalitetaCard {
  position:relative;
  display:flex;
  overflow:hidden;
  border-radius:2rem;
  box-shadow:0 12px 40px rgba(0,0,0,0.058);
  transition:transform .3s, box-shadow .3s;
  min-height:400px;
  background:#fff;
}
.kvalitetaCard:hover {
  transform:translateY(-5px);
  box-shadow:0 16px 50px rgba(0,0,0,0.25);
}

.kvalitetaTekst {
  flex:1 1 50%;
  background:rgba(255,255,255,0.8);
  padding:4rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  backdrop-filter:blur(5px);
  z-index:2;
}
.kvalitetaTekst h1, .kvalitetaTekst h2 {
  font-size:2.4rem;
  color:#cb0202;
  margin:0 0 1rem;
}
.kvalitetaTekst p {
  font-size:1.2rem;
  color:#333;
  line-height:1.6;
}

.kvalitetaSlika {
  flex:1 1 50%;
  background:url('images/14.jpeg') center/cover no-repeat;
  border-top-right-radius:2rem;
  border-bottom-right-radius:2rem;
  transition:transform .5s ease, background-image 1s ease;
}

@media (max-width:768px){
  .kvalitetaCard { flex-direction:column; }
  .kvalitetaTekst { padding:2.5rem 2rem; }
  .kvalitetaSlika { height:300px; border-radius:0 0 2rem 2rem; }
  .kvalitetaTekst h1, .kvalitetaTekst h2 { font-size:2rem; }
  .kvalitetaTekst p { font-size:1rem; }
}

/* ================= PROIZVODI GRID ================= */
#proizvodi {
  background:#fe1e1e;
  padding:5% 5%;
  text-align:center;
  scroll-margin-top:95px;
}
#proizvodi h2 {
  font-size:1.7rem;
  color:#fff;
}

.product-grid {
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-evenly;
  gap:15px;
  padding:20px 0;
}

.product {
  color:#fff;
  background:rgba(255,255,255,0);
  flex:0 0 18%;
  padding:20px;
  text-align:center;
  text-decoration:none;
  transition:transform .3s, box-shadow .3s;
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(4px);
}
.product::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.12));
  opacity:0;
  transition:.5s;
}
.product:hover::after { opacity:1; }

.product img {
  width:80%;
  object-fit:contain;
  height:55%;
  border-radius:10px;
  margin-bottom:5%;
  transition:transform .5s;
}
.product:hover img { transform:scale(1.07); }
.product h3 { margin-bottom:2%; }
.product:hover { transform:scale(1.05); }

@media (max-width:768px){
  #proizvodi h2 { font-size:1.2rem; }
  .product-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 14px;
    padding:10px 4px 25px;
  }
  .product {
    flex:unset;
    max-width:100%;
    padding:14px 10px 16px;
  }
  .product img {
    height:120px;
    width:100%;
    object-fit:contain;
    margin-bottom:8px;
  }
  .product h3 {
    font-size:.9rem;
    margin-bottom:4px;
  }
  .product p {
    font-size:.75rem;
    line-height:1.3;
  }
}

/* Ultra uski ekrani – po želji ostavi 2 stupca, ali malo smanji */
@media (max-width:400px){
  .product-grid {
    gap:14px 10px;
  }
  .product img { height:100px; }
  .product h3 { font-size:.85rem; }
  .product p { font-size:.7rem; }
}

/* === Center last product when odd count (mobile 2-col) === */
@media (max-width:768px){
  #proizvodi .product-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  /* Ako je broj elemenata neparan (zadnji je u lijevom stupcu) – raširi ga i centriraj */
  #proizvodi .product-grid > a.product:nth-last-child(1):nth-child(odd) {
    grid-column:1 / -1;
    justify-self:center;
    max-width:72%;
  }
}

/* (Opcionalno) Malo veći za ultra uske ekrane */
@media (max-width:400px){
  #proizvodi .product-grid > a.product:nth-last-child(1):nth-child(odd){
    max-width:82%;
  }
}

/* ================= PREDNOSTI ================= */
#prednosti {
  background:linear-gradient(135deg,#ffffff,#f0f0f0);
  padding:100px 5%;
  display:flex;
  justify-content:center;
  scroll-margin-top:95px;
}

#prednosti .container {
  width:100%;
  max-width:1400px;
  padding:60px 80px;
  background:#fff;
  border-radius:30px;
  box-shadow:0 12px 40px rgba(0,0,0,0.058);
  position:relative;
  text-align:left;
  transition:.4s;
}

#prednosti .container:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
}

#prednosti h1,
#prednosti h2 {
  font-size:2.5rem;
  color:#cb0202;
  margin-bottom:40px;
  font-weight:700;
  text-align:center;
}

#prednosti ul {
  list-style:none;
  padding:0;
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:25px;
}

#prednosti li {
  font-size:1.4rem;
  color:#5e3434;
  display:flex;
  align-items:center;
  transition:color .3s;
}
#prednosti li:hover { color:#e74c3c; }
#prednosti li::before {
  content:'🟥';
  margin-right:16px;
  font-size:1.4rem;
  color:#fe1e1e;
}

@media (max-width:768px){
  #prednosti h1, #prednosti h2 { font-size:2.2rem; }
  #prednosti li { font-size:1.2rem; }
  #prednosti .container { padding:40px 20px; }
}

/* ================= PARTNERI ================= */
#partneriTxt {
  padding:2% 5%;
  margin:0 25%;
  border-radius:20px;
  text-align:center;
}
#partneri h2 {
  font-size:2rem;
  color:#cd0000;
  margin-bottom:20px;
  font-weight:700;
  text-align:center;
  scroll-margin-top:95px;
}
#partneri p {
  font-size:1.2rem;
  color:#b90000;
  max-width:700px;
  margin:0 auto 10px;
  line-height:1.6;
  text-align:center;
}
.partneri-grid {
  padding:1% 10%;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  gap:30px;
}
.partneri-grid a,
.partneri-grid img {
  display:flex;
  justify-content:center;
  align-items:center;
}
.partneri-grid img {
  width:90px;
  height:auto;
  object-fit:contain;
  transition:transform .4s, filter .4s;
  filter:grayscale(.4);
}
.partneri-grid img:hover {
  transform:scale(1.08);
  filter:grayscale(0) brightness(1.05);
}
@media (max-width:768px){
  .partneri-grid img { width:120px; }
  #partneri h2 { font-size:2.2rem; }
  #partneri p { font-size:1rem; margin-bottom:30px; }
}

/* ================= KONTAKT ================= */
#kontakt {
  padding:80px 5%;
  display:flex;
  justify-content:center;
  align-items:center;
  scroll-margin-top:95px;
}

.kontakt-container {
  background:#fe1e1e;
  padding:50px 50px;
  border-radius:20px;
  box-shadow:0 8px 20px rgba(0,0,0,0.1);
  max-width:700px;
  width:100%;
  transition:.3s;
  text-align:center;
}

.kontakt-container:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

.kontakt-container h2 {
  font-size:2.2rem;
  margin-bottom:30px;
  color:#fff;
  font-weight:700;
}

form {
  display:flex;
  flex-direction:column;
  gap:15px;
}
form input, form textarea {
  padding:12px 16px;
  border:none;
  background:#f4f4f4;
  border-radius:8px;
  font-size:1rem;
  transition:background .3s;
  font-family:'Raleway',sans-serif;
}
form input:focus, form textarea:focus { background:#e9e9e9; outline:none; }
form button {
  background:#fff;
  color:#fe1e1e;
  padding:12px 16px;
  border:none;
  border-radius:8px;
  font-size:1.05rem;
  font-weight:600;
  cursor:pointer;
  transition:background .3s, transform .2s, color .3s;
}
form button:hover {
  background:#cb0202;
  color:#fff;
  transform:translateY(-2px);
}

@media (max-width:768px){
  .kontakt-container { padding:30px 20px; }
  .kontakt-container h2 { font-size:1.8rem; margin-bottom:20px; }
}

/* ================= FOOTER ================= */
.footer-info {
  font-size:1rem;
  display:flex;
  justify-content:center;
  align-items:stretch;
  background:#fe1e1e;
  color:#fff;
  padding:20px;
  flex-wrap:wrap;
  gap:200px;
}
.footer-info div {
  flex:1;
  min-width:220px;
  padding:10px;
  max-width:300px;
}
.footer-info div p { line-height:1.4em; }
.footer-info h3 { margin-bottom:.8rem; }

.footer-bottom {
  text-align:center;
  background:rgb(86,0,0);
  color:#fff;
  padding:10px;
  font-size:.9rem;
}

@media (max-width:768px){
  .footer-info { flex-direction:column; gap:1rem; }
  .footer-info div { max-width:90%; padding:15px 0; }
}

/* ================= GENERIC PRODUCT PAGES (PVC/ALU) ================= */
.containerPvc {
  max-width:1200px;
  margin:0 auto 60px;
  padding:0 20px;
}

.containerPvc h1 { font-size:2.5rem; margin-bottom:20px; }

.containerPvc h2 {
  text-align:center;
  margin-top:40px;
  font-size:1.8rem;
  margin-bottom:30px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:2px solid #ddd;
  padding-bottom:10px;
  justify-content:center;
}

.containerPvc .icon { font-size:1.5rem; }

.intro-box {
  max-width:95%;
  margin:40px auto;
  padding:30px 20px;
  border-radius:12px;
  box-shadow:0 2px 0px rgba(0,0,0,0.1);
  background:#fafafa;
  text-align:center;
  line-height:1.1;
}

.intro-part {
  font-size:1.3rem;
  margin:10px 0;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
  color:#000;
}
.intro-part.visible {
  opacity:1;
  transform:translateY(0);
}

.containerPvc .products-grid {
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  justify-content:center;
}

.containerPvc .product {
  flex:1 1 350px;
  max-width:450px;
  background:#f9f9f9;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  padding:25px;
  text-align:center;
  transition:transform .3s ease, opacity .6s ease;
  opacity:0;
  transform:translateY(20px);
}
.containerPvc .product.visible {
  opacity:1;
  transform:translateY(0);
}
.containerPvc .product:hover { transform:scale(1.03); }
.containerPvc .product img {
  width:100%;
  max-height:220px;
  object-fit:contain;
  border-radius:10px;
}
.containerPvc .product h3 {
  color:rgb(57,48,48);
  margin:15px 0 10px;
  font-size:1.2rem;
}
.containerPvc .product p {
  margin:0;
  color:#555;
  font-size:.95rem;
  line-height:1.5;
}

/* Header images backgrounds (legacy sections) */
.aluSlika, .pvcSlika, .sjenilaSlika, .stakloSlika, .garaznaSlika {
  width:100%;
  height:300px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.aluSlika { background-image:url('/images/aluStolarija/ALU-Stolarija.webp'); }
.pvcSlika { background-image:url('/images/pvcStolarija/PVC-Stolarija.webp'); }
.sjenilaSlika { background-image:url('/images/sjenilaKomarnici/sjenilaKomarnici.webp'); }
.stakloSlika { background-image:url('/images/staklo/stakloSlika.webp'); }
.garaznaSlika { background-image:url('/images/garaznaVrata/gVrata.webp'); }

.pvcOverlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:20px;
  flex-direction:column;
  text-align:center;
}
.pvcOverlay h1 {
  color:#fff;
  font-size:2.5rem;
  margin:0;
  padding:15px 30px;
  user-select:none;
}

@media (max-width:768px){
  .containerPvc h2 { font-size:1.5rem; padding-bottom:6px; }
  .intro-box { width:90%; padding:20px 15px; }
  .intro-part { font-size:1.1rem; }
  .containerPvc .products-grid { gap:20px; }
  .pvcSlika, .aluSlika { height:220px; }
  .pvcOverlay h1 { font-size:1.8rem; }
}

/* ================= ABOUT SECTION (oNama) ================= */
.about-container {
  position:relative;
  width:100%;
  height:85vh;
  background:url('images/oNama.jpeg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  overflow:hidden;
  transition:1s ease-in-out;
  margin:auto;
}
.about-overlay {
  position:absolute;
  inset:0;
  background:rgba(254,30,30,0);
  transition:background 1s ease-in-out;
}
#oNama {
  z-index:2;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1.5s, transform 1.5s;
  width:100%;
  max-width:95%;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}
.about-title {
  font-size:3em;
  margin:0 0 20px;
  opacity:0;
  transition:opacity 1s;
}
.about-text {
  font-size:1em;
  line-height:1.6;
  max-width:100%;
  margin:0 auto;
  color:#fff;
  opacity:0;
  transition:opacity 1.5s;
  padding:0 10px;
  overflow:hidden;
  text-overflow:ellipsis;
}
#toggleBtn {
  position:absolute;
  bottom:10px;
  padding:10px 20px;
  margin-bottom:20px;
  font-size:16px;
  cursor:pointer;
  border:none;
  background:#fff;
  color:#fe1e1e;
  border-radius:8px;
  transition:.3s;
  z-index:3;
}
#toggleBtn:hover { background:#fe1e1e; color:#fff; }

.active .about-overlay { background:rgba(254,30,30,0.912); }
.active #oNama { opacity:1; transform:translateY(0); }
.active .about-title,
.active .about-text { opacity:1; }

.show-image .about-overlay { background:rgba(254,30,30,0); }
.show-image #oNama { opacity:0; transform:translateY(20px); }

@media (max-height:610px){
  .about-title { font-size:1.5em; }
  .about-text { font-size:0.8em; }
  #toggleBtn { font-size:10px; padding:8px 16px; }
}
@media (max-height:460px){
  .about-text { font-size:0.7em; }
}
@media (max-width:768px){
  .about-title { font-size:1.5em; }
  .about-text { font-size:0.7em; padding:0 15px; }
  #toggleBtn { font-size:6px; padding:8px 16px; margin-bottom:5px; }
  #oNama { max-width:100%; }
}

/* ================= RESPONSIVE UTILITIES ================= */
#proizvodi, #prednosti, #kontakt, #partneri { scroll-margin-top:95px; }

@media (prefers-reduced-motion:reduce){
  .hero-text, .product, .kvalitetaCard { animation:none !important; transition:none !important; }
  .hero-overlay { transition:none !important; }
}

/* END */