/* ATENA base - reset, tipografija, kontejneri, grid, prose, utility (DESIGN.md §2.3, §3, §4). */

*,*::before,*::after{box-sizing:border-box}
html{
  color-scheme:light;
  font-size:15px;
  -webkit-text-size-adjust:100%;
  scrollbar-gutter:stable;
  scroll-padding-top:calc(var(--at-header-h) + 16px);
}
@media (min-width:48em){html{font-size:16px}}
body{
  margin:0;
  font-family:var(--at-font-body);
  font-weight:var(--at-body-weight);
  font-size:var(--at-fs-body);
  line-height:var(--at-body-lh);
  color:var(--at-ink);
  background:var(--at-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.at-locked{overflow:hidden}
::selection{background:var(--at-selection-bg);color:var(--at-selection-ink)}

/* Skala naslova (tokens.css): display i h1 = display-lh, h2 1.1, h3 1.2, h4 1.3; tracking slabi kako veličina pada */
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--at-font-display);font-weight:var(--at-display-weight);letter-spacing:var(--at-display-tracking);line-height:var(--at-display-lh);color:var(--at-ink);text-wrap:balance}
h1,.at-h1{font-size:var(--at-fs-h1)}
h2,.at-h2{font-size:var(--at-fs-h2);line-height:var(--at-lh-h2)}
h3,.at-h3{font-size:var(--at-fs-h3);line-height:var(--at-lh-h3);letter-spacing:-.015em}
h4,.at-h4{font-size:var(--at-fs-h4);line-height:var(--at-lh-h4);letter-spacing:-.01em}
h5,.at-h5{font-size:var(--at-fs-h5);line-height:1.4;letter-spacing:0}
h6,.at-h6{font-size:var(--at-fs-h6);line-height:1.4;letter-spacing:0}
.at-display{font-size:var(--at-fs-display);line-height:var(--at-display-lh)}
p{margin:0;color:var(--at-ink-2);text-wrap:pretty}
.at-lead{font-size:var(--at-fs-lead);line-height:var(--at-lh-lead);color:var(--at-ink-2);max-width:var(--at-prose-max)}
.at-small{font-size:var(--at-fs-small)}
.at-muted{color:var(--at-muted)}
.at-eyebrow{display:block;font-family:var(--at-font-body);font-weight:600;font-size:var(--at-fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--at-muted);margin:0 0 var(--at-s-3)}
.at-eyebrow--accent{color:var(--at-accent)}
strong,b{font-weight:600}
a{color:inherit;text-decoration:none} /* bez .at-body a - (0,1,1) je tuklo boje dugmadi .at-btn--* na tamnoj podlozi */
ul,ol{margin:0;padding:0}
ul[class],ol[class]{list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{cursor:pointer;background:none;border:0;padding:0}
figure{margin:0}
address{font-style:normal}
hr{border:0;border-top:1px solid var(--at-line);margin:0}
:focus-visible{outline:2px solid var(--at-focus);outline-offset:3px}
.at-panel :focus-visible,.at-footer--columns :focus-visible{outline-color:var(--at-panel-ink)}

/* Skip link */
.at-skip{position:absolute;left:var(--at-s-4);top:-100px;z-index:calc(var(--at-z-toast) + 1);padding:var(--at-s-3) var(--at-s-4);background:var(--at-ink);color:var(--at-bg);border-radius:var(--at-radius-sm);font-weight:600}
.at-skip:focus{top:var(--at-s-4)}
.at-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Kontejneri i grid */
.at-container{width:min(100% - 2*var(--at-gutter),var(--at-container));margin-inline:auto}
.at-container--narrow{width:min(100% - 2*var(--at-gutter),var(--at-container-narrow))}
.at-container--wide{width:min(100% - 2*var(--at-gutter),var(--at-container-wide))}
.at-grid{display:grid;gap:var(--at-gap);grid-template-columns:repeat(12,1fr)}
.at-grid > *{min-width:0;grid-column:1/-1}
@media (min-width:64em){
  .at-col-3{grid-column:span 3}.at-col-4{grid-column:span 4}.at-col-5{grid-column:span 5}
  .at-col-6{grid-column:span 6}.at-col-7{grid-column:span 7}.at-col-8{grid-column:span 8}
  .at-col-10{grid-column:span 10}
  .at-col-start-2{grid-column-start:2}.at-col-start-6{grid-column-start:6}.at-col-start-7{grid-column-start:7}
}
.at-main{display:block;min-height:50vh}

/* Sekcije */
.at-section{padding-block:var(--at-section)}
.at-section--sm{padding-block:var(--at-section-sm)}
.at-section--surface{background:var(--at-surface)}
.at-section--surface-2{background:var(--at-surface-2)}
.at-section--panel,.at-panel{background:var(--at-panel);color:var(--at-panel-ink)}
.at-panel h1,.at-panel h2,.at-panel h3,.at-panel h4,.at-section--panel h1,.at-section--panel h2,.at-section--panel h3,.at-section--panel h4{color:var(--at-panel-ink)}
.at-panel p,.at-section--panel p{color:var(--at-panel-ink)}
.at-panel .at-eyebrow,.at-section--panel .at-eyebrow,.at-panel .at-muted,.at-section--panel .at-muted{color:var(--at-panel-muted)}
.at-section + .at-section:not(.at-section--panel):not(.at-section--surface-2){border-top:1px solid var(--at-line)}
.at-section--flush{padding-block:0}
/* Zaglavlje sekcije: eyebrow -12px- naslov -16px- uvod; ispod zaglavlja --at-head-gap */
.at-section__head{display:grid;gap:var(--at-s-4);margin-bottom:var(--at-head-gap);max-width:44rem}
.at-section__head .at-eyebrow{margin:0 0 calc(-1 * var(--at-s-1))}
.at-section__head--row{max-width:none;grid-template-columns:1fr auto;align-items:end}
@media (max-width:47.99em){.at-section__head--row{grid-template-columns:1fr}}
.at-below{content-visibility:auto;contain-intrinsic-size:auto 600px}

/* Prose - dug tekst */
.at-prose{max-width:var(--at-prose-max);font-size:1.0625rem;line-height:1.7;color:var(--at-ink-2)}
.at-prose > * + *{margin-top:1.25em}
.at-prose h2,.at-prose h3,.at-prose h4{color:var(--at-ink);margin-top:2em;text-wrap:balance}
.at-prose h2{font-size:var(--at-fs-h3);line-height:var(--at-lh-h3)}
.at-prose h3{font-size:var(--at-fs-h4);line-height:var(--at-lh-h4)}
.at-prose h4{font-size:var(--at-fs-h5);line-height:1.4}
.at-prose a{color:var(--at-accent);background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;transition:background-size var(--at-d-base) var(--at-ease-out)}
.at-prose a:hover{background-size:0 1px}
.at-prose ul,.at-prose ol{padding-left:1.25em}
.at-prose li + li{margin-top:.4em}
.at-prose ul li::marker{color:var(--at-accent)}
.at-prose blockquote{margin:2em 0;padding:0 0 0 var(--at-s-5);border-left:2px solid var(--at-accent);font-family:var(--at-font-display);font-weight:400;font-size:var(--at-fs-h3);line-height:1.3;color:var(--at-ink)}
.at-prose img{border-radius:var(--at-radius-md)}
.at-prose figcaption{margin-top:var(--at-s-2);font-size:var(--at-fs-small);color:var(--at-muted)}
.at-prose table{width:100%;border-collapse:collapse;font-size:var(--at-fs-small)}
.at-prose th,.at-prose td{padding:var(--at-s-3);border-bottom:1px solid var(--at-line);text-align:left}
.at-prose .wp-block-table,.at-prose .at-table-wrap{overflow-x:auto}
.at-prose > p:first-child{font-size:var(--at-fs-lead);line-height:var(--at-lh-lead);color:var(--at-ink)}
.at-prose--plain > p:first-child{font-size:inherit;line-height:inherit;color:inherit}
.at-prose .wp-caption{max-width:100%}

/* Tekst link sa podvlakom (4.5) */
.at-link{color:var(--at-accent);background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size var(--at-d-base) var(--at-ease-out)}
.at-link:hover,.at-link:focus-visible{background-size:100% 1px}
.at-link--ink{color:var(--at-ink)}

/* Slike */
.at-media{position:relative;overflow:hidden;background:var(--at-surface-2);border-radius:var(--at-radius-lg)}
.at-media img,.at-media video{width:100%;height:100%;object-fit:cover}
.at-media--card{aspect-ratio:var(--at-img-ratio-card)}
.at-media--wide{aspect-ratio:var(--at-img-ratio-wide)}
.at-media--hero{aspect-ratio:var(--at-img-ratio-hero)}
.at-media--3-2{aspect-ratio:3/2}
.at-media--square{aspect-ratio:1}
.at-media--sm{border-radius:var(--at-radius-md)}

/* Razdelnik */
.at-divider{border:0;border-top:1px solid var(--at-line)}
[data-reveal="line"] .at-divider,.at-divider[data-reveal-child]{transform-origin:left}

/* ===== Motion (DESIGN.md §4) ===== */
.js [data-reveal-child]{opacity:0;transform:translateY(20px);transition:opacity var(--at-d-reveal) var(--at-ease-out),transform var(--at-d-reveal) var(--at-ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal="fade"] [data-reveal-child]{transform:none}
.js [data-reveal="scale"] [data-reveal-child]{transform:scale(1.04);clip-path:inset(0 0 8% 0);transition:opacity var(--at-d-reveal) var(--at-ease-out),transform calc(var(--at-d-reveal) + 200ms) var(--at-ease-out),clip-path var(--at-d-reveal) var(--at-ease-out)}
.js [data-reveal="line"] [data-reveal-child]{opacity:1;transform:scaleX(0);transform-origin:left}
.js .is-inview [data-reveal-child],.js [data-reveal].is-inview > [data-reveal-child]{opacity:1;transform:none;clip-path:inset(0)}
.js html.at-editing [data-reveal-child],html.at-editing.js [data-reveal-child]{opacity:1;transform:none;clip-path:none;transition:none}

/* Page-load sekvenca (samo hero) */
.js .at-load > [data-load]{opacity:0;transform:translateY(14px);animation:at-load var(--at-d-reveal) var(--at-ease-out) forwards;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes at-load{to{opacity:1;transform:none}}
.js .at-header{animation:at-header-in 320ms var(--at-ease-out) backwards} /* ne `both`: fill drži transform i gasi tranziciju sakrivanja */
@keyframes at-header-in{from{opacity:0;transform:translateY(-8px)}}

/* Scroll-driven parallax na full hero mediju */
@supports (animation-timeline: scroll()){
  .at-hero--full .at-hero__media img{animation:at-drift linear both;animation-timeline:scroll();animation-range:0 100vh}
}
@keyframes at-drift{to{transform:translateY(12%) scale(1.08)}}

/* Reduced motion - jedini dozvoljeni !important u šablonu */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js [data-reveal-child],.js .at-load > [data-load]{opacity:1;transform:none;clip-path:none}
  .at-hero--full .at-hero__media img{animation:none}
}

/* Utility minimum */
.at-flex{display:flex;gap:var(--at-s-3);align-items:center;flex-wrap:wrap}
.at-between{justify-content:space-between}
.at-stack > * + *{margin-top:var(--at-s-4)}
.at-stack--lg > * + *{margin-top:var(--at-s-6)}
.at-mt-6{margin-top:var(--at-s-6)}
.at-mt-8{margin-top:var(--at-s-8)}
.at-tabular{font-variant-numeric:tabular-nums}
.at-hide-lg{display:block}
@media (min-width:64em){.at-hide-lg{display:none}}
.at-only-lg{display:none}
@media (min-width:64em){.at-only-lg{display:block}}
.at-shop-off .at-shop-only,body[data-shop="off"] .at-shop-only{display:none}