/* Basic reset tweaks */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Hero section */
.hero-section {
  min-height: 100vh;
  background: radial-gradient(circle at top left, #3a86ff 0, #111827 45%, #020617 100%);
  color: #f9fafb;
  padding-top: 6rem; /* space for navbar */
  padding-bottom: 4rem;
  position: relative; /* allows absolute positioning of logos */
}

.hero-inner {
  position: relative;
  z-index: 1; /* keep content above background */
}

.hero-card {
  border-radius: 1.5rem;
  backdrop-filter: blur(6px);
}

/* Navbar */
.navbar-logo {
  height: 32px;
  width: auto;
}

.hero-logo {
  height: 300px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.navbar-brand {
  letter-spacing: 0.02em;
}

.nav-link {
  font-size: 0.95rem;
}

/* Logos at bottom-right of hero */
.hero-affiliations {
  position: absolute;
  right: 2.5rem;
  bottom: 1.5rem;
  display: flex;
  gap: 2.5rem;
  z-index: 1;
}

.affiliation-logo {
  height: 85px;   /* slightly bigger logos */
  width: auto;
}

/* Section titles */
.section-title {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 1rem;
}

.section-subtitle {
  margin-top: 0.5rem;
  font-size: 0.98rem;
}

/* Light / dark section backgrounds */
.section-light {
  background-color: #f9fafb;
  color: #020617;
}

.section-light .section-subtitle {
  color: #4b5563;
}

.section-dark {
  background: #020617;
  color: #e5e7eb;
}

/* Cards */
.info-card,
.research-card,
.project-card,
.person-card,
.pub-item {
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background-color: rgba(15, 23, 42, 0.02);
}

.section-dark .info-card,
.section-dark .research-card,
.section-dark .project-card,
.section-dark .person-card,
.section-dark .pub-item {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
}

/* Accent color */
.accent {
  color: #3a86ff;
}

/* Links */
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #3a86ff, #2563eb);
  border: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.btn-outline-primary {
  border-radius: 999px;
}

/* Footer */
footer {
  font-size: 0.8rem;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
  .hero-section {
    text-align: left;
    padding-top: 5.5rem;
  }

  .hero-logo {
    height: 220px;
  }

  .hero-affiliations {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 1.25rem;
    gap: 1.75rem;
  }

  .affiliation-logo {
    height: 60px;
  }
}

/* News card */
.hero-news-card {
  background: rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.hero-news-card h5,
.hero-news-card .news-title,
.hero-news-card p {
  color: #e5e7eb;
}

/* Controls bar under the news card */
.hero-news-controls {
  margin-top: 0.75rem;
}

/* Arrows: compact circular buttons */
.hero-news-arrow {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(226, 232, 240, 0.6);
}

/* Indicators in a row below */
.hero-news-controls .carousel-indicators {
  position: static;
  display: flex;
  gap: 0.4rem;
}

.hero-news-controls .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: #e5e7eb;
  opacity: 0.4;
  border: none;
}

.hero-news-controls .carousel-indicators .active {
  opacity: 1;
}

/* News title weight */
.news-title {
  font-weight: 600;
}


.qsg-link-navy {
  color: #001f3f !important;      /* navy blue */
  text-decoration: none;
}

.qsg-link-navy:hover,
.qsg-link-navy:focus {
  color: #001537 !important;      /* slightly darker on hover */
  text-decoration: underline;
}

/* =========================
   People section (cards, avatars, filters)
   ========================= */

.people-controls {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
}

.people-group-label {
  margin-top: 0.25rem;
}

.person-card {
  border-radius: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  height: 100%;
}

.person-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.person-name {
  color: #fff;
  font-weight: 600;
}

.person-meta {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
}

.person-bio {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.35;
}

.badge-soft {
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  font-weight: 600;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  flex: 0 0 auto;
  overflow: hidden;
}

/* If you want photos later, place them inside .avatar as <img class="avatar-img" ...> */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.person-links {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.person-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 1.1rem;
  transition: transform 120ms ease, color 120ms ease;
}

.person-links a:hover {
  color: #fff;
  transform: translateY(-1px);
}

.people-footer {
  background: rgba(255, 255, 255, 0.03);
}


/* ===== Research hub diagram ===== */
.qse-map{
  position: relative;
  border-radius: 1.25rem;
  padding: 2.25rem 1.25rem;
  min-height: 360px;
  overflow: hidden;

  /* subtle “glass” surface on dark section */
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
}

/* faint dotted background */
.qse-map::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.25;
  pointer-events:none;
}

.qse-map-lines{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
}
.qse-map-lines line{
  stroke: rgba(255,255,255,0.22);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* nodes */
.qse-node{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap: .75rem;

  border-radius: 1.25rem;
  padding: .9rem 1rem;
  text-decoration:none;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(15, 17, 22, 0.70);
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);

  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.qse-node:hover{
  transform: translateY(-2px);
  border-color: rgba(13, 221, 253, 0.65); /* matches your accent */
  box-shadow: 0 12px 40px rgba(0,0,0,0.30);
  background: rgba(15, 17, 22, 0.85);
}

.qse-hub{
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  flex-direction: column;
  text-align:center;
  padding: 1.2rem 1.3rem;
  border-radius: 1.6rem;
  min-width: min(420px, 88%);
}
.qse-hub:hover{ transform: translate(-50%,-50%) translateY(-2px); }

.qse-hub-logo{
  width: 55px;
  height: auto;
  opacity: 0.95;
}
.qse-hub-title{
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.15;
}
.qse-hub-sub{
  color: rgba(255,255,255,0.75);
  font-size: .95rem;
}

/* satellites */
.qse-sat{
  color: rgba(255,255,255,0.92);
  max-width: 270px;
}
.qse-ico{
  display:grid;
  place-items:center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
.qse-ico i{ font-size: 1.15rem; }
.qse-label{
  font-weight: 700;
  line-height: 1.1;
  font-size: .98rem;
}

/* positions (desktop/tablet) */
.qse-n1{ left: 7%;  top: 14%; }
.qse-n2{ right: 7%; top: 14%; }
.qse-n3{ left: 7%;  bottom: 14%; }
.qse-n4{ right: 7%; bottom: 14%; }

/* gentle floating, optional */
@media (prefers-reduced-motion: no-preference){
  .qse-sat{ animation: qseFloat 5.5s ease-in-out infinite; }
  .qse-n2{ animation-delay: .8s; }
  .qse-n3{ animation-delay: 1.5s; }
  .qse-n4{ animation-delay: 2.2s; }
  @keyframes qseFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-4px); }
  }
}

/* responsive: on small screens, switch to stacked layout */
@media (max-width: 768px){
  .qse-map{
    min-height: 520px;
    padding: 1.25rem;
  }
  .qse-hub{ min-width: 88%; }
  .qse-n1{ left: 50%; top: 16%; transform: translateX(-50%); }
  .qse-n2{ left: 50%; top: 33%; transform: translateX(-50%); right:auto; }
  .qse-n3{ left: 50%; top: 50%; transform: translateX(-50%); bottom:auto; }
  .qse-n4{ left: 50%; top: 67%; transform: translateX(-50%); right:auto; bottom:auto; }
  .qse-map-lines{ display:none; } /* keep it clean on mobile */
}

/* Inline "QSE @ [INESC logo]" styling */
.qse-brand-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;          /* space between @ and logo */
}

.inline-inesc-logo {
  height: 70px;         /* tweak to taste: 28–36px usually looks good */
  width: auto;
  vertical-align: middle;
}

/* Person links */
.person-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .5rem;
  font-size: 1.05rem;
  opacity: 0.9;
  transition: opacity 120ms ease, transform 120ms ease;
}

.person-links a:hover { opacity: 1; transform: translateY(-1px); }

/* Use when you don't have a link yet */
.person-links a.link-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}


.inline-org-logo{
  height: 100px;         /* UMinho default */
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
  opacity: 0.95;
}

/* INESC TEC smaller */
.inline-org-logo.logo-inesc-sm{
  height: 65px;         /* tweak: 22–28px */
  transform: translateY(-1px);
}

@media (max-width: 576px){
  .inline-org-logo{ height: 26px; transform: translateY(-1px); }
  .inline-org-logo.logo-inesc-sm{ height: 20px; transform: translateY(0); }
}