/* gdrinstitute.org: the "Get involved" route panel. Loaded beside /site.css, never instead of it. */
/* Every colour, space and type value below is an existing token from site.css :root. */

/* involve:start */
/* The copy block is a .band-head and carries its own gap to the routes, so the
   grid adds none above them. */
.involve .involve-grid{display:grid;gap:var(--s-head)}
.involve .involve-copy.band-head{margin-bottom:0}
.involve h2{max-width:22ch}
.involve .involve-copy .line{margin-top:var(--s-3)}

.involve .involve-routes{display:grid;gap:var(--s-gap)}

/* A route card is a .card: the same border, radius, padding and tones. */
.route-card{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:var(--s-pad);
  background:var(--bg-2);
  border:1px solid var(--rule);
  border-radius:0;
  color:var(--ink);
  text-decoration:none;
}
.band .route-card{background:var(--bg-2)}
.band--tint .route-card{background:var(--bg)}
.route-card:hover,.route-card:focus-visible{border-color:var(--ink);color:var(--ink);text-decoration:none}
.route-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.route-kind{
  display:block;
  font-family:var(--display);
  font-size:var(--t-lg);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.005em;
  color:var(--ink);
}
.route-line{
  display:block;
  margin-top:var(--s-2);
  font-size:var(--t-base);
  line-height:1.55;
  color:var(--ink-2);
  max-width:40ch;
}
.route-go{
  display:block;
  margin-top:auto;
  padding-top:var(--s-4);
  font-size:var(--t-sm);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
.route-go::after{content:"\00a0\2192"}
.route-card:hover .route-go{text-decoration:underline;text-underline-offset:3px}

.involve .involve-alt{max-width:none;font-size:var(--t-base);color:var(--ink-3)}
.involve .involve-alt a{color:var(--ink)}

/* A: three equal cards in a row, one column under 720px. */
.involve--a .involve-routes{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){
  .involve--a .involve-routes{grid-template-columns:minmax(0,1fr)}
}

/* B: copy left, routes stacked right, on the .connect-grid proportions. */
.involve--b .involve-grid{
  grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  column-gap:var(--s-8);
  row-gap:var(--s-5);
  align-items:start;
}
.involve--b .involve-copy{grid-column:1;grid-row:1}
.involve--b .involve-routes{grid-column:2;grid-row:1;gap:var(--s-3)}
.involve--b .involve-alt{grid-column:2;grid-row:2}
.involve--b .route-card{padding:var(--s-4) var(--s-5)}
@media (max-width:800px){
  .involve--b .involve-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}
  .involve--b .involve-copy,
  .involve--b .involve-routes,
  .involve--b .involve-alt{grid-column:1;grid-row:auto}
}

/* C: heading centred, three cards in a row, each led by its index. */
.involve--c .involve-copy{max-width:60ch;margin-inline:auto;text-align:center}
.involve--c .involve-copy h2{max-width:none}
.involve--c .involve-copy .line{max-width:none}
.involve--c .involve-routes{grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:route}
.involve--c .route-card::before{
  counter-increment:route;
  content:counter(route);
  display:block;
  margin-bottom:var(--s-3);
  font-family:var(--ix-font-num);
  font-size:var(--t-num);
  font-weight:600;
  line-height:1;
  color:var(--accent);
}
.involve--c .involve-alt{text-align:center}
@media (max-width:720px){
  .involve--c .involve-routes{grid-template-columns:minmax(0,1fr)}
  .involve--c .route-card::before{font-size:30px;margin-bottom:var(--s-2)}
}
/* involve:end */

/* variants:start: five finishes on the A layout. The markup is identical in all
   five, so every difference below comes from CSS. Colours are tokens only. */

/* A1 Bordered is the one card, and A2 Filled is gone: the coherent pass
   leaves one card look on the site, and a hover is a border colour. */
/* A3 Open: no box at all. One rule across the top of each column, so the three
   read as an editorial spread. The column gap matches the other four
   treatments exactly, so the columns are the same width in all five and the
   difference is carried by the hairline alone. Row gap is vertical rhythm only
   and may differ. */
.involve--a3 .involve-routes{column-gap:var(--s-4);row-gap:var(--s-6)}
/* Side padding matches the boxed treatments so the text measure, and with it
   the headline wrapping, is the same in all five. The hairline still runs the
   full width of the column, which is what makes this one read as open. */
.involve--a3 .route-card{
  padding:var(--s-4) var(--s-5) 0;
  background:transparent;
  border:0;
  border-top:1px solid var(--rule);
}
.involve--a3 .route-card:hover,
.involve--a3 .route-card:focus-visible{border-top-color:var(--ink)}
.involve--a3 .route-go::after{content:"\00a0\2192"}
@media (max-width:640px){
  .involve--a3 .route-card{padding:var(--s-4) var(--s-4) 0}
}

/* A4 Marked: bordered, with the Institute's three hues as a 4px band flush
   inside the top border. One gradient, hard stops, no extra markup. */
.involve--a4 .route-card{
  position:relative;
  padding:var(--s-5);
  background:var(--bg);
  border:1px solid var(--rule);
}
.involve--a4 .route-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(
    90deg,
    var(--eco) 0 33.333%,
    var(--soc) 33.333% 66.666%,
    var(--cap) 66.666% 100%
  );
}
.involve--a4 .route-card:hover,
.involve--a4 .route-card:focus-visible{border-color:var(--ink)}
.involve--a4 .route-kind{margin-top:var(--s-2)}
.involve--a4 .route-go::after{content:"\00a0\2192"}
@media (max-width:640px){
  .involve--a4 .route-card{padding:var(--s-4)}
}

/* A5 Actioned: bordered, and the route reads as a filled button. It stays a
   span; the card is still the anchor, so this is a look and not a control. */
.involve--a5 .route-card{
  padding:var(--s-5);
  background:var(--bg);
  border:1px solid var(--rule);
}
.involve--a5 .route-card:hover,
.involve--a5 .route-card:focus-visible{border-color:var(--ink)}
.involve--a5 .route-line{padding-bottom:var(--s-4)}
.involve--a5 .route-go{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  width:auto;
  margin-top:auto;
  min-height:44px;
  padding:12px 20px;
  font-size:var(--t-sm);
  font-weight:500;
  line-height:1.2;
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent);
  border-radius:var(--radius);
}
.involve--a5 .route-go::after{content:none}
.involve--a5 .route-card:hover .route-go{
  background:var(--ink-2);
  border-color:var(--ink-2);
  color:var(--on-accent);
  text-decoration:none;
}
@media (max-width:640px){
  .involve--a5 .route-card{padding:var(--s-4)}
}
/* variants:end */

/* demo:start: the review page only, never the live panel. */
.demo-head .line{margin-top:var(--s-3);max-width:66ch}

/* One lettered version. Each one after the first opens with a rule. */
.version{padding:var(--s-7) 0}
.version + .version{border-top:1px solid var(--rule)}

.version-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  column-gap:var(--s-5);
  row-gap:var(--s-2);
  margin-bottom:var(--s-5);
}
.version-tag{
  font-family:var(--display);
  font-size:56px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-decoration:none;
}
.version-say{min-width:0}
.version-name{margin:0;font-size:var(--t-lg);line-height:1.3;color:var(--ink)}
.version-say .line{margin-top:var(--s-2);max-width:60ch}

/* The specimen frame. The panel inside carries its own band padding. */
.version-stage{
  padding:0;
  background:var(--ground);
  border:1px solid var(--rule);
  overflow:hidden;
}
.version-stage > .band{border-top:0}

/* The walkthrough. */
.flow-steps{list-style:none;margin:var(--s-6) 0 0;padding:0}
.flow-step{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  column-gap:var(--s-4);
  align-items:start;
}
.flow-step + .flow-step{margin-top:var(--s-5)}
.flow-num{
  font-family:var(--ix-font-num);
  font-size:32px;
  font-weight:600;
  line-height:1.1;
  color:var(--ink-3);
}
.flow-say{min-width:0}
/* The step headline leads its own support line: --t-lg (22px) over --t-md
   (15px) is 1.47x, clearing the 1.35x rule and the 18px floor at every width. */
.flow-what{margin:0;font-size:var(--t-lg);line-height:1.3;color:var(--ink)}
.flow-say .line{margin-top:var(--s-2);max-width:60ch;font-size:var(--t-md)}
.flow-note{
  margin-top:var(--s-3);
  padding-left:var(--s-3);
  border-left:1px solid var(--rule);
  max-width:60ch;
}

@media (max-width:640px){
  .version{padding:var(--s-6) 0}
  .version-head{column-gap:var(--s-4)}
  .version-tag{font-size:40px}
  .flow-step{grid-template-columns:minmax(0,1fr);row-gap:var(--s-2)}
  .flow-step + .flow-step{margin-top:var(--s-6)}
}
/* demo:end */

/* reg:start: the registration form on /get-involved. */
.reg-form select{display:block;width:100%;min-height:44px;padding:12px;font:inherit;font-size:var(--t-base);color:var(--ink);background:var(--ground);border:1px solid #DDE1DC;border-radius:0}
.reg-form select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.reg-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.reg-status:empty{display:none}
.reg-status{margin-top:var(--s-3);color:var(--ink)}
.reg-thanks{margin-top:0}
.reg-block{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
@media (min-width:900px){.reg-block{grid-template-columns:5fr 7fr;gap:var(--s-7);align-items:start}}
/* reg:end */

/* pick:start: the thumbnail picker on the review decision page. */
.pick{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-4)}
.pick--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pick-item{display:block;padding:var(--s-3);border:1px solid var(--rule);background:var(--bg);text-decoration:none;color:var(--ink)}
.pick-item:hover{border-color:var(--ink)}
.pick-item:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.pick-img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.pick-label{display:block;margin-top:var(--s-3);font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.pick-note{display:block;margin-top:4px}
.pick-item--rec{border:2px solid var(--ink);padding:calc(var(--s-3) - 1px)}
.pick-rec{display:block;margin-top:var(--s-2);text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
@media (max-width:760px){.pick--three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.pick--three{grid-template-columns:minmax(0,1fr)}}
/* pick:end */