/* Events (events/index.html) in the People style (14 Oct 2026): photo-led and warm, on paper. Loaded after
   cs-template.css and resources.css, which other pages share, so every rule is scoped to main.pg-events.
   Order: the hero with a large picture and its caption; Upcoming as three pictures with their words under them (no
   boxes), each in its own colour (the workshop REKA's orange, the Tinara webinar heuristik, the Lab's open R&D kinetik);
   On air and At the shows as two plain lists beside a large picture; Community and education, the list beside its
   picture; registration in REKA's orange tray, the form unchanged. Copy unchanged. */

/* ---------- People vocabulary: left titles, large pictures with captions, quiet words ---------- */
main.pg-events .blk.chap.pp-sec{padding-top:120px}
main.pg-events .pp-head{max-width:none;margin:0 0 48px;align-items:flex-start;text-align:left}
main.pg-events .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
main.pg-events .pp-fig{margin:0;min-width:0}
main.pg-events .pp-fig>.ph{width:100%;border-radius:28px}
main.pg-events .pp-cap{margin-top:14px;font:500 14px/20px var(--sans);color:var(--muted);text-wrap:pretty}

/* ---------- hero: the words on paper, a large picture beside them ---------- */
main.pg-events .ev-hero{padding-bottom:0}
main.pg-events .ev-hgrid{padding-top:72px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
main.pg-events .ev-hgrid p.p20{color:var(--ink)}
main.pg-events .ev-hgrid .ph{aspect-ratio:4/3}

/* ---------- upcoming: three pictures, the words under each, no boxes ---------- */
main.pg-events .ev-cards{margin:0;gap:48px 40px}
main.pg-events .ev-card{padding:0;gap:0;align-items:stretch;border:0;background:none;box-shadow:none;border-radius:0}
main.pg-events .ev-card .frame{margin:0 0 22px;border-radius:24px}
main.pg-events .ev-card .frame .ph{aspect-ratio:16/9;width:100%;border-radius:0}
main.pg-events .ev-card .meta{font:600 14px/20px var(--sans);color:var(--t-ink)}
main.pg-events .ev-card h3{margin-top:8px;font:600 26px/1.18 var(--sans);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
main.pg-events .ev-card p:not(.meta){margin:12px 0 24px;font-size:17px;line-height:26px;color:var(--ink)}
main.pg-events .ev-card .btn{align-self:flex-start;margin-top:auto}

/* ---------- on air and at the shows: a large picture beside two plain lists ---------- */
main.pg-events .ev-two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:center}
main.pg-events .ev-show .ph{aspect-ratio:4/5;--phb:#E9E6DF}
main.pg-events .ev-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
main.pg-events .ev-box{padding:0;gap:0;background:none;box-shadow:none;border-radius:0}
main.pg-events .ev-box .ev-h{font:600 36px/1.1 var(--sans);letter-spacing:-.025em;color:var(--ink)}
main.pg-events .ev-list{margin:24px 0 0;max-width:none}
main.pg-events .ev-list li{border:0!important;padding:0 0 0 22px}
main.pg-events .ev-list li+li{margin-top:22px}
main.pg-events .ev-list a{font-size:17px;line-height:25px}
main.pg-events .ev-list span{font-size:15px;line-height:22px}
main.pg-events .ev-list p{font-size:16px;line-height:24px;color:var(--ink)}
main.pg-events .ev-list li::before{content:"";position:absolute;left:0;top:9px;bottom:auto;width:8px;height:8px;border-radius:50%;background:var(--line-2,#C9C5BC)}
main.pg-events .ev-list li[data-tone]::before{background:var(--t);top:9px;bottom:auto}
main.pg-events .ev-list li[data-tone]:hover::before{top:9px;bottom:auto;transform:scale(1.4)}

/* ---------- community and education: the list beside its picture ---------- */
main.pg-events .ev-comm2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:center;background:none}
main.pg-events .ev-comm2>.pp-fig{order:2}
main.pg-events .ev-comm2 .ph{aspect-ratio:4/3}
main.pg-events .ev-comm2 .ev-list{margin-top:0}
main.pg-events .ev-comm2 .ev-list a{font-size:22px;line-height:1.3;letter-spacing:-.3px}
main.pg-events .ev-more{margin-top:32px}
main.pg-events .ev-more a{border-bottom-color:var(--t)}

/* ---------- register: REKA's tray, the copy beside the white form ---------- */
main.pg-events .ev-reg{border-radius:40px;padding:48px}
main.pg-events .ev-agenda li{border-top:0;padding:8px 0 8px 22px}
main.pg-events .ev-agenda li::before{top:17px}
main.pg-events .ev-reg .rkf{border-color:transparent;border-radius:20px}
main.pg-events .ev-reg .rf-done{border:0;border-radius:20px}

@media (max-width:1100px){
  main.pg-events .ev-lists{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:1000px){
  main.pg-events .ev-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:900px){
  main.pg-events .blk.chap.pp-sec{padding-top:72px}
  main.pg-events .pp-head{margin-bottom:28px}
  main.pg-events .chap-head h2{font-size:38px;line-height:1.08}
  main.pg-events .pp-fig>.ph{border-radius:20px}
  main.pg-events .pp-cap{margin-top:10px;font-size:13px;line-height:18px}
  main.pg-events .ev-hgrid{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:32px}
  main.pg-events .ev-two,main.pg-events .ev-comm2{grid-template-columns:minmax(0,1fr);gap:32px}
  main.pg-events .ev-show .ph{aspect-ratio:4/3}
  /* phones: the shows picture sits between the two lists, so neither runs on alone */
  main.pg-events .ev-two{display:flex;flex-direction:column}
  main.pg-events .ev-lists{display:contents}
  main.pg-events .ev-lists>.ev-box:first-child{order:-1}
  main.pg-events .ev-comm2>.pp-fig{order:2}
}
@media (max-width:760px){
  main.pg-events .ev-cards{grid-template-columns:minmax(0,1fr);gap:40px}
  main.pg-events .ev-card .frame{border-radius:20px;margin-bottom:16px}
  main.pg-events .ev-card .frame .ph{aspect-ratio:16/10}
  main.pg-events .ev-card h3{font-size:22px}
  main.pg-events .ev-card p:not(.meta){font-size:16px;line-height:24px;margin-bottom:18px}
  main.pg-events .ev-box .ev-h{font-size:28px}
  main.pg-events .ev-list a{font-size:16px;line-height:23px}
  main.pg-events .ev-comm2 .ev-list a{font-size:19px}
  main.pg-events .ev-reg{border-radius:28px;padding:24px}
  main.pg-events .ev-reg .rkf{padding:20px 16px}
}
@media (prefers-reduced-motion:reduce){main.pg-events .ev-list li[data-tone]:hover::before{transform:none}}