/* ============================================================
   Jan Schlegel — shared component styles (light + dark)
   These rules read Bootstrap CSS variables (--bs-*) so a single
   file works for both themes. Loaded via `css: custom.css`.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root { --jhs-radius: 10px; --jhs-measure: 820px; }

body { font-family: "Public Sans", system-ui, sans-serif; }
h1,h2,h3,h4,.h1,.h2,.h3 {
  font-family: "Source Serif 4", Georgia, serif;
  letter-spacing: -0.01em;
}

/* soft "muted text" helper based on the current body color */
.jhs-muted { color: color-mix(in srgb, var(--bs-body-color) 60%, transparent); }

/* ---------- Navbar ---------- */
.navbar { border-bottom: 1px solid var(--bs-border-color); backdrop-filter: blur(10px); }
.navbar-brand { font-family: "Source Serif 4", serif; font-weight: 600; }
.navbar-brand img { width: 34px; height: 34px; min-height: 0; max-height: none; padding: 0; border-radius: 50%; object-fit: cover; }

/* ---------- Homepage hero ---------- */
.jhs-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 48px;
  align-items: center; max-width: var(--jhs-measure); margin: 2.6rem auto 3rem;
}
.jhs-hero .jhs-portrait { width: 172px; height: 172px; border-radius: 50%; object-fit: cover; }
.jhs-hero h1 { font-size: 2.5rem; line-height: 1.15; margin: 0 0 .6rem; }
.jhs-hero p { font-size: 1.06rem; line-height: 1.6; max-width: 640px;
  color: color-mix(in srgb, var(--bs-body-color) 72%, transparent); }
.jhs-actions { display: flex; gap: 12px; margin-top: 1.15rem; }
.jhs-btn { padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.jhs-btn-primary { background: var(--bs-primary); color: #fff; }
.jhs-btn-ghost { border: 1px solid var(--bs-border-color); color: var(--bs-body-color); }

/* ---------- Blog listing cards ---------- */
.quarto-listing .card {
  border: 1px solid var(--bs-border-color); border-radius: var(--jhs-radius);
  overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; background: var(--bs-card-bg, var(--bs-body-bg));
}
.quarto-listing .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.quarto-listing .card-img-top, .quarto-listing .thumbnail-image { height: 170px; object-fit: cover; }
.quarto-listing .card-title { font-size: 1.15rem; line-height: 1.35; }
.listing-category, .quarto-category {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bs-primary);
}
.listing-date { font-size: .8rem; color: color-mix(in srgb, var(--bs-body-color) 55%, transparent); }

/* ---------- About: timeline ---------- */
.jhs-section { max-width: var(--jhs-measure); margin: 0 auto; }
.jhs-section > h2 { border-top: 1px solid var(--bs-border-color); padding-top: 2.4rem; margin-top: 2.4rem; }
.jhs-timeline { border-left: 2px solid var(--bs-border-color); padding-left: 26px; margin-top: 1.4rem;
  display: flex; flex-direction: column; gap: 2.1rem; }
.jhs-entry { position: relative; }
.jhs-entry::before {
  content: ""; position: absolute; left: -33px; top: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--bs-primary);
  border: 2px solid var(--bs-body-bg); box-shadow: 0 0 0 1px var(--bs-border-color);
}
.jhs-period { font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: color-mix(in srgb, var(--bs-body-color) 55%, transparent); margin-bottom: .35rem; }
.jhs-entry h3 { font-size: 1.15rem; margin: 0 0 .15rem; }
.jhs-org { font-size: .9rem; font-weight: 600; color: var(--bs-primary); }
.jhs-place { font-size: .82rem; margin-bottom: .6rem;
  color: color-mix(in srgb, var(--bs-body-color) 55%, transparent); }
.jhs-entry ul { margin: 0; padding-left: 18px; }
.jhs-entry li { font-size: .95rem; line-height: 1.6; margin-bottom: .35rem;
  color: color-mix(in srgb, var(--bs-body-color) 80%, transparent); }

/* ---------- About: skills chips + research interests ---------- */
.jhs-skillgroup { margin-top: 1.3rem; }
.jhs-skillgroup .label { font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: color-mix(in srgb, var(--bs-body-color) 55%, transparent); margin-bottom: .7rem; }
.jhs-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.jhs-chip { font-size: .8rem; font-weight: 600; padding: 7px 14px; border-radius: 16px;
  border: 1px solid var(--bs-border-color); white-space: nowrap;
  color: color-mix(in srgb, var(--bs-body-color) 78%, transparent); }
.jhs-interests { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 1.2rem; }
.jhs-interest { display: flex; align-items: center; gap: 13px; padding: 13px 0;
  border-bottom: 1px solid var(--bs-border-color); font-size: .95rem; font-weight: 500; }
.jhs-interest::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bs-primary); flex-shrink: 0; }

/* ---------- Photography: album grid (uniform tiles) ---------- */
.jhs-album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 1.5rem 0 2.5rem; }
.jhs-album-grid .tile { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--bs-border-color); }
.jhs-album-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jhs-album-section-title { border-top: 1px solid var(--bs-border-color); padding-top: 1.6rem; margin-top: 2rem; }

/* Album cover previews on the Photography index: uniform tiles.
   Every cover is cropped to the same 3:2 frame (overriding Quarto's
   inline height:150px), so all cards line up at identical sizes
   regardless of each photo's native aspect ratio. */
#listing-albums .thumbnail-image, #listing-albums .card-img, #listing-albums .card-img-top {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
}

/* …and uniform text blocks: titles always occupy two lines, subtitles one,
   and the date sits at the same bottom position on every card, so text and
   image areas line up across all albums. */
#listing-albums .quarto-grid-item.card { height: 100%; }
#listing-albums .card-body { display: flex; flex-direction: column; }
#listing-albums .card-title {
  line-height: 1.35;
  min-height: 2.7em;               /* reserve exactly two lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#listing-albums .card-subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#listing-albums .card-attribution { margin-top: auto; padding-top: .5rem; }

/* ---------- Code blocks ---------- */
pre.sourceCode, div.sourceCode { border: 1px solid var(--bs-border-color); border-radius: 10px; }
code { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ---------- Mathematical propositions ---------- */
:root { --jhs-proposition: #7253A3; }
body.quarto-dark { --jhs-proposition: #BCA3E6; }

.callout.callout-note.proposition { border-left-color: var(--jhs-proposition); }
.callout.callout-note.proposition.callout-style-default > .callout-header {
  background-color: color-mix(in srgb, var(--jhs-proposition) 12%, var(--bs-body-bg));
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .jhs-hero { grid-template-columns: 1fr; text-align: center; }
  .jhs-hero .jhs-portrait { margin: 0 auto; }
  .jhs-actions { justify-content: center; }
  .jhs-interests, .jhs-album-grid { grid-template-columns: 1fr; }
  .jhs-album-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Research page — append to custom.css
   Reads the same Bootstrap variables (--bs-*) as the rest of the
   site, so it works unchanged in both light and dark themes.
   ============================================================ */

.jhs-research { max-width: var(--jhs-measure); margin: 2.6rem auto 0; }
.jhs-research > h1 { font-size: 2.5rem; letter-spacing: -0.015em; margin: 0 0 .6rem; }
.jhs-research-intro {
  max-width: 660px; font-size: 1.06rem; line-height: 1.6; margin: 0;
  color: color-mix(in srgb, var(--bs-body-color) 72%, transparent);
}

/* ---------- Filters ---------- */
.jhs-filters { display: flex; gap: 9px; flex-wrap: wrap; margin: 34px 0 6px; }
.jhs-filter {
  padding: 7px 15px; border-radius: 16px; font-family: "Public Sans", sans-serif;
  font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: transparent; border: 1px solid var(--bs-border-color);
  color: color-mix(in srgb, var(--bs-body-color) 58%, transparent);
  transition: all .15s ease;
}
.jhs-filter:hover { color: var(--bs-body-color); }
.jhs-filter.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

/* ---------- Publication list ---------- */
.jhs-publist { margin-top: 22px; }
.jhs-pub {
  padding: 32px 4px; border-top: 1px solid var(--bs-border-color);
  transition: box-shadow .15s ease, padding-left .15s ease;
}
.jhs-pub:hover { box-shadow: inset 3px 0 0 var(--bs-primary); padding-left: 18px; }

.jhs-pub-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 9px; }
.jhs-pub-type {
  font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--bs-body-color) 58%, transparent);
}
.jhs-pub-year { font-size: .8rem; white-space: nowrap; color: color-mix(in srgb, var(--bs-body-color) 58%, transparent); }

.jhs-pub-title { font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 .55rem; }
.jhs-pub-authors { font-size: .9rem; line-height: 1.5; margin-bottom: .4rem; color: color-mix(in srgb, var(--bs-body-color) 58%, transparent); }
.jhs-pub-authors strong { color: var(--bs-body-color); font-weight: 700; }
.jhs-pub-venue { font-size: .82rem; color: color-mix(in srgb, var(--bs-body-color) 58%, transparent); }

/* ---------- Abstract toggle ---------- */
.jhs-abstract-toggle {
  margin-top: 14px; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--bs-primary); font-family: "Public Sans", sans-serif; font-size: .82rem;
  font-weight: 600; display: inline-flex; align-items: center; gap: 5px;
}
.jhs-pub-abstract {
  font-size: .92rem; line-height: 1.65; margin: .9rem 0 0; display: none;
  color: color-mix(in srgb, var(--bs-body-color) 82%, transparent);
}
.jhs-pub.is-open .jhs-pub-abstract { display: block; }

/* ---------- Links ---------- */
.jhs-pub-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.jhs-pub-links a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border: 1px solid var(--bs-border-color); border-radius: 7px; text-decoration: none;
  color: var(--bs-body-color); font-size: .8rem; font-weight: 600;
}
.jhs-pub-links a:hover { border-color: var(--bs-primary); color: var(--bs-primary); }

/* ============================================================
   Dark / light toggle icon (moon in light mode, sun in dark mode)
   The glyphs themselves are added by theme-icon.js; these rules
   just make sure it is sized / aligned nicely.
   ============================================================ */
.quarto-color-scheme-toggle .bi { font-size: 1.05rem; }

@media (max-width: 700px) {
  .jhs-pub-meta { flex-wrap: wrap; }
}

/* ============================================================
   Cross-tab consistency
   Shared page header (title + intro) and content-column width so
   every tab — Blog, About, Research, Photography — lines up when
   switching. All widths derive from --jhs-measure.
   ============================================================ */
.jhs-page-header { max-width: var(--jhs-measure); margin: 2.6rem auto 0; }
.jhs-page-header h1 { font-size: 2.5rem; letter-spacing: -0.015em; margin: 0 0 .6rem; }
.jhs-page-intro {
  max-width: 660px; font-size: 1.06rem; line-height: 1.6; margin: 0;
  color: color-mix(in srgb, var(--bs-body-color) 72%, transparent);
}

/* Photography album intro paragraph, aligned to the shared column */
.jhs-album-intro { max-width: var(--jhs-measure); margin: 0 auto 1.5rem; }

/* ============================================================
   Lightbox — click any content image (photography albums, blog
   figures/plots) to view it full-screen with prev/next navigation.
   Built by lightbox.js; the dark scrim is intentional in both themes.
   ============================================================ */
.jhs-lb-eligible { cursor: zoom-in; }

.jhs-lb { position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; background: rgba(0,0,0,.92);
  padding: 4vh 5vw; }
.jhs-lb[hidden] { display: none; }
.jhs-lb-figure { margin: 0; display: flex; flex-direction: column;
  align-items: center; gap: .8rem; max-width: 92vw; }
.jhs-lb-img { max-width: 92vw; max-height: 82vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.jhs-lb-caption { color: rgba(255,255,255,.85); font-size: .85rem;
  text-align: center; max-width: 60ch; font-family: "Public Sans", sans-serif; }
.jhs-lb button { position: fixed; background: rgba(255,255,255,.1); border: none;
  color: #fff; cursor: pointer; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  transition: background .15s ease; }
.jhs-lb button:hover { background: rgba(255,255,255,.22); }
.jhs-lb-close { top: 18px; right: 18px; }
.jhs-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.jhs-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.jhs-lb-counter { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: .8rem; font-family: "Public Sans", sans-serif; }
body.jhs-lb-open { overflow: hidden; }

@media (max-width: 700px) {
  .jhs-lb-prev { left: 8px; }
  .jhs-lb-next { right: 8px; }
}