/* Typography & base */
:root{--bg:#eee7de;--text:#2c2926;--muted:#8a8278;--brand:#c47a44;--brand-2:#e8c7a6;--card:#fffaf5;--line:#e3d9cc}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.65}
img{max-width:100%;display:block}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
.section-title{font-family:"Playfair Display",serif;font-weight:600;font-size:28px;margin:40px 0 20px}
/* Display titles for hero sections */
.display{font-family:Fraunces, "Playfair Display", serif;font-size:54px;line-height:1.05;margin:0}

/* Header */
.site-header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:"Playfair Display",serif;font-weight:700;font-size:22px;color:var(--text);text-decoration:none}
.main-nav a{margin:0 10px;color:var(--text);text-decoration:none}
.main-nav a.active{border-bottom:2px solid var(--brand)}
.lang-switch{display:flex;align-items:center}
.lang-btn{background:none;border:none;color:var(--text);cursor:pointer;font-weight:600}
.lang-btn.is-active{color:var(--brand)}
.sep{color:var(--muted);margin:0 6px}

/* Hero */
.hero{padding:48px 0;border-bottom:1px solid var(--line)}
.page-hero{padding:56px 0 32px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(196,122,68,.07),rgba(196,122,68,0));}
.work-hero .lede{max-width:760px}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero-copy h1{font-family:"Playfair Display",serif;font-size:44px;line-height:1.15;margin:0 0 10px}
.lede{color:var(--muted)}
.hero-cta{margin-top:18px;display:flex;gap:12px}
.hero-media {
  display: flex;
  justify-content: flex-end;
}

.hero-media img {
  width: 100%;
  max-width: 260px; /* bilo je 520px, sada 50% manje */
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.btn{background:var(--brand-2);color:#2a2a2a;border-radius:999px;padding:10px 18px;text-decoration:none;display:inline-block;border:0;cursor:pointer;font-weight:700;transition:background .15s ease, transform .15s ease}
.btn:hover{background:var(--brand);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--brand);border:1.5px solid var(--brand)}

/* Cards */
.cards{display:grid;gap:18px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .2s ease}
.card:hover{transform:translateY(-2px)}
.card-img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card-body{padding:14px}
/* Book covers are usually taller; keep aspect pleasing */
.books .card-img{aspect-ratio:3/4;object-fit:cover}

/* Newsletter */
.newsletter{background:var(--brand-2);color:#1a1a1a;margin:48px 0;padding:40px 0}
.newsletter .container{max-width:900px}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.newsletter-form input{flex:1;min-width:180px;padding:10px 12px;border-radius:999px;border:0}
.newsletter .btn{background:var(--card);color:var(--text);border:1px solid var(--line)}
.newsletter .btn:hover{background:#fffefb;border-color:#dccfbc}
.fine{color:#8a8a8a;font-size:12px}

/* Work */
.work-section{margin:36px 0}
.list{margin:0;padding:0 18px}
.masonry{columns:3 280px;column-gap:14px}
.masonry img:hover{filter:brightness(.97)}
.masonry img{width:100%;margin:0 0 14px;border-radius:8px;border:1px solid var(--line)}

/* Contact */
.contact{background:#f4eee5;padding:28px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fffaf5}
.contact-mail{font-weight:700;color:var(--text)}
.social{display:flex;gap:16px}
.social-link{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:999px;color:var(--text);text-decoration:none;background:#fff}
.social-link:hover{background:#fffaf5}

/* Prose */
.prose{max-width:760px}
.prose h1{font-family:"Playfair Display",serif;font-size:40px}
.prose .post-meta{color:var(--muted)}
.prose img.wide{margin:20px 0;border-radius:8px}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:40px;background:#f5f1ea}
.site-footer .container{height:64px;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal.is-open{display:flex}
.modal-card{background:#fff;border-radius:12px;max-width:900px;width:100%;overflow:hidden;display:grid;grid-template-columns:1fr 1.2fr;border:1px solid var(--line)}
.modal-media{background:#f7f5f0}
.modal-media img{width:100%;height:100%;object-fit:cover}
.modal-body{padding:20px}
.modal-title{font-family:"Playfair Display",serif;font-size:28px;margin:0 0 8px}
.modal-sub{color:var(--muted);margin:0 0 14px}
.modal-actions{display:flex;gap:10px;margin-top:16px}
.close-x{position:absolute;top:14px;right:14px;background:#fff;border:1px solid var(--line);border-radius:999px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text)}


/* Responsive adjustments for mobile */
@media (max-width: 700px) {
  /* Hero section */
  .hero-inner {
    grid-template-columns: 1fr; /* tekst i slika jedan ispod drugog */
    gap: 20px;
    text-align: center;
  }
  .hero-copy h1 {
    font-size: 28px; /* manji naslov */
    line-height: 1.2;
  }
  .hero-media {
    justify-content: center; /* centriraj sliku */
  }
  .hero-media img {
    max-width: 100%; /* neka slika ide šire na mobilnom */
  }

  /* Header & Navigation */
  .header-inner {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }
  .main-nav a {
    display: block;
    margin: 8px 0;
  }

  /* Cards grid */
  .cards.two,
  .cards.three {
    grid-template-columns: 1fr;
  }

  /* Masonry layout */
  .masonry {
    columns: 1 100%; /* jedna kolona za slike */
  }

  /* Modal */
  .modal-card {
    grid-template-columns: 1fr; /* slika gore, tekst dole */
  }
}

@media (max-width: 600px) {
  /* Kontakt sekcija - prilagođavanje za mobilni */
  .contact-card {
    flex-direction: column;   /* složi sadržaj jedan ispod drugog */
    align-items: flex-start;  /* poravnaj ulevo */
  }

  .social {
    flex-wrap: wrap;          /* dozvoli prelamanje linkova */
    justify-content: flex-start;
    width: 100%;
  }

  .social-link {
    flex: 1 1 45%;            /* zauzmi oko pola reda */
    justify-content: center;  /* centriraj ikonicu/tekst unutar dugmeta */
  }
}