/* ===================================================================
   Ayan Siddiqui — Pixel-Art / Neo-Brutalism Portfolio
   Layout = exact masonry of the reference poster, rebuilt row by row.
   =================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Fonts — retro Pixelify headings, clean Space Grotesk everywhere else */
  --font-pixel: 'Space Grotesk', sans-serif;     /* tags / labels — readable (was Pixelify) */
  --font-display: 'Pixelify Sans', sans-serif;   /* big headings + name (retro character)   */
  --font-body: 'Space Grotesk', sans-serif;      /* paragraphs / bullets — readable         */

  /* Core palette (sampled from the reference) */
  --bg: #131313;          /* dark page bg — matches landing page theme */
  --grid-line: rgba(255, 255, 255, 0.1);   /* subtle grid, same as landing */
  --ink: #111111;         /* near-black for borders & shadows   */
  --line-soft: #3a3a3a;   /* subtle border for dark-on-dark blocks */
  --green: #87dc4d;       /* lime card                          */
  --green-deep: #6fc23a;
  --peach: #eac79e;       /* tan / orange card                  */
  --paper: #fff6e9;       /* speech bubble cream                */
  --yellow: #f5c01f;      /* accent circle / rings              */
  --edu: #f5d564;         /* soft yellow — Education card accent */
  --pink: #ff7fc4;
  --blue-dot: #2e8fff;
  --red-dot: #ff5a4d;

  --radius: 18px;
  --shadow: 6px 6px 0 0 var(--ink);   /* heavy brutalist drop-shadow */
  --border: 3px solid var(--ink);
}

/* ---------- 2. Reset & base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
  /* graph-paper grid: two thin line gradients over the dark background */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 30px 30px;
  min-height: 100vh;
  padding: 26px 16px;
  -webkit-font-smoothing: antialiased;   /* smoother glyph edges = easier reading */
}

/* ---------- 3. Poster container ---------- */
.poster {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding-top: 50px;   /* headroom so the dancing GIF on the name plate isn't clipped */
  display: flex;
  flex-direction: column;
  gap: 16px;   /* tightened so the new Education row fits without growing taller */
}

/* ---------- 4. Shared card shell ---------- */
.card {
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
}

/* ===================================================================
   5. HEADER — bento grid
   avatar (tall, left) spans both rows; name-plate (wide) sits top-right;
   the email + Instagram pills fill the bottom-right. Blocks tile cleanly
   with one consistent gap.
   =================================================================== */
.header {
  display: grid;
  grid-template-columns: 260px minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 14px;
  align-items: stretch;
}

/* ---- Avatar: FULL, uncropped photo — the image sets its own height ---- */
.avatar-frame {
  grid-column: 1;
  grid-row: 1 / 3;          /* tall block down the left side */
  overflow: hidden;
  padding: 0;
  background: #fff;
}
.avatar-photo {
  display: block;
  width: 100%;
  height: auto;             /* natural aspect ratio — never cropped/distorted */
  image-rendering: pixelated;
}

/* ---- Name / Title — standalone black block, detached from the photo ---- */
.name-plate {
  grid-column: 2 / -1;
  grid-row: 1;
  position: relative;               /* anchor for the dancing GIF */
  background: var(--ink);
  border-color: var(--line-soft);   /* defines the dark block on dark bg */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 22px 26px;
}

/* dancing character standing on the top edge of the name plate */
.name-dancer {
  position: absolute;
  bottom: 100%;                     /* rests its feet on the plate's top edge */
  right: 18px;
  width: clamp(50px, 6.5vw, 66px);
  height: auto;
  margin-bottom: -4px;              /* seat the feet snugly on the edge */
  z-index: 10;
  pointer-events: none;
  image-rendering: pixelated;
}
.name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4.6vw, 44px);
  line-height: 0.96;
  color: #fff;
  letter-spacing: 0.5px;
}
.title-badge {
  align-self: flex-start;
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #2c2c2c;
  border: 2px solid #555;
  border-radius: 6px;
  padding: 7px 11px;
}

/* ---- Contact pills (email = white variant, IG = black) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 12px 14px;
  text-decoration: none;
  box-shadow: 3px 3px 0 0 var(--ink);
}
/* white email pill: solid white bg, black text, black pixel border */
.pill-light { background: #fff; color: var(--ink); }

/* tile the two pills along the bottom-right, each filling its cell */
.linkedin-pill { grid-column: 2; grid-row: 2; }
.ig-pill       { grid-column: 3; grid-row: 2; border-color: var(--line-soft); }  /* dark pill on dark bg */
.linkedin-pill, .ig-pill { width: 100%; }
.dot-yellow { background: var(--yellow); }

/* ===================================================================
   6. WHY  |  SKILLS + PROJECTS
   =================================================================== */
.duo {
  display: grid;
  grid-template-columns: 1fr 1.08fr;   /* right card slightly wider */
  gap: 20px;
  align-items: stretch;
}

/* big pixel heading used across cards */
.display-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 0.95;
  letter-spacing: 1px;
}

/* ---- Why Ayan? ---- */
.why-card {
  background: var(--peach);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.why-body { display: flex; flex-direction: column; gap: 12px; }
.speech {
  background: var(--paper);
  border: var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 20px;
  line-height: 1.15;
}
/* secondary call-to-action note — distinct accent + smaller, sits under the bubble */
.speech-cta {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--blue-dot);
  padding: 0 4px;
}

/* ---- Skills + Projects ---- */
.skills-card {
  background: var(--green);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kicker {
  font-family: var(--font-pixel);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.projects-h { margin-top: 6px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 9px; }

/* black pill tag (skills / certs) */
.tag {
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 9px 13px;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.project-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.project-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; line-height: 1.1;
}

/* ===================================================================
   7. MY EXPERIENCE
   =================================================================== */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 6vw, 54px);
  letter-spacing: 2px;
  color: #fff;
  /* black pixel outline so the white reads on blue */
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink),
    0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    3px 3px 0 var(--ink), -3px -3px 0 var(--ink),
    5px 5px 0 var(--ink);
  margin: 6px 0;
}

.exp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* two experience cards */
  gap: 20px;
}
.exp-card {
  background: var(--peach);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.exp-badge {
  width: 52px; height: 52px;
  border: var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.badge-yellow { background: var(--yellow); }
.badge-green  { background: var(--green); }
.badge-dark   { background: var(--ink); }

.exp-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
}
.exp-company {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: #5a4a32;
}
.exp-duration {
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border-radius: 6px;
  padding: 6px 11px;
  margin: 4px 0 2px;
}
.exp-list {
  list-style: none;
  text-align: left;
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
}
.exp-list li {
  position: relative;
  padding-left: 18px;
  font-size: 17px;
  line-height: 1.15;
}
/* little pixel bullet dot */
.exp-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 9px; height: 9px;
  background: var(--blue-dot);
  border: 1.5px solid var(--ink);
}

/* ===================================================================
   7b. PROJECTS — bento grid (full-width feature card + two below)
   =================================================================== */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
/* the feature card spans the whole top row as a wide rectangle */
.proj-feature { grid-column: 1 / -1; }

.proj-card {
  background: var(--peach);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* alternate the lower cards' colours for that mixed bento look */
.proj-grid .proj-card:nth-child(2) { background: var(--green); }
.proj-grid .proj-card:nth-child(3) { background: var(--edu); }

.proj-head { display: flex; align-items: center; gap: 10px; }
.ico-proj-lg {
  width: 26px; height: 26px;
  border: var(--border);
  border-radius: 6px;
  background: var(--ink);
  flex: 0 0 auto;
}
.proj-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.04;
}
.proj-desc { font-size: 18px; line-height: 1.18; }
.proj-row { display: flex; flex-direction: column; gap: 7px; }
.proj-text { font-size: 17px; line-height: 1.18; }

/* coloured label chip that visually emphasises Key Tech / Impact / Focus */
.proj-label {
  align-self: flex-start;
  font-family: var(--font-pixel);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 5px 10px;
  box-shadow: 2px 2px 0 0 var(--ink);
}
.label-tech   { background: var(--blue-dot); }
.label-impact { background: #ff7a4d; }
.label-focus  { background: #a87ff0; }

/* tech / focus badges */
.chip-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 12px;
}

/* feature card uses a two-column body so the wide card breathes */
.feature-body {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
}
.feature-main { display: flex; flex-direction: column; gap: 12px; }
.feature-side { display: flex; flex-direction: column; gap: 8px; }

/* ===================================================================
   8. CERTIFICATIONS | ACHIEVEMENTS
   =================================================================== */
.bottom {
  display: grid;
  /* three balanced columns: certifications | education | achievements.
     minmax(0,…) lets columns shrink below content width so they never
     overflow the poster — content wraps instead. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
/* the three bottom cards are narrower, so scale their headings to fit
   (all three stay identical for a consistent hierarchy) */
.bottom .display-h { font-size: clamp(18px, 2.3vw, 23px); line-height: 1; }
.bottom .ico-big { width: 24px; height: 24px; }
.certs-card,
.achieve-card {
  background: var(--green);
  padding: 20px;
}

/* ---- Education card (yellow accent, same hierarchy as siblings) ---- */
.edu-card {
  background: var(--edu);
  padding: 20px;
}
.edu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.edu-item { display: flex; gap: 10px; align-items: flex-start; }
.edu-text { display: flex; flex-direction: column; gap: 3px; }
.edu-degree {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.05;
}
.edu-inst {
  font-size: 18px;
  line-height: 1.1;
  color: #5a4a1f;
}
.edu-time {
  align-self: flex-start;
  margin-top: 4px;
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border-radius: 5px;
  padding: 5px 10px;
}

/* ---- Certifications list: clickable black pills, org in accent ---- */
.cert-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cert-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 9px 11px;
  text-decoration: none;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.35);
}
.cert-name {
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}
/* issuing organisation — same orange accent used for Impact / Focus Areas */
.cert-org {
  font-family: var(--font-pixel);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #ff7a4d;
}

/* ---- Achievements: clean pixel-bulleted list ---- */
.achieve-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.achieve-list li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.18;
  color: var(--ink);
}
.achieve-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 9px; height: 9px;
  background: var(--ink);
  border: 1.5px solid var(--ink);
}

/* ===================================================================
   9. Buttons + pressed interaction
   =================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: 11px;
  text-decoration: none;
  border: var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.btn-light { background: #fff; color: var(--ink); }
.btn .arrow { font-size: 14px; }

/* Shared "push down" feedback for anything with .press */
.press { transition: transform 0.05s ease, box-shadow 0.05s ease; }
.press:hover { transform: translate(2px, 2px); }
.press:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 0 var(--ink) !important;
}
.btn.press:active,
.mini-card.press:active { box-shadow: 1px 1px 0 0 var(--ink) !important; }

/* ===================================================================
   10. Placeholder icons (explicit border + bg so layout is readable)
   =================================================================== */
.ico {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fff;
  flex: 0 0 auto;
}
.ico-mail     { background: #ffd84d; }
.ico-download { background: #fff; }
.ico-proj     { background: var(--ink); }
.ico-edu      { width: 16px; height: 16px; background: var(--ink); margin-top: 2px; }
.ico-badge    { width: 22px; height: 22px; border-color: #fff; background: #fff; }
.badge-dark .ico-badge { background: var(--yellow); }
.ico-big      { width: 30px; height: 30px; border-radius: 6px; background: #fff; }

/* tiny round dots used inside contact pills */
.ico-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--yellow); flex: 0 0 auto;
}
.dot-red  { background: var(--red-dot); }
.dot-pink { background: var(--pink); }
.dot-blue { background: var(--blue-dot); }

/* ===================================================================
   11. Responsive — collapse the masonry on small screens
   =================================================================== */
@media (max-width: 720px) {
  /* header collapses to a single stacked column: photo, name, pills */
  .header { grid-template-columns: 1fr; grid-template-rows: none; }
  .avatar-frame { grid-column: 1; grid-row: auto; width: min(300px, 80vw); margin: 0 auto; }
  .name-plate { grid-column: 1; grid-row: auto; }
  .linkedin-pill, .ig-pill { grid-column: 1; grid-row: auto; }

  .duo,
  .bottom { grid-template-columns: 1fr; }
  .exp-grid { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  .feature-body { grid-template-columns: 1fr; }

  /* keep the dancer compact on the stacked header */
  .name-dancer { width: 46px; right: 12px; }
}

@media (max-width: 460px) {
  .header-top { grid-template-columns: 1fr; }
}