/* ============================================================
   Amir Institute — css/about.css
   Page stylesheet for about.html. Loaded AFTER css/site.css,
   so anything here intentionally overrides the shared base.
   ============================================================ */
/* ═══ QUICK LINKS — the row a school site lives on ═══ */
.quick{position:relative;z-index:6;margin-top:-54px}
.quick .inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
.qk{display:flex;gap:15px;align-items:center;padding:26px 24px;border-right:1px solid var(--line);
  transition:.22s;background:#fff}
.qk:last-child{border-right:0}
.qk:hover{background:var(--cream)}
.qk:hover .qk-ic{background:var(--green-800);color:var(--gold-light);transform:translateY(-2px)}
.qk-ic{width:48px;height:48px;border-radius:14px;background:var(--green-100);color:var(--green-700);
  display:grid;place-items:center;flex:none;transition:.22s}
.qk-ic svg{width:24px;height:24px}
.qk b{display:block;font-size:1rem;color:var(--ink);line-height:1.25}
.qk span{display:block;font-size:.84rem;color:var(--muted);margin-top:3px;line-height:1.4}
@media (max-width:1040px){.quick{margin-top:-30px}.quick .inner{grid-template-columns:repeat(2,1fr)}
  .qk:nth-child(2){border-right:0}.qk:nth-child(1),.qk:nth-child(2){border-bottom:1px solid var(--line)}}
@media (max-width:620px){.quick .inner{grid-template-columns:1fr}
  .qk{border-right:0;border-bottom:1px solid var(--line)}.qk:last-child{border-bottom:0}}


/* ── inner-page heroes: the background photograph IS the image.
      A second floating photo on top of it just repeated the same scene. ── */
.phero-grid{grid-template-columns:minmax(0,1fr)}
.phero-copy{max-width:min(720px,60%)}
.phero .wrap{padding-top:clamp(70px,7.4vw,108px);padding-bottom:clamp(80px,8.4vw,120px);min-height:clamp(380px,34vw,520px);display:flex;flex-direction:column;justify-content:center}
.phero h1{max-width:17ch}
/* school + garden keep their seal - a brand mark, not a repeated photo */
.phero-grid.has-seal{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.phero-grid.has-seal .phero-copy{max-width:none}
@media (min-width:1500px){ .phero-copy{max-width:min(800px,56%)} }
@media (max-width:1040px){
  .phero-copy{max-width:none}
  .phero-grid.has-seal{grid-template-columns:minmax(0,1fr)}
}


/* card titles are <h3> so the heading order never skips a level;
   these keep the compact card look that <h4> used to give them */
.svc h3,.dot-card h3,.give h3,.person h3,.ev-body h3,.pt h3{
  font-weight:700;letter-spacing:-.005em;line-height:1.3}
.svc h3{font-size:1.06rem}.dot-card h3{font-size:1.04rem}
.give h3{font-size:1.02rem}.person h3{font-size:1.04rem}
.ev-body h3{font-size:1.08rem}.pt h3{font-size:1rem}


/* footer column titles and small card titles are <h3> for correct heading
   order; these keep the small-caps label look they had as <h4> */
.ftr h3{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:18px;font-weight:700}
.hours-card h3{color:#fff;font-size:1.02rem;margin-bottom:16px;font-weight:700;letter-spacing:0}
.tr h3{font-size:1.06rem;margin-bottom:7px;font-weight:700;letter-spacing:-.005em}

/* ── photographs in the team cards ──
   Headshots were cut off an orange studio wall and placed on the same sand
   background, so the row reads as one set rather than five snapshots. */
.pav-img{padding:0;overflow:hidden;background:var(--cream);border:1px solid var(--line);
  width:clamp(92px,9vw,112px);height:clamp(92px,9vw,112px)}
.pav-img picture,.pav-img img{display:block;width:100%;height:100%;object-fit:cover;
  border-radius:inherit}
.person h3 .creds{font-size:.82rem;font-weight:500;color:var(--muted);
  letter-spacing:0;white-space:nowrap}
.pquote{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  font-size:.94rem;line-height:1.62;font-style:italic;color:var(--ink)}
.pquote cite{display:block;margin-top:9px;font-style:normal;font-size:.76rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark)}
.prole.todo,p.todo{color:var(--gold-dark);font-weight:700}
.pillar-key{font-size:.82rem;color:var(--muted);margin:14px auto 0;max-width:62ch;
  line-height:1.5}

/* ════════════════ TEAM ════════════════
   A featured panel beside a roster of faces. Without JavaScript the
   .tx-ready class is never added, so every panel stays visible and the
   section reads as a plain stacked list — the content is never trapped
   behind an interaction that did not load. */
.teamx{background:var(--cream)}
.tx-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,44px);align-items:start;max-width:1280px;margin:0 auto}

/* ── the featured card ── */
.tx-stage{position:relative}
.tx-panel{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(20px,2.4vw,32px);align-items:start;
  background:var(--green-900);color:rgba(255,255,255,.88);
  border-radius:var(--r-xl);overflow:hidden;
  padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow-lg);
  position:relative;isolation:isolate}
.tx-panel::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(620px 380px at 88% 0,rgba(201,151,46,.22),transparent 64%)}
.tx-panel[hidden]{display:none}
/* every panel visible when the script has not run */
.teamx:not(.tx-ready) .tx-panel{margin-bottom:clamp(16px,2vw,24px)}
.teamx:not(.tx-ready) .tx-panel[hidden]{display:grid}
.teamx:not(.tx-ready) .tx-roster{display:none}

.tx-portrait{border-radius:var(--r-lg);overflow:hidden;background:var(--sand);
  border:3px solid rgba(201,151,46,.55);aspect-ratio:1;position:sticky;top:0}
.tx-portrait img{width:100%;height:100%;object-fit:cover;display:block}

.tx-detail{min-width:0}
.tx-name{color:#fff;font-size:clamp(1.24rem,2.1vw,1.62rem);line-height:1.2;margin-bottom:6px}
.tx-creds{display:block;font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:var(--gold-light);margin-top:5px}
.tx-role{font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-light);margin:0 0 16px}
.tx-bio p{font-size:.95rem;line-height:1.68;margin-bottom:.9em;color:rgba(255,255,255,.86)}
.tx-bio em{color:#fff}
.tx-quote{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);
  font-size:.96rem;line-height:1.6;font-style:italic;color:#fff}
.tx-quote cite{display:block;margin-top:9px;font-style:normal;font-size:.72rem;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light)}
.tx-panel:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ── the roster of faces ── */
.tx-faces{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px)}
.tx-face{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;text-align:center;color:inherit}
/* height:auto matters — the <img> carries height="640", which the UA maps
   to an explicit height, and aspect-ratio is ignored while both dimensions
   are set. Without this the thumbnails render 640px tall. */
.tx-face img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:var(--r);background:var(--sand);
  border:3px solid transparent;transition:border-color .2s,transform .2s,box-shadow .2s}
.tx-face-name{display:block;margin-top:9px;font-size:.8rem;line-height:1.35;
  font-weight:700;color:var(--body)}
.tx-face:hover img{transform:translateY(-3px);box-shadow:var(--shadow)}
.tx-face:focus-visible img{outline:3px solid var(--gold);outline-offset:3px}
.tx-face[aria-selected="true"] img{border-color:var(--gold);
  box-shadow:0 10px 26px rgba(7,56,45,.22)}
.tx-face[aria-selected="true"] .tx-face-name{color:var(--green-800)}

.tx-arrows{display:flex;gap:10px;justify-content:center;margin-top:clamp(16px,2vw,22px)}
.tx-arrow{width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--green-800);
  display:grid;place-items:center;transition:.18s}
.tx-arrow svg{width:19px;height:19px}
.tx-arrow:hover{background:var(--green-800);color:#fff;border-color:var(--green-800)}
.tx-arrow:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .tx-face img,.tx-arrow{transition:none}
  .tx-face:hover img{transform:none}
}

/* ── narrow screens: the panel sits above the faces, and the script
      scrolls it back into view after a tap so the detail is what you
      are looking at ── */
@media (max-width:980px){
  .tx-layout{grid-template-columns:1fr}
  .tx-panel{grid-template-columns:1fr}
  .tx-portrait{max-width:230px;position:static}
  .tx-faces{grid-template-columns:repeat(5,1fr)}
  .tx-face-name{font-size:.7rem}
}
@media (max-width:560px){
  .tx-faces{grid-template-columns:repeat(3,1fr)}
  .tx-portrait{max-width:170px;margin:0 auto}
  .tx-detail{text-align:left}
}