/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-y: scroll; }
body {
  font: 20px Georgia, serif;
  line-height: 1.6;
  background: #f6fbff;
  color: #1a1a1a;
}

/* Container */
#page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Hero image */
.hero {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  display: block;
}

/* Headings */
h1 {
  font: 700 clamp(28px, 4vw, 40px) system-ui, sans-serif;
  margin-bottom: 0.6em;
}
h2 {
  font: 700 clamp(22px, 3vw, 30px) system-ui, sans-serif;
  margin: 1.2em 0 0.6em;
}

/* Links */
a { color: #0b63f6; text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 3px solid #2f6feb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Images */
img { max-width: 100%; height: auto; display: block; }

/* Portrait inside Home */
.content img[alt="photo"] {
  float: right;
  width: 300px;
  margin-left: 20px;
  margin-bottom: 10px;
  border-radius: 8px;
}
@media (max-width: 680px) {
  .content img[alt="photo"] {
    float: none;
    display: block;
    margin: 0 auto 12px;
  }
}

/* Lists */
ul.d, ul.f {
  margin: 0.6em 0 1.2em 1.2em;
  padding: 0;
}
ul.d { font: 700 20px Georgia, serif; }
ul.f { font: 400 20px Georgia, serif; }
ul.d li, ul.f li { margin: 0.25em 0; }

/* ===== Tabs ===== */
.tabs { width: 100%; }

/* Hide radios */
.tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Tab bar */
.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.tabbar > label {
  padding: 8px 14px;
  font: 700 18px Georgia, serif;
  color: #fff;
  background: #b8bec6;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, transform 0.1s;
}
.tabbar > label:hover { background: #2a2f36; }
.tabbar > label:active { transform: translateY(1px); }

/* Active labels */
#tab-1:checked ~ .tabbar label[for="tab-1"],
#tab-3:checked ~ .tabbar label[for="tab-3"],
#tab-4:checked ~ .tabbar label[for="tab-4"],
#tab-5:checked ~ .tabbar label[for="tab-5"] {
  background: #0b63f6;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Panels */
.panel {
  display: none;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08),
              0 4px 20px rgba(0,0,0,0.08);
}
#tab-1:checked ~ #panel-home,
#tab-3:checked ~ #panel-supervision,
#tab-4:checked ~ #panel-publications,
#tab-5:checked ~ #panel-simulations {
  display: block;
}

/* Tooltips (for publications abstracts) */
.tooltip { 
	display: inline-block; 
	color: #2890e0;    
	cursor: pointer;        	
}
.tooltip .tooltiptext {

  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #77a4c7;
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  padding: 12px 14px;
  border-radius: 10px;
  transition: opacity .15s ease, transform .15s ease;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: min(700px, calc(100vw - 32px)); /* always fit inside viewport */
}
.tooltip:hover .tooltiptext,
.tooltip:focus-within .tooltiptext {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(10px);
   position: fixed;         /* anchor to viewport */
  top: 16px;               /* 16px from top */
  left: 50%;
  transform: translateX(-50%);  /* perfectly centered horizontally */
  max-height: min(80vh, 1000px);/* scroll if very long */
  overflow: auto;
  z-index: 9999;
}

/* Simulations gallery */
.pic img { width: 100%; height: auto; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body { background: #0f1216; color: #eef2f7; }
  .panel { background: #141922; color: #eef2f7; }
  .tabbar > label { background: #404754; }
  #tab-1:checked ~ .tabbar label[for="tab-1"],
  #tab-3:checked ~ .tabbar label[for="tab-3"],
  #tab-4:checked ~ .tabbar label[for="tab-4"],
  #tab-5:checked ~ .tabbar label[for="tab-5"] {
    background: #5aa0ff;
    color: #fff;
  }
}

/* Print */
@media print {
  body { background: #fff; color: #000; }
  .tabbar > label { background: #ddd; color: #000; box-shadow: none; }
  .panel { box-shadow: none; background: #fff; }
}

/* === Simulations: two-column layout === */
#panel-simulations .content{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px 24px;            /* row / column gaps */
  align-items: start;
}

/* Headings and non-image paragraphs should span both columns */
#panel-simulations .content > h2,
#panel-simulations .content > p:not(.pic){
  grid-column: 1 / -1;
}

/* Make sim images fill their column (override any inline widths) */
#panel-simulations .pic img{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Hide stray clears/line breaks that were used in the old flow layout */
#panel-simulations .content > br,
#panel-simulations .content > p[style*="clear"]{
  display: none !important;
}

/* Mobile: fall back to a single column */
@media (max-width: 680px){
  #panel-simulations .content{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}