/* =========================
   components.css
   UI components (portable)
   ========================= */

/* -------------------- Animations -------------------- */
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
  }

  100% {
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
  }
}

.ui-pulse:hover {
  animation: pulse 2000ms var(--ease) infinite;
  -webkit-animation: pulse 2000ms var(--ease) infinite;
}

/* -------------------- Buttons -------------------- */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8rem 1.1rem;
  /* border: var(--border); */
  border-radius: var(--radius-1);
  background: var(--brand-3);
  color: #fff;
  font-weight: var(--weight-body-strong);
  transition: filter var(--dur-2) var(--ease);
  font-size: var(--text-base);

}

.ui-button:hover {
  filter: brightness(0.98);
}

.ui-button--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--color-paper);
}

/* -------------------- Icon button + toggles -------------------- */
.ui-icon-button,
.ui-icon-toggle {
  width: var(--icon-hit);
  height: var(--icon-hit);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: var(--radius-1);
  background: var(--icon-surface);
  color: var(--ink);
}

.ui-icon-button svg,
.ui-icon-toggle svg {
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
}

/* Stacked SVG toggle pattern */
.ui-icon-toggle__stack {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.ui-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
  transform-origin: center;
}

.ui-icon--a {
  opacity: 1;
  transform: scale(1);
}

.ui-icon--b {
  opacity: 0;
  transform: scale(0.92);
}

.ui-icon-toggle.is-on .ui-icon--a {
  opacity: 0;
  transform: scale(0.92);
}

.ui-icon-toggle.is-on .ui-icon--b {
  opacity: 1;
  transform: scale(1) translateY(-1px);
}

.ui-icon-toggle:hover .ui-icon {
  transform: scale(1.04);
}

.ui-icon-toggle.is-on:hover .ui-icon--a {
  transform: scale(0.92);
}

/* -------------------- Menu “nudge” animation (optional) -------------------- */
.ui-menu-icon .bar {
  transform-origin: center;
  transition: transform 300ms ease, opacity 200ms ease;
}

/* Example open state that “nudges” bars */
.ui-icon-toggle.is-on .bar--top {
  transform: translateX(6px) scaleX(0.95);
}

.ui-icon-toggle.is-on .bar--mid {
  transform: translateX(-6px);
}

.ui-icon-toggle.is-on .bar--bot {
  transform: translateX(10px) scaleX(0.9);
  -webkit-transform: translateX(10px) scaleX(0.9);
  -moz-transform: translateX(10px) scaleX(0.9);
  -ms-transform: translateX(10px) scaleX(0.9);
  -o-transform: translateX(10px) scaleX(0.9);
}

/* -------------------- Cards -------------------- */
.ui-card {
  --bg: var(--color-paper);
  --border: var(--color-border);
  --tint: var(--brand-3);
  /* change once, affects all cards */

  position: relative;
  overflow: hidden;

  aspect-ratio: 1 / 1;
  display: grid;
  gap: var(--space-2);
  align-content: center;
  justify-items: center;

  padding: var(--space-6);
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);

  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  color: var(--color-invert);
  text-decoration: none;

  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.ui-card>* {
  position: relative;
  z-index: 1;
  color: inherit;
}

.ui-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}

.ui-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--tint), transparent 50%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}

.ui-card:hover,
.ui-card:focus-visible {
  box-shadow: var(--shadow-2);
  border-color: color-mix(in oklab, var(--border), var(--tint) 90%);
  transform: translateY(-2px);
  outline: none;
}

.ui-card:hover::after,
.ui-card:focus-visible::after {
  opacity: 1;
}

.ui-card:hover::before,
.ui-card:focus-visible::before {
  opacity: 0.18;
}

/* -------------------- Header -------------------- */
.ui-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  z-index: var(--z-header);
  background: transparent;
  display: flex;
  align-items: center;
  isolation: isolate;
}



.ui-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-header__left,
.ui-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);

}

.ui-header__right {
  padding-right: 1.5%;
  z-index: calc(var(--z-overlay) + 2);
}

/* Desktop scroll state: full-width banner + left title reveal */
@media (min-width: 900px) {
  .ui-header {
    background: transparent;
    transition: background-color 220ms var(--ease), box-shadow 220ms var(--ease);
  }
}

/* Keep inner layout consistent in both states */
.ui-header__inner {
  width: 100%;
}

/* Title styling - hidden by default */
.c-header__name {
  /*    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    letter-spacing: 0.01em;
    font-size: 16px;
    line-height: 1.1; */

  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(60vw, 520px);

  pointer-events: none;
}

@media (min-width: 900px) {
  .ui-header {
    --bar-progress: 0;
    /* 0..1 */
    --title-alpha: 0;
    /* 0..1 set by JS */
    --header-bar-bg: var(--brand-3);
    isolation: isolate;
  }

  .ui-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--header-bar-bg);
    transform-origin: top;
    transform: scaleY(var(--bar-progress));
    will-change: transform;
    z-index: -1;
  }

  /* Title fades in after bar is in place */
  .c-header__name {
    opacity: var(--title-alpha);
    transform: translateY(calc((1 - var(--title-alpha)) * -6px));
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);

    /*     font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    letter-spacing: 0.01em;
    font-size: 16px;
    line-height: 1.1; */

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(60vw, 520px);
    pointer-events: none;
    align-self: start;
    padding: 0;
    margin: 0;
  }
}



/* -------------------- Hero -------------------- */
.ui-hero {
  --hero-ratio: 3 / 2;
  --bg-bleed: 12%;
  --parallax-y: 0px;

  position: relative;
  width: 100%;
  display: grid;
  align-items: center;
  overflow: hidden;

  aspect-ratio: var(--hero-ratio);
  color: #fff;

  /* fallback if anything shows through */
  background: var(--color-page-bg, #000);
}

/* Smaller “banner hero” variant */
.ui-hero--banner {
  --hero-ratio: 16 / 5;
  /* wider + shallower */
  --bg-bleed: 10px;
  /* less bleed looks cleaner on short banners */

  /* optional: set a firm height range so it doesn’t get too tall/short */
  aspect-ratio: var(--hero-ratio);

  --banner-min: 220px;
  --banner-ideal: 26svh;
  --banner-max: 340px;
  min-height: clamp(var(--banner-min), var(--banner-ideal), var(--banner-max));



}

/* Background image layer */
.ui-hero::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--bg-bleed));

  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-size: cover;

  /* key: make the crop controllable per hero */
  background-position: var(--bg-pos, 50% 50%);

  z-index: 0;

  --layer-base: var(--translate-background);
  transform: var(--layer-base, none) translateY(var(--parallax-y, 0px));
  will-change: transform;
}

/* Overlay/shadow layer */
.ui-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: var(--shadow-inset-hero);
  pointer-events: none;
  z-index: 1;
}

.ui-hero>* {
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .ui-hero {
    aspect-ratio: auto;
    min-height: 110svh;
  }

  .ui-hero--banner {
    min-height: clamp(180px, 24svh, 260px);
    aspect-ratio: auto;
    /* optional - if you prefer height control */
  }
}


.ui-hero__content {
  position: relative;
}

/* Full-screen overlay */
.ui-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);

  pointer-events: none;
  /* closed by default */
}

/* Solid colour that covers header + content completely */
.ui-nav-overlay__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  cursor: pointer;

  /* Use your brand token as the full-screen colour */
  /*   background: var(--brand-3);
 */
  /* optional: if you want slightly see-through */
  /* background: color-mix(in oklab, var(--brand-3), transparent 8%); */

  opacity: 0;
  transition: opacity 220ms var(--ease);
}

/* Right panel (links aligned right) */
.ui-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;

  width: calc(3/7)*100vw;
  /* ~3/7 */
  max-width: 640px;
  min-width: 360px;

  /* If you want panel to be same colour as overlay, keep brand-3.
     If you want a subtle separation, use a mix. */
  background: color-mix(in oklab, var(--brand-3), #000 8%);
  /* border-left: 1px solid color-mix(in oklab, #000, transparent 70%); */
  box-shadow: var(--shadow-2);

  transform: translateX(100%);
  transition: transform 260ms var(--ease);

  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);

  align-items: flex-end;
}

.ui-nav-panel :first-child {
  margin-top: 20%;
}

.ui-nav-link {
  text-decoration: none;
  color: #fff;
  font-size: calc(2*var(--text-base));
  /*   border: 1px solid color-mix(in oklab, #fff, transparent 65%);
  border-radius: var(--radius-1); */
  padding: 0.5rem 0.5rem;
  font-weight: var(--weight-body-strong);
  background: transparent;
  transition: filter var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.ui-nav-link:hover,
.ui-nav-link:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-1px);
  outline: none;
}

/* Open state */
.ui-nav-overlay.is-open {
  pointer-events: auto;
}

.ui-nav-overlay.is-open .ui-nav-overlay__scrim {
  opacity: 1;
}

.ui-nav-overlay.is-open .ui-nav-panel {
  transform: translateX(0);
}

/* Mobile: panel covers the whole screen */
@media (max-width: 999px) {
  .ui-nav-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
    border-left: 0;
  }
}

/* -------------------- Forms -------------------- */
.ui-form {
  display: grid;
  gap: var(--space-4);
}

.ui-field {
  border: 1px solid var(--border);
  background: var(--muted);
  border-radius: var(--field-radius);
  padding: var(--field-pad-y) var(--field-pad-x);
  transition: background var(--dur-2) var(--ease);
}

.ui-field:hover {
  background: color-mix(in oklab, var(--muted), #000 6%);
}

.ui-input,
.ui-textarea {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--ink-muted);
}

.ui-textarea {
  min-height: 140px;
  resize: vertical;
}

/* -------------------- Footer reveal -------------------- */
.ui-footer {
  position: relative;
  /*   background-color: var(--brand-1);
 */
  background-color: var(--brand-6);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: var(--space-3);
  z-index: var(--z-footer);
  /*   height:240px;
 */
}

@media (max-width: 700px) {
  .ui-footer {
    position: static;
  }
}

.ui-footer__panel {
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  width: 56px;
  transition: width var(--dur-3) var(--ease);
}

.ui-footer__panel:hover {
  width: min(1100px, 100%);
}

.ui-footer__content {
  padding: var(--space-4);
  display: none;
}

.ui-footer__panel:hover .ui-footer__content {
  display: block;
}

/* -------------------- Media box -------------------- */
.ui-media-box {
  margin: 0;
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.ui-media-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* If you want a fixed “box” feel on desktop, with cropping: */
@media (min-width: 900px) {
  .ui-media-box {
    --aspect-ratio: 1 / 1;
    aspect-ratio: var(--aspect-ratio);
    /* square box */
  }

  .ui-media-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/*** -------------------- Misc components -------------------- */
.c-menu-toggle {
  --icon-size: 56px;
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: currentColor;
  /* icon inherits */
}

.c-menu-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.c-menu-icon .bar {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* keeps stroke weight if you scale icon */
}


.icon-btn {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: white;
}

.icon-mail {
  width: 48px;
  /* scale here */
  height: 48px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mail-diag {
  opacity: 0;
  transition: opacity 220ms ease;
}

.icon-btn.is-open .mail-diag {
  opacity: 1;
}



/* -------------------- Quotes (single visible card, in-flow) -------------------- */
.ui-quotes {
  margin-top: var(--space-6);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Your ui-card currently enforces aspect-ratio: 1/1, which is wrong for quotes.
   Override it only for quote cards. */
.ui-quote.ui-card {
  aspect-ratio: auto;
  justify-items: start;
  align-content: start;
  gap: var(--space-3);
  text-align: left;
  color: var(--color-ink);
  background-image: none;
}

.ui-quote.ui-card::before,
.ui-quote.ui-card::after {
  display: none;
}

/* Only one visible at a time - but keep in normal flow */
.ui-quote {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
}

.ui-quote.is-active {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

/* Slightly nicer quote typography */
.ui-quote p:first-child {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  margin: 0;
}

.ui-quote p+p {
  margin: 0;
  opacity: 0.9;
}

                /* News list uses ui-card but disables the square tile behaviour */
                .ui-news-list {
                    max-width: 980px;
                    margin: 0 auto;
                }

                .ui-news-item.ui-card {
                    aspect-ratio: auto;
                    justify-items: stretch;
                    align-content: start;
                    gap: var(--space-4);
                    text-align: left;
                    background-image: none;
                    color: var(--color-ink);
                    text-decoration: none;
                    cursor: default;
                }

                .ui-news-item.ui-card::before,
                .ui-news-item.ui-card::after {
                    display: none;
                }

                /* Summary (collapsed view) */
                .ui-news-item>summary {
                    list-style: none;
                    cursor: pointer;
                    user-select: none;
                    display: block;
                }

                .ui-news-item>summary::-webkit-details-marker {
                    display: none;
                }

                .ui-news-teaser {
                    display: grid;
                    grid-template-columns: 132px 1fr auto;
                    gap: var(--space-4);
                    align-items: center;
                }

                /* Small consistent teaser image */
                .ui-news-thumb {
                    width: 132px;
                    height: 88px;
                    border-radius: var(--radius-2);
                    overflow: hidden;
                    border: 1px solid var(--color-border);
                    background: var(--color-paper);
                }

                .ui-news-thumb img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }

                .ui-news-thumb--empty {
                    display: grid;
                    place-items: center;
                    font-size: 0.9rem;
                    opacity: 0.65;
                }

                .ui-news-headline {
                    display: grid;
                    gap: 0.35rem;
                    min-width: 0;
                }

                .ui-news-meta {
                    display: flex;
                    align-items: baseline;
                    justify-content: space-between;
                    gap: var(--space-4);
                    min-width: 0;
                }

                .ui-news-title {
                    margin: 0;
                    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
                    line-height: 1.2;
                    min-width: 0;
                }

                .ui-news-date {
                    opacity: 0.75;
                    white-space: nowrap;
                    font-size: 0.95rem;
                }

                .ui-news-tagline {
                    margin: 0;
                    opacity: 0.85;
                    max-width: 80ch;
                }

                .ui-news-cta {
                    display: flex;
                    align-items: center;
                    gap: var(--space-3);
                    justify-self: end;
                }

                /* Button should look like your site button but work inside summary */
                .ui-news-btn {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0.65rem 0.95rem;
                    border-radius: var(--radius-1);
                    border: 1px solid var(--color-border);
                    background: transparent;
                    color: var(--color-ink);
                    font-weight: 600;
                    cursor: pointer;
                }

                .ui-news-btn:hover {
                    filter: brightness(0.98);
                }

                .ui-news-chevron {
                    opacity: 0.6;
                    transition: transform 220ms var(--ease);
                }

                details[open] .ui-news-chevron {
                    transform: rotate(180deg);
                }

                /* Expanded body */
                .ui-news-body {
                    padding-top: var(--space-4);
                    border-top: 1px solid var(--color-border);
                    display: grid;
                    gap: var(--space-5);
                }

                /* Big featured figure shown only when open */
                .ui-news-featured {
                    border-radius: var(--radius-2);
                    overflow: hidden;
                    border: 1px solid var(--color-border);
                    background: var(--color-paper);
                    margin: 0;
                    display: none;
                }

                details[open] .ui-news-featured {
                    display: block;
                }

                .ui-news-featured img {
                    width: 100%;
                    height: auto;
                    display: block;
                }

                .ui-news-caption {
                    padding: var(--space-3);
                    opacity: 0.85;
                    font-size: 0.95rem;
                }

                .ui-news-section h3 {
                    margin: 0 0 var(--space-2) 0;
                }

                .ui-news-section .ui-news-section__body {
                    opacity: 0.95;
                }

                @media (max-width: 800px) {
                    .ui-news-teaser {
                        grid-template-columns: 1fr;
                        align-items: start;
                    }

                    .ui-news-thumb {
                        width: 100%;
                        height: 180px;
                    }

                    .ui-news-cta {
                        justify-self: start;
                    }

                    .ui-news-meta {
                        flex-wrap: wrap;
                    }
                }