/* Personal Website for Philip Meng (CSS File) */
/* CSC402: Web Development */

/* Root setup for CSS, defines custom CSS properties/variables for the whole site */
:root { /* using root to match the documents root (HTML) */
  --ink: #111;  /* primary text color */
  --muted: #667085; /* secondary text color  */
  --max: 1040px; /* maximum page width for the .container */
  --pad: 20px; /* vertical padding between each section */
}

/* Universal CSS Selector */
* { box-sizing: border-box; }
html { background:#fff; color:var(--ink); scroll-behavior:smooth;
      /* improves text/font on MacOS */
       -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
  margin:0;
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height:1.75;
  letter-spacing:0.005em;
}
/* Pseudo-element -> representing highlighted text */
::selection { background:#000; color:#fff; }

/* Layout */
.container { max-width:var(--max); margin:0 auto; padding:0 24px; }
.section { padding:var(--pad) 0; scroll-margin-top:24px; }
.section-heading { font-size:20px; font-weight:700; margin:0 0 20px 0; }

/*  Header */
.site-header { padding-top:48px; }
.title {
  font-size:clamp(28px, 5vw, 40px); font-weight:700; margin:0;
  display:inline-flex; align-items:center; gap:14px;
} 

/* Text blocks */
.text { max-width:62ch; }
.text p { margin:0 0 20px 0; }
.text a {
  text-decoration: none;
}
.text a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* For each section  */
.projects { list-style:none; margin:0; padding:0; }
.project { padding:10px 0; }
.project__title { text-decoration:none; color:var(--ink); font-weight:600; display:inline-block; }
.project__title:hover { opacity:.75; }
.project__meta { margin-top:4px; color:var(--muted); }

/* Photo grid */
.photo-grid {
  /* Turns the wrapper into a CSS Grid layout */
  display:grid;
  /* create as many columns as will fit in the container at the minimum size (more columns on wide screens) */
  /* minmax: each column can’t get narrower than 160px, but it can grow up to 1 fraction of the remaining space  */
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:16px;
  align-items:start;
}
.photo-grid img {
  width:100%;
  aspect-ratio: 3 / 4;
  /* Image fits the box; may crop slightly to fit the aspect ratio */
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.10);
  /* Smooths the hover animation of movement and shadow */
  transition:transform .2s ease, box-shadow .2s ease;
}
.photo-grid img:hover {
  /* When hovering, lifts slightly up */
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}
/* Makes experience better for ppl w/ smaller screens (less gutter-heavy) */
@media (max-width:640px) { .photo-grid { gap:12px; } }

/*  Accessibility Practice */
/*  Respects users who’ve asked the OS to minimize motion  */
/*  This disables smooth scrolling and hover animations when they request it,
    reducing nausea/vestibular issues */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .photo-grid img { transition:none; }
}