:root {
  --ink: #16312f;
  --muted: #5f7874;
  --surface: #ffffff;
  --surface-soft: #eff9f7;
  --surface-warm: #fff9ec;
  --line: #cfe6e2;
  --teal: #31b0a5;
  --teal-dark: #16877f;
  --teal-deep: #0d5f59;
  --aqua-soft: #eef4f8;
  --aqua-line: #b8e5df;
  --bluegreen: #256f86;
  --slate: #31465c;
  --slate-soft: #f3f6fa;
  --slate-line: #d8e0e8;
  --gold: #e6ad2f;
  --gold-soft: #fff4d6;
  --green: #57b886;
  --yellow: #f0b93b;
  --coral: #c96a54;
  --shadow: 0 18px 50px rgba(20, 60, 56, 0.13);
  --radius: 8px;
  --container: min(1180px, calc(100vw - 48px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  background: var(--surface);
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  transform: translateY(-140%);
  background: var(--gold);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-weight: 700;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--slate-line);
  box-shadow: 0 10px 32px rgba(49, 70, 92, 0.06);
}

.nav {
  width: var(--container);
  min-height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 148px;
  height: 54px;
  object-fit: contain;
}

.brand-text {
  display: none;
  gap: 1px;
}

.brand-text strong {
  font-size: 1.05rem;
}

.brand-text small {
  color: var(--muted);
  font-size: 0.78rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-links a {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--slate);
  font-weight: 900;
  font-size: 1rem;
  text-decoration: none;
}

.nav-links a::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 5px;
  left: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
  color: var(--bluegreen);
  background: #f1f6f8;
  outline: none;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after {
  opacity: 1;
  transform: translateY(0);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--ink);
}

.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: center;
  padding: 120px 0 72px;
  isolation: isolate;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/sites/default/files/images/las-hero.png");
  background-size: cover;
  background-position: center;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(31, 49, 69, 0.9) 0%, rgba(37, 111, 134, 0.72) 43%, rgba(49, 176, 165, 0.2) 74%, rgba(49, 176, 165, 0.06) 100%),
    linear-gradient(0deg, rgba(31, 49, 69, 0.22), rgba(31, 49, 69, 0));
}

.hero-content {
  width: var(--container);
  margin-left: calc((100vw - var(--container)) / 2);
  margin-right: auto;
  color: #fff;
  max-width: min(760px, var(--container));
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--bluegreen);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #bdf3ee;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: 0;
}

h1 {
  max-width: 760px;
  font-size: clamp(2.4rem, 7vw, 5.9rem);
}

.hero h1 {
  font-size: clamp(2.25rem, 5.8vw, 5.1rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.3rem);
}

h3 {
  font-size: 1.18rem;
}

.hero-lead {
  max-width: 690px;
  margin: 24px 0 0;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: rgba(255, 255, 255, 0.88);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.button-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 14px 30px rgba(49, 176, 165, 0.28);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--teal-dark);
  box-shadow: 0 18px 36px rgba(49, 176, 165, 0.34);
  transform: translateY(-2px);
  outline: none;
}

.button-secondary {
  color: #fff9e8;
  border-color: rgba(230, 173, 47, 0.78);
  background: rgba(230, 173, 47, 0.12);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
  color: #173531;
  box-shadow: 0 18px 36px rgba(230, 173, 47, 0.24);
  transform: translateY(-2px);
  outline: none;
}

.button-outline {
  color: var(--bluegreen);
  border-color: var(--aqua-line);
  background: var(--surface);
}

.button-outline:hover,
.button-outline:focus-visible {
  border-color: var(--bluegreen);
  background: #edf8fb;
  outline: none;
}

.button-accent {
  border-color: var(--gold);
  background: var(--gold);
  color: #173531;
  box-shadow: 0 12px 26px rgba(230, 173, 47, 0.24);
}

.button-accent:hover,
.button-accent:focus-visible {
  border-color: #c89322;
  background: #c89322;
  outline: none;
}

.button-results {
  border-color: var(--bluegreen);
  background: var(--bluegreen);
  color: #fff;
  box-shadow: 0 12px 26px rgba(37, 111, 134, 0.22);
}

.button-results:hover,
.button-results:focus-visible {
  border-color: var(--teal-deep);
  background: var(--teal-deep);
  outline: none;
}

.stats-band {
  background: #f7f8fb;
  color: #fff;
  padding: 22px 0;
}

.stats-grid {
  width: min(1120px, var(--container));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--bluegreen), var(--teal));
  box-shadow: 0 16px 36px rgba(37, 111, 134, 0.2);
}

.stats-grid article {
  min-height: 106px;
  padding: 22px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.stats-grid article:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.stats-grid span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
}

.stats-grid strong {
  display: block;
  margin-top: 9px;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.18;
}

.section {
  padding: 2em 0;
}

.section,
.hero,
.stats-band {
  scroll-margin-top: 86px;
}

.section-light {
  background: var(--slate-soft);
}

.section-accent {
  background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}

.section-inner {
  width: var(--container);
  margin: 0 auto;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.section-actions-center {
  justify-content: center;
}

.page-hero {
  padding: 136px 0 68px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(31, 49, 69, 0.9) 0%, rgba(37, 111, 134, 0.76) 58%, rgba(49, 176, 165, 0.42) 100%),
    url("/sites/default/files/images/news-website-launch.png") center / cover;
}

.results-page-hero {
  background:
    linear-gradient(90deg, rgba(31, 49, 69, 0.9) 0%, rgba(37, 111, 134, 0.74) 55%, rgba(49, 176, 165, 0.42) 100%),
    url("/sites/default/files/images/results-prototype.png") center / cover;
}

.page-hero .eyebrow {
  color: #bdf3ee;
}

.page-hero h1 {
  font-size: clamp(2.8rem, 7vw, 5.4rem);
}

.page-hero p:not(.eyebrow) {
  max-width: 760px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 2vw, 1.24rem);
}

body[data-page="news"] .page-hero,
body[data-page="results"] .page-hero {
  padding-bottom: 46px;
}

body[data-page="news"] .page-hero h1,
body[data-page="results"] .page-hero h1 {
  padding-bottom: 12px;
  border-bottom: 4px solid var(--gold);
}

.news-page-section {
  padding-top: 64px;
  background: var(--slate-soft);
}

.news-page-section .section-inner {
  max-width: 1180px;
}

.news-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.news-list-item {
  padding: 0;
  border-top: 1px solid var(--line);
}

.news-list-item:first-child {
  border-top: 1px solid var(--line);
}

.news-list-item:last-child {
  border-bottom: 1px solid var(--line);
}

.news-list-link {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  color: inherit;
  text-decoration: none;
}

.news-list-link:hover,
.news-list-link:focus-visible {
  outline: none;
}

.news-list-link:hover h2,
.news-list-link:focus-visible h2,
.news-list-link:hover .news-read-more,
.news-list-link:focus-visible .news-read-more {
  color: var(--teal);
}

.news-list-link:hover .news-list-image img,
.news-list-link:focus-visible .news-list-image img {
  transform: scale(1.035);
}

.news-list-image {
  position: relative;
  display: block;
  min-height: 158px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-soft);
  box-shadow: 0 10px 24px rgba(20, 35, 34, 0.08);
}

.news-list-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 220ms ease;
}

.news-list-content {
  min-width: 0;
  padding-top: 2px;
}

.news-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-list-content h2 {
  margin: 0;
  color: var(--teal-deep);
  font-size: clamp(1.18rem, 2vw, 1.65rem);
  line-height: 1.16;
}

.news-list-content p {
  max-width: 900px;
  margin: 10px 0 0;
  color: #2d3c39;
  font-size: 1rem;
}

.news-read-more,
.news-card-more {
  display: inline-flex;
  margin-top: 16px;
  color: var(--teal-deep);
  font-weight: 950;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.92rem;
}

.news-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.news-meta svg {
  width: 21px;
  height: 21px;
  padding: 4px;
  border-radius: 50%;
  background: #eef4f8;
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}

.pagination-button {
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  padding: 8px 13px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.pagination-button:hover,
.pagination-button:focus-visible,
.pagination-button.is-active {
  border-color: var(--bluegreen);
  background: var(--bluegreen);
  color: #fff;
  outline: none;
}

.pagination-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.pagination-button:disabled:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

.pagination-arrow {
  min-width: 112px;
}

.news-detail-section {
  padding-top: 64px;
  background: var(--slate-soft);
}

.news-detail-inner {
  max-width: 1080px;
}

.news-detail-article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(24px, 4vw, 52px);
  box-shadow: 0 18px 45px rgba(20, 35, 34, 0.08);
}

.back-link {
  display: inline-flex;
  margin-bottom: 24px;
  color: var(--teal-deep);
  font-weight: 900;
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--teal);
  outline: none;
}

.news-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--muted);
  font-weight: 850;
}

.news-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.news-detail-meta svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: #eef4f8;
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.news-detail-article h1 {
  max-width: 100%;
  margin-top: 16px;
  font-size: clamp(2rem, 4.4vw, 3.55rem);
  line-height: 1.02;
}

.news-detail-lead {
  max-width: 100%;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.24rem);
}

.news-detail-image {
  margin: 34px 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-soft);
  box-shadow: 0 14px 34px rgba(20, 35, 34, 0.09);
}

.news-detail-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.news-detail-content {
  padding-top: 4px;
}

.news-detail-content p {
  margin: 0;
  color: #2d3c39;
  font-size: 1.06rem;
}

.news-detail-content p + p {
  margin-top: 18px;
}

.news-detail-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.news-detail-nav a {
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  background: var(--slate-soft);
  text-decoration: none;
}

.news-detail-nav a:last-child {
  text-align: right;
}

.news-detail-nav a:hover,
.news-detail-nav a:focus-visible {
  border-color: var(--bluegreen);
  outline: none;
}

.news-detail-nav span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.news-detail-nav strong {
  color: var(--teal-deep);
  line-height: 1.25;
}

.results-page-section {
  padding-top: 64px;
}

.results-page-header {
  max-width: 820px;
}

.results-page-grid {
  align-items: stretch;
}

.results-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.result-list-item {
  display: block;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.result-list-item:first-child {
  border-top: 3px solid var(--bluegreen);
}

.result-list-item:last-child {
  border-bottom: 1px solid var(--line);
}

.result-list-content {
  min-width: 0;
  max-width: 980px;
}

.result-list-content h3 {
  color: var(--teal-deep);
  font-size: clamp(1.18rem, 2vw, 1.65rem);
  line-height: 1.16;
}

.result-list-content p {
  max-width: 900px;
  margin: 10px 0 0;
  color: #2d3c39;
  font-size: 1rem;
}

.result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.result-type-istrazivanje {
  background: #eef4f8;
  color: var(--teal-deep);
}

.result-type-tehnologija {
  background: #eaf2ff;
  color: #2f5f9b;
}

.result-type-suradnja {
  background: #fff6dd;
  color: #8a6814;
}

.result-type-strategija {
  background: #f7e9e5;
  color: #9a422f;
}

.expected-results-heading {
  max-width: 980px;
}

.expected-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.expected-result-card {
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, #f8f9fb);
  padding: 28px;
  box-shadow: 0 14px 32px rgba(49, 70, 92, 0.07);
}

.expected-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.expected-result-badge {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bluegreen);
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
}

.expected-result-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: #eef4f8;
  color: var(--bluegreen);
}

.expected-result-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.expected-result-card h3 {
  font-size: 1.06rem;
}

.expected-result-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 36px;
}

.section-heading-icon {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.section-icon,
.card-icon,
.result-icon {
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius);
  background: #eef4f8;
  color: var(--teal-deep);
}

.section-icon {
  width: 54px;
  height: 54px;
}

.section-icon svg,
.card-icon svg,
.result-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.section-heading.compact {
  margin-bottom: 24px;
}

.section-heading p:not(.eyebrow) {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.news-grid,
.results-grid,
.partners-grid,
.research-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.news-card,
.result-card,
.partner-card,
.research-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 14px 32px rgba(49, 70, 92, 0.07);
}

.news-card,
.result-card,
.research-card {
  padding: 22px;
}

.news-card {
  overflow: hidden;
  padding: 0;
}

.news-card-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.news-card-link:hover h3,
.news-card-link:focus-visible h3,
.news-card-link:hover .news-card-more,
.news-card-link:focus-visible .news-card-more {
  color: var(--bluegreen);
  outline: none;
}

.news-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.news-body {
  padding: 22px;
}

.news-date,
.result-type {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: var(--radius);
  background: #eef4f8;
  color: var(--teal-deep);
  font-size: 0.78rem;
  font-weight: 800;
}

.result-tags .result-type {
  border: 1px solid transparent;
}

.result-tags .result-type-istrazivanje {
  background: #ddf6f3;
  border-color: #8fd8d0;
  color: var(--teal-deep);
}

.result-tags .result-type-tehnologija {
  background: #dceafe;
  border-color: #8db7ed;
  color: #244d86;
}

.result-tags .result-type-suradnja {
  background: #fff0bd;
  border-color: #e1bc46;
  color: #6f520d;
}

.result-tags .result-type-strategija {
  background: #f2cfc6;
  border-color: #c45a45;
  color: #7f2f20;
}

.news-card h3,
.result-card h3 {
  margin-top: 18px;
}

.news-card p,
.result-card p,
.partner-card p,
.research-card p {
  color: var(--muted);
}

.news-card p,
.result-card p,
.research-card p {
  margin: 12px 0 0;
}

.section-heading.wide {
  max-width: 960px;
}

.section-heading.wide p {
  color: var(--muted);
  font-size: 1.05rem;
}

.about-section {
  background:
    linear-gradient(180deg, #f7f9fc 0%, #fff 62%),
    var(--surface);
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(390px, 0.62fr);
  gap: 40px;
  align-items: center;
}

.about-copy {
  max-width: 840px;
}

.about-copy h2 {
  max-width: 780px;
}

.about-lead {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.65;
}

.about-lead-strong {
  color: var(--ink);
  font-weight: 800;
}

.about-text {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.about-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.about-pill-row span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(230, 173, 47, 0.58);
  border-radius: 999px;
  background: var(--gold-soft);
  color: #4a3a14;
  font-size: 0.88rem;
  font-weight: 800;
}

.about-visual {
  position: relative;
}

.about-visual-stack {
  display: grid;
  gap: 18px;
  align-self: stretch;
  align-content: center;
}

.about-visual-stack .section-visual img {
  aspect-ratio: 16 / 8.2;
  height: auto;
}

.about-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.about-focus-card {
  position: relative;
  min-height: 230px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(49, 176, 165, 0.26);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(231, 248, 246, 0.78)),
    var(--surface);
  box-shadow: 0 14px 34px rgba(20, 60, 56, 0.07);
}

.about-focus-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), #7ed5cd);
}

.about-card-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: #eef4f8;
  color: var(--teal-deep);
}

.about-card-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.about-focus-card h3 {
  margin: 18px 0 0;
  font-size: 1.04rem;
}

.about-focus-card p {
  margin: 10px 0 0;
  color: var(--muted);
}

.about-media-layout,
.results-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.72fr);
  gap: 34px;
  align-items: center;
}

.section-visual {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: 0 18px 42px rgba(20, 35, 34, 0.11);
}

.section-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.section-visual.small {
  max-width: 640px;
  justify-self: end;
}

.research-section {
  background: #fbfbfa;
}

.research-heading {
  max-width: 820px;
}

.research-heading .eyebrow {
  color: var(--bluegreen);
}

.research-card {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  border-color: var(--slate-line);
  background:
    linear-gradient(180deg, #f5f8fb, #fff 46%),
    var(--surface);
  box-shadow: 0 14px 34px rgba(49, 70, 92, 0.08);
}

.research-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--bluegreen);
}

.research-card:nth-child(2)::before {
  background: var(--green);
}

.research-card:nth-child(3)::before {
  background: var(--yellow);
}

.card-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  background: #eef4f8;
  color: var(--teal-deep);
  box-shadow: inset 0 0 0 1px rgba(49, 176, 165, 0.18);
}

.research-card:nth-child(2) .card-icon {
  background: #eef7ea;
  color: #3f7c31;
}

.research-card:nth-child(3) .card-icon {
  background: #fff6dd;
  color: #8a6814;
}

.card-icon svg {
  width: 25px;
  height: 25px;
}

.research-card h3 {
  font-size: 1.08rem;
}

.research-card p {
  font-size: 0.96rem;
}

.goals-section {
  background: #f6f1e8;
}

.goals-heading {
  max-width: 820px;
}

.goals-heading .eyebrow {
  color: var(--bluegreen);
}

.goals-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 1fr);
  gap: 22px;
  align-items: stretch;
}

.primary-goal {
  min-height: 322px;
  padding: clamp(28px, 4vw, 42px);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--bluegreen), var(--slate));
  color: #fff;
}

.goal-number {
  display: block;
  margin-bottom: 22px;
  color: #fff5c8;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: 0.9;
  font-weight: 900;
}

.primary-goal h3 {
  font-size: 1rem;
}

.primary-goal p {
  max-width: 900px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 650;
}

.specific-goals {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.specific-goals li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 12px 16px;
  border: 2px solid var(--slate-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 16px rgba(20, 35, 34, 0.04);
}

.specific-goals span {
  color: var(--bluegreen);
  font-weight: 900;
}

.specific-goals p {
  margin: 0;
  color: #40534e;
  font-size: 0.94rem;
}

.section-accent {
  background: #f2f6fa;
}

.activity-heading {
  max-width: 780px;
}

.activity-section-inner,
.wide-section-inner {
  width: min(1640px, calc(100vw - 48px));
}

.activity-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.activity-filter {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 9px 15px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.activity-filter:hover,
.activity-filter:focus-visible,
.activity-filter.is-active {
  border-color: var(--bluegreen);
  background: var(--bluegreen);
  color: #fff;
  outline: none;
}

.activity-explorer {
  display: grid;
  grid-template-columns: minmax(320px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
}

.activity-list,
.activity-detail {
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 16px 38px rgba(49, 70, 92, 0.08);
}

.activity-list {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
}

.activity-group {
  --activity-accent: var(--bluegreen);
  --activity-accent-soft: #eef4f8;
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(20, 35, 34, 0.05);
}

.activity-group:nth-child(2) {
  --activity-accent: #167c91;
  --activity-accent-soft: #e5f4f7;
}

.activity-group:nth-child(3) {
  --activity-accent: #5c8f3a;
  --activity-accent-soft: #edf5e8;
}

.activity-group:nth-child(4) {
  --activity-accent: #9b7417;
  --activity-accent-soft: #fff5dc;
}

.activity-group:nth-child(5) {
  --activity-accent: var(--coral);
  --activity-accent-soft: #fbebe6;
}

.activity-group:nth-child(6) {
  --activity-accent: #374f4b;
  --activity-accent-soft: #eef3f1;
}

.activity-group-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(49, 176, 165, 0.18);
  background: linear-gradient(90deg, var(--activity-accent-soft), #fff);
}

.activity-group-header > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--activity-accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(49, 176, 165, 0.24);
}

.activity-group-header h3 {
  color: var(--activity-accent);
  font-size: 1rem;
  font-weight: 950;
}

.activity-group-header p {
  margin: 4px 0 0;
  color: #47645d;
  font-size: 0.8rem;
  font-weight: 900;
}

.activity-group-items {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.activity-list-item {
  width: 100%;
  min-height: 58px;
  display: grid;
  gap: 5px;
  text-align: left;
  border: 1px solid transparent;
  border-left: 5px solid transparent;
  border-radius: var(--radius);
  background: #fbfdfc;
  padding: 13px 14px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.activity-list-item:hover,
.activity-list-item:focus-visible,
.activity-list-item.is-active {
  background: #fff;
  border-color: color-mix(in srgb, var(--activity-accent) 28%, transparent);
  border-left-color: var(--activity-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--activity-accent) 16%, transparent);
  outline: none;
}

.activity-list-item strong {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  font-size: 0.94rem;
  line-height: 1.25;
}

.activity-list-item strong span {
  color: var(--activity-accent);
  font-weight: 950;
}

.activity-detail {
  min-height: 520px;
  padding: clamp(22px, 3vw, 34px);
}

.activity-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 42px;
}

.activity-code {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--bluegreen);
  font-weight: 900;
}

.activity-detail-header h3 {
  max-width: 900px;
  font-size: 1.22rem;
}

.activity-detail-header p {
  max-width: 900px;
  margin: 8px 0 0;
  color: var(--muted);
}

.activity-period {
  flex: 0 0 auto;
  align-self: flex-start;
  border: 1px solid #bde6e1;
  border-radius: 999px;
  background: #eef4f8;
  color: var(--teal-deep);
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 900;
}

.activity-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 22px;
}

.activity-detail-grid section {
  border-top: 4px solid rgba(37, 111, 134, 0.66);
  padding-top: 14px;
}

.activity-detail-grid h4 {
  margin: 0 0 10px;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.activity-detail-grid ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.activity-detail-grid li + li {
  margin-top: 8px;
}

.gantt-section {
  background: #f6f7fa;
}

.gantt-heading {
  max-width: 820px;
}

.gantt-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.gantt-summary article {
  position: relative;
  overflow: hidden;
  min-height: 70px;
  padding: 18px 20px;
  border: 1px solid var(--slate-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, #f8f9fb);
  box-shadow: 0 12px 28px rgba(49, 70, 92, 0.07);
}

.gantt-summary article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--bluegreen);
}

.gantt-summary article:nth-child(2)::before {
  background: var(--gold);
}

.gantt-summary article:nth-child(3)::before {
  background: var(--green);
}

.gantt-summary strong {
  display: block;
  color: var(--teal-deep);
  font-size: 1.62rem;
  line-height: 1;
  font-weight: 950;
}

.gantt-summary span {
  display: block;
  margin-top: 7px;
  color: #46635d;
  font-size: 0.9rem;
  font-weight: 900;
}

.gantt-shell {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 18px 45px rgba(20, 35, 34, 0.08);
}

.gantt-chart {
  min-width: 1180px;
}

@media (min-width: 1280px) {
  .gantt-chart {
    min-width: 0;
    width: 100%;
  }
}

.gantt-header,
.gantt-row {
  display: grid;
  grid-template-columns: 300px 1fr;
}

.gantt-header {
  position: relative;
  z-index: 2;
  background: #f1fbfa;
  border-bottom: 1px solid var(--line);
}

.gantt-label {
  padding: 16px 14px;
  border-right: 1px solid var(--line);
}

.gantt-label-head {
  font-weight: 900;
}

.gantt-label strong {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.17;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.gantt-label span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.gantt-months,
.gantt-years,
.gantt-track {
  display: grid;
  grid-template-columns: repeat(36, minmax(25px, 1fr));
}

.gantt-timeline-head {
  display: grid;
  grid-template-rows: 30px 54px;
}

.gantt-years {
  border-bottom: 1px solid var(--line);
}

.gantt-year {
  grid-column: span var(--span);
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--bluegreen);
  font-size: 0.76rem;
  font-weight: 950;
}

.gantt-month {
  min-height: 54px;
  display: grid;
  align-content: center;
  justify-items: center;
  border-right: 1px solid #edf0ed;
  color: var(--ink);
  font-size: 0.64rem;
}

.gantt-month strong,
.gantt-month span {
  display: block;
}

.gantt-month span {
  color: var(--muted);
  font-weight: 800;
}

.gantt-row {
  min-height: 96px;
  border-bottom: 1px solid #e7ece8;
}

.gantt-row:last-child {
  border-bottom: 0;
}

.gantt-track {
  position: relative;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(217, 209, 196, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 176, 165, 0.15) 1px, transparent 1px);
  background-size: calc(100% / 36) 100%, calc(100% / 12) 100%;
}

.gantt-bar {
  grid-column: var(--start) / span var(--duration);
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), #71cfc6);
  box-shadow: 0 8px 18px rgba(49, 176, 165, 0.28);
}

.gantt-milestone {
  position: absolute;
  left: calc(((var(--month) - 0.5) / 36) * 100%);
  top: 50%;
  /* --shift is written by spaceGanttMilestones() in script.js: milestones sit on
     their own month by default, but a label is far wider than one month column,
     so neighbours a month or two apart are nudged sideways to sit next to each
     other instead of on top of each other. */
  transform: translate(calc(-50% + var(--shift, 0px)), -50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 116px;
  pointer-events: none;
}

.gantt-milestone i {
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 1px rgba(196, 90, 69, 0.38);
}

.gantt-milestone em {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.12;
  text-align: center;
  box-shadow: 0 6px 14px rgba(20, 35, 34, 0.08);
}

.gantt-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  color: var(--muted);
  font-weight: 850;
  font-size: 0.9rem;
}

.gantt-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-bar {
  display: flex;
  width: 30px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), #71cfc6);
}

.legend-dot {
  display: flex;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--coral);
}

.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.result-list-link{
  text-decoration: none;
}

.result-list-link:hover{
  text-decoration: underline;
}

.filter-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  padding: 9px 13px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.filter-button:hover,
.filter-button:focus-visible,
.filter-button.is-active {
  border-color: var(--bluegreen);
  background: var(--bluegreen);
  color: #fff;
  outline: none;
}

.result-card.is-hidden {
  display: none;
}

.result-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
}

.result-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--teal-deep);
  font-weight: 900;
  text-decoration: none;
}

.result-link-muted {
  color: var(--muted);
}

.result-link:hover,
.result-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

#partneri {
  background:
    linear-gradient(135deg, rgba(49, 176, 165, 0.96) 0%, rgba(13, 95, 89, 0.96) 100%);
}

#partneri .section-heading .eyebrow {
  color: var(--gold-soft);
}

#partneri .section-heading h2 {
  color: #fff;
}

.partners-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.partner-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  padding: 18px 20px;
  align-items: stretch;
  min-height: 170px;
}

.partner-logo {
  display: grid;
  place-items: center;
  width: 150px;
  min-height: 108px;
  padding: 0;
}

.partner-logo img {
  display: block;
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
}

.partner-content {
  min-height: 118px;
  display: grid;
  gap: 10px;
  align-items: start;
}

.partner-content h3 {
  margin: 0;
}

.partner-content p {
  margin: 0;
}

.partner-card a {
  justify-self: start;
  margin-top: 2px;
  color: var(--teal-deep);
  font-weight: 900;
  text-decoration: none;
}

.partner-card a:hover,
.partner-card a:focus-visible {
  text-decoration: underline;
  outline: none;
}

.site-footer {
  background:
    linear-gradient(180deg, #fff 0%, #f4f7fa 100%);
  border-top: 1px solid var(--slate-line);
  color: var(--slate);
}

.footer-inner {
  width: var(--container);
  min-height: 150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 112px minmax(320px, 1fr) minmax(390px, 0.9fr);
  gap: 38px;
  align-items: start;
  padding: 36px 0 26px;
}

.footer-social,
.footer-coordinator,
.footer-logos {
  min-width: 0;
}

.footer-social {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-social strong,
.footer-coordinator strong {
  color: var(--slate);
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.2;
}

.social-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--bluegreen);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(37, 111, 134, 0.22);
}

.social-mark:hover,
.social-mark:focus-visible {
  background: var(--teal);
  outline: none;
}

.footer-coordinator {
  display: grid;
  gap: 8px;
  font-style: normal;
  padding-left: 18px;
  border-left: 3px solid var(--gold);
}

.footer-coordinator strong {
  margin-bottom: 3px;
}

.footer-coordinator span,
.footer-coordinator a {
  color: var(--muted);
  text-decoration: none;
  font-size: 1rem;
}

.footer-coordinator a:hover,
.footer-coordinator a:focus-visible {
  color: var(--teal);
  text-decoration: underline;
  outline: none;
}

.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  min-height: 124px;
  padding: 26px 34px;
  border: 1px solid var(--teal);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(49, 70, 92, 0.08);
}

.footer-project-logo {
  display: block;
  width: 160px;
  max-height: 58px;
  height: auto;
  object-fit: contain;
}

.footer-eu-logo {
  display: block;
  width: min(280px, 27vw);
  max-height: 64px;
  height: auto;
  object-fit: contain;
}

.footer-copy {
  width: var(--container);
  margin: 0 auto;
  padding: 0 0 20px;
  border-top: 1px solid rgba(49, 176, 165, 0.18);
  padding-top: 14px;
  color: var(--muted);
  font-size: 0.86rem;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    position: fixed;
    inset: 74px 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 20px 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    min-height: 48px;
  }

  .stats-grid,
  .news-grid,
  .results-grid,
  .partners-grid,
  .research-grid,
  .gantt-summary,
  .about-hero,
  .about-focus-grid,
  .about-media-layout,
  .results-intro,
  .results-page-header,
  .goals-layout,
  .activity-explorer,
  .activity-detail-grid {
    grid-template-columns: 1fr;
  }

  .expected-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-grid article,
  .stats-grid article:first-child {
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .primary-goal {
    min-height: 260px;
  }

  .activity-detail {
    min-height: auto;
  }

  .activity-detail-header {
    flex-direction: column;
    margin-bottom: 28px;
  }

  .news-list-link {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .news-list-image {
    min-height: 220px;
  }

  .news-detail-nav {
    grid-template-columns: 1fr;
  }

  .news-detail-nav a:last-child {
    text-align: left;
  }

  .section-visual.small {
    max-width: none;
    justify-self: stretch;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .footer-coordinator {
    padding-left: 0;
    border-left: 0;
  }

  .footer-logos {
    justify-content: flex-start;
    flex-wrap: wrap;
    min-height: auto;
    padding: 18px;
  }

  .footer-eu-logo {
    width: min(320px, 100%);
  }
}

@media (max-width: 620px) {
  :root {
    --container: calc(100vw - 28px);
  }

  .brand-text small {
    display: none;
  }

  .hero {
    min-height: 88vh;
  }

  .hero-content {
    margin-left: 14px;
    max-width: calc(100vw - 28px);
  }

  .hero-actions,
  .button,
  .results-toolbar {
    width: 100%;
  }

  .button,
  .filter-button {
    flex: 1 1 auto;
  }

  .partner-card {
    grid-template-columns: 1fr;
  }

  .specific-goals li {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    padding: 14px;
  }

  .expected-results-grid {
    grid-template-columns: 1fr;
  }

  .news-list-link {
    padding: 22px 0;
  }

  .news-list-image {
    min-height: 0;
  }

  .news-list-content h2 {
    font-size: 1.18rem;
  }

  .news-detail-nav a {
    min-height: auto;
  }
}

/* Drupal "Full width" region: rendered outside .layout-container in
   page.html.twig, so it spans the full available width. */
.region-full-width {
  width: 100%;
}

/* The admin toolbar is fixed and paints above .site-header (z-index 490 vs 50),
   so for logged-in users it covers the navbar. Drupal.displace publishes the
   toolbar's size as these custom properties and keeps them current on resize
   and sidebar collapse. They are undefined for anonymous visitors, so the 0px
   fallbacks leave the public site untouched. */
.site-header {
  top: var(--drupal-displace-offset-top, 0px);
  left: var(--drupal-displace-offset-left, 0px);
}

/* Layout widths here are derived from 100vw, which counts the full viewport
   including the space the admin sidebar occupies -- so content computed from it
   runs off the right edge for logged-in users. Subtracting the same displace
   offset keeps those widths inside the visible area; it resolves to 0 for
   anonymous visitors, leaving the public layout identical. */
:root {
  --container: min(1180px, calc(100vw - var(--drupal-displace-offset-left, 0px) - 48px));
}

.hero-content {
  margin-left: calc((100vw - var(--drupal-displace-offset-left, 0px) - var(--container)) / 2);
}

.activity-section-inner,
.wide-section-inner {
  width: min(1640px, calc(100vw - var(--drupal-displace-offset-left, 0px) - 48px));
}

/* Placeholder row shown when a category has no documents. It reuses
   .result-list-item so the borders, padding and rhythm match a real row; only
   the heading is toned down, since it is a message rather than a document. */
.result-list-item--empty .result-list-content h3 {
  color: var(--muted);
  font-weight: 700;
}

/* Holds the exposed filter's real select + Apply button. Hidden outright rather
   than visually hidden, so it keeps serialising with the form without being
   announced as a duplicate of the .filter-button toolbar. */
.las-exposed-hidden {
  display: none;
}

/* Drupal's own user forms (login, password reset, register) ship unstyled, so
   they are given the same card, tokens and button treatment as the rest of the
   site. Scoped to these forms so admin screens are left alone. */
.user-login-form,
.user-pass,
.user-register-form {
  width: min(430px, calc(100vw - 48px));
  margin: 0 auto 80px;
  padding: 34px 32px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--bluegreen);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.user-login-form .form-item,
.user-pass .form-item,
.user-register-form .form-item {
  margin: 0 0 18px;
}

.user-login-form label,
.user-pass label,
.user-register-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--slate);
  font-size: 0.88rem;
  font-weight: 850;
}

.user-login-form input[type="text"],
.user-login-form input[type="password"],
.user-login-form input[type="email"],
.user-pass input[type="text"],
.user-pass input[type="email"],
.user-register-form input[type="text"],
.user-register-form input[type="password"],
.user-register-form input[type="email"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.user-login-form input:focus,
.user-pass input:focus,
.user-register-form input:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(49, 176, 165, 0.18);
}

.user-login-form .description,
.user-pass .description,
.user-register-form .description {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}

.user-login-form .form-required::after,
.user-pass .form-required::after,
.user-register-form .form-required::after {
  content: " *";
  color: var(--coral);
}

.user-login-form .form-actions,
.user-pass .form-actions,
.user-register-form .form-actions {
  margin-top: 26px;
}

/* Matches .button-primary rather than re-inventing a look for the submit. */
.user-login-form input[type="submit"],
.user-pass input[type="submit"],
.user-register-form input[type="submit"] {
  width: 100%;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(49, 176, 165, 0.28);
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.user-login-form input[type="submit"]:hover,
.user-login-form input[type="submit"]:focus-visible,
.user-pass input[type="submit"]:hover,
.user-register-form input[type="submit"]:hover {
  background: var(--teal-dark);
  box-shadow: 0 18px 36px rgba(49, 176, 165, 0.34);
  transform: translateY(-2px);
  outline: none;
}

/* .site-header is fixed, so it covers whatever the page starts with. The LAS
   sections bring their own top padding (.hero 120px, .page-hero 136px), but
   pages rendered from Drupal's own output -- login, 403/404, admin forms -- do
   not, and their first element ends up underneath the navigation.

   The offset is a plain 75px header + 24px of breathing room, with no admin
   toolbar term: when the toolbar is present it shifts the header and the main
   content down by the same amount, so the gap between them is unchanged. */
body:not(:has(.hero, .page-hero, .section)) main {
  padding-top: 99px;
}

/* In-page anchor targets sit under the fixed .site-header unless the jump stops
   short. The design already reserves 86px (75px header + 11px gap), but that
   figure predates Drupal's admin toolbar, which pushes the header a further
   --drupal-displace-offset-top down and left headings partly covered for
   logged-in users. Adding the offset keeps the same 11px gap in both cases; it
   resolves to 0 for anonymous visitors, so their scrolling is unchanged.

   Applied to [id] rather than just .section/.hero/.stats-band so any anchor
   target benefits -- headings, Views rows, node content and admin markup. */
[id] {
  scroll-margin-top: calc(var(--drupal-displace-offset-top, 0px) + 86px);
}

/* Views pager inside .pagination: the static page built <button> elements,
   Drupal renders a <nav class="pager"> with a list of links. Flatten the list
   so the links become direct flex children, then give them the same look as
   .pagination-button. */
.pagination .pager,
.pagination .pager__items {
  display: contents;
}

.pagination .pager__item {
  display: block;
  margin: 0;
}

.pagination .pager__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  padding: 8px 13px;
  font-weight: 850;
  text-decoration: none;
}

.pagination .pager__item a:hover,
.pagination .pager__item a:focus-visible,
.pagination .pager__item.is-active a {
  border-color: var(--bluegreen);
  background: var(--bluegreen);
  color: #fff;
  outline: none;
}