/* =========================================================
   BDS Lab - Theme
   Biocomputing and Development Systems Group, University of Limerick
   Single design system replacing the old scattered stylesheets.
   ========================================================= */

:root {
  --green-900: #052e22;
  --green-800: #0a3f2f;
  --green-700: #0d5a41;
  --green-600: #117a53;
  --green-500: #16966a;
  --green-100: #e6f2ec;

  --gold: #c8a955;

  --cream: #f7f5ee;
  --white: #ffffff;

  --ink-900: #14201b;
  --ink-700: #3c4a44;
  --ink-500: #6d7b74;
  --border: #e2e0d5;

  --shadow-sm: 0 1px 3px rgba(5, 46, 34, 0.08);
  --shadow-md: 0 8px 24px rgba(5, 46, 34, 0.10);
  --shadow-lg: 0 20px 48px rgba(5, 46, 34, 0.16);

  --radius: 12px;
  --radius-sm: 8px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink-700);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-500); }

img { max-width: 100%; height: auto; }

hr.hr, hr.hr-projects { display: none; }

.container { max-width: 1180px; }

/* ---------- Utility type ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: 0.6rem;
}

.section-heading {
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 0.9rem;
}

.section-lede {
  color: var(--ink-500);
  font-size: 1.05rem;
  max-width: 720px;
}

.highlighted-text { color: var(--green-700); }

/* ---------- Buttons ---------- */
.btn-bds, .btn-ulgreen-fill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--green-700);
  color: #fff !important;
  border: 1px solid var(--green-700);
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.18s ease;
}
.btn-bds:hover, .btn-ulgreen-fill:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-bds-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--white) !important;
  border: 1.5px solid rgba(255,255,255,0.7);
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.18s ease;
}
.btn-bds-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 1.5rem;
  max-width: 1180px;
  margin: 0 auto;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  flex-shrink: 0;
}

/* The BDS mark is detailed (fine branch artwork + three lines of type), so it
   needs real height to stay legible. */
.brand-logo-bds {
  height: 68px;
  width: auto;
  object-fit: contain;
}

/* Sits on the right-hand end of the brand bar */
.brand-logo-ul {
  height: 52px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.navbar-design {
  background: var(--green-800);
  padding: 0;
}

.navbar-design .navbar-nav {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1.5rem;
}

.navbar-design .nav-link {
  color: rgba(255,255,255,0.86) !important;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.85rem 1rem !important;
  transition: color 0.15s, background 0.15s;
  border-bottom: 3px solid transparent;
}

.navbar-design .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.06);
}

.navbar-design .nav-item.active .nav-link,
.navbar-design .nav-link.current {
  color: #fff !important;
  border-bottom-color: var(--gold);
}

.navbar-design .navbar-toggler {
  border-color: rgba(255,255,255,0.3);
  margin: 0.5rem 1.5rem;
}
.navbar-design .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Legacy .header / #header-nav wrapper support */
#header-nav .header,
.header {
  background: transparent;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
  overflow: hidden;
  color: #fff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.32;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,46,34,0.55) 0%, rgba(5,46,34,0.88) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.hero-content .eyebrow { color: var(--gold); }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.08;
  color: #fff;
  max-width: 780px;
  margin-bottom: 1.2rem;
}

.hero-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  max-width: 620px;
  margin-bottom: 2rem;
}

.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.hero-stats {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.18);
  background: rgba(5,46,34,0.35);
}

.hero-stats .stat-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem;
}

/* Page hero (interior pages) replacing .jumbotron */
.page-hero {
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
  color: #fff;
  padding: 3.4rem 1.5rem 3rem;
  text-align: center;
}
.page-hero h1 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: 0 0 0.5rem;
}
.page-hero p {
  color: rgba(255,255,255,0.82);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.02rem;
}
.page-hero .eyebrow { color: var(--gold); }

/* backward-compat: old .jumbotron used across pages */
.jumbotron.jumbotron-fluid {
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
  padding: 3.4rem 1.5rem 3rem;
  margin-bottom: 0;
  border-radius: 0;
}
.jumbotron .name { font-weight: 800; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section { padding: 4.5rem 0; }
.section-sm { padding: 2.75rem 0; }
.section-alt { background: var(--cream); }

.coloured-section {
  background: var(--white);
  padding: 4.5rem 0;
}

/* =========================================================
   GROUP SPOTLIGHT - group photo with the light falling on
   Prof. Conor Ryan. His face sits at 45% / 52% of the source
   image, so the photo panel keeps the image's own 3:2 ratio
   and every highlight is placed in those same percentages.
   ========================================================= */
.spotlight-section {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0;
  background: var(--green-900);
}
/* Blurred copy of the same photo as an atmospheric backdrop */
.spotlight-bg {
  position: absolute;
  inset: -40px;
  background-image: url("../images/others/group_photo.jpg");
  background-size: cover;
  background-position: 45% 40%;
  filter: blur(22px) saturate(0.75) brightness(0.42);
  opacity: 0.85;
}
.spotlight-section > .container { position: relative; z-index: 2; }

.spotlight-copy .eyebrow { color: var(--gold); }
.spotlight-copy h2 { color: #fff; }
.spotlight-copy p { color: rgba(255, 255, 255, 0.86); }

/* Rack focus: two stacked copies of the same photo. The base layer is soft and
   desaturated; the top layer is sharp and full colour, revealed only around him
   by a feathered mask. The panel keeps the image's 3:2 ratio so the focal point
   stays locked on him at any width. The ellipse radii are in a 2:3 ratio so the
   pool of focus reads as a circle inside a 3:2 box. */
.spotlight-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--green-900);
}
.spotlight-photo .layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Zoom pushes toward him, not toward the middle of the frame */
  transform-origin: 45% 52%;
  transition: transform 0.85s cubic-bezier(0.22, 0.68, 0.24, 1),
              filter 0.85s ease;
  will-change: transform;
}
/* Out-of-focus crowd */
.spotlight-photo .layer-soft {
  filter: blur(5px) saturate(0.28) brightness(0.5) contrast(0.95);
  transform: scale(1.04);            /* hides blur bleed at the edges */
}
/* Him: sharp, full colour, feathered into the soft layer */
.spotlight-photo .layer-sharp {
  -webkit-mask-image: radial-gradient(ellipse 20% 30% at 45% 52%,
      #000 0%, #000 42%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 20% 30% at 45% 52%,
      #000 0%, #000 42%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* Warm light lifting him out of the frame, plus a cinematic vignette */
.spotlight-photo .spot-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 22% 33% at 45% 52%,
      rgba(255, 244, 214, 0.16) 0%, rgba(255, 244, 214, 0) 70%),
    radial-gradient(ellipse 70% 80% at 45% 52%,
      rgba(5, 46, 34, 0) 40%, rgba(5, 46, 34, 0.45) 100%);
}
/* Hover: the lens pushes in on him. Because the mask travels with the layer,
   the pool of focus grows with the zoom and stays locked on his face. The soft
   crowd moves less, so the two planes separate slightly, like real depth. */
.spotlight-photo:hover .layer-sharp { transform: scale(1.18); }
.spotlight-photo:hover .layer-soft {
  transform: scale(1.09);
  filter: blur(7px) saturate(0.22) brightness(0.42) contrast(0.95);
}
.spotlight-photo:hover .spot-glow { opacity: 1; }
.spotlight-photo .spot-glow {
  opacity: 0.85;
  transition: opacity 0.85s ease;
}

@media (max-width: 767px) {
  .spotlight-section { padding: 3rem 0; }
  .spotlight-photo .layer-soft { filter: blur(3px) saturate(0.3) brightness(0.55); }
}

/* Respect users who ask for less motion: keep the focus effect, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .spotlight-photo .layer { transition: none; }
  .spotlight-photo:hover .layer-sharp { transform: none; }
  .spotlight-photo:hover .layer-soft { transform: scale(1.04); }
}

/* =========================================================
   ABOUT SPLIT - full-bleed photo on the right, white text
   panel on the left, divided by a sweeping arc
   ========================================================= */
.about-split {
  position: relative;
  background: var(--white);
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: center;
}

.about-split-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* Starts just inside the arc's narrowest point (43%). Any sliver that peeks
     out is white, same as the panel, so the seam is invisible - and the
     narrower band means cover scales the photo down rather than up, keeping
     more of the group in frame. */
  left: 42%;
  background-size: cover;
  /* Anchored to the top so the crop always falls at the bottom (feet/floor)
     and can never clip anyone's head, at any screen width. */
  background-position: center top;
  z-index: 1;
}

.about-split-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.about-split-shape .shape-fill {
  fill: var(--white);
  filter: drop-shadow(10px 0 24px rgba(5, 46, 34, 0.22));
}
.about-split-shape .shape-accent {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}
.about-split-shape .shape-accent-thin {
  fill: none;
  stroke: var(--green-500);
  stroke-width: 1.5;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

.about-split-inner {
  position: relative;
  z-index: 3;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.about-split-mobile-img { display: none; }

@media (max-width: 991px) {
  .about-split { min-height: 0; display: block; }
  .about-split-media,
  .about-split-shape { display: none; }
  .about-split-inner { padding-top: 3rem; padding-bottom: 3rem; }
  .about-split-mobile-img {
    display: block;
    width: 100%;
    border-radius: 16px;
    margin-top: 2rem;
    box-shadow: var(--shadow-md);
  }
}

.mid-section { padding: 0; }

/* Stat grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.stat-item { text-align: center; color: #fff; }
.stat-item .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--gold);
  line-height: 1;
}
.stat-item .label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  margin-top: 0.35rem;
}
@media (max-width: 767px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Sponsor / partner logos */
.sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 4rem;
}
/* The -trim versions have their dead canvas padding cropped off, so max-height
   now applies to the artwork itself rather than to empty space. Because the
   logos have very different aspect ratios, width is capped too, otherwise the
   wide ones (Lero is roughly 7:1) would run away with the row.
   multiply drops the white box on the logos that came from JPEGs. */
.sponsor-grid img {
  max-height: 72px;
  max-width: 210px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Roomier rows (few logos) go larger still */
.sponsor-grid--lg { gap: 2.5rem 5rem; }
.sponsor-grid--lg img { max-height: 100px; max-width: 380px; }

@media (max-width: 767px) {
  .sponsor-grid { gap: 1.75rem 2.5rem; }
  .sponsor-grid img { max-height: 52px; max-width: 150px; }
  .sponsor-grid--lg img { max-height: 66px; max-width: 240px; }
}

.img-200 { max-height: 90px; width: auto; object-fit: contain; }

/* =========================================================
   CARDS
   ========================================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

.bds-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.bds-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.bds-card .bds-card-media {
  height: 170px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bds-card .bds-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.25rem;
}
.bds-card .bds-card-body {
  padding: 1.25rem 1.4rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.bds-card .tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-600);
  background: var(--green-100);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
  width: fit-content;
}
.bds-card h3 {
  font-size: 1.08rem;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}
.bds-card .read-more {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--green-700);
}
.bds-card .read-more:after { content: " \2192"; }

/* legacy project list markup support */
ul.image-block { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.75rem; }
ul.image-block > li.image-block { padding: 0 !important; width: auto !important; max-width: none !important; flex: none !important; }
.image-block-inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.4rem !important;
  text-align: left;
}
.image-block-inner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.image-block-inner a.mh-100 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin-bottom: 1rem;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
.image-block-inner img.img-height-width {
  max-height: 110px;
  width: auto !important;
  max-width: 90% !important;
  object-fit: contain;
}
.image-block-inner .hp-posts-cat {
  display: block;
  font-weight: 700;
  color: var(--ink-900);
  font-size: 1.02rem;
  margin-bottom: 0.5rem;
}
.image-block-inner .read-more {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--green-700);
}
.image-block-inner .read-more:after { content: " \2192"; }

/* =========================================================
   PEOPLE / MEMBERS
   ========================================================= */
.people-section-title {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
  margin: 3rem 0 1.75rem;
  position: relative;
}
.people-section-title:first-of-type { margin-top: 0; }
.people-section-title:after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  background: var(--gold);
  margin: 0.65rem auto 0;
}

.team .avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
  margin: 0 auto 0.85rem;
  background: var(--cream);
  display: block;
}

.team .title h5,
.team .title h6 {
  font-weight: 700;
  color: var(--ink-900);
  font-size: 0.98rem;
  margin: 0 0 0.6rem;
}

.team .btn-ulgreen-fill {
  padding: 0.4rem 1.05rem;
  font-size: 0.78rem;
}

/* =========================================================
   MEMBERS PAGE - toolbar, spotlight, cards, alumni wall
   ========================================================= */
.member-toolbar {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 1.4rem 0;
}
.member-search {
  max-width: 400px;
  margin: 0 auto 1.1rem;
  position: relative;
}
.member-search input {
  width: 100%;
  padding: 0.68rem 1.1rem 0.68rem 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.9rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--white);
}
.member-search input:focus { border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }
.member-search i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-500);
  font-size: 0.85rem;
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; }
.filter-pill {
  padding: 0.48rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-body);
}
.filter-pill .count { opacity: 0.6; font-weight: 500; margin-left: 0.2rem; }
.filter-pill:hover { border-color: var(--green-600); color: var(--green-700); }
.filter-pill.active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.filter-pill.active .count { opacity: 0.85; }

.member-block { margin-top: 3.25rem; }
.member-block:first-of-type { margin-top: 2.5rem; }
.member-block-head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 1.6rem;
}
.member-block-head h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink-900);
  margin: 0;
}
.member-block-head .count-badge {
  background: var(--green-100);
  color: var(--green-700);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}
.member-block-head .rule { flex: 1; height: 1px; background: var(--border); }

.m-hidden { display: none !important; }

.no-results {
  display: none;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ink-500);
}
.no-results i { font-size: 2rem; color: var(--border); margin-bottom: 1rem; display: block; }

/* Leadership spotlight */
.leadership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 767px) { .leadership-grid { grid-template-columns: 1fr; } }

.leadership-card {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.leadership-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.leadership-card .photo {
  width: 128px;
  height: 128px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.leadership-card .role-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: var(--green-900);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.55rem;
}
.leadership-card h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0 0 0.95rem;
  color: var(--ink-900);
}

/* Redesigned person card (grid) */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.5rem;
}
.people-grid.people-grid-compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.25rem; }

.person-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-align: left;
}
.person-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--green-500); }

.person-card .photo-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream);
}
.person-card .photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.person-card:hover .photo-wrap img { transform: scale(1.09); }
.person-card .photo-wrap .no-photo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--green-600);
  background: var(--green-100);
}
.person-card .photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,46,34,0.9) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1rem;
}
.person-card:hover .photo-overlay { opacity: 1; }
.person-card .photo-overlay a {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1.5px solid rgba(255,255,255,0.75);
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.person-card .photo-overlay a:hover { background: #fff; color: var(--green-800); }

.person-card .card-info { padding: 0.9rem 1rem 1.1rem; text-align: center; }
.person-card .card-info h3 {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.3;
}
.person-card .card-info .no-link-tag {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-500);
}

/* Alumni wall - dense chip grid */
.alumni-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 1.1rem 0.9rem;
}
.alumni-chip { text-align: center; }
.alumni-chip .chip-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--cream);
}
.alumni-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(85%) brightness(0.98);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.alumni-chip:hover img { filter: grayscale(0%); transform: scale(1.06); }
.alumni-chip:hover .chip-photo { box-shadow: var(--shadow-md); }
.alumni-chip .chip-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-700);
  margin-top: 0.5rem;
  line-height: 1.25;
}
.alumni-chip a.chip-link {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green-600);
  margin-top: 0.15rem;
}
.alumni-chip a.chip-link:hover { color: var(--green-500); }

@media (max-width: 767px) {
  .member-toolbar { padding: 1.1rem 0; }
  .leadership-card { flex-direction: column; text-align: center; padding: 1.5rem; }
  .leadership-card .role-badge { margin-left: auto; margin-right: auto; }
}

/* =========================================================
   MEMBER PROFILE TEMPLATE (.pf-*)
   Reusable layout for individual member pages.
   ========================================================= */
.pf-hero {
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
  color: #fff;
  padding: 3.25rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.pf-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 2px dashed rgba(200, 169, 85, 0.28);
}
.pf-hero-inner {
  display: flex;
  gap: 2.25rem;
  align-items: center;
  position: relative;
  z-index: 2;
}
.pf-photo {
  width: 190px;
  height: 190px;
  flex-shrink: 0;
  border-radius: 20px;
  object-fit: cover;
  border: 5px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-lg);
  background: var(--cream);
}
.pf-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--green-800);
  background: var(--green-100);
}
.pf-id { min-width: 0; }
.pf-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.3rem;
  line-height: 1.1;
}
.pf-role {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.pf-affil {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1rem;
}
.pf-affil a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.pf-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
.pf-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.92);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}

.pf-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.pf-link:hover {
  background: #fff;
  color: var(--green-800) !important;
  border-color: #fff;
  transform: translateY(-2px);
}
.pf-link i { font-size: 0.9rem; }

/* Placeholder icon: shown for consistency when a member has no link on record */
.pf-link.is-disabled {
  opacity: 0.38;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.05);
  cursor: default;
  pointer-events: none;
}

/* Body layout */
.pf-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: start;
  padding: 1.75rem 0 4rem;
}
/* Every profile keeps the same two-column shape; sections reserve their space
   even when a member has no content for them yet. */
.pf-section-body { min-height: 150px; }
.pf-empty {
  min-height: 150px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  font-size: 1.1rem;
  background: rgba(20, 32, 27, 0.012);
}

.pf-section { margin-bottom: 2.75rem; }
.pf-section:last-child { margin-bottom: 0; }
.pf-section > h2 {
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--green-700);
  margin: 0 0 1.35rem;
  padding-left: 0.85rem;
  border-left: 4px solid var(--gold);
  line-height: 1.3;
}
.pf-lede { font-size: 1.02rem; color: var(--ink-700); }

/* Publications */
.pf-pub {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.pf-pub:last-child { border-bottom: none; }
.pf-pub-year {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--green-700);
  background: var(--green-100);
  height: fit-content;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
}
.pf-pub-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 0.25rem;
  line-height: 1.4;
}
.pf-pub-authors { font-size: 0.85rem; color: var(--ink-500); margin: 0 0 0.2rem; }
.pf-pub-venue { font-size: 0.83rem; color: var(--ink-700); font-style: italic; margin: 0; }
.pf-pub-link { font-size: 0.8rem; font-weight: 700; }

.pf-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Research statistics tiles */
.pf-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.pf-stat {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 0.8rem;
  text-align: center;
}
.pf-stat .n {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--green-700);
}
.pf-stat .l {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-500);
  margin-top: 0.4rem;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .pf-stats { grid-template-columns: 1fr; }
}
.pf-chip {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink-700);
  padding: 0.24rem 0.6rem;
  border-radius: 6px;
}
.pf-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-500);
  margin: 2.25rem 0 0;
}
.pf-back:hover { color: var(--green-700); }

.pf-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green-700);
  background: var(--white);
  border: 1px solid var(--border);
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  transition: all 0.18s ease;
}
.pf-more:hover {
  background: var(--green-700);
  color: #fff;
  border-color: var(--green-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 991px) {
  .pf-layout { grid-template-columns: 1fr; gap: 2.25rem; padding: 1.5rem 0 3rem; }
}
@media (max-width: 767px) {
  .pf-hero-inner { flex-direction: column; text-align: center; gap: 1.5rem; }
  .pf-photo { width: 150px; height: 150px; }
  .pf-tags, .pf-links { justify-content: center; }
  .pf-hero::after { display: none; }
}

/* =========================================================
   PROFILE / DETAIL PAGES (member bio, project detail)
   ========================================================= */
.profile-wrap { padding: 3rem 0 4rem; }
.profile-photo {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.profile-body h1, .profile-body h2 { margin-bottom: 0.75rem; }
.members-info, .profile-body p { color: var(--ink-700); font-size: 1.02rem; }
.aboutconor { padding-top: 0.25rem; }

/* =========================================================
   PUBLICATIONS TABLE
   ========================================================= */
table.mydatatable, table.table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table.mydatatable thead th, .thead-ulgreen th {
  background: var(--green-800) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.9rem 1rem !important;
}
table.mydatatable tbody td {
  padding: 0.85rem 1rem !important;
  border-color: var(--border) !important;
  font-size: 0.92rem;
  vertical-align: middle;
}
table.mydatatable tbody tr:nth-of-type(odd) { background: var(--cream); }
table.mydatatable a { font-weight: 600; word-break: break-all; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
}
.dataTables_wrapper .paginate_button.current {
  background: var(--green-700) !important;
  border-color: var(--green-700) !important;
  color: #fff !important;
  border-radius: 6px;
}

/* =========================================================
   GALLERY
   ========================================================= */
.cover {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  padding: 3rem 1.5rem 4rem !important;
  max-width: 1180px;
  margin: 0 auto;
}
.cover img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cover img:hover { transform: scale(1.03); box-shadow: var(--shadow-md); }

/* =========================================================
   JOIN US / JOB CARDS
   ========================================================= */
.jobs-hero {
  background: linear-gradient(135deg, rgba(5,46,34,0.92), rgba(13,90,65,0.88)), url("../images/others/csisbuilding.jpeg") center/cover;
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
  color: #fff;
}
.jobs-hero h1 {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(2.1rem, 4vw, 3rem);
  margin-bottom: 1rem;
}
.jobs-hero-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 640px;
  margin: 1.75rem auto 0;
}
.jobs-hero-list a {
  display: block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff !important;
  padding: 0.85rem 1.3rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s;
}
.jobs-hero-list a:hover { background: rgba(255,255,255,0.18); }

.job-post {
  max-width: 860px;
  margin: 0 auto 2.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2.25rem 2.5rem;
  scroll-margin-top: 90px;
}
.job-post h2 {
  font-size: 1.35rem;
  border-bottom: 2px solid var(--green-100);
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
}
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.4rem;
  font-size: 0.9rem;
}
.job-meta strong { color: var(--green-700); }
.job-post p, .job-post li { color: var(--ink-700); font-size: 0.97rem; }
.job-post ul { padding-left: 1.3rem; }
.job-post strong.job-subhead {
  display: block;
  margin: 1.3rem 0 0.5rem;
  color: var(--ink-900);
  font-size: 1rem;
}

/* =========================================================
   FOOTER
   ========================================================= */
#footer, footer#footer {
  background: var(--green-900);
  color: rgba(255,255,255,0.78);
  padding: 3.5rem 0 0;
  margin-top: 0;
}
#footer .foot-list-title h4 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
#footer a { color: rgba(255,255,255,0.75); }
#footer a:hover { color: #fff; }
#footer .logo { max-width: 190px; height: auto; }
#footer h6 { margin-bottom: 0.6rem; font-weight: 500; }
#footer .footericons { margin-top: 1rem; }
#footer .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  margin-right: 0.5rem;
  color: #fff;
  font-size: 0.9rem;
}
#footer .social-icon:hover { background: var(--green-600); border-color: var(--green-600); }
#footer hr { border-color: rgba(255,255,255,0.15); margin: 2.25rem 0 1.25rem; }
#footer .footer-credits, #footer .credit-name { font-size: 0.82rem; color: rgba(255,255,255,0.55); }
#footer .container-fluid { max-width: 1180px; padding: 0 1.5rem 1.75rem; }

/* =========================================================
   COOKIE NOTICE
   ========================================================= */
.alert-design {
  background: var(--green-900);
  color: rgba(255,255,255,0.88);
  border: none;
  border-radius: 0;
  font-size: 0.85rem;
  padding: 0.9rem 3rem 0.9rem 1.5rem;
}
.alert-design .close { color: #fff; opacity: 0.7; text-shadow: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
  .brand-logo-bds { height: 58px; }
  .brand-logo-ul { height: 42px; }
}

@media (max-width: 767px) {
  .brand-bar { padding: 0.75rem 1rem; gap: 0.85rem; }
  .brand-logo-bds { height: 46px; }
  .brand-logo-ul { height: 34px; }
  .navbar-design .navbar-nav { padding: 0 1rem 1rem; }
  .section, .coloured-section { padding: 3rem 0; }
  .job-post { padding: 1.6rem 1.4rem; }
}