/* ============================================================
   HumanSide — About the creator page components
   Built on humanside.css + humanside-sections.css + educators tokens.
   ============================================================ */

:root{ --hl: var(--orange-deep); }

/* ---------------- HERO PORTRAIT ---------------- */
.about-hero .edu-hero-grid{ align-items:center; }
.about-hero h1 .serif{ color:var(--hl); }
.about-portrait-wrap{
  position:relative; justify-self:center; align-self:center;
  display:flex; align-items:center; justify-content:center;
}
.about-portrait{
  width:min(40vw, 360px); aspect-ratio:1; border-radius:50%;
  object-fit:cover; object-position:center top;
  box-shadow:0 0 0 10px var(--orange-soft), 0 40px 70px -34px rgba(22,21,46,.55);
  animation:portraitFloat 7s ease-in-out infinite;
}
@keyframes portraitFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.about-portrait-wrap .blob{
  position:absolute; inset:-12% -8% auto auto; width:62%; aspect-ratio:1; z-index:-1;
  border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--blue-tint), #fff0); opacity:.7;
}
.about-portrait-wrap .bubble{
  position:absolute; left:-6%; top:8%; white-space:nowrap;
  box-shadow:0 14px 30px -14px rgba(22,21,46,.4);
}
.body-nobubble .about-portrait-wrap .bubble{ display:none; }
@media (max-width:880px){
  .about-hero .edu-figure, .about-hero .about-portrait-wrap{ display:flex; }
  .about-portrait{ width:min(60vw, 260px); }
}
@media (max-width:560px){ .about-portrait-wrap .bubble{ left:2%; } }

/* ---------------- WHO I AM ---------------- */
.who-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.who-copy p{ font-size:1.06rem; color:var(--ink-2); line-height:1.7; max-width:56ch; }
.who-copy p + p{ margin-top:1.1rem; }
.who-copy em{ font-family:var(--font-serif); font-style:italic; color:var(--hl); }
.who-tags{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.6rem; }

.cred-card{
  background:var(--white); border-radius:var(--r-lg); padding:clamp(1.8rem,3vw,2.4rem);
  box-shadow:0 30px 60px -42px rgba(22,21,46,.45); position:sticky; top:6rem;
}
.cred-card .cc-eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-deep); }
.cred-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1rem; margin:1.3rem 0 1.6rem; }
.cred-stats .s .n{ font-size:2rem; font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--ink); }
.cred-stats .s .n .serif{ color:var(--hl); }
.cred-stats .s .l{ font-size:.82rem; color:var(--ink-soft); margin-top:.25rem; line-height:1.35; }
.cred-divider{ height:1px; background:rgba(22,21,46,.1); margin:0 0 1.3rem; }
.cred-awards{ display:flex; flex-direction:column; gap:.7rem; }
.cred-awards .aw{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; color:var(--ink-2); line-height:1.4; }
.cred-awards .aw .mk{ flex-shrink:0; width:20px; height:20px; margin-top:1px; border-radius:50%; background:var(--orange-soft); color:var(--orange-deep); display:flex; align-items:center; justify-content:center; }
.cred-awards .aw .mk svg{ width:12px; height:12px; }
.cred-card .cmbe{ height:52px; width:auto; margin-top:1.5rem; }
@media (max-width:880px){ .who-grid{ grid-template-columns:1fr; } .cred-card{ position:static; } }

/* ---------------- WHAT GAMES TAUGHT ME ---------------- */
.games-intro{ text-align:center; max-width:54ch; margin:0 auto 3rem; }

/* anchor feature (SimCity) */
.game-feature{
  position:relative; border-radius:var(--r-xl); overflow:hidden; isolation:isolate;
  background:linear-gradient(140deg, #1a1d3a 0%, #232a5e 55%, #2a3f72 100%);
  display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; margin-bottom:1.4rem;
}
.game-feature .gf-copy{ padding:clamp(2rem,4vw,3.4rem); display:flex; flex-direction:column; justify-content:center; }
.game-feature .gf-kicker{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:1.5rem; color:var(--orange); line-height:1; }
.game-feature .gf-lesson{ font-size:.82rem; color:rgba(248,245,236,.55); margin:.5rem 0 1.1rem; letter-spacing:.01em; }
.game-feature .gf-copy p{ color:rgba(248,245,236,.86); font-size:1.04rem; line-height:1.7; }
.game-feature .gf-img{ position:relative; min-height:340px; overflow:hidden; }
.game-feature .gf-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% center; }
@media (max-width:820px){
  .game-feature{ grid-template-columns:1fr; }
  .game-feature .gf-img{ order:-1; min-height:240px; }
}

/* game card grid */
.games-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.game-card{
  background:var(--white); border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 1px 0 rgba(22,21,46,.05);
  transition:transform .4s var(--ease-elastic), box-shadow .4s;
  display:flex; flex-direction:column;
}
.game-card:hover{ transform:translateY(-6px); box-shadow:0 28px 54px -30px rgba(22,21,46,.42); }
.game-card .gc-media{ height:170px; overflow:hidden; position:relative; }
.game-card .gc-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out); }
.game-card:hover .gc-media img{ transform:scale(1.04); }
.game-card .gc-media.contain{ background:#0d1a2e; display:flex; align-items:center; justify-content:center; padding:1.4rem; }
.game-card .gc-media.contain img{ width:auto; max-height:110px; object-fit:contain; }
.game-card .gc-body{ padding:1.6rem 1.7rem 1.8rem; border-top:4px solid var(--blue); flex:1; }
.game-card:nth-child(2) .gc-body{ border-top-color:var(--orange); }
.game-card:nth-child(3) .gc-body{ border-top-color:var(--plum); }
.game-card:nth-child(4) .gc-body{ border-top-color:var(--green); }
.game-card .gc-title{ font-size:1.2rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.game-card .gc-lesson{ font-family:var(--font-serif); font-style:italic; font-size:.92rem; color:var(--ink-soft); margin:.35rem 0 .8rem; }
.game-card .gc-body p{ font-size:.95rem; color:var(--ink-2); line-height:1.6; }
@media (max-width:760px){ .games-grid{ grid-template-columns:1fr; } }

/* steam profile card */
.steam-card{
  margin-top:1.4rem; background:#1b2838; border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.7);
}
.steam-card img{ width:100%; height:auto; display:block; max-height:440px; object-fit:cover; object-position:center top; }
.steam-card .steam-cap{
  display:flex; align-items:center; gap:.8rem; padding:1rem 1.3rem;
  font-size:.9rem; color:rgba(248,245,236,.7);
}
.steam-card .steam-cap .sc-ic{ flex-shrink:0; width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:var(--orange); }
.steam-card .steam-cap .sc-ic svg{ width:17px; height:17px; }
.steam-card .steam-cap b{ color:var(--cream); font-weight:600; }

/* ---------------- WHY HUMANSIDE (narrative band) ---------------- */
.why-hs{ position:relative; border-radius:var(--r-xl); overflow:hidden; padding:clamp(2.6rem,6vw,4.5rem); }
.why-hs.theme-cream{ background:var(--cream-deep); }
.why-hs.theme-ink{ background:var(--ink); color:var(--cream); }
.why-hs.theme-blue{ background:var(--blue); color:var(--cream); }
.why-hs .wh-inner{ position:relative; z-index:2; max-width:64ch; margin:0 auto; }
.why-hs .eyebrow{ justify-content:flex-start; }
.why-hs.theme-ink .eyebrow, .why-hs.theme-blue .eyebrow{ color:var(--orange); }
.why-hs h2{ margin:.8rem 0 1.4rem; }
.why-hs.theme-ink h2, .why-hs.theme-blue h2{ color:var(--cream); }
.why-hs h2 .serif{ color:var(--hl); }
.why-hs.theme-ink h2 .serif, .why-hs.theme-blue h2 .serif{ color:var(--orange); }
.why-hs p{ font-size:1.08rem; line-height:1.8; color:var(--ink-2); }
.why-hs.theme-ink p, .why-hs.theme-blue p{ color:rgba(248,245,236,.85); }
.why-hs p + p{ margin-top:1.2rem; }
.why-hs .lead-line{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.45; color:var(--ink); }
.why-hs.theme-ink .lead-line, .why-hs.theme-blue .lead-line{ color:var(--cream); }
.why-hs .blob-1{ background:radial-gradient(circle at 30% 30%, var(--blue), #fff0); opacity:.22; top:-12%; left:-6%; }
.why-hs .blob-2{ background:radial-gradient(circle at 30% 30%, var(--orange), #fff0); opacity:.2; bottom:-20%; right:-4%; top:auto; }

/* ---------------- TEACHING PHILOSOPHY ---------------- */
.phil-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.phil-card{
  position:relative; background:var(--white); border-radius:var(--r-md); padding:1.9rem 1.7rem 2rem;
  overflow:hidden; box-shadow:0 1px 0 rgba(22,21,46,.05);
  transition:transform .4s var(--ease-elastic), box-shadow .4s;
}
.phil-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(22,21,46,.4); }
.phil-card .swatch{ position:absolute; right:-26px; top:-26px; width:84px; height:84px; border-radius:50%; background:var(--blue-soft); opacity:.6; }
.phil-card:nth-child(2) .swatch{ background:var(--orange-soft); }
.phil-card:nth-child(3) .swatch{ background:var(--green-soft); }
.phil-card .pn{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:2.1rem; line-height:1; color:var(--blue); position:relative; z-index:1; }
.phil-card:nth-child(2) .pn{ color:var(--orange-deep); }
.phil-card:nth-child(3) .pn{ color:var(--green); }
.phil-card h4{ font-size:1.22rem; font-weight:700; letter-spacing:-.02em; margin:.7rem 0 .5rem; position:relative; z-index:1; }
.phil-card p{ font-size:.95rem; color:var(--ink-soft); line-height:1.6; position:relative; z-index:1; }
.phil-card em{ font-family:var(--font-serif); font-style:italic; color:var(--ink-2); }
@media (max-width:860px){ .phil-grid{ grid-template-columns:1fr; } }

.phil-quote{
  margin-top:1.4rem; background:var(--blue-soft); border-radius:var(--r-md);
  padding:clamp(1.8rem,4vw,2.6rem) clamp(1.8rem,5vw,3.4rem);
}
.phil-quote p{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.55; color:var(--ink); max-width:68ch; }
.phil-quote p::before{ content:"\201C"; color:var(--hl); }
.phil-quote p::after{ content:"\201D"; color:var(--hl); }
.phil-quote .by{ font-family:var(--font-display); font-style:normal; font-size:.9rem; font-weight:600; color:var(--ink-soft); margin-top:1rem; }

/* ---------------- CONNECT ---------------- */
.connect-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.connect-card{
  display:flex; flex-direction:column; gap:.5rem; padding:1.5rem 1.4rem;
  background:var(--white); border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1.5px rgba(22,21,46,.08);
  transition:transform .35s var(--ease-elastic), box-shadow .35s;
}
.connect-card:hover{ transform:translateY(-5px); box-shadow:inset 0 0 0 1.5px var(--blue-tint), 0 22px 44px -28px rgba(22,21,46,.4); }
.connect-card .cn-ic{ width:42px; height:42px; border-radius:12px; background:var(--blue-soft); color:var(--blue-press); display:flex; align-items:center; justify-content:center; }
.connect-card:nth-child(2) .cn-ic{ background:var(--orange-soft); color:var(--orange-deep); }
.connect-card:nth-child(3) .cn-ic{ background:var(--green-soft); color:var(--green); }
.connect-card:nth-child(4) .cn-ic{ background:var(--plum-soft); color:var(--plum); }
.connect-card .cn-ic svg{ width:22px; height:22px; }
.connect-card .cn-name{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; margin-top:.4rem; }
.connect-card .cn-sub{ font-size:.86rem; color:var(--ink-soft); }
.connect-card .cn-go{ font-size:.82rem; font-weight:600; color:var(--blue-deep); margin-top:.3rem; display:inline-flex; align-items:center; gap:.3rem; }
@media (max-width:860px){ .connect-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .connect-grid{ grid-template-columns:1fr; } }