/* ViZZ redesign 2026 — shell (header, footer) and the home screen.
   Loads after vizz-tokens.css, which owns the tokens, the base element
   styles and the shared primitives.

   Every value here is measured from the approved prototype
   (design_handoff_vizz/prototype/ViZZ-v5-offline.html); see 01-design-tokens.md
   and 02-screens.md. The prototype drives its two breakpoints from JS —
   `narrow` (<900px) and `mob` (<620px) — which become plain media queries. */

/* color-mix(in srgb, C N%, transparent) is exactly C at N% alpha, but it needs
   Chrome 111+ / Safari 16.2+ / Firefox 113+; where it is unsupported the whole
   declaration is dropped and the element falls back to full ink — which silently
   turned every soft-ink value in this file black. rgba() with a channel triplet
   is identical output and universally supported, so the soft inks below use it. */
:root {
  --ink-rgb: 30, 33, 26;      /* --color-text  #1e211a */
  --hairline: rgba(30, 33, 26, 0.08);

  /* One duration and one curve for every transition in this file, so nothing
     moves at a different speed or eases differently from anything else.
     .18s is the value 01-design-tokens.md gives for the collection-card hover;
     the curve is the prototype's own, used by the drawer keyframes in
     vizz-tokens.css. Change them here and the whole shell follows. */
  --motion-duration: .18s;
  --motion-ease: cubic-bezier(.22, .72, .18, 1);
}

/* The prototype's base stylesheet carries this reset (design-system-styles.css
   line 81) and vizz-tokens.css does not, so without it every element with both
   a width and padding comes out too wide — the hero search field was 756px
   against the prototype's 740px. Bootstrap's Reboot supplies the same reset,
   which is why the Bootstrap variant did not have this bug. */
*, *::before, *::after { box-sizing: border-box; }

/* Sticky footer. The page is a column at least as tall as the viewport, and
   .vizz-fill takes whatever height is left over, so the footer lands on the
   bottom edge when the content is short and flows normally when it is not.
   The cms_toolbar markup and the trailing <script> tags become flex items too,
   but they are fixed-position or display:none and so contribute no height. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.vizz-fill { flex: 1 1 auto; }
.vizz-footer { flex: none; }

/* The toolbar pushes the body down with a margin of its own height, so the
   full 100vh on top of that would overflow by exactly that much. */
body.cms-toolbar-expanded,
body.cms-toolbar-expanding { min-height: calc(100vh - 46px); }

/* ── header ───────────────────────────────────────────────────────── */

.vizz-header {
  background: var(--color-surface);
  box-shadow: inset 0 -1px 0 var(--hairline);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* No left padding: the logo bleeds to the container edge. */
.vizz-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 40px) 0 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 40px);
  position: relative;
}

.vizz-header__logo { display: flex; align-items: stretch; }
.vizz-header__logo img {
  height: 62px;
  width: auto;
  display: block;
  /* The wordmark is a flat JPEG on white; multiply drops its box into the
     surface. Replace with a transparent PNG/SVG and remove this. */
  mix-blend-mode: multiply;
}

.vizz-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-size: 24px;
  cursor: pointer;
}

.vizz-nav {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}

/* Items are full-height so the hover target is tall. */
.vizz-nav__item {
  display: flex;
  align-items: center;
  padding: 0 15px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}
.vizz-nav__item:hover { color: var(--color-accent-700); text-decoration: none; }

.vizz-nav__about { position: relative; display: flex; align-items: stretch; }
.vizz-nav__about-link { gap: 7px; }
.vizz-nav__about-link .bi-chevron-down { font-size: 12px; opacity: .6; }
/* Scoped to pointer widths: :hover also fires on touch, and a tap would
   otherwise open the panel the mobile chevron is there to control. */
@media (min-width: 900px) {
  /* The chevron beside the label is decoration up here. */
  .vizz-nav__about-toggle { display: none; }
  .vizz-nav__about:hover .vizz-nav__about-link,
  .vizz-nav__about:focus-within .vizz-nav__about-link { color: var(--color-accent-700); }
  .vizz-nav__about:hover .bi-chevron-down,
  .vizz-nav__about:focus-within .bi-chevron-down { opacity: 1; }
}

/* Revealed by hovering the group — the parent itself is a link, so it cannot
   also be the thing that opens the panel. :focus-within covers keyboards,
   which have no hover: tabbing into the parent link opens it. The panel sits
   flush under the item (top: 100% of a full-height group) so there is no gap
   for the pointer to cross on the way down. */
.vizz-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--color-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 40;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease),
    visibility 0s linear var(--motion-duration);
}
@media (min-width: 900px) {
  .vizz-nav__about:hover .vizz-nav__dropdown,
  .vizz-nav__about:focus-within .vizz-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity var(--motion-duration) var(--motion-ease),
      transform var(--motion-duration) var(--motion-ease),
      visibility 0s;
  }
}
/* All padding lives on the inner element so that below 900px it collapses
   together with the row — see the narrow block. */
.vizz-nav__dropdown-inner {
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.vizz-nav__dropdown a {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
}
.vizz-nav__dropdown a:hover { background: var(--color-surface); text-decoration: none; }
/* The entry you are on. The apphook's three search entries share one path and
   differ only by query string, so this is the only thing telling Knjige from
   Razglednice once you are on one of them (kolekcija/cms_menus.py). */
.vizz-nav__dropdown a[aria-current="page"] {
  background: var(--color-accent-200);
  color: var(--color-accent-800);
  font-weight: 600;
}

.vizz-nav__tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 12px;
}
.vizz-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-size: 19px;
  cursor: pointer;
}
.vizz-icon-btn:hover { background: var(--color-neutral-200); }

.vizz-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 0 8px;
  padding-left: 14px;
  border-left: 1px solid var(--color-divider);
}
/* One <form> per language — each needs its own `next` (base.html). The forms
   are laid out away so the buttons stay direct flex children of .vizz-lang and
   the pill spacing is unchanged. */
.vizz-lang form { display: contents; }
.vizz-lang__btn {
  padding: 5px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(32, 30, 29, 0.5);
  cursor: pointer;
}
.vizz-lang__btn[aria-current="true"] {
  background: var(--color-text);
  color: var(--color-bg);
}

/* django CMS pins its toolbar to the top of the viewport (position: fixed,
   min-height 46px) and pushes the page down with a margin-top on <body>. A
   sticky header at top:0 still sticks to the *viewport*, so it would sit
   underneath the toolbar; it needs the same offset while the toolbar is on
   screen. The -expanding class is included so the header moves with the
   toolbar's open animation instead of jumping at the end.
   The toolbar's own z-index is 9999999, well clear of this header's 30. */
body.cms-toolbar-expanded .vizz-header,
body.cms-toolbar-expanding .vizz-header { top: 46px; }

/* ── home: hero ───────────────────────────────────────────────────── */

.vizz-hero {
  background-image: url("../img/hero-background.jpg");
  background-size: cover;
  background-position: center 40%;
}
.vizz-hero__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(52px, 9vw, 150px) var(--page-pad);
}
.vizz-hero__kicker {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-kicker);
  margin-bottom: 26px;
}
.vizz-hero__title {
  font-size: clamp(40px, 4.2vw, 66px);
  line-height: 1.07;
  font-weight: 600;
  max-width: 19ch;
  margin: 0 0 40px;
  color: #1c1f18;
}
.vizz-hero__lead {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.65;
  max-width: 50ch;
  margin: 0;
  color: #26291f;
}

.vizz-hero__search {
  display: flex;
  align-items: center;
  margin-top: 52px;
  max-width: 740px;
  padding: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 8px 26px rgba(50, 35, 30, 0.16);
}
.vizz-hero__input {
  flex: 1;
  min-width: 0;
  min-height: 62px;
  padding: 0 22px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--color-text);
}
.vizz-hero__input::placeholder { color: rgba(var(--ink-rgb), 0.42); }
.vizz-hero__input:focus { outline: none; }
.vizz-hero__search:focus-within { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.vizz-hero__submit {
  flex: none;
  min-height: 62px;
  padding: 0 34px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  transition: background var(--motion-duration) var(--motion-ease);
}
.vizz-hero__submit:hover { background: var(--color-accent-600); }

/* ── home: collections ────────────────────────────────────────────── */

.vizz-collections {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(44px, 5vw, 88px) var(--page-pad) 8px;
}
/* The only centred text in the design. */
.vizz-collections__title {
  margin: 0 auto 20px;
  font-size: clamp(26px, 2.2vw, 34px);
  text-align: center;
}
.vizz-collections__intro {
  margin: 0 auto clamp(36px, 4vw, 56px);
  max-width: 74ch;
  text-align: center;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(var(--ink-rgb), 0.78);
}
.vizz-collections__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: 28px;
}

/* The photo bleeds to the card's left and top edges; only the text is padded. */
.vizz-coll-card {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(20px, 2vw, 32px);
  padding: 0 32px 0 0;
  min-height: 440px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--motion-duration) var(--motion-ease);
}
.vizz-coll-card:hover { transform: translateY(-3px); text-decoration: none; color: var(--color-text); }
.vizz-coll-card__media { overflow: hidden; align-self: stretch; }
.vizz-coll-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.vizz-coll-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 36px 0;
}
.vizz-coll-card__kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.vizz-coll-card__body h3 { margin: 0; font-size: 30px; }
.vizz-coll-card__body p { margin: 0; font-size: 17px; line-height: 1.6; }
.vizz-coll-card__cta {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
}

.vizz-coll-card--books { background: var(--coll-books-bg); }
.vizz-coll-card--books .vizz-coll-card__kicker,
.vizz-coll-card--books .vizz-coll-card__cta { color: var(--coll-books-ink); }
.vizz-coll-card--books p { color: rgba(58, 42, 34, 0.78); }

.vizz-coll-card--cards { background: var(--coll-cards-bg); }
.vizz-coll-card--cards .vizz-coll-card__kicker,
.vizz-coll-card--cards .vizz-coll-card__cta { color: var(--coll-cards-ink); }
.vizz-coll-card--cards p { color: rgba(51, 48, 31, 0.78); }

/* ── home: recently digitised ─────────────────────────────────────── */

.vizz-recent {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 96px) var(--page-pad);
}
.vizz-recent__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.vizz-recent__head h2 { margin: 0; font-size: clamp(26px, 2.2vw, 34px); }
.vizz-recent__all {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-accent-700);
  text-decoration: none;
}
.vizz-recent__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 32px 28px;
}
.vizz-recent__item { display: block; color: var(--color-text); text-decoration: none; }
.vizz-recent__item:hover { color: var(--color-text); text-decoration: none; }
.vizz-recent__thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-surface);
}
.vizz-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vizz-recent__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  margin-top: 8px;
  text-wrap: pretty;
}
.vizz-recent__meta {
  font-size: 11px;
  line-height: 1.5;
  margin-top: 3px;
  color: rgba(var(--ink-rgb), 0.55);
}

/* ── home: poster band ────────────────────────────────────────────── */

.vizz-poster {
  display: block;
  background: var(--coll-cards-bg);
  color: var(--color-accent-ink);
  text-decoration: none;
}
.vizz-poster:hover { color: var(--color-accent-ink); text-decoration: none; }
.vizz-poster__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 104px) var(--page-pad);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 64px);
  align-items: end;
}
.vizz-poster__inner h2 {
  margin: 0;
  font-size: clamp(30px, 2.7vw, 42px);
  line-height: 1.12;
  max-width: 22ch;
  color: var(--color-accent-ink);
}
.vizz-poster__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(35, 38, 31, 0.8);
}
.vizz-poster__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  background: #23261f;
  color: #eef5d4;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  transition: transform var(--motion-duration) var(--motion-ease);
}
/* Hovering the pill itself, not the band around it. */
.vizz-poster__cta:hover { transform: scale(1.04); }
.vizz-poster__cta > span { transition: transform var(--motion-duration) var(--motion-ease); }
.vizz-poster__cta:hover > span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .vizz-poster__cta,
  .vizz-poster__cta > span { transition: none; }
  .vizz-poster__cta:hover,
  .vizz-poster__cta:hover > span { transform: none; }
}

/* ── footer ───────────────────────────────────────────────────────── */

.vizz-footer {
  background: var(--color-surface);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.vizz-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 48px var(--page-pad) 64px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.vizz-footer__logos { display: flex; align-items: center; gap: 22px; }
.vizz-footer__logos img { display: block; width: auto; }
.vizz-footer__logo-vizz { height: 40px; mix-blend-mode: multiply; }
.vizz-footer__logo-gkc { height: 44px; }
.vizz-footer__links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.62);
}
.vizz-footer__links a { color: inherit; text-decoration: none; }
.vizz-footer__links a:hover { color: var(--color-accent-700); text-decoration: underline; }
/* The item for the page you are on is full ink; the rest stay at 62%. Driven
   by aria-current, which is what the CMS menu's `selected` flag will set. */
.vizz-footer__links a[aria-current="page"] { color: var(--color-text); }
.vizz-footer__sep {
  width: 1px;
  height: 14px;
  background: rgba(var(--ink-rgb), 0.22);
}
.vizz-footer__copy {
  font-size: 11px;
  color: rgba(var(--ink-rgb), 0.5);
}

/* ── narrow (<900px) ──────────────────────────────────────────────── */

@media (max-width: 899px) {
  .vizz-burger { display: flex; }

  /* The nav becomes a panel dropped under the header. It stays in the DOM so
     opening and closing can be animated — `display` is not animatable, so the
     closed state is opacity + transform, with `visibility` holding it out of
     the tab order and the accessibility tree. The visibility transition is
     delayed by the duration on the way out so the panel stays hittable while
     it fades, and is instant on the way in. Absolutely positioned, so leaving
     it rendered costs no layout. */
  .vizz-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    padding: 8px 10px 14px;
    gap: 2px;
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    z-index: 40;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--motion-duration) var(--motion-ease),
      transform var(--motion-duration) var(--motion-ease),
      visibility 0s linear var(--motion-duration);
  }
  .vizz-header[data-menu="open"] .vizz-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity var(--motion-duration) var(--motion-ease),
      transform var(--motion-duration) var(--motion-ease),
      visibility 0s;
  }

  .vizz-nav__item {
    min-height: 48px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 16px;
  }
  /* No hover on touch, so the chevron becomes a real control: the label still
     navigates, the button beside it opens the panel. Row + wrap keeps the two
     on one line and drops the panel onto its own via flex-basis. */
  .vizz-nav__about { flex-wrap: wrap; align-items: center; }
  .vizz-nav__about-link { flex: 1; }
  .vizz-nav__about-link .bi-chevron-down { display: none; }
  .vizz-nav__about-toggle {
    flex: none;
    padding-inline: 14px;
    cursor: pointer;
  }
  .vizz-nav__about-toggle .bi-chevron-down {
    font-size: 14px;
    opacity: .6;
    transition: transform var(--motion-duration) var(--motion-ease);
  }
  .vizz-nav__about-toggle[aria-expanded="true"] .bi-chevron-down {
    opacity: 1;
    transform: rotate(180deg);
  }

  /* In flow here rather than absolutely positioned, so opacity alone would
     leave a gap the height of the submenu while it is closed — the row has to
     collapse too. grid-template-rows 0fr -> 1fr animates to the panel's
     intrinsic height, so any number of menu items works with no height
     measured in script. The inner element needs min-height: 0 for the row to
     reach zero and overflow: hidden to clip its contents on the way. */
  .vizz-nav__dropdown {
    flex-basis: 100%;
    position: static;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--motion-duration) var(--motion-ease);
  }
  .vizz-nav__about-toggle[aria-expanded="true"] + .vizz-nav__dropdown {
    grid-template-rows: 1fr;
  }
  /* No vertical padding: min-height: 0 zeroes the content box but padding sits
     outside it, so it would survive the collapse. The breathing room comes
     from margins on the end items, inside the clipped flow instead. */
  .vizz-nav__dropdown-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 12px;
  }
  .vizz-nav__dropdown-inner > :first-child { margin-top: 4px; }
  .vizz-nav__dropdown-inner > :last-child { margin-bottom: 8px; }

  .vizz-nav__tools,
  .vizz-lang { min-height: 52px; padding-top: 6px; }

  .vizz-coll-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0 26px;
    min-height: 0;
  }
  .vizz-coll-card__media { height: 280px; }
  .vizz-coll-card__body { padding: 0 24px; }

  .vizz-poster__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Respect a reduced-motion preference: the panel still opens and closes, it
   just arrives without the slide and fade. vizz-tokens.css does the same for
   the drawer. */
@media (prefers-reduced-motion: reduce) {
  .vizz-nav,
  .vizz-header[data-menu="open"] .vizz-nav,
  .vizz-nav__dropdown,
  .vizz-nav__about:hover .vizz-nav__dropdown,
  .vizz-nav__about:focus-within .vizz-nav__dropdown,
  .vizz-nav__about-toggle .bi-chevron-down { transition: none; }
}

/* ── mobile (<620px) ──────────────────────────────────────────────── */

@media (max-width: 619px) {
  .vizz-header__logo img { height: 48px; }
}