/* Homepage layout; shared typography and controls live in site.css. */
.home-section { padding: 48px 0; }
.home-section:first-of-type { padding-top: 48px; }
.section-title { font-size: 2rem; line-height: 1.2; }
#profile { padding: 0; }
.portrait-title h1 {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 24px 0 12px;
  color: var(--site-ink);
}
.portrait-subtitle {
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--site-muted);
  margin: 0 0 8px;
}
#profile .network-icon { margin-top: 22px; }
.about-details { margin-top: 1.6rem; }
.about-details h3 { font-size: 1rem; margin-top: 0; }
.ul-edu li .description p.institution { font-size: .82rem; line-height: 1.6; color: var(--site-muted); }
.ul-interests { font-size: .9rem; }

/* The timeline stays aligned with each role, with no trailing connector. */
.experience > .col-auto { justify-content: flex-start; }
.experience > .col-auto > .row.h-50:first-child { height: 1rem !important; flex: 0 0 1rem; }
.experience > .col-auto > .row.h-50:last-child { height: auto !important; flex: 1 1 auto; }
.experience:last-of-type > .col-auto > .row.h-50:last-child .border-right { border-right: 0 !important; }
.experience:last-of-type > .col-auto > .row.h-50:last-child { flex: 0 0 0; height: 0 !important; }
/* The card margin separates entries; after the last one it is dead space. */
.experience:last-of-type .card { margin-bottom: 0; }
.experience .card {
  border: 1px solid var(--site-border);
  border-radius: 10px;
  box-shadow: none;
}
.experience .card-body { padding: 1.25rem 1.4rem; }
.experience .exp-title {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--site-ink) !important;
}
.experience .exp-company { margin-top: .45rem !important; font-size: .9rem; }
.experience .exp-meta { margin-top: .6rem; font-size: .8rem; }
.experience .card .card-text,
.experience .card .card-text p {
  padding: 0;
  font-size: .9rem !important;
  line-height: 1.65;
  color: var(--site-ink) !important;
}
.experience .card .card-text { margin-top: .8rem; }
.experience .card .card-text > :last-child { margin-bottom: 0; }
.exp-company { display: flex; align-items: center; }
.exp-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-right: .6rem;
  padding: 6px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .1);
  overflow: hidden;
}
.exp-logo-svg, .exp-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.exp-logo--amazon .exp-logo-svg, .exp-logo--nokia .exp-logo-svg { width: 90%; height: auto; }
.exp-logo--amazon { background: #ff9900; border-color: #ff9900; }
.exp-logo--nokia { background: #124191; border-color: #124191; }
.exp-logo--polytech { background: #019cde; border-color: #019cde; }

.section-intro { font-size: .9rem; color: var(--site-muted); margin: .75rem 0 0; }
.section-more { display: inline-block; font-size: .9rem; margin-top: 1rem; }
#publications .pub-list-item:first-child { padding-top: 0; }
#publications .pub-list-item:last-child { border-bottom: 0; padding-bottom: 0; }
/* The homepage list uses the compact flowing citation format, which does not
   want the archive card's padding and separator rules. */
#publications .pub-list-item { padding: 0; border-bottom: 0; margin-bottom: 1.1rem !important; }

/* A simple count and country list complement the map. */
.travel-card { padding-top: 1rem; }
.travel-stats { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1rem; }
.travel-count { font-size: 2rem; line-height: 1; font-weight: 500; color: var(--site-ink); }
.travel-stats-label { font-size: .9rem; color: var(--site-muted); }
.travel-progress-row { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.travel-progress { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--site-border); overflow: hidden; }
.travel-progress-bar { height: 100%; border-radius: 999px; background: var(--site-accent); }
.travel-progress-label { flex: 0 0 auto; font-size: .8rem; color: var(--site-muted); font-variant-numeric: tabular-nums; }
body.dark .travel-progress { background: rgba(255, 255, 255, .16); }
#visited-countries-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 1rem;
}
#visited-countries-list li { break-inside: avoid; margin-bottom: .3rem; font-size: .85rem; line-height: 1.6; }
#travels-map {
  min-height: 440px;
  height: 100%;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  background: #eef3f7;
  overflow: hidden;
}
#travels-map .map-placeholder { padding: 1.5rem; font-size: .9rem; color: var(--site-muted); }
#travel-map-status { margin: .5rem 0 0; font-size: .8rem; }
#travel-map-status:empty { display: none; }
body.dark #travels-map { background: #17232f; }
.wg-travels .map-column { display: flex; flex-direction: column; }
.wg-travels .leaflet-container { font-family: inherit; }
.wg-travels .leaflet-control-attribution { font-size: 10px; }
body.dark .leaflet-bar a { background: #282a36; color: #f3f4f7; }
body.dark .leaflet-control-attribution { background: rgba(35,37,47,.9); color: #d3d7df; }
body.dark .leaflet-popup-content-wrapper, body.dark .leaflet-popup-tip { background: #282a36; color: #f3f4f7; }

@media (min-width: 992px) {
  #about .article-style { max-width: 42rem; }
  .wg-experience .row > .section-heading, .wg-pages .row > .section-heading { flex: 0 0 28%; max-width: 28%; }
  .wg-experience .row > .col-lg-8, .wg-pages .row > .col-lg-8 { flex: 0 0 72%; max-width: 72%; }
  /* These heading columns hold only a title. Centring it in the tall row left
     it below the fold after following the nav link, so keep it at the top and
     let it follow the reader through the section instead. */
  .wg-experience .section-heading > .section-title,
  .wg-pages .section-heading > .section-title { position: sticky; top: 104px; }
  .wg-travels .row { align-items: stretch; }
}
@media (max-width: 991.98px) {
  .home-section { padding: 48px 0; }
  .home-section:first-of-type { padding-top: 36px; }
  #profile { padding: 0 0 2.5rem; }
  #profile .avatar { width: 200px; height: 200px; }
  .section-heading { align-items: flex-start !important; margin-bottom: 1.5rem !important; }
  .section-title { font-size: 1.75rem; }
  .section-more { margin-top: .65rem; }
  .travel-card { width: 100%; }
  #visited-countries-list { columns: 3; }
  #travels-map { min-height: 360px; height: 360px; }
}
@media (max-width: 575.98px) {
  .experience .card-body { padding: 1.15rem; }
  .about-details > div + div { margin-top: 1.5rem; }
  #visited-countries-list { columns: 2; }
  #travels-map { min-height: 320px; height: 320px; }
}

/* Employer links in the experience cards: the theme forces #1565c0 on them in
   dark mode, which is 2:1 against the #343a40 card. #bbdefb is the theme's own
   dark link colour and gives 8.2:1. */
.dark .card .section-subheading a,
body.dark .card .section-subheading a {
  color: #bbdefb;
}