/* ElectroGlide only (body.case.eg): additions that case.css (shared with ROUTE / UOSON) doesn't carry.
   Key user interview (Leo 10/20, from his Figma spread "Key User Interview", GradSchool Application › frame 3):
   the two interview stills left, Phillip's four priorities right, each in his own words. Phones: the stills swipe. */

.eg-iv{max-width:1100px;margin:0 auto;padding:22px 22px clamp(40px,6vw,72px)}
.eg-iv .cs-h{margin-top:0}
.eg-iv__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.6vw,64px);align-items:center}
.eg-iv__photos{display:grid;gap:16px}
.eg-iv__photos figure{margin:0;border-radius:22px;overflow:hidden;background:var(--tile);box-shadow:var(--cs-shadow);aspect-ratio:5/4}
.eg-iv__photos img{display:block;width:100%;height:100%;object-fit:cover}

.eg-iv__lede{margin:0 0 30px;font-size:clamp(17px,1.9vw,19px);line-height:1.6;color:var(--ink)}
.eg-iv__lede span{display:block;margin-top:4px;font-size:14px;letter-spacing:.02em;color:var(--ink-2)}
.eg-iv__eyebrow{margin:0 0 6px;font:600 13px/1.5 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.eg-iv__list{list-style:none;margin:0;padding:0}
.eg-iv__list li{padding:20px 0;border-top:1px solid var(--line)}
.eg-iv__list li:first-child{border-top:0}
.eg-iv__list h4{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;font:700 clamp(21px,2.3vw,25px)/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.eg-iv__list h4 span{font-weight:700;color:var(--eg-blue,#005eae);font-variant-numeric:tabular-nums}
.eg-iv__list p{margin:0;font-size:clamp(16px,1.75vw,17.6px);line-height:1.6;font-style:italic;color:var(--ink-2)}
[data-theme="dark"] .eg{--eg-blue:#5aa8ec}

@media (max-width:900px){
  .eg-iv__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .eg-iv__photos{grid-template-columns:1fr 1fr;gap:12px}
  .eg-iv__body{max-width:640px;margin:0 auto;width:100%}
}
@media (max-width:640px){
  .eg-iv{padding-left:16px;padding-right:16px}
  /* the two stills side by side are too small on a phone: a row to swipe, the next one peeking in */
  .eg-iv__photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px;margin:0 -16px;padding:0 16px 4px;scroll-padding:0 16px}
  .eg-iv__photos::-webkit-scrollbar{display:none}
  .eg-iv__photos figure{flex:0 0 84%;scroll-snap-align:start;border-radius:16px}
  .eg-iv__lede{margin-bottom:22px}
  .eg-iv__list li{padding:16px 0}
}