/* =========================================================
   CJRAE GIURGIU
   Main theme stylesheet
   ========================================================= */

/* ---------------------------------------------------------
   Design tokens
   --------------------------------------------------------- */

:root {
  /* Prevent Pico CSS from enlarging everything on wide screens */
  --font-size: 1rem;

  --cjrae-blue: #17466f;
  --cjrae-blue-dark: #103554;
  --cjrae-blue-light: #eef5fa;

  --cjrae-teal: #168aa1;

  --cjrae-text: #1d2939;
  --cjrae-muted: #667085;
  --cjrae-border: #dfe5eb;

  --cjrae-background: #ffffff;
  --cjrae-surface: #f7f9fb;

  --cjrae-radius: 10px;

  --cjrae-shadow-sm: 0 2px 8px rgba(16, 53, 84, 0.06);

  --cjrae-shadow-md: 0 12px 30px rgba(16, 53, 84, 0.12);
}

/* ---------------------------------------------------------
   Global
   --------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cjrae-background);
  color: var(--cjrae-text);
}

/* Homepage spacing */

body.home .content {
  padding-top: 2rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::marker {
  color: var(--cjrae-blue);
}

a {
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

img,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--cjrae-text);
  margin-bottom: 0.6rem;
}

p {
  line-height: 1.7;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---------------------------------------------------------
   Visibility helpers
   --------------------------------------------------------- */

.hide-desktop {
  display: none !important;
}

/* =========================================================
   HEADER
   ========================================================= */

.header {
  position: relative;
  z-index: 1000;

  padding: 0;

  background: #ffffff;
  border-bottom: 1px solid var(--cjrae-border);

  box-shadow: var(--cjrae-shadow-sm);
}

.header-grid {
  min-height: 92px;

  display: flex;
  align-items: center;

  gap: 1.5rem;

  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------
   Logo
   --------------------------------------------------------- */

.header-logo {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  margin: 0 !important;
  padding: 0;

  color: var(--cjrae-blue-dark);
  text-decoration: none;

  font-size: 1.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}

.header-logo img {
  display: block;

  width: auto !important;
  max-width: 250px;
  max-height: 78px;

  margin: 0;

  object-fit: contain;
}

/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.header-nav {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 0.3rem;

  margin: 0 0 0 auto !important;
  padding: 0;

  list-style: none;
}

.header-nav li {
  position: relative;

  margin: 0;
  padding: 0;

  list-style: none;
}

.header-nav > li > a {
  display: flex;
  align-items: center;
  gap: 0.35rem;

  margin: 0;
  padding: 0.7rem 0.55rem;

  border-radius: 7px;

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

  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;

  white-space: nowrap;
}

.header-nav > li > a:hover,
.header-nav > li > a:focus-visible {
  background: var(--cjrae-blue-light);
  color: var(--cjrae-blue);
}

.header-nav .current > a {
  background: var(--cjrae-blue);
  color: #ffffff;
}

/* ---------------------------------------------------------
   Dropdowns
   --------------------------------------------------------- */

.header-nav .subMenu {
  position: absolute;
  z-index: 1100;

  top: 100%;
  left: 0;

  display: none;
  flex-direction: column;

  min-width: 250px;
  max-width: 330px;

  margin: 0 !important;
  padding: 0.45rem !important;

  background: #ffffff;

  border: 1px solid var(--cjrae-border);
  border-radius: var(--cjrae-radius);

  box-shadow: var(--cjrae-shadow-md);
}

.header-nav .subMenu li {
  width: 100%;
}

.header-nav .subMenu a {
  position: relative;

  display: block;
  width: 100%;

  margin: 0;
  padding: 0.7rem 0.8rem;

  border-radius: 6px;

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

  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;

  white-space: normal;
}

.header-nav .subMenu a:hover,
.header-nav .subMenu a:focus-visible {
  background: var(--cjrae-blue-light);
  color: var(--cjrae-blue);
}

/* Open submenu with mouse or keyboard */

.header-nav li:hover > .subMenu,
.header-nav li:focus-within > .subMenu {
  display: flex;
}

/* Nested fly-out */

.header-nav .subMenu .subMenu {
  top: -0.45rem;
  left: calc(100% + 5px);

  margin: 0 !important;
}

/* Small invisible bridge between nested menus */

.header-nav .subMenu .subMenu::before {
  content: "";

  position: absolute;

  top: 0;
  left: -6px;

  width: 6px;
  height: 100%;
}

/* Parent menu indicators */

/* Dropdown indicators */

.header-nav .wSub > a {
  position: relative;
  padding-right: 1.9rem;
}

/* Top-level dropdown: chevron down */

.header-nav > .wSub > a::after {
  content: "";

  position: absolute;
  top: 50%;
  right: 0.6rem;

  width: 7px;
  height: 7px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: translateY(-70%) rotate(45deg);

  transition: transform 160ms ease;
}

/* Rotate top-level chevron when menu is active */

.header-nav > .wSub:hover > a::after,
.header-nav > .wSub:focus-within > a::after {
  transform: translateY(-30%) rotate(225deg);
}

/* Nested dropdown: chevron right */

.header-nav .subMenu > .wSub > a::after {
  content: "";

  position: absolute;
  top: 50%;
  right: 0.75rem;

  width: 7px;
  height: 7px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: translateY(-50%) rotate(-45deg);

  transition: transform 160ms ease;
}

/* Slight movement when nested menu is active */

.header-nav .subMenu > .wSub:hover > a::after,
.header-nav .subMenu > .wSub:focus-within > a::after {
  transform: translate(2px, -50%) rotate(-45deg);
}

/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.header-mobile-btn {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  display: none;
  align-items: center;
  justify-content: center;

  margin: 0 0 0 auto;
  padding: 0;

  border: 1px solid var(--cjrae-border);
  border-radius: 8px;

  background: #ffffff;
  color: var(--cjrae-blue);

  box-shadow: none;
}

.header-mobile-btn:hover,
.header-mobile-btn:focus-visible {
  background: var(--cjrae-blue-light);
  border-color: var(--cjrae-blue);
}

/* Hamburger icon */

.menu-icon {
  width: 24px;
  height: 24px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 5px;
}

.menu-icon span {
  display: block;

  width: 100%;
  height: 2px;

  background: var(--cjrae-blue);
  border-radius: 999px;

  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

/* Hamburger becomes X */

.header-mobile-btn[aria-expanded="true"] .menu-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header-mobile-btn[aria-expanded="true"] .menu-icon span:nth-child(2) {
  opacity: 0;
}

.header-mobile-btn[aria-expanded="true"] .menu-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   CONTENT
   ========================================================= */

.content {
  padding: 2rem 0 1rem;
}

.content-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(240px, 300px);

  gap: 3rem;

  margin: 0;
}

.content-main {
  min-width: 0;
}

.content-title {
  display: block;

  margin-bottom: 1.25rem;
  padding-bottom: 1rem;

  border-bottom: 1px solid var(--cjrae-border);
}

.content-title h1 {
  margin: 0 0 0.4rem;

  color: var(--cjrae-text);

  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------- */

.content-main nav[aria-label="breadcrumb"] {
  margin: 0;
}

.content-main nav[aria-label="breadcrumb"] li:last-child {
  color: var(--cjrae-text);
  font-weight: 600;
}

.content-main nav[aria-label="breadcrumb"] ul {
  display: flex;
  flex-wrap: wrap;

  gap: 0.35rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.content-main nav[aria-label="breadcrumb"] li {
  padding: 0;
  margin: 0;

  color: var(--cjrae-muted);

  font-size: 0.9rem;
}

.content-main nav[aria-label="breadcrumb"] li + li::before {
  content: "/";

  margin-right: 0.35rem;

  color: #98a2b3;
}

.content-main nav[aria-label="breadcrumb"] a {
  color: var(--cjrae-muted);
  text-decoration: none;
}

.content-main nav[aria-label="breadcrumb"] a:hover {
  color: var(--cjrae-blue);
}

/* ---------------------------------------------------------
   Page content safety
   --------------------------------------------------------- */

.content-main img {
  max-width: 100% !important;
  height: auto !important;

  margin-bottom: 1.5rem;

  border-radius: 6px;
}

.content-main iframe,
.content-main video {
  max-width: 100%;
}

.content-main table {
  width: 100%;
  max-width: 100%;
}

.content-main pre {
  max-width: 100%;
  overflow-x: auto;
}

.content-main a:not([role="button"]) {
  text-underline-offset: 0.15em;
}

.content-main > p:first-of-type {
  font-size: 1.05rem;
}

.content-main ul,
.content-main ol {
  padding-left: 1.4rem;
}

.content-main li {
  margin-bottom: 0.45rem;
  line-height: 1.6;
}

.content-main blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;

  border-left: 4px solid var(--cjrae-blue);
  background: var(--cjrae-surface);
}

.content-main table {
  border-collapse: collapse;
}

.content-main th,
.content-main td {
  padding: 0.75rem;

  border: 1px solid var(--cjrae-border);

  text-align: left;
  vertical-align: top;
}

.content-main th {
  background: var(--cjrae-surface);
}

.content-main hr {
  border: 0;
  border-top: 1px solid var(--cjrae-border);
  margin: 2rem 0;
}

/* =========================================================
   INTERNAL PAGE READABILITY
   ========================================================= */

.content-main > p,
.content-main > ul,
.content-main > ol,
.content-main > blockquote {
  max-width: 820px;
}

.content-main > p,
.content-main > ul,
.content-main > ol {
  margin-left: 0;
  margin-right: 0;
}

.content-main > h2,
.content-main > h3,
.content-main > h4 {
  max-width: 900px;
}

.content-main > h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.8rem;

  font-size: clamp(1.6rem, 2.5vw, 2rem);
  line-height: 1.2;
}

.content-main > h3 {
  margin-top: 2rem;
  margin-bottom: 0.7rem;

  font-size: 1.35rem;
  line-height: 1.3;
}

.content-main > h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;

  font-size: 1.1rem;
}

.content-main > p {
  margin-top: 0;
  margin-bottom: 1.1rem;
}

.content-main > ul,
.content-main > ol {
  margin-bottom: 1.25rem;
}

.content-main > figure {
  margin: 2rem 0;
}

.content-main > figure img {
  display: block;
  width: 100%;
}

.content-main > figure figcaption {
  margin-top: 0.6rem;

  color: var(--cjrae-muted);
  font-size: 0.9rem;
}

.content-main > img {
  display: block;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.content-main > table {
  margin: 2rem 0;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.content-sidebar {
  min-width: 0;
}

.content-sidebar h2,
.content-sidebar h3 {
  display: block;

  margin: 0 0 1rem;
  padding-bottom: 0.65rem;

  border-bottom: 2px solid var(--cjrae-blue-light);
}

.content-sidebar ul {
  margin: 0 0 1.5rem;
  padding: 0.75rem 0.75rem 0.75rem 2rem;

  border: 1px solid var(--cjrae-border);
  border-radius: var(--cjrae-radius);

  background: var(--cjrae-surface);
  color: var(--cjrae-text);

  line-height: 1.45;
}

.content-sidebar li {
  margin: 0.45rem 0;
}

.content-sidebar a {
  color: var(--cjrae-blue);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  margin-top: 4rem;
  background: var(--cjrae-blue-dark);
  color: #ffffff;
}

.footer .container {
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}

.footer-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 2rem;
}

.footer-brand {
  max-width: 520px;
}

.footer-brand strong {
  display: block;
  margin-bottom: 0.4rem;

  font-size: 1.1rem;
}

.footer-brand p {
  margin: 0;

  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1rem;

  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-bottom small {
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 700px) {
  .footer-grid {
    flex-direction: column;
  }

  .footer-links {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* =========================================================
   GRID VARIANTS
   ========================================================= */

.content-grid-left {
  grid-template-columns:
    minmax(240px, 300px)
    minmax(0, 1fr);
}

.content-grid-left .content-sidebar {
  order: 1;
}

.content-grid-left .content-main {
  order: 2;
}

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

.content-grid-nosidebar .content-sidebar {
  display: none;
}

/* =========================================================
   RESPONSIVE
   Full horizontal navigation only appears when there is
   genuinely enough room for all top-level items.
   ========================================================= */

@media (max-width: 1199px) {
  .hide-desktop {
    display: flex !important;
  }

  .hide-mobile {
    display: none !important;
  }

  /* Header */

  .header-grid {
    min-height: 82px;

    flex-wrap: wrap;

    gap: 0.75rem;

    padding: 0.6rem 0;
  }

  .header-logo {
    min-width: 0;
  }

  .header-logo img {
    max-width: 220px;
    max-height: 64px;
  }

  .header-mobile-btn {
    display: flex;
  }

  /* Mobile navigation */

  .header-nav {
    flex: 0 0 100%;

    width: 100%;

    flex-direction: column;
    align-items: stretch;

    gap: 0.2rem;

    margin: 0 !important;
    padding: 0.75rem 0 0;
  }

  .header-nav:not(.hide-mobile) {
    display: flex !important;
  }

  .header-nav > li {
    width: 100%;
  }

  .header-nav > li > a {
    width: 100%;

    padding: 0.8rem 0.9rem;

    white-space: normal;
  }

  /* Parent items */

  .header-nav .wSub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .header-nav .wSub > a {
    flex: 1;

    width: auto;

    padding-right: 0.9rem;
  }

  /* Remove desktop arrows */

  .header-nav .wSub > a::after {
    display: none;
  }

  /* Mobile submenu toggle */

  .header-nav .showDropdown {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 0 0 0.4rem;
    padding: 0;

    border: 1px solid var(--cjrae-border);
    border-radius: 7px;

    background: #ffffff;
    color: var(--cjrae-blue);

    box-shadow: none;
  }

  .header-nav .showDropdown:hover,
  .header-nav .showDropdown:focus-visible {
    background: var(--cjrae-blue-light);
  }

  /* All submenu levels stack on compact navigation */

  .header-nav .subMenu {
    position: static;

    flex: 0 0 100%;

    width: 100%;
    min-width: 0;
    max-width: none;

    margin: 0.35rem 0 0 !important;
    padding: 0.35rem !important;

    background: var(--cjrae-surface);

    border: 1px solid var(--cjrae-border);
    border-radius: 8px;

    box-shadow: none;
  }

  .header-nav .subMenu .subMenu {
    position: static;

    width: 100%;

    margin: 0.35rem 0 0 !important;

    background: #ffffff;
  }

  .header-nav .subMenu .subMenu::before {
    display: none;
  }

  /* Content becomes single column */

  .content {
    padding-top: 2rem;
  }

  .content-grid,
  .content-grid-left {
    grid-template-columns: minmax(0, 1fr);

    gap: 2rem;
  }

  .content-grid-left .content-main,
  .content-grid-left .content-sidebar {
    order: initial;
  }

  .content-sidebar {
    margin-top: 0;
  }
}

/* ---------------------------------------------------------
   Small screens
   --------------------------------------------------------- */

@media (max-width: 640px) {
  .container {
    padding-inline: 1rem;
  }

  .header-grid {
    min-height: 72px;
  }

  .header-logo img {
    max-width: 185px;
    max-height: 56px;
  }

  .header-mobile-btn {
    width: 44px;
    height: 44px;

    flex-basis: 44px;
  }

  .content-title h1 {
    font-size: 1.8rem;
  }

  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   HOMEPAGE
   ========================================================= */

/* =========================================================
   Homepage hero
   ========================================================= */

.home-hero {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;

  gap: 3rem;

  padding: clamp(2.5rem, 6vw, 5rem);

  background: radial-gradient(circle at 90% 20%, rgba(22, 138, 161, 0.13), transparent 35%), linear-gradient(135deg, var(--cjrae-blue-light), #ffffff 72%);

  border: 1px solid var(--cjrae-border);
  border-radius: 20px;
}

.home-hero__content {
  position: relative;
  z-index: 1;

  max-width: 760px;
}

.home-hero h1 {
  margin: 0 0 1.25rem;

  max-width: 720px;

  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.home-intro {
  max-width: 700px;

  margin: 0 0 1.8rem;

  color: var(--cjrae-muted);

  font-size: 1.08rem;
  line-height: 1.7;
}

/* Decorative CJRAE mark */

.home-hero__badge {
  width: 190px;
  height: 190px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border: 1px solid rgba(23, 70, 111, 0.12);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.55);

  color: var(--cjrae-blue);

  box-shadow: inset 0 0 0 12px rgba(255, 255, 255, 0.35);
}

.home-hero__badge span {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.home-hero__badge small {
  margin-top: 0.1rem;

  color: var(--cjrae-teal);

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

/* Responsive hero */

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
    padding: 2.5rem;
  }

  .home-hero__badge {
    display: none;
  }
}

@media (max-width: 640px) {
  .home-hero {
    padding: 1.6rem;

    border-radius: 14px;
  }

  .home-hero h1 {
    font-size: 2.25rem;
  }
}

/* =========================================================
   Homepage sections
   ========================================================= */

.home-eyebrow {
  margin: 0 0 0.6rem;

  color: var(--cjrae-blue);

  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   Hero buttons
   --------------------------------------------------------- */

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;

  padding: 0.75rem 1.1rem;

  border-radius: 8px;

  text-decoration: none;
  font-weight: 700;
}

.home-button--primary {
  background: var(--cjrae-blue);
  color: #ffffff;
}

.home-button--primary:hover {
  background: var(--cjrae-blue-dark);
  color: #ffffff;
}

.home-button--secondary {
  background: #ffffff;
  color: var(--cjrae-blue);

  border: 1px solid var(--cjrae-border);
}

.home-button--secondary:hover {
  background: var(--cjrae-blue-light);
}

/* ---------------------------------------------------------
   Homepage sections
   --------------------------------------------------------- */

.home-section {
  padding: 4rem 0 0;
}

.home-section__heading {
  max-width: 720px;
  margin-bottom: 1.5rem;
}

.home-section__heading h2 {
  margin: 0;

  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.15;
}

.home-section--soft {
  margin-top: 4rem;
  padding: 3rem;

  background: var(--cjrae-surface);

  border-radius: 18px;
}

/* ---------------------------------------------------------
   Card grid
   --------------------------------------------------------- */

.home-cards {
  display: grid;
  gap: 1.25rem;
}

.home-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.home-card {
  display: flex;
  flex-direction: column;

  min-height: 210px;

  padding: 1.5rem;

  background: #ffffff;

  border: 1px solid var(--cjrae-border);
  border-radius: 12px;

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

  box-shadow: var(--cjrae-shadow-sm);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.home-card:hover {
  transform: translateY(-3px);

  border-color: #bfd2e2;

  box-shadow: var(--cjrae-shadow-md);
}

.home-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;

  font-size: 1.2rem;
}

.home-card p {
  flex: 1;

  margin-top: 0;

  color: var(--cjrae-muted);
}

.home-card span {
  margin-top: auto;

  color: var(--cjrae-blue);

  font-weight: 700;
}

.home-card--compact {
  min-height: 135px;
}

/* ---------------------------------------------------------
   Homepage responsive layout
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .home-cards--3 {
    grid-template-columns: 1fr;
  }

  .home-section--soft {
    padding: 2rem;
  }
}

@media (max-width: 640px) {
  .home-section {
    padding-top: 2.5rem;
  }

  .home-section--soft {
    margin-top: 2.5rem;
    padding: 1.5rem;

    border-radius: 12px;
  }
}

.home-card--service {
  position: relative;
  overflow: hidden;

  border-top: 4px solid var(--cjrae-blue);
}

.home-card--service::before {
  content: "";

  width: 42px;
  height: 42px;

  display: block;

  margin-bottom: 1.25rem;

  border-radius: 10px;

  background: var(--cjrae-blue-light);
}

.home-card--service:hover::before {
  background: #dcebf5;
}

.home-card--notice {
  background: var(--cjrae-blue);
  border-color: var(--cjrae-blue);
}

.home-card--notice h3,
.home-card--notice span {
  color: #ffffff;
}

.home-card--notice:hover {
  background: var(--cjrae-blue-dark);
  border-color: var(--cjrae-blue-dark);
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-page {
  max-width: 1180px;
}

/* Intro */

.contact-intro {
  max-width: 720px;

  margin-bottom: 2rem;
}

.contact-intro h2 {
  margin: 0 0 0.75rem;

  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.contact-intro > p:last-child {
  margin-bottom: 0;

  color: var(--cjrae-muted);
  font-size: 1.05rem;
}

/* Small labels */

.contact-eyebrow,
.contact-card__label {
  margin: 0 0 0.55rem;

  color: var(--cjrae-blue);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Schedule */

.contact-schedule {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;

  margin-bottom: 1.5rem;
}

.contact-card {
  padding: 1.5rem;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 14px;
}

.contact-card h3 {
  margin: 0 0 0.75rem;

  font-size: 1.2rem;
}

.contact-card__value {
  margin: 0;

  color: var(--cjrae-blue-dark);

  font-size: 1.35rem;
  font-weight: 800;
}

/* Address + map */

.contact-details {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);

  gap: 1rem;

  align-items: stretch;
}

.contact-info {
  padding: 1.75rem;

  background: #ffffff;

  border: 1px solid var(--cjrae-border);
  border-radius: 14px;

  box-shadow: var(--cjrae-shadow-sm);
}

.contact-info__block + .contact-info__block {
  margin-top: 1.75rem;
  padding-top: 1.5rem;

  border-top: 1px solid var(--cjrae-border);
}

.contact-info h3 {
  margin: 0 0 0.4rem;

  font-size: 1.3rem;
}

.contact-info p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.contact-muted {
  color: var(--cjrae-muted);

  font-size: 0.95rem;
}

/* Email */

.contact-email {
  display: inline-block;

  color: var(--cjrae-blue);

  font-size: 1.1rem;
  font-weight: 750;

  text-decoration: none;
}

.contact-email:hover {
  text-decoration: underline;
}

/* Action buttons */

.contact-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 0.65rem;

  margin-top: 1.75rem;
}

.contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding: 0.7rem 0.95rem;

  border: 1px solid var(--cjrae-border);
  border-radius: 8px;

  background: #ffffff;
  color: var(--cjrae-blue);

  text-decoration: none;
  font-weight: 700;
}

.contact-action:hover {
  background: var(--cjrae-blue-light);
}

.contact-action--primary {
  background: var(--cjrae-blue);
  border-color: var(--cjrae-blue);

  color: #ffffff;
}

.contact-action--primary:hover {
  background: var(--cjrae-blue-dark);
  color: #ffffff;
}

/* Map */

.contact-map {
  overflow: hidden;

  min-height: 440px;

  border: 1px solid var(--cjrae-border);
  border-radius: 14px;

  box-shadow: var(--cjrae-shadow-sm);
}

.contact-map iframe {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 440px;

  border: 0;
}

/* Responsive */

@media (max-width: 900px) {
  .contact-details {
    grid-template-columns: 1fr;
  }

  .contact-map {
    min-height: 340px;
  }

  .contact-map iframe {
    min-height: 340px;
  }
}

@media (max-width: 700px) {
  .contact-schedule {
    grid-template-columns: 1fr;
  }

  .contact-info {
    padding: 1.35rem;
  }

  .contact-actions {
    flex-direction: column;
  }

  .contact-action {
    width: 100%;
  }
}

/* =========================================================
   ANNOUNCEMENTS PAGE
   ========================================================= */

.announcements-page {
  max-width: 1100px;
}

/* Intro */

.announcements-intro {
  max-width: 760px;

  margin-bottom: 2rem;
}

.announcements-eyebrow,
.announcement-label {
  margin: 0 0 0.45rem;

  color: var(--cjrae-blue);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.announcements-intro h2 {
  margin: 0 0 0.75rem;

  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.announcements-intro > p {
  color: var(--cjrae-muted);
}

.announcements-note {
  font-size: 0.9rem;
}

/* Main groups */

.announcement-group {
  margin-top: 1.25rem;
  padding: 1.5rem;

  background: #ffffff;

  border: 1px solid var(--cjrae-border);
  border-radius: 14px;

  box-shadow: var(--cjrae-shadow-sm);
}

.announcement-group--important {
  border-top: 4px solid var(--cjrae-blue);
}

.announcement-group--accent {
  background: var(--cjrae-blue-light);
}

.announcement-group__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1rem;
}

.announcement-group__heading h2 {
  margin: 0;

  font-size: 1.35rem;
  line-height: 1.3;
}

.announcement-status {
  flex-shrink: 0;

  padding: 0.3rem 0.55rem;

  background: var(--cjrae-blue);
  color: #ffffff;

  border-radius: 999px;

  font-size: 0.75rem;
  font-weight: 800;
}

.announcement-description {
  max-width: 800px;

  color: var(--cjrae-muted);
}

/* =========================================================
   DOCUMENT LISTS
   ========================================================= */

.document-list {
  display: flex;
  flex-direction: column;

  gap: 0.45rem;
}

.document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  padding: 0.85rem 1rem;

  background: var(--cjrae-surface);

  border: 1px solid transparent;
  border-radius: 8px;

  color: var(--cjrae-text);
  text-decoration: none;
}

.document-item:hover {
  background: var(--cjrae-blue-light);

  border-color: #cbddea;
}

.document-item > span:first-child {
  min-width: 0;

  line-height: 1.45;
}

/* File type badge */

.document-type {
  flex-shrink: 0;

  padding: 0.25rem 0.45rem;

  background: #e9eef3;
  color: var(--cjrae-blue-dark);

  border-radius: 5px;

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.document-type--doc {
  background: #e8f3fa;
}

/* =========================================================
   POSTERS / IMAGES
   ========================================================= */

.announcement-poster {
  max-width: 760px;

  margin: 1.25rem auto 0;
}

.announcement-poster img {
  display: block;

  width: 100%;
  height: auto !important;

  margin: 0;

  border-radius: 10px;

  box-shadow: var(--cjrae-shadow-sm);
}

.announcement-poster--small {
  max-width: 440px;

  margin-left: 0;
}

/* =========================================================
   TEXT ANNOUNCEMENTS
   ========================================================= */

.announcement-text-item {
  padding: 1.25rem 0;
}

.announcement-text-item + .announcement-text-item {
  border-top: 1px solid var(--cjrae-border);
}

.announcement-text-item h3 {
  margin: 0 0 0.5rem;

  font-size: 1.1rem;
}

.announcement-text-item p {
  max-width: 800px;

  margin: 0 0 0.75rem;

  color: var(--cjrae-muted);
}

.announcement-inline-link {
  color: var(--cjrae-blue);

  font-weight: 700;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {
  .announcement-group {
    padding: 1.15rem;
  }

  .announcement-group__heading {
    flex-direction: column;
  }

  .document-item {
    align-items: flex-start;
  }

  .document-type {
    margin-top: 0.1rem;
  }
}

.document-type--xls {
  background: #e7f4ea;
  color: #216e39;
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-page {
  max-width: 1100px;
}

/* Intro */

.about-intro {
  max-width: 820px;

  margin-bottom: 3rem;
}

.about-eyebrow {
  margin: 0 0 0.5rem;

  color: var(--cjrae-blue);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-intro h2 {
  margin: 0 0 1rem;

  font-size: clamp(1.9rem, 3vw, 2.5rem);
}

.about-lead {
  margin: 0;

  color: var(--cjrae-text);

  font-size: 1.08rem;
  line-height: 1.75;
}

/* Section headings */

.about-section,
.about-values {
  margin-top: 3rem;
}

.about-section-heading {
  max-width: 760px;

  margin-bottom: 1.25rem;
}

.about-section-heading h2 {
  margin: 0;

  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
}

/* Values */

.about-value-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 0.75rem;
}

.about-value-card {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 90px;

  padding: 1rem;

  background: var(--cjrae-blue-light);

  border: 1px solid var(--cjrae-border);
  border-radius: 12px;

  color: var(--cjrae-blue-dark);

  text-align: center;
}

/* Services */

.about-list {
  display: grid;

  gap: 0.85rem;
}

.about-list-item {
  padding: 1.25rem 1.4rem;

  background: #ffffff;

  border: 1px solid var(--cjrae-border);
  border-radius: 12px;

  box-shadow: var(--cjrae-shadow-sm);
}

.about-list-item h3 {
  margin: 0 0 0.45rem;

  font-size: 1.1rem;
}

.about-list-item p {
  margin: 0;

  color: var(--cjrae-muted);
}

/* Beneficiaries */

.about-beneficiaries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.9rem;
}

.about-beneficiary {
  padding: 1.1rem 1.25rem;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 10px;

  line-height: 1.6;
}

/* Responsive */

@media (max-width: 900px) {
  .about-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-beneficiaries {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .about-value-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */

.services-page {
  max-width: 1100px;
}

/* Make anchor jumps stop below the header instead of touching it */

.service-section,
.service-subsection {
  scroll-margin-top: 120px;
}

/* Intro */

.services-intro {
  max-width: 780px;

  margin-bottom: 2rem;
}

.services-eyebrow {
  margin: 0 0 0.5rem;

  color: var(--cjrae-blue);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.services-intro h2 {
  margin: 0 0 0.8rem;

  font-size: clamp(1.9rem, 3vw, 2.5rem);
}

.services-intro > p:last-child {
  color: var(--cjrae-muted);
  font-size: 1.05rem;
}

/* =========================================================
   SERVICE JUMP NAVIGATION
   ========================================================= */

.services-jump {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.25rem;

  margin: 0 0 4rem;
}

.services-jump a {
  display: flex;
  flex-direction: column;

  min-height: 130px;

  padding: 1.25rem;

  background: #ffffff;

  border: 1px solid var(--cjrae-border);
  border-radius: 12px;

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

  box-shadow: var(--cjrae-shadow-sm);
}

.services-jump a:hover {
  transform: translateY(-2px);

  background: var(--cjrae-blue-light);
  border-color: #bfd2e2;

  box-shadow: var(--cjrae-shadow-md);
}

.services-jump strong {
  margin-bottom: 0.5rem;

  color: var(--cjrae-blue-dark);

  font-size: 1.1rem;
}

.services-jump span {
  color: var(--cjrae-muted);

  font-size: 0.92rem;
  line-height: 1.5;
}

/* =========================================================
   MAIN SERVICE SECTION
   ========================================================= */

.service-section {
  padding: 1rem 0 4rem;
}

.service-section + .service-section {
  padding-top: 4rem;

  border-top: 1px solid var(--cjrae-border);
}

.service-section__heading {
  max-width: 840px;

  margin-bottom: 2rem;
}

.service-section__heading h2 {
  margin: 0 0 1rem;

  font-size: clamp(2rem, 3.5vw, 2.7rem);
}

.service-section__heading > p:not(.services-eyebrow) {
  color: var(--cjrae-muted);
}

.service-lead {
  color: var(--cjrae-text) !important;

  font-size: 1.08rem;
  line-height: 1.75;
}

/* =========================================================
   OBJECTIVES / ACTIVITIES
   ========================================================= */

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

  gap: 1rem;

  margin: 2rem 0;
}

.service-panel {
  padding: 1.5rem;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 14px;
}

.service-panel h3 {
  margin: 0 0 1rem;

  font-size: 1.2rem;
}

.service-list {
  margin: 0;
  padding-left: 1.25rem;
}

.service-list li {
  margin-bottom: 0.65rem;

  line-height: 1.55;
}

/* =========================================================
   IMPORTANT NOTE
   ========================================================= */

.service-note {
  margin: 2rem 0;

  padding: 1.5rem;

  background: var(--cjrae-blue-light);

  border-left: 4px solid var(--cjrae-blue);
  border-radius: 0 12px 12px 0;
}

.service-note p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   SUBSECTIONS
   ========================================================= */

.service-subsection {
  margin-top: 3rem;
  padding-top: 2rem;

  border-top: 1px solid var(--cjrae-border);
}

.service-subsection h3 {
  margin-top: 0;
}

.service-subsection__heading {
  margin-bottom: 1.25rem;
}

.service-subsection__heading h3 {
  margin: 0;

  font-size: 1.5rem;
}

.service-subsection__intro {
  max-width: 760px;

  color: var(--cjrae-muted);
}

.service-external-resource {
  margin-top: 1rem;

  color: var(--cjrae-muted);
}

.service-external-resource a {
  color: var(--cjrae-blue);

  font-weight: 700;
}

/* Temporary unfinished sections */

.service-section--placeholder {
  color: var(--cjrae-muted);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {
  .services-jump {
    grid-template-columns: 1fr;
  }

  .service-columns {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SERVICE ACTIVITY CARDS
   ========================================================= */

.service-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0.8rem;
}

.service-activity {
  display: flex;
  flex-direction: column;

  gap: 0.35rem;

  padding: 1.1rem;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 10px;
}

.service-activity strong {
  color: var(--cjrae-blue-dark);
}

.service-activity span {
  color: var(--cjrae-muted);

  font-size: 0.9rem;
  line-height: 1.5;
}

/* =========================================================
   SERVICE PRINCIPLES
   ========================================================= */

.service-principles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 0.75rem;
}

.service-principle {
  padding: 1rem;

  background: var(--cjrae-blue-light);

  border: 1px solid var(--cjrae-border);
  border-radius: 10px;
}

.service-principle strong {
  display: block;

  margin-bottom: 0.35rem;

  color: var(--cjrae-blue-dark);
}

.service-principle span {
  color: var(--cjrae-muted);

  font-size: 0.87rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .service-activity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 560px) {
  .service-activity-grid,
  .service-principles {
    grid-template-columns: 1fr;
  }
}

.service-schedule {
  margin: 1.5rem 0 2rem;
  padding: 1.4rem 1.5rem;

  background: var(--cjrae-blue-light);

  border: 1px solid var(--cjrae-border);
  border-radius: 12px;
}

.service-schedule h3 {
  margin: 0 0 0.5rem;

  font-size: 1.15rem;
}

.service-schedule__time {
  margin: 0;

  color: var(--cjrae-blue-dark);

  font-size: 1.3rem;
  font-weight: 800;
}

.service-infographic {
  max-width: 520px;

  margin: 1.25rem auto 0;
}

.service-infographic img {
  display: block;

  width: 100%;
  height: auto !important;

  margin: 0;

  border-radius: 12px;

  box-shadow: var(--cjrae-shadow-sm);
}

.document-type--ppt {
  background: #fff0e5;
  color: #a34a00;
}

/* =========================================================
   EVENTS PAGE
   ========================================================= */

.events-page {
  max-width: 1100px;
}

.event-section {
  scroll-margin-top: 120px;
}

/* Intro */

.events-intro {
  max-width: 780px;

  margin-bottom: 2rem;
}

.events-eyebrow {
  margin: 0 0 0.5rem;

  color: var(--cjrae-blue);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.events-intro h2 {
  margin: 0 0 0.8rem;

  font-size: clamp(1.9rem, 3vw, 2.5rem);
}

.events-intro > p:last-child {
  color: var(--cjrae-muted);
  font-size: 1.05rem;
}

/* Overview */

.events-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;

  margin-bottom: 2.5rem;
}

.event-overview-card {
  display: flex;
  flex-direction: column;

  gap: 0.4rem;

  padding: 1.2rem;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 11px;
}

.event-overview-card strong {
  color: var(--cjrae-blue-dark);
}

.event-overview-card span {
  color: var(--cjrae-muted);

  font-size: 0.92rem;
  line-height: 1.5;
}

/* Benefits */

.events-benefits {
  margin-bottom: 3rem;
}

.events-benefits h3 {
  margin-top: 0;
}

.events-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 0.75rem;
}

.events-benefit {
  padding: 1rem;

  background: var(--cjrae-blue-light);

  border: 1px solid var(--cjrae-border);
  border-radius: 10px;

  color: var(--cjrae-blue-dark);

  font-weight: 700;
}

/* Jump navigation */

.events-jump {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.25rem;

  margin: 0 0 4rem;
}

.events-jump a {
  display: flex;
  flex-direction: column;

  min-height: 125px;

  padding: 1.25rem;

  background: #ffffff;

  border: 1px solid var(--cjrae-border);
  border-radius: 12px;

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

  box-shadow: var(--cjrae-shadow-sm);
}

.events-jump a:hover {
  transform: translateY(-2px);

  background: var(--cjrae-blue-light);
  border-color: #bfd2e2;

  box-shadow: var(--cjrae-shadow-md);
}

.events-jump strong {
  margin-bottom: 0.45rem;

  color: var(--cjrae-blue-dark);
}

.events-jump span {
  color: var(--cjrae-muted);

  font-size: 0.9rem;
}

/* Main event sections */

.event-section {
  padding: 1rem 0 4rem;
}

.event-section + .event-section {
  padding-top: 4rem;

  border-top: 1px solid var(--cjrae-border);
}

.event-section__heading {
  max-width: 850px;

  margin-bottom: 1.5rem;
}

.event-section__heading h2 {
  margin: 0;

  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 1.15;
}

/* Featured event layouts */

.event-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);

  gap: 2rem;

  align-items: start;
}

.event-feature__content {
  min-width: 0;
}

.event-lead {
  font-size: 1.08rem;
  line-height: 1.7;
}

/* Event metadata */

.event-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.75rem;

  margin: 1.5rem 0;
}

.event-meta--wide {
  max-width: 760px;
}

.event-meta > div {
  padding: 1rem;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 10px;
}

.event-meta span {
  display: block;

  margin-bottom: 0.25rem;

  color: var(--cjrae-muted);

  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.event-meta strong {
  color: var(--cjrae-blue-dark);
}

/* Posters */

.event-poster {
  margin: 0;
}

.event-poster img {
  display: block;

  width: 100%;
  height: auto !important;

  margin: 0;

  border-radius: 12px;

  box-shadow: var(--cjrae-shadow-sm);
}

/* Quotes / notes */

.event-quote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;

  background: var(--cjrae-blue-light);

  border-left: 4px solid var(--cjrae-blue);
  border-radius: 0 10px 10px 0;

  color: var(--cjrae-blue-dark);

  font-weight: 700;
}

.event-note {
  color: var(--cjrae-muted);

  font-size: 0.95rem;
}

/* Generic event text */

.event-text {
  max-width: 850px;
}

/* Poster gallery */

.event-gallery {
  display: grid;

  gap: 1rem;

  margin-top: 2rem;
}

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

.event-gallery figure {
  margin: 0;
}

.event-gallery img {
  display: block;

  width: 100%;
  height: auto !important;

  margin: 0;

  border-radius: 12px;

  box-shadow: var(--cjrae-shadow-sm);
}

/* Responsive */

@media (max-width: 900px) {
  .events-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .events-jump {
    grid-template-columns: 1fr;
  }

  .event-feature {
    grid-template-columns: 1fr;
  }

  .event-poster {
    max-width: 560px;
  }
}

@media (max-width: 650px) {
  .events-overview,
  .events-benefits-grid,
  .event-meta,
  .event-gallery--2 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PROJECTS PAGE
   ========================================================= */

.projects-page {
  max-width: 1100px;
}

.project-section,
.project-subsection {
  scroll-margin-top: 120px;
}

.projects-eyebrow {
  margin: 0 0 0.5rem;

  color: var(--cjrae-blue);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Intro */

.projects-intro {
  max-width: 800px;

  margin-bottom: 2rem;
}

.projects-intro h2 {
  margin: 0 0 0.8rem;

  font-size: clamp(1.9rem, 3vw, 2.5rem);
}

.projects-intro > p:last-child {
  color: var(--cjrae-muted);

  font-size: 1.05rem;
}

/* =========================================================
   JUMP NAVIGATION
   ========================================================= */

.projects-jump {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 1.25rem;

  margin: 0 0 4rem;
}

.projects-jump a {
  display: flex;
  flex-direction: column;

  min-height: 125px;

  padding: 1.25rem;

  background: #fff;

  border: 1px solid var(--cjrae-border);
  border-radius: 12px;

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

  box-shadow: var(--cjrae-shadow-sm);
}

.projects-jump a:hover {
  transform: translateY(-2px);

  background: var(--cjrae-blue-light);
  border-color: #bfd2e2;

  box-shadow: var(--cjrae-shadow-md);
}

.projects-jump strong {
  margin-bottom: 0.4rem;

  color: var(--cjrae-blue-dark);
}

.projects-jump span {
  color: var(--cjrae-muted);

  font-size: 0.88rem;
  line-height: 1.45;
}

/* =========================================================
   SECTIONS
   ========================================================= */

.project-section {
  padding: 1rem 0 4rem;
}

.project-section + .project-section {
  padding-top: 4rem;

  border-top: 1px solid var(--cjrae-border);
}

.project-section__heading {
  max-width: 850px;

  margin-bottom: 2rem;
}

.project-section__heading h2 {
  margin: 0 0 1rem;

  font-size: clamp(2rem, 3.4vw, 2.7rem);
}

.project-lead {
  font-size: 1.08rem;
  line-height: 1.7;
}

.project-subsection {
  margin-top: 2.5rem;
  padding-top: 1.75rem;

  border-top: 1px solid var(--cjrae-border);
}

.project-list {
  padding-left: 1.25rem;
}

.project-list li {
  margin-bottom: 0.6rem;
}

/* Project metadata */

.project-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0.8rem;

  margin: 1.5rem 0 2rem;
}

.project-meta > div {
  padding: 1rem;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 10px;
}

.project-meta span {
  display: block;

  margin-bottom: 0.25rem;

  color: var(--cjrae-muted);

  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.project-meta strong {
  color: var(--cjrae-blue-dark);
}

/* Highlight */

.project-highlight {
  margin: 2rem 0;

  padding: 1.4rem 1.5rem;

  background: var(--cjrae-blue-light);

  border-left: 4px solid var(--cjrae-blue);
  border-radius: 0 12px 12px 0;
}

.project-highlight p:last-child {
  margin-bottom: 0;
}

/* Goals */

.project-goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.8rem;
}

.project-goal {
  display: flex;
  flex-direction: column;

  gap: 0.35rem;

  padding: 1.1rem;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 10px;
}

.project-goal strong {
  color: var(--cjrae-blue-dark);
}

.project-goal span {
  color: var(--cjrae-muted);

  font-size: 0.92rem;
  line-height: 1.5;
}

/* Collapsible details */

.project-details {
  margin: 2rem 0;

  border: 1px solid var(--cjrae-border);
  border-radius: 10px;

  overflow: hidden;
}

.project-details summary {
  padding: 1rem 1.2rem;

  cursor: pointer;

  background: var(--cjrae-surface);

  color: var(--cjrae-blue-dark);

  font-weight: 700;
}

.project-details__content {
  padding: 1.2rem;
}

/* Event cross-link */

.project-event-link {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 2rem;

  margin-top: 2rem;
  padding: 1.4rem;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 12px;
}

.project-event-link h3 {
  margin: 0 0 0.4rem;
}

.project-event-link p:last-child {
  margin-bottom: 0;
}

.project-event-link > a {
  flex: 0 0 auto;

  padding: 0.7rem 1rem;

  background: var(--cjrae-blue);

  border-radius: 8px;

  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* School of the future */

.project-feature {
  display: grid;
  grid-template-columns: minmax(230px, 0.35fr) minmax(0, 1fr);

  gap: 2rem;

  align-items: start;
}

.project-feature__image {
  margin: 0;
}

.project-feature__image img {
  display: block;

  width: 100%;
  height: auto !important;

  border-radius: 12px;

  box-shadow: var(--cjrae-shadow-sm);
}

.project-feature__content h3 {
  margin-top: 1.7rem;

  color: var(--cjrae-blue-dark);

  font-size: 1.15rem;
}

.project-quote {
  margin: 2rem 0 0;
  padding: 1.25rem;

  background: var(--cjrae-blue-light);

  border-left: 4px solid var(--cjrae-blue);
  border-radius: 0 10px 10px 0;

  color: var(--cjrae-blue-dark);

  font-size: 1.1rem;
  font-weight: 700;
}

.project-author {
  color: var(--cjrae-muted);

  font-size: 0.9rem;
}

/* Orientation resources */

.project-wide-image {
  margin: 0 0 2rem;
}

.project-wide-image img {
  display: block;

  width: 100%;
  height: auto !important;

  border-radius: 12px;

  box-shadow: var(--cjrae-shadow-sm);
}

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

  gap: 1.25rem;
}

.project-resource-group {
  min-width: 0;

  padding: 1.25rem;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 12px;
}

/* Admission gallery */

.admission-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 0.75rem;
}

.admission-gallery a {
  display: block;

  overflow: hidden;

  background: var(--cjrae-surface);

  border: 1px solid var(--cjrae-border);
  border-radius: 9px;
}

.admission-gallery img {
  display: block;

  width: 100%;
  height: auto !important;

  margin: 0;
}

.admission-gallery a:hover {
  transform: translateY(-2px);

  box-shadow: var(--cjrae-shadow-md);
}

/* Digital library */

.project-library {
  max-width: 800px;

  padding: 1.5rem;

  background: var(--cjrae-blue-light);

  border: 1px solid var(--cjrae-border);
  border-radius: 12px;
}

.project-library__button {
  display: inline-block;

  margin-top: 0.5rem;
  padding: 0.75rem 1rem;

  background: var(--cjrae-blue);

  border-radius: 8px;

  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.project-library__button:hover,
.project-event-link > a:hover {
  background: var(--cjrae-blue-dark);

  color: #fff;
}

/* Image file badge */

.document-type--image {
  background: #f0ebff;
  color: #6941c6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 950px) {
  .projects-jump {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-feature {
    grid-template-columns: 1fr;
  }

  .project-feature__image {
    max-width: 420px;
  }

  .admission-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .project-meta,
  .project-goals,
  .project-columns {
    grid-template-columns: 1fr;
  }

  .project-event-link {
    align-items: flex-start;
    flex-direction: column;
  }

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

@media (max-width: 520px) {
  .projects-jump,
  .admission-gallery {
    grid-template-columns: 1fr;
  }
}

.project-current {
    margin: 2rem 0 1.25rem;
    padding: 1.5rem;

    background: var(--cjrae-blue-light);

    border: 1px solid var(--cjrae-border);
    border-radius: 12px;
}

.project-current__heading h2 {
    margin: 0 0 0.35rem;

    color: var(--cjrae-blue-dark);

    font-size: 1.8rem;
}

.project-current__heading p:last-child {
    margin-bottom: 0;

    color: var(--cjrae-muted);
}

.projects-jump-label {
    margin: 0 0 1rem;

    color: var(--cjrae-blue-dark);

    font-weight: 800;
}