/* Internships (careers/internships/index.html) in the People style (14 Oct 2026): photo-led and warm, on paper.
   Loaded after cs-template.css and resources.css (shared with other pages), so every rule is scoped to main.pg-intern.
   Order: the hero with a large picture and its caption; why intern, a large picture beside an intern's own words set
   large, the other five reasons as words on paper; who it is for and the requirements as two plain lists beside a
   portrait picture; the application in REKA's orange tray (as Careers); Keep exploring, unchanged. Copy unchanged. */

/* ---------- People vocabulary: left titles, large pictures with captions, quiet words ---------- */
main.pg-intern .blk.chap.pp-sec{padding-top:120px}
main.pg-intern .pp-head{max-width:none;margin:0 0 48px;text-align:left;align-items:flex-start}
main.pg-intern .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
main.pg-intern .pp-head h2{text-align:left;max-width:18ch}
main.pg-intern .pp-fig{margin:0;min-width:0}
main.pg-intern .pp-fig>.ph{width:100%;border-radius:28px}
main.pg-intern .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-intern .cp-hero{padding:72px 0 0}
main.pg-intern .cp-hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
main.pg-intern .cp-card{margin:0;padding:0;background:none;border-radius:0;align-items:flex-start;text-align:left}
main.pg-intern .cp-card h1{font-size:clamp(42px,4.6vw,64px);line-height:1.04}
main.pg-intern .cp-card p.p20{color:var(--ink)}
main.pg-intern .cp-card small{max-width:420px}
main.pg-intern .cp-hgrid .ph{aspect-ratio:3/2}

/* ---------- why: a large picture beside an intern's own words, then the reasons as words ---------- */
main.pg-intern .cp-why{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px 72px;align-items:center}
main.pg-intern .cp-why .ph{aspect-ratio:3/2}
main.pg-intern .cp-said .tt{font:600 15px/1.3 var(--sans);letter-spacing:.01em;color:var(--brand-text)}
main.pg-intern .cp-said blockquote{margin:16px 0 0}
main.pg-intern .cp-said blockquote p{font:500 clamp(28px,3vw,42px)/1.22 var(--sans);letter-spacing:-.025em;color:var(--ink);text-indent:-.42em;text-wrap:pretty}
main.pg-intern .cp-said footer{margin-top:20px;font:600 16px/1.4 var(--sans);color:var(--ink)}
main.pg-intern .cp-cards{grid-column:1/-1;list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 40px}
main.pg-intern .cp-cards .card{padding:0;gap:8px;background:none;box-shadow:none;border-radius:0}
main.pg-intern .cp-cards .tt{font:600 20px/1.3 var(--sans);letter-spacing:-.3px;color:var(--brand-text)}
main.pg-intern .cp-cards p{font-size:16px;line-height:24px;color:var(--ink)}

/* ---------- who it is for and requirements: two plain lists beside a portrait picture ---------- */
main.pg-intern .cp-req{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px 72px;align-items:center}
main.pg-intern .cp-req>.pp-fig{order:2}
main.pg-intern .cp-req .ph{aspect-ratio:3/4}
main.pg-intern .cp-two{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
main.pg-intern .cp-l{border:0;padding:0;gap:0;background:none;box-shadow:none;border-radius:0}
main.pg-intern .cp-l .tt{font:600 32px/1.1 var(--sans);letter-spacing:-.025em;color:var(--brand-text)}
main.pg-intern .cp-l ul{margin-top:20px;padding-left:20px;gap:12px}
main.pg-intern .cp-l li{font-size:17px;line-height:26px;color:var(--ink)}
main.pg-intern .cp-l li::marker{color:var(--brand)}
main.pg-intern .cp-l a{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}

/* ---------- apply: REKA's tray, the heading and a picture beside the white form (as Careers) ---------- */
main.pg-intern .cp-ap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:32px 48px;align-items:start}
main.pg-intern .cp-aphd h2{font:600 44px/1.08 var(--sans);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
main.pg-intern .cp-aphd .ph{margin-top:28px;width:100%;aspect-ratio:3/4;border-radius:20px}
main.pg-intern .cp-ap .apwrap{max-width:none;margin:0}
main.pg-intern .cp-ap .rkf{border-color:transparent;border-radius:20px}
main.pg-intern .cp-ap .rf-done{margin:0;padding:32px;border-radius:20px;background:#fff}
main.pg-intern .cp-ap .rf-done h3{margin-top:0}
main.pg-intern .cp-aboutline{margin:24px auto 0;padding:0;border:0;text-align:center;max-width:none}

@media (max-width:1100px){
  main.pg-intern .cp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  main.pg-intern .cp-ap{grid-template-columns:minmax(0,1fr)}
  /* narrow screens: the application photo follows the form, so pictures split the long runs */
  main.pg-intern .cp-aphd{display:contents}
  main.pg-intern .cp-aphd h2{order:0}
  main.pg-intern .cp-ap .apwrap{order:1}
  main.pg-intern .cp-aphd .ph{order:2;margin-top:0;aspect-ratio:16/9}
}
@media (max-width:900px){
  main.pg-intern .blk.chap.pp-sec{padding-top:72px}
  main.pg-intern .pp-head{margin-bottom:28px}
  main.pg-intern .chap-head h2{font-size:38px;line-height:1.08}
  main.pg-intern .pp-fig>.ph{border-radius:20px}
  main.pg-intern .pp-cap{margin-top:10px;font-size:13px;line-height:18px}
  main.pg-intern .cp-hero{padding-top:32px}
  main.pg-intern .cp-hgrid,main.pg-intern .cp-why,main.pg-intern .cp-req{grid-template-columns:minmax(0,1fr);gap:28px}
  main.pg-intern .cp-said blockquote p{font-size:26px;line-height:1.25}
  main.pg-intern .cp-said footer{margin-top:14px;font-size:15px}
  main.pg-intern .cp-cards{margin-top:8px}
  main.pg-intern .cp-req .ph{aspect-ratio:4/3}
  main.pg-intern .cp-two{gap:32px}
  main.pg-intern .cp-l .tt{font-size:26px}
  main.pg-intern .cp-l li{font-size:16px;line-height:24px}
}
@media (max-width:760px){
  /* phones: the five short reasons two to a row; the two lists one under the other */
  main.pg-intern .cp-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  main.pg-intern .cp-cards .tt{font-size:16px}
  main.pg-intern .cp-cards p{font-size:14px;line-height:20px}
  main.pg-intern .cp-two{grid-template-columns:minmax(0,1fr)}
  main.pg-intern .cp-aphd h2{font-size:30px}
  main.pg-intern .cp-ap .rkf{padding:20px 16px}
  main.pg-intern .cp-ap .rf-done{padding:24px 20px}
}