/* Profile photo on the Home page */
.profile-photo {
  border-radius: 50%;
  width: 160px;
  height: 160px;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.75rem auto;
  border: 4px solid var(--md-default-bg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Hero section on the Home page */
.hero {
  text-align: center;
  padding: 1rem 1rem 1.25rem 1rem;
  background:
    linear-gradient(rgba(232, 244, 248, 0.8), rgba(232, 240, 254, 0.8)),
    url("../images/about.png") center / cover no-repeat;
  border-radius: 8px;
}

.hero h1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.hero p {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.hero + hr {
  margin-top: 0.5rem;
}

/* Timeline on the Experience page */
.timeline {
  padding-left: 1.75rem;
  border-left: 3px solid var(--md-primary-fg-color--light);
}

.timeline-entry {
  position: relative;
  margin-bottom: 1.75rem;
}

.timeline-entry::before {
  content: '';
  position: absolute;
  left: -2.2rem;
  top: 0.45rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background-color: var(--md-primary-fg-color);
  border: 2px solid var(--md-default-bg-color);
}

.timeline-entry h3 {
  margin-top: 0;
}

/* Card tint. Defined as a variable so the dark scheme can override it — a
   hardcoded light blue leaves near-white text unreadable in dark mode. */
:root {
  --card-bg: #f0f7ff;
}

[data-md-color-scheme="slate"] {
  --card-bg: rgba(255, 255, 255, 0.05);
}

/* Skills grid cards on the Home page */
.md-typeset .grid.cards > ul > li {
  background-color: var(--card-bg);
}

/* Project cards on the Projects gallery page */
.project-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 1rem;
  background-color: var(--card-bg);
  transition: box-shadow 0.2s;
}

.project-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

/* A section holding a single card should not stretch that card across the full
   page width. auto-fill keeps the empty columns, so a lone card stays the same
   width as the cards in the multi-card sections above it. */
.md-typeset .grid:has(> .project-card:only-child) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* Citation line under a Research Contributions entry. Held back in size and
   colour so the contribution above it stays the thing you read first. */
.md-typeset .pub-credit {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* Course announcement banner on the Home page. Warm amber, echoing the poster's
   "Book a seat" button, so it stands apart from the blue cards below it. */
:root {
  --banner-bg: #fff6e5;
  --banner-border: #f0a030;
}

[data-md-color-scheme="slate"] {
  --banner-bg: rgba(255, 170, 0, 0.08);
}

.course-banner {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--banner-border);
  border-radius: 8px;
  background-color: var(--banner-bg);
}

.md-typeset .course-banner p {
  margin: 0 0 0.5rem 0;
}

.md-typeset .course-banner .md-button {
  margin-top: 0.25rem;
}

/* Featured project card on the Home page, just below the hero. Thumbnail on the
   left, text on the right; stacks into one column on narrow screens. Blue accent
   so it stands apart from the amber course banner further down. */
.featured-project {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 1.25rem;
  align-items: center;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 4px solid var(--md-primary-fg-color);
  border-radius: 8px;
  background-color: var(--card-bg);
}

.featured-project img {
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 4px;
}

.md-typeset .featured-project .featured-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-primary-fg-color);
}

.md-typeset .featured-project h3 {
  margin: 0.25rem 0 0.5rem 0;
}

.md-typeset .featured-project .md-button {
  margin-top: 0.25rem;
}

@media (max-width: 600px) {
  .featured-project {
    grid-template-columns: 1fr;
  }
}