/* ==========================================================================
   NiPP — Novi izazovi u pedijatriji
   Design system
   --------------------------------------------------------------------------
   TYPEFACE NOTE
   The brand typeface is Helvetica (Helvetica Now Display / Text).
   Drop the licensed webfont files into /assets/fonts/ and the @font-face
   blocks below take over automatically — no other change is required.
   Until then the stack falls back to Helvetica Neue / Helvetica / Arial,
   which are metrically compatible.
   ========================================================================== */

/*  ⬇  ACTIVATE THE LICENSED TYPEFACE
    Drop these four files into /assets/fonts/ and delete the two comment
    markers around this block. Nothing else changes — the stack in
    --font-display / --font-text already names them first.

@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/HelveticaNowDisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/HelveticaNowDisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('../fonts/HelveticaNowText-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('../fonts/HelveticaNowText-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
*/

/* ---------- tokens ---------- */
:root {
  --brand:        #3E3389;
  --brand-deep:   #2A2263;
  --brand-soft:   #6F67AD;
  --accent:       #EA5726;
  /* 5.0:1 na bijeloj ali 4.65 na plohama i 4.31 u obrascu */
  --accent-deep:  #B83710;
  --peri:         #8484C5;
  --peach:        #F5BE91;

  --ink:          #17133A;
  /* naslovi: korak svjetlije od --ink, da ne udaraju kao najtamniji slog
     na stranici. 12.4:1 na bijeloj, 10.6:1 na plohama. */
  --head:         #332D63;
  --ink-2:        #4A4570;
  --muted:        #6E6994;

  --paper:        #FFFFFF;
  --mist:         #F7F6FB;
  --mist-2:       #EFEDF7;
  --line:         rgba(62, 51, 137, .13);
  --line-soft:    rgba(62, 51, 137, .07);

  /* per-brand accent, overridden per page via .theme-* */
  --theme:        #3E3389;
  --theme-soft:   rgba(62, 51, 137, .09);

  /* Type scale. Every piece of running text points at one of these four, and
     every card or section sub-heading at one of the two below, so a size can
     only change in one place. Before this the page carried ten different
     sizes for what was all the same job — a paragraph — and seven for a card
     title, drifting a fraction of a rem apart with no rule behind it. */
  /* Svaki korak nosi isti pomak, pisan kao racun a ne ubacen u brojeve,
     da ramp i odnosi medu stepenicama ostanu kako su podeseni.
     Povecano za 3pt (+4px), zatim smanjeno za 2pt (−2.667px):
     neto +1.333px prema izvornoj ljestvici. */
  /* Tekuci tekst ima jednu velicinu. Prije su tri tokena davala tri mjere
     za isti posao — uvod u heroju 16.9px, uvod sekcije 22.5px, obican
     odlomak 16.9px — pa je isti tip sadrzaja izgledao razlicito ovisno o
     tome u kojoj sekciji stoji. Sada sve tri pokazuju na --t-body.
     Tablice, meta-podaci i oznake ostaju na svojim manjim tokenima: to su
     druge uloge, ne tekuci tekst. */
  --t-lead: var(--t-body);                                            /* section lead */
  /* Dno 1.08rem davalo je 17.1px na telefonu — isto slovo kao na stolnom
     zaslonu, samo u četiri puta užem stupcu, pa je tekst djelovao povećano.
     Novi nagib daje 16.1px na 375, a od 1181px nadalje istih 19.5px kao i
     prije (ondje oba izraza udaraju u istu kapu). */
  --t-body: 1rem;                                                     /* paragraph */
  --t-base: var(--t-body);                                            /* running body copy */
  --t-sm:   calc(.95rem - 0.667px);                                   /* card and secondary text */
  /* Jedna mjera za sve sitne oznake u verzalu. Bilo ih je devet razlicitih
     (.62 do .78rem) za istu stvar — natpis iznad podatka. */
  --t-label: calc(.84rem - 0.667px);
  --t-xs:   calc(.84rem - 0.667px);                                   /* notes, captions, errors */
  /* chips/pills set their own size. The bullet lists used to share this token
     so they would not read as an outlier beside the capsules; now that the
     capsules are gone from those sections the bullets are set as paragraphs
     (--t-lead) and this is a chip-only size again. */
  --t-pill: calc(clamp(.9rem, 1.15vw, 1rem) - 0.667px);  /* chip text */
  /* Same size as the paragraph it introduces, on purpose: a sub-heading that
     came out a fraction smaller than its own body copy read as a mistake.
     Weight and the display face carry the distinction instead. */
  --t-h3:   var(--t-body);                            /* sub-heading */
  /* Must clear --t-base at every width. The old value used a bare vw for its
     middle term while --t-base uses rem+vw, so the two curves crossed around
     900–1000 px and the card title came out smaller than the paragraph under
     it. Same shape as --t-base now, one step up. */
  --t-h4:   calc(clamp(1.06rem, 1rem + .3vw, 1.2rem) - 0.667px);  /* card title */
  --t-h2b:  calc(clamp(1.4rem, 2.3vw, 2.06rem) - 0.667px);       /* block heading inside a panel */
  --gap-card: clamp(.7rem, 1.2vw, 1rem);              /* one gap for every card grid */

  --font-display: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-text:    'Helvetica Now Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --header-h: 82px;
  --subnav-h: 55px;

  --wrap:   1280px;
  --wrap-n: 1000px;
  --gutter: clamp(18px, 3.4vw, 46px);
  /* Dno je bilo 50px i vrijedilo je svugdje ispod 893px, pa je telefon dobivao
     100px između sekcija — 27% širine zaslona, dok je na 1280 isti razmak 11%.
     Blokovi su zbog toga izgledali kao otoci koji nemaju veze jedan s drugim.
     Novi nagib daje 36px na 375, a na 1280 istih ~72px kao i prije. */
  --section: clamp(28px, 16.75px + 3vw, 72px);

  --r-xl: 34px;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 11px;

  --theme-hover: #EA5726;
  --gold: #C08A2E;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

.theme-advent {
  /* Advent runs on red and white. Two reds carry the accents: the deep one
     for the main accent, a lighter one for the second voice. The text is the
     site's dark indigo, not black. */
  --theme:      #6E1216;                 /* deep red — labels, figures, buttons */
  --theme-soft: rgba(110, 18, 22, .09);
  --red-2:      #C0272D;                 /* lighter red — 5.84:1 on white, so it can hold text */
  --red-2-soft: rgba(192, 39, 45, .12);
  --theme-hover: #C0272D;                /* the lighter red fills on hover */

  /* The site-wide indigo is re-pointed for this page, which takes the header
     button, the dark surfaces and the footer with it. */
  --brand:      #6E1216;
  /* Deep red rather than near-black: same hue family as --theme (355 against
     357) but at 22% lightness, so the footer reads as the page's own colour
     instead of as an unrelated black band. White on it is 13.3:1, the muted
     footer text 7.1:1. */
  --brand-deep: #5E1319;
  --brand-soft: #C0272D;

  /* Tekst nije crn nego tamna modro-ljubicasta — ista koju nosi ostatak
     stranice, pa je slog na svih 11 stranica jedne boje. Crna je uz crvenu
     sjekla oko; ova je mekša, a kontrast ostaje 17.6:1 na bijeloj.
     --muted je tamniji od sitskog #6E6994 jer bi na adventovoj --mist-2
     (#F3EBEB) pao na 4.35:1; ovako drzi 5.11:1. */
  --ink:   #17133A;
  --ink-2: #4A4570;
  --muted: #635E8A;

  /* White grounds with only a breath of red, so the white cards still
     separate from the panel they sit on. */
  --mist:   #FAF6F6;
  --mist-2: #F3EBEB;

  /* the hairlines carried an indigo tint; they follow the red now */
  --line:      rgba(110, 18, 22, .14);
  --line-soft: rgba(110, 18, 22, .07);
}


/* The hover shadows carry the indigo and the orange accent as literals; they
   are re-pointed per page rather than globally so the other pages keep theirs. */
.theme-advent .btn:hover { box-shadow: 0 14px 34px -14px rgba(110, 18, 22, .45); }
.theme-advent .btn--ghost:hover { box-shadow: 0 14px 34px -16px rgba(192, 39, 45, .45); }
/* the video controls sat on a navy wash; black here, like the rest of the page */
.theme-advent .vbtn { background: rgba(20, 16, 17, .5); }
.theme-advent .vbtn:hover { background: rgba(20, 16, 17, .72); }
.theme-advent .areas .chip--extra { color: var(--muted); border-color: var(--line); }
.theme-praktikum { --theme: #3E3389; --theme-soft: rgba(62, 51, 137, .09); }
/* #6F6FB4 je imao 4.56:1 na bijeloj i 3.93:1 na plohi — pilule i oznake
   u toj boji padale su ispod granice. #5856A0 drzi 6.45 i 5.57. */
.theme-nurse     { --theme: #5856A0; --theme-soft: rgba(88, 86, 160, .15); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
html:focus-within { scroll-behavior: smooth; }
body {
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: 1.6;
  letter-spacing: .004em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--brand); color: #fff; }

.skip {
  position: absolute; left: 50%; top: 0; z-index: 200;
  transform: translate(-50%, -140%);
  padding: .9em 1.6em; background: var(--brand); color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: transform .4s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-n); }
.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--brand-deep); color: #fff; }
.section--ink .lead, .section--ink .body-lg, .section--ink .muted { color: rgba(255, 255, 255, .74); }
/* .45/.5 su na adventovoj burgundnoj plohi davale 3.72:1 i 4.28:1 */
.section--ink .label { color: rgba(255, 255, 255, .62); }
.section--ink .eyebrow { color: #fff; }
.section--ink .form__note,
.section--ink .card__text,
.section--ink .fact__note,
.section--ink .speaker__org,
.section--ink .book__author { color: rgba(255, 255, 255, .7); }
.section--ink .fact__label,
.section--ink .contactrow__label { color: rgba(255, 255, 255, .55); }
.section--ink .fact,
.section--ink .contactrow { border-top-color: rgba(255, 255, 255, .22); }
.section--ink .fact__value,
.section--ink .numlist__t,
.section--ink .contactrow__value { color: #fff; }
.section--ink .numlist li { border-color: rgba(255, 255, 255, .16); }
.section--ink .note { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .8); }
.section--ink .pill { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.section--ink .link { color: #fff; }
/* Kartice razloga na tamnoj plohi: bijela kartica ondje gori, a --mist-2 je
   svijetla pa bi ostala nevidljiva. Prozirno bijelo zadržava dubinu plohe. */
.section--ink .reason {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
}
.section--ink .reason:hover { border-color: rgba(255, 255, 255, .42); }
.section--ink .reason__t { color: #fff; }
.section--ink .reason__d { color: rgba(255, 255, 255, .72); }
.section--ink .reason__ico { background: rgba(255, 255, 255, .12); color: #fff; }

.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.stack > * + * { margin-top: var(--gap, .75rem); }

/* section heading block */
.shead { display: grid; gap: clamp(.6rem, 1vw, 1rem); max-width: min(100%, 46rem); }
.shead--wide { max-width: min(100%, 52rem); }
/* The supporting paragraph used to sit in a second column beside the
   heading. It now flows underneath it, so a heading always introduces the
   text it belongs to. */
/* Section head: the title states what this is, the paragraph beside it says
   why it matters. Stacked, the two read as one long block and the eye has to
   travel the full column before reaching the content; side by side the title
   holds the left edge and the reading line stays short. */
.shead--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 3rem);
  align-items: end;
}
.shead--split > .shead__main { display: grid; gap: clamp(.6rem, 1vw, 1rem); justify-items: start; align-content: end; }
.shead--split > .shead__side { display: grid; gap: .8rem; align-content: end; }
.shead--split .shead__side p { margin: 0; max-width: 46ch; }
.shead--split > .stack { max-width: min(100%, 44rem); }

@media (max-width: 860px) {
  /* one column: a 46ch paragraph beside a heading stops working well before
     the heading itself has to wrap */
  .shead--split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(.7rem, 1.6vw, 1.1rem); }
  .shead--split > .shead__main, .shead--split > .shead__side { align-content: start; }
}
.shead__side { display: grid; gap: 1rem; }
.shead__side .btn { justify-self: start; }
.shead + * { margin-top: clamp(1.4rem, 2.3vw, 2.3rem); }

/* Opens a section ahead of its own .shead — this is what the page says before
   it starts labelling parts of itself, so it sits above the eyebrow, not under
   the heading. */
.introsplit > .split__body > p { margin: 0; }
.introsplit + .shead { margin-top: clamp(2.6rem, 4.6vw, 4.4rem); }
/* The home photograph is a 4:5 portrait, cut for the full-height hero column
   it used to live in. Left to its own proportions beside a single paragraph it
   ran 615px tall against ~175px of text, so here it is cropped to a landscape
   card instead — object-fit on the img was already doing the cropping. */
.introsplit .split__media { aspect-ratio: 5 / 4; min-height: 0; }
@media (max-width: 900px) { .introsplit .split__media { aspect-ratio: 3 / 2; } }

/* ---------- type ---------- */
.display, h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}
/* ONE h1 step for the whole site: .display and .hero__title are kept only as
   layout hooks now, they no longer carry a size of their own. Tuned so the
   long meeting titles still sit on 2-3 lines. */
/* Dna obaju clampova spuštena su za mobitel; srednji član i kapa su isti, pa
   se iznad ~770px ne mijenja ništa. */
:root { --h1: clamp(1.625rem, 1.25rem + 1.55vw, 2.25rem);
        --hero-h2: calc(clamp(1.5rem, 2.7vw, 2.35rem) + 1.333px);
        --pill-lg: var(--t-body); }
.display, h1, .h1, .hero__title { font-size: var(--h1); line-height: 1.04; letter-spacing: 0; }
h2, .h2   { font-size: clamp(1.3125rem, 1.05rem + 1.05vw, 1.75rem); letter-spacing: 0; }
.display, h1, .h1, h2, .h2 { color: var(--head); }
/* na tamnim plohama naslov ostaje bijel — eksplicitna boja inace gazi
   naslijedenu boju sekcije */
/* Podnozje i tamna kontaktna kartica nose istu tamnu plohu kao
   .section--ink, ali nisu ta klasa — pa je „Budite u tijeku" ostajao na
   --head (#332D63) preko pozadine #2A2263: kontrast 1.13:1, naslov se
   prakticki nije vidio. Bijela na istoj plohi daje 13.93:1. */
.section--ink .display, .section--ink h1, .section--ink .h1,
.section--ink h2, .section--ink .h2,
.footer .display, .footer h1, .footer .h1, .footer h2, .footer .h2,
.contactcard--ink h2, .contactcard--ink .h2 { color: #fff; }
h3, .h3   { font-size: var(--t-h3); line-height: 1.3; letter-spacing: 0; }
h4, .h4   { font-size: var(--t-h4); line-height: 1.38; letter-spacing: 0; }

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); letter-spacing: 0; text-wrap: pretty; }
.body-lg { font-size: var(--t-body); line-height: 1.62; letter-spacing: .004em; color: var(--ink-2); }
.muted { color: var(--muted); }
.measure { max-width: 72ch; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--theme);
  display: flex; align-items: center; gap: .7em;
}
.eyebrow::before {
  content: ''; width: 26px; height: 1.5px; background: currentColor; opacity: .5; flex: none;
}
.eyebrow--plain::before { display: none; }

/* Outlined chip used for the home page's section labels and its welcome line:
   the accent is carried by the text and a hairline border rather than by a
   leading rule, so the label reads as a tag instead of a heading kicker. */
.eyebrow--pill,
.hero__welcome {
  display: inline-flex; align-items: center; justify-self: start;
  /* no nowrap: a long label like "Svakodnevni izazovi - suvremena rješenja"
     pushed the page 8px wide on a phone. Short pills still sit on one line.
     max-content shrinks the capsule to its text, 100% stops it pushing past
     the column it sits in — it needs both, and the min() of the two. */
  width: auto; max-width: min(max-content, 100%);
  padding: .5em 1.15em;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--theme);
  font-family: var(--font-display);
  font-size: var(--pill-lg); font-weight: 600;
  letter-spacing: .01em; text-transform: none;
  line-height: 1.3;
}
.eyebrow--pill::before { display: none; }
/* A label set in capitals and too long for its column. .eyebrow--pill is
   deliberately not uppercase, so the capitals are added here rather than typed
   into the markup — screen readers spell out a run of literal capitals letter
   by letter. Capitals run ~15% wider than lower case, so the step comes down
   and the tracking with it, enough to keep the label one capsule instead of
   two lines. */
.eyebrow--long {
  font-size: .88rem; letter-spacing: .04em;
  text-transform: uppercase; padding-inline: 1em;
}

.label {
  font-family: var(--font-display);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45em 1em .5em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-2);
  background: var(--paper);
  white-space: nowrap;
}
.pill--solid { background: var(--theme); border-color: transparent; color: #fff; }
.pill--soft  { background: var(--theme-soft); border-color: transparent; color: var(--theme); }
.pill--ghost { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.pill--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; opacity: .8; }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- buttons ---------- */
.btn {
  /* was the literal #3E3389, which meant a themed page could only override it
     with a more specific selector — and that selector then also beat
     .btn--ghost's transparent fill. Driving the default off --brand lets each
     variant keep its own single-class specificity. */
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1.05em 1.85em;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.btn > * { position: relative; z-index: 1; }
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--theme-hover);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(62, 51, 137, .5); }
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: translateY(0); }
.btn__arrow { transition: transform .5s var(--ease); }
/* Vodoravna strelica se na hover zakrene za 45° i krene u tom smjeru.
   -45deg jer SVG strelica gleda udesno: rotacija je dize u gornji desni kut. */
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translate(4px, -4px) rotate(-45deg); }

.btn--theme { --btn-bg: var(--theme); }
.btn--theme.btn--is-accent::after { background: var(--brand); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { --btn-fg: #fff; border-color: transparent; box-shadow: 0 14px 34px -16px rgba(234, 87, 38, .45); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--brand); }
.btn--light:hover { --btn-fg: #fff; }
.btn--sm { padding: .82em 1.4em; font-size: .85rem; }
.btn[disabled], .btn--soon { pointer-events: none; opacity: .4; }

.link {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display);
  font-size: .94rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--theme);
  padding-bottom: .3em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .5s var(--ease), gap .4s var(--ease);
}
.link:hover { gap: .95em; background-size: 0% 1.5px; background-position: 100% 100%; }
.link svg { flex: none; }
.link { justify-self: start; align-self: start; }
.link--light { color: #fff; }

/* ---------- header / nav ---------- */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease-soft), background-color .4s var(--ease-soft);
}
/* once the page scrolls underneath, the glass thickens so the navigation
   stays readable over photographs */
.header.is-stuck { border-bottom-color: var(--line-soft); background: rgba(255, 255, 255, .72); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header { background: rgba(255, 255, 255, .97); }
  .header.is-stuck { background: rgba(255, 255, 255, .99); }
}
.header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; flex: none; }
/* The lockup now carries PEDIJATRIJA under the wordmark, so it needs
   more height than the old wordmark did or the second line is mush. */
.brand img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(.3rem, 1.3vw, 1.35rem); }
.nav__item { position: relative; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .38em;
  padding: .62rem .1rem;
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .3s var(--ease-soft);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--theme);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}
.nav__item:hover > .nav__link, .nav__link[aria-current] { color: var(--ink); }
.nav__item:hover > .nav__link::after, .nav__link[aria-current]::after { transform: scaleX(1); }
.nav__caret { transition: transform .4s var(--ease); opacity: .45; }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 236px;
  padding: .65rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: 0 26px 60px -28px rgba(23, 19, 58, .32);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .34s var(--ease), visibility .2s;
  /* Grace period before closing, so the cursor has time to reach the panel.
     It only applies when leaving the menu altogether — see the rule below. */
  transition-delay: .22s;
}
/* An invisible bridge across the gap between the link and the panel. Without
   it the cursor crosses dead space where neither is hovered, and because the
   panel is a child of .nav__item, hovering the bridge keeps the item hovered. */
.nav__panel::before {
  content: '';
  position: absolute;
  left: -8px; right: -8px;
  top: -14px; height: 16px;
}
.nav__item:hover > .nav__panel, .nav__item:focus-within > .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;                    /* opens straight away */
}
/* Sweeping across the bar: the moment another item is hovered, the previous
   panel drops its grace period and goes at once, so two are never on screen
   together. The delay is then reserved for the case it exists for — moving
   down off the link toward the panel. */
.nav:has(.nav__item:hover) .nav__item:not(:hover) > .nav__panel {
  transition-delay: 0s;
}
.nav__panel a {
  display: block; padding: .6rem .85rem;
  border-radius: var(--r-sm);
  font-size: .88rem; color: var(--ink-2);
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft), padding-left .35s var(--ease);
}
.nav__panel a:hover { background: var(--mist); color: var(--ink); padding-left: 1.05rem; }

.header__cta { display: flex; align-items: center; gap: .7rem; flex: none; }

.burger {
  display: none; flex: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; cursor: pointer;
}
.burger span { display: block; width: 17px; height: 1.5px; background: var(--ink); position: relative; transition: background-color .3s; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink);
  transition: transform .45s var(--ease), top .3s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top: 5.5px; }
.is-menu-open .burger span { background: transparent; }
.is-menu-open .burger span::before { top: 0; transform: rotate(45deg); }
.is-menu-open .burger span::after  { top: 0; transform: rotate(-45deg); }

/* mobile drawer */
/* The drawer is a sibling of the header, not a child: backdrop-filter makes
   an element a containing block for fixed-position descendants, so nested
   inside it the panel was measured against the header instead of the screen.
   It opens as a curtain — the panel wipes down, then the groups rise into it. */
.drawer {
  position: fixed;
  top: var(--header-h); right: 0; bottom: 0; left: 0;
  z-index: 88;
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .52s var(--ease), visibility .52s;
}
.is-menu-open .drawer { visibility: visible; clip-path: inset(0 0 0 0); }
.drawer__inner {
  min-height: 100%;
  display: flex; flex-direction: column;
  padding: .6rem var(--gutter) 2.4rem;
}

/* each group rises as the curtain passes it */
.drawer__group, .drawer__foot {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .42s var(--ease), transform .52s var(--ease);
  transition-delay: 0s;
}
.is-menu-open .drawer__group,
.is-menu-open .drawer__foot { opacity: 1; transform: none; }
.is-menu-open .drawer__group:nth-of-type(1) { transition-delay: .10s; }
.is-menu-open .drawer__group:nth-of-type(2) { transition-delay: .15s; }
.is-menu-open .drawer__group:nth-of-type(3) { transition-delay: .20s; }
.is-menu-open .drawer__group:nth-of-type(4) { transition-delay: .25s; }
.is-menu-open .drawer__group:nth-of-type(5) { transition-delay: .30s; }
.is-menu-open .drawer__group:nth-of-type(6) { transition-delay: .34s; }
.is-menu-open .drawer__group:nth-of-type(7) { transition-delay: .38s; }
.is-menu-open .drawer__foot { transition-delay: .44s; }
.drawer__group + .drawer__group { border-top: 1px solid var(--line-soft); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.1rem 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: 0;
  color: var(--ink);
}
.drawer__head svg { flex: none; opacity: .4; transition: transform .45s var(--ease); }
.drawer__head[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.drawer__head[aria-expanded="true"] + .drawer__panel { grid-template-rows: 1fr; }
.drawer__panel > div { overflow: hidden; }
.drawer__panel a { display: block; padding: .58rem 0 .58rem 1.1rem; color: var(--ink-2); font-size: var(--t-base); border-left: 1.5px solid var(--line); transition: color .3s, border-color .3s; }
.drawer__panel a:hover { color: var(--theme); border-left-color: var(--theme); }
.drawer__panel > div > :last-child { margin-bottom: 1.1rem; }
.drawer__foot { margin-top: auto; padding-top: 1.8rem; display: grid; gap: .8rem; }

/* sub-navigation (anchor rail) */
/* On a meeting page the hero starts BELOW the subnav, so its fold budget is
   one bar smaller. Without this the hero was pushed a whole subnav's height
   past the fold and the CTAs fell off the screen. */
.subnav + .hero .hero__inner {
  min-height: calc(100svh - var(--header-h) - var(--subnav-h) - 0.667px);
}
.subnav {
  position: sticky; top: var(--header-h); z-index: 80;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .subnav { background: rgba(255, 255, 255, .97); }
}
.subnav__inner { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding-block: .65rem; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  padding: .55em 1.05em; border-radius: 999px;
  font-family: var(--font-display); font-size: .78rem; font-weight: 500;
  color: var(--muted); white-space: nowrap;
  transition: background-color .35s var(--ease-soft), color .35s var(--ease-soft);
}
.subnav a:hover { background: var(--mist); color: var(--ink); }
.subnav a.is-active { background: var(--theme); color: #fff; }

/* ==========================================================================
   HERO — white → soft gradient → photograph
   ========================================================================== */
.hero { position: relative; overflow: clip; }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 5rem);
  /* -2px: --header-h is a round token, the rendered header is fractionally taller */
  min-height: calc(100svh - var(--header-h) - 0.667px);
  padding-block: clamp(.6rem, 2svh, 3.2rem);
}
.hero__copy { position: relative; z-index: 2; display: grid; gap: min(clamp(.8rem, 1.3vw, 1.25rem), 1.05svh); min-width: 0; align-content: center; }
/* the three sub-brand lockups differ wildly in proportion, so they are
   fitted to one optical box rather than to a shared height */
.hero__logo {
  width: clamp(160px, 18vw, 244px); height: auto;
  max-height: clamp(70px, 7.8vw, 122px);
  object-fit: contain; object-position: left center;
}
/* Bez kape od svh: na ekranu visokom 900px h1 je ispadao 50.4px dok je
   na kontaktu i biblioteci bio 63.2px — isti naslov, tri velicine. */
.hero__title { line-height: 1.0; font-size: var(--h1); }
/* The home hero is a two-word brand lockup rather than a sentence, so it
   is the one h1 on the site that carries its own (doubled) step. */
/* Naslovnica je imala dvostruki h1 (99px). Sada ista stepenica kao svi. */
.hero--brand .hero__title { line-height: .94; }
.hero__title em { font-style: normal; color: var(--theme); }
.hero__lead { max-width: min(100%, 58rem); display: grid; gap: min(.85rem, 1.3svh); }
.hero__lead .lead { margin: 0; font-size: min(clamp(1.08rem, .96rem + .62vw, 1.4rem), 1.95svh); line-height: 1.36; }
/* The event heroes fit their paragraph to the viewport (the svh cap above)
   because they carry dates, venue and a countdown below it. The home hero
   carries one sentence, and that sentence is the same kind of running text as
   the section leads further down — so it takes the same step as those. */
.hero--brand .hero__lead .lead { font-size: var(--t-lead); line-height: 1.5; }

/* The home hero holds five short elements and a whole screen to put them in.
   The shared .hero__copy gap is capped at ~1svh because the event heroes pack
   a countdown and a fact table into the same box; here that cap left the mark,
   the pill, the title and the rotator stacked tight against each other with
   empty screen underneath. This one opens the stack out and lets the sentence
   run wider before it wraps. */
.hero--brand .hero__copy { gap: clamp(1rem, 2.1vh, 1.9rem); }
.hero--brand .hero__welcome { margin-bottom: clamp(.7rem, 1.6vh, 1.4rem); }
.hero--brand .hero__actions { margin-top: clamp(1.1rem, 2.4vh, 2.1rem); }
.hero--brand .hero__lead { max-width: min(100%, 52ch); }
/* The copy column was 1.55fr against the bloom's 1fr; the sentence reads
   better with a little more room and the bloom loses nothing it needs.
   Behind a min-width query on purpose: the rule that stacks the hero into a
   single column below 900px is `.hero__inner` — one class. A two-class rule
   like this one outranks it on specificity whatever the source order, so
   without the query the home hero stayed two columns on a phone and the copy
   was squeezed into 64% of the screen. */
@media (min-width: 901px) {
  .hero--brand .hero__inner { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}
/* the button label takes the same step as the sentence above it. Set in caps
   it still reads larger than the sentence at the same number — caps have no
   descenders and sit on a taller x-height — so the padding comes down to keep
   the capsule in proportion. */
.hero--brand .hero__actions .btn { font-size: var(--t-lead); padding: .8em 1.6em; }

/* "Dobro došli" and the rotating adjectives are one pair: same h2 step, and
   each is pushed away from the title by the same amount so the h1 sits in
   its own air. */
/* the welcome chip sits between the label pills and the rotator in scale:
   clearly bigger than a section label, clearly smaller than the rotator */
.hero__welcome {
  font-size: min(var(--pill-lg), 2.4svh);
  margin-top: .1rem; margin-bottom: min(clamp(.5rem, 1.5vw, 1.5rem), 2svh);
}
/* the buttons sit clear of the paragraph — .25rem read as crowded against it */
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: min(1.3rem, 2.4svh); }

/* the photograph, with the soft gradient that dissolves it into the page */
.hero__media { position: relative; align-self: stretch; min-height: min(360px, 48svh); }
/* the photograph runs off the right edge of the viewport: the wrap's own
   gutter plus whatever the centred 1440 column leaves over */
.hero__figure {
  position: absolute; inset: 0;
  background: transparent;
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--wrap)) / 2)));
}
/* The photograph's leading edge is masked away rather than covered, so the
   white column really does dissolve into the image instead of meeting it at
   a hard corner. The mask sits on the <img> alone — the caption above it
   stays fully opaque. */
/* Kut maske nije fiksan nego token: na sirokom je slika desno od teksta pa
   se gasi njezin LIJEVI rub (92deg), a ispod 901px hero se slaze u jedan
   stupac i slika pada ISPOD teksta — ondje se mora gasiti GORNJI rub
   (182deg). S fiksnih 92deg na mobitelu je nestajala lijeva strana
   fotografije, a tvrdi rub je ostajao gore, tocno ondje gdje dodiruje tekst. */
.hero__figure { --maska-kut: 92deg; }
.hero__figure img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(var(--maska-kut), rgba(0,0,0,0) 0%, rgba(0,0,0,.028) 5.2%,
      rgba(0,0,0,.104) 10.4%, rgba(0,0,0,.216) 15.6%, rgba(0,0,0,.352) 20.8%,
      rgba(0,0,0,.5) 26%, rgba(0,0,0,.648) 31.2%, rgba(0,0,0,.784) 36.4%,
      rgba(0,0,0,.896) 41.6%, rgba(0,0,0,.972) 46.8%, #000 52%);
          mask-image: linear-gradient(var(--maska-kut), rgba(0,0,0,0) 0%, rgba(0,0,0,.028) 5.2%,
      rgba(0,0,0,.104) 10.4%, rgba(0,0,0,.216) 15.6%, rgba(0,0,0,.352) 20.8%,
      rgba(0,0,0,.5) 26%, rgba(0,0,0,.648) 31.2%, rgba(0,0,0,.784) 36.4%,
      rgba(0,0,0,.896) 41.6%, rgba(0,0,0,.972) 46.8%, #000 52%);
}
.hero__figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(42, 34, 99, .18), rgba(42, 34, 99, 0) 32%);
  -webkit-mask-image: linear-gradient(var(--maska-kut), rgba(0,0,0,0) 0%, rgba(0,0,0,.028) 5.2%,
      rgba(0,0,0,.104) 10.4%, rgba(0,0,0,.216) 15.6%, rgba(0,0,0,.352) 20.8%,
      rgba(0,0,0,.5) 26%, rgba(0,0,0,.648) 31.2%, rgba(0,0,0,.784) 36.4%,
      rgba(0,0,0,.896) 41.6%, rgba(0,0,0,.972) 46.8%, #000 52%);
          mask-image: linear-gradient(var(--maska-kut), rgba(0,0,0,0) 0%, rgba(0,0,0,.028) 5.2%,
      rgba(0,0,0,.104) 10.4%, rgba(0,0,0,.216) 15.6%, rgba(0,0,0,.352) 20.8%,
      rgba(0,0,0,.5) 26%, rgba(0,0,0,.648) 31.2%, rgba(0,0,0,.784) 36.4%,
      rgba(0,0,0,.896) 41.6%, rgba(0,0,0,.972) 46.8%, #000 52%);
  pointer-events: none;
}

.hero__caption {
  position: absolute; right: clamp(1rem, 2vw, 1.7rem); bottom: clamp(1rem, 2vw, 1.7rem); z-index: 3;
  justify-content: flex-end; max-width: 78%;
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.hero__caption .pill { background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); border-color: transparent; }

/* the very light ghost flower sitting behind the hero copy */
.hero__ghost {
  position: absolute; z-index: 0;
  width: min(74vw, 900px); aspect-ratio: 1;
  left: -24%; top: -32%;
  color: var(--theme);
  opacity: .085;
  pointer-events: none;
}
.hero__ghost .flower__petal { animation-duration: 13s; }

/* On the home page the photograph moved further down the page, so this same
   ghost — unchanged, just repositioned — is what fills the hero's right half
   instead. Pulled past the right edge so the outer ring is cropped by it. */
.hero--brand .hero__ghost {
  left: auto; right: -14%; top: 50%;
  translate: 0 -50%;
  width: min(62vw, 820px);
}
@media (max-width: 900px) {
  .hero--brand .hero__ghost { right: -28%; width: min(96vw, 620px); }
}

.hero--compact .hero__inner { min-height: min(56vh, 520px); }
.hero--center .hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; min-height: auto; }
.hero--center .hero__copy { max-width: none; justify-items: center; width: 100%; }
.hero--center .display, .hero--center .h1 { max-width: 16ch; }
.hero--center .lead { max-width: 58ch; }
.hero--center .eyebrow { justify-content: center; }
/* .eyebrow--pill sets justify-self:start, which left-aligned the pill inside
   an otherwise centred hero */
.hero--center .eyebrow--pill { justify-self: center; }

/* ==========================================================================
   The living NiPP flower — hero loop animation
   ========================================================================== */
.flower { width: 100%; height: auto; overflow: visible; }
.flower__bloom { transform-box: fill-box; transform-origin: center; animation: bloom-breathe 11s var(--ease-soft) infinite; }
.flower__ring { transform-box: fill-box; transform-origin: center; }
/* All rings turn the same way at the same rate, so the bloom reads as one
   object rotating rather than as rings sliding against each other. Before
   this the middle ring ran backwards and faster, which made the mark look
   like it was coming apart at small sizes. */
.flower__ring--outer { animation: spin 96s linear infinite; }
.flower__ring--mid   { animation: spin 96s linear infinite; }
.flower__ring--inner { animation: spin 96s linear infinite; }
.flower__petal { transform-box: fill-box; transform-origin: center; animation: petal-pulse 7.5s var(--ease-soft) infinite; }
.flower__core  { transform-box: fill-box; transform-origin: center; animation: spin 96s linear infinite; }
.flower__spark { transform-box: fill-box; transform-origin: center; animation: spark 6.5s var(--ease-soft) infinite; }
.flower__halo  { transform-box: fill-box; transform-origin: center; animation: halo 9s var(--ease-soft) infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bloom-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.045) rotate(3deg); }
}
@keyframes petal-pulse {
  0%, 100% { transform: scale(1); opacity: .92; }
  50%      { transform: scale(1.13); opacity: 1; }
}
@keyframes spark {
  0%, 100% { transform: scale(.82); opacity: .45; }
  50%      { transform: scale(1.2); opacity: 1; }
}
@keyframes halo {
  0%, 100% { transform: scale(1); opacity: .18; }
  50%      { transform: scale(1.09); opacity: .05; }
}

.hero__mark {
  position: relative;
  width: min(clamp(112px, 13vw, 168px), 11.5svh);
  margin-bottom: -.4rem;
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.2rem, 1.7vw, 1.7rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: transform .6s var(--ease), border-color .5s var(--ease-soft), box-shadow .6s var(--ease);
}
.card--link:hover { transform: translateY(-5px); border-color: var(--line); box-shadow: 0 30px 60px -40px rgba(23, 19, 58, .4); }
.card--mist { background: var(--mist); border-color: transparent; }
.card--plain { background: transparent; border-color: transparent; padding: 0; }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: auto; }
.card__title { margin-bottom: .6rem; }
.card__text { color: var(--ink-2); font-size: var(--t-base); }
.card__foot { margin-top: clamp(.85rem, 1.4vw, 1.35rem); }
.card__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: .74rem; letter-spacing: .14em;
  color: var(--theme); opacity: .55;
}

/* Ikona umjesto rednog broja na karticama misije. Ista mjera i ista
   ploha kao .infocard__ico, da se dvije mrezice kartica ne razilaze. */
.card__ico {
  display: grid; place-items: center;
  width: clamp(38px, 3.2vw, 44px); aspect-ratio: 1;
  margin-bottom: clamp(.8rem, 1.3vw, 1.1rem);
  border-radius: var(--r-sm);
  background: var(--theme-soft);
  color: var(--theme);
}
.card__ico svg { width: 55%; height: 55%; }

.card__media {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3; background: var(--mist-2);
  margin: calc(clamp(1.2rem, 1.7vw, 1.7rem) * -1) calc(clamp(1.2rem, 1.7vw, 1.7rem) * -1) clamp(1rem, 1.5vw, 1.4rem);
  border-radius: var(--r-lg) var(--r-lg) var(--r-md) var(--r-md);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.card--link:hover .card__media img { transform: scale(1.045); }
.card__badge { position: absolute; left: 1rem; top: 1rem; z-index: 2; }

/* feature card — the three upcoming meetings */
.eventcard { overflow: hidden; padding: 0; display: grid; grid-template-rows: auto 1fr; }
.eventcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist-2); }
.eventcard__media > img:not(.eventcard__logo) { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.eventcard:hover .eventcard__media > img:not(.eventcard__logo) { transform: scale(1.05); }
.eventcard__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23, 19, 58, .62) 0%, rgba(23, 19, 58, .22) 30%, rgba(23, 19, 58, 0) 58%);
}
.eventcard__media .eventcard__logo {
  position: absolute; left: clamp(1.1rem, 2vw, 1.7rem); top: clamp(1.1rem, 2vw, 1.7rem); z-index: 2;
  /* the three lockups have very different proportions, so they are fitted
     into one optical box rather than sharing a single height */
  width: clamp(88px, 10.5vw, 124px); height: auto; max-height: 58px;
  object-fit: contain; object-position: left top;
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, .35));
}
/* Flex column, so however long a title runs the "Istražite" link still sits
   on the same baseline in all three cards (margin-top: auto pushes it down).
   The grid already stretches the cards to equal height. */
.eventcard__body {
  position: relative;
  padding: clamp(1.1rem, 1.6vw, 1.6rem);
  display: flex; flex-direction: column; gap: .7rem;
  min-height: 0; height: 100%;
}

/* A restrained hover set, all of it in the meeting's own colour so the three
   cards stay distinct: a rule draws along the seam under the photograph, the
   scrim eases back so the image brightens, the lockup and the whole card lift,
   and the arrow travels. Every one of these is a transition, so the global
   prefers-reduced-motion block already neutralises them. */
.eventcard__body::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--theme);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .75s var(--ease);
}
.eventcard:hover .eventcard__body::before { transform: scaleX(1); }

.eventcard__media::after { transition: opacity .7s var(--ease); }
.eventcard:hover .eventcard__media::after { opacity: .68; }

.eventcard__logo { transition: transform .7s var(--ease); }
.eventcard:hover .eventcard__logo { transform: translateY(-3px); }

.eventcard__cta svg { transition: transform .5s var(--ease); }
.eventcard:hover .eventcard__cta svg,
.eventcard:focus-within .eventcard__cta svg { transform: translate(4px, -4px) rotate(-45deg); }

.card--link.eventcard:hover {
  transform: translateY(-8px);
  box-shadow: 0 42px 72px -46px rgba(23, 19, 58, .5);
}
/* date / place / mode were three small pills and read as decoration; they are
   the facts a visitor actually scans for, so they lead the card now */
.eventcard__when { display: grid; gap: .15rem; }
.eventcard__date {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.2; color: var(--theme);
}
.eventcard__where {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(.92rem, 1.1vw, 1rem);
  line-height: 1.35; color: var(--ink-2);
}
/* Bio je --t-lead (21.2px) — jedini h3 na stranici izvan stepenice od
   18.2px. Razlog je bio datum ispod njega na 18.9px: naslov na --t-h3 bio
   bi manji od vlastitog datuma. Zato datum ide dolje na --t-base, pa
   kartica ima cist redoslijed: naslov 18.2 > datum 15.6 > podaci 13.2. */
.eventcard__title { margin-top: .1rem; font-size: var(--t-h3); text-transform: uppercase; letter-spacing: .012em; }
/* The three titles run to different line counts, which pushed each card's
   dates to a different height. The title reserves the height of the longest
   one so a shorter title pads out and every card starts its facts on the same
   line. Counted in lines (1.3 is the h3 line-height) rather than in pixels, so
   it follows the font size.
   NOTE: this reserves exactly three lines. A title that ever runs to four puts
   that card's dates back out of line — raise the 3 here if that happens. */
@media (min-width: 621px) {
  .eventcard__title { min-height: calc(3 * 1.3em); }
}
/* „Istražite" je sada gumb, ne tekstualna poveznica. padding-top iz starog
   pravila bi mu razbio okomiti razmak iz .btn, pa ga zamjenjuje margina.
   Ostaje <span>: cijelu karticu vec pokriva jedan <a>, a poveznica unutar
   poveznice je nevaljan HTML i zbunjuje citace zaslona. */
.eventcard__cta {
  /* `margin-top: auto` gura gumb na dno kartice, pa su gumbi na sve tri
     kartice u istom retku bez obzira koliko redaka ima naslov ili natuknice.
     Razmak iznad NE smije ici ovdje: margin-block-start je isto sto i
     margin-top, pa je gasio `auto` i gumb je samo slijedio natuknice.
     Zato razmak nosi donja margina popisa natuknica. */
  margin-top: auto; align-self: start;
  --btn-bg: var(--theme);
}
.eventcard__facts { margin-block-end: clamp(1rem, 1.8vw, 1.5rem); }

/* ==========================================================================
   EDITORIAL NUMBERS
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.stat { display: grid; gap: .3rem; }
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.4rem, 8.4vw, 7.8rem);
  line-height: .9; letter-spacing: 0;
  color: var(--theme);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--muted);
  padding-top: .6rem; border-top: 1px solid var(--line);
  margin-top: .5rem;
}
.section--ink .stat__num { color: #fff; }
.section--ink .stat__label { color: rgba(255, 255, 255, .6); border-top-color: rgba(255, 255, 255, .2); }

/* Inline read-more: the tail of the sentence is hidden and an ellipsis plus the
   control sit in its place, so the cut reads as part of the running text rather
   than as a separate link underneath. The dots are hidden by a sibling selector
   off the revealed span — it precedes them in the DOM, which is the whole
   reason for that order. */
.more__rest { display: none; }
.more__rest.is-open { display: inline; animation: fade-in .45s var(--ease-soft) backwards; }
.more__rest.is-open ~ .more__dots { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.more__btn {
  background: none; border: 0; padding: 0 0 .1em;
  margin-left: .35em;
  /* inherits the paragraph's size AND weight — it is part of the sentence,
     not a call to action, so it only carries a hairline to mark it clickable */
  font: inherit;
  color: var(--theme);
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.more__btn:hover { border-bottom-color: currentColor; }

/* ---- entrances for the middle of the page -------------------------------
   All three use an ANIMATION with `backwards` fill rather than a transition.
   `both` would hold the end state and out-rank the hover transform afterwards;
   `backwards` applies the from-state before the run and then hands the element
   back to its normal styles, so hover still works. The per-item --delay is set
   by site.js from the parent's data-stagger. */

@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop-in  { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes dot-in  { from { transform: translateY(-.22em) scale(0); } to { transform: translateY(-.22em) scale(1); } }

.bullets:not(.is-in) li { opacity: 0; }
.bullets.is-in li {
  animation: rise-in .75s var(--ease) backwards;
  animation-delay: var(--delay, 0ms);
}
/* the icon lands just after its line has settled */
.bullets:not(.is-in) .bullets__ico { transform: scale(0); }
.bullets.is-in .bullets__ico {
  animation: pop-in .5s var(--ease) backwards;
  animation-delay: calc(var(--delay, 0ms) + 260ms);
}

/* only a .chips that is itself a reveal target starts hidden — without the
   [data-reveal] guard, any chip row that is not observed never gets .is-in and
   stays invisible forever */
.chips[data-reveal]:not(.is-in) .chip { opacity: 0; }
.chips.is-in .chip {
  animation: pop-in .55s var(--ease) backwards;
  animation-delay: var(--delay, 0ms);
}

.numbers__grid:not(.is-in) .numcard { opacity: 0; }
.numbers__grid.is-in .numcard {
  animation: rise-in .7s var(--ease) backwards;
  animation-delay: var(--delay, 0ms);
}
/* the tiles answer the pointer the way the meeting cards do, just quieter */
.numcard {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.numcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -28px rgba(23, 19, 58, .45);
}

@media (prefers-reduced-motion: reduce) {
  .bullets li, .bullets li::before, .chips .chip, .numbers__grid .numcard {
    opacity: 1 !important; animation: none !important;
  }
  .bullets li::before { transform: translateY(-.22em) scale(1) !important; }
  .numcard:hover { transform: none; }
}

/* NiPP u brojkama. Was a full-bleed deep-indigo band, which on a four-section
   page had nothing to balance it and simply slammed. It is now a soft tinted
   panel held inside the page column, carrying one equal-size white card per
   figure — the section keeps its own identity without becoming a slab. */
.numbers {
  background: var(--mist-2);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.2vw, 3rem);
}
.numbers__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 1fr;                 /* every tile the same height, both rows */
  gap: clamp(.6rem, 1.1vw, 1rem);
  margin-top: clamp(1.5rem, 2.6vw, 2.4rem);
}
.numcard {
  display: grid; align-content: start; gap: .45rem;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: clamp(1rem, 1.7vw, 1.5rem);
}
.numcard__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(clamp(1.9rem, 3.1vw, 2.85rem) + 1.333px);
  line-height: 1; letter-spacing: 0;
  color: var(--theme);
  font-variant-numeric: tabular-nums;
}
.numcard__l { font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }

/* fact rows — vrijeme / mjesto / način */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2vw, 2rem); }
.fact { display: grid; gap: .35rem; padding-top: .85rem; border-top: 1.5px solid var(--line); }
.fact__label { font-family: var(--font-display); font-size: var(--t-label); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }
.fact__value { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.65rem); font-weight: 700; letter-spacing: 0; line-height: 1.24; }
.fact__note { font-size: var(--t-sm); color: var(--muted); }

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */
.countdown { display: grid; gap: .9rem; }
.countdown__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1.1rem); max-width: 540px; }
.cd {
  display: grid; gap: .35rem; justify-items: center;
  padding: clamp(.8rem, 1.4vw, 1.15rem) .6rem clamp(.65rem, 1.1vw, .9rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.section--ink .cd { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .13); }
.cd__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.06;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
  color: var(--theme);
}
.section--ink .cd__num { color: #fff; }
.cd__label { font-family: var(--font-display); font-size: var(--t-label); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }
.section--ink .cd__label { color: rgba(255, 255, 255, .55); }
.countdown__done { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: 0; }

/* ==========================================================================
   SPEAKERS
   ========================================================================== */
.speakers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.speaker {
  display: grid; gap: .8rem;
  padding: clamp(1rem, 1.5vw, 1.35rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: border-color .5s var(--ease-soft), transform .6s var(--ease), background-color .5s var(--ease-soft);
}
.speaker:hover { transform: translateY(-4px); border-color: var(--line); }
.speaker__avatar {
  position: relative;
  aspect-ratio: 4 / 5; width: 100%;
  border-radius: var(--r-md);
  background:
    linear-gradient(155deg, var(--theme-soft), rgba(255, 255, 255, 0) 62%),
    var(--mist);
  display: grid; place-items: center;
  overflow: hidden;
}
.speaker__avatar::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 118%, var(--theme-soft), transparent 62%);
}
.speaker__avatar img { width: 100%; height: 100%; object-fit: cover; }
.speaker__initials {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); letter-spacing: 0;
  color: var(--theme); opacity: .58;
}
.speaker__mark { position: absolute; right: 12px; bottom: 12px; width: 30px; opacity: .62; z-index: 2; }
.speaker__avatar > .flower:not(.speaker__mark) { position: relative; z-index: 1; width: clamp(52px, 6vw, 74px); opacity: .3; }
.speaker__body { display: grid; gap: .35rem; }
.speaker__name { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: 0; line-height: 1.22; }
.speaker__org { font-size: .9rem; color: var(--muted); }

/* ==========================================================================
   PRICING TABLE
   ========================================================================== */
.tablewrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line-soft); -webkit-overflow-scrolling: touch; }
.ptable { width: 100%; border-collapse: collapse; min-width: 660px; background: var(--paper); }
.ptable th, .ptable td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.ptable thead th {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  background: var(--mist); vertical-align: bottom; line-height: 1.4;
}
.ptable thead th span { display: block; letter-spacing: .06em; text-transform: none; color: var(--muted); opacity: .8; font-weight: 500; margin-top: .25rem; }
.ptable tbody th { font-family: var(--font-display); font-weight: 700; font-size: var(--t-base); letter-spacing: 0; }
.ptable td { font-family: var(--font-display); font-weight: 500; font-size: var(--t-base); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr { transition: background-color .35s var(--ease-soft); }
.ptable tbody tr:hover { background: var(--mist); }
.ptable .is-best { color: var(--theme); font-weight: 700; }
/* In the fee table the emphasis used to sit on the cheaper prices. It reads
   better on the column headers: what a visitor is looking for first is which
   deadline and which form of attendance a price belongs to, not which number
   is smallest. */
.ptable--fees thead th {
  font-size: var(--t-sm); letter-spacing: .04em; text-transform: none;
  color: var(--theme);
}
.ptable--fees thead th[rowspan] { color: var(--muted); }
/* the sentence that qualifies the prices, directly under the table */
.fees__note {
  margin: clamp(.8rem, 1.4vw, 1.15rem) 0 0;
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2);
  max-width: 78ch;
}

/* ==========================================================================
   FEATURE / SPLIT BLOCKS
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 2.8vw, 3.2rem);
  align-items: stretch;
}
.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split--wide-right { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split__body { display: grid; gap: clamp(.7rem, 1.15vw, 1.1rem); align-content: center; }
/* The photograph fills the height of its row rather than floating inside it,
   so a split reads as one filled band instead of two loose columns. */
.split__media {
  position: relative; align-self: stretch;
  border-radius: var(--r-xl); overflow: hidden; background: var(--mist-2);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--portrait { min-height: clamp(280px, 27vw, 400px); }
/* The frame is 3:4 and the portrait is taller, so object-fit crops it. Centred
   it took the crop off the top of the head; holding the image high puts the
   cut on the coat instead, where nothing is lost. */
/* Izvorna fotografija ima kosu odrezanu na samom gornjem rubu — 256px
   ravnog reza kroz 27% sirine. Ti piksela u datoteci nema i CSS ih ne
   moze vratiti. Ovdje je slika spustena i smanjena da dobije zraka iznad
   glave, a rez se stapa u bijelu pozadinu umjesto da stoji kao crta.
   Pravo rjesenje je neodrezan original. */
.split__media--portrait { background: #fff; }
.split__media--portrait img {
  object-fit: contain;
  object-position: center bottom;
  /* px, ne %: postotni padding na <img> mjeri se od SIRINE, pa je 7%
     davalo 38.8px umjesto ocekivanog udjela visine. Maska je zato isto
     u px — visina okvira ovisi o susjednom stupcu i nije predvidljiva. */
  padding-top: 40px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 48px, rgba(0,0,0,.5) 70px, #000 112px);
          mask-image: linear-gradient(180deg, transparent 0, transparent 48px, rgba(0,0,0,.5) 70px, #000 112px);
}
@media (max-width: 900px) {
  /* okvir je ondje 4/5 i puno nizi — 40px bi bilo 9% visine umjesto 5% */
  .split__media--portrait img {
    padding-top: 24px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 30px, rgba(0,0,0,.5) 46px, #000 76px);
            mask-image: linear-gradient(180deg, transparent 0, transparent 30px, rgba(0,0,0,.5) 46px, #000 76px);
  }
}
.split__media--card { min-height: clamp(260px, 28vw, 400px); }
.split__media--tall { min-height: clamp(300px, 34vw, 480px); }

/* checklist */
.checklist { display: grid; gap: .6rem; }
.checklist li { position: relative; padding-left: 2.1rem; color: var(--ink-2); }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .3em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--theme-soft);
}
.checklist li::after {
  content: ''; position: absolute; left: 6.5px; top: .62em;
  width: 7px; height: 4px;
  border-left: 1.8px solid var(--theme); border-bottom: 1.8px solid var(--theme);
  transform: rotate(-45deg);
}
.section--ink .checklist li { color: rgba(255, 255, 255, .8); }
.section--ink .checklist li::before { background: rgba(255, 255, 255, .16); }
.section--ink .checklist li::after { border-color: #fff; }

/* numbered list — goals */
.numlist { display: grid; gap: 0; }
.numlist li {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem;
  padding: clamp(.7rem, 1.1vw, 1rem) 0;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.numlist li:last-child { border-bottom: 1px solid var(--line-soft); }
.numlist__n { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; color: var(--theme); opacity: .6; }
.numlist__t { font-family: var(--font-display); font-size: clamp(1.05rem, 1.65vw, 1.4rem); font-weight: 700; letter-spacing: 0; line-height: 1.34; }

/* Razlozi za izlaganje. Prvo su bili kartice u mreži od tri stupca: trinaest
   rečenica vrlo različite duljine, svaka u svojoj kutiji, pa je pola mreže bio
   prazan prostor ispod kratkih kartica — oko nije imalo gdje početi čitati.
   Mirni retci s tankom crtom čitaju se kao popis, redom, a ikona lijevo drži
   okomicu po kojoj oko klizi. */
.prilike { display: grid; gap: 0; list-style: none; margin: clamp(1.4rem, 2.4vw, 2.2rem) 0 0; padding: 0; }
.prilike li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.25rem);
  align-items: start;
  padding: clamp(.85rem, 1.5vw, 1.2rem) 0;
  border-top: 1px solid var(--line-soft);
}
.prilike li:last-child { border-bottom: 1px solid var(--line-soft); }
.prilike__ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; background: var(--theme-soft); color: var(--theme);
}
.prilike__ico svg { width: 20px; height: 20px; }
.prilike p { margin: 0; font-size: var(--t-base); line-height: 1.6; color: var(--ink-2); }

/* ==========================================================================
   MJERA RETKA
   ==========================================================================
   Tekući tekst se protezao preko cijele širine stupca — izmjereno do 137
   znakova u retku na „O nama", 97 na naslovnici. Oko gubi početak idućeg
   retka već iznad ~80 i čitanje postaje naporno; struka traži 50–75.
   Kapa je u ch pa prati veličinu slova. Brojka nije broj znakova: ch je
   širina znamenke 0, koja je šira od prosječnog slova, pa 50ch daje oko
   70 stvarnih znakova — izmjereno, ne procijenjeno.
   U uskim stupcima i karticama ne mijenja ništa — ondje je širina ionako
   manja od kape. */
.lead, .body-lg, .faq__body p, .prilike p,
/* .reason--wide je kartica preko cijele mreže: njezin opis je išao 165
   znakova u retku. .fees__note i .uvodcentar .lead su isti slučaj. */
.reason--wide .reason__d, .fees__note { max-width: 46ch; }
/* sredinjeni blokovi moraju i dalje stajati u sredini svog stupca */
.uvodcentar .lead, .shead--centar .lead, .shead--centar .body-lg,
.hero--center .lead { margin-inline: auto; }

/* Sekcija sponzora. Adrese su bile goli linkovi razdvojeni <br>-om, u istoj
   boji kao tekst i bez podcrte — nisu se ni vidjele kao poveznice; gumb je
   visio u odlomku s inline stilom, a dva odlomka stajala su unutar .shead,
   koji je blok za naslov. Cjelina je zato izgledala kao da je slučajno
   nastala. Sad koristi iste redove s ikonom kao kontakt stranica, gumb ima
   svoje mjesto, a zahvala stoji pod crtom kao zaključak. */
.sponzori__kontakti {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.sponzori__cta { margin-top: clamp(1.1rem, 2vw, 1.6rem); }

/* --------------------------------------------------------------------------
   MOBILNA REVIZIJA
   --------------------------------------------------------------------------
   Dvije stvari koje su na telefonu stvarno smetale, izmjerene na 375px. */

/* 1. Tablica smještaja nosila je min-width: 660px, pa je na telefonu stršila
      323px preko ruba — cijenu, dakle ono zbog čega se tablica i gleda, vidio
      si tek nakon vodoravnog povlačenja. Tri stupca stanu i u 375px ako im se
      pusti prelamanje i stisnu razmaci. */
@media (max-width: 720px) {
  #smjestaj .ptable { min-width: 0; }
  #smjestaj .ptable th, #smjestaj .ptable td { padding: .65rem .45rem; font-size: var(--t-sm); }
  #smjestaj .ptable thead th { font-size: 10px; letter-spacing: .04em; }
  #smjestaj .ptable tbody th { font-size: var(--t-sm); }
}

/* 2. Dodirne mete. Preporuka je 44px visine; ispod toga se promašuje, pogotovo
      u vožnji prstom. Poveznice u podnaslovnoj traci bile su 34px, stavke u
      podnožju 23px uz razmak od 9px (dvanaest poveznica jedna ispod druge, pa
      je promašaj značio otvaranje krive stranice), a „Pročitaj više" u pismu
      25px. Širina ostaje ista, raste samo visina mete. */
@media (max-width: 900px) {
  .subnav a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__legal button,
  .letter__vise { min-height: 44px; }
  .footer__col a { display: flex; align-items: center; min-height: 40px; }
}

/* --------------------------------------------------------------------------
   MOBILNA REVIZIJA — II.
   -------------------------------------------------------------------------- */

/* 3. Gumbi su lomili natpis na dva retka: „Pregledajte NiPP biblioteku" traži
      272px, a između razmaka i strelice ostajalo mu je 283px — taman da se
      prelomi. Na telefonu ide manje slovo i uži razmak, a natpis se više ne
      smije lomiti ni u jednoj riječi. */
@media (max-width: 560px) {
  .btn { font-size: 14px; padding-inline: 1.45em; gap: .55em; }
  .btn > span { white-space: nowrap; }
  .btn--sm { font-size: 13px; }
}

/* 4. Fotografije uz sekcije bile su u jednom stupcu, svaka preko cijele
      širine — stranica je zbog toga bila duga, a slike bez odnosa jedna
      prema drugoj. U dva stupca čitaju se kao par. */
/* 5. Naslovi knjiga u biblioteci na 16px u stupcu od 161px lomili su se u
      četiri retka. */
@media (max-width: 560px) {
  .book__title { font-size: 13px; line-height: 1.25; }
}

/* Kartice razloga na telefonu. Ikona je stajala iznad naslova, pa je svaka
   kartica bila visoka 97px za jedan redak teksta — šest takvih zauzme cijeli
   zaslon. Ovdje ikona sjeda u isti red kao naslov i kartica se skupi na
   visinu tog retka. Naslov ide korak dolje jer mu ikona uzima širinu.
   Stolni zaslon ostaje netaknut: ondje ikona i dalje stoji iznad. */
@media (max-width: 720px) {
  .reason {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .65rem; align-items: center;
  }
  .reason > .reason__ico { grid-row: 1; grid-column: 1; margin-bottom: 0; width: 30px; }
  .reason > .reason__t   { grid-row: 1; grid-column: 2; font-size: 14px; line-height: 1.3; }
  .reason > .reason__d,
  .reason > .reason__n   { grid-column: 1 / -1; }
  /* kartica s pločicom „Novo" zadržava svoj raspored — ondje su ikona i
     oznaka u zajedničkom retku iznad naslova */
  .reason--feature { grid-template-columns: minmax(0, 1fr); }
  .reason--feature > .reason__t { grid-column: 1; }
}


/* ==========================================================================
   PROGRAMME — one card per topic
   ========================================================================== */
/* Was a vertical timeline with a rosette marker per row, which buried the
   topics in a list. Plain numbered cards instead: the six sessions read as six
   things, scannable at a glance, and the one that carries a decision (DA / NE)
   is the only one with any internal structure. */
/* ==========================================================================
   PROGRAM — the running order of the day
   ==========================================================================
   Six equal cards in a grid gave every topic the same weight and the same
   height, so the reader had to scan all six to find where the day actually
   goes. It is a list of sequential topics, so it reads as a list: the title
   block and a photograph hold the left column, the numbered topics run down
   the right, and only the open one shows its detail. The first is open on
   load so the block is never a column of closed doors.

   Built on native <details>, the same way the FAQ is — no script, keyboard
   and find-in-page work on their own. */
.program {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
}
.program__intro { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); }
.program__figure {
  margin: 0; overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3; background: var(--mist-2);
}
.program__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.program__main { display: grid; gap: clamp(1.1rem, 1.9vw, 1.6rem); }
.program__list { display: grid; }
/* the download sits under the list it belongs to. It used to sit below the
   whole two-column grid, which put the button for the programme underneath
   the photograph while the programme itself ended higher up the other
   column — the one thing in the section you would reach for, parked away
   from the thing it refers to. */
.program__foot { display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2vw, 1.6rem); align-items: center; }

.ptopic { border-top: 1px solid var(--line); }
.ptopic:last-child { border-bottom: 1px solid var(--line); }

.ptopic > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: clamp(.95rem, 1.6vw, 1.35rem) 0;
  cursor: pointer; list-style: none;
  transition: color .35s var(--ease-soft);
}
.ptopic > summary::-webkit-details-marker { display: none; }
.ptopic > summary:hover { color: var(--theme); }

/* the chevron points right when shut and down when open */
.ptopic > summary::after {
  content: ''; flex: none;
  width: 9px; height: 9px; margin-right: 3px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(-45deg);
  opacity: .45;
  transition: transform .45s var(--ease), opacity .35s var(--ease-soft);
}
.ptopic[open] > summary::after { transform: rotate(45deg); opacity: 1; }
.ptopic[open] > summary { color: var(--theme); }

.ptopic__t {
  display: flex; align-items: baseline;
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h3); line-height: 1.32;
  color: inherit;
}
.ptopic--static { color: var(--ink); }
.ptopic--static .ptopic__t { padding: clamp(.95rem, 1.6vw, 1.35rem) 0; }

/* The body used to be indented past the 01–05 column so it lined up under the
   title rather than under the number. With the numbers gone the indent had
   nothing to clear, so it goes too and the body sits under its own title. */
.ptopic__body {
  display: grid; gap: .6rem;
  padding: 0 0 clamp(1rem, 1.7vw, 1.4rem);
  max-width: 62ch;
}

@media (max-width: 980px) {
  .program { grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2rem); }
}
@media (max-width: 560px) {
  /* at this width the indent costs more than the alignment buys */
  .ptopic__body { padding-left: 0; }
}

.topic__d { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.topic__split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.3vw, 1.1rem);
  margin: .35rem 0 .15rem;
}
.tcol {
  display: grid; gap: .4rem; align-content: start;
  padding: clamp(.8rem, 1.3vw, 1.05rem);
  background: var(--mist);
  border-radius: var(--r-md);
}
/* the program sits on --mist, where a --mist column is invisible */
.section--mist .tcol { background: var(--paper); }
.tcol__k {
  justify-self: start;
  display: inline-flex; padding: .28em .95em;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .12em;
  background: var(--theme); color: #fff;
}
.tcol__k--no { background: var(--ink-2); }
.tcol p { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }

@media (max-width: 720px) {
  .topic__split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BOOKS
   ========================================================================== */
.books { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); }
.book { display: grid; gap: .7rem; }
.book__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--brand);
  box-shadow: 0 22px 46px -30px rgba(23, 19, 58, .55);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.book:hover .book__cover { transform: translateY(-7px) rotate(-.8deg); box-shadow: 0 34px 60px -32px rgba(23, 19, 58, .55); }
.book__cover img { width: 100%; height: 100%; object-fit: cover; }
.book__cover::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0));
}
/* typographic cover, used until the client supplies cover scans */
.book__typo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.1rem, 1.9vw, 1.7rem);
  color: #fff;
  overflow: hidden;
}
/* an oversized, cropped rosette gives the covers a printed feel */
.book__typo::after {
  content: ''; position: absolute; right: -28%; top: -18%;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 68%);
}
.book__typo h4 {
  font-size: clamp(1.05rem, 1.75vw, 1.5rem);
  line-height: 1.06; letter-spacing: 0;
  max-width: 12ch;
}
.book__typo .label { color: rgba(255, 255, 255, .65); position: relative; z-index: 1; }
.book__typo > div { position: relative; z-index: 1; }
.book__flower { width: clamp(30px, 3.4vw, 42px); opacity: .95; }
.book__meta { display: grid; gap: .28rem; }
.book__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.book__author { font-size: var(--t-sm); color: var(--muted); }
.book__desc { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); margin-top: .5rem; }

/* ==========================================================================
   ARCHIVE
   ========================================================================== */
.archive { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
.arccard {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper);
  transition: border-color .5s var(--ease-soft), box-shadow .7s var(--ease);
}
.arccard:hover { border-color: var(--line); box-shadow: 0 34px 70px -46px rgba(23, 19, 58, .4); }
.arccard__media { position: relative; overflow: hidden; background: var(--mist-2); min-height: 300px; }
.arccard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.arccard:hover .arccard__media img { transform: scale(1.045); }
.arccard__body { padding: clamp(1.3rem, 2.1vw, 2.1rem); display: grid; gap: clamp(.8rem, 1.3vw, 1.2rem); align-content: center; }
.arccard__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.arccard__stat { display: grid; gap: .18rem; }
.arccard__statnum { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: 0; color: var(--theme); line-height: 1; }
.arccard__statlabel { font-family: var(--font-display); font-size: var(--t-label); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }

.awards { display: grid; gap: .55rem; }
.award { display: grid; gap: .22rem; padding: .75rem 0; border-top: 1px solid var(--line-soft); }
.award:first-child { border-top: 0; padding-top: 0; }
.award__name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; font-size: 1rem; }
.award__text { font-size: .95rem; color: var(--ink-2); }

/* gallery strip */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.4rem, .8vw, .7rem); }
.gallery figure { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3; background: var(--mist-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figure:nth-child(4n+1) { grid-column: span 2; aspect-ratio: 8 / 3; }

/* ==========================================================================
   EVENT BAR — when / where / how, with the countdown alongside
   Previously these sat as two loose stacked blocks; pairing them in one panel
   gives the page a single "the facts" moment instead of two half-empty rows.
   ========================================================================== */
/* Event facts. A visitor arriving on a meeting page wants three things in this
   order: when, where, how — so they are a definition list with the question as
   the key, and the countdown is a separate rail underneath rather than a fourth
   competing column. The earlier version made every fact a same-size tile, which
   left the short ones as mostly empty boxes. */
.eventmeta {
  display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem);
  padding: clamp(1.4rem, 2.8vw, 2.4rem);
  background: var(--mist-2);
  border-radius: var(--r-xl);
}
.eventmeta__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2.4rem);
  margin: 0;
}
.emfact { display: grid; gap: .25rem; align-content: start; }
.emfact__k {
  font-family: var(--font-display);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--theme); opacity: .75;
}
.emfact__v {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lead); line-height: 1.25;
  color: var(--ink);
}
.emfact__n { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--ink-2); }

/* the countdown reads as one line of running information, not as data tiles */
.eventmeta__cd { padding-top: clamp(.9rem, 1.8vw, 1.4rem); border-top: 1px solid rgba(62, 51, 137, .16); }
.eventmeta__cd .countdown {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem clamp(.9rem, 2vw, 1.6rem);
}
.eventmeta__cd .countdown > .label { color: var(--muted); }
.eventmeta__cd .countdown__grid {
  display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2vw, 1.5rem);
  max-width: none;
}
.eventmeta__cd .cd {
  display: flex; align-items: baseline; gap: .4em;
  background: none; border: 0; padding: 0; border-radius: 0;
}
.eventmeta__cd .cd__num { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.eventmeta__cd .cd__label { letter-spacing: .1em; }
.eventmeta__cd .countdown__done { flex-basis: 100%; }

@media (max-width: 900px) {
  .eventmeta__facts { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ==========================================================================
   FAQ — native disclosure, no script needed
   ========================================================================== */
.faq { display: grid; gap: .1rem; }
.faq details {
  border-top: 1px solid var(--line-soft);
}
.faq details:last-of-type { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.4rem;
  padding: clamp(.75rem, 1.25vw, 1.1rem) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-h3); font-weight: 700;
  letter-spacing: 0; line-height: 1.4;
  transition: color .35s var(--ease-soft);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--theme); }
.faq summary::after {
  content: ''; flex: none; position: relative; top: .45em;
  width: 13px; height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.6px 100% no-repeat;
  opacity: .5;
  transition: transform .45s var(--ease), opacity .35s;
}
.faq details[open] summary { color: var(--theme); }
.faq details[open] summary::after { transform: rotate(135deg); opacity: 1; }
.faq__body { padding-bottom: clamp(.8rem, 1.3vw, 1.2rem); max-width: 82ch; }
.faq__body p + p { margin-top: .7rem; }
.faq__body p, .faq__body li { color: var(--ink-2); }
.faq__body ul { display: grid; gap: .5rem; margin-top: .6rem; }
.faq__body li { position: relative; }
.faq__body a { color: var(--theme); text-decoration: underline; text-underline-offset: 2px; }

/* Registration: the price table, the fine print and the form are one block
   now, so they need one rhythm between them rather than the section's own
   spacing. The fine print is a disclosure — it is the sort of thing a reader
   wants once, when they are deciding, not standing between them and the form. */
.tablewrap + .faq { margin-top: clamp(1.1rem, 2vw, 1.7rem); }
.regnote details:last-of-type { border-bottom: 1px solid var(--line-soft); }

/* Registracija prije otvaranja prijava: bez kartica s podacima koji vec
   stoje u Informacijama — samo poruka i newsletter. */
.regsoon {
  display: grid; gap: clamp(.5rem, 1vw, .8rem);
  margin-top: clamp(1.4rem, 2.3vw, 2.3rem);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.regsoon__lead { font-family: var(--font-display); font-weight: 700; font-size: var(--t-body); color: var(--ink-2); }
/* u istoj kutiji s .body-lg (18.2px) — na --t-base je bio 15.6px */
.regsoon__d { font-size: var(--t-body); color: var(--ink-2); max-width: 46rem; }
.regsoon { justify-items: center; text-align: center; }
.regsoon__d { margin-inline: auto; }
.news--inline { margin-top: clamp(.5rem, 1vw, .8rem); justify-content: center; width: min(100%, 30rem); }
.regform__head { margin-top: clamp(1.8rem, 3.2vw, 2.8rem); }
.regform__head + .form { margin-top: clamp(1.1rem, 2vw, 1.7rem); }
/* the form sits on the mist ground now, so its fields need to stay white */
.section--mist .form input,
.section--mist .form select,
.section--mist .form textarea { background: var(--paper); }

/* ==========================================================================
   VIDEO GRID — YouTube testimonials, loaded only on click
   ========================================================================== */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--brand-deep);
  cursor: pointer;
  border: 0; padding: 0;
  display: block; width: 100%;
}
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .5s; }
.video:hover img { transform: scale(1.05); opacity: .85; }
.video__play {
  position: absolute; inset: 0; margin: auto;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
  transition: transform .5s var(--ease), background-color .35s;
}
.video:hover .video__play { transform: scale(1.09); background: #fff; }
.video__play::after {
  content: ''; margin-left: 3px;
  border-left: 15px solid var(--brand);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .videos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .videos { grid-template-columns: 1fr; } }

/* ==========================================================================
   GALLERY GROUPS — archive photographs grouped by meeting
   ========================================================================== */
.gallerygroup + .gallerygroup { margin-top: clamp(1.6rem, 2.8vw, 2.6rem); }
.gallerygroup__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap;
  padding-bottom: .7rem; margin-bottom: clamp(.8rem, 1.4vw, 1.2rem);
  border-bottom: 1px solid var(--line);
}
.gallerygroup__title { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 700; letter-spacing: 0; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form { display: grid; gap: clamp(.75rem, 1.15vw, 1.05rem); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.15vw, 1.05rem); }
.field { display: grid; gap: .35rem; }
.field > label {
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 700;
  /* --muted pada na 4.41:1 kad obrazac stoji na svijetloj plohi */
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2);
}
.field > label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .78rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 1rem;
  transition: border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft), background-color .35s var(--ease-soft);
}
.field textarea { min-height: 116px; resize: vertical; }
.field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236E6994' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--theme);
  box-shadow: 0 0 0 3.5px var(--theme-soft);
}
.field input::placeholder, .field textarea::placeholder { color: #A9A5C0; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--accent); }
.field__error { font-size: var(--t-xs); color: var(--accent-deep); display: none; }
.field.is-invalid .field__error { display: block; }

.consent { display: grid; gap: .75rem; padding: clamp(1rem, 1.6vw, 1.35rem); background: var(--mist); border-radius: var(--r-md); }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .9rem; align-items: start; cursor: pointer; }
.check input { appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--line); border-radius: 6px; background: var(--paper); cursor: pointer; position: relative; flex: none; transition: background-color .3s, border-color .3s; }
.check input:checked { background: var(--theme); border-color: var(--theme); }
.check input:checked::after {
  content: ''; position: absolute; left: 6.5px; top: 5px;
  width: 6px; height: 11px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}
.check span { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.check a { text-decoration: underline; text-underline-offset: 2px; color: var(--theme); }
.check.is-invalid span { color: var(--accent-deep); }

.form__status {
  display: none;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--theme-soft);
  color: var(--theme);
  font-size: var(--t-sm);
}
.form__status.is-visible { display: block; }
.form__note { font-size: var(--t-xs); color: var(--ink-2); }

/* newsletter */
.news { display: flex; gap: .6rem; flex-wrap: wrap; }
.news input {
  flex: 1 1 240px; min-width: 0;
  padding: 1.02rem 1.2rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; color: #fff; font-size: 16px;
  transition: border-color .35s, background-color .35s;
}
.news input::placeholder { color: rgba(255, 255, 255, .5); }
.news input:focus { outline: none; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .15); }

/* .news je pisan za tamno podnozje: bijeli tekst na 10% bijelom polju.
   Na svijetloj plohi registracije polje je bilo bijelo na bijelom —
   nevidljivo. Ovdje dobiva svijetlu varijantu. */
.news--inline input {
  background: var(--paper);
  /* --line je rgba(theme,.13) = ~1.15:1 prema bijeloj kartici — polje se
     prakticki nije vidjelo. Vezano na --ink, ne na --theme: nurse ima
     svjetliju temu pa je 60% teme davalo samo 2.3:1. 50% tinte drzi
     ~3.4:1 na sva tri skupa. */
  border-color: color-mix(in srgb, var(--ink) 50%, var(--paper));
  border-width: 1.5px;
  color: var(--ink);
}
.news--inline input::placeholder { color: var(--muted); }
.news--inline input:focus { border-color: var(--theme); background: var(--paper); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contactcard {
  display: grid; gap: clamp(1.1rem, 1.8vw, 1.7rem);
  padding: clamp(1.4rem, 2.2vw, 2.2rem);
  border-radius: var(--r-xl);
  background: var(--mist);
}
.contactcard--ink { background: var(--brand-deep); color: #fff; }
/* On a meeting page the contacts are not a separate object on the page, they
   are the page's own closing note — so no card, no ground, just the content
   sitting on the section. */
.contactcard--bare { background: none; padding: 0; }
/* Without the card the rows had the whole page to stretch across, which left
   a 1080px box holding a phone number. Here the channels sit side by side
   and fall back to a column when there is no room. */
.contactcard--bare .contactperson__rows {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.contactcard--ink .lead,
.contactcard--ink .body-lg,
.contactcard--ink p { color: #fff; }
.contactcard--ink .form__note { color: rgba(255, 255, 255, .72); }
.contactcard--ink .eyebrow { color: #fff; }
.contactcard--ink .label { color: rgba(255, 255, 255, .55); }
.contactrows { display: grid; gap: clamp(.9rem, 1.7vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contactrow { display: grid; gap: .3rem; padding-top: .8rem; border-top: 1.5px solid var(--line); }
.contactcard--ink .contactrow { border-top-color: rgba(255, 255, 255, .22); }
.contactrow__label { font-family: var(--font-display); font-size: var(--t-label); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }
.contactcard--ink .contactrow__label { color: rgba(255, 255, 255, .55); }
.contactrow__value { font-family: var(--font-display); font-size: clamp(1.02rem, 1.5vw, 1.26rem); font-weight: 700; letter-spacing: 0; line-height: 1.36; }
.contactrow__value a { transition: color .3s; }
.contactrow__value a:hover { color: var(--theme); }
.contactcard--ink .contactrow__value a:hover { color: var(--peach); }

/* Organiser and collaborators: each label sits above its own logos, and the
   two groups stand next to each other with nothing drawn between them. As
   halves of a two-column grid they were pushed to opposite ends of the page
   and read as unrelated blocks; a flex row keeps them together and lets the
   gap alone do the separating. */
.orgline {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(1.3rem, 3.4vw, 3rem);
}
.orgline__block { display: grid; gap: .7rem; justify-items: start; }
/* The organiser mark is taller than the partner marks. Aligning the blocks on
   the logos left the two labels at different heights; the labels line up now
   and the logos are centred inside one common band instead. */
.orgline__block .partners { min-height: 78px; }
/* The organiser mark is fixed at 78px; partner logos size themselves, so
   this must not out-specify the .partner__logo rules further down. */
.orgline img:not(.partner__logo) { height: 78px; width: auto; }

/* ==========================================================================
   HOME 2026-08 — the blocks added with the client's corrections
   ========================================================================== */

/* The four words that cycle above the hero eyebrow. The list repeats its
   first word at the end, so the reset at 100% lands on an identical frame
   and the loop never visibly snaps back. */
.kicker {
  display: block;
  height: 1.25em;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: min(var(--hero-h2), 4.2svh);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--theme);
  margin-top: min(clamp(.5rem, 1.5vw, 1.5rem), 2svh);
  margin-bottom: min(.55rem, 1svh);
}
.kicker__slot { display: block; animation: kicker 9s infinite; }
/* nowrap: each phrase is one line by definition — the slot is a fixed 1.25em
   box with overflow hidden, so a phrase allowed to wrap would have its second
   line silently cut in half rather than simply running long. */
.kicker__slot b { display: block; height: 1.25em; line-height: 1.25em; font-weight: inherit; white-space: nowrap; }
/* Below ~360px the clamp floor on --hero-h2 (1.65rem) is wider than the screen
   for the longest phrase — "MULTIDISCIPLINARNO" wanted 300px in a 284px
   column. Here the size follows the viewport instead of the floor. */
@media (max-width: 374px) {
  .kicker { font-size: min(var(--hero-h2), 6.9vw); }
}
/* Three-phrase variant (Advent). The phrases are whole sentences rather than
   single words, so they run in sentence case at a smaller step — at the home
   page's size the longest one overflows .kicker, which is a fixed 1.25em box
   with overflow: hidden, and would simply be clipped. */
.kicker--3 { font-size: min(calc(var(--hero-h2) * .52), 2.15svh); letter-spacing: .04em; }
.kicker--3 .kicker__slot { animation-name: kicker-3; }
@keyframes kicker-3 {
  0%, 31%    { transform: translateY(0); }
  33%, 64%   { transform: translateY(-1.25em); }
  66%, 97%   { transform: translateY(-2.5em); }
  100%       { transform: translateY(-3.75em); }
}

/* each word holds for its full quarter and the change itself takes ~2% of the
   cycle (~180ms at 9s), so the swap reads as a snap rather than a drift */
@keyframes kicker {
  0%, 23%    { transform: translateY(0); }
  25%, 48%   { transform: translateY(-1.25em); }
  50%, 73%   { transform: translateY(-2.5em); }
  75%, 98%   { transform: translateY(-3.75em); }
  100%       { transform: translateY(-5em); }
}

/* Disciplines. A wrapping row of chips rather than a list: the point is the
   breadth of the set, which reads faster as a block than as 16 bullets. */
.chips { display: flex; flex-wrap: wrap; gap: clamp(.4rem, .8vw, .6rem); }
/* Popis publike: prije su bile kapsule, ali kapsula je oznaka (disciplina,
   tema) — ovo su cijele recenice i citaju se kao popis, ne kao oznake.
   CSS stupci umjesto grida: 5 stavki se sam rasporedi 3+2 i svaki se
   stupac cita odozgo prema dolje, a ne lijevo-desno. */
.audience {
  columns: 2;
  column-gap: clamp(1.6rem, 4.5vw, 4.5rem);
  /* NE "margin: 0": to gazi .shead + * { margin-top } i popis se zalijepi
     uz naslov. Resetira se samo ono sto <ul> stvarno nosi. */
  margin-block-end: 0; margin-inline: 0;
  padding: 0; list-style: none;
}
.audience__item {
  break-inside: avoid;
  position: relative;
  padding: clamp(.75rem, 1.2vw, 1rem) 0;
  border-bottom: 1px solid var(--line-soft);
  /* Bio je --t-lead (21.2px) — veci od .body-lg (18.2px) kojim je pisan
     tekst teme odmah iznad. Popis je tekuci tekst, ne vodeca recenica. */
  font-size: var(--t-body);
  line-height: 1.45;
  /* --ink-2, kao .body-lg, .lead i sve ostale recenice na stranici.
     Na --ink je popis bio tamniji od teksta oko sebe. */
  color: var(--ink-2);
  transition: color .35s var(--ease);
}
/* The row answers the pointer by redrawing its own hairline in the theme
   colour, left to right, and colouring its text. Nothing moves: these sit in
   CSS columns, and anything that changed a row's width or height would make
   the columns rebalance under the cursor. */
.audience__item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--theme);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--ease);
}
.audience__item:hover { color: var(--theme); }
.audience__item:hover::after { transform: scaleX(1); }
.audience[data-reveal]:not(.is-in) .audience__item { opacity: 0; }
.audience.is-in .audience__item {
  animation: rise-in .6s var(--ease) backwards;
  animation-delay: var(--delay, 0ms);
}
@media (max-width: 720px) { .audience { columns: 1; } }
/* the line that closes the audience list — a statement, not another entry, so
   it sits clear of the columns and carries the theme colour */
/* Set at the h2 step — the same size as the heading that opens the section, so
   it closes it at equal weight rather than trailing off as a caption. Display
   type, so the leading comes down to match the headings too. */
.audience__close {
  margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0;
  font-family: var(--font-display); font-weight: 700;
  /* Bio je 45.6px — tocno koliko i naslov sekcije iznad, pa se zakljucna
     recenica citala kao drugi naslov na dnu. Na --t-lead ostaje naglasena,
     ali ispod naslova. (.tagline na biblioteci ostaje 45.6: ondje je sama
     u svojoj sekciji i nema s cim se natjecati.) */
  font-size: var(--t-body);
  line-height: 1.45; letter-spacing: 0; text-wrap: balance;
  /* bila je u boji teme, dok je popis iznad nje bio tamni slog —
     razlikuje se debljinom i pismom, ne bojom */
  color: var(--ink-2); max-width: 28ch;
}

/* The closing line with its pictures alongside. */
/* Zaključna rečenica sekcije. Red je bio mreža od dva stupca, a u njemu je
   ostalo jedno jedino dijete: rečenica se lomila u tri kratka retka u lijevoj
   polovici dok je desna polovica zjapila prazna — izgledala je kao ostatak
   koji je netko zaboravio maknuti, a ne kao zaključak. Sad stoji sredinjena
   pod tankom crtom, preko cijele širine, u koraku iznad tijela teksta. */
.closerow {
  display: grid;
  justify-items: center;
  margin-top: clamp(1.8rem, 3.2vw, 2.8rem);
  padding-top: clamp(1.4rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--line-soft);
}
.closerow > .audience__close {
  margin-top: 0;
  max-width: 46ch;
  text-align: center;
  font-size: calc(var(--t-body) * 1.12);
  color: var(--theme);
}

/* Stacked frames, one visible at a time. They are absolutely positioned so the
   box keeps one height whatever is showing, and the box carries the aspect
   ratio rather than the images — otherwise the first frame would set the
   height and any picture cropped differently would jump. */
.slideshow {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--mist-2);
}
.slideshow__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  /* At a 3.5s cadence the crossfade can take its time — at 1s it had to be
     short or the frames were dissolving more often than they were still. */
  transition: opacity .7s var(--ease-soft);
}
.slideshow__img.is-on { opacity: 1; }
/* Full width of the panel it closes. At 3:2 that would be over 700px tall and
   swamp the section, so it runs as a band — and 16:9 takes its slice off the
   top and bottom of a 3:2 frame, where these pictures carry ceiling and floor,
   rather than off the sides, where the people are. */
.slideshow--band {
  aspect-ratio: 16 / 9;
  margin-top: clamp(1.2rem, 2.2vw, 2rem);
}

@media (max-width: 900px) {
  .closerow { grid-template-columns: minmax(0, 1fr); }
}
/* Anyone who has asked for less movement gets the first frame and no cycling —
   the JS also stops advancing, this is the belt to that braces. */
@media (prefers-reduced-motion: reduce) {
  .slideshow__img { transition: none; }
}

.chip {
  padding: .52rem .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-pill);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-2);
  transition: border-color .3s var(--ease), color .3s var(--ease),
              background .3s var(--ease), transform .3s var(--ease);
}
.chip:hover {
  border-color: var(--theme);
  background: var(--theme-soft);
  color: var(--theme);
  transform: translateY(-2px);
}
.section--mist .chip { background: var(--paper); }
/* Scoped to .areas so Advent's audience chips keep their own styling. */
/* The border was a hard-coded indigo, which read as the site's default purple
   on a page themed otherwise. It now follows whatever --theme the page sets;
   the rgba line stays as the fallback for browsers without color-mix. */
.areas .chip {
  color: var(--theme);
  border-color: rgba(62, 51, 137, .3);
  border-color: color-mix(in srgb, var(--theme) 32%, transparent);
}
.areas .chip:hover {
  color: var(--theme); border-color: var(--theme);
  background: var(--theme-soft);
}
/* The additional discipline sits grey against the fourteen blue ones. A
   genuinely neutral #8A8A96 — --muted is violet-tinted and at chip size reads
   as just another blue capsule. */
.areas .chip--extra { color: #8A8A96; border-color: rgba(23, 19, 58, .14); }
.areas .chip--extra:hover {
  color: #5F5F6B; border-color: rgba(23, 19, 58, .26); background: var(--paper);
}

/* The disciplines now live inside the "NiPP Vam donosi" section rather than
   carrying a heading of their own, so the pill needs the vertical separation
   the removed h2 used to provide. */
/* grid-template-columns: minmax(0, 1fr) — bez toga trak poprima min-content
   djece, pa je popis disciplina u cetiri stupca (nakon povecanja sloga)
   razvukao redak na 1471px u spremniku od 1348 i gurnuo stranicu u
   vodoravni scroll. */
.areas { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: clamp(.9rem, 1.6vw, 1.3rem); margin-top: clamp(1.8rem, 3.4vw, 3rem); }
/* justify-items: start would otherwise shrink a list to its longest line */
/* .discipline je <div>, ne <ul>, pa ga staro pravilo nije hvatalo i blok se
   stezao na svoj najdulji redak — zavrsavao je na 1029 od 1348px. */
.areas > ul, .areas > .discipline { width: 100%; }

/* The claim that opens the disciplines, with the rotating word under it. It is
   set at the running-text size and carried by weight, not by size — the h2
   above it is still the section's heading. */
/* Bio je --t-lead (21.2px) i cijeli u <strong> — bold recenica te velicine
   citala se kao jos jedan naslov iznad rotatora. */
.areas__claim { margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
/* Same rotator as the hero, stepped down: there it is the page's headline,
   here it sits under a sentence that has already been read. */
/* Bio je 32px, pa 21.2px — oboje spike usred bloka od 18.2px. Rotator se
   razlikuje verzalom, bojom teme i pismom naslova, ne velicinom. Sekcija
   sada ima samo dvije stepenice: 45.6 naslov i 18.2 sve ostalo. */
.kicker--areas {
  font-size: var(--t-body);
  /* ista boja kao sav tekst u sekciji — rotator se razlikuje verzalom i
     pismom naslova, ne bojom */
  color: var(--ink-2);
  letter-spacing: .03em;
  margin-top: .1rem; margin-bottom: clamp(.4rem, 1vw, .8rem);
}
.areas > .kicker { justify-self: stretch; }

/* "NiPP Vam donosi" - three icon rows. Each of the three says a different
   kind of thing (knowledge, delivery, application), so the glyph names the
   kind before the line is read; the same rule as the four .infocard facts.
   The numbered .numlist stays spoken for by the five Ciljevi. */
.bullets { display: grid; gap: clamp(.9rem, 1.6vw, 1.3rem); }
.bullets li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(.9rem, 1.5vw, 1.15rem);
  align-items: center;
  /* Isto kao popis disciplina i recenica ispod njih, u istoj sekciji.
     Na --t-lead (21.2px) bile su vece od svega oko sebe. */
  font-size: var(--t-body);
  font-weight: 400; letter-spacing: 0; line-height: 1.5;
  color: var(--ink-2);
}
/* same square as .infocard__ico so the two icon languages read as one */
.bullets__ico {
  display: grid; place-items: center;
  width: clamp(38px, 3.2vw, 44px); aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--theme-soft);
  color: var(--theme);
}
.bullets__ico svg { width: 55%; height: 55%; }

/* Two photographs side by side, each keeping its own caption. */
.mediapair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.6vw, 2.6rem);
  margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
  /* start, ne stretch: s naizmjenicnim pomakom jedan okvir vuce red uvis,
     a drugi se rastegne za njim — slika zadrzi omjer i visak ispadne kao
     bijela traka ispod nje (izmjereno 24px). */
  align-items: start;
}
/* Dva jednaka pravokutnika su mreza, ne kompozicija: prvi otisak je veci,
   drugi manji i spusten. Kod tri (advent) ostaju jednaki — ondje ritam
   nosi pomak srednjeg. */
/* Jedna slika u paru: bez ovoga ostaje u lijevom stupcu, a desna polovica
   sekcije zjapi prazna. Dvije klase, ne jedna: pravilo ispod ima :not() i time
   veću težinu, pa ga sam .mediapair--jedna ne bi nadjačao. */
.mediapair.mediapair--jedna { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {
  .mediapair:not(.mediapair--3up) { grid-template-columns: minmax(0, 1.28fr) minmax(0, .82fr); }
  .mediapair.mediapair--jedna { grid-template-columns: minmax(0, 1fr); }
}
/* --- Fotografije kao otisci na podlozi -----------------------------------
   Prethodna verzija je imala crtu po unutarnjem rubu paspartua s fiksnim
   radijusom od 11px, dok je razmak paspartua responzivan (do 15px). Dva
   zaobljena ruba su koncentricna samo ako je unutarnji radijus jednak
   vanjskom minus razmak — inace crta sijece uglove. Umjesto da se taj
   racun lovi na svakoj sirini, crta je maknuta: slika ima ravne uglove u
   mekano zaobljenom paspartuu, kako i izgleda uokviren otisak.
   Karakter sada nosi ploha u boji skupa, pomaknuta ispod otiska — kao
   drugi otisak ispod prvog. Na adventu je burgundna, na praktikumu plava,
   na nurse ljubicasta.
   ------------------------------------------------------------------------ */
.mediapair__item {
  display: grid; gap: .7rem;
  position: relative;
  background: var(--paper);
  padding: clamp(.55rem, 1vw, .85rem);
  border-radius: var(--r-sm);
  box-shadow:
    0 0 0 1px var(--line-soft),
    clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) 0 -1px color-mix(in srgb, var(--theme) 30%, transparent);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.mediapair--3x2 .mediapair__item:nth-child(even) { margin-top: clamp(.8rem, 2.4vw, 2.2rem); }
.mediapair__item:hover {
  transform: translate(4px, 4px);
  box-shadow:
    0 0 0 1px var(--line),
    clamp(5px, .6vw, 9px) clamp(5px, .6vw, 9px) 0 -1px color-mix(in srgb, var(--theme) 42%, transparent);
}
@media (prefers-reduced-motion: reduce) { .mediapair__item, .mediapair__item:hover { transition: none; transform: none; } }
.mediapair__item img,
.mediapair__item picture {
  width: 100%;
  /* Ravni uglovi. Razmak paspartua je veci od vanjskog radijusa, pa je
     koncentricni unutarnji radijus nula — svaka druga vrijednost sijece
     zaobljenje paspartua, sto je i bio kvar na prethodnoj verziji.
     Bilo je --r-lg (26px) i pravilo je stajalo NIZE od mojeg, pa je
     pobjedivalo po redoslijedu. */
  border-radius: 0;
  overflow: hidden;
  display: block;
}
.mediapair__item img { aspect-ratio: 4 / 3; object-fit: cover; }
/* For a pair shot at 3:2. The component crops to 4:3 by default, which on a
   wide group photograph takes a slice off each end — and makes the block
   taller than it needs to be. At the photographs' own ratio nothing is cut
   and the pair sits lower on the page. */
.mediapair--3x2 .mediapair__item img { aspect-ratio: 3 / 2; }
/* tri fotografije u redu (advent); ispod 980px pada na dvije, pa na jednu */
.mediapair--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .mediapair--3up { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mediapair__item figcaption {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Secondary figures under the three headline counters. They are facts, not
   things that count up, so they get their own quieter scale. */
.statmini-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(2rem, 3.6vw, 3.2rem);
  padding-top: clamp(1.4rem, 2.4vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.statmini { display: grid; gap: .35rem; align-content: start; }
.statmini__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1; letter-spacing: 0;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.statmini__label {
  font-size: .82rem; line-height: 1.45;
  color: rgba(255, 255, 255, .74);
}

@media (max-width: 900px) {
  /* Bilo je 1fr: svaka fotografija preko cijele širine zaslona. U dva stupca
     se čitaju kao par i stranica prestaje biti beskrajno duga. Pravilo stoji
     ovdje, a ne gore uz ostala mobilna, jer ga je ovo mjesto gazilo. */
  .mediapair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.6rem, 2.4vw, 1.1rem); }
  .mediapair--3x2 .mediapair__item:nth-child(even) { margin-top: 0; }
  .mediapair.mediapair--jedna { grid-template-columns: minmax(0, 1fr); }
  /* Slika koja nosi potpis mora uzeti oba stupca: u stupcu od 165px imena
     ravnatelja lomila su se u „ravnatelj Doma / zdravlja Splitsko- /
     dalmatinske županije" — tri reda za jednu funkciju. */
  .mediapair__item:has(figcaption) { grid-column: 1 / -1; }
  .mediapair__item:has(figcaption) img { aspect-ratio: 16 / 9; }
  .statmini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .kicker__slot { animation: none; }
  .chip:hover { transform: none; }
}

/* A single embedded clip. preload="none" so 1.8 MB is fetched only if the
   visitor actually presses play; the poster carries the section until then. */
.videobox { display: grid; gap: .7rem; margin-top: clamp(1rem, 1.8vw, 1.4rem); }
.videobox video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background: var(--ink);
  display: block;
}
.videobox figcaption { font-size: .84rem; line-height: 1.5; color: var(--muted); }

/* The invitation. A solid panel in the meeting's own colour with the clip from
   last year's domjenak bleeding to its left edge — the one warm, social moment
   on an otherwise clinical page. The media has no gutter: the gradient does the
   joining, so the clip dissolves into the burgundy instead of meeting it at a
   seam. */
.invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--theme);
  color: #fff;
}
.invite__media { position: relative; min-height: clamp(280px, 30vw, 440px); }
.invite__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* gradients interpolate in premultiplied alpha, so transparent -> var(--theme)
   needs no explicit rgba and stays theme-agnostic */
/* The clip dissolves into whatever the block is filled with, so the fade target
   is a variable rather than --theme: change the fill and the gradient follows,
   instead of fading to a colour the block no longer has. */
.invite { --invite-surface: var(--theme); }
.invite__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 44%, var(--invite-surface) 99%),
    linear-gradient(90deg, rgba(138, 28, 52, .3), rgba(138, 28, 52, .3));
}
.invite__ctl {
  position: absolute; z-index: 2;
  right: clamp(.8rem, 1.6vw, 1.2rem); bottom: clamp(.8rem, 1.6vw, 1.2rem);
  display: flex; gap: .5rem;
}
.vbtn {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(23, 19, 58, .5); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .3s var(--ease-soft);
}
.vbtn:hover { background: rgba(23, 19, 58, .78); }
.vbtn svg { width: 17px; height: 17px; }
/* each button carries both icons and swaps them by state class */
.vbtn__play, .vbtn__sound { display: none; }
.invite__media.is-paused .vbtn__pause { display: none; }
.invite__media.is-paused .vbtn__play { display: block; }
.invite__media.is-on .vbtn__muted { display: none; }
.invite__media.is-on .vbtn__sound { display: block; }

.invite__body {
  display: grid; justify-items: start; align-content: center;
  gap: clamp(.9rem, 1.6vw, 1.3rem);
  padding: clamp(1.8rem, 3.4vw, 3rem);
}
.invite .eyebrow--pill { color: #fff; }
.invite h2 { color: #fff; }
.invite .body-lg { color: rgba(255, 255, 255, .82); }

/* The domjenak block filled a whole panel with the deep red at full strength,
   which pulled the eye off everything around it. It becomes one of the page's
   own tinted surfaces instead: the red stays, at a breath of its strength, and
   the text goes back to ink.
   One step darker than the .panel it sits on (--mist-2), mixed from that same
   token towards the page's red rather than picked as a new literal — so it is
   the next shade along the ramp, not a colour of its own. --invite-surface
   carries the same value into the video's fade. */
.theme-advent .invite {
  --invite-surface: #EBDEDE;
  --invite-surface: color-mix(in srgb, var(--mist-2) 94%, var(--theme));
  background: var(--invite-surface);
  color: var(--ink);
  border: 1px solid var(--line-soft);
}
/* Two things made the join visible once the block went light. The flat 30%
   burgundy wash darkened the whole clip, so it met a pale surface at full
   contrast — it belongs to the burgundy version and is dropped here. And a
   single linear ramp spends most of its length nearly transparent and then
   arrives all at once; the extra stops spread that arrival out, and full
   opacity is reached at 88% rather than 99% so the clip has run out before it
   reaches the edge instead of stopping at it. */
.theme-advent .invite__media::after {
  background: linear-gradient(90deg,
    transparent 14%,
    color-mix(in srgb, var(--invite-surface) 14%, transparent) 36%,
    color-mix(in srgb, var(--invite-surface) 42%, transparent) 55%,
    color-mix(in srgb, var(--invite-surface) 72%, transparent) 71%,
    color-mix(in srgb, var(--invite-surface) 93%, transparent) 82%,
    var(--invite-surface) 88%);
}
@media (max-width: 900px) {
  .theme-advent .invite__media::after {
    background: linear-gradient(180deg,
      transparent 40%,
      color-mix(in srgb, var(--invite-surface) 14%, transparent) 56%,
      color-mix(in srgb, var(--invite-surface) 42%, transparent) 70%,
      color-mix(in srgb, var(--invite-surface) 72%, transparent) 82%,
      color-mix(in srgb, var(--invite-surface) 93%, transparent) 91%,
      var(--invite-surface) 97%);
  }
}
.theme-advent .invite h2 { color: var(--theme); }
.theme-advent .invite .body-lg { color: var(--ink-2); }
.theme-advent .invite .eyebrow--pill { color: var(--theme); }

/* the three facts are what a guest actually needs, so they are solid white
   against the panel rather than ghosted outlines */
.invite__facts { display: flex; flex-wrap: wrap; gap: .5rem; }
.invite__fact {
  display: inline-flex; align-items: center;
  padding: .5em 1.15em;
  border-radius: 999px;
  background: #fff; color: var(--theme);
  font-family: var(--font-display);
  font-size: var(--t-sm); font-weight: 700;
  letter-spacing: 0;
}
.invite__note {
  margin: 0; max-width: 52ch;
  font-size: var(--t-sm); line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}
.invite .btn--soon { opacity: .55; }

@media (max-width: 900px) {
  .invite { grid-template-columns: 1fr; }
  .invite__media { min-height: 0; aspect-ratio: 16 / 10; }
  /* stacked, the clip dissolves downwards instead of sideways */
  .invite__media::after {
    background:
      linear-gradient(180deg, transparent 62%, var(--invite-surface) 99%),
      linear-gradient(90deg, rgba(138, 28, 52, .3), rgba(138, 28, 52, .3));
  }
}

/* Stand-in for a page whose programme is not confirmed yet. Deliberately
   calm and centred — it is a status, not a pitch. */
.soon {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(.8rem, 1.5vw, 1.2rem);
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.2rem, 3vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--mist);
}
.soon .flower.soon__mark { width: clamp(46px, 6vw, 64px); height: auto; opacity: .5; }
.soon p { max-width: 56ch; }
.soon__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: .3rem; }

/* ==========================================================================
   SPONSORS
   ========================================================================== */
.sponsors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.sponsor {
  display: grid; place-items: center;
  aspect-ratio: 5 / 2;
  background: var(--paper);
  padding: 1.1rem;
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #8F8AAD;
  text-align: center; line-height: 1.4;
  transition: color .4s var(--ease-soft), background-color .4s var(--ease-soft);
}
.sponsor:hover { color: var(--theme); background: var(--mist); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--brand-deep); color: #fff;
  /* puna visina ekrana kao zavrsna ploha; na uskim ekranima sadrzaj je
     ionako visi pa min-height ne veze */
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
.footer a { color: rgba(255, 255, 255, .68); transition: color .3s var(--ease-soft); }
.footer .lead { color: rgba(255, 255, 255, .82); }
/* podnozje nije .section--ink, pa su oznake ondje padale na --muted */
.footer .label { color: rgba(255, 255, 255, .62); }
.footer .body-lg, .footer p, .footer .muted { color: rgba(255, 255, 255, .7); }
.footer a:hover { color: #fff; }

.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.2rem, 3.4vw, 3.4rem);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  align-items: start;
}
/* bez kape od 48ch: stupac je 668px, a newsletter je stajao na 416 */
.footer__nl { display: grid; gap: clamp(.9rem, 1.6vw, 1.3rem); }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(max-content, 1fr)); gap: clamp(1.4rem, 2.6vw, 2.4rem); }
.footer__col { display: grid; gap: .55rem; align-content: start; }
/* .45 je davalo 4.0:1 na tamnoj plohi */
.footer__col h4 { font-size: var(--t-label); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.footer__col a { font-size: var(--t-sm); white-space: nowrap; }
.footer__mid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem; align-items: center;
  padding-block: clamp(1.4rem, 2.2vw, 2.1rem);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer__logos { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem); flex-wrap: wrap; }
.footer__logos img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .8; }
.footer__logos .parenthood { height: 52px; }
/* Registration details. These moved out of the contact page: they are an
   imprint the company has to publish, not something a visitor goes looking
   for, so they sit with the copyright line and are set a step below it. */
/* .footer scope on purpose: the blanket `.footer p` rule below sets a colour
   at a higher specificity, so a bare .footer__imprint would lose to it. */
.footer .footer__imprint {
  margin: 0;
  padding-top: clamp(1.1rem, 1.8vw, 1.5rem);
  font-size: var(--t-sm); line-height: 1.65;
  /* bilo .38 — 3.0:1 na burgundnoj plohi adventa */
  color: rgba(255, 255, 255, .62);
}
.footer__bot {
  display: flex; flex-wrap: wrap; gap: 1rem clamp(1.2rem, 2.4vw, 2rem);
  align-items: center; justify-content: space-between;
  padding-block: 1.25rem;
  font-size: var(--t-sm); color: rgba(255, 255, 255, .62);
}
/* the imprint already opened the block, so the copyright row only needs the
   gap below it */
.footer__imprint + .footer__bot { padding-top: .9rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1rem clamp(1rem, 2vw, 1.7rem); }
.footer__legal button { background: none; border: 0; padding: 0; cursor: pointer; color: rgba(255, 255, 255, .68); font-size: .84rem; transition: color .3s; }
.footer__legal button:hover { color: #fff; }

/* ==========================================================================
   COOKIE CONSENT
   ========================================================================== */
.cookie {
  position: fixed; z-index: 120;
  left: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px);
  max-width: 640px;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: 0 34px 80px -34px rgba(23, 19, 58, .45);
  display: grid; gap: 1.1rem;
  transform: translateY(calc(100% + 40px));
  transition: transform .7s var(--ease);
}
.cookie.is-open { transform: translateY(0); }
/* the consent card would otherwise sit on top of the open menu and block the
   lower items — it slides out of the way and returns when the menu closes */
.is-menu-open .cookie.is-open { transform: translateY(calc(100% + 40px)); }
.cookie__text { font-size: var(--t-sm); color: var(--ink-2); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie__actions .btn { padding: .82em 1.5em; font-size: .84rem; }
.cookie__prefs { display: none; gap: .9rem; padding-top: .3rem; }
.cookie.is-prefs .cookie__prefs { display: grid; }
.cookie__pref { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 0; border-top: 1px solid var(--line-soft); }
.cookie__pref p { font-size: var(--t-sm); color: var(--muted); margin-top: .15rem; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { appearance: none; position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; border-radius: 999px; background: var(--mist-2); cursor: pointer; transition: background-color .35s var(--ease-soft); }
.switch input:checked { background: var(--brand); }
.switch input:disabled { opacity: .55; cursor: not-allowed; }
.switch::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  pointer-events: none;
  transition: transform .4s var(--ease);
  box-shadow: 0 2px 5px rgba(23, 19, 58, .25);
}
.switch:has(input:checked)::after { transform: translateX(20px); }

/* ==========================================================================
   MISC
   ========================================================================== */
.rule { height: 1px; background: var(--line-soft); border: 0; }
.note {
  padding: clamp(.85rem, 1.4vw, 1.2rem) clamp(1rem, 1.7vw, 1.5rem);
  border-left: 2.5px solid var(--theme);
  background: var(--mist);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-base); color: var(--ink-2);
}

/* ==========================================================================
   INFOPANEL — event facts + accreditation, built on the same idea as the
   home page's "NiPP u brojkama" block: one tinted panel that holds a grid of
   white cards. Two separate panels (a mist one for the facts, a tinted one
   for the points) read as two unrelated boxes; as one panel with a hairline
   between the groups the reader gets the whole "when / where / what it is
   worth" answer in a single glance.

   Colour: everything in the panel stays inside the page's own theme hue —
   tinted ground, white cards, theme figures and labels. Even the chambers
   that have not published their points step back within the same hue
   instead of turning neutral grey, so the section never mixes families.
   ========================================================================== */
.infopanel {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  padding: clamp(1.4rem, 2.8vw, 2.4rem);
  background: var(--mist-2);
  border-radius: var(--r-xl);
}

/* one rhythm for both rows of cards, so the facts and the chambers line up */
.infogrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;                 /* equal-height tiles across the row */
  gap: var(--gap-card);
}
.infocard {
  display: grid; align-content: start; gap: .3rem;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: clamp(1rem, 1.7vw, 1.5rem);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.infocard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -28px rgba(23, 19, 58, .45);
}

/* fact card: small key on top, the answer big underneath */
/* The icon says what kind of fact this is before the label is read — date,
   place, format, accreditation. Only these four get one: they are the four
   things every visitor looks for, and each has an unambiguous symbol. The
   reason cards keep their numbers, because there the sequence is the
   information and an invented icon per reason would be decoration. */
.infocard__ico {
  display: grid; place-items: center;
  width: clamp(38px, 3.2vw, 44px); aspect-ratio: 1;
  margin-bottom: clamp(.6rem, 1vw, .85rem);
  border-radius: var(--r-sm);
  background: var(--theme-soft);
  color: var(--theme);
}
.infocard__ico svg { width: 55%; height: 55%; }

.infocard__k {
  font-family: var(--font-display);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--theme); opacity: .75;
  margin-bottom: .15rem;
}
.infocard__v {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lead); line-height: 1.25;
  color: var(--ink);
}
.infocard__n { margin: 0; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
/* Prvi dio datuma bio je 0.74em, tezine 500 i u blazoj boji — „12.–14." je
   tako izgledao kao nadnaslov svojem vlastitom nastavku „ozujka 2027.".
   Cijeli datum sada ide u jednoj mjeri i jednoj tezini. Span ostaje u
   markupu, samo vise ne mijenja slog. */
.infocard__day { font-size: inherit; font-weight: inherit; color: inherit; }

/* chamber card: the institution names the card, the figure carries it */
.infocard__t {
  margin: 0 0 .2rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h4); line-height: 1.3;
  color: var(--ink);
}
/* A 2.5rem figure set inline with .95rem text has nothing holding it — it
   floated above its own sentence. The figure and its unit now sit together in
   a tinted badge, one fixed-width column, with the kind of participation
   beside it; the two rows line up on the same column edge. */
.infocard__rows { display: grid; gap: .5rem; margin: 0; }
.infocard__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: .8rem;
}
.infocard__badge {
  display: grid; justify-items: center; gap: .1rem;
  min-width: 4.4rem;
  padding: .45rem .55rem .5rem;
  background: var(--red-2-soft, var(--theme-soft));
  border-radius: var(--r-sm);
}
.infocard__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 2.3vw, 2rem); line-height: 1;
  letter-spacing: 0; color: var(--theme);
  font-variant-numeric: tabular-nums;
}
.infocard__unit {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--theme); opacity: .7;
}
.infocard__row dd { margin: 0; font-size: var(--t-sm); line-height: 1.35; color: var(--ink-2); }

/* pending: same hue, stepped back — not a different colour */
/* The chambers still waiting on their points take the lighter red rather than
   a faded version of the deep one. Fading was always a compromise — it either
   stayed loud or dropped under 3:1. At full strength #C0272D is clearly a
   different weight from #6E1216 and still 5.84:1 on white. */
.infocard--soon .infocard__t { color: var(--red-2, var(--theme)); }
.infocard__soon {
  margin: 0;
  font-size: .95rem; line-height: 1.45;
  color: var(--red-2, var(--theme));
}

/* The section names itself the way the home page's number panel does: pill,
   then title, then the cards. */
.infopanel__shead { gap: clamp(.7rem, 1.2vw, 1.1rem); }
.infopanel__shead .eyebrow--pill { color: var(--theme); }
.infopanel__shead h2 { margin: 0; }

/* accreditation group: pill label, then its own row of cards */
.infopanel__points {
  display: grid; gap: clamp(.9rem, 1.8vw, 1.3rem);
  padding-top: clamp(.9rem, 1.8vw, 1.4rem);
  border-top: 1px solid var(--theme-soft);
}

/* cards fade up the way the number cards on the home page do */
.infogrid:not(.is-in) .infocard { opacity: 0; }
.infogrid.is-in .infocard {
  animation: rise-in .7s var(--ease) backwards;
  animation-delay: var(--delay, 0ms);
}

/* a single card that has the row to itself — one pending note rather than a
   chamber per column */
.infocard--wide { grid-column: 1 / -1; }

/* The capsule holds the whole "what this meeting is" block, not just the
   facts: theme, who it is for, why come, where to stay. Each one keeps its
   own id so the nav anchors still land, and a hairline separates them — the
   panel is one object, so they should not read as separate cards inside it. */
/* The block's own gap is the card gap, so the video sits the same distance
   from the cards as the cards sit from each other. The larger step from the
   heading down to the content comes from .shead + *, not from this gap. */
.infopanel__block { display: grid; gap: var(--gap-card); align-content: start; }

/* ==========================================================================
   INTRO SPLIT — what the meeting is about, and the four facts beside it
   ==========================================================================
   The reference opens on a two-column band: the argument on the left, a
   stack of small fact cards on the right. That shape suits a meeting page
   better than one long capsule — the reader gets the subject and the
   practical answer in one look, without scrolling between them. */

/* "Simpozij je namijenjen" moved down out of the hero. It is a real answer —
   is this meeting for me — but it is a list, and a list in a hero competes
   with the headline instead of supporting it. Here it sits under the theme,
   where the reader is already deciding. */

/* the fact cards are the tinted element here, so they carry the ground the
   capsule used to provide */

/* ==========================================================================
   PANEL — a tinted ground around a set of cards
   ========================================================================== */
.panel {
  background: var(--mist-2);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.2vw, 3rem);
  display: grid; gap: var(--gap-card); align-content: start;
}
.panel > .shead { margin-bottom: clamp(.4rem, .8vw, .7rem); }
.panel .reason { background: var(--paper); }

@media (max-width: 900px) {

}
.infopanel__block > .invite { margin-top: 0; }
.infopanel__block + .infopanel__block,
.infogrid + .infopanel__block,
.infopanel__points + .infopanel__block {
  margin-top: clamp(1.4rem, 2.6vw, 2.2rem);
  padding-top: clamp(1.4rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--theme-soft);
}
/* sections carried their own top margin from .section — inside the panel the
   panel's own rhythm does that job */
.infopanel__block > :first-child { margin-top: 0; }
.infopanel__block .shead { max-width: min(100%, 52rem); }

/* One heading size for every block inside the panel. "Informacije" is the
   section's own heading; the blocks under it are a step down and all equal —
   before this the theme statement sat at 33.6 px between two 42.7 px headings
   in the same panel, which reads as an accident rather than a level. */
.infopanel__block h2 { font-size: var(--t-h2b); line-height: 1.2; }

/* Running prose inside the panel steps down with it. The capsule's own notes
   are 15.2 px; a 20.2 px paragraph right under them made the description feel
   oversized rather than emphasised. */
.infopanel__block p:not(.infocard__v):not(.infocard__n):not(.form__note) { font-size: var(--t-base); }
.infopanel__block .lead { font-size: var(--t-body); }

/* Speakers grouped by discipline. The Praktikum roster runs to nineteen names
   across thirteen specialities and the site holds portraits for three of them,
   so the Advent marquee would have been a row of placeholders. The grouping is
   itself the information here: which discipline each expert speaks for. */
/* bulleted lists inside a disclosure body */
.faq-list { display: grid; gap: .45rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.faq-list li {
  position: relative;
  font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2);
}
/* The supplied Ban Tours mark carries a second line — "AGENCIJA ŠAMPIONA" —
   under the wordmark. Rather than re-encode the PNG and lose a generation of
   quality, the frame shows only the top 88 of its 208 rows: the wordmark and
   the rider, nothing below. */
.banlogo {
  display: block; overflow: hidden;
  width: clamp(104px, 11vw, 146px);
  aspect-ratio: 374 / 88;
}
.banlogo img { display: block; width: 100%; height: auto; }

/* Every title in the library is published by Medicinska naklada, so the whole
   card is the link rather than a "više" tacked under the description — the
   cover is the thing a reader reaches for. */
.book__link {
  display: grid; gap: inherit;
  /* Without this the link's rows stretch to fill the tallest card in the row,
     and the space lands between the cover and the title — so every title in a
     row started at a different height. Anything set side by side has to line
     up: covers on one line, titles on the next. */
  align-content: start;
  color: inherit;
  border-radius: var(--r-md);
  transition: color .35s var(--ease-soft);
}
.book__link:hover .book__title { color: var(--theme); }
.book__link:focus-visible { outline: 2px solid var(--theme); outline-offset: 6px; }
/* the arrow used to wrap onto its own line under a long title; as a flex item
   it stays on the first line, beside the text block */
.book__link .book__title { display: flex; align-items: baseline; gap: .4em; }
.book__go {
  flex: none;
  align-self: flex-start; margin-top: .25em;
  opacity: .45;
  transition: opacity .3s var(--ease-soft), transform .35s var(--ease);
}
.book__link:hover .book__go { opacity: 1; transform: translate(2px, -2px); }

@media (max-width: 900px) {
  /* one column: equal-height tiles would leave the short cards half empty */
  .infogrid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: .7rem; }
  /* …osim mreze od cetiri kartice: ondje su podaci kratki pa dvije stanu
     jedna uz drugu, vidi pravilo za .infogrid--4 nize. */
  .infogrid--4 { gap: .7rem; }
}

/* ---- reasons to attend ----
   Auto-fit columns gave a different card count at every width — five cards
   landed as 4+1 or 3+2 depending on the window, and the row never resolved.
   A fixed three-column grid makes the six cards read as two clean rows, which
   is the whole point of the block: it should be countable at a glance.

   The number is a pill in the card's top-right corner rather than a line of
   text above the title. It reads as a tag on the card instead of competing
   with the heading, and it leaves the title as the first thing the eye lands
   on. Equal row heights keep the card without a description (06) the same
   shape as the rest instead of a short box at the end of the row. */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--gap-card);
  /* the supporting paragraph used to hold this space open; with the heading
     alone the cards crowded it at 22px. Same head-to-grid step the home
     page's number panel uses, so the two blocks keep one rhythm. */
  margin-top: clamp(1.5rem, 2.6vw, 2.4rem);
}
.reason {
  display: grid; gap: .45rem; align-content: start;
  /* text came down 2px across the site and left these cards looking mostly
     empty, so the padding comes down with it */
  padding: clamp(.95rem, 1.5vw, 1.3rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: border-color .45s var(--ease-soft), transform .5s var(--ease);
}
.reason:hover { border-color: var(--theme); transform: translateY(-3px); }
.reason__n {
  justify-self: end;
  display: inline-flex; align-items: center;
  margin-bottom: .15rem;
  padding: .34em .8em;
  border: 1px solid rgba(62, 51, 137, .28);
  border-color: color-mix(in srgb, var(--theme) 30%, transparent);
  border-radius: 999px;
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; line-height: 1;
  color: var(--theme);
  font-variant-numeric: tabular-nums;
}
/* Icon above the reason's title, in the same rounded square as .infocard__ico
   so the page keeps one icon language. Only the short, single-idea reasons
   carry one — where a reason is a whole sentence, a glyph would be decoration
   rather than a second way to read it. */
.reason__ico {
  display: grid; place-items: center;
  width: clamp(34px, 2.8vw, 40px); aspect-ratio: 1;
  margin-bottom: .15rem;
  border-radius: var(--r-sm);
  background: var(--theme-soft);
  color: var(--theme);
}
.reason__ico svg { width: 56%; height: 56%; }
/* Icon beside the title rather than above it. Where a reason is a whole
   sentence the card is already three or four lines tall, and stacking the icon
   on top of that only made the row taller — set in the first line's own space
   it costs no height at all. The title loses the icon's width, so the step and
   the leading come down a touch to win the line back. */
.reason--row {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .65rem; align-items: start;
}
/* The same tinted square as every other icon on the site, one step down in
   size because here it shares the line with the title rather than sitting
   above it. The row heights are free to differ (.reasons--auto), so the width
   it takes from the title costs a line at most, not a taller grid. */
.reason--row > .reason__ico {
  grid-row: 1; grid-column: 1; margin-bottom: 0;
  width: 30px; margin-top: -.05em;
}
.reason--row > .reason__t {
  grid-row: 1; grid-column: 2;
  /* bez vlastite velicine: ista klasa je ispadala 17.2px na adventu i
     15.6px na praktikumu/nurse */
  line-height: 1.32;
}
.reason--row > .reason__d { grid-column: 1 / -1; }
.reason__t { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); letter-spacing: 0; line-height: 1.3; }
.reason__d { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }
/* .reason is a grid with a .5rem gap, which is right between the title and the
   text but turned a three-line list into three separate paragraphs. Cancelling
   the gap between consecutive lines leaves only the line-height, so they read
   as one block. */
.reason__d + .reason__d { margin-top: -.5rem; }
/* CTA ispod mreze razloga; isti ritam kao .biblioteka__cta na naslovnici */
/* margin-block, ne samo -top: .panel je grid s row-gapom pa bi gumb inace bio
   nalijepljen na blok ispod sebe */
.reasons__cta { display: flex; justify-content: center; margin-block: clamp(1.2rem, 2.4vw, 2rem); }

/* What the room rate does and does not cover — read straight after the table
   rather than hidden behind a disclosure, since it changes what the numbers
   above actually mean. */
.lodging__note {
  display: grid; gap: .3rem;
  margin-top: clamp(.8rem, 1.4vw, 1.15rem);
  font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2);
}
.lodging__note p { margin: 0; }

@media (max-width: 900px) {
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  /* one column: equal heights would leave the short cards mostly empty */
  .reasons { grid-template-columns: 1fr; grid-auto-rows: auto; }
}
.section--mist .reason { background: var(--paper); }

/* ---- partner logos ---- */
.partners { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); flex-wrap: wrap; }
.partner__logo { height: clamp(40px, 4.4vw, 58px); width: auto; }
/* Optical balance: a 3:1 wordmark set to the same height as a near-square
   mark reads far larger, so each logo is capped on its own long axis rather
   than sharing one height. */
.partner__logo--dzzi { height: clamp(46px, 5vw, 62px); }
.partner__logo--progressus { height: auto; width: clamp(108px, 11vw, 148px); }

.partner__slot {
  display: grid; place-items: center; text-align: center;
  min-width: 116px; padding: .7rem .9rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; color: var(--muted); line-height: 1.5;
}
.partner__slot small { font-weight: 400; letter-spacing: 0; font-size: .64rem; opacity: .8; }

/* Contact: the details and the form used to be two sections stacked one under
   the other, so a visitor had to scroll past every phone number to reach the
   box they came to type in. Side by side, both are visible at once and the
   choice between writing and calling is the reader's. */
/* Contact: the two people sit side by side across the top and the form runs
   underneath them. Side by side in a narrow column beside the form they were
   stacked one under the other and the whole left half read as a pile. */
.contactflow { display: grid; gap: clamp(2rem, 4vw, 3.4rem); }
.contactflow__people,
.contactflow__form { display: grid; gap: clamp(1.1rem, 2vw, 1.7rem); align-content: start; }
.contactflow__people .contactcard { padding: 0; background: none; }

/* The two people are columns of one grid, and each one hands its own two rows
   back to that grid — so the names sit on one line and the phone and mail rows
   start on the next, even though one of them carries an extra note. */
.contactflow .contactstack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
}
.contactflow .contactstack .contactperson {
  grid-template-rows: subgrid;
  grid-row: span 2;
}

/* ---- contacts: one vertical column, never side by side ---- */
.contactstack { display: grid; gap: clamp(1rem, 1.8vw, 1.6rem); }
.contactperson {
  display: grid; gap: clamp(.7rem, 1.2vw, 1rem);
  padding-top: clamp(.9rem, 1.6vw, 1.3rem);
  border-top: 1.5px solid var(--line);
}
.contactcard--ink .contactperson { border-top-color: rgba(255, 255, 255, .24); }
/* align-content:start or the head's own rows stretch to fill a shared track —
   the person with one line fewer gets the slack spread between role and name,
   and the two names come out on different lines. */
.contactperson__head { display: grid; gap: .25rem; align-content: start; }
.contactperson__role {
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--muted);
}
.contactcard--ink .contactperson__role { color: rgba(255, 255, 255, .58); }
.contactperson__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h3); letter-spacing: 0; line-height: 1.3;
}
.contactperson__note { font-size: var(--t-sm); color: var(--muted); margin-top: .2rem; }
.contactcard--ink .contactperson__note { color: rgba(255, 255, 255, .66); }
/* One row per channel, stacked, each led by a round icon: the glyph says
   phone or mail before the label is read, which is the whole point of the
   pattern. They used to sit as wrapping chips in a flex row, where a long
   address and a short phone number made ragged, uneven boxes. */
.contactperson__rows { display: grid; gap: .5rem; }
.contactperson__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: .85rem;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color .35s var(--ease-soft), background-color .35s var(--ease-soft);
}
.citem__ico {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--theme-soft);
  color: var(--theme);
}
.citem__ico svg { width: 17px; height: 17px; }
.citem__txt { display: grid; gap: .12rem; min-width: 0; }
.citem__v {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); letter-spacing: 0;
  overflow-wrap: anywhere;
}
.contactcard--ink .citem__ico { background: rgba(255, 255, 255, .12); color: #fff; }
.contactperson__item:hover { border-color: var(--theme); background: var(--theme-soft); }
.contactcard--ink .contactperson__item {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff;
}
.contactcard--ink .contactperson__item:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
.contactcard--ink .contactperson__item .contactrow__label { color: rgba(255, 255, 255, .55); }
.prose { max-width: 78ch; display: grid; gap: .8rem; }
.prose h2 { margin-top: clamp(1rem, 1.8vw, 1.6rem); }
.prose h3 { margin-top: clamp(.6rem, 1.2vw, 1rem); }
.prose ul { display: grid; gap: .4rem; }
.prose ul li { position: relative; color: var(--ink-2); }
.prose p { color: var(--ink-2); }
.prose a { color: var(--theme); text-decoration: underline; text-underline-offset: 2px; }

.tagline { font-family: var(--font-display); font-size: calc(clamp(1.8rem, 3.3vw, 2.85rem) + 1.333px); font-weight: 700; letter-spacing: 0; line-height: 1.2; }

/* ==========================================================================
   COVER STACK — the three featured books, cross-fading slowly
   ========================================================================== */
.coverstack {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 400px;
  margin-inline: auto;
  width: 100%;
}
.coverstack__slide {
  position: absolute; inset: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--brand);
  box-shadow: 0 34px 70px -38px rgba(23, 19, 58, .55);
  opacity: 0;
  transform: scale(.985);
  transition: opacity 1.6s var(--ease-soft), transform 2.2s var(--ease);
}
.coverstack__slide.is-active { opacity: 1; transform: scale(1); }
.coverstack__slide img { width: 100%; height: 100%; object-fit: cover; }
.coverstack__slide::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0));
}
/* the two cards resting behind the stack */
.coverstack::before, .coverstack::after {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--r-lg);
  background: var(--mist-2);
  z-index: -1;
}
.coverstack::before { transform: rotate(-4deg) translate(-3%, 2%); opacity: .8; }
.coverstack::after  { transform: rotate(3.5deg) translate(3%, 1.5%); opacity: .55; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3.5rem);
  background: rgba(23, 19, 58, .93);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .45s var(--ease-soft);
  cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; }
.lightbox img {
  max-width: 100%; max-height: 88vh;
  width: auto; height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .7);
  transform: scale(.97);
  transition: transform .55s var(--ease);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: #fff; font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  transition: background-color .3s var(--ease-soft);
}
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }
.gallery figure { cursor: zoom-in; }

/* hero subtitle — the second half of a two-part conference title */
.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.32;
  color: var(--theme);
  margin-top: -.35rem;
}

/* a split heading whose two columns line up on their centres */
.shead--mid { align-items: start; }

/* ==========================================================================
   SPECIJALIZANTI — the call for papers, as a readable sequence
   The content is long (categories, reasons, how to submit, how to write the
   abstract, scoring). Grouping it into numbered steps with one idea each
   keeps it scannable instead of a wall of prose.
   ========================================================================== */
.steps { display: grid; gap: clamp(.6rem, 1vw, .9rem); counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.7rem);
  padding: clamp(1.1rem, 1.9vw, 1.6rem) clamp(1.1rem, 2vw, 1.7rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.step__n {
  counter-increment: step;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--theme-soft);
  color: var(--theme);
  font-family: var(--font-display); font-weight: 700; font-size: .84rem;
  letter-spacing: 0;
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step__body { display: grid; gap: .55rem; }
.step__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.02rem, 1.35vw, 1.2rem); letter-spacing: 0; line-height: 1.3; }
.step__body p { font-size: .96rem; line-height: 1.6; color: var(--ink-2); }
.step__list { display: grid; gap: .4rem; margin-top: .15rem; }
.step__list li { position: relative; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.step__meta { font-size: .88rem; color: var(--muted); }

/* the two headline facts of the call, pulled out of the prose */
.callout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(.7rem, 1.2vw, 1rem);
}
.callout__item {
  display: grid; gap: .3rem;
  padding: clamp(1rem, 1.7vw, 1.4rem);
  border-radius: var(--r-lg);
  background: var(--theme-soft);
}
.callout__k { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.1vw, 1.7rem); letter-spacing: 0; color: var(--theme); line-height: 1.1; }
.callout__v { font-size: .92rem; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 620px) {
  .step { grid-template-columns: 1fr; gap: .7rem; }
}

/* ==========================================================================
   SLIDER — one continuous horizontal track
   The track holds the cards twice over and translates by exactly one set,
   so the loop closes on itself with no jump. Pure CSS: no script, and it
   stops for anyone who asked for reduced motion.
   ========================================================================== */
.slider {
  --slide-gap: clamp(10px, 1.1vw, 18px);
  position: relative;
  overflow: hidden;
  padding-block: 2px;
  margin-top: clamp(1.4rem, 2.3vw, 2.3rem);
}
.slider__track {
  display: flex;
  width: max-content;
  gap: var(--slide-gap);
  animation: slider-run var(--slide-duration, 60s) linear infinite;
  will-change: transform;
}
.slider__set { display: flex; gap: var(--slide-gap); }
.slider:hover .slider__track,
.slider:focus-within .slider__track { animation-play-state: paused; }

@keyframes slider-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (var(--slide-gap) / 2)), 0, 0); }
}

/* soft edges so cards enter and leave rather than being chopped off */
.slider::before, .slider::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 3;
  width: clamp(28px, 6vw, 110px);
  pointer-events: none;
}
.slider::before { left: 0; background: linear-gradient(90deg, var(--slider-edge, #fff), transparent); }
.slider::after  { right: 0; background: linear-gradient(270deg, var(--slider-edge, #fff), transparent); }
.section--mist .slider { --slider-edge: var(--mist); }
.section--ink .slider { --slider-edge: var(--brand-deep); }

/* Closing call to action on the home page. The question and the button sit on
   one line at desktop width so the eye lands on the button without scanning
   past a centred stack; below 760px they stack and the button goes full width,
   the same shape the hero button already takes there. */
.ctaband {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: clamp(1.4rem, 3vw, 3.2rem);
}
.ctaband__copy { display: grid; gap: clamp(.5rem, 1vw, .85rem); max-width: 46rem; }
.ctaband__copy h2 { margin: 0; }
.ctaband__copy .lead { margin: 0; }
.ctaband__btn { flex: 0 0 auto; }
@media (max-width: 760px) {
  .ctaband { display: grid; }
  .ctaband__btn { width: 100%; justify-content: center; }
}

.slide { flex: none; width: clamp(206px, 19vw, 280px); }
.slide__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--mist-2);
}
.slide__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
/* placeholder card: the mark is a hint, not the subject */
.slide__frame .flower { width: clamp(52px, 28%, 88px); height: auto; opacity: .2; }
.slide:hover .slide__frame img { transform: scale(1.05); }

/* the name plate that rides over the foot of a portrait */
.slide__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg,
    rgba(12, 9, 32, .95) 2%, rgba(12, 9, 32, .78) 22%, rgba(12, 9, 32, .34) 46%, rgba(12, 9, 32, 0) 70%);
}
.slide__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(.9rem, 1.5vw, 1.25rem);
  color: #fff;
}
.slide__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.92rem, 1.05vw, 1.05rem); line-height: 1.28; letter-spacing: 0;
}
.slide__role { font-size: .78rem; line-height: 1.38; color: rgba(255, 255, 255, .82); margin-top: .2rem; }
.slide__role + .slide__role { margin-top: .05rem; color: rgba(255, 255, 255, .68); }

/* The speakers used to sit in a half-bleed: a column of copy on the left,
   the track running off the right edge. Once that column was cut back to the
   single word "Predavači" the split stopped paying for itself — roughly half
   the section was empty, and the track, squeezed into the other half, showed
   about two faces with the first one's name permanently sliced by the left
   fade. It reads as a mistake rather than as motion.

   The heading now sits on the grid like every other section's and the track
   runs the full width beneath it, so it shows twice as many faces and cards
   enter and leave at the screen edges the way a marquee should. */
/* Šire nego prije: titula i ime sad dijele jedan nelomljiv redak, pa uža
   kartica tjera skriptu da ime spusti na jedva čitljivu mjeru. */
.slider--portrait .slide { width: clamp(330px, 31vw, 440px); }

/* Speaker card. The portrait used to fill the card with the name burnt over
   it through a dark gradient — the text had to fight whatever was behind it,
   and every card carried a heavy block of shadow. Here the photograph is a
   round portrait and the name sits as dark type on a calm ground, so the
   row reads as a list of people rather than a strip of posters. */
.spkcard {
  height: 100%;
  display: grid; align-content: start;
  gap: clamp(.8rem, 1.3vw, 1.05rem);
  padding: clamp(1.15rem, 1.8vw, 1.55rem);
  /* --mist sits 2% off white, which on a white section left the cards barely
     there; --mist-2 is the same tint the info panel uses and actually reads
     as a card */
  background: var(--mist-2);
  border-radius: var(--r-lg);
  transition: border-color .45s var(--ease-soft), transform .5s var(--ease),
              box-shadow .5s var(--ease);
}
.spkcard:hover {
  border-color: var(--theme);
  transform: translateY(-4px);
  box-shadow: 0 28px 54px -38px rgba(20, 16, 17, .45);
}
.spkcard__ph {
  position: relative; display: grid; place-items: center;
  width: clamp(76px, 6.4vw, 94px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: var(--theme-soft);
}
/* A speaker whose portrait has not arrived yet keeps a finished card: the
   circle prints their monogram, and a photograph covers it when one exists. */
.spkcard__ph[data-initials]::before {
  content: attr(data-initials);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .04em; line-height: 1;
  color: var(--theme);
}
.spkcard__ph img { position: absolute; inset: 0; }
.spkcard__ph img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  display: block;
  transition: transform 1.1s var(--ease);
}
.spkcard:hover .spkcard__ph img { transform: scale(1.06); }
.spkcard__text { display: grid; gap: .28rem; }
.spkcard__name {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h4); line-height: 1.3;
  color: var(--ink);
}
/* Titula i ime stoje u istom retku koji se nikad ne lomi. Redak zna biti
   dugačak — "izv. prof. prim. dr. sc. Orjena Žaja, dr. med." — pa mu skripta
   smanjuje slova dok ne stane u karticu, umjesto da ga prelomi i rastavi
   čovjeka na dva reda. */
/* Bez ova tri min-width/overflow pravila nelomljiv redak gura karticu preko
   zadane širine (min-width na flex i grid djeci je automatski sadržaj), pa
   kartice ispadnu različito široke, a skripta nema što stisnuti. */
.slider--portrait .slide { min-width: 0; }
.spkcard__text { min-width: 0; }
.spkcard__name { white-space: nowrap; overflow: hidden; }
.spkcard__title {
  font-weight: 500; font-size: .82em;
  color: var(--ink-2);
  margin-right: .32em;
}
.spkcard__role { margin: 0; font-size: var(--t-sm); line-height: 1.42; color: var(--ink-2); }
.spkcard__role + .spkcard__role { color: var(--muted); }

/* equal-height cards: the track is a flex row, so the cards must stretch */
.slider__set { align-items: stretch; }
.slider--portrait .slide { display: flex; }
.slider--portrait .slide > .spkcard { flex: 1; }

/* book covers keep their artwork clear — the caption sits under the card */
.slider--book .slide { width: clamp(172px, 15.6vw, 226px); }
.slider--book .slide__frame { box-shadow: 0 20px 44px -26px rgba(23, 19, 58, .55); }
.slider--book .slide__frame::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0));
}
.slide__meta { display: grid; gap: .15rem; padding-top: .7rem; }
.slide__title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: 0; line-height: 1.25; }
.slide__author { font-size: .84rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .slider { overflow-x: auto; scrollbar-width: thin; }
  .slider__track { animation: none; }
  .slider::before, .slider::after { display: none; }
}

/* ==========================================================================
   MOTION — scroll reveals
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(.96); }

/* line-by-line heading reveal */
.reveal-lines { display: grid; }
.reveal-lines .rl {
  display: block;
  overflow: hidden;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.reveal-lines .rl > span {
  display: block;
  transform: translateY(calc(105% + .2em));
  transition: transform 1.15s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal-lines.is-in .rl > span { transform: translateY(0); }

/* counting numbers land softly */
.stat__num[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-lines .rl > span { transform: none !important; }
  .drawer { transition: visibility .01ms !important; clip-path: none !important; }
  .drawer__group, .drawer__foot { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   RESPONSIVE — the mobile layout is designed, not shrunk
   ========================================================================== */
/* The four footer columns never wrap their labels, so they need a hard floor
   of width. Between this breakpoint and 1080 they were being squeezed into
   half of .footer__top and pushed a horizontal scrollbar onto the page. */
@media (max-width: 1260px) {
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .numbers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .speakers { grid-template-columns: repeat(2, 1fr); }
  .books { grid-template-columns: repeat(3, 1fr); }
  .sponsors { grid-template-columns: repeat(3, 1fr); }
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(4, minmax(max-content, 1fr)); }
}

@media (max-width: 900px) {
  .nav, .header__cta .btn--nav { display: none; }
  .burger { display: flex; }
  :root { --header-h: 74px; }

  .hero__inner { grid-template-columns: 1fr; min-height: auto; gap: 2.4rem; padding-block: 2.6rem 3.4rem; }
  .hero--compact .hero__inner { min-height: auto; }
  .hero__media { align-self: auto; min-height: 0; }
  /* Slika je sada ispod teksta: gradijent ide odozgo prema dolje, a sama
     fotografija ide od ruba do ruba. Negativna margina postojala je samo
     desno, pa je slika dodirivala desni rub zaslona a lijevo joj je ostajao
     bijeli pojas sirine containera (18px na 375, 31px na 900). */
  .hero__figure {
    position: static; aspect-ratio: 4 / 3; --maska-kut: 182deg;
    /* +1px preko ruba na obje strane: --gutter je clamp s vw-om pa daje
       necijele vrijednosti (26.112px na 768), sto ostavlja 0.2px zazora.
       Slika je object-fit: cover, taj piksel se nigdje ne vidi. */
    margin-left: calc(-1 * var(--gutter) - 1px);
    margin-right: calc(-1 * var(--gutter) - 1px);
  }
  .hero::before { display: none; }
  .hero__ghost { left: -30%; top: -8%; width: 90vw; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; gap: 1.6rem; }
  .split__media { min-height: 0 !important; }
  .split__media--card { aspect-ratio: 4 / 3; }
  .split__media--portrait, .split__media--tall { aspect-ratio: 4 / 5; }
  .split--flip .split__body { order: 2; }
  .shead--split { grid-template-columns: 1fr; align-items: start; }
  .facts { grid-template-columns: 1fr; gap: 1.2rem; }
  .stats { grid-template-columns: 1fr; gap: 2rem; }
  .stat__num { font-size: clamp(4rem, 22vw, 7rem); }
  .arccard { grid-template-columns: 1fr; }
  .arccard__media { min-height: 0; aspect-ratio: 16 / 10; }
  .arccard__media img { position: static; }
  .contactrows { grid-template-columns: 1fr; }
  .orgline { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure:nth-child(4n+1) { grid-column: span 2; aspect-ratio: 16 / 7; }
  .form__row { grid-template-columns: 1fr; }
  .footer__mid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --r-xl: 24px; --r-lg: 20px; --r-md: 15px; }
  .numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .speakers { grid-template-columns: 1fr; }
  .books { grid-template-columns: repeat(2, 1fr); }
  .sponsors { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
  .countdown__grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .cd { padding: .9rem .3rem .75rem; }
  .cd__num { font-size: clamp(1.5rem, 8vw, 2.2rem); }
  .arccard__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__actions { display: grid; }
  .hero__actions .btn { width: 100%; }
  .cookie { left: 10px; right: 10px; bottom: 10px; }
  .cookie__actions .btn { flex: 1 1 100%; }
  .gallery { grid-template-columns: 1fr; }
  .gallery figure, .gallery figure:nth-child(4n+1) { grid-column: span 1; aspect-ratio: 4 / 3; }
}

@media print {
  .header, .subnav, .drawer, .cookie, .footer__nl { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   Praktikum / Nurse 2027 revision — lodging, speakers, sponsors, registration.
   Appended deliberately: the site's 900px and 620px blocks sit EARLIER in this
   file, so anything defined up there would beat a component rule of equal
   specificity written above it. Each component below carries its own media
   query immediately after it.
   ========================================================================= */

/* Smještaj — the price table and the hotel photograph side by side. The
   reservation note travels with the photo rather than the table: it is the
   call to action, and under the image it gives the short right column enough
   body to balance the taller left one. */
.lodging {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
  margin-top: clamp(1.5rem, 2.6vw, 2.4rem);
}

.lodging__main,
.lodging__aside { display: grid; align-content: start; gap: clamp(1rem, 1.8vw, 1.4rem); min-width: 0; }

.lodging__figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--mist-2);
}

.lodging__figure img {
  width: 100%; display: block;
  aspect-ratio: 3 / 2; object-fit: cover; object-position: center 55%;
  transition: transform 1.2s var(--ease);
}

.lodging__figure:hover img { transform: scale(1.03); }

/* Smjestaj: slika prati cijelu visinu lijevog stupca — od naslova do
   kontakta — umjesto fiksnog 3/2 kadra koji je zavrsavao na pola teksta. */
.lodging--tall { align-items: stretch; }
.lodging--tall .lodging__aside { align-content: stretch; }
.lodging--tall .lodging__figure { height: 100%; }
.lodging--tall .lodging__figure img { height: 100%; aspect-ratio: auto; min-height: 320px; }
@media (max-width: 900px) {
  .lodging--tall .lodging__figure img { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
}

/* The hotel name sits on the picture rather than under it — a caption line
   below would repeat what the table's first column already says. */
.lodging__tag {
  position: absolute; left: clamp(.7rem, 1.2vw, 1rem); bottom: clamp(.7rem, 1.2vw, 1rem);
  padding: .42em .9em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--theme);
}

@media (max-width: 900px) {
  .lodging { grid-template-columns: 1fr; }
  .lodging__figure img { aspect-ratio: 16 / 9; }
}

/* Praktikum and Nurse run the same speaker track as Advent, so the hover and
   zoom rules live with .spkcard; only the lodging figure needs its own. */
@media (prefers-reduced-motion: reduce) {
  .lodging__figure img { transition: none; }
  .lodging__figure:hover img { transform: none; }
}

/* "Aktivno uključivanje u panele" was a note sitting under the grid. It is one
   of the things you get by taking part, so it belongs in the grid — as the
   last card, tinted and flagged Novo so the addition still reads as new. */
.reason--feature {
  background: var(--theme-soft);
  border-color: color-mix(in srgb, var(--theme) 20%, transparent);
}

.section--mist .reason--feature { background: var(--theme-soft); }

/* span 2 je bilo tocno dok je mreza imala dva stupca. S tri stupca kartica
   zauzme 832 od 1256px i desno ostane rupa od 424px. `1 / -1` je uzme sve,
   koliko god stupaca mreza imala. */
.reason--wide { grid-column: 1 / -1; }

.reason__top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }

.reason__new {
  display: inline-flex; align-items: center;
  padding: .34em .8em;
  border-radius: 999px;
  background: var(--theme);
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .14em; line-height: 1; text-transform: uppercase;
  color: #fff;
}

.reason__top .reason__n { justify-self: auto; margin-bottom: 0; }
/* inside .reason__top the icon shares a flex row with the "Novo" tag, so it
   drops the stacked version's bottom margin */
.reason__top .reason__ico { margin-bottom: 0; }

@media (max-width: 620px) {
  /* the grid is a single column down here, so the span would leave a hole */
  .reason--wide { grid-column: auto; }
}

/* Registracija — the form is not open yet, so the section states the three
   facts a reader needs in order to hold the date, and says plainly where to
   write in the meantime. A bare heading did none of that. */
.regcard {
  display: grid; gap: clamp(1.1rem, 1.9vw, 1.6rem);
  margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--mist-2);
  border-radius: var(--r-lg);
}

.regcard__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: clamp(.6rem, 1.1vw, .9rem);
}

.regmeta {
  display: grid; align-content: start; gap: .3rem;
  padding: clamp(.9rem, 1.5vw, 1.2rem);
  background: var(--paper);
  border-radius: var(--r-md);
}

.regmeta__k {
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--theme);
}

.regmeta__v {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h4); line-height: 1.25; color: var(--ink);
}

.regmeta__n { font-size: var(--t-xs); line-height: 1.4; color: var(--muted); }

.regcard__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(.8rem, 1.6vw, 1.3rem);
}

.regcard__note { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.regcard__note a { text-decoration: underline; text-underline-offset: .18em; color: var(--theme); }

@media (max-width: 560px) {
  .regcard__foot .btn { width: 100%; }
}

/* ==========================================================================
   LAYOUT PASS (rev73) — the section structure of the client's layout
   reference (nipp-web_1.zip) carried over onto this site. Only the
   arrangement came from the reference: every colour, face, radius and word
   below is the site's own, so nothing here introduces a new token.
   ========================================================================== */

/* Heading row: the title block on the left, its companion (a link, a button,
   a line of text) on the right, both sitting on one baseline. */
.shead-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: clamp(1rem, 2.4vw, 2.4rem);
}
.shead-row > .shead { flex: 1 1 26rem; }
/* .shead + * pushes whatever follows a heading down; inside the row that
   sibling is the side item, which must stay on the heading's baseline */
.shead-row > .shead + * { margin-top: 0; }
.shead-row__side { flex: 0 1 auto; display: grid; gap: .8rem; justify-items: start; }
.shead-row + * { margin-top: clamp(1.4rem, 2.6vw, 2.4rem); }

/* ---- hero: who it is for / points, and the date card on the photograph ---- */
.hero__facts {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: min(clamp(1rem, 2.6vw, 2.6rem), 3svh);
  margin: min(.35rem, .8svh) 0 0;
  padding-top: min(clamp(.8rem, 1.4vw, 1.2rem), 1.7svh);
  border-top: 1px solid var(--line);
  max-width: min(100%, 50rem);
}
.hero__fact { display: grid; gap: min(.5rem, 1svh); align-content: start; margin: 0; }
.hero__fact dt {
  font-family: var(--font-display);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--theme);
}
.hero__fact dd { margin: 0; }
.hero__fact-list {
  display: flex; flex-wrap: wrap; gap: .15rem 1.05rem;
  font-size: min(var(--t-sm), 1.95svh); line-height: 1.42;
  color: var(--ink-2);
}
.hero__fact-list li { position: relative; }
/* one audience per line, each led by the page's own accent dot — run inline
   with separators, every wrapped line started with a stray dot */
.hero__fact-list--dotrows { display: grid; gap: .15rem; }
.hero__fact-list--rows { display: grid; gap: .15rem; }
/* chamber name on its own line, its points beneath */
.hero__fact-list--pairs { display: grid; gap: min(.45rem, .9svh); }
.hero__fact-list--pairs b { display: block; }
/* Advent's reason cards are mostly title-only; rows size to their content */
.reasons--auto { grid-auto-rows: auto; }
/* Četiri kartice u mreži od tri stupca ostavljaju samotnu karticu u drugom
   redu; na širokom zaslonu stanu u jedan red. */
@media (min-width: 1000px) {
  .reasons--cetiri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hero__fact-list b { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.hero__fact-list abbr,
.eventcard__facts abbr { text-decoration: none; cursor: help; }

/* The card sits on the faded left third of the photograph, where the mask
   has already dissolved the image, so it never covers the subject. */
.hero__next {
  position: absolute; z-index: 4;
  left: 0; bottom: clamp(1rem, 3.2svh, 2.4rem);
  width: min(352px, 100%);
  display: grid; gap: .5rem;
  padding: clamp(1.1rem, 1.7vw, 1.5rem);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -38px rgba(23, 19, 58, .5);
}
.hero__next-t {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h4); line-height: 1.25; color: var(--theme);
}
.hero__next-d { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.hero__next .countdown {
  gap: .25rem;
  margin-top: .25rem; padding-top: .7rem;
  border-top: 1px solid var(--line);
}
.hero__next .countdown__grid { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; max-width: none; }
.hero__next .cd { display: flex; align-items: baseline; gap: .45rem; padding: 0; background: none; border: 0; border-radius: 0; }
.hero__next .cd__num { font-size: clamp(2.3rem, 3.4vw, 3.1rem); line-height: 1; }
.hero__next .cd__label,
.hero__next-l {
  font-family: var(--font-display);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.hero__next .countdown__done { font-size: var(--t-sm); line-height: 1.4; }
/* "Prijavite se – uskoro" broke onto two lines at the default padding */
.hero__next .btn { justify-self: start; margin-top: .35rem; padding-inline: 1.4em; white-space: nowrap; }

/* --- Hero skupa -------------------------------------------------------
   Logo je zaseban znak, ne prvi redak naslova: dobiva vlastiti zrak.
   Prije je razmak logo→naslov padao na 9px (kapa 1.05svh), dok je
   naslov→tekst bio 36px — hijerarhija je izgledala slucajno. */
/* Opened out to the same rhythm as the home hero. These were capped at ~2svh
   from the days when the event heroes also carried a countdown and a fact
   table in the same box; with those gone the stack just sat squeezed at the
   top of a whole screen. */
.hero--event .hero__copy { gap: clamp(1rem, 2.1vh, 1.9rem); }
/* The stack is centred in a full-height hero, so on the shorter pages the
   logo ended up sitting halfway down the screen. Padding at the foot of the
   copy moves the centre — and with it the logo — up, without switching to
   top-alignment, which would leave the whole block stranded under the header
   on tall screens.
   Only above 900px: below that the hero stacks and is no longer full height,
   so the same padding would just be dead space between the copy and the
   photograph under it. */
/* Bilo je centrirano uz padding-bottom koji je centar gurao gore. To radi
   samo ako sve tri stranice imaju jednako dug sadrzaj — a nemaju: advent ima
   pilulu, troredni naslov i rotator, praktikum i nurse samo pilulu i dvoredni
   naslov. Centriranje je zato logo spustalo na 144px na praktikumu, a na
   adventu ga drzalo na 18px. Poravnanje na vrh daje istu visinu na sve tri. */
@media (min-width: 901px) {
  /* align-content na .hero__copy nije bilo dovoljno: stupac je celija mreze
     .hero__inner, a ona ima align-items: center — pa se cijeli blok centrirao
     bez obzira na to kako su mu posloZena djeca. Vrh trazi oboje. */
  .hero--event .hero__inner { align-items: start; }
  .hero--event .hero__copy { align-content: start; padding-top: clamp(1rem, 4.5vh, 3.2rem); }
  /* Visina heroja bila je puna visina zaslona minus header. Otkad je stupac
     poravnat na vrh, praktikum i nurse (koji nemaju rotator kao advent) imali
     su 442px sadrzaja u 718px heroja — 268px prazno ispod naslova. Kapa od
     38rem zatvara rupu, a adventu ne smeta: njegov sadrzaj je visi od kape pa
     hero naraste koliko mu treba. */
  /* Kapa od 38rem je maknuta na zahtjev: hero skupa ide preko cijelog zaslona
     pa fotografija stoji u punoj visini. Cijena je zrak ispod naslova na
     praktikumu i nurseu, koji imaju kraći stup teksta od adventa. */
  .hero--event .hero__inner { min-height: calc(100svh - var(--header-h) - 0.667px); }
}
.hero--event .hero__logo { margin-bottom: clamp(.7rem, 1.6vh, 1.4rem); }
.hero--event .hero__title { margin-bottom: clamp(.3rem, .9vh, .8rem); }
/* Naslov skupa je dulji od naslova ostalih stranica — na punoj mjeri --h1
   troši tri retka verzala i hero postaje zid slova. Vlastiti, manji korak. */
.hero--event .hero__title { font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem); }
/* the rotating line is the hero's second voice and was running at barely more
   than body size — it takes a step up on all three event pages */
.hero--event .kicker--3 { font-size: min(calc(var(--hero-h2) * .72), 3.2svh); }
/* Advent's phrases are whole sentences, not single words — the longest wants
   441px on one line. Below 600px no size derived from --hero-h2 gets there,
   because that clamp has a floor of 1.65rem that ignores how narrow the screen
   is. Here the size comes off the viewport instead, with a floor of its own so
   it never drops below legible. Wrapping is not the alternative: the rotator
   steps the slot by exactly 1.25em per phrase, so a phrase on two lines puts
   every following one out of register. */
@media (max-width: 599px) {
  .hero--event .kicker--3 { font-size: max(11.5px, 3.75vw); }
}

@media (max-width: 900px) {
  .hero__facts { grid-template-columns: 1fr; }
  /* the photograph stacks under the copy here, so the card stops floating
     and tucks up over the bottom of the image instead */
  .hero__next {
    position: relative; left: auto; bottom: auto;
    width: auto; max-width: 420px;
    margin: -2.6rem clamp(.8rem, 4vw, 1.4rem) 0;
  }
}

/* ---- facts row: when / where / format / points, four across ---- */
.infogrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.infogrid--4 .infocard__t { font-size: var(--t-sm); margin-top: .1rem; }
.infogrid--4 .infocard__rows { margin-top: .25rem; }
/* Equal heights are right across a row — they are wrong down a column. With
   four cards wrapping to 2×2, grid-auto-rows:1fr made the Kada/Gdje row as
   tall as the points row below it, leaving 114 px of empty card under a date.
   Rows size themselves; cards within a row still stretch to match. */
.infogrid--4 { grid-auto-rows: auto; }

/* Prag je bio 1180px. Na 1280 — najcescoj sirini prijenosnika — cetiri
   kartice daju 243px upotrebljivog prostora, a „Hotel Olympia/Olympia Sky,"
   trazi 260px, pa se lomio u tri retka s „Sky," samim u redu. Na 1360px i
   vise cetiri kartice daju 262px i redak stane. */
@media (max-width: 1360px) {
  .infogrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Na mobitelu i tabletu dvije kartice u redu. Cetiri kratka podatka u jednom
   stupcu rastezala su sekciju preko cijelog zaslona. */
@media (max-width: 900px) {
  .infogrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
}

/* ---- theme: the one-sentence statement left, the reasoning right ---- */
.themesplit {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: clamp(1.6rem, 6vw, 6rem);
  row-gap: clamp(.9rem, 1.6vw, 1.4rem);
  align-items: start;
}
/* the pill spans the row, so the paragraphs line up with the statement's
   first line rather than with the label above it */
.themesplit > .eyebrow--pill { grid-column: 1 / -1; }

/* „Quo vadis hrvatska pedijatrija 2027." lomila se u dva reda i pilula je
   izgledala kao odlomak. Nowrap samo iznad mobitela — na 375px bi inace
   gurnula stranicu u vodoravni scroll. */
@media (min-width: 721px) { #specijalizanti .eyebrow--pill { white-space: nowrap; } }
/* Tema je sada sekcija za sebe, ne blok u plohi: njezina tvrdnja mora
   biti na istoj skali kao naslovi sekcija ispod nje. Na --t-h2b je
   ispadala 37.6px dok je „Informacije" bila 45.6px. */
.themesplit__statement { font-size: calc(clamp(1.8rem, 3.3vw, 2.85rem) + 1.333px); line-height: 1.16; }
.themesplit__body { display: grid; gap: 1rem; }
@media (max-width: 900px) {
  .themesplit { grid-template-columns: 1fr; }
}

/* ---- topics beside a column of key figures ---- */
.areasplit {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 6vw, 6rem);
  align-items: start;
}
.areasplit__main { display: grid; gap: clamp(1.4rem, 2.6vw, 2.4rem); min-width: 0; }
.areasplit__main > .areas { margin-top: 0; }
.sidestats { display: grid; gap: clamp(.6rem, 1.1vw, 1rem); }
.sidestat {
  display: grid; grid-template-columns: minmax(3.6rem, auto) minmax(0, 1fr);
  align-items: baseline; column-gap: 1rem;
  padding: clamp(1rem, 1.8vw, 1.6rem);
  background: var(--paper);
  border-radius: var(--r-md);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.section:not(.section--mist) .sidestat { background: var(--mist-2); }
.sidestat:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(23, 19, 58, .45); }
.sidestat__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 3.8vw, 3.3rem); line-height: 1;
  color: var(--theme); font-variant-numeric: tabular-nums;
}
.sidestat__l { font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
@media (max-width: 900px) {
  .areasplit { grid-template-columns: 1fr; }
  .sidestats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sidestat { grid-template-columns: 1fr; row-gap: .4rem; }
}
@media (max-width: 560px) {
  .sidestats { grid-template-columns: 1fr; }
  .sidestat { grid-template-columns: minmax(3.6rem, auto) minmax(0, 1fr); }
}

/* ---- meeting cards on the home page: the facts as icon rows ---- */
.eventcard__facts { display: grid; gap: .5rem; margin: .15rem 0 0; }
.eventcard__facts li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr);
  align-items: start; column-gap: .65rem;
  font-size: var(--t-sm); line-height: 1.42; color: var(--ink-2);
}
.eventcard__facts svg { width: 18px; height: 18px; margin-top: .12em; color: var(--theme); }
.eventcard__facts .eventcard__date { font-size: var(--t-base); line-height: 1.35; }
.eventcard__facts li:first-child svg { margin-top: .2em; }

/* ---- registration: one white panel holding fees, terms and the form ---- */
.regbox {
  display: grid; gap: clamp(1.4rem, 2.6vw, 2.4rem);
  padding: clamp(1.3rem, 4vw, 3.4rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
}
.regbox > * + * { margin-top: 0; }
.regbox .regcard { margin-top: 0; }
.fees__head { display: grid; gap: clamp(.8rem, 1.4vw, 1.1rem); }
.fees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--gap-card);
  grid-template-rows: auto auto auto;
}
.fee {
  display: grid; align-content: start; gap: .55rem;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  background: var(--mist-2);
  border-radius: var(--r-lg);
}
.fee__who { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h4); line-height: 1.3; color: var(--ink); }
.fee__rows { display: grid; margin: 0; }
.fee__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .62rem 0;
  border-top: 1px solid var(--line);
}
.fee__row dt { font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); color: var(--ink); }
/* the deadline decides the price, so it is set bold at nearly the label's
   size instead of as a faint aside */
.fee__row dt small { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--ink-2); margin-left: .4em; white-space: nowrap; }
.fee__row dd {
  margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.14rem; font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.fee__row.is-best dd { color: var(--theme); }

.regbox__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
  padding-top: clamp(1.4rem, 2.6vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.regbox__split--even { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); padding-top: 0; border-top: 0; }
.regbox__aside { display: grid; gap: 1rem; align-content: start; }

/* The registration form used to sit in one half of a split with the fine print
   beside it, which left it at 60 % width for fields that want room. The note
   now sits under the fee table it belongs to and the form runs full width. */
.regbox__full { display: grid; gap: clamp(1.2rem, 2.2vw, 1.9rem); }
.fees__head + .regnote { margin-top: clamp(1rem, 1.8vw, 1.5rem); }

/* Fees, grouped by how you attend. Four flat rows per card made the reader
   work out which price went with which mode — "Kasna LIVE" and "Kasna ONLINE"
   both read 120 € and looked arbitrary side by side. Live and Online are now
   their own small groups, each holding the two dates, so the card reads
   who → how → when → how much. */
.fee { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: clamp(.8rem, 1.4vw, 1.1rem); }
.fee__group { display: grid; gap: .35rem; align-content: start; }
.fee__mode {
  margin: 0;
  font-family: var(--font-display); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--theme); opacity: .72;
}
.fee__rows { display: grid; gap: .2rem; margin: 0; }
.fee__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .3rem 0;
}
.fee__row dt { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.fee__row dd {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h4); letter-spacing: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--ink);
}
.fee__row.is-best dd { color: var(--theme); }
.regbox__aside .regnote { margin-top: .2rem; }
/* the form beside it runs several screens; the terms travel with it */
@media (min-width: 1001px) {
  .regbox__aside { position: sticky; top: calc(var(--header-h) + var(--subnav-h) + 1.5rem); }
}
.infocard__n.infocard__soon { margin-top: .35rem; font-size: var(--t-sm); }
.infocard__soon abbr { text-decoration: none; }
@media (max-width: 1000px) {
  .regbox__split, .regbox__split--even { grid-template-columns: 1fr; }
}

/* Quo vadis: the 20 % discount pulled up beside the registration card */
.qvcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: clamp(1rem, 2vw, 1.6rem);
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
  background: var(--theme-soft);
  border-radius: var(--r-lg);
}
.qvcard__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.5rem, 4.2vw, 3.6rem); line-height: .95;
  color: var(--theme); white-space: nowrap;
}
.qvcard__body { display: grid; gap: .45rem; justify-items: start; }
.qvcard__k { color: var(--theme); }
.qvcard__t { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h4); line-height: 1.3; color: var(--ink); }
.qvcard__body p { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.qvcard .link { margin-top: .35rem; }
@media (max-width: 480px) { .qvcard { grid-template-columns: 1fr; } }

/* ---- photo gallery: one large frame and four small ---- */
.bento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, clamp(150px, 15vw, 232px));
  gap: clamp(.45rem, .9vw, .8rem);
}
.bento figure {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  background: var(--mist-2);
  cursor: zoom-in;
}
.bento figure:first-child { grid-row: span 2; }
.bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.bento figure:hover img { transform: scale(1.05); }
@media (max-width: 760px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: clamp(120px, 32vw, 190px); }
  .bento figure:first-child { grid-column: 1 / -1; grid-row: span 1; }
}

/* ---- sponsors: the thanks left, the ask right ----
   Sponsors only. The organiser and partner marks sat here for one round and
   were wrong in this place — they are not sponsors — so they are back with
   the contacts, under the people, where rev72 had them. */
.partnerband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.4rem, 5vw, 5rem); align-items: end;
  padding: clamp(1.5rem, 3.6vw, 3.4rem);
  background: var(--mist-2);
  border-radius: var(--r-xl);
}
.partnerband .shead { max-width: min(100%, 46rem); }
.partnerband__cta { display: grid; gap: .7rem; justify-items: start; }
.partnerband__mail {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  color: var(--ink-2);
  text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--line);
  transition: color .35s var(--ease-soft), text-decoration-color .35s var(--ease-soft);
}
.partnerband__mail:hover { color: var(--theme); text-decoration-color: currentColor; }
@media (max-width: 900px) {
  .partnerband { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 480px) {
  .partnerband__cta, .partnerband__cta .btn { width: 100%; }
  /* the two longest labels on the page broke onto two lines at phone width */
  .partnerband__cta .btn,
  .regcard__foot .btn,
  .regbox .form .btn--soon { font-size: .84rem; padding-inline: 1.15em; letter-spacing: .04em; }
}

/* ---- footer: three columns now that the Arhiva column is gone ---- */
.footer__cols { grid-template-columns: repeat(3, minmax(max-content, 1fr)); }
@media (max-width: 620px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
}

/* ---- contacts: each person on a card, side by side ---- */
.contactstack--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(.7rem, 1.4vw, 1.2rem);
}
.contactstack--cards .contactperson {
  align-content: start;
  padding: clamp(1.2rem, 2.2vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
/* two cards side by side are too narrow for the channels to run in a row */
.contactcard--bare .contactstack--cards .contactperson:not(:only-child) .contactperson__rows { grid-template-columns: 1fr; }

/* ===== Pozdravna rijec (preneseno iz rev73) ===== */
.welcome { display: grid; gap: clamp(.85rem, 1.5vw, 1.2rem); align-content: start; }
/* Pozdravna rijec sjedi u istoj zaobljenoj plohi kao „Zasto doci". Mjera
   teksta je ogranicena jer je ploha siroka, a pismo je dugacko. */
/* --- Pozdravna rijec kao pismo ------------------------------------------
   Prije: tekst 590px u plohi od 1280px — vise od pola plohe prazno, a
   ispod zid od 998px. Sada je zaglavlje (portret + naslov) u lijevoj
   traci, pismo desno s mjerom od 62 znaka. Ploha se popuni, a citanje
   dobije pocetak i kraj. */
.panel > .welcome { max-width: min(100%, 68ch); }
/* .panel > .welcome je (0,2,0) i gazi .welcome--letter (0,1,0) — bez
   jednako specificnog selektora pismo se stisne na 68ch i stupci se
   urusavaju na 256+273px. */
/* pismo ide punom sirinom plohe */
.panel > .welcome--letter { max-width: none; }
/* Pismo je jedan stupac na mjeri citanja, centriran u plohi — dvostupcani
   raspored je ostavljao prazan stupac od 240px uz tekst visok 790px, a na
   nurse (bez portreta) i posve praznu traku. Portret je presao dolje uz
   potpis: tako pismo pocinje naslovom, a zavrsava licem i imenom. */
.welcome--letter {
  display: grid;
  gap: clamp(.85rem, 1.5vw, 1.2rem);
  /* NE "margin-inline: auto": centrirano u plohi naslov je pocinjao na
     470px dok susjedne sekcije pocinju na 82px odnosno 130px. Pismo se
     drzi lijevog ruba plohe kao i naslov u „Zasto doci". */
}
.welcome--letter > h2 { margin: 0 0 clamp(.3rem, .8vw, .6rem); }
.welcome__body { display: grid; gap: clamp(.85rem, 1.5vw, 1.2rem); }
/* .welcome p { max-width: 64ch } stoji NIZE u datoteci i pri jednakoj
   specificnosti (0,1,1) pobjeduje po redoslijedu — odlomci su ostajali
   555px u plohi od 1252px. Otuda .welcome--letter ispred. */
.welcome--letter .welcome__body > p,
.welcome--letter .welcome__body > ul { max-width: none; }
@media (max-width: 520px) {
  .welcome__sign { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* --- Popis pojmova ------------------------------------------------------
   .audience je pisan za cijele recenice: redak pun teksta, crta ispod.
   Discipline su pojmovi od jedne do cetiri rijeci — u istom rasporedu
   zauzimale su 31% retka, a crta se vukla preko 69% praznine. Ovdje:
   tri stupca, bez crta, gusce. */
.audience--terms { columns: 3; column-gap: clamp(1.2rem, 3vw, 3rem); }
.audience--terms .audience__item {
  padding: clamp(.3rem, .6vw, .45rem) 0 clamp(.3rem, .6vw, .45rem) 1.35rem;
  border-bottom: 0;
}
.audience--terms .audience__item::before { top: calc(clamp(.3rem, .6vw, .45rem) + .62em); }
/* Jednorijecni pojmovi (naslovnica) podnose cetiri stupca: najdulji je
   „Gastroenterologija/hepatologija" na 256px, stupac je 300px. */
.audience--4col { columns: 4; }
@media (max-width: 1100px) { .audience--4col { columns: 3; } }
@media (max-width: 860px) { .audience--terms { columns: 2; } }
@media (max-width: 480px) { .audience--terms { columns: 1; } }
.welcome__head {
  display: flex; align-items: center;
  gap: clamp(.9rem, 1.8vw, 1.5rem);
  margin-bottom: clamp(.2rem, .6vw, .5rem);
}
.welcome__head h2 { margin: 0; }
.welcome__face {
  flex: none;
  width: clamp(72px, 7.5vw, 110px); aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  /* 12%: izmjereno — lice je centrirano, a odrezani vrh kose
     fotografije ostaje izvan kruga */
  object-position: center 12%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(23, 19, 58, .45);
}
@media (max-width: 560px) {
  .welcome__head { flex-direction: column; align-items: flex-start; gap: .9rem; }
}
.welcome > h2 { margin-bottom: clamp(.2rem, .5vw, .4rem); }
.welcome p { font-size: var(--t-base); line-height: 1.62; color: var(--ink-2); max-width: min(100%, 64ch); }
.welcome__salut { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.welcome__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.welcome__list li {
  position: relative; padding-left: 1.25rem;
  font-size: var(--t-base); line-height: 1.55; color: var(--ink-2);
}
.welcome__list li::before {
  content: ''; position: absolute; left: 0; top: .66em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--theme);
}
/* Popis s trinaest razloga u jednom stupcu postaje stupac teksta dug pola
   zaslona; na širem zaslonu ide u dva, na užem ostaje jedan. Namjerno
   columns, a ne grid: grid pari stavke po recima, pa uz dugačku stavku lijevo
   desno zjapi prazan prostor do visine njezina para. */
@media (min-width: 900px) {
  .welcome__list--dvostupac {
    display: block;
    columns: 2; column-gap: clamp(1.5rem, 3vw, 3rem);
  }
  .welcome__list--dvostupac li { break-inside: avoid; margin-bottom: .5rem; }
}
.welcome__sign {
  display: flex; align-items: center;
  gap: clamp(.9rem, 2vw, 1.4rem);
  margin-top: clamp(.8rem, 1.6vw, 1.3rem);
  padding-top: clamp(1rem, 1.9vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.welcome__signtext { display: grid; gap: .1rem; }
.welcome__sign span { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.welcome__sign .welcome__name {
  font-family: var(--font-display); font-weight: 700;
  /* ime potpisnika je slog, ne naglasak: na nurse temi (#6F6FB4) imalo
     je 3.93:1 na bijeloj */
  font-size: var(--t-h4); line-height: 1.3; color: var(--ink);
  margin-top: .15rem;
}

/* ==========================================================================
   PISMO — pozdravna rijec na stranici skupa
   Sadrzaj JEST pismo: oslovljavanje, tijelo, potpis. U jednom stupcu preko
   cijele plohe to je oblik e-poruke. Ovdje je slozeno kao tiskano pismo:
   oslovljavanje ide preko cijele sirine, tijelo u dva stupca (ploha ostaje
   puna, ali redak padne sa 159 na ~75 znakova), a potpis zatvara pismo
   pecatom — znakom marke, ondje gdje bi na pismu stajao vosak.
   Nijedna nova velicina ni boja: sve iz postojecih tokena.
   ========================================================================== */
.letter { position: relative; overflow: hidden; display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); }
.letter::before {
  content: ''; position: absolute; z-index: 1;
  left: 0; right: 0; top: 0; height: 5px;
  background: var(--theme);
}
/* Vodeni znak u papiru: ista rozeta kao pecat, velika i jedva vidljiva,
   djelomicno izrezana rubom plohe — kao otisak u listu. 4% je mjereno:
   ispod praga na kojem bi pomaknula kontrast teksta. */
.letter__watermark {
  position: absolute; z-index: 0;
  right: -7%; bottom: -22%;
  width: min(46%, 420px); aspect-ratio: 1;
  color: var(--theme); opacity: .04;
  pointer-events: none;
}
.letter > *:not(.letter__watermark) { position: relative; z-index: 1; }
.letter__head { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); }
.letter__head h2 { margin: 0; max-width: 24ch; }
.letter__head .welcome__salut { margin: 0; }

.letter__body {
  columns: 2;
  column-gap: clamp(2rem, 4.5vw, 4.5rem);
  /* tanka crta izmedu stupaca — tiskarska, ne ukrasna: drzi oko u stupcu */
  column-rule: 1px solid var(--line);
}
/* Inicijal je ovdje probao i pao: prvo slovo je „I", a u bezserifnom pismu
   to je gola okomita crta — citala se kao greska, ne kao inicijal.
   Umjesto njega pismo dobiva zaglavlje: traka preko vrha plohe. */
/* odlomak koji se prelomi preko dna stupca gubi se u citanju */
.letter__body > * { break-inside: avoid; margin: 0 0 clamp(.8rem, 1.4vw, 1.1rem); }
/* „Program obuhvaca kljucne aspekte:" zavrsavao je lijevi stupac, a popis
   koji najavljuje pocinjao desni — dvotocje i njezin popis moraju ostati
   zajedno. */
.letter__body > p:has(+ ul) { break-after: avoid; }
.letter__body > *:last-child { margin-bottom: 0; }
.letter__body p { font-size: var(--t-base); line-height: 1.62; color: var(--ink-2); max-width: none; }
.letter__body ul { display: grid; gap: .45rem; margin-left: 0; padding-left: 0; list-style: none; }
.letter__body li {
  position: relative; padding-left: 1.2rem;
  font-size: var(--t-base); line-height: 1.5; color: var(--ink-2);
}
.letter__body li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--theme);
}

.letter__sign {
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding-top: clamp(1rem, 1.9vw, 1.5rem);
  border-top: 1px solid var(--line);
  text-align: right;
}
.letter__signtext { display: grid; gap: .1rem; }
.letter__signtext span { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.letter__signtext .welcome__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h4); line-height: 1.3; color: var(--ink);
}
/* Na praktikumu pismo zatvara Irenin portret umjesto znaka — isto mjesto,
   ista kruzna mjera, pa se dva pisma drze zajedno. */
.letter__sign .welcome__face {
  order: 2; flex: none;
  width: clamp(54px, 5.4vw, 76px); aspect-ratio: 1;
  border-radius: 50%; object-fit: cover; object-position: center 12%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(23, 19, 58, .45);
}
@media (max-width: 520px) { .letter__sign .welcome__face { order: 0; } }

/* pecat: znak marke zatvara pismo, kao vosak */
.welcome__seal {
  order: 2; flex: none;
  width: clamp(54px, 5.4vw, 76px); aspect-ratio: 1;
  color: var(--theme); opacity: .9;
}
@media (max-width: 860px) {
  /* jedan stupac bez mjere bio bi 83 znaka na 860px — sirina retka se
     drzi i kad stupci padnu na jedan */
  .letter__body { columns: 1; max-width: min(100%, 62ch); column-rule: 0; }
  .letter__watermark { right: -18%; bottom: -14%; width: min(62%, 320px); }
  .letter__sign { justify-content: flex-start; text-align: left; }
  .welcome__seal { order: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .letter [data-reveal] { }
}

/* ==========================================================================
   KOLAZ — fotografije sa skupova
   Mozaik od pet snimaka: jedna velika nosi atmosferu, jedna uspravna drzi
   desni rub, tri male zatvaraju donji red. Omjer spremnika je 4/3 jer su
   tri stupca i tri reda cije su celije 4:3 — tako redovi imaju visinu i
   bez racunanja u CSS-u. Okvir je isti kao kod .mediapair: bijeli pasparti,
   ravni uglovi slike i ploha u boji skupa pomaknuta ispod otiska.
   ========================================================================== */
.kolaz {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(.7rem, 1.6vw, 1.4rem);
  aspect-ratio: 4 / 3;
}
.kolaz__item {
  margin: 0; min-width: 0; min-height: 0;
  background: var(--paper);
  padding: clamp(.4rem, .7vw, .65rem);
  border-radius: var(--r-sm);
  box-shadow:
    0 0 0 1px var(--line-soft),
    clamp(7px, .8vw, 12px) clamp(7px, .8vw, 12px) 0 -1px color-mix(in srgb, var(--theme) 26%, transparent);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.kolaz__item img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; border-radius: 0;
}
.kolaz__item--velika { grid-column: span 2; grid-row: span 2; }
.kolaz__item--visoka { grid-row: span 2; }
.kolaz__item:hover {
  transform: translate(3px, 3px);
  box-shadow:
    0 0 0 1px var(--line),
    clamp(4px, .5vw, 7px) clamp(4px, .5vw, 7px) 0 -1px color-mix(in srgb, var(--theme) 38%, transparent);
}
@media (max-width: 760px) {
  /* na uskom ekranu mozaik se raspada u citljiv par stupaca */
  .kolaz { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; aspect-ratio: auto; }
  .kolaz__item { aspect-ratio: 4 / 3; }
  .kolaz__item--velika { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
  /* 4/3 kao i ostale male celije: na 3/4 je uspravna bila visa od susjedne
     i ostavljala rupu u mrezi */
  .kolaz__item--visoka { grid-row: auto; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .kolaz__item, .kolaz__item:hover { transition: none; transform: none; } }

/* ==========================================================================
   NASLOVI U VERZALU
   h1 i h2 idu velikim tiskanim slovima i u boji skupa. Verzal bez razmaka
   medu slovima u ovoj velicini zatvara rijec, pa dobiva .01em. Mala slova
   ostaju na h3/h4 — ondje bi verzal u velicini tekuceg teksta bio vikanje.
   ========================================================================== */
.display, h1, .h1, h2, .h2, .hero__title {
  text-transform: uppercase;
  letter-spacing: .012em;
  color: var(--theme);
}
/* na tamnim plohama boja teme nestaje — ondje naslov ostaje bijel */
.section--ink .display, .section--ink h1, .section--ink .h1,
.section--ink h2, .section--ink .h2,
.footer .display, .footer h1, .footer .h1, .footer h2, .footer .h2,
.contactcard--ink h2, .contactcard--ink .h2 { color: #fff; }
/* izuzetak: tvrdnja teme je recenica, ne naslov — verzal bi je ucinio nečitljivom */
.themesplit__statement, .tagline, .audience__close { text-transform: none; }

/* ==========================================================================
   OKVIR NA SVE FOTOGRAFIJE
   Isti tretman kao .mediapair__item: bijeli pasparti, ravni uglovi slike,
   ploha u boji skupa pomaknuta ispod otiska.
   ========================================================================== */
.split__media--card,
.lodging__figure,
.hero__figure,
.eventcard__media,
.themesplit__media {
  background: var(--paper);
  padding: clamp(.5rem, .9vw, .8rem);
  border-radius: var(--r-sm);
  box-shadow:
    0 0 0 1px var(--line-soft),
    clamp(8px, .9vw, 13px) clamp(8px, .9vw, 13px) 0 -1px color-mix(in srgb, var(--theme) 26%, transparent);
}
.split__media--card img,
.lodging__figure img,
.eventcard__media img,
.themesplit__media img { border-radius: 0; }
/* hero slika se prelijeva preko ruba stranice — ondje okvir nema smisla */
.hero__figure { background: none; padding: 0; box-shadow: none; border-radius: 0; }

/* uvod na naslovnici: centriran, na mjeri citanja */
/* 46ch je lomilo „…godinu dana unaprijed / upisuje u planer!". Rečenica je
   široka 55ch, a to su dvije kratke rečenice, ne tekući tekst — 58ch im
   daje po jedan redak, a i dalje je unutar preporučene mjere. */
.uvodcentar { max-width: min(100%, 58ch); margin-inline: auto; text-align: center; }
/* Kapa od 50ch s .lead je ovdje jača od kape spremnika i vraćala je lom:
   rečenici treba 481px, a 50ch daje 472. Spremnik već drži mjeru. */
.uvodcentar .lead { margin: 0; max-width: none; }
.shead--centar { max-width: none; justify-items: center; text-align: center; margin-top: clamp(2rem, 4vw, 3.4rem); }
/* .eyebrow nosi justify-self: start, pa je u sredinjenom zaglavlju ostajala
   nalijepljena uz lijevi rub dok je naslov ispod nje bio sredinjen. */
.shead--centar .eyebrow { justify-self: center; }
/* naslov iznad popisa disciplina */
.areas__pokriva {
  margin: clamp(.6rem, 1.2vw, 1rem) 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-body); letter-spacing: .012em; text-transform: uppercase;
  color: var(--theme);
}
/* tri kartice skupova: kad tri ne stanu, idu jedna ispod druge */
@media (max-width: 1100px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* ===== naslovnica: hero, verzal, razdvojene sekcije ===== */
/* "Dobro došli" je h2 pa verzal hvata globalno pravilo; ovdje samo potvrdim
   da ga nijedno nize pravilo na pilulama ne vraca na mjesoviti slog */
.hero__welcome { text-transform: uppercase; }
/* Hero h1 je cijela recenica, ne naslov od tri rijeci. Na 56px u verzalu
   lomila se u cetiri reda i gusila rotator pod sobom — ide korak nize od
   ostalih h1, jer je jedini h1 na webu koji je recenica. */
/* Vlastiti clamp, ne postotak od --h1: mnozitelj .64 je bio tocan na 1440,
   ali je na 360 povukao naslov na 20.8px — jedva iznad teksta od 18.2px.
   Ovako pad ide samo ondje gdje ima sirine, a dno skale ostaje naslov. */
.hero--brand .hero__title { font-size: clamp(1.65rem, 1.1rem + 1.9vw, 2.25rem); line-height: 1.16; }
/* rotator u akcentnoj boji: razlikuje se od naslova nad sobom bojom, ne samo
   velicinom — na istoj temi obje su bile ljubicaste pa je stupac citao kao
   jedan blok */
.hero--brand .kicker { color: var(--accent-deep); font-size: min(clamp(1.25rem, .85rem + 1.35vw, 1.78rem), 3.6svh); }

/* Sekcija "NiPP stručna edukacija i doživljaj" nosi plohu i trazi vise zraka:
   naslov je bio priljubljen uz gornji rub plohe. */
/* Bio je vlastiti clamp koji je na telefonu davao 54px dok su sve ostale
   sekcije stajale na 32px — jedini vidljivi otpadnik od ritma. */
#edukacija { padding-block: var(--section); }
#edukacija .shead--centar { margin-top: 0; margin-bottom: clamp(1.8rem, 3.4vw, 3rem); }

/* "Eksperti Vas vode…" je sada naslov, ali recenica od devet rijeci — na
   punom h2 (41px) u verzalu zauzela bi tri reda, pa ide na --t-h2b i siri
   max-width od 52ch koji je imala kao odlomak. */
.areas__claim {
  font-size: var(--t-h2b); line-height: 1.2; max-width: 30ch;
  /* ista boja kao svaki drugi h2 na stranici — stajao je u --head pa ga je
     tirkizna oznaka pod njim nadglasavala i citao se kao uvod u nju */
  color: var(--theme);
  /* odvojen od popisa nad sobom: bio je 30px ispod zadnje natuknice, pa je
     visio na njoj umjesto da otvara svoj blok */
  margin: clamp(2.4rem, 4.6vw, 3.8rem) 0 clamp(1.1rem, 2vw, 1.6rem);
}
/* oznaka nad popisom disciplina je oznaka, ne drugi naslov: silazi na mjeru i
   boju ostalih labela na webu, da hijerarhija ide naslov → oznaka → popis */
.areas__pokriva {
  margin: 0 0 clamp(.5rem, 1vw, .8rem);
  font-size: var(--t-label); letter-spacing: .15em; color: var(--muted);
}

/* uvod je bio 19px od fotografija pod sobom — centriran blok trazi istu
   kolicinu zraka kao i razmak izmedu dvije sekcije, inace cita kao natpis
   fotografije umjesto kao uvod u sekciju */
#skupovi .uvodcentar { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }

/* ===================================================================
   NASLOVNICA — HERO PO UZORU NA INEIP (ineip.org), u NiPP bojama
   Izmjereno s izvornika: min-height 90vh · stupac teksta max 66% ·
   h1 4rem/600/1.1 s jednom rijeci u akcentnoj boji · potporni redak
   ispod · dva gumba s razmakom 48px, glavni je pilula s bijelim
   kruzicem i kosom strelicom · ambijentalna linijska grafika u desnoj
   polovici, zakrenuta i prelivena preko gornjeg ruba · bijeli preljev
   preko gornjih 15%.
   NiPP zamjene: whitesmoke → --mist · eip-red → --accent-deep (bijela
   na brand #EA5726 daje 3.57:1 i pada) · eip-blue → --theme ·
   Lottie „Flowing Lines" → linije NiPP znaka, isti polozaj i nagib.
   =================================================================== */
.hero--ineip {
  position: relative; overflow: hidden;
  background: var(--mist);
  min-height: 90svh;
  padding-top: clamp(2.6rem, 4.7vw, 4.7rem);
  padding-bottom: clamp(3.4rem, 6.3vw, 6.25rem);
  display: flex; align-items: center;
}
/* .hero__inner je u osnovi mreza 1.55fr/1fr za hero sa slikom desno. Ovdje
   je stupac teksta jedino dijete, pa je padao u prvu celiju (~55%) i onda je
   njegovih 66% davalo 36% stranice. Na ovom heroju nema druge celije. */
.hero--ineip .hero__inner {
  display: block; width: 100%;
  /* osnovno pravilo nosi min-height: 100svh - header, pa je stupac teksta
     sjeo na vrh a ispod njega je ostalo 650px prazno. Visinu ovdje drzi
     sekcija, a flex je centrira. */
  min-height: 0; padding-block: 0;
}
.hero__tekst {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1rem, 1.6vw, 1.56rem);
  max-width: 66%;
}
/* naslov je na izvorniku 4rem/600; NiPP ga drzi na svojoj skali, samo u
   lakoj tezini jer je rijec o recenici od 137 znakova */
.hero--ineip .hero__title {
  text-transform: none; letter-spacing: -.005em;
  font-size: clamp(1.75rem, 1.05rem + 2.3vw, 3.3rem);
  /* ne --ink: #17133A je prakticno crn, a svi ostali naslovi na webu stoje
     u boji teme. Na --mist daje 10.3:1. */
  font-weight: 600; line-height: 1.1; color: var(--theme);
  /* bez vlastite mjere: na izvorniku naslov ispunjava stupac od 66%, a
     max-width: 20ch ga je vezao na 518px pa je stupac ispadao 36% */
  margin: 0;
}
/* jedna rijec u akcentu, kao <span class="eip-color"> na izvorniku.
   --accent-deep, ne brand #EA5726: na --mist je 5.44:1 naspram 3.32:1,
   pa prolazi i kad naslov na mobitelu padne ispod praga za veliki tekst. */
.hero__istak { color: var(--accent-deep); }

.hero--ineip .hero__welcome { margin: 0; }
/* rotator stoji na mjestu uvodnog odlomka s izvornika */
.hero--ineip .kicker { margin: 0; color: var(--accent-deep); }

/* Gumbi u heroju su bili INEIP-ove pilule s bijelim kruzicem i kosom
   strelicom. Zamijenjeni su standardnim .btn s weba, pa ta pravila vise
   nemaju vlasnika i brisu se da ne ostanu kao mrtav kod. */
.hero__gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.1rem, 3.4vw, 3rem); }

/* --- ambijentalna grafika: NiPP znak umjesto INEIP-ovih linija --- */
.hero__linije {
  /* na izvorniku grafika je 50% siroka i 120% visoka, prelivena preko
     gornjeg ruba. Kvadratni NiPP znak je pokrivao samo gornju desnu
     cetvrtinu, pa je donja polovica heroja ostajala prazna. */
  position: absolute; inset: -42% -20% -10% auto; width: 70%; z-index: 0;
  color: var(--theme); opacity: .2; pointer-events: none;
}
.hero__linije svg {
  width: 100%; height: 100%;
  transform-origin: 50% 50%;
  /* Vrti se polako oko sebe. Pocetni kut 31deg je s izvornika; okret traje
     120s jer na vecoj brzini cvijet vuce oko s naslova. Translacija mora
     ostati u istoj transform listi, inace je rotacija ponisti. */
  animation: cvijetVrti 120s linear infinite;
}
@keyframes cvijetVrti {
  from { transform: translate(16px, 61px) rotate(31deg); }
  to   { transform: translate(16px, 61px) rotate(391deg); }
}
/* preljev koji gasi gornji rub grafike, kao .gradient-hero na izvorniku */
.hero__preljev {
  position: absolute; inset: 0 0 auto; height: 15%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--mist) 15%, transparent);
}
.hero--ineip .hero__inner { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .hero__tekst { max-width: 100%; }
  .hero__linije { width: 86%; inset: -16% -22% auto auto; opacity: .12; }
  /* ne 90svh kao na siroko — s rotatorom umjesto dugog odlomka ostalo bi
     pola zaslona prazno — ali ni 0: na 768px je hero ispadao 386px i citao
     se kao traka, ne kao hero. */
  .hero--ineip { min-height: 66svh; }
}
@media (prefers-reduced-motion: reduce) { .hero__linije svg { animation: none; } }

/* ===== naslovnica: tri udzbenika ===== */
.knjige {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3.4vw, 3.2rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.4rem);
}
.knjiga { display: grid; gap: .5rem; text-decoration: none; justify-items: center; text-align: center; }
/* korica dobiva isti pasparti kao i ostale fotografije na webu */
.knjiga__korica {
  display: block; width: 100%; background: var(--paper);
  padding: clamp(.5rem, .9vw, .8rem); border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--line-soft),
    clamp(8px, .9vw, 13px) clamp(8px, .9vw, 13px) 0 -1px color-mix(in srgb, var(--theme) 26%, transparent);
  transition: transform .3s ease;
}
/* Tri korice imaju tri razlicita omjera (0.67, 0.70, 0.77), pa su okviri
   ispadali 533–607px visoki i naslovi pod njima nisu bili u istom retku.
   Zajednicki omjer + contain: nijedna korica se ne reze, a okviri su isti. */
.knjiga__korica img {
  display: block; width: 100%; height: auto; border-radius: 0;
  aspect-ratio: 5 / 7; object-fit: contain; object-position: center;
}
.knjiga:hover .knjiga__korica { transform: translateY(-4px); }
.knjiga__naslov {
  margin-top: clamp(.7rem, 1.4vw, 1.1rem);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h4);
  text-transform: uppercase; letter-spacing: .012em; color: var(--theme);
}
.knjiga:focus-visible .knjiga__korica { outline: 3px solid var(--accent-deep); outline-offset: 4px; }
.biblioteka__cta { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3.2rem); }
/* .uvodcentar je u osnovi 62ch — mjera za kratak uvod. Ovdje je odlomak od
   cetiri recenice pa je na toj sirini stajao kao uzak stupac usred prazne
   stranice; 88ch ga raspire, a i dalje je ispod granice citljivosti. */
#biblioteka .uvodcentar { margin-top: clamp(1rem, 2vw, 1.6rem); max-width: min(100%, 54ch); }

@media (max-width: 760px) {
  /* tri korice jedna uz drugu padnu na 90px sirine — necitljivo */
  .knjige { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Ispod 440px knjige su padale u jedan stupac: tri korice preko cijele
   širine zaslona, svaka visoka pola ekrana. Dva stupca stanu i na 320px. */
@media (max-width: 440px) {
  .knjige { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 3vw, 1.4rem); }
  .knjiga__naslov { font-size: 12.5px; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) { .hero__linije svg { animation: none; transform: translate(16px, 61px) rotate(31deg); } }

/* „Dobro došli" ide na vrh heroja, odvojeno od naslova: bilo je zalijepljeno
   uz njega pa su pilula i naslov citali kao jedan blok. */
.hero--ineip .hero__tekst { position: relative; }
.hero--ineip .hero__welcome { margin-bottom: clamp(1.2rem, 3.2vh, 2.6rem); }

/* uvodni odlomak u heroju — mjesto .paragraph-hero s izvornika */
.hero__uvod {
  margin: 0; max-width: min(100%, 52ch);
  font-size: var(--t-base); line-height: 1.5; color: var(--ink-2);
  letter-spacing: .005em;
}

/* ===== naslovnica: discipline kao zatvoren blok =====
   Bilo je 15 pojmova u CSS stupcima s tockicama. Duljine se razlikuju
   trostruko („Metabolizam" naspram „Gastroenterologija/hepatologija"), pa je
   desni rub svakog stupca bio nazubljen, a citanje je islo odozgo prema
   dolje po stupcu — oko nije imalo gdje stati.
   Petnaest pojmova dijeli se na 3 × 5 bez ostatka, pa blok moze biti pravi
   pravokutnik: nijedna celija nije prazna. Linije crta razmak u mrezi
   (gap: 1px nad podlogom boje linije), tako da su svi razdjelnici tocno 1px
   i nikad se ne udvostrucuju na spojevima. */
.discipline {
  margin-top: clamp(1rem, 2vw, 1.6rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.discipline__label {
  margin: 0;
  padding: clamp(.9rem, 1.6vw, 1.15rem) clamp(1rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-label); letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted);
}
.discipline__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
}
.discipline__grid li {
  display: flex; align-items: center; gap: .7rem;
  margin: 0; padding: clamp(.7rem, 1.3vw, .95rem) clamp(1rem, 2vw, 1.6rem);
  background: var(--paper);
  font-size: var(--t-body); color: var(--ink-2);
  transition: background .25s var(--ease), color .25s var(--ease);
}
/* Svaka disciplina ima svoju ikonu umjesto tockice. Ista crta kao i sve
   ostale ikone na webu: 24x24, stroke 1.7, bez ispune. */
.discipline__grid li svg {
  flex: 0 0 auto; width: 22px; height: 22px;
  color: var(--theme); opacity: .85;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.discipline__grid li:hover svg { opacity: 1; transform: scale(1.08); }
.discipline__grid li:hover { background: var(--mist); color: var(--ink); }

/* Rotator pod blokom nije odvojen razmakom mreze — kutija mu je visa od
   sloga pa je ulazio 4–10px u blok. */
.discipline + .kicker--areas { margin-top: clamp(1.1rem, 2.2vw, 1.8rem); }

/* Jedna stavka (nurse) — mreza od tri stupca ostavila bi dvije prazne celije
   kroz koje se vidi podloga, pa taj blok ide u jedan stupac. */
.discipline__grid--jedan { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  .discipline__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discipline__grid--jedan { grid-template-columns: minmax(0, 1fr); }
  /* Neparan broj stavki u dva stupca ostavlja praznu celiju, a kroz nju se
     vidi podloga mreze — siva mrlja u kutu. Zadnja stavka preuzme oba stupca
     pa je pravokutnik opet pun. Vrijedi samo gdje broj stavki to trazi
     (15 na naslovnici i praktikumu); advent ima 6 i dijeli se bez ostatka. */
  .discipline__grid--sirokiZadnji li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .discipline__grid { grid-template-columns: minmax(0, 1fr); }
  .discipline__grid--sirokiZadnji li:last-child { grid-column: auto; }
}

/* ===== pozdravna riječ na mobitelu: skraćena + „Pročitaj više" ===== */
/* Klasu stavlja JS, ne markup — bez skripte pismo ostaje cijelo. */
.letter__body--skraceno {
  max-height: 19em;
  overflow: hidden;
  /* tekst se gasi prema dnu umjesto da bude odrezan po pola retka */
  -webkit-mask-image: linear-gradient(180deg, #000 68%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(180deg, #000 68%, rgba(0, 0, 0, 0) 100%);
}
.letter__vise {
  display: inline-flex; align-items: center; gap: .45em;
  margin-top: clamp(.8rem, 2.4vw, 1.2rem);
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase;
  color: var(--theme);
  border-bottom: 2px solid color-mix(in srgb, var(--theme) 35%, transparent);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.letter__vise::after {
  content: ''; width: .5em; height: .5em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; translate: 0 -.12em;
  transition: rotate .25s var(--ease);
}
.letter__vise[aria-expanded="true"]::after { rotate: -135deg; translate: 0 .1em; }
.letter__vise:hover { border-bottom-color: currentColor; }
.letter__vise:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }
/* iznad 900px gumb je skriven i atributom hidden, ovo je samo pojas sigurnosti */
@media (min-width: 901px) { .letter__vise { display: none; } }

/* ===== kartica „Gdje" vodi na Google karte ===== */
.infocard--karta { position: relative; }
.infocard__karta {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; text-decoration: none;
}
.infocard--karta:hover { transform: translateY(-2px); }
.infocard--karta:has(.infocard__karta:focus-visible) { outline: 3px solid var(--accent-deep); outline-offset: 3px; }
/* ikona pribodnice se blago naglasi, da se vidi da je kartica zivа */
.infocard--karta:hover .infocard__ico { color: var(--theme); transform: scale(1.06); }
.infocard--karta .infocard__ico { transition: transform .25s var(--ease), color .25s var(--ease); }

/* „Olympia/Olympia" trazi 141px, a kartica na 360px nudi 140 — zato se lomilo
   usred imena, sa „Sky," samim u retku. Drzanjem „Olympia Sky," na okupu
   prijelom pada iza kose crte: „Hotel Olympia/" (122px) pa „Olympia Sky,"
   (106px) — oba stanu, i svaki redak je cijela cjelina. */
.nelomi { white-space: nowrap; }

/* ===== tri obećanja iznad kartica („Zašto doći") =====
   Stajale su kao tri odlomka unutar .shead, koji je ogranicen na 46rem.
   U plohi sirokoj 1256px to znaci da su tri recenice bile stisnute u 736px,
   svaka je prelazila u dva retka razlicite duljine i blok je ispadao ragav.
   Tri stupca preko pune sirine daju im jednaku mjeru i zajednicku crtu. */
.obecanja {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
  margin-top: clamp(1.4rem, 2.8vw, 2.4rem);
}
.obecanja p {
  margin: 0;
  padding-top: clamp(.8rem, 1.5vw, 1.1rem);
  border-top: 2px solid var(--theme);
  font-size: var(--t-body); line-height: 1.5; color: var(--ink-2);
  text-wrap: pretty;
}
/* 900px, isti prag na kojem se slaze ostatak weba — jedan prag manje za
   pamtiti nego vlastitih 860. */
@media (max-width: 900px) {
  .obecanja { grid-template-columns: 1fr; gap: clamp(.9rem, 2.4vw, 1.3rem); }
}

/* ===== natječaj: kategorije A i B ===== */
.kategorije { list-style: none; margin: clamp(1rem, 2vw, 1.5rem) 0 0; padding: 0; display: grid; gap: .55rem; }
.kategorije li {
  display: flex; align-items: baseline; gap: .7rem;
  font-size: var(--t-body); line-height: 1.45; color: var(--ink-2);
}
/* slovo kategorije je oznaka, ne dio recenice — nosi ga kvadratic u boji teme */
.kategorije__o {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 1.75em; height: 1.75em; border-radius: var(--r-sm);
  /* narancasta, ne boja teme — slovo kategorije je oznaka koja se mora
     odvojiti od svega ostalog u sekciji. --accent-deep daje 5.44:1. */
  background: color-mix(in srgb, var(--accent-deep) 12%, transparent);
  color: var(--accent-deep);
  font-family: var(--font-display); font-weight: 700; font-size: .95em;
}
.kategorije li { font-weight: 600; }
.kategorije__nota { margin: .7rem 0 0; font-size: var(--t-sm); color: var(--muted); }

/* ===== natječaj: rok i popust ===== */
/* Oba su stajala kao .topic__d — 14.5px u blagoj boji, ista mjera kao sitne
   napomene drugdje po stranici. Rok je najvazniji podatak cijele sekcije. */
.natjecaj__kljucno { margin-top: clamp(1.4rem, 2.6vw, 2rem); display: grid; gap: .8rem; }
.natjecaj__rok {
  margin: 0; padding: .65rem 0 .65rem 1rem;
  border-left: 3px solid var(--accent-deep);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h4); line-height: 1.3; color: var(--accent-deep);
}
.natjecaj__popust {
  margin: 0; padding-left: calc(1rem + 3px);
  font-size: var(--t-body); line-height: 1.45; color: var(--ink-2);
}

/* Panel fotografija je 3:2 u uspravnom okviru heroja (0.85), pa se vidi samo
   56% njezine sirine. Sredinski kadar reze govornicu s lijeva — a ona je
   tezište slike. Prozor se zato pomice ulijevo. */
.hero__figure--panel img { object-position: 34% center; }
@media (max-width: 900px) { .hero__figure--panel img { object-position: center; } }

/* Fotografija uz temu sjeda u drugi stupac .themesplit, koji je dosad stajao
   prazan. Okvir joj daje isto pravilo kao svim ostalim fotografijama. */
.themesplit__media { margin: 0; align-self: start; }
.themesplit__media img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .themesplit__media { margin-top: clamp(.6rem, 2vw, 1rem); } }

/* ===== zahvala ispod fotografije (advent) =====
   Bila su tri retka razdvojena <br>, sva u istoj sitnoj sivoj mjeri. Imena i
   funkcije stapali su se u jedan blok, a u uskom stupcu troslojne mreze
   svaka je funkcija prelazila u dva-tri retka. */
.zahvala { display: grid; gap: .55rem; }
.zahvala__naslov {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-sm); letter-spacing: .02em; color: var(--theme);
}
.zahvala__osoba { display: grid; gap: .1rem; }
.zahvala__ime { font-weight: 700; color: var(--ink-2); }
.zahvala__uloga { font-size: .92em; color: var(--muted); text-wrap: pretty; }

/* Tablica kotizacija ima sada tri stupca umjesto pet, pa joj globalni
   min-width: 660px nameće vodoravno klizanje koje joj više ne treba.
   Ostale .ptable tablice (smještaj) ostaju na 660 — njima treba. */
/* 860px, a ne 620: na 768 je okvir 650px, dakle 10px uži od globalnih 660 —
   tablica je klizila zbog deset piksela. */
@media (max-width: 860px) {
  /* Zaglavlje tablice kotizacija bilo je 14.5px: naziv razdoblja i datum
     ispod njega zauzimali su 108px visine, više nego ijedan redak s cijenom.
     Na telefonu idu korak dolje — datum je podatak koji se pročita jednom. */
  .ptable--fees thead th { font-size: 11px; letter-spacing: .08em; }
  .ptable--fees thead th span { font-size: 10.5px; margin-top: .18rem; }
  /* Napomena ispod tablice je sitni tekst, a stajala je na mjeri tijela. */
  .fees__note { font-size: 13px; line-height: 1.5; }
  .ptable--fees { min-width: 0; }
  /* Tijelo tablice bilo je na 14.5px uz 11px razmaka: prvi redak visok 93px,
     cijela tablica 354px. Naziv kategorije ide dolje jer se čita jednom,
     cijena ostaje najkrupnija jer je ona razlog zbog kojeg se tablica gleda. */
  .ptable--fees th, .ptable--fees td { padding: .55rem .5rem; }
  .ptable--fees tbody th { font-size: 13px; line-height: 1.3; }
  .ptable--fees td { white-space: nowrap; font-size: 14.5px; }
  .ptable--fees thead th { letter-spacing: .06em; }
}
/* Na 320px datum u podretku zaglavlja ("nakon 22. 11. 2026.") ne stane ni uz
   stisnuti razmak, pa se tablica vracala na klizanje. Ondje se lomi u dva retka. */
@media (max-width: 360px) {
  .ptable--fees thead th { padding-inline: .45rem; }
  .ptable--fees thead th span { letter-spacing: 0; }
  .ptable--fees td { padding-inline: .45rem; }
  /* Na 320px (iPhone SE) tablice kotizacija i dalje su klizile vodoravno —
     ondje je svaki piksel razmaka ono što ih prebacuje preko ruba. */
  .ptable--fees th, .ptable--fees td { padding-inline: .25rem; }
  .ptable--fees thead th { font-size: 9.5px; }
  .ptable--fees tbody th { font-size: 11px; }
  .ptable--fees td { font-size: 12px; }
  /* Praktikum ima najduže nazive kategorija i najduže raspone datuma, pa mu
     je i nakon stiskanja ostajalo 13px viška. table-layout: fixed dijeli
     raspoloživu širinu na stupce i tjera sadržaj da se prelomi — tablica tad
     ne može biti šira od okvira, bez obzira na duljinu naziva. */
  .ptable--fees-tri { table-layout: fixed; width: 100%; }
  /* „Specijalizanti" nema mjesta za prijelom pa je uz fiksni raspored
     prelazilo preko susjednog stupca; anywhere mu dopušta lom bilo gdje. */
  .ptable--fees-tri tbody th { font-size: 10.5px; overflow-wrap: anywhere; hyphens: auto; }
  .ptable--fees-tri th, .ptable--fees-tri td { padding-inline: .18rem; }
}
/* Kotizacije praktikuma imaju tri razdoblja, dakle stupac više nego advent.
   Na telefonu je to tablicu vraćalo na vodoravno klizanje — same brojke stanu,
   odnio ih je razmak oko ćelija. */
@media (max-width: 520px) {
  .ptable--fees-tri th, .ptable--fees-tri td { padding-inline: .3rem; }
  .ptable--fees-tri thead th { font-size: 10px; letter-spacing: .02em; }
  .ptable--fees-tri thead th span { letter-spacing: 0; }
  .ptable--fees-tri tbody th { font-size: 12px; }
  .ptable--fees-tri td { font-size: var(--t-sm); }
}

/* Zamka za botove: polje mora biti u DOM-u i dohvatljivo skripti, ali
   nevidljivo i nedostupno čovjeku. display:none neki boti prepoznaju i
   preskaču, pa se polje miče izvan zaslona umjesto da se gasi. */
.zamka {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Naslovi su u verzalu, a to brandu „NiPP" pojede malo „i" i pretvori ga u
   „NIPP". Ovaj raspon vraća izvorni slog bez obzira na transformaciju
   roditelja. Koristi se u svim naslovima koji sadrže ime. */
.nipp { text-transform: none; }

/* Kad je između naslova i kartica umetnut tekst, pravilo `.shead + *` pogodi
   tekst, a mreža kartica ostane bez razmaka i zalijepi se uz njega.
   Razmak zato nosi sam tekstualni blok. */
#edukacija .uvodcentar { margin-bottom: clamp(2rem, 3.6vw, 3.2rem); }
/* .uvodcentar .lead ima marginu 0 jer je zamišljen kao jedan odlomak;
   ovdje su dvije rečenice pa im treba razmak između. */
#edukacija .uvodcentar .lead + .lead { margin-top: clamp(.5rem, 1.1vw, .85rem); }

/* Poveznica ispod popisa „Zašto doći na NiPP" */
.bullets__vise { margin: clamp(1.2rem, 2.4vw, 2rem) 0 0; }

/* Ritam bloka „Zašto doći na NiPP": kapsula je stajala 14px od naslova, a
   naslov 28px od popisa — na sekciji koja odozgo ima 80px zraka to je bilo
   zbijeno. Razmaci rastu s širinom kao i ostatak sustava. */
#donosi .shead { gap: clamp(.9rem, 1.7vw, 1.4rem); }
#donosi .shead + .bullets { margin-top: clamp(1.6rem, 3vw, 2.6rem); }

/* ===== izdvojena knjiga u biblioteci =====
   Prije je bila kartica preko cijele širine mreže: korice lijevo, dva kratka
   retka desno i gotovo 900px praznine. Sada je ploča omeđene širine,
   centrirana, s NiPP znakom kao vodenim žigom — pa izgleda namjerno i bez
   opisa, koji za ovu knjigu još nemamo. */
.istaknuta {
  grid-column: 1 / -1;
  position: relative; overflow: hidden;
  /* width: 100% — bez toga se stavka u mreži steže na širinu sadržaja
     (639px umjesto dopuštenih 864) jer .books poravnava stavke na početak. */
  width: 100%; max-width: min(100%, 54rem); margin-inline: auto;
  background: var(--theme-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.istaknuta__zig {
  position: absolute; z-index: 0; right: -12%; bottom: -34%;
  width: min(46%, 300px); aspect-ratio: 1;
  color: var(--theme); opacity: .07; pointer-events: none;
}
.istaknuta__link {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: clamp(1.3rem, 3.4vw, 2.6rem); align-items: center;
  padding: clamp(1.2rem, 2.6vw, 2.2rem);
  text-decoration: none;
}
/* korice dobivaju isti pasparti kao fotografije drugdje na webu */
.istaknuta .book__cover {
  background: var(--paper); padding: clamp(.4rem, .8vw, .7rem);
  border-radius: var(--r-sm); aspect-ratio: auto; overflow: visible;
  box-shadow: 0 0 0 1px var(--line-soft),
    clamp(8px, .9vw, 13px) clamp(8px, .9vw, 13px) 0 -1px color-mix(in srgb, var(--theme) 26%, transparent);
}
.istaknuta .book__cover img { width: 100%; height: auto; border-radius: 0; object-fit: contain; }
.istaknuta .book__cover::before { display: none; }
.istaknuta__meta { display: grid; gap: .45rem; justify-items: start; }
.istaknuta__oznaka {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-label); letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted);
}
.istaknuta__naslov { margin: 0; font-size: var(--t-h2b); line-height: 1.15; color: var(--theme); }
.istaknuta__autor  { margin: 0; font-size: var(--t-body); color: var(--ink-2); }
.istaknuta__cta {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: clamp(.5rem, 1.2vw, .9rem);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .06em; text-transform: uppercase; color: var(--theme);
  border-bottom: 2px solid color-mix(in srgb, var(--theme) 35%, transparent);
}
.istaknuta__cta svg { transition: transform .4s var(--ease); }
.istaknuta__link:hover .istaknuta__cta { border-bottom-color: currentColor; }
.istaknuta__link:hover .istaknuta__cta svg { transform: translate(3px, -3px); }
.istaknuta__link:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; border-radius: var(--r-lg); }

@media (max-width: 680px) {
  .istaknuta__link { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .istaknuta .book__cover { width: min(100%, 210px); }
  .istaknuta__meta { justify-items: center; }
}

/* Razmak u .hero__copy ograničen je kapom od 1.05svh, što na zaslonu od 900px
   daje svega 9px. Na punim herojima skupova ta kapa ima smisla — ondje se
   bori za okomiti prostor. Kompaktni heroji nemaju tu stisku, a naslov im je
   stajao 9px od teksta ispod. */
.hero--compact .hero__copy { gap: clamp(1rem, 1.9vw, 1.7rem); }

/* ===== odbrojavanje do početka skupa =====
   Stoji ondje gdje je prije bila fotografija. Tri jednake kapsule u redu,
   svaka sa svojom brojkom i oznakom; red se razvlači preko cijele širine
   bloka. */
.odbroj {
  align-self: center; justify-self: stretch;
  display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem);
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
  background: var(--theme-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.odbroj__nad {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-label); letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted);
}
/* tri jednaka stupca: kapsule su iste širine bez obzira na duljinu brojke */
.odbroj__polja {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 1.2vw, .9rem);
}
.odbroj__polje {
  display: grid; justify-items: center; gap: .2rem;
  padding: clamp(.7rem, 1.6vw, 1.1rem) clamp(.3rem, .8vw, .6rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.odbroj__broj {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3rem); line-height: 1;
  color: var(--theme);
  /* tabularne znamenke: bez njih brojka poskakuje svake minute */
  font-variant-numeric: tabular-nums;
}
.odbroj__oznaka {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}
.odbroj--pocelo .odbroj__nad::after { content: ' — skup je počeo'; }

/* ===== preuzimanje programa ===== */
.preuzmi {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--theme-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.preuzmi__tekst { display: grid; gap: clamp(.5rem, 1.1vw, .8rem); justify-items: start; }
.preuzmi__tekst h2 { margin: 0; }
.preuzmi__tekst .lead { margin: 0; }
.preuzmi__gumb { white-space: nowrap; }
/* bez gumba stupac za njega nema smisla */
.preuzmi--uskoro { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .preuzmi { grid-template-columns: minmax(0, 1fr); }
  .preuzmi__gumb { justify-self: start; white-space: normal; }
}

/* Nazivi komora u kartici bodova — podebljani, ali u istoj mjeri i boji kao
   okolni tekst; bold je jedina razlika. */
.komora { font-weight: 700; color: var(--ink-2); }

/* Datum u zaglavlju tablice kotizacija nosi rok, pa mora biti čitljiv kao i
   sam naziv razdoblja. Osnovno pravilo ga je stavljalo na težinu 500,
   blijedu boju i 80% prozirnosti — bio je najtiši dio najvažnijeg retka. */
.ptable--fees thead th span { font-weight: 700; color: var(--ink-2); opacity: 1; }

/* Registracijski obrazac na telefonu. Polja su bila visoka 53px uz 12px
   razmaka među njima, a oznake iznad njih 12.8px s razmaknutim slovima —
   cijeli obrazac 1395px, dakle dva i pol zaslona za jedanaest polja.
   Slovo u polju OSTAJE 16px: ispod toga iOS zumira stranicu pri dodiru i
   korisnik ispada iz konteksta. Skraćuje se sve oko njega, ne ono. */
@media (max-width: 720px) {
  .form, .form__row { gap: .6rem; }
  .field { gap: .25rem; }
  .field label { font-size: 11.5px; letter-spacing: .1em; }
  .field input, .field select, .field textarea { padding: .62rem .8rem; }
  .field textarea { min-height: 84px; }
  .field__error { font-size: 11.5px; }
  .consent { gap: .55rem; padding: .85rem .9rem; }
  .check span { font-size: 13px; line-height: 1.45; }
}

/* Podnožje na telefonu. Bilo je visoko 1453px na zaslonu od 812 — gotovo dva
   zaslona samo podnožja, i to nakon što je stranica već gotova. Najveći dio
   nisu slova nego razmaci: svaka poveznica ima 40px dodirne mete (to ostaje,
   bez toga se promašuje), a na nju se dodavalo još 8.8px razmaka — šest
   poveznica u stupcu tako nosi 50px viška bez ijednog slova. Razmak ide na
   nulu, meta ostaje. Ostalo je korak slova niže. */
@media (max-width: 720px) {
  .footer { min-height: 0; }
  .footer__top { gap: 1.6rem; padding-block: 1.6rem; }
  .footer__nl { gap: .7rem; }
  .footer__nl h2 { font-size: 18px; }
  .footer__nl .lead { font-size: 14px; line-height: 1.45; }
  .news { gap: .45rem; }
  .news input { padding: .72rem 1rem; }
  .footer__cols { gap: 1.1rem; }
  .footer__col { gap: 0; }
  .footer__col h4 { font-size: 11px; margin-bottom: .2rem; }
  .footer__col a { font-size: 13.5px; }
  .footer__mid { gap: 1.1rem; padding-block: 1.2rem; }
  .footer__legal { gap: .2rem 1rem; }
  .footer__legal button { font-size: 12.5px; }
  .footer__legal a { font-size: 12.5px; }
  /* Sudski podaci i autorstvo su obvezni otisak, ne sadržaj koji se čita —
     stajali su na 14.5px i zauzimali 324px, više nego cijeli stupac
     poveznica. */
  .footer__imprint, .footer__bot { font-size: 12px; line-height: 1.5; }
  .footer__bot { gap: .5rem; }
  .footer__logos img { height: 24px; }
  .footer__logos .parenthood { height: 40px; }
}

/* Kartica s bodovima na telefonu. U stupcu od 164px nosi četiri razine teksta
   — oznaku, glavni redak, pojašnjenje i popis komora koje tek dolaze — pa je
   narasla na 396px, dvostruko više od susjednih kartica u istoj mreži.
   Glavni redak ostaje najkrupniji jer je on podatak; sve ispod njega je
   pojašnjenje i ide korak dolje. */
@media (max-width: 560px) {
  .infocard { padding: .8rem; }
  .infocard__ico { width: 32px; height: 32px; }
  .infocard__k { font-size: 11px; }
  .infocard__v { font-size: 14.5px; line-height: 1.25; }
  .infocard__n { font-size: 12.5px; line-height: 1.35; }
  .infocard__n.infocard__soon { font-size: 12px; margin-top: .25rem; }
}

/* Naslovnica zbornika uz natječaj za radove specijalizanata. Mala je namjerno
   — ona je dokaz da radovi doista negdje završe, ne glavni sadržaj sekcije. */
.natjecaj__korica {
  margin: clamp(1.1rem, 2vw, 1.6rem) 0 0;
  display: grid; gap: .65rem; justify-items: start;
  max-width: 190px;
}
.natjecaj__korica img {
  width: 100%; height: auto;
  border-radius: var(--r-sm);
  box-shadow: 0 18px 38px -24px rgba(23, 19, 58, .5);
}
.natjecaj__korica figcaption { font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
@media (max-width: 560px) { .natjecaj__korica { max-width: 150px; } }

/* .hero__uvod ima margin: 0 jer je bio jedan odlomak; otkad ih je dva, drugi
   bi se bez ovoga zalijepio uz prvi i razdvajanje se ne bi ni vidjelo. */
.hero__uvod + .hero__uvod { margin-top: clamp(.6rem, 1.2vw, .95rem); }

/* Zadnja natuknica nije bila stavka popisa nego zaključak koji ga sažima —
   kao natuknica s kvačicom čitala se kao peta jednakovrijedna stavka. */
.bullets__zaglavlje {
  margin: clamp(1.1rem, 2vw, 1.6rem) 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--t-body) * 1.08); line-height: 1.4;
  color: var(--theme); max-width: 50ch;
}
.bullets__vise { margin-top: clamp(1rem, 1.8vw, 1.4rem); }

/* Blok „Što je NiPP" izgubio je fotografiju desno. Bez ovoga tekst bi ostao
   u stupcu od 1.15fr, a desna polovica sekcije zjapila prazna. */
.split--sam { grid-template-columns: minmax(0, 1fr); }

/* ---- mobile menu on short screens ----
   On a 667px phone the closed menu already ran past the bottom edge, and one
   open group pushed Biblioteka, Poslovne prilike and Kontakt out of sight. The
   rows give back the height instead. */
@media (max-width: 900px) and (max-height: 740px) {
  .drawer__head { padding: .78rem 0; font-size: 1.16rem; }
  .drawer__panel a { padding: .44rem 0 .44rem 1.1rem; }
  .drawer__panel > div > :last-child { margin-bottom: .8rem; }
  .drawer__inner { padding-bottom: 1.3rem; }
  .drawer__foot { margin-top: 1rem; }
}

/* ---- mosaic rows ----
   .kolaz declared three columns, three rows and a locked 4/3 outer shape, but
   the section holds eleven tiles and two of them span (2x2 and 2 rows) - that
   needs fifteen cells. Grid added the missing rows inside a height that could
   not grow, so every row collapsed to a strip and object-fit cropped the
   photographs to slivers. The rows now take their height from the pictures:
   each small tile is 4/3, the big one 3/2 across its two columns, and the
   tall one simply fills the two rows those give it. */
.kolaz { aspect-ratio: auto; grid-template-rows: none; }
.kolaz__item { aspect-ratio: 4 / 3; }
.kolaz__item--velika { aspect-ratio: 3 / 2; }
.kolaz__item--visoka { aspect-ratio: auto; }
/* These sit after the stylesheet's own 760px block, so the phone rules have to
   be stated again or the tall tile keeps its desktop height there and leaves a
   gap beside the tile next to it. */
/* the photographs read as prints in a frame, so the picture itself gets the
   same soft corner the frame has, at every width */
.kolaz__item img { border-radius: clamp(5px, .55vw, 9px); }

@media (max-width: 760px) {
  /* One shape for every tile on a phone. A tall tile beside two short ones
     staggered the rows and the mosaic read as misaligned; two equal columns
     of the same 4/3 frame, with the widest photograph across the top, does
     not. */
  .kolaz__item { aspect-ratio: 4 / 3; }
  .kolaz__item--velika { aspect-ratio: 3 / 2; grid-column: 1 / -1; }
  .kolaz__item--visoka { aspect-ratio: 4 / 3; grid-row: auto; }
  /* that one photograph is upright with the faces high in the frame, so a
     centred crop would cut the heads */
  .kolaz__item--visoka img { object-position: center 40%; }
}

/* four-tile mosaic (Poslovne prilike): four pictures cannot fill a three
   column grid without a spanning tile, and the tall slot there holds a
   landscape photograph - as a portrait cell it cropped away half the frame.
   Two equal columns suit four landscape shots and crop almost nothing. */
.kolaz--cetiri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kolaz--cetiri .kolaz__item--velika,
.kolaz--cetiri .kolaz__item--visoka { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }

/* ---- round 2026-10-20 ----------------------------------------------- */

/* O nama > Vizija: the round table seen from above, beside the text. */
.vizija {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
}
.vizija__foto {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--mist-2);
}
.vizija__foto img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .vizija { grid-template-columns: 1fr; }
  .vizija__foto { order: -1; }
}




/* NiPP biblioteka: the Quo vadis proceedings close the shelf and are called
   out — the only entry with the accent frame. */
.book--istaknuta .book__cover {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.book--istaknuta .book__title { color: var(--accent); }

/* The qualification after the name ("dr. med.", "mag. pharm.") is not part of
   the name, so it does not take the name's weight — the same on every page. */
.spkcard__suffix { font-weight: 400; }

/* ---- round 2026-10-20, second pass ---------------------------------- */


/* Praktikum: what the fee covers, directly under the table. */
.kotizacija__ukljucuje {
  margin-top: clamp(.9rem, 1.6vw, 1.3rem);
  padding: clamp(.9rem, 1.6vw, 1.3rem) clamp(1rem, 1.8vw, 1.5rem);
  background: var(--mist-2);
  border-radius: var(--r-md);
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2);
}

/* Nurse: the Top tema now carries the subject's own title. */
.tema__naslov {
  margin-bottom: clamp(.5rem, 1vw, .8rem);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  line-height: 1.18;
}

/* Nurse: under the "Radionice" capsule the three titles are set bigger and
   in caps, so the capsule labels them rather than competing with them. */
#radionice .reason__t {
  text-transform: uppercase;
  font-size: clamp(1rem, .92rem + .45vw, 1.22rem);
  letter-spacing: .01em; line-height: 1.3;
}

/* A name and its title are read as one thing, so they are not split across
   lines. Below 620px the line simply cannot hold them, so there it wraps. */
.ime-titula { white-space: nowrap; }
@media (max-width: 620px) { .ime-titula { white-space: normal; } }

/* ---- round 2026-10-20, third pass ------------------------------------ */

/* Naslovnica: "Zašto doći na NiPP?" keeps the reasons, and the disciplines now
   have a section of their own, titled with the sentence about the experts.
   The tinted band runs straight on, so the new section opens without a second
   top edge under the one above it. */
.eksperti {
  font-size: clamp(1.22rem, 1rem + 1.1vw, 1.95rem);
  line-height: 1.3;
  /* wide enough to fall into two or three lines, and centred over the table */
  max-width: min(100%, 62ch);
  margin-inline: auto;
}

/* A whole sentence as the page title. The display step is sized for two or
   three words, so these two heroes get their own step; the lines still arrive
   one after another the way every other heading does. */
.display--recenica {
  font-size: clamp(1.4rem, 1rem + 1.95vw, 2.8rem);
  line-height: 1.24;
  letter-spacing: -.004em;
}
/* the centred hero caps a title at 16ch, which is right for two or three words
   and far too narrow for a sentence: the lines are broken by hand here. */
.hero--center .display--recenica { max-width: min(100%, 46ch); }
.display--recenica .rl > span { transition-duration: .95s; }
.lead--odjek {
  margin-top: clamp(.7rem, 1.6vw, 1.2rem);
  font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem);
  color: var(--ink-2);
}

/* O nama > Stručni voditelj: the portrait file carries the headroom it was
   missing, so the frame fills with it instead of fading the top away. */
.split__media--puna { background: var(--paper); }
.split__media--puna img {
  object-fit: cover; object-position: center top;
  padding-top: 0;
  -webkit-mask-image: none; mask-image: none;
}


/* Poslovne prilike > "NiPP daje više svega što izlagači žele": the four cards
   are the NiPP orange itself, their lines set in capitals. */
.section--ink .reasons--narancaste .reason {
  background: var(--accent);
  border-color: var(--accent);
}
.section--ink .reasons--narancaste .reason:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 38px -24px rgba(234, 87, 38, .85);
}
.section--ink .reasons--narancaste .reason__t {
  text-transform: uppercase;
  font-size: clamp(.98rem, .9rem + .4vw, 1.18rem);
  letter-spacing: .02em; line-height: 1.34;
  color: #fff;
}
.section--ink .reasons--narancaste .reason__ico {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border-color: transparent;
}

/* NiPP Nurse: what the fee covers is read right under the title, not opened
   from the questions at the foot of the page. */
.kotizacija__naslov {
  margin: clamp(.8rem, 1.6vw, 1.2rem) 0 0;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem);
}
.kotizacija__naslov + .kotizacija__ukljucuje { margin-top: .5rem; }

/* NiPP biblioteka: the whole card is the link, so hovering it opens the cover
   instead of lighting up a button that is no longer there. */
.istaknuta__link { perspective: 1400px; }
.istaknuta .book__cover {
  transform-style: preserve-3d;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.istaknuta .book__cover img {
  transform-origin: left center;
  transition: transform .6s var(--ease);
}
.istaknuta__link:hover .book__cover img,
.istaknuta__link:focus-visible .book__cover img { transform: rotateY(-17deg); }
.istaknuta__link:hover .book__cover,
.istaknuta__link:focus-visible .book__cover {
  box-shadow: 0 0 0 1px var(--line-soft),
    clamp(14px, 1.5vw, 22px) clamp(10px, 1.1vw, 16px) 0 -1px color-mix(in srgb, var(--theme) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .istaknuta .book__cover img { transition: none; }
  .istaknuta__link:hover .book__cover img { transform: none; }
}

/* ---- round 2026-10-20, fourth pass ----------------------------------- */

/* Naslovnica: the table, the button under it and the rotating words were
   sitting too close to read as three separate beats. */
.bullets__vise--prostor { margin-top: clamp(1.9rem, 3.6vw, 3.2rem); }
.kicker--prostor { margin-top: clamp(1.7rem, 3.2vw, 2.8rem); }

/* Advent: what the fee covers runs the width of the table, so the 46ch measure
   that keeps body text readable elsewhere does not apply to it. */
.fees__note--siroka { max-width: none; }

/* Praktikum: the proceedings are only named now — without the cover beside it,
   the 190px column the cover needed left the name in five short lines. */
.natjecaj__korica--tekst { max-width: none; }
.natjecaj__korica--tekst figcaption {
  font-size: calc(var(--t-sm) * 1.06);
  line-height: 1.45;
}

/* NiPP Nurse: "Namijenjeno" is one row under a centred heading, so the row is
   centred too instead of standing alone on the left. */
.discipline--sredina { max-width: max-content; margin-inline: auto; }
.discipline--sredina .discipline__grid--jedan > li { justify-content: center; }

/* O nama > Vizija: the photograph is cropped to the table itself, so the frame
   is square — the table reads at twice the size and nothing is cut off. */
.vizija__foto img { aspect-ratio: 1 / 1; }
@media (max-width: 900px) { .vizija__foto img { aspect-ratio: 4 / 3; } }