@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ============================================================
   Modern refresh layer for the "one" theme (akshaykalyan.net)
   Pure CSS overlay. No markup / functionality changes.
   Loaded LAST so it overrides Semantic UI + legacy styles.
   ============================================================ */

:root {
  --bg:            #0b0b0e;
  --bg-2:          #101015;
  --surface:       #15161c;
  --surface-2:     #1b1d25;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text:          #ECECEF;
  --muted:         #9a9aa6;
  --accent:        #0e9e6e;   /* emerald */
  --accent-2:      #0b7f57;   /* deep emerald */
  --accent-soft:   rgba(16, 185, 129, 0.14);
  --cream:         #f4ece2;
  --radius:        16px;
  --radius-sm:     10px;
  --shadow:        0 10px 34px rgba(0, 0, 0, 0.45);
  --shadow-hover:  0 18px 50px rgba(0, 0, 0, 0.6);
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(1100px 600px at 78% -8%, rgba(16, 185, 129, 0.10), transparent 60%),
    radial-gradient(900px 600px at 0% 6%, rgba(120, 80, 255, 0.06), transparent 55%) !important;
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.1px;
}

body, p, span, div, .ui.list .item, .ui.statistics .statistic > .label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Kill the dated white glow outlines everywhere they were set inline */
[style*="0px 0px 2px 0px #fff"],
[style*="0px 0px 2px 0px white"],
[style*="0px 0px 3px 0px #fff"],
[style*="0px 0px 2px 0px rgb(255, 255, 255)"],
[style*="rgb(255, 255, 255) 0px 0px 2px 0px"] {
  box-shadow: none !important;
}

/* Links */
a { color: var(--text); transition: color 0.2s var(--ease); }
a:hover { color: var(--accent); text-decoration: none !important; }

/* Selection + thin modern scrollbar */
::-moz-selection { background: rgba(16,185,129,0.40) !important; }
::selection { background: rgba(16,185,129,0.40) !important; }
* { scrollbar-width: thin; scrollbar-color: #2a2a32 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2a2a32; border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #3a3a44; }

/* ---------- Navbar ---------- */
#nav.ui.masthead.segment {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 0 !important;
  padding: 14px 0 !important;
  background: rgba(10, 10, 13, 0.72) !important;
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35) !important;
}

#nav .rust.logo,
#nav a.rust.logo { color: var(--cream) !important; transition: opacity 0.2s var(--ease); }
#nav a.rust.logo:hover { opacity: 0.85; }

#nav .right.item a i.icon,
#nav .item a i { transition: transform 0.2s var(--ease), color 0.2s var(--ease); }
#nav .right.item a:hover i.icon { transform: translateY(-2px); color: var(--accent) !important; }

/* CV button */
.ui.black.button {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  padding: 0.7em 1.3em !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.32) !important;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.ui.black.button:hover {
  background: var(--accent-2) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(16, 185, 129, 0.42) !important;
}

/* ---------- Section surfaces ---------- */
.ui.inverted.segment,
.ui.basic.inverted.segment,
.ui.vertical.stripe.inverted.segment {
  background-color: transparent !important;
  border: none !important;
}

/* Section headings */
.ui.inverted.header,
h1.ui.header, h2.ui.header, h3.ui.header {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: 0.2px;
  color: var(--text) !important;
}
.ui.horizontal.divider.header {
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.95rem !important;
}
.ui.horizontal.divider.header:before,
.ui.horizontal.divider.header:after {
  background-image: linear-gradient(to right, transparent, var(--border-strong)) !important;
}

/* ---------- Hero ---------- */
#hero { padding-top: 10px; }

#hero .aksdp img,
img.circular.image {
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.03), var(--shadow) !important;
  transition: transform 0.5s var(--ease), box-shadow 0.4s var(--ease);
}
#hero .aksdp img:hover,
img.circular.image:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow-hover) !important;
}

/* Skill tag chips */
.ui.labels .ui.label,
.ui.label.grey,
.ui.grey.label {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #d7d7de !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  padding: 0.55em 0.95em !important;
  margin: 0 0.4em 0.6em 0 !important;
  transition: all 0.2s var(--ease);
}
.ui.labels .ui.label:hover,
.ui.grey.label:hover {
  background: var(--accent-soft) !important;
  color: #a7f3d0 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px);
}

/* Rust labels / pills */
.ui.rust.label {
  background: var(--accent-soft) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.rust { color: var(--accent) !important; }

/* ---------- Roadmap / timeline ---------- */
.roadmap .event__date { color: var(--accent) !important; font-family: 'Space Grotesk', sans-serif !important; font-weight: 600 !important; }
.roadmap .event__content { color: var(--text) !important; line-height: 1.5; }
.roadmap .event__content small { color: var(--muted) !important; }

/* ---------- Metrics / statistics ---------- */
#metric_desktop.row,
#metric_mobile {
  background: linear-gradient(180deg, #0e0e12, #0a0a0d) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.ui.statistics .statistic > .value,
.ui.statistics .statistic > .value * {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.ui.statistics .statistic > .label {
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  margin-top: 0.4em;
}
.ui.statistics .statistic > .label h6 { color: #6f6f7a !important; letter-spacing: 0.5px; text-transform: none; }

/* ---------- Project cards ---------- */
.ui.cards > .card.projects,
.card.projects {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card.projects:hover {
  transform: translateY(-6px);
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: var(--shadow-hover) !important;
}
.card.projects .image { background: var(--surface-2) !important; }
.card.projects .image img { transition: transform 0.5s var(--ease); width: 100%; }
.card.projects:hover .image img { transform: scale(1.05); }
.card.projects > .content { background: var(--surface) !important; border-top: 1px solid var(--border) !important; }
.card.projects .content a.header,
.card.projects .card-title {
  color: var(--text) !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  transition: color 0.2s var(--ease);
}
.card.projects:hover .card-title { color: var(--accent) !important; }
.card.projects .ui.divider { border-color: var(--border) !important; }

/* Rust button (View Post, etc.) */
.ui.rust.button {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.ui.rust.button:hover {
  background: var(--accent-2) !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.45) !important;
}

/* ---------- Publications ---------- */
#pub_app .ui.inverted.segment,
#pubs .ui.raised.inverted.segment {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
#pubs .ui.segment.basic { background: transparent !important; }

#pub_app .list .item {
  border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease);
  padding: 0.4em 0.6em !important;
}
#pub_app .list .item:hover { background: rgba(255, 255, 255, 0.03); }
#pub_app .ui.header.rust.link,
#pub_app a.rust.link {
  color: #f0f0f2 !important;
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  transition: color 0.2s var(--ease);
}
#pub_app .ui.header.rust.link:hover { color: var(--accent) !important; }
#pub_app .label.yearextra,
#pub_app .ui.grey.label {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #c7c7cf !important;
  border: 1px solid var(--border) !important;
}
#pub_app .label.pubtype.rust { background: var(--accent-soft) !important; color: #6ee7b7 !important; border: 1px solid rgba(16,185,129,0.35) !important; }

/* ---------- Research group gallery ---------- */
.image-gallery img.ui.image.rounded {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), filter 0.4s var(--ease);
  filter: saturate(0.95);
}
.image-gallery img.ui.image.rounded:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-hover);
  filter: saturate(1.1);
}

/* ---------- Footer ---------- */
.ui.center.aligned.inverted.segment {
  background: #08080a !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.ui.center.aligned.inverted.segment p { color: var(--muted) !important; letter-spacing: 0.3px; }

/* ---------- Misc ---------- */
.ui.divider { border-color: var(--border) !important; }
hr { border: none; border-top: 1px solid var(--border); }

/* Gentle entrance for major blocks */
@media (prefers-reduced-motion: no-preference) {
  .card.projects,
  .image-gallery .segment,
  #infomatic .statistic {
    animation: riseIn 0.6s var(--ease) both;
  }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FIXES v2 — metrics centering, card tags, dimmer, mobile
   ============================================================ */

/* (1) Desktop metrics band: symmetric padding + true vertical centering */
#metric_desktop.row {
  display: flex !important;
  align-items: center !important;
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
#metric_desktop .twelve.wide.column {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  justify-content: center;
}
#info-pad.ui.statistics { margin: 0 auto !important; align-items: center !important; }
#info-pad .statistic { align-self: center !important; }
#info-pad .statistic > .label { min-height: 2.6em; }

/* (3) Project-card hover dimmer + "View Post" button — de-glitch */
.card.projects .ui.dimmer {
  background: rgba(8, 8, 11, 0.78) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* The dimmer wrapper is ALSO a .content div — keep it transparent, no border/strip */
.card.projects .image .ui.dimmer .content,
.card.projects .ui.dimmer .content,
.card.projects .ui.dimmer .content .center {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100%;
}
.card.projects .ui.dimmer .ui.rust.button {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.85em 1.7em !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease) !important;
}
.card.projects .ui.dimmer .ui.rust.button:hover {
  background: var(--accent-2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

/* (4) Card tag labels — vertical gap so wrapped rows don't touch */
.card.projects .extra.content { line-height: 1; padding-top: 12px !important; padding-bottom: 14px !important; }
.card.projects .extra.content .ui.label,
.card.projects .extra.content a.ui.label {
  display: inline-block;
  margin: 0 8px 10px 0 !important;
}
#pub_app .extra.content .ui.label { margin: 0 8px 10px 0 !important; display: inline-block; }

/* (2) MOBILE polish */
@media (max-width: 767px) {
  #nav.ui.masthead.segment { padding: 10px 0 !important; }
  #nav h1.ui {
    font-size: 1.4rem !important;
    letter-spacing: 4px !important;
    justify-content: center !important;
    flex-wrap: wrap;
  }
  #nav h1 a.rust.logo { gap: 10px !important; }
  #nav h1 a.rust.logo img { height: 34px !important; }
  #nav .item, #nav .right.item { font-size: 0.95rem; }
  #nav .ui.black.button { padding: 0.6em 1em !important; font-size: 0.82rem !important; }

  #hero .ui.labels { text-align: center; }
  #hero .aksdp img, img.circular.image { width: 60% !important; }

  .ui.statistics .statistic > .value { font-size: 1.9rem !important; }
  .ui.statistics .statistic > .label { font-size: 0.62rem !important; letter-spacing: 1px; }
  #metric_mobile { padding: 22px 8px !important; }

  .ui.grid > .row > [class*="wide column"] { padding-left: 14px !important; padding-right: 14px !important; }
  .ui.container { padding-left: 10px !important; padding-right: 10px !important; }

  .ui.cards > .card.projects, .card.projects { width: 100% !important; margin: 0 0 18px !important; }
  .card.projects .content a.header, .card.projects .card-title { font-size: 1rem !important; }

  #pub_app .ui.header.rust.link { font-size: 1.05rem !important; }
  .ui.horizontal.divider.header { font-size: 0.78rem !important; letter-spacing: 2px !important; }
  .image-gallery img.ui.image.rounded { width: 100% !important; }
}

@media (max-width: 480px) {
  #nav h1.ui { font-size: 1.15rem !important; letter-spacing: 3px !important; }
  #nav h1 a.rust.logo img { height: 30px !important; }
  .ui.statistics .statistic > .value { font-size: 1.6rem !important; }
}