/* ============================================================================
 *  IRB AI Colloquium — styles
 *  Clean, academic, Financial-Times-inspired: warm paper background,
 *  serif display type, generous whitespace, restrained accent colour.
 *  You usually don't need to touch this file — content lives in content.js.
 * ==========================================================================*/

:root {
  --paper:    #ffffff;   /* white page background              */
  --ink:      #1c1b19;   /* near-black body text               */
  --muted:    #6b6256;   /* secondary text (dates, meta)       */
  --accent:   #8a2b22;   /* deep IRB-ish red for links/headings */
  --rule:     #e6e6e6;   /* hairline rule colour               */
  --box:      #f5f6f8;   /* info box / card tint (cool grey)   */
  --maxw:     720px;

  /* IRB brand typefaces (loaded in index.html). System fonts are the
     fallback so the page still reads well offline / before the web font
     loads. Edit these two lines to change fonts site-wide. */
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.65;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---- Full-width logo banner ------------------------------------------- */
/* Full-width band with the logo pinned to the far left of the page (it sits
   outside .wrap, so it is NOT indented to the centered content column). The
   small horizontal padding just keeps it off the very edge.                */
.site-banner {
  border-bottom: 1px solid var(--rule);
  padding: 1.25rem;
}
.site-brand {
  display: inline-block;
  border-bottom: none;          /* cancel the global link underline hover */
}

/* ---- Header ----------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  padding: 1.75rem 0 1.25rem;
}

/* Logo: a 1400x400 "Institut Ruđer Bošković" lockup on white, so it sits
   flush on the white page. We size by height and let width scale via the
   intrinsic aspect ratio; max-width guards the wide lockup on small screens. */
.site-logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: 100%;
}

#site-title {
  font-size: 2.2rem;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}

.subtitle {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-style: italic;
}

.tagline {
  margin: 0.75rem 0 0;
  font-size: 1.05rem;
}

/* ---- Navigation ------------------------------------------------------- */
.site-nav {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--accent); }

/* ---- Links ------------------------------------------------------------ */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover { border-bottom-color: currentColor; }

/* ---- Sections & headings --------------------------------------------- */
main { padding: 1rem 0 2rem; }

section { padding: 1.75rem 0; }
section + section { border-top: 1px solid var(--rule); }

h2 {
  font-size: 1.35rem;
  margin: 0 0 1rem;
}

/* ---- Info box --------------------------------------------------------- */
.info-box {
  background: var(--box);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
  margin-top: 1.5rem;
}
.info-box dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
}
.info-box dt {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 0.2rem;
}
.info-box dd { margin: 0; }

/* ---- Talk entries ----------------------------------------------------- */
.talk {
  padding: 1.1rem 0;
}
.talk + .talk { border-top: 1px dotted var(--rule); }

.talk .meta {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.talk .meta .topic {
  color: var(--accent);
  margin-left: 0.5rem;
}
/* A small badge for one-off talks that sit outside the regular schedule,
   e.g. "Preview talk". */
.talk .meta .note {
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.talk h3 {
  font-size: 1.18rem;
  margin: 0 0 0.25rem;
  line-height: 1.25;
}
.talk .speaker { margin: 0 0 0.5rem; }
.talk .speaker .affil { color: var(--muted); font-style: italic; }
.talk .abstract { margin: 0.5rem 0 0; }
.talk .abstract-bullets { margin: 0.35rem 0 0; padding-left: 1.4rem; }
.talk .abstract-bullets li { margin: 0.15rem 0; }

/* Speaker biography — smaller and quieter than the abstract. */
.talk .bio {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.talk .bio .bio-label {
  color: var(--ink);
  font-style: italic;
}

/* ---- Talk with a headshot -------------------------------------------- */
/* Text column and photo sit side by side; the photo is fixed-width so the
   prose keeps a comfortable measure. Stacks vertically on small screens. */
.talk.has-photo { display: flex; gap: 1.5rem; align-items: flex-start; }
.talk-main { flex: 1 1 auto; min-width: 0; }
.talk-photo { flex: 0 0 160px; margin: 0.2rem 0 0; }
.talk-photo img {
  display: block;
  width: 160px;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--rule);
}
.talk .slides {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
}

/* The "next talk" gets a subtle highlight card */
.talk.featured {
  background: var(--box);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.25rem;
}
.talk.featured + .talk { border-top: none; }

.empty { color: var(--muted); font-style: italic; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--box);
  margin-top: 2rem;
  padding: 2rem 0 2.5rem;
}
.organizers { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.organizers li { margin: 0.2rem 0; }
.organizers li .affil { color: var(--muted); font-style: italic; }
.organizers-contact { margin: 0 0 1rem; color: var(--muted); }
.mailing-list { color: var(--muted); }
.subscribe {
  display: inline-block;
  margin: 0.5rem 0 0 0.5rem;
  padding: 0.4rem 0.9rem;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  border-bottom: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.subscribe:hover { background: #6f2019; border-bottom: none; }
.colophon {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- Small screens ---------------------------------------------------- */
@media (max-width: 480px) {
  body { font-size: 17px; }
  #site-title { font-size: 1.8rem; }
  .site-logo { height: 56px; }
  .info-box dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .info-box dt { padding-top: 0.6rem; }

  /* Stack the headshot above the text on narrow screens. */
  .talk.has-photo { flex-direction: column-reverse; gap: 1rem; }
  .talk-photo { flex-basis: auto; }
}