/* ==========================================================
   Sponsor and booth request (sponsor.html)

   The card, stepper, fields and review box come from register.css. This file
   is the page around them: its header bar, its own heading, the packages, the
   side column, and the two ways of sending at the end.

   Where it has to reach into register.css, it is because those rules were
   written for a form with three steps and an id of their own; everything here
   is scoped to .spf so the registration form is untouched.
   ========================================================== */

/* ---------- Header: brand on one side, everything else on the other ------- */
.spf-back-btn{
  margin-inline-start:auto;
  padding:10px 18px;font-size:14.5px;
  background:transparent;color:var(--h-text);
  box-shadow:inset 0 0 0 1.5px var(--h-line);
  transition:background .2s ease,box-shadow .2s ease,color .3s ease;
}
.spf-back-btn:hover{
  color:var(--h-text);
  background:color-mix(in srgb,var(--teal) 16%,transparent);
  box-shadow:inset 0 0 0 1.5px var(--teal);
}
.spf-back-btn svg{transition:transform .2s ease}
.spf-back-btn:hover svg{transform:translateX(-3px)}
html[dir="rtl"] .spf-back-btn svg{transform:scaleX(-1)}
html[dir="rtl"] .spf-back-btn:hover svg{transform:scaleX(-1) translateX(-3px)}

@media (max-width:620px){
  .spf-back-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .spf-back-btn{padding:10px 12px}
}

/* ---------- The page heading ---------- */
.spf{padding-block:52px 80px}
.spf-head{max-width:60ch;margin-bottom:38px}
.spf-head h1{font-size:clamp(28px,4.2vw,42px);line-height:1.14;margin:8px 0 14px;letter-spacing:-.01em}
.sponsor-edition-en .edition-sup{font-size:.62em;line-height:0;vertical-align:.48em;letter-spacing:0}
html[lang="en"] .sponsor-edition-translated,html:not([lang="en"]) .sponsor-edition-en{display:none}
.spf-head .lead{font-size:clamp(15.5px,1.5vw,17px);line-height:1.6;color:var(--muted)}

/* ---------- Two columns: the form leads, the reasons support it ---------- */
/* Below 1060px register.css turns the side column into loose grid items so the
   registration page can interleave them. There is only one panel here, so it
   takes the full width, and the form goes first: it is what the visitor came
   to do, and the reasons to sponsor read perfectly well underneath it. */
@media (max-width:1060px){
  .spf .reg-card{order:1;margin-top:0}
  .spf .reg-aside > .reg-panel{order:2;grid-column:1/-1}
  .spf .reg-help{order:3}
  .spf .reg-policy{order:4}
}

/* ---------- Inside the card ---------- */
/* Two steps, not three. */
.spf .stepper{grid-template-columns:repeat(2,1fr)}
.spf .st-bar{margin-top:18px}

/* register.css pads #regForm by name, so this form needs its own padding. */
#spfForm{padding:28px 32px 30px}

/* The step headings are <h2> here, because this page has no <h1> above them
   other than the page title. They should read exactly like the others. */
.spf .step-head h2{font-size:22px;line-height:1.25;outline:none}
.spf .step-head h2:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}

/* A second heading further down a step, above the packages. */
.spf-subhead{margin:28px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.spf-subhead h3{font-size:18px;margin-bottom:4px}
.spf-subhead p{font-size:14.5px;color:var(--muted)}

/* ---------- The packages ---------- */
/* An even grid, two by two, so four packages never break three-over-two. Each
   card carries the medal colours of its tier (--m1/--m2 come from
   tier-card.css); a tier with no colours of its own gets Diamond's.
   "Not sure yet" is not a package: it takes the full width underneath, with a
   dashed edge and no colour bar, so it reads as the other kind of answer. */
.spf-packs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}

.spf-pack{
  --m1:#BFE9F5;--m2:#5FB6D4;
  position:relative;display:flex;align-items:center;gap:14px;
  padding:18px 18px 18px 20px;
  border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);cursor:pointer;overflow:hidden;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.spf-pack::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--m1),var(--m2))}
html[dir="rtl"] .spf-pack::before{inset:0 0 0 auto}
.spf-pack input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.spf-pack-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.spf-pack-name{font-size:16.5px;font-weight:700;line-height:1.2}
.spf-pack-note{font-size:13px;line-height:1.4;color:var(--muted)}
.spf-pack .tc-check{flex:none}

.spf-pack:hover{border-color:color-mix(in srgb,var(--m2) 60%,var(--line));transform:translateY(-2px)}
.spf-pack.is-checked{
  border-color:var(--m2);
  background:color-mix(in srgb,var(--m2) 9%,var(--bg));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--m2) 18%,transparent);
}
.spf-pack.is-checked .tc-check{border-color:var(--m2);box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 12px var(--m2)}
.spf-pack:focus-within{outline:3px solid var(--teal);outline-offset:2px}

/* Not a package: its own row, dashed, teal when chosen. */
.spf-pack-any{
  grid-column:1/-1;
  --m2:var(--teal);
  border-style:dashed;background:transparent;
}
.spf-pack-any::before{display:none}
.spf-pack-any .spf-pack-name{font-size:15.5px;font-weight:600}
.spf-pack-any.is-checked{border-style:solid}

/* ---------- Why sponsor: the side column ---------- */
.spf-points{display:grid;gap:18px;margin-top:6px;list-style:none;padding:0}
.spf-points li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.spf-ic{
  display:grid;place-items:center;width:40px;height:40px;
  border-radius:12px;background:color-mix(in srgb,var(--teal) 13%,transparent);color:var(--teal);
}
.spf-ic svg{width:21px;height:21px}
.spf-points b{display:block;font-size:15px;line-height:1.3}
.spf-points small{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ---------- Sending the request ---------- */
.spf-send{
  width:100%;max-width:460px;margin-top:10px;padding-top:22px;
  border-top:1px solid var(--line);
}
.spf-send-note{margin-bottom:16px;font-size:14px;line-height:1.5;color:var(--muted)}
.spf-send-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.spf-send-row .btn{flex:1 1 190px;justify-content:center}

.spf .reg-success h2{margin-top:12px;font-size:26px;line-height:1.2}
.spf .reg-success > p{max-width:46ch;color:var(--muted)}

/* The quiet way back, below the two that matter. */
.spf .reg-success .btn-ghost{margin-top:6px;color:var(--muted);box-shadow:none;font-weight:600}
.spf .reg-success .btn-ghost:hover{color:var(--teal-ink);background:transparent;text-decoration:underline}

/* ---------- Narrow screens ---------- */
/* Two steps here, so the small-screen stepper needs two columns, not three. */
@media (max-width:720px){
  .spf .stepper{grid-template-columns:auto auto;justify-content:space-between}
}

@media (max-width:700px){
  .spf{padding-block:36px 56px}
  .spf-head{margin-bottom:28px}
  #spfForm{padding:24px 20px 26px}
  .spf .reg-progress{padding:20px 20px 0}
  .spf-packs{grid-template-columns:1fr}
  .spf-send-row .btn{flex:1 1 100%}
}