/* ICDC-NC pages. Palette, type and spacing follow the UNC System faculty site
   (myapps.northcarolina.edu/faculty), which links here: Lora for headings,
   Roboto for body text, navy #0f4876 on white. */

:root {
  --unc-navy: #0f4876;
  --unc-link: #0053bb;
  --unc-text: #353f43;
  --unc-muted: #6a7378;
  --unc-band: #dbe2e9;
  --unc-line: #d9d9d9;
  --unc-accent: #bc1f52;
  --maxw: 1080px;
  color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--unc-text);
  background: #fff;
}
h1, h2, h3 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--unc-navy);
  margin: 1rem 0 0.5em;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.5em; }
a { color: var(--unc-link); }
a:hover { color: var(--unc-accent); }
a:focus-visible { outline: 2px solid var(--unc-accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 500; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

/* Header: white bar, ICDC mark and wordmark left, links right */
.site-header { border-bottom: 1px solid var(--unc-line); background: #fff; }
.site-header .container { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--unc-navy); flex-shrink: 0; }
.brand a { display: flex; color: inherit; text-decoration: none; }
.brand a:hover { color: var(--unc-accent); }
.brand img { height: 44px; width: auto; }
.brand-name { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 1.35rem; letter-spacing: 0.01em; white-space: nowrap; }
.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; font-weight: 400; font-size: 0.95rem; }
.site-nav a { color: var(--unc-navy); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--unc-accent); }

/* Phones: the wordmark keeps the full width of the bar, links drop to their
   own row underneath instead of being squeezed in beside it. */
@media (max-width: 700px) {
  .site-header .container { flex-wrap: wrap; min-height: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; gap: 0.5rem; }
  .brand { flex: 0 0 100%; }
  .site-nav { margin-left: 0; flex-basis: 100%; gap: 0.35rem 1.1rem; }
}

/* Hero band, navy like the top section of the Common Ground page */
.hero { background: var(--unc-navy); color: #fff; padding: clamp(2rem, 6vw, 3.5rem) 0; }
.hero h1 { color: #fff; margin-top: 0; font-size: clamp(2rem, 5vw, 2.9rem); }
.hero .lede { font-size: 1.2rem; max-width: 42rem; margin-bottom: 1.75rem; }
.hero .lede a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero .lede a:hover { color: var(--unc-band); }

/* Overview hero with the photo from the intro slide deck behind the text, off
   to the right. The photo's left side fades into #0b2f51, so the band uses that
   navy to blend. The photo fills the band's height and shrinks with it; a navy
   gradient over the left part keeps the white text readable where the two begin
   to overlap on narrower screens. Below 900px the photo moves beneath the text
   as an ordinary image instead. */
.hero-photo {
  background-color: #0b2f51;
  background-image: linear-gradient(90deg, #0b2f51 0%, #0b2f51 52%, rgba(11, 47, 81, 0) 74%),
                    url("/img/sayre-mccord-teaching.jpg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 100% 100%, auto 100%;
}
.hero-photo .hero-text { max-width: 60%; }
.hero-photo .hero-img { display: none; }
/* On mid-width screens the band is tall, so a height-fitted photo would grow
   wider than the band. Anchor it by the face instead: the photo's 78% point
   (his face) sits at 78% of the band's width, clear of the text column. */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-photo { background-size: 100% 100%, cover; background-position: right center, 78% center; }
}
.hero-photo .photo-credit { font-size: 0.8rem; color: var(--unc-band); margin: 1rem 0 0; }
@media (min-width: 1200px) {
  .hero-photo { padding: 2.25rem 0; }
  .hero-photo .hero-text { max-width: 44rem; }
  .hero-photo h1 { font-size: 2.5rem; margin-bottom: 0.4em; }
  .hero-photo .h1-lead { white-space: nowrap; }
  .hero-photo .lede { font-size: 1.1rem; margin-bottom: 1.25rem; }
}
@media (max-width: 899px) {
  .hero-photo { background-image: none; }
  .hero-photo .hero-text { max-width: none; }
  .hero-photo .hero-img { display: block; width: 100%; margin: 1.5rem 0 0; border-radius: 4px; }
  .hero-photo .photo-credit { margin-top: 0.5rem; }
}
.btn {
  display: inline-block;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.7rem 1.4rem;
  border: 2px solid #fff;
  border-radius: 3px;
  color: #fff;
  background: transparent;
  text-decoration: none;
  margin: 0 0.75rem 0.75rem 0;
}
.btn:hover { background: #fff; color: var(--unc-navy); }
.btn-solid { background: #fff; color: var(--unc-navy); }
.btn-solid:hover { background: var(--unc-band); color: var(--unc-navy); }
.main .btn { border-color: var(--unc-navy); color: var(--unc-navy); }
.main .btn:hover { background: var(--unc-navy); color: #fff; }

/* Body sections */
.main { padding: clamp(1.5rem, 4vw, 2.5rem) 0 3rem; }
.section { padding: 1.25rem 0; }
.section + .section { border-top: 1px solid var(--unc-line); }
.section h2 { margin-top: 0.75rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: 1rem; } }

/* Fellows page hero: title on the left, a featured fellow on the right */
.hero-feature { display: grid; grid-template-columns: 1fr 15rem; gap: 2.5rem; align-items: center; }
.fellow-card { margin: 0; background: #fff; color: var(--unc-text); border-radius: 3px; overflow: hidden; }
.fellow-card img { width: 100%; height: auto; }
.fellow-card figcaption { padding: 0.75rem 0.9rem 0.85rem; font-size: 0.9rem; line-height: 1.4; }
.fellow-card strong { color: var(--unc-navy); }
/* Slides share one grid cell so the card keeps the height of the tallest caption */
.fellow-slides { display: grid; }
.fellow-slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; }
.fellow-slide.is-active { opacity: 1; visibility: visible; }
.fellow-dots { display: flex; justify-content: center; gap: 0.6rem; padding: 0 0 0.85rem; }
.fellow-dots button { width: 0.8rem; height: 0.8rem; padding: 0; border: 2px solid var(--unc-navy); border-radius: 50%; background: #fff; cursor: pointer; }
.fellow-dots button[aria-current="true"] { background: var(--unc-navy); }
.fellow-dots button:focus-visible { outline: 2px solid var(--unc-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fellow-slide { transition: none; } }
@media (max-width: 760px) {
  .hero-feature { grid-template-columns: 1fr; gap: 1.25rem; }
  .fellow-card { max-width: 15rem; }
}

/* Captioned photo inside a body column */
.photo { margin: 1rem 0 1.5rem; }
.photo img { width: 100%; height: auto; border-radius: 3px; }
.photo figcaption { font-size: 0.8rem; color: var(--unc-muted); margin-top: 0.4rem; }

/* Closing row of buttons, solid navy to match the hero buttons */
.main .btn-row .btn { background: var(--unc-navy); border-color: var(--unc-navy); color: #fff; }
.main .btn-row .btn:hover { background: #fff; color: var(--unc-navy); }
/* Button with the ICDC mark; negative margins keep it the same height as its neighbours */
.btn-logo img { display: inline-block; vertical-align: middle; height: 1.75rem; width: auto; margin: -0.4rem 0.55rem -0.4rem 0; padding: 2px; background: #fff; border-radius: 2px; }
.section ul { padding-left: 1.25rem; margin: 0 0 1.5em; }
.section li { margin-bottom: 0.4em; }

/* The course, three parts side by side */
.parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0 0 1rem; }
.part { border-top: 4px solid var(--unc-navy); padding-top: 0.75rem; }
.part h3 { margin-top: 0; }
.part p { margin-bottom: 0; font-size: 1rem; }
@media (max-width: 760px) { .parts { grid-template-columns: 1fr; } }

/* Campus grid: 17 tiles. Most of these marks are wide wordmarks, so the tile
   width sets their size and a height cap alone would never bind; the image
   takes a fixed box and object-fit instead. A tile whose logo file is missing
   shows the campus name alone (the img hides itself on error). */
.fellows-slide { display: block; margin: 0.5rem 0 1rem; }
.fellows-slide img { width: 100%; height: auto; border-radius: 3px; }
.campuses { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 0.75rem; }
.campus { border: 1px solid var(--unc-line); border-radius: 3px; background: #fff; }
.campus a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 118px; padding: 0.75rem 0.4rem; text-decoration: none; color: var(--unc-navy); text-align: center; }
.campus a:hover { color: var(--unc-accent); }
.campus img { width: 100%; height: 52px; object-fit: contain; }
.campus span { font-size: 0.85rem; font-weight: 400; line-height: 1.25; }
.campus:hover { border-color: var(--unc-navy); box-shadow: 0 0 0 1px var(--unc-navy); }

/* Fellows table */
.fellows { width: 100%; border-collapse: collapse; font-size: 1rem; margin: 0.5rem 0 1.5rem; }
.fellows th, .fellows td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--unc-line); }
.fellows th { background: var(--unc-band); color: var(--unc-navy); font-weight: 500; }
.fellows td:first-child { font-weight: 400; color: var(--unc-navy); white-space: nowrap; }
.fellows td:first-child a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(15, 72, 118, 0.4); }
.fellows td:first-child a:hover { color: var(--unc-accent); text-decoration-color: currentColor; }
.fellows .role { display: block; font-size: 0.8rem; color: var(--unc-muted); font-weight: 300; }
.fellows .course + .course { margin-top: 0.35rem; }
.table-wrap { overflow-x: auto; }

/* Footer */
.site-footer { background: var(--unc-band); color: var(--unc-text); font-size: 0.95rem; padding: 1.5rem 0; margin-top: 1rem; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: center; justify-content: space-between; }
.site-footer a { color: var(--unc-navy); }
.site-footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }