/* ==========================================================================
   Biblioteka — main.css
   Sekcije: 1. Tokens / 2. Base / 3. Header / 4. Footer / 5. Home /
            6. Cards & grids / 7. Pages / 8. Single / 9. Forms / 10. Responsive
   ========================================================================== */

/* 1. Tokens */
:root {
  --c-primary: #2F2F2F;
  --c-blue: #0583EB;
  --c-text: #3F3F3F;
  --c-body: #333333;
  --c-accent: #FF9600;
  --c-bg: #F9FAFB;
  --c-white: #FFFFFF;
  --f-head: "Varela Round", sans-serif;
  --f-text: "Open Sans", sans-serif;
  --f-body: "Gentium Plus", serif;
  --f-lato: Lato, sans-serif;
  --f-poem: "Lobster Two", cursive;
  --f-icon: "Font Awesome 6 Free";
  --container: 1440px;
  --radius: 10px;
  --shadow-card: 0 0 4px rgba(0,0,0,.23);
  --shadow-header: 0 0 5px rgba(0,0,0,.5);
  --topbar-h: 41px;
}

/* 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:24px;color:var(--c-body);background:var(--c-bg)}
body.no-scroll{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-blue);text-decoration:none}
h1,h2,h3,h4,h5,h6{font-family:var(--f-head);color:var(--c-primary);margin:0;line-height:1}
h1{font-size:60px;font-weight:700}
h2{font-size:30px;font-weight:700}
h3{font-size:30px;font-weight:600}
h4{font-size:24px;font-weight:600}
h5{font-size:20px;font-weight:500}
h6{font-size:16px;font-weight:500}
p{margin:0 0 14.4px}
.list-reset,.menu{margin:0;padding:0;list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 10px;width:100%}
.section{padding:20px 0}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--c-white);clip:auto!important;clip-path:none;color:var(--c-primary);display:block;font-family:var(--f-text);font-size:14px;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-size:15px;line-height:15px;font-weight:500;color:#fff;background:var(--btn-bg,var(--c-accent));padding:12px 24px;border-radius:3px;border:0;cursor:pointer;transition:filter .2s}
.btn:hover{filter:brightness(.95);color:#fff}
.btn--outline{background:transparent;border:2px solid #fff}
.btn--blue{--btn-bg:var(--c-blue)}
.btn--lg{font-size:18px;line-height:18px}
.btn--bold{font-weight:600}
.btn i{font-size:1em}

/* Zajedničke komponente sekcija (koriste ih početna i arhive) */
.section-title{font-size:40px;line-height:40px;font-weight:600;text-align:center;color:var(--c-primary)}
.section-title--white{color:#fff}
.divider{width:100px;height:2px;background:var(--c-primary);margin:20px auto 40px}
.divider--white{background:#fff}
.icon-list{display:flex;flex-direction:column;gap:10px;font-family:var(--f-text);font-size:16px;line-height:24px}
.icon-list li{display:flex;align-items:flex-start;gap:5px}
.icon-list i{font-size:16px;line-height:24px;flex:0 0 auto;width:18px;text-align:center} /* širina ikone kao Elementor icon-list (18px / 23px) — utiče na prelom teksta */
.icon-list--lg{gap:20px;font-size:18px;line-height:27px;font-weight:600}
.icon-list--lg i{font-size:18px;line-height:27px;width:23px}
/* .lottie je apsolutno pozicioniran u roditelju (position:relative + min-height) da visina animacije ne diktira visinu reda; SVG se uklapa (meet). */
.lottie{position:absolute;inset:0}
.lottie svg{display:block;width:100%!important;height:100%!important}

html.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
html.js [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* 3. Header */
/* Sticky na .site-header sa top:-(visina topbara): topbar odskroluje, .header-bar ostaje zalijepljen na vrhu. */
.site-header{position:sticky;top:calc(-1 * var(--topbar-h));z-index:100}

/* 3.1 Top bar */
.topbar{background:var(--c-blue);color:var(--c-white);height:var(--topbar-h);font-family:var(--f-lato);font-size:14px;line-height:21px;font-weight:700}
.topbar__inner{display:flex;align-items:center;height:100%}
.topbar__left,.topbar__right{display:flex;align-items:center;gap:20px;margin:0;padding:0;list-style:none}
.topbar__left{width:60%}
.topbar__right{width:40%;justify-content:flex-end}
.topbar li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.topbar a{display:inline-flex;align-items:center;gap:5px;color:var(--c-white)}
.topbar a:hover{color:var(--c-white);text-decoration:underline}
.topbar i{font-size:14px;color:var(--c-white)}

/* 3.2 Header bar */
.header-bar{position:relative;background:var(--c-white);box-shadow:var(--shadow-header);padding-top:5px}
.header-bar__counter{display:flex;justify-content:center;align-items:center;gap:5px;min-height:37px}
.counter-label{font-family:var(--f-head);font-size:14px;line-height:21px;font-weight:200;color:var(--c-primary)}
.visits-counter{display:inline-block;padding:0 1px 0 5px;letter-spacing:5px;background:#d8d8d8;color:#333;border-radius:4px;font-weight:700;font-size:12px;line-height:18px;font-family:var(--f-body)}
.header-bar__row{display:flex;align-items:center;padding:10px;gap:20px}
.header-bar__row > *{padding:10px;min-height:112px} /* 112px izmjereno na referenci (Elementor) */
.header-logo{width:calc((100% - 20px) * .15);flex:0 0 calc((100% - 20px) * .15);display:flex;align-items:center} /* 15% bez razmaka (Elementor: 197px na 1366) */
.header-logo a{display:block}
.header-logo img{width:200px;max-width:100%;margin-top:-40px} /* -40px izmjereno na referenci (Elementor): logo ulazi u red brojača */
.header-nav{width:85%;flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;min-width:0}

/* 3.3 Glavni meni */
.main-nav{display:flex;align-items:center}
.main-menu{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:0;padding:0;list-style:none} /* stavke poravnate desno (Elementor align-end) — i kad se prelome u drugi red */
.main-menu li{position:relative}
.main-menu a{position:relative;display:block;font-family:var(--f-head);font-size:14px;line-height:20px;font-weight:600;color:var(--c-text);padding:13px 20px;white-space:nowrap;transition:color .2s}
.main-menu a::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;background:var(--c-accent);opacity:0;transition:opacity .2s}
.main-menu a:hover,.main-menu a:focus-visible,.main-menu .is-active > a{color:var(--c-accent)}
.main-menu .is-active > a::after{opacity:1}

/* 3.4 Katalog dugme + toggle dugmad */
.btn--katalog{font-family:var(--f-head);font-size:14px;line-height:14px;font-weight:700;padding:14px 20px 10px;border-radius:3px;background:var(--c-accent);color:#fff;white-space:nowrap}
.header-katalog{margin-left:20px;padding:21px 20px 17px} /* 52px visine kao na referenci (Elementor ikona u dugmetu zauzima 28px) */
.search-toggle,.menu-toggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;margin:0;cursor:pointer;color:var(--c-primary)}
.search-toggle{width:40px;height:40px;margin-left:10px;border-radius:4px}
.search-toggle i{font-size:22px;color:#33373D;line-height:1}
.menu-toggle{display:none;width:50px;height:50px;color:var(--c-primary)}
.menu-toggle svg{width:39px;height:auto;display:block}

/* 3.5 Search overlay */
.search-overlay{display:none;position:fixed;inset:0;z-index:1000;background:var(--c-white);align-items:center;justify-content:center;padding:20px}
.search-overlay.is-open{display:flex}
.search-overlay__form{width:70%;max-width:946px}
.search-overlay__form input[type="search"]{width:100%;font-family:var(--f-text);font-size:50px;line-height:75px;font-weight:400;color:var(--c-text);text-align:center;background:transparent;border:0;border-bottom:2px solid var(--c-primary);border-radius:0;outline:none;padding:0;margin:0;-webkit-appearance:none;appearance:none}
.search-overlay__form input[type="search"]::placeholder{color:var(--c-text);opacity:.8}
.search-overlay__form input[type="search"]::-webkit-search-decoration,.search-overlay__form input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
.search-overlay__close{position:absolute;top:20px;right:20px;width:40px;height:40px;font-size:40px;line-height:1;background:transparent;border:0;padding:0;cursor:pointer;color:var(--c-primary);font-family:var(--f-text)}

/* 3.6 Off-canvas mobilni meni */
.offcanvas{position:fixed;inset:0;z-index:1000;visibility:hidden;pointer-events:none;transition:visibility 0s .3s}
.offcanvas.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
.offcanvas__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s ease}
.offcanvas.is-open .offcanvas__overlay{opacity:1}
.offcanvas__panel{position:absolute;top:0;right:0;bottom:0;width:300px;max-width:85vw;height:100%;background:var(--c-white);padding:60px 0 20px;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease;box-shadow:-2px 0 8px rgba(0,0,0,.15)}
.offcanvas.is-open .offcanvas__panel{transform:translateX(0)}
.offcanvas__close{position:absolute;top:15px;right:15px;width:40px;height:40px;font-size:36px;line-height:1;background:transparent;border:0;padding:0;cursor:pointer;color:var(--c-primary);font-family:var(--f-text)}
.mobile-menu-list{margin:0;padding:0;list-style:none}
.mobile-menu-list a{display:block;font-family:var(--f-head);font-size:16px;line-height:24px;font-weight:600;color:var(--c-text);padding:12px 20px;transition:color .2s}
.mobile-menu-list a:hover,.mobile-menu-list .is-active > a{color:var(--c-accent)}
.offcanvas__katalog{display:flex;justify-content:center;margin:20px}
@media (prefers-reduced-motion: reduce){.offcanvas,.offcanvas__panel,.offcanvas__overlay{transition:none}}

/* 3.7 Tablet (768–1024) */
@media (max-width: 1024px){
  .topbar{display:none}
  .site-header{top:0}
  .header-bar{padding:40px 20px 10px}
  .header-bar__row > *{padding:0;min-height:0}
  .header-logo{width:40%;flex-basis:40%;height:94px} /* 94px izmjereno na referenci (Elementor) */
  .header-logo img{margin-top:0}
  .header-nav{width:60%;gap:20px}
  .main-nav,.header-katalog{display:none}
  .search-toggle{margin-left:0;background:rgba(0,0,0,.05)}
  .menu-toggle{display:inline-flex}
}

/* 3.8 Mobile (≤767) */
@media (max-width: 767px){
  /* Referenca (375px): brojač @35, red @67 (padding 10), logo 148px @30,53 (ulazi 24px iznad kolone), hamburger 50px završava na 332px */
  .header-bar{padding:25px 10px 0} /* header 163px (referenca 160) */
  .header-bar__row{margin-top:5px}
  .header-logo{width:50%;flex-basis:50%;height:76px;align-items:flex-start;padding-left:10px} /* 76px izmjereno na referenci (Elementor) */
  .header-logo img{width:148px;margin-top:-24px}
  .header-nav{width:50%}
  .menu-toggle{margin-right:23px}
  .search-overlay__form{width:90%}
  .search-overlay__form input[type="search"]{font-size:28px;line-height:48px}
}

/* 4. Footer */
.site-footer{background:var(--c-blue);color:var(--c-white);padding:80px 0;font-size:16px;line-height:24px}
.site-footer a{color:var(--c-white)}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--c-white);text-decoration:underline}
/* Razmaci 10px (red, kolone 1 i 3) izmjereni na referenci (Elementor): red počinje 90px od vrha, visina footera 472px. */
.footer-cols{display:flex;flex-wrap:wrap;gap:20px;padding:10px 0}
.footer-col{flex:1 1 0;min-width:0}
.footer-col--info{display:flex;flex-direction:column;gap:20px;padding:10px;font-family:var(--f-text)}
.footer-col--nav,.footer-col--links{font-family:var(--f-head)}
.footer-col--links{padding:10px 10px 0}
.footer-logo{width:250px;max-width:100%;margin-top:-75px} /* -75px izmjereno na referenci (Elementor, i na mobilnom): logo ulazi u gornji padding */
.footer-name,.footer-hours p:last-child{margin-bottom:0} /* razmak između <p> u .footer-hours (14.4px) daje globalni p */
.footer-contact{display:flex;flex-direction:column;gap:10px;font-family:var(--f-head)}
.footer-contact li{display:flex;align-items:flex-start;gap:5px}
.footer-contact i{font-size:16px;line-height:24px;flex:0 0 auto}
.footer-title{font-size:20px;line-height:20px;font-weight:600;color:var(--c-white);margin:0 0 20px}
.footer-nav{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.footer-nav li{display:flex;align-items:center}
.footer-nav li::before{content:"\f054" / "";font-family:var(--f-icon);font-weight:900;font-size:14px;margin-right:8px}
.footer-links{margin:0;padding:0;list-style:none}
.footer-links a{display:block;line-height:20px;padding:6px 20px}
@media (max-width: 767px){
  .footer-col{flex-basis:100%}
}

/* 5. Home */
/* 5.1 Hero slider */
.hero{background:#CFF8FF;padding:50px 0}
.hero .container{padding:0} /* slajder od ruba do ruba kao na referenci (1351px na 1366) */
.hero-slide{position:relative;display:flex;min-height:720px;border-radius:var(--radius);background:var(--slide-bg,var(--c-blue));overflow:hidden;color:#fff;height:auto}
.hero-slide::before{content:"";position:absolute;inset:0;background:var(--hero-pattern,none) center/auto repeat;opacity:.08;pointer-events:none}
.hero-slide__text,.hero-slide__image{position:relative;width:50%}
.hero-slide__text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:100px}
.hero-slide__title{font-size:60px;line-height:60px;font-weight:700;color:#fff}
.hero-slide__body{font-family:var(--f-text);font-size:16px;line-height:24px;font-weight:500;margin:20px 0}
.hero-slide__body:last-child{margin-bottom:0} /* slajd bez dugmeta: tekst je centriran bez donjeg razmaka (referenca) */
.hero-slide__image{display:flex;align-items:center;justify-content:center}
.hero-slide__img{width:500px;max-width:100%;height:auto}
/* Swiper kontrole: bijeli krugovi 48px sa SVG strelicama (hero: dolje desno; novosti: centrirano lijevo/desno izvan okvira) */
.swiper-button-prev,.swiper-button-next{width:48px;height:48px;margin-top:0;border-radius:50%;background:#fff;color:#696969;border:0;padding:0;cursor:pointer;box-shadow:var(--shadow-card)}
.swiper-button-prev::after,.swiper-button-next::after{display:none}
.swiper-button-prev svg,.swiper-button-next svg{width:30px;height:auto;fill:currentColor}
.hero-swiper .swiper-button-prev,.hero-swiper .swiper-button-next{top:auto;bottom:35px;left:auto;right:25px} /* pozicije izmjerene na referenci: 19px od dna slajda (+16 padding), 25px od desnog ruba, razmak 7px */
.hero-swiper .swiper-button-prev{right:80px}
.hero-swiper,.news-swiper{--swiper-pagination-bullet-size:8px;--swiper-pagination-bullet-inactive-opacity:1}
.hero-swiper{--swiper-pagination-color:#333;--swiper-pagination-bullet-inactive-color:#9a9a9a}
.hero-swiper .swiper-pagination,.news-swiper .swiper-pagination{position:static;margin-top:10px;text-align:center}
/* Referenca: swiper 736px = slajd 720 + padding-bottom 16 (tačkice apsolutno na dnu, 10px ispod slajda); strelice 19px iznad dna slajda = 35px od dna swipera */
.hero-swiper{padding-bottom:16px}
.hero-swiper .swiper-pagination{position:absolute;left:0;right:0;bottom:0;margin:0;line-height:6px}

/* 5.2 Flip kartice */
.home-cards{padding:20px 0 80px}
.home-cards .container{padding:0} /* red kartica od ruba do ruba: 4 × 300px + 3 × 50px = 1350px kao na referenci */
.flip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:50px}
.flip-card{display:block;height:300px;padding:0 10px;border-radius:var(--radius);background:var(--card-bg,var(--c-blue));color:#fff;perspective:1000px}
.flip-card__inner{position:relative;height:280px;margin:10px 0;transform-style:preserve-3d;transition:transform .6s}
.flip-card:focus-visible .flip-card__inner{transform:rotateY(180deg)}
@media (hover:hover){.flip-card:hover .flip-card__inner{transform:rotateY(180deg)}} /* na touch uređajima tap odmah vodi na link */
.flip-card__front,.flip-card__back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-card__back{transform:rotateY(180deg)}
.flip-card__icon{width:70px;height:70px}
.flip-card__icon svg,.flip-card__icon img{width:70px;height:70px;fill:#fff}
.flip-card__icon svg *{fill:#fff}
.flip-card__title{font-size:21px;line-height:21px;font-weight:600;color:#fff;margin:8px 0 16px}
.flip-card__back p{font-family:var(--f-text);font-size:14px;line-height:21px;margin:0 0 20px}
@media (prefers-reduced-motion: reduce){.flip-card__inner{transition:none}}

/* 5.3 Boxovi (zajedničko) */
.box{background:var(--box-bg,var(--c-blue));color:#fff;padding:40px;border-radius:var(--radius);transition:filter .3s}
.box:hover{filter:brightness(.93)} /* #00AA65 -> #009E5E kao na referenci */
.box__title{font-size:30px;line-height:30px;font-weight:600;color:#fff;margin:0 0 20px}
.box__title--lg{font-size:32px;line-height:32px}
.box__text{font-family:var(--f-text);font-size:16px;line-height:24px;margin:0 0 20px}
.box img{display:block;max-width:100%;height:auto}

/* 5.4 Pet zakona + Lektira */
/* Referenca: red od ruba do ruba (666px boxovi na 1366), unutrašnje kolone imaju 10px padding (Elementor kontejneri) */
.two-boxes{display:flex;gap:20px;margin:20px 0 0} /* unutar .home-cards .container (padding 0) pa je red već od ruba do ruba */
.two-boxes > .box{flex:1 1 0;min-width:0}
.box-laws{min-height:454px}
.box-laws__row,.box-lektira__row{display:flex;gap:20px;flex-wrap:wrap}
.box-laws .box__title{margin-bottom:50px} /* referenca ima 2 prazna reda (<br><br>) ispod naslova */
.box-laws__text{flex:1 1 0;min-width:0;padding:0 10px}
.box-laws__image{flex:0 0 198px;align-self:flex-end}
.box-laws__image img{width:198px;height:auto;margin-left:auto}
.box-laws__caption{font-family:var(--f-text);font-size:13px;line-height:19.5px;font-weight:400;text-align:right;margin:0;white-space:pre-line}
.box-lektira{display:flex;flex-direction:column}
.box-lektira .box__title{padding:0 10px}
.box-lektira__row{flex:1 1 auto;padding:10px}
.box-lektira__text{flex:0 0 calc(60% - 10px);padding:0 10px;font-family:var(--f-text);font-size:18px;line-height:27px;font-weight:600}
.box-lektira__text p{margin:0 0 20px}
.box-lektira__lottie{flex:0 0 calc(40% - 10px);position:relative;min-height:150px}

/* 5.5 Novosti */
.home-news{background:var(--c-blue);padding:100px 30px} /* 40px uvlaka kartica kao na referenci (30 + 10 container) */
.news-carousel{position:relative;padding:0 64px} /* strelice stoje u prostoru pored kartica, ne preko sadržaja (zahtjev korisnika) */
.news-swiper{--swiper-pagination-color:#fff;--swiper-pagination-bullet-inactive-color:rgba(255,255,255,.5)}
.news-swiper .swiper-slide{height:auto}
/* Referenca: swiper = kartice + padding-bottom 16, tačkice apsolutno na dnu (10px ispod kartica) */
.news-swiper{padding-bottom:16px}
.news-swiper .swiper-pagination{position:absolute;left:0;right:0;bottom:0;margin:0;line-height:6px}
.news-carousel .swiper-button-prev,.news-carousel .swiper-button-next{top:calc(50% - 14px);transform:translateY(-50%)} /* centar strelice 6px iznad centra kartice (referenca), -8 zbog padding-bottom swipera */
.news-carousel .swiper-button-prev{left:0}
.news-carousel .swiper-button-next{right:0}
/* 5.6 Klub / E-izvori / pjesma */
.club-row{display:flex;gap:20px;margin:80px 0}
.club-col,.poem-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px}
.box-club__row,.box-eizvori__row{display:flex;gap:20px;flex-wrap:wrap}
/* Širine kolona i 10px unutrašnji paddinzi izmjereni na referenci (lista 368px @60, slika e-izvora @412) */
.box-club__list{flex:0 0 calc(69.2% - 10px);padding:10px}
.box-club__lottie{flex:1 1 0;min-width:0;position:relative;min-height:150px}
.box-eizvori__text{flex:0 0 calc(59.5% - 10px)}
.box-eizvori__image{flex:1 1 0;min-width:0;padding-left:10px}
.box-eizvori__image img{width:202px;height:auto}
.box-poem{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;background:#000 var(--poem-img,none) no-repeat right bottom/contain;min-height:100%}
.box-poem:hover{filter:none}
.box-poem__text{font-family:var(--f-poem);font-size:16px;line-height:24px;padding:0 10px}
.box-poem .box-poem__img{display:none}
.box-poem__caption{margin:0;text-align:right;font-family:var(--f-head);font-size:16px;line-height:16px;font-weight:600}
.box-poem__caption span{display:block}
.box-poem__caption span + span{margin-top:5px}

/* 5.7 Home — tablet (≤1024) */
@media (max-width: 1024px){
  .hero-slide{flex-direction:column-reverse}
  .hero-slide__text,.hero-slide__image{width:100%}
  .hero-slide__text{padding:50px}
  .hero-slide__title{font-size:40px;line-height:40px}
  .hero-slide__body{font-size:14px;line-height:21px}
  .hero-slide__img{width:60%}
  .flip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-boxes,.club-row{flex-direction:column}
  .news-carousel{padding:0} /* na tabletu/mobilnom bez strelica (swipe + tačkice) */
  .news-carousel .swiper-button-prev,.news-carousel .swiper-button-next{display:none}
  .two-boxes > .box,.club-col,.poem-col{flex:0 0 auto} /* u koloni flex-basis 0 + min-height bi sakrio sadržaj (box-laws 454px umjesto 841px) */
}
/* 5.8 Home — mobile (≤767) */
@media (max-width: 767px){
  .hero{padding:20px 0}
  .hero .container,.home-cards .container{padding:0 10px} /* na mobilnom referenca ima 10px uvlaku (slajder i kartice 355px) */
  .hero-slide{min-height:550px;padding-top:40px}
  .hero-slide__text{padding:40px;min-height:300px}
  .hero-slide__title{font-size:24px;line-height:24px}
  .hero-slide__body{font-size:12px;line-height:18px}
  .home-cards{padding:20px 0}
  .flip-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .box{padding:20px}
  .box__title,.box__title--lg{font-size:24px;line-height:24px}
  .box__text{font-size:14px;line-height:21px}
  .box-laws__text,.box-laws__image,.box-lektira__text,.box-lektira__lottie,.box-club__list,.box-club__lottie,.box-eizvori__text,.box-eizvori__image{flex-basis:100%}
  .box-laws__text{padding:0}
  .box-laws .box__title{margin-bottom:66px} /* referenca: naslov 2 reda + 2 prazna reda (94px) + 20px */
  .icon-list--lg{font-size:16px;line-height:24px;gap:16px} /* referenca: lista zakona na mobilnom 16px/24px, 185px ukupno */
  .box-laws__image img{width:100%;max-width:315px;margin-left:0}
  .box-lektira__text{font-size:16px;line-height:24px}
  .box-lektira__lottie,.box-club__lottie{min-height:0;height:24px;flex-basis:100%} /* referenca: lottie na mobilnom zauzima samo 24px */
  .box-club__list{padding:0} /* referenca: lista odmah 20px ispod teksta */
  .box-eizvori__text{padding:0}
  .box-eizvori__image{padding:10px}
  .box-eizvori__image img{width:100%}
  .home-news{padding:100px 0}
  .section-title{font-size:24px;line-height:24px}
  .club-row{margin:30px 0} /* referenca: 30px od novosti i 30px do footera */
  .box-club,.box-eizvori{padding:40px} /* referenca zadržava 40px padding na ova dva boxa i na mobilnom */
  /* Referenca (mobilna verzija pjesme): tekst 295px, slika 295x266 40px ispod teksta, potpis u dva reda po 24px (razmak 5px), box 909px */
  .box-poem{background-image:none!important;justify-content:flex-start}
  .box-poem .box-poem__img{display:block;width:100%;max-width:295px;margin:40px 0 5px}
  .box-poem__caption{font-size:16px;line-height:24px}
  .box-poem__caption span + span{margin-top:5px}
}

/* 6. Cards & grids */
.wavy{height:6px;width:100%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6' viewBox='0 0 20 6'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3' fill='none' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E") repeat-x left center}
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:30px} /* auto-rows 1fr kao Elementor loop grid: svi redovi jednake visine */

.card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;color:var(--c-body)}
.card__image{display:block}
.card__image img{width:100%;height:auto;display:block}
.card__body{display:flex;flex-direction:column;gap:5px;padding:30px 20px 0;flex:1 1 auto}
.card__meta{display:flex;flex-wrap:wrap;font-family:var(--f-lato);font-size:12px;line-height:18px;color:#4B4B4B}
.card__meta li{display:inline-flex;align-items:center;gap:5px;margin-right:16px} /* 16px kao Elementor inline icon-list (8 margin + 8 padding) — utiče na prelom meta reda */
.card__meta li:last-child{margin-right:0}
.card__meta i{font-size:12px;color:#4B4B4B}
.card__meta a{color:#4B4B4B}
.card__meta a:hover{text-decoration:underline}
.card__title{font-size:20px;line-height:20px;font-weight:600}
.card__title a{color:var(--c-blue)}
.card__title a:hover{text-decoration:underline}
.card__excerpt{font-family:var(--f-lato);font-size:14px;line-height:21px;color:var(--c-text)} /* referenca: izvod u karticama (početna, novosti, edukacija, kreativno, e-izvori) je Lato 14px */
/* Referenca (Hello tema) lomi predugačke riječi/URL-ove u sadržaju (word-break:break-word) — bez toga URL-ovi u izvodima idu u novi red i kartice su više */
.card__excerpt,.card--lektira__content,.card--about__content,.entry-content{word-break:break-word}
.card__footer{padding:10px 0 20px 20px}

.pagination{margin-top:25px;text-align:center} /* brojevi 28px ispod grida, razmak 14px (referenca) */
.pagination ul{display:inline-flex;gap:14px;list-style:none;padding:0;margin:0}
.pagination .page-numbers{font-family:var(--f-head);font-size:16px;font-weight:800;color:var(--c-blue);line-height:24px}
.pagination .page-numbers.current{text-decoration:underline}

/* Kartica rezultata pretrage (search.php): siva pozadina, slika 20% lijevo, tekst desno */
.search-list{display:grid;grid-template-columns:minmax(0,1fr);gap:30px} /* razmak kartica 30px (referenca) */
.card--search .card__excerpt{font-family:var(--f-text);font-size:16px;line-height:24px;color:var(--c-text)} /* referenca: pretraga koristi Open Sans 16px #3f3f3f (za razliku od grid kartica, Lato 14px) */
.card--search{flex-direction:row;gap:20px;height:auto;background:#F5F5F5;box-shadow:none;padding:10px;overflow:visible}
.card--search__image{flex:0 0 20%;max-width:20%;padding:10px}
.card--search__image img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.card--search__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:20px;padding:10px}
.card--search__title{font-size:32px;line-height:32px;font-weight:600;color:var(--c-primary);margin:0}
.card--search__title a{color:var(--c-primary)}
.card--search__title a:hover{color:var(--c-blue)}
.card--search .card__meta{font-size:14px;line-height:21px;color:#4B4B4B}
.card--search .card__meta i{font-size:14px;color:var(--c-body)}
.card--search .card__excerpt p{margin:0 0 14.4px} /* referenca zadržava donju marginu paragrafa (kartica 219px) */

/* Kartica lektire (boja pozadine iz ACF "boja" preko --card-bg) */
.card--lektira{background:var(--card-bg,var(--c-blue));box-shadow:none;padding:40px;color:#fff;height:auto}
.card--lektira__title{font-size:32px;line-height:32px;font-weight:600;color:#fff;margin:0 0 20px}
.card--lektira__content{font-family:var(--f-text);font-size:16px;line-height:24px;color:#fff}
.card--lektira__content p{margin:0 0 14.4px}
.card--lektira__content ul,.card--lektira__content ol{margin:0 0 14.4px;padding-left:20px}
.card--lektira__content a{color:#fff;text-decoration:underline}

/* Kartica "O biblioteci" */
.card--about{border-radius:8px;padding:30px;gap:20px;height:auto}
.card--about__title{font-size:32px;line-height:32px;font-weight:600;color:var(--c-primary);margin:0} /* razmak do sadržaja daje gap 20 na kartici (referenca 20px, ne 40) */
.card--about__content{font-family:var(--f-text);font-size:16px;line-height:24px;color:var(--c-text)}
.card--about__content p{margin:0 0 14.4px}
.card--about__content img{border-radius:8px}
.card--about__content ul,.card--about__content ol{margin:0 0 14.4px;padding-left:20px}
/* Bez :last-child{margin-bottom:0}: referenca zadržava donji razmak zadnjeg paragrafa (kartice 246/434px) */
/* Referenca (Hello tema, bez block-library CSS-a): h3 u sadržaju je Open Sans 28px/1.2 500, video zadržava prirodnu širinu */
.card--about__content h3{font-family:var(--f-text);font-size:28px;line-height:1.2;font-weight:500;color:var(--c-text);margin:8px 0 16px}
.card--about__content .wp-block-video video,.entry-content .wp-block-video video{max-width:100%;display:block} /* širina iz atributa (inline stil, the_content filter u functions.php) */
/* Gutenberg galerije u sadržaju: referenca ne učitava block-library CSS pa su slike prirodne veličine u flex redu (gap 24) — !important nadjačava :not(#id) selektore block-library-ja */
.card--about__content .wp-block-gallery,.entry-content .wp-block-gallery{--wp--style--gallery-gap-default:24px;display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin:0 0 14.4px}
.card--about__content .wp-block-gallery figure.wp-block-image,.entry-content .wp-block-gallery figure.wp-block-image{width:auto!important;flex:0 1 auto!important;margin:0!important}
.card--about__content .wp-block-gallery img,.entry-content .wp-block-gallery img{width:auto!important;height:auto!important;max-width:100%!important;object-fit:initial!important}
/* Group blok sa grid/flex rasporedom: referenca (Hello theme.json blockGap) ima razmak 24px, WP default bez theme.json je 0.5em (8px) — mijenja broj kolona (3 umjesto 4 na 838px) */
.card--about__content .is-layout-grid,.entry-content .is-layout-grid,.card--about__content .is-layout-flex,.entry-content .is-layout-flex{gap:24px}

/* 7. Pages */
/* 7.1 Naslovni blok */
.page-title-wrap{margin:30px 0 0} /* 30px od headera (izmjereno na referenci: box @245, header 215) */
.page-title-wrap--katalog{margin-bottom:30px}
.page-title{background:var(--c-blue);border-radius:var(--radius);padding:100px;text-align:center;color:#fff}
.page-title__h1{font-size:40px;line-height:40px;font-weight:600;color:#fff}
.page-title__divider{width:100px;height:2px;background:#fff;margin:20px auto 0}

/* 7.2 Grid stranice + filter */
.section--grid{margin:0 0 60px;padding:20px 0 0} /* referenca: ~61px od zadnje kartice do footera */
.grid-empty{font-family:var(--f-text);text-align:center;margin:0}
.tax-filter ul{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:0 0 20px}
.tax-filter a{display:inline-block;font-family:var(--f-head);font-size:16px;line-height:normal;color:#575757;padding:8px}
.tax-filter a:hover{color:var(--c-blue)}
.tax-filter a.is-active{color:var(--c-blue)} /* referenca: aktivna stavka samo plava (bez bolda i podvlake) */

/* 7.8 Arhive / pretraga / 404 */
.section--404{padding:20px 0 50px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;font-family:var(--f-text);font-size:16px;line-height:24px;color:var(--c-text)}
.section--404 p{margin:0}

/* 7.3 Lektira */
.section--lektira{margin:0 0 90px;padding:20px 0 0} /* referenca: 90px do footera */
.lektira-intro{padding:10px;margin-bottom:20px;text-align:center;font-family:var(--f-text);font-size:16px;line-height:24px;color:var(--c-text)} /* uvod → kartice 30px (10 padding + 20) */
.lektira-intro p{margin:0}
.lektira-intro__title{font-weight:600}
.lektira-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}

/* 7.4 O biblioteci */
/* Referenca: naslovni box 30px od headera, kartice 30px ispod; red 70/30 bez razmaka u % (gap 20), glavna kolona bez paddinga (kartica 917px @10), bočna kolona 10px + 10px (dugme 354px @967) */
.section--about{margin:30px 0 30px;padding:0}
.page-title-wrap--about{margin-top:30px}
.about-row{display:flex;flex-wrap:wrap;gap:20px}
.about-main{flex:0 0 calc((100% - 20px) * .7);max-width:calc((100% - 20px) * .7);padding:0}
.about-side{flex:0 0 calc((100% - 20px) * .3);max-width:calc((100% - 20px) * .3);padding:10px}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.about-sticky{display:flex;flex-direction:column;gap:20px;padding:10px}
.about-sticky .btn{display:flex;justify-content:center;font-weight:600}

/* 7.5 Mrežni katalog */
.katalog-text{font-family:var(--f-lato);font-size:16px;line-height:24px;color:#fff;text-align:center;max-width:700px;margin:20px auto}
.katalog-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;width:500px;max-width:100%;margin:20px auto;padding:10px;background:#fff;border-radius:20px;font-family:var(--f-lato);font-size:14px;line-height:21px;color:#000}
.katalog-legend span{display:inline-flex;align-items:center;gap:5px}
.katalog-legend i{font-size:9px}
.katalog-legend__free i{color:#00B050}
.katalog-legend__busy i{color:#C00000}
.katalog-cta{text-align:center;margin:20px 0 0}

/* 7.6 Generička stranica */
.entry-content{font-family:var(--f-text);font-size:16px;line-height:24px;color:var(--c-text)}
.entry-content img{border-radius:8px}

/* 7.7 Kontakt */
/* Referenca: nadnaslov 140px ispod naslovnog boxa, 20px do naslova, boxovi 80px ispod naslova */
.section--contact{padding:140px 0 120px}
.contact__kicker{font-family:var(--f-head);font-size:30px;line-height:30px;font-weight:700;color:var(--c-accent);text-align:center;margin:0 0 20px}
.contact__title{font-size:64px;line-height:64px;font-weight:700;color:#483290;text-align:center;margin:0}
.contact-boxes{display:flex;gap:20px;margin-top:80px}
.contact-box{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--box-bg,var(--c-blue));color:#fff;border-radius:var(--radius);padding:40px}
.contact-box__icon{font-size:50px;line-height:1;color:#FEE500;margin-bottom:15px}
.contact-box h3{font-size:28px;line-height:33.6px;font-weight:600;color:#fff;margin:8px 0 16px}
.contact-box p{font-family:var(--f-text);font-size:16px;line-height:24px;color:#fff;margin:0 0 20px}
.contact-box p:last-child{margin-bottom:0}
.contact-box__email{display:inline-flex;font-family:var(--f-head);font-size:16px;line-height:16px;font-weight:700;color:#fff;background:transparent;padding:12px 24px;border-radius:3px;transition:filter .2s}
.contact-box__email:hover{color:#fff;text-decoration:underline}
.contact-map{display:block}
.contact-map__frame{display:block;width:100%;height:500px;border:0}

/* 8. Single */
/* Referenca (Elementor): red 70/30 sa razmakom 20; svi boxovi bijeli, radius 8, sjena kartice, razmak 20 */
/* Referenca: kolone 70/30 od (100% - 20px), obje sa 10px paddingom (glavna 898px @20, bočna 373px @958), red 40px ispod headera (30 + 10) */
.single-row{display:flex;gap:20px;margin:30px 0 0}
.single-main{flex:0 0 calc((100% - 20px) * .7);min-width:0;display:flex;flex-direction:column;gap:20px;padding:10px}
.single-side{flex:0 0 calc((100% - 20px) * .3);min-width:0;display:flex;flex-direction:column;gap:20px;padding:10px}
.single-cover,.single-info,.single-content,.side-box{background:#fff;border-radius:8px;box-shadow:var(--shadow-card)}

/* 8.1 Cover: istaknuta slika kao pozadina (--cover-img) + plavi overlay 70% */
.single-cover{position:relative;overflow:hidden;box-shadow:none;background:var(--c-blue) var(--cover-img,none) center/cover no-repeat;color:#fff}
.single-cover::before{content:"";position:absolute;inset:0;background:var(--c-blue);opacity:.7}
.single-cover__inner{position:relative;padding:100px 80px;text-align:center}
.single-cover__title{font-size:40px;line-height:40px;font-weight:600;color:#fff}
.single-cover__divider{margin:20px auto 0}

/* 8.2 Info traka */
.single-info{padding:10px 30px}
.single-info__list{display:flex;flex-wrap:wrap;font-family:var(--f-text);font-size:16px;line-height:24px;color:var(--c-body)}
.single-info__list li{display:inline-flex;align-items:center;margin:0 8px}
.single-info__list i{font-size:16px;color:var(--c-body);margin-right:5px}

/* 8.3 Sadržaj */
.single-content{padding:30px}
.entry-content>:last-child{margin-bottom:0}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{margin:0 0 14.4px;line-height:1.2}
.entry-content h2{font-size:30px}
.entry-content h3{font-size:24px}
.entry-content ul,.entry-content ol{margin:0 0 14.4px;padding-left:20px}
.entry-content a{color:var(--c-blue);text-decoration:underline}
.entry-content figure{margin:0 0 14.4px}
.entry-content figcaption{font-size:14px;line-height:21px;color:#666}
.entry-content blockquote{margin:0 0 14.4px;padding-left:15px;border-left:3px solid var(--c-blue)}
.entry-content iframe,.entry-content video{max-width:100%}
.entry-content table{border-collapse:collapse;width:100%;margin:0 0 14.4px}
.entry-content th,.entry-content td{border:1px solid #ddd;padding:6px 10px;text-align:left}
.page-links{margin-top:14.4px;font-weight:600}
.page-links a{margin:0 3px}

/* 8.5 Prev/next */
.single-nav{display:flex;justify-content:space-between;gap:20px;font-family:var(--f-head);font-size:16px;line-height:24px;font-weight:600}
.single-nav__prev,.single-nav__next{flex:1 1 0;min-width:0}
.single-nav__next{text-align:right}
.single-nav a{color:var(--c-blue)}
.single-nav a:hover{text-decoration:underline}

/* 8.6 Sidebar: podijeli + autor */
.side-box{padding:20px;display:flex;flex-direction:column;gap:20px}
.side-box__title{font-size:20px;line-height:20px;font-weight:600;color:var(--c-primary)}
.share-buttons{display:flex;flex-wrap:wrap;gap:10px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:4px;background:var(--share-bg,#aaa);color:#fff;font-size:16px;border:0;padding:0;margin:0;cursor:pointer;transition:filter .2s}
.share-btn:hover,.share-btn:focus-visible{color:#fff;filter:brightness(.9)}
.share-btn--facebook{--share-bg:#3b5998}
.share-btn--twitter{--share-bg:#1da1f2}
.share-btn--pinterest{--share-bg:#bd081c}
.share-btn--tumblr{--share-bg:#35465c}
.share-btn--whatsapp{--share-bg:#25d366}
.share-btn--email{--share-bg:#ea4335}
.share-btn--print{--share-bg:#aaaaaa}
/* Referenca (Elementor author box): avatar 100px lijevo + 25px razmak, ime 24px sa marginom 8/5 */
.author-box{display:flex;align-items:flex-start}
.author-box__avatar{flex:0 0 100px;width:100px;margin-right:25px}
.author-box__avatar img{width:100px;height:auto;display:block}
.author-box__text{flex:1 1 auto;min-width:0}
.author-box__name{display:block;font-family:var(--f-head);font-size:24px;line-height:28.8px;font-weight:600;color:var(--c-blue);margin:8px 0 5px}
.author-box__bio{font-family:var(--f-text);font-size:17px;line-height:25.5px;color:var(--c-text);margin:0}

@media print{
  .site-header,.site-footer,.single-side,.single-nav{display:none}
  .single-main{flex-basis:100%}
}

/* 9. Forms (kontakt forma uklonjena na zahtjev; sekcija rezervisana za komentare/pretragu) */
/* 9.1 Jednostavna forma pretrage (404) */
.search-form{display:flex;flex-wrap:wrap;gap:10px;width:100%;max-width:500px}
.search-form__input{flex:1 1 200px;width:100%;border:1px solid #ddd;border-radius:6px;padding:10px 15px;font-family:var(--f-text);font-size:16px;line-height:24px;color:var(--c-text);background:#fff}
.search-form__input:focus{outline:none;border-color:var(--c-blue)}

/* 10. Responsive */
.only-mobile{display:none}
@media (min-width: 1025px){
  .about-sticky,.single-side{position:sticky;top:150px;align-self:flex-start}
}
@media (max-width: 1024px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-main,.about-side{flex:0 0 100%;max-width:100%}
  .single-row{flex-direction:column}
  .single-main,.single-side{flex-basis:100%}
  .contact__kicker{font-size:24px;line-height:24px}
  .contact__title{font-size:44px;line-height:44px}
  .contact-boxes{flex-direction:column}
}
@media (max-width: 767px){
  .card-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
  .card--search{flex-direction:column}
  .card--search__image{flex:0 0 auto;max-width:none}
  .card--search__title{font-size:24px;line-height:24px}
  .page-title{padding:40px}
  .page-title__h1{font-size:26px;line-height:26px}
  .single-cover__inner{padding:40px}
  .single-cover__title{font-size:26px;line-height:26px}
  .single-nav{flex-direction:column}
  .single-nav__next{text-align:left}
  .section--contact{padding:50px 0}
  .contact__kicker{font-size:20px;line-height:20px}
  .contact__title{font-size:28px;line-height:28px}
  .contact-box__email{font-size:14px;line-height:14px}
  .katalog-text{font-size:13px;line-height:1.5}
  .katalog-legend{gap:10px;font-size:12px;line-height:18px}
  .only-mobile{display:revert}
  .only-desktop{display:none}
}