/* Home page layout. Loaded after tokens.css, base.css and site.css; shared components (.btn, .social, .frame, .panels, .chips) are styled in site.css. */

/* ---------- Hero: Stage, reversed (the name on 7 columns, the portrait on 5) ---------- */
.hero {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--nav-h));
  /* The space under the content runs a little larger than the space above it (layout 44a). */
  padding-block: var(--space-xl) var(--space-2xl);
}

.hero__inner {
  --hero-gap: var(--space-2xl);
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--hero-gap);
  align-items: center;
}

.hero__text { display: grid; justify-items: start; min-width: 0; }

/* Marquee scale, clamp(4rem, 10vw, 9rem) per the picks, held to the 7-column text track
   (container units, no vw): on one line the name is about 5.1em wide. */
.hero__name {
  --name-track: calc((100cqi - var(--hero-gap)) * 7 / 12);
  max-width: none;
  font-size: clamp(4rem, var(--name-track) / 5.2, 9rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--color-ink);
  overflow-wrap: break-word;
  min-width: 0;
}

.hero__copy { display: grid; gap: var(--space-2xs); max-width: 52ch; margin-top: var(--space-lg); color: var(--color-muted); }
.hero__lead, .hero__line { display: block; }
.hero__lead { margin-bottom: var(--space-2xs); font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }

.hero__actions { margin-top: var(--space-xl); }

/* The icon row starts on the text edge: each link is 44px with a 20px glyph, so pull it back by the glyph's inset. */
.hero__social { margin-top: var(--space-lg); margin-left: calc(var(--space-sm) * -1); }

/* The portrait: a tall crop of the square headshot, in true colour, with a 1px rule edge. */
.hero__portrait {
  width: 100%;
  aspect-ratio: 5 / 6;
  max-height: calc((100svh - var(--nav-h)) * 0.7);
  justify-self: end;
}
.hero__portrait picture { height: 100%; }
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

@media (min-width: 60.0625rem) {
  .hero__name { white-space: nowrap; }
}

/* Tablet: the two tracks hold; the name breaks to two lines ("Amin / Taheri") sized to its track. */
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-2xl); }
  .hero__inner { --hero-gap: var(--space-xl); }
  .hero__name { font-size: clamp(4rem, var(--name-track) / 3.1, 9rem); }
  .hero__portrait { aspect-ratio: 3 / 4; max-height: none; }
  /* Four actions as a 2 x 2 block, so "Certificates" never wraps alone. */
  .hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Nine icons on one row: equal cells across the text track, never an orphan. */
  .hero__social { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); justify-self: stretch; margin-inline: calc(var(--space-sm) * -1) 0; }
  .hero__social .social__link { width: 100%; }
}

/* Phone and small tablet: one column with the portrait shown first (visual order only; the markup and reading order stay text first),
   a 4:3 head-and-shoulders crop, so the face, the name and the MUN line share the first screen. */
@media (max-width: 47.99rem) {
  .hero { padding-block: var(--space-md) var(--space-lg); }
  .hero__inner { --hero-gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
  .hero__name { font-size: clamp(4rem, 10cqi, 9rem); }
  .hero__portrait { order: -1; justify-self: stretch; aspect-ratio: 4 / 3; }
  .hero__portrait img { object-position: 50% 22%; }
}

@media (max-width: 40rem) {
  .hero__copy { margin-top: var(--space-md); }
  .hero__actions { margin-top: var(--space-lg); }
  .hero__social { margin-inline: 0; }
}

/* ---------- Biography: the head beside the prose, then one panel cut in two ---------- */
.about__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  row-gap: var(--space-2xl);
  align-items: start;
}
.about__head { grid-column: 1 / span 4; }
.about__prose { grid-column: 5 / -1; display: grid; gap: var(--space-md); color: var(--color-ink-2); }
/* One voice for all three paragraphs: one size, one colour, one measure. The lede leads by order alone. */
.about__prose p { max-width: 62ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }

.about__panels { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.about__cell { padding: var(--space-xl); }
.about__cell-head { margin-bottom: var(--space-sm); }

/* Research Interest: the short list, set large, rows parted by hairlines. */
.interests { margin: 0; padding: 0; list-style: none; }
.interests li { padding-block: var(--space-sm); font-size: var(--text-xl); line-height: 1.25; color: var(--color-ink); }
.interests li + li { border-top: var(--rule-hair) solid var(--color-rule-2); }

/* Education: the trail, rows on a 1px rule spine with square nodes (Rim: nothing round); the first node (MUN, the current MSc) in the orange accent. */
.trail { position: relative; margin: 0; padding: 0 0 0 var(--space-xl); list-style: none; }
.trail::before { content: ""; position: absolute; left: 5px; top: calc(var(--space-sm) + 0.7em); bottom: calc(var(--space-sm) + 0.7em); border-left: var(--rule-hair) solid var(--color-rule); }
.trail__row { position: relative; padding-block: var(--space-sm); font-size: var(--text-lg); line-height: 1.4; color: var(--color-ink-2); }
.trail__row + .trail__row { border-top: var(--rule-hair) solid var(--color-rule-2); }
.trail__row::before { content: ""; position: absolute; left: calc(var(--space-xl) * -1); top: calc(var(--space-sm) + 0.7em - 5.5px); width: 11px; height: 11px; border-radius: 0; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.trail__row:first-child { color: var(--color-ink); }
.trail__row:first-child::before { background: var(--color-accent); border-color: var(--color-accent); }

@media (max-width: 60rem) {
  .about__head, .about__prose { grid-column: 1 / -1; }
  .about__inner { row-gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  .about__panels { grid-template-columns: minmax(0, 1fr); }
  .about__cell { padding: var(--space-lg); }
  .interests li { font-size: var(--text-lg); }
  .trail__row { font-size: var(--text-md); }
}

/* ---------- Projects: the Index on the page's one band ---------- */
.projects__head { display: grid; gap: var(--space-xl); margin-bottom: var(--space-xl); }

/* One surface, 1px seams. Each cell draws its own seam so a filtered, half-empty last row reads as an empty cell, not a grey block. */
.project-grid { margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--color-paper-2); }
.project-grid > .project { outline: var(--rule-hair) solid var(--color-rule); }
.project { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); }

.project__shot { display: block; aspect-ratio: 16 / 10; margin-bottom: var(--space-xs); background: var(--color-paper-3); }
.project__shot picture { height: 100%; }
.project__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.project__shot:hover { outline-color: var(--color-muted); }
.project__shot:active { outline-color: var(--color-ink-2); }
/* The ring follows the frame's 10px corner (the global link ring is 2px) and appears instantly. */
.project__shot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-card); transition: none; }

.project__body { display: grid; gap: var(--space-2xs); }
.project__title { max-width: none; }
.project__desc { color: var(--color-ink-2); }
.project__cats { display: flex; flex-wrap: wrap; margin: var(--space-sm) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--color-muted); }
.project__cats li + li::before { content: ",\00a0"; }
.project__stack { font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--color-ink-2); }
.project__star { margin-top: auto; padding-top: var(--space-xs); min-height: 28px; }
/* Without the buttons script the star stays a plain link. */
.project__star .github-button { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 500; }

@media (max-width: 60rem) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: each project is a compact row, a square thumbnail beside the text, so the twelve fit in about half the scroll. Nothing is dropped. */
@media (max-width: 40rem) {
  .projects__head { gap: var(--space-lg); margin-bottom: var(--space-lg); }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  /* The thumbnail sits beside the title and description; categories, stack and star run the full width under them. */
  .project { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); align-items: start; padding: var(--space-md); }
  .project__body { display: contents; }
  .project__shot { grid-row: 1 / span 2; aspect-ratio: 1 / 1; margin-bottom: 0; }
  .project__title { grid-column: 2; font-size: var(--text-lg); line-height: 1.25; }
  .project__desc { grid-column: 2; }
  .project__cats, .project__stack, .project__star { grid-column: 1 / -1; }
  .project__cats { margin-top: var(--space-xs); }
  .project__star { margin-top: 0; padding-top: 0; }
}