/* HAKS – Hrvatski auto i karting savez. Static homepage redesign, 2026-11-09.
   Tokens → base → header → sections → footer → responsive → motion.
   Sizes are in rem; the root font-size grows on wide screens (see bottom). */

:root {
  --navy: #002d5f;        /* brand blue (live site, logo) */
  --navy-deep: #0d2239;   /* live page-header colour; hero text panel, calendar, footer */
  --ink: #14202e;
  --text: #2b3645;
  --muted: #66707f;
  --line: #d8dee8;
  --line-dark: rgba(255, 255, 255, 0.14);
  --paper: #f2f5f9;
  --white: #ffffff;
  --wrap: 87.5rem;        /* 1400px, the live container */
  --gutter: 1.25rem;
  --head: 6.5rem;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html { overflow-x: clip; }
body { margin: 0; font-family: var(--body); font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--white); }
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.05; color: var(--ink); letter-spacing: 0.005em; }
h1 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 600; line-height: 1.15; }
time { font-variant-numeric: tabular-nums; }
button { font: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--navy); color: #fff; }
.skip:focus { top: 1rem; }

/* Buttons and section heads */
.button { display: inline-block; padding: 0.8rem 1.5rem; background: var(--navy); color: #fff; font-family: var(--display); font-size: 1.125rem; font-weight: 600; line-height: 1; border: 2px solid var(--navy); cursor: pointer; transition: background-color 0.15s linear, border-color 0.15s linear; }
.button:hover { background: var(--navy-deep); border-color: var(--navy-deep); text-decoration: none; }
.button--ghost { background: transparent; color: var(--navy); transition: background-color 0.15s linear, color 0s 0.075s; }
.button--ghost:hover { background: var(--navy); color: #fff; }
.button--white { background: #fff; color: var(--navy); border-color: #fff; transition: background-color 0.15s linear, color 0s 0.075s; }
.button--white:hover { background: transparent; color: #fff; border-color: #fff; }

/* Kerb strip: a seamless 14 x 8 px tile of 45° stripes (period 9.9 px ⇒ 14 px along x); while
   its section is the one in focus (covering the middle of the screen) the tile scrolls. */
.section-head { --kerb: var(--ink); display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.2rem; margin-bottom: 1.75rem; background: repeating-linear-gradient(-45deg, var(--kerb) 0 4.95px, transparent 4.95px 9.9px) left bottom / 14px 8px repeat-x; }
.section-head.is-flowing { animation: kerbFlow 0.7s linear infinite; }
@keyframes kerbFlow { from { background-position-x: 0; } to { background-position-x: 14px; } }
.section-head .section-sub { margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 500; color: var(--muted); }
.section-head .more { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; font-family: var(--display); font-size: 1.125rem; font-weight: 600; }
.section-head .more span { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 2px; padding-bottom: 0.08em; transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.section-head .more svg { flex: none; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.section-head .more:hover { text-decoration: none; }
.section-head .more:hover span { background-size: 100% 2px; }
.section-head .more:hover svg { transform: translateX(4px); }
.section-head--dark { --kerb: rgba(255, 255, 255, 0.8); }
.section-head--plain { background: none; border-bottom: 1px solid var(--line); padding-bottom: 0.9rem; animation: none !important; }
.section-head--dark h2 { color: #fff; }
.section-head--dark .section-sub { color: rgba(255, 255, 255, 0.65); }
.section-head--dark .more { color: #fff; }

.cats { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0 0 0.45rem; font-family: var(--display); font-size: 0.9375rem; font-weight: 600; color: var(--navy); line-height: 1.2; }
.cats span + span::before { content: "/"; margin-right: 0.9rem; color: var(--muted); font-weight: 500; }

/* ---------- Top bar ---------- */
.topbar { background: var(--navy-deep); color: rgba(255, 255, 255, 0.78); font-size: 0.8125rem; }
.topbar-row { display: flex; align-items: center; justify-content: space-between; min-height: 2.25rem; }
.topbar-links { display: flex; align-self: stretch; gap: 0.25rem; margin-left: -0.75rem; }
.topbar-links li { display: flex; }
.topbar-links a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.75rem; color: #fff; line-height: 1.2; transition: background-color 0.15s linear; }
.topbar-links a:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.topbar-social { display: flex; gap: 0.35rem; }
.topbar-social a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: #fff; }
.topbar-social a:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow 0.2s, transform 0.3s; }
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(13, 34, 57, 0.08); }
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
.header-row { display: flex; align-items: center; gap: 1.5rem; min-height: var(--head); }
.logo img { width: auto; height: 4.6rem; }
.main-nav { display: flex; margin-left: clamp(0.75rem, 2.5vw, 2.5rem); }
.menu { display: flex; gap: 0.25rem; }
.menu > li { position: relative; display: flex; align-items: center; min-height: var(--head); } /* the item spans the full header height so the pointer can travel straight down into the dropdown / mega panel without leaving it */
.menu > li > a { position: relative; display: block; padding: 0.45rem 0.7rem; font-family: var(--display); font-size: 1.1rem; white-space: nowrap; font-weight: 600; color: var(--ink); line-height: 1.2; }
.menu > li > a:hover, .menu > li:hover > a, .menu > li:focus-within > a { color: var(--navy); text-decoration: none; }
.menu > li.has-sub > a { padding-right: 1.45rem; }
.menu > li.has-sub > a::after { content: ""; position: absolute; right: 0.55rem; top: 50%; width: 0.4rem; height: 0.4rem; margin-top: -0.35rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.sub-toggle { display: none; }
.sub { position: absolute; left: 0; top: 100%; z-index: 60; min-width: 15rem; padding: 0.6rem 0; background: #fff; border-top: 3px solid var(--navy); box-shadow: 0 14px 30px rgba(13, 34, 57, 0.14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s, transform 0.18s, visibility 0s 0.18s; }
.sub--wide { min-width: 22rem; columns: 2; column-gap: 0; padding: 0.6rem 0; }
.sub--wide li { break-inside: avoid; }
.menu > li:hover > .sub, .menu > li:focus-within > .sub, .menu > li.is-open > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu > li:last-child > .sub:not(.sub--mega) { left: auto; right: 0; }
.sub a { display: block; padding: 0.5rem 1.25rem; font-size: 0.9375rem; color: var(--text); }
.sub a:hover { background: var(--paper); color: var(--navy); text-decoration: none; }
/* mega menu: full-width panel under the header, link columns with headings */
.menu > li.has-mega { position: static; }
.menu > li > .sub--mega { left: 0; right: 0; min-width: 0; padding: 1.75rem 0 2rem; }
.mega-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.mega-col h3 { margin: 0 0 0.6rem; padding: 0 0 0.5rem; font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); border-bottom: 1px solid var(--line); min-height: 1.9rem; }
.sub--mega .mega-col h3 a { display: inline; padding: 0; font: inherit; color: inherit; }
.mega-col h3 a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.sub--mega a { padding: 0.3rem 0; }
.sub--mega a:hover { background: transparent; color: var(--navy); text-decoration: underline; text-underline-offset: 0.15em; }

.header-side { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.header-row > .search-toggle { margin-left: -0.25rem; }
.nav-badges { display: flex; align-items: center; gap: 1rem; }
.nav-badges img { width: auto; height: 4rem; }
.nav-badges > img:first-child { height: 4.75rem; } /* FIA Environmental Accreditation badge, a step larger (owner, 2026-11-12) */
.nav-badges--mobile { display: none; }
.search-toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; color: var(--navy); cursor: pointer; opacity: 0.85; transition: opacity 0.15s linear; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { opacity: 1; }
.search-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Full-screen search */
.search-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--gutter); background: rgba(13, 34, 57, 0.97); color: #fff; opacity: 0; transition: opacity 0.2s; }
.search-overlay[hidden] { display: none; }
.search-overlay.is-open { opacity: 1; }
.search-close { position: absolute; top: 1.25rem; right: 1.25rem; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--line-dark); background: transparent; color: #fff; cursor: pointer; transition: background-color 0.15s linear; }
.search-close:hover { background: rgba(255, 255, 255, 0.12); }
.search-form { width: min(60rem, 100%); }
.search-form label { display: block; font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.75rem; }
.search-field { display: flex; align-items: center; gap: 1rem; border-bottom: 2px solid rgba(255, 255, 255, 0.5); transition: border-color 0.15s linear; }
.search-field:focus-within { border-color: #fff; }
.search-field input { flex: 1; min-width: 0; padding: 0.4rem 0; border: 0; background: transparent; font-family: var(--display); font-weight: 600; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.1; color: #fff; }
.search-field input:focus { outline: none; }
.search-field input::-webkit-search-decoration, .search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-field button { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 0; background: transparent; color: #fff; cursor: pointer; opacity: 0.7; transition: opacity 0.15s linear; }
.search-field button:hover { opacity: 1; }
body.search-open { overflow: hidden; }
.burger { display: none; position: relative; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.burger span { position: absolute; left: 0.7rem; right: 0.7rem; height: 2px; background: var(--ink); transition: transform 0.2s, opacity 0.2s; }
.burger span:nth-child(1) { top: 0.85rem; }
.burger span:nth-child(2) { top: 50%; margin-top: -1px; }
.burger span:nth-child(3) { bottom: 0.85rem; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.47rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.47rem) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding: 1.25rem 0 0; background: #fff; }
.hero-grid { --feat-h: 38rem; display: grid; grid-template-columns: minmax(0, 1fr) 35rem; gap: 1.5rem; }
.feat { position: relative; min-height: var(--feat-h); background: var(--navy-deep); overflow: hidden; }
.feat > a { position: absolute; inset: 0; display: block; color: #fff; }
.feat > a:hover { text-decoration: none; }
.feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transform: scale(1.04); transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hero.is-in .feat img { transform: none; }
.hero.is-in .feat > a:hover img { transform: scale(1.04); transition-duration: 0.6s; }
.feat > a::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.92) 0 4.95px, transparent 4.95px 9.9px) left bottom / 14px 8px repeat-x, linear-gradient(to top, rgba(13, 34, 57, 0.94) 0%, rgba(13, 34, 57, 0.55) 40%, rgba(13, 34, 57, 0) 70%); }
.feat.is-flowing > a::after { animation: kerbFlow3 0.7s linear infinite; }
@keyframes kerbFlow3 { from { background-position-x: 0, 0; } to { background-position-x: 14px, 0; } }
.feat-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2rem 2.25rem 2.1rem; max-width: 46rem; opacity: 0; transform: translateY(14px); transition: opacity 0.7s 0.25s, transform 0.7s 0.25s; }
.hero.is-in .feat-text { opacity: 1; transform: none; }
.feat .cats { color: #fff; }
.feat .cats span + span::before { color: rgba(255, 255, 255, 0.6); }
.feat h1 { color: #fff; margin-bottom: 0.6rem; text-wrap: balance; }
.feat time { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.78); }
/* Title underlines draw in from the left on hover, one rendered line after another: main.js
   wraps each line of a [data-lines] title in .ln and numbers them (--ln). */
.ln { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 2px; padding-bottom: 0.04em; transition: background-size 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s; }
.feat > a:hover .ln, .hero-list a:hover .ln, .post:hover h3 a .ln, .notice-list a:hover .ln, .events a:hover .ln { background-size: 100% 2px; transition-delay: calc(var(--ln, 0) * 0.22s); }
.feat > a:hover, .post h3 a:hover, .notice-list a:hover { text-decoration: none; }
.feat .ln { padding-bottom: 0.02em; }

/* Four rows of thumbnail height, equal gaps, a hairline in the middle of every gap; the
   first thumbnail sits on the featured photo's top edge, the last on its bottom edge
   (--feat-h = the featured photo's min-height). */
.hero-list { --thumb-w: 12rem; --thumb-h: calc(var(--thumb-w) * 2 / 3); --hero-g: calc((var(--feat-h) - 4 * var(--thumb-h)) / 6); display: grid; grid-template-rows: repeat(4, var(--thumb-h)); row-gap: calc(2 * var(--hero-g)); align-content: start; }
.hero-list li { position: relative; }
.hero-list li:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--hero-g)); border-top: 1px solid var(--line); }
.hero-list a { display: grid; grid-template-columns: var(--thumb-w) 1fr; gap: 1.1rem; align-items: center; height: 100%; color: var(--ink); }
.hero-list a:hover { text-decoration: none; }
.hero-list h3 { transition: color 0.15s linear; }
.hero-list a:hover h3 { color: var(--navy); }
.hero-list .thumb { display: block; overflow: hidden; }
.hero-list img { display: block; aspect-ratio: 3 / 2; width: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hero-list a:hover img { transform: scale(1.05); }
.hero-list li > a > div { max-height: 100%; overflow: hidden; }
.hero-list .cats { font-size: 0.95rem; margin-bottom: 0.3rem; }
.hero-list h3 { font-size: 1.5rem; line-height: 1.12; margin-bottom: 0.2rem; padding-bottom: 0.15em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-list time { display: block; font-size: 0.95rem; line-height: 1.2; color: var(--muted); }

/* ---------- Quick access ---------- */
.quick { margin-top: 1.25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.quick-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.quick-row a { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.1rem 1rem; font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--ink); border-left: 1px solid var(--line); transition: background-color 0.15s linear, color 0s 0.075s; }
.quick-row a:first-child { border-left: 0; }
.quick-row a:hover { background: var(--navy); color: #fff; text-decoration: none; }
.quick-row svg { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---------- Calendar (the November block of natjecanja-haks) ---------- */
.calendar { position: relative; padding: 3.5rem 0 4rem; background: var(--navy-deep); color: #fff; overflow: hidden; }
.calendar::before, .disciplines::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-conic-gradient(rgba(255, 255, 255, 0.06) 0 25%, transparent 0 50%) 0 0 / 36px 36px; -webkit-mask-image: radial-gradient(55% 95% at 100% 0%, #000 0%, transparent 100%); mask-image: radial-gradient(55% 95% at 100% 0%, #000 0%, transparent 100%); }
.calendar > .wrap, .disciplines > .wrap { position: relative; }
.events { margin: 0; padding: 0; }
.events li { border-bottom: 1px solid var(--line-dark); }
.events a { position: relative; display: grid; grid-template-columns: 13rem minmax(0, 1fr) 11rem 16rem; gap: 1.5rem; align-items: center; padding: 1.1rem 0 1.1rem 1.25rem; color: #fff; border-left: 4px solid transparent; transition: background-color 0.15s linear; }
.events a:hover { background: rgba(255, 255, 255, 0.05); text-decoration: none; }
/* next event: a 12 px white bar on the left edge (owner's pick, 2026-11-12) */
.events .is-next a::before { content: ""; position: absolute; left: -4px; top: 0; bottom: 0; width: 12px; background: #fff; }
.ev-date { display: flex; align-items: baseline; gap: 0.35rem; font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-date i { font-style: normal; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.ev-name { font-family: var(--display); font-size: 1.5rem; font-weight: 600; line-height: 1.15; }
.ev-type { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.72); }
.ev-score { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.9); }
.ev-score small { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }

/* ---------- News + notices ---------- */
.news { padding: 3.5rem 0 4rem; }
.news-grid { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 3.5rem; align-items: start; }

.post { position: relative; display: flex; flex-direction: column; }
.post-img { display: block; overflow: hidden; }
.post-img img { display: block; aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--paper); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.post:hover .post-img img { transform: scale(1.04); }
.post-body { padding-top: 1rem; }
.post h3 a { color: var(--ink); transition: color 0.2s; }
.post h3 a::after { content: ""; position: absolute; inset: 0; }
.post:hover h3 a { color: var(--navy); }
.excerpt { margin: 0.6rem 0 0.75rem; font-size: 0.9375rem; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; gap: 1rem; margin: 0; font-size: 0.8125rem; color: var(--muted); }
.meta a { color: var(--muted); }
.post--lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: center; margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.post--lead .post-body { padding-top: 0; }
.post--lead h3 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 700; }
.post--lead .excerpt { font-size: 1rem; -webkit-line-clamp: 4; }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }

.notices { position: sticky; top: calc(var(--head) + 1.25rem); padding: 1.75rem 1.75rem 2rem; background: var(--paper); }
.notices .section-head { margin-bottom: 0.75rem; }
.notices h2 { font-size: 1.6rem; }
.notice-list li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; line-height: 1.4; }
.notice-list li:last-child { border-bottom: 0; }
.notice-list time { font-family: var(--display); font-size: 0.9375rem; font-weight: 600; color: var(--navy); padding-top: 0.05rem; }
.notice-list a { color: var(--ink); }
.notice-list a:hover { color: var(--navy); }
.notices .button { margin-top: 1.25rem; width: 100%; text-align: center; }

/* ---------- Disciplines ---------- */
.disciplines { position: relative; padding: 3.5rem 0 4rem; background: var(--paper); overflow: hidden; }
.disciplines::before { background-image: repeating-conic-gradient(rgba(0, 45, 95, 0.07) 0 25%, transparent 0 50%); }
.disc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* Tile hover: ONLY background-color transitions. The checkered corner is a static SVG
   background image (white squares with the fade baked into the SVG) — white on the white tile
   it is invisible and it shows as the fill turns navy. No pseudo-element, no mask, no opacity.
   The text colour does not fade: it steps at 75 ms, the point where the fill has equal
   contrast to both colours (a fade of both at once makes the text vanish mid-way). */
.disc-grid a { display: flex; flex-direction: column; justify-content: space-between; gap: 2.25rem; min-height: 9.5rem; padding: 1.25rem 1.4rem; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22224%22%20height=%22140%22%20viewBox=%220%200%20224%20140%22%3E%3Cdefs%3E%3Cpattern%20id=%22c%22%20width=%2228%22%20height=%2228%22%20patternUnits=%22userSpaceOnUse%22%3E%3Crect%20width=%2214%22%20height=%2214%22%20fill=%22%23fff%22/%3E%3Crect%20x=%2214%22%20y=%2214%22%20width=%2214%22%20height=%2214%22%20fill=%22%23fff%22/%3E%3C/pattern%3E%3CradialGradient%20id=%22g%22%20cx=%22100%%22%20cy=%22100%%22%20r=%22100%%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23000%22/%3E%3C/radialGradient%3E%3Cmask%20id=%22m%22%3E%3Crect%20width=%22224%22%20height=%22140%22%20fill=%22url(%23g)%22/%3E%3C/mask%3E%3C/defs%3E%3Crect%20width=%22224%22%20height=%22140%22%20fill=%22url(%23c)%22%20fill-opacity=%22.16%22%20mask=%22url(%23m)%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right bottom; background-size: 224px 140px; color: var(--ink); transition: background-color 0.15s linear, color 0s 0.075s; }
.disc-grid a:hover { background-color: var(--navy); color: #fff; text-decoration: none; }
.disc-name { font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1; }
.disc-count { font-size: 0.875rem; color: var(--muted); transition: color 0s 0.075s; }
.disc-grid a:hover .disc-count { color: rgba(255, 255, 255, 0.7); }

/* ---------- About ---------- */
.about { padding: 4rem 0 5rem; }
.about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3.5rem; align-items: center; }
.about-photo { position: relative; margin: 0; }
.about-photo img { width: 100%; }
.about-photo figcaption { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.5rem 0.9rem 1.25rem; background: var(--navy); color: #fff; font-family: var(--display); line-height: 1; }
.about-photo figcaption strong { font-size: 3rem; font-weight: 700; }
.about-photo figcaption span { font-size: 1rem; font-weight: 500; line-height: 1.2; color: rgba(255, 255, 255, 0.85); }
.about-text h2 { margin-bottom: 1rem; }
.about-text p { font-size: 1.0625rem; }
.about-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ---------- CTA ---------- */
.cta { position: relative; padding: 9rem 0; background: var(--navy) url(../img/cta-grobnik.webp) center / cover no-repeat; color: #fff; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 45, 95, 0.88) 0%, rgba(0, 45, 95, 0.78) 100%); }
.cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.8) 0 4.95px, transparent 4.95px 9.9px) left bottom / 14px 8px repeat-x; } /* kerb strip along the bottom edge, flows while the band is in focus */
.cta.is-flowing::after { animation: kerbFlow 0.7s linear infinite; }
.cta-inner { position: relative; max-width: 54rem; margin: 0 auto; text-align: center; }
.cta h2 { margin-bottom: 1.1rem; color: #fff; font-size: 4.25rem; line-height: 1; }
.cta p { margin: 0 auto 2.5rem; max-width: 50rem; font-size: 1.3rem; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.cta .button { padding: 1rem 2rem; font-size: 1.3rem; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--navy-deep); color: rgba(255, 255, 255, 0.8); font-size: 1.0625rem; }
.site-footer a { color: #fff; }
.site-footer h2 { font-size: 1.6rem; color: #fff; margin-bottom: 1.1rem; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; padding: 3rem 0 2.5rem; border-bottom: 1px solid var(--line-dark); }
.partners ul, .members ul { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 5rem; }
.partners img { width: auto; height: 3.1rem; }
.partners li:nth-child(2) img { height: 4rem; filter: invert(1) hue-rotate(180deg); } /* dark-grey outline logo → light on the navy footer, the red stays red */
.partners li:nth-child(3) img { height: 4rem; }
.members img { width: auto; height: 5.25rem; }
.members li:nth-child(3) img { height: 4.5rem; }
.footer-cols { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1.1fr; gap: 2.5rem; padding: 2.75rem 0 3rem; border-bottom: 1px solid var(--line-dark); }
.footer-col p { margin-bottom: 0.9rem; }
.footer-col strong { color: #fff; font-weight: 600; }
address { font-style: normal; margin-bottom: 0.9rem; }
.footer-small { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.6); }
.footer-links li { padding: 0.3rem 0; }
.newsletter { display: grid; gap: 0.6rem; }
.newsletter input { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 1.0625rem; }
.newsletter input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter input:focus { outline: none; border-color: #fff; }
.newsletter .button { border-color: #fff; background: #fff; color: var(--navy-deep); }
.newsletter .button:hover { background: #fff; border-color: #fff; color: var(--navy-deep); }
.footer-social { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.footer-social a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: rgba(255, 255, 255, 0.08); }
.footer-social a:hover { background: var(--navy); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; padding: 1.4rem 0; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.6); }
.footer-bottom p { margin: 0; }
.footer-bottom a { color: rgba(255, 255, 255, 0.85); }
.footer-bottom .credit a { display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: baseline; }
.footer-bottom .credit img { width: 0.9em; height: 0.9em; }

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
  .hero-grid { --feat-h: 35rem; grid-template-columns: minmax(0, 1fr) 32rem; gap: 1.25rem; }
  .hero-list { --thumb-w: 11rem; }
  .hero-list h3 { font-size: 1.3rem; }
  .hero-list .cats, .hero-list time { font-size: 0.875rem; }
  .partners img { height: 2.7rem; }
  .partners li:nth-child(2) img { height: 3.5rem; }
  .partners li:nth-child(3) img { height: 3.5rem; }
  .members img { height: 4.75rem; }
  .members li:nth-child(3) img { height: 4rem; }
  .menu > li > a { font-size: 1.02rem; padding: 0.45rem 0.55rem; }
  .menu > li.has-sub > a { padding-right: 1.25rem; }
  .menu > li.has-sub > a::after { right: 0.45rem; }
  .nav-badges img { height: 3.4rem; }
  .nav-badges > img:first-child { height: 4rem; }
  .logo img { height: 4rem; }
}
@media (max-width: 1240px) {
  .nav-badges img { height: 2.6rem; }
  .nav-badges > img:first-child { height: 3rem; }
  .events a { grid-template-columns: 11rem minmax(0, 1fr) 9rem 13rem; }
  .news-grid { grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.5rem; }
}
@media (max-width: 1100px) {
  .topbar-links > li:nth-child(5) { display: none; }
  .header-row { gap: 1rem; }
  .logo img { height: 3.4rem; }
  .nav-badges { display: none; }
  .nav-badges--mobile { display: flex; justify-content: flex-start; gap: 1.5rem; padding: 1.5rem var(--gutter) 2rem; border-top: 1px solid var(--line); }
  .nav-badges--mobile img { height: 2.75rem; }
  .burger { display: block; }
  .main-nav { position: fixed; top: var(--head); right: 0; bottom: 0; z-index: 70; width: min(26rem, 100%); display: block; background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s; box-shadow: -10px 0 30px rgba(13, 34, 57, 0.15); }
  .main-nav.is-open { transform: none; }
  .nav-open .site-header { z-index: 80; }
  .menu { flex-direction: column; gap: 0; padding: 0.5rem 0 1rem; }
  .menu > li { display: block; min-height: 0; border-bottom: 1px solid var(--line); }
  .menu > li > a { padding: 0.9rem var(--gutter); font-size: 1.25rem; }
  .menu > li.has-sub > a { padding-right: 3.5rem; }
  .menu > li.has-sub > a::after { display: none; }
  .sub-toggle { display: block; position: absolute; right: 0.5rem; top: 0.45rem; width: 2.5rem; height: 2.5rem; border: 0; background: transparent; cursor: pointer; }
  .sub-toggle::before, .sub-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.9rem; height: 2px; margin: -1px 0 0 -0.45rem; background: var(--ink); transition: transform 0.2s; }
  .sub-toggle::after { transform: rotate(90deg); }
  .is-open > .sub-toggle::after { transform: rotate(0); }
  .sub, .sub--wide { position: static; display: none; min-width: 0; columns: auto; padding: 0 0 0.75rem; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .menu > li.has-mega { position: relative; }
  .menu > li.is-open > .sub { display: block; }
  .sub a, .sub--mega a { padding: 0.5rem var(--gutter) 0.5rem 2.25rem; font-size: 1rem; }
  .menu > li > .sub--mega { padding: 0 0 0.5rem; }
  .mega-grid { display: block; padding: 0; }
  .mega-col h3 { margin: 0.35rem 0 0; padding: 0.5rem var(--gutter) 0.25rem 2.25rem; border: 0; font-size: 0.9rem; color: var(--muted); min-height: 0; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .feat { min-height: 0; aspect-ratio: 16 / 10; }
  .hero-list { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }
  .hero-list li { border-bottom: 1px solid var(--line); }
  .hero-list li::after { display: none; }
  .hero-list a { grid-template-columns: 6.5rem 1fr; padding: 0.9rem 0; }
  .quick-row { grid-template-columns: repeat(5, auto); overflow-x: auto; }
  .quick-row a { padding: 0.9rem 1.1rem; font-size: 1.15rem; white-space: nowrap; }
  .news-grid { grid-template-columns: 1fr; gap: 3rem; }
  .notices { position: static; }
  .post--lead { grid-template-columns: 1fr; gap: 1rem; }
  .disc-grid { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .cta { padding: 5.5rem 0; }
  .cta h2 { font-size: 2.75rem; }
  .cta p { font-size: 1.125rem; }
  .cta .button { padding: 0.85rem 1.6rem; font-size: 1.15rem; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .topbar-links > li:nth-child(2), .topbar-links > li:nth-child(3), .topbar-links > li:nth-child(4) { display: none; }
  .hero { padding-top: 0.75rem; }
  .feat { aspect-ratio: 4 / 3; margin: 0 calc(-1 * var(--gutter)); }
  .feat-text { padding: 1.5rem 1.25rem 1.4rem; }
  .hero-list { grid-template-columns: 1fr; }
  .quick-row { grid-template-columns: repeat(2, 1fr); overflow: visible; }
  .quick-row a { justify-content: flex-start; padding: 0.9rem 1rem; font-size: 1.1rem; border-left: 0; border-top: 1px solid var(--line); }
  .quick-row a:nth-child(-n+2) { border-top: 0; }
  .quick-row a:nth-child(even) { border-left: 1px solid var(--line); }
  .quick-row a:last-child { grid-column: 1 / -1; }
  .quick-row svg { width: 1.25rem; height: 1.25rem; }
  .calendar, .news, .disciplines, .about { padding: 2.75rem 0 3rem; }
  .events a { grid-template-columns: 1fr; gap: 0.25rem; padding: 1rem 0 1rem 1rem; }
  .ev-date { font-size: 1.6rem; margin-bottom: 0.25rem; }
  .ev-score small { display: inline; margin-right: 0.35rem; }
  .section-head .more { margin-left: 0; flex-basis: 100%; }
  .post-grid { grid-template-columns: 1fr; gap: 2rem; }
  .notices { padding: 1.25rem 1.25rem 1.5rem; margin: 0 calc(-1 * var(--gutter)); }
  .disc-grid { grid-template-columns: repeat(2, 1fr); }
  .disc-grid a { min-height: 7.5rem; gap: 1.25rem; padding: 1rem 1.1rem; }
  .disc-name { font-size: 1.4rem; }
  .about-photo figcaption strong { font-size: 2.25rem; }
  .footer-cols { grid-template-columns: 1fr; gap: 2rem; }
  .partners ul, .members ul { flex-wrap: wrap; justify-content: flex-start; gap: 1.5rem 2.5rem; }
  .partners img, .partners li:nth-child(2) img, .partners li:nth-child(3) img { height: 2.75rem; }
  .members img, .members li:nth-child(3) img { height: 4rem; }
}

/* Wide screens: scale the whole page up instead of leaving it small in the middle. */
@media (min-width: 1600px) { html { font-size: 17px; } }
@media (min-width: 1920px) { html { font-size: 18px; } }
@media (min-width: 2400px) { html { font-size: 20px; } }

/* ---------- Loader: navy cover, the logo builds up in white (helmet, flag, letters, name) ---------- */
.loader { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--gutter); background: var(--navy); transition: opacity 0.45s ease, visibility 0s 0.45s; }
.loader-logo { position: relative; width: min(30rem, 84vw); aspect-ratio: 589 / 203; }
.ll { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
img.ll { filter: brightness(0) invert(1); }
.ll-helmet { animation: llIn 0.5s 0.1s both; }
.ll-flag-plain { animation: llFlag 0.35s 0.7s both, llOut 0.3s 1.3s forwards; }
.ll-flag { animation: llFade 0.3s 1.3s both; }
.ll-text { animation: llSlide 0.45s 1.7s both; }
@keyframes llIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes llFlag { from { opacity: 0; transform: scale(0.85); transform-origin: 37% 66%; } to { opacity: 1; transform: none; } }
@keyframes llFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes llOut { to { opacity: 0; } }
@keyframes llSlide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.loader.is-done { opacity: 0; visibility: hidden; }
html.is-loading { overflow: hidden; }

/* ---------- Staggered entrances (children of [data-stagger] rise in, one after another) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-stagger] > * { opacity: 0; }
  html.js [data-stagger].is-in > * { animation: stagIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
  html.js [data-stagger].is-done > * { animation: none; opacity: 1; }
}
@keyframes stagIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* the header row only fades: a transform animation on the nav would become the containing block of the mega panels */
@media (prefers-reduced-motion: no-preference) { html.js .header-row[data-stagger].is-in > * { animation-name: stagFade; } }
@keyframes stagFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .feat img, .feat > a:hover img, .hero-list a:hover img, .post:hover .post-img img { transform: none; }
  .loader { display: none; }
  .section-head.is-flowing, .feat.is-flowing > a::after, .cta.is-flowing::after { animation: none; }
  .feat-text { opacity: 1; transform: none; }
}