@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ============================================================
   Baptiste Ravina — Academic Portfolio
   custom.css — single source of truth for all styles
   ============================================================

   TABLE OF CONTENTS
   -----------------
   1.  Design tokens (colors, fonts)
   2.  Dark-mode overrides
   3.  MkDocs theme overrides
   4.  Global typography
       Note: body font (Source Sans 3) and code font (JetBrains Mono) are
       set via mkdocs.yml theme.font and applied site-wide by MkDocs Material.
       Only the serif display font (--font-serif) is declared here.
   5.  Pills / tags          [hp- prefix = homepage only]
   6.  Homepage layout       [hp- prefix]
     6a. Hero
     6b. Section chrome (eyebrow, headings, dividers)
     6c. Featured publication block
     6d. Research-area cards
     6e. Timeline / CV
     6f. Blog cards
     6g. CTA strip
   7.  Publication list       [site-wide]
   8.  Talk grid              [site-wide]
   9.  Team grid              [site-wide]
   10. Milestone blog cards   [site-wide]
   11. BibTeX modal           [site-wide]
   12. Section labels         [site-wide]
   13. Contact row            [site-wide]
   14. Video embeds           [site-wide]
   15. Responsive overrides
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* — Teal (primary accent) — */
  --accent:       #0f6e56;   /* teal-600 */
  --accent-mid:   #1d9e75;   /* teal-400 */
  --accent-light: #e1f5ee;   /* teal-50  */
  --accent-dark:  #04342c;   /* teal-900 */
  --accent-800:   #085041;   /* teal-800 */

  /* — Aliases used by main.py color_map (do not remove) — */
  --teal-50:  #e1f5ee; --teal-400: #1d9e75;
  --teal-600: #0f6e56; --teal-800: #085041; --teal-900: #04342c;
  --purple-50:  #eeedfe; --purple-800: #3c3489;
  --coral-50:   #faece7; --coral-800:  #712b13;
  --blue-50:    #e6f1fb; --blue-800:   #0c447c;
  --amber-50:   #faeeda; --amber-800:  #633806;
  --red-50:     #fcebeb; --red-800:    #791f1f;
  --green-50:   #eaf3de; --green-800:  #27500a;
  --pink-50:    #fbeaf0; --pink-800:   #72243e;
  --gray-50:    #f1efe8; --gray-800:   #444441;
  --slate-50:   #f8f7f5; --slate-800:  #2a2a28;
  --indigo-50:  #e8e6fb; --indigo-800: #2d2878;
  --cyan-50:    #e0f4f8; --cyan-800:   #0a4d5c;

  /* — Secondary palette (semantic names for site-wide CSS) — */
  --purple:       #534ab7;
  --purple-light: #eeedfe;
  --coral:        #d85a30;
  --coral-light:  #faece7;
  --amber:        #854f0b;
  --amber-light:  #faeeda;
  --blue:         #185fa5;
  --blue-light:   #e6f1fb;

  /* — Neutrals / surface — */
  --surface-dim: #f8f7f5;   /* s50  */
  --s100:        #efeee9;
  --border:      #e4e3df;   /* s200 */
  --text-faint:  #8a8a86;   /* s400 */
  --text-muted:  #5a5a58;   /* s600 */
  --text-dark:   #2a2a28;   /* s800 */
  --text-main:   #1a1a1a;   /* s900 */

  /* — Font stacks — */
  --font-serif: 'Source Serif 4', Georgia, serif;        /* headings, display: site-wide */
}


/* ============================================================
   2. DARK-MODE OVERRIDES
   ============================================================ */

[data-md-color-scheme="slate"] {
  --surface-dim: #1e1e1e;
  --s100:        #242422;
  --border:      #333;
  --text-faint:  #6a6a66;
  --text-muted:  #a0a09a;
  --text-dark:   #d8d8d0;
  --text-main:   #e0dfd8;
}


/* ============================================================
   3. MKDOCS THEME OVERRIDES
   ============================================================ */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0f6e56;
  --md-primary-bg-color: #fff;
  --md-accent-fg-color:  #1d9e75;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1d9e75;
  --md-accent-fg-color:  #5dcaa5;
}

/* Strip default inner padding on the homepage (hp- layout owns it) */
.md-content__inner {
  max-width: none !important;
  padding-bottom: 3rem !important;
}

/* Logo + site-name link clickable */
.md-header__button.md-logo,
.md-header__topic > .md-ellipsis {
  cursor: pointer;
}


/* ============================================================
   4. GLOBAL TYPOGRAPHY (non-homepage pages)
   ============================================================ */

.md-typeset h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.md-typeset h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.3px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
  margin-top: 2.5rem;
}


/* ============================================================
   5. PILLS / TAGS
   Site-wide component. Use <span class="pill" data-color="teal">
   for unlinked pills, <a class="pill" data-color="teal"> for linked.
   Hover effect only applies to <a> pills.
   ============================================================ */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.8rem;
}
.pill {
  display: inline-block;
  font-size: 0.75rem;
  padding: 3px 12px;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  vertical-align: baseline;
  transition: background 0.15s, color 0.15s;
}

/* — Teal — */
.pill[data-color="teal"]   { background: var(--teal-50);    color: var(--teal-900); }
a.pill[data-color="teal"]:hover  { background: var(--teal-600);   color: #fff; }

/* — Purple — */
.pill[data-color="purple"] { background: var(--purple-50);  color: var(--purple-800); }
a.pill[data-color="purple"]:hover { background: var(--purple-800); color: #fff; }

/* — Coral — */
.pill[data-color="coral"]  { background: var(--coral-50);   color: var(--coral-800); }
a.pill[data-color="coral"]:hover  { background: var(--coral-800);  color: #fff; }

/* — Blue — */
.pill[data-color="blue"]   { background: var(--blue-50);    color: var(--blue-800); }
a.pill[data-color="blue"]:hover   { background: var(--blue-800);   color: #fff; }

/* — Amber — */
.pill[data-color="amber"]  { background: var(--amber-50);   color: var(--amber-800); }
a.pill[data-color="amber"]:hover  { background: var(--amber-800);  color: #fff; }

/* — Red — */
.pill[data-color="red"]    { background: var(--red-50);     color: var(--red-800); }
a.pill[data-color="red"]:hover    { background: var(--red-800);    color: #fff; }

/* — Green — */
.pill[data-color="green"]  { background: var(--green-50);   color: var(--green-800); }
a.pill[data-color="green"]:hover  { background: var(--green-800);  color: #fff; }

/* — Pink — */
.pill[data-color="pink"]   { background: var(--pink-50);    color: var(--pink-800); }
a.pill[data-color="pink"]:hover   { background: var(--pink-800);   color: #fff; }

/* — Gray — */
.pill[data-color="gray"]   { background: var(--gray-50);    color: var(--gray-800); }
a.pill[data-color="gray"]:hover   { background: var(--gray-800);   color: #fff; }

/* — Slate — */
.pill[data-color="slate"]  { background: var(--slate-50);   color: var(--slate-800); }
a.pill[data-color="slate"]:hover  { background: var(--slate-800);  color: #fff; }

/* — Indigo — */
.pill[data-color="indigo"] { background: var(--indigo-50);  color: var(--indigo-800); }
a.pill[data-color="indigo"]:hover { background: var(--indigo-800); color: #fff; }

/* — Cyan — */
.pill[data-color="cyan"]   { background: var(--cyan-50);    color: var(--cyan-800); }
a.pill[data-color="cyan"]:hover   { background: var(--cyan-800);   color: #fff; }


/* ============================================================
   6. HOMEPAGE LAYOUT  (hp- prefix throughout)
   ============================================================ */

/* Reset MkDocs content wrapper on homepage */
.hp * { box-sizing: border-box; }
.hp {
  color: var(--text-main);
  line-height: 1.6;
}
.hp a { color: inherit; }


/* --- 6a. Hero ------------------------------------------------ */

.hp-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 2rem 2rem;
}
.hp-hero-row {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* Avatar wrapper — grows with viewport */
.hp-avatar-wrap {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  display: flex;
}
@media (min-width: 651px) {
  .hp-avatar-wrap {
    width: 260px;
    height: 260px;
    margin-left: -40px;
  }
}
@media (min-width: 870px) {
  .hp-avatar-wrap {
    width: 300px;
    height: 300px;
    margin-left: -60px;
  }
}
@media (min-width: 1600px) {
  .hp-avatar-wrap {
    margin-left: -150px;
  }
}

.hp-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent-light);
  display: block;
}
.hp-avatar-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: #fff;
}

.hp-hero h1 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 0.3rem;
}
.hp-sub {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.hp-sub a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.hp-bio {
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 560px;
  color: var(--text-dark);
}
.hp-bio em {
  font-style: normal;
  font-family: var(--font-serif);
  font-weight: 600;
  background: var(--accent-light);
  color: var(--accent-dark);
  padding: 1px 6px;
  border-radius: 4px;
}


/* --- 6b. Section chrome (eyebrow labels, headings, dividers) - */

.hp-sec {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 2rem 0;
}
.hp-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0 0;
}
.hp-ey {
  font-family: var(--md-code-font);
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.hp-sect {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-bottom: 1rem;
  line-height: 1.25;
}


/* --- 6c. Featured publication block -------------------------- */

.hp-feat {
  border-left: 3px solid var(--accent-mid);
  padding: 1.25rem 1.5rem;
  background: var(--surface-dim);
  margin: 0.75rem 0;
}
[data-md-color-scheme="slate"] .hp-feat {
  background: var(--s100);
}
.hp-feat-lab {
  font-family: var(--md-code-font);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.hp-feat h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
  line-height: 1.3;
}
.hp-feat .hp-jnl {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-bottom: 0.3rem;
}
.hp-lnks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.hp-lnks a {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  text-decoration: none;
  color: var(--text-muted);
  transition: all 0.15s;
}
.hp-lnks a:hover {
  border-color: var(--accent-mid);
  color: var(--accent);
}


/* --- 6d. Research-area cards --------------------------------- */

.hp-rg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 1rem 0;
}
.hp-rc {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.hp-rc:hover { border-color: var(--accent-mid); }
.hp-rc-i {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.hp-rc-i svg { width: 20px; height: 20px; }
.hp-rc h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.hp-rc p {
  font-size: 0.82rem;
  color: var(--text-faint);
  line-height: 1.5;
}


/* --- 6e. Timeline / CV -------------------------------------- */

.hp-tl {
  position: relative;
  padding-left: 40px;
  margin: 1rem 0 1.5rem;
}
.hp-tl::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}
.hp-tl-item {
  position: relative;
  padding: 0 0 1.75rem 0;
}
.hp-tl-item:last-child { padding-bottom: 0; }
.hp-tl-item::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  left: -34px;
  top: 7px;
  background: var(--accent-light);
  border: 2.5px solid var(--accent-mid);
  z-index: 1;
}
.hp-tl-item.current::before {
  width: 16px;
  height: 16px;
  left: -36px;
  top: 5px;
  background: var(--accent-mid);
  border: 3px solid var(--accent-light);
  box-shadow: 0 0 0 5px rgba(29, 158, 117, 0.12);
}
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(29, 158, 117, 0.12); }
  50%       { box-shadow: 0 0 0 12px rgba(29, 158, 117, 0.04); }
}
@media (prefers-reduced-motion: no-preference) {
  .hp-tl-item.current::before {
    animation: tl-pulse 2.5s ease-in-out infinite;
  }
}
.hp-tl-d {
  font-family: var(--md-code-font);
  font-size: 0.72rem;
  color: var(--text-faint);
}
.hp-tl-item h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1px 0;
}
.hp-tl-o {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.hp-tl-desc {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 0.25rem;
  line-height: 1.5;
}
.hp-tl-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hp-tl-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  border-radius: 3px;
  padding: 1px;
}

/* --- 6f. Blog preview cards ---------------------------------- */

.hp-blog-card {
  padding: 1.25rem 1.5rem;
  background: var(--surface-dim);
  border-radius: 10px;
  margin: 0.75rem 0;
  text-decoration: none;
  display: block;
  color: inherit;
  transition: box-shadow 0.15s;
}
[data-md-color-scheme="slate"] .hp-blog-card {
  background: var(--s100);
}
.hp-blog-card:hover {
  box-shadow: 0 0 0 1px var(--accent-mid);
}
.hp-blog-date {
  font-family: var(--md-code-font);
  font-size: 0.68rem;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.hp-blog-card h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  line-height: 1.3;
}
.hp-blog-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}



/* --- 6g. CTA strip ------------------------------------------ */

.hp-cta {
  text-align: center;
  padding: 2rem 0 1rem;
}
.hp-cta .hp-sect { margin-bottom: 0.5rem; }
.hp-cta-sub {
  font-size: 0.92rem;
  color: var(--text-faint);
  margin-bottom: 1.5rem;
}
.hp-btn-p {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 10px 24px;
  border-radius: 100px;
  text-decoration: none;
  background: var(--accent);
  color: #fff !important;
  transition: background 0.2s;
  display: inline-block;
  margin-bottom: 1rem;
}
.hp-btn-p:hover { background: var(--accent-800); }


/* ============================================================
   7. PUBLICATION LIST  (site-wide)
   ============================================================ */

.pub-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pub-item {
  padding: 0.9rem 0;
}
.pub-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 2px;
}
.pub-authors {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.pub-venue {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.pub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.pub-links a {
  font-size: 0.75rem;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-muted);
  transition: all 0.15s;
}
.pub-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pub-links .bibtex-btn {
  cursor: pointer;
  background: none;
  font-family: inherit;
}


/* ============================================================
   8. TALK GRID  (site-wide)
   ============================================================ */

.talk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 1rem 0;
}
.talk-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  transition: border-color 0.15s;
}
.talk-card:hover { border-color: var(--accent); }
.talk-date {
  font-family: var(--md-code-font);
  font-size: 0.75rem;
  color: var(--text-faint);
}
.talk-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 4px 0;
  line-height: 1.4;
  display: block;
}
a.talk-title {
  text-decoration: none;
  color: inherit;
}
a.talk-title:hover { color: var(--accent); }
.talk-venue {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.talk-links { margin-top: 6px; }
.talk-links a {
  font-size: 0.72rem;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-muted);
  margin-right: 4px;
}
.talk-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}


/* ============================================================
   9. TEAM GRID  (site-wide)
   ============================================================ */

.team-section h3 {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-faint);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  border: none;
  padding: 0;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 2rem;
}
.team-card {
  text-align: center;
  padding: 1rem 0.5rem;
}
.team-avatar,
.team-initials {
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 0 auto 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-avatar {
  object-fit: cover;
  object-position: center;
  background: var(--surface-dim);
  outline: 2px solid var(--border);
  outline-offset: 0;
}
.team-initials {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-light);
}
.team-name {
  font-size: 0.88rem;
  font-weight: 600;
}
.team-role {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.team-affiliation {
  font-size: 0.75rem;
  color: var(--text-faint);
}


/* ============================================================
   10. MILESTONE BLOG CARDS  (site-wide)
   ============================================================ */

.milestone-card {
  background: var(--surface-dim);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}
.milestone-card .milestone-date {
  font-family: var(--md-code-font);
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.milestone-card h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  border: none;
  padding: 0;
}
.milestone-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}


/* ============================================================
   11. BIBTEX MODAL  (site-wide)
   ============================================================ */

.bibtex-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}
.bibtex-modal.active { display: flex; }
.bibtex-content {
  background: var(--md-default-bg-color, #fff);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow: auto;
  position: relative;
}
.bibtex-content pre {
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}
.bibtex-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
}
.bibtex-copy {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.bibtex-copy:hover {
  border-color: var(--accent);
  color: var(--accent);
}


/* ============================================================
   12. SECTION LABELS  (site-wide)
   ============================================================ */

.section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-faint);
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}


/* ============================================================
   13. CONTACT ROW  (site-wide)
   ============================================================ */

.contact-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.contact-row a {
  font-size: 0.85rem;
  padding: 6px 18px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  text-decoration: none;
  color: var(--accent);
  transition: all 0.15s;
}
.contact-row a:hover { background: var(--accent-light); }


/* ============================================================
   14. VIDEO EMBEDS  (site-wide)
   ============================================================ */

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: 1rem 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}


/* ============================================================
   15. BLOG CATEGORY PILLS  (MkDocs Material blog plugin)
   Category links are rendered via template overrides in
   overrides/partials/post.html and overrides/blog-post.html,
   which inject class="pill" data-color="..." so the pill
   component in section 5 handles all colour and hover styling.
   ============================================================ */

/* The meta list is inline-flex with default align-items:stretch,
   which causes pills to misalign with surrounding text items.
   Center-aligning fixes this cleanly. */
.md-meta__list {
  align-items: center;
}


/* ============================================================
   16. RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 650px) {
  /* Homepage hero stacks vertically */
  .hp-hero-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .pill-row { justify-content: center; }

  /* Research cards go single column */
  .hp-rg { grid-template-columns: 1fr; }

  /* Talk grid goes single column */
  .talk-grid { grid-template-columns: 1fr; }

  /* Team grid tightens */
  .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* =====
    FOOTER: GIT VERSION DATE
  ===== */

.md-footer .md-source-file {
  background-color: transparent;
  color: var(--md-footer-fg-color--light);
}

.md-footer .md-source-file__fact {
  color: var(--md-footer-fg-color--light);
}

.md-footer .md-source-file__fact .md-icon svg {
  fill: var(--md-footer-fg-color--light);
}