/* MC³ Lab website: shared styles.
   The page layout itself is in each page's inline styles (the desktop design).
   This file only adds (1) the photo/cartoon swap on the Team page and
   (2) phone-only adjustments, inside the media query at the bottom.
   Nothing in the media query applies to screens wider than 640px. */

/* Team photos: real photo by default, cartoon on hover (mouse),
   keyboard focus, or tap (phones; site.js toggles .is-flipped). */
.pi-photo .pi-cartoon { opacity: 0; }
@media (hover: hover) {
  .pi-photo:hover .pi-cartoon { opacity: 1; }
  .pi-photo:hover .pi-real { opacity: 0; }
}
.pi-photo:focus-visible .pi-cartoon,
.pi-photo.is-flipped .pi-cartoon { opacity: 1; }
.pi-photo:focus-visible .pi-real,
.pi-photo.is-flipped .pi-real { opacity: 0; }
.pi-photo { -webkit-tap-highlight-color: transparent; }

/* Publications pager: compact "Page X of Y" shown on phones only. */
.pg-ind { display: none; }

@media (max-width: 640px) {
  /* Page gutters: 16px instead of 32px. */
  header > div,
  main > section,
  footer > div { padding-left: 16px !important; padding-right: 16px !important; }

  /* Header: logo on top, all five menu items in one row. */
  header > div { gap: 10px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  header nav { width: 100%; min-width: 0; flex-wrap: nowrap !important; justify-content: space-between; gap: 6px 4px !important; font-size: clamp(12.5px, 3.5vw, 15px) !important; white-space: nowrap; }
  header nav a[href="join.html"] { min-height: 36px !important; padding: 0 11px !important; }

  /* Less vertical space between sections. */
  main > section[style*="padding: 88px"],
  main > section[style*="padding: 72px"],
  main > section[style*="padding: 64px"] { padding-top: 48px !important; }
  main > section[style*="padding: 56px"] { padding-top: 36px !important; }
  footer { margin-top: 64px !important; }

  /* Text sized for a phone screen: a little smaller than desktop, still easy to read. */
  body > div[style*="font-size: 17px"] { font-size: 15.5px !important; line-height: 1.55 !important; }
  main h1 { font-size: 34px !important; line-height: 1.08 !important; }
  main h2[style*="font-size: 44px"],
  main h2[style*="font-size: 40px"],
  main h2[style*="font-size: 36px"],
  main h2[style*="font-size: 34px"] { font-size: 26px !important; line-height: 1.12 !important; }
  main h2[style*="font-size: 26px"] { font-size: 22px !important; }
  main h3[style*="font-size: 32px"] { font-size: 23px !important; }
  main h3[style*="font-size: 28px"],
  main h3[style*="font-size: 26px"] { font-size: 21px !important; }
  main h3[style*="font-size: 25px"] { font-size: 20px !important; }
  main h3[style*="font-size: 22px"],
  main h4[style*="font-size: 22px"] { font-size: 19px !important; }
  main h3[style*="font-size: 18px"] { font-size: 16.5px !important; }
  main h3[style*="font-size: 17px"] { font-size: 15.5px !important; }
  main p[style*="font-size: 26px"] { font-size: 19px !important; }
  main p[style*="font-size: 20px"] { font-size: 16.5px !important; }
  main p[style*="font-size: 18px"], main blockquote[style*="font-size: 18px"] { font-size: 16px !important; }
  main ul[style*="font-size: 16px"] { font-size: 14.5px !important; }
  main span[style*="font-size: 30px"] { font-size: 25px !important; }
  main span[style*="font-size: 28px"] { font-size: 23px !important; }
  main span[style*="font-size: 26px"]:not(#info-day *) { font-size: 22px !important; }
  main span[style*="font-size: 22px"] { font-size: 19px !important; }

  /* Cards: less inner padding so text gets more width. */
  main div[style*="padding: 56px;"] { padding: 28px 20px !important; gap: 28px !important; }
  main article[style*="padding: 48px"] { padding: 24px 18px !important; gap: 22px !important; }
  main article[style*="padding: 28px"],
  main article[style*="padding: 24px 28px"] { padding: 20px 18px !important; }
  main article[style*="padding: 24px;"] { padding: 18px !important; }
  main [style*="padding: 22px 24px"] { padding: 18px !important; }
  main [style*="padding: 20px 22px"] { padding: 16px !important; }
  main blockquote { padding: 48px 20px 28px !important; }
  #pub-list, .pub-card { padding: 4px 18px !important; }

  /* Topic badges on the Research page: natural width, side by side. */
  main [style*="min-width: 186px"] { min-width: 0 !important; }

  /* Team: smaller photos, sitting beside the name. */
  .pi-photo[style*="220px"] { flex: 0 0 150px !important; width: 150px !important; height: 150px !important; }
  main article[style*="padding: 48px"][style*="gap: 40px"] { gap: 20px !important; }
  .pi-photo[style*="width: 150px"] { width: 96px !important; height: 96px !important; }
  .pi-photo[style*="width: 116px"] { width: 80px !important; height: 80px !important; }
  main article[style*="align-items: center; gap: 28px"] { gap: 16px !important; align-items: flex-start !important; }
  main article[style*="gap: 16px 22px"] { gap: 12px 16px !important; align-items: flex-start !important; }
  main article [style*="flex: 1 1 420px"] { flex-basis: 180px !important; }

  /* Lab news pictures: no fixed height, so phones don't show empty space. */
  main div[style*="min-height: 330px"] { min-height: 0 !important; }

  /* Lab news event: date as a strip above the text. */
  #info-day > div:first-child { flex: 1 1 100% !important; flex-direction: row !important; gap: 10px !important; padding: 12px 16px !important; }
  #info-day > div:first-child > span:nth-child(2) { font-size: 28px !important; }

  /* Publications pager: Previous · Page X of Y · Next. */
  #all-pubs nav > span:not(.pg-ind) { display: none !important; }
  .pg-ind { display: inline; font-size: 15px; font-weight: 600; color: #5A6573; }
  #all-pubs nav { gap: 12px !important; }
}

/* Very narrow phones: let the menu wrap onto two rows. */
@media (max-width: 345px) {
  header nav { flex-wrap: wrap !important; justify-content: flex-start; gap: 6px 16px !important; }
}