/* ============================================================
   PRIME ACADEMY GROUP · primeacg.com — v4.3
   register.css — free-course registration page (CR-02 item 2)

   The form itself is contact.css: .c-form, .c-field and .c-form__actions are
   reused verbatim, so register.html loads BOTH stylesheets. Only the page
   furniture and the confirmation state live here.
   ============================================================ */

/* ---------- R1 mast ----------
   Shorter than the other inner-page masts on purpose: this is a step in a task,
   not a landing page, so it should not hold the visitor at full height before
   the form. Everything else matches .c-mast / .t-mast. */
.r-mast{ min-height:56vh; padding-block:clamp(104px,12vw,148px) clamp(48px,6vw,72px); }
.r-mast h1{ color:#fff; max-width:16ch; text-wrap:balance; }
/* Two-colour headings are global now - see base.css. */
.r-mast .parallax-inner > img{ object-position:center 44%; }
.r-mast{ position:relative; isolation:isolate; overflow:hidden; }
.r-mast .s-who__scrim{
  background:
    linear-gradient(180deg,rgba(20,33,61,.93),rgba(20,33,61,.78)),
    radial-gradient(94% 74% at 88% -8%,rgba(33,150,243,.15),transparent 60%);
}
.r-mast__cta{ display:flex; flex-wrap:wrap; gap:12px; }

@media (max-width:768px){
  .r-mast{ min-height:auto; }
  .r-mast h1{ max-width:none; }
}

/* ---------- R2 form band ---------- */
.r-form-band .section-head{ margin-bottom:clamp(24px,3vw,34px); }
.r-form-band .section-head .lead{ max-width:56ch; margin-top:12px; }

/* ---------- Band layout ----------
   Form left, photograph right, even split. The figure is decorative, so it is
   the one that goes when there is no room for both. */
/* [hidden] first: display:grid below is an author rule and would otherwise beat
   the UA stylesheet's [hidden]{display:none}, leaving the band on screen after
   the form is submitted. Same reason .r-step and .r-done carry their own. */
.r-band[hidden]{ display:none; }
.r-band{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,64px); align-items:center;
}

/* 16/9, the site's shape for a photograph sitting beside copy — the same rule
   .s-execution .map-frame and .s-what .wwd-figure follow.

   NO min-height here, deliberately. Those two carry a clamp(200px,24vw,300px)
   floor because they hold object-fit:contain artwork, which shrinks to nothing
   in a short box. This holds a cover photograph, which fills whatever box it is
   given, so the floor buys nothing and costs the ratio: at a 50/50 split it
   outgrew 16/9 below about 1500px, and between 1300 and 1470 it pinned the
   height at its own 300px cap while the column kept widening. Height now
   tracks width at every size, which is what the ratio is for.

   Centred rather than top-aligned: a 16/9 photo is always shorter than the copy
   beside it, and the site centres it in that case — .s-execution__top uses
   align-items:center, .s-what .wwd-figure uses align-self:center. Pinned to the
   top it left a block of dead space underneath.

   margin:0 matters. A <figure> carries a UA margin of 1em 40px, which is 80px
   of inline margin the grid does not account for. */
.r-figure{
  align-self:center;
  width:100%;
  margin:0; padding:0; overflow:hidden;
  background:var(--navy);
}
/* The ratio lives on the image, not the figure. Centring a grid item stops it
   stretching, so its block size becomes content-based — and with an absolutely
   positioned image there is no in-flow content, which collapsed the figure to
   nothing. In flow with the ratio on itself, the image derives its height from
   the column width and the figure simply wraps it. */
.r-figure img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover;
}

@media (max-width:900px){
  .r-band{ grid-template-columns:1fr; }
}

/* ---------- Two-step form ----------
   Steps are shown/hidden by register.js. With JS off neither carries [hidden],
   so both are visible and the form still works — degraded, not broken. */
.r-steps{ min-width:0; }

/* progress rail */
.r-rail{
  display:flex; align-items:center; gap:clamp(14px,2vw,26px);
  margin:0 0 clamp(24px,3vw,34px); padding:0 0 clamp(16px,2vw,22px);
  border-bottom:1px solid var(--line);
}
.r-rail__item{ display:flex; align-items:center; gap:10px; color:var(--slate); }
/* Pill, not a disc. Same shape family as .p-step__n, .c-path__n and the
   capability rail on Home — the site has one marker shape and this is it. */
.r-rail__n{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  min-width:42px; height:30px; padding:0 12px; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  color:var(--deep); background:var(--white); border:1px solid var(--line);
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.r-rail__t{ font-family:var(--font-display); font-weight:500; font-size:14px; }
.r-rail__item.is-active .r-rail__n{
  background:var(--azure); color:#fff; border-color:transparent;
  box-shadow:0 8px 24px rgba(33,150,243,.38);
}
.r-rail__item.is-active .r-rail__t{ color:var(--navy); }
.r-rail__item.is-done .r-rail__n{ background:var(--deep); color:#fff; border-color:transparent; }

/* steps */
.r-step[hidden]{ display:none; }
.r-step__h{
  margin:0 0 clamp(14px,1.8vw,20px);
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(18px,1.6vw,22px); line-height:1.24; color:var(--navy);
}
.r-step__foot{
  margin:clamp(16px,2vw,22px) 0 0;
  font-size:12.5px; line-height:1.55; color:var(--slate);
}

/* step 1 — the course options */
.r-opts{ display:flex; flex-direction:column; gap:10px; }
/* Surface, border, radius and the lift-on-hover all come from .card /
   .card--hover in base.css — the same treatment the Ways cards and the
   platform cards use. Only layout belongs here. */
.r-opt{
  width:100%; display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:4px 18px; text-align:left; cursor:pointer;
  padding:clamp(16px,1.8vw,20px);
}
.r-opt__name{
  grid-column:1; font-family:var(--font-display); font-weight:500;
  font-size:clamp(15.5px,1.3vw,17px); line-height:1.3; color:var(--navy);
}
.r-opt__note{ grid-column:1; font-size:13.5px; line-height:1.5; color:var(--slate); }
.r-opt__go{
  grid-column:2; grid-row:1 / span 2; display:grid; place-items:center;
  width:18px; height:18px; color:var(--slate);
  transition:transform var(--dur-state) var(--ease), color var(--dur-fast) var(--ease);
}
.r-opt__go svg{ width:16px; height:16px; }
/* arrow nudge at the same speed .btn-arrow uses everywhere else */
.r-opt:hover .r-opt__go{ color:var(--deep); transform:translateX(3px); }
.r-opt:focus-visible{ outline:2px solid var(--azure); outline-offset:2px; }

/* step 2 — back link and the chosen course */
.r-step__top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 20px; margin-bottom:clamp(16px,2vw,22px);
}
.r-back{
  display:inline-flex; align-items:center; gap:7px;
  padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--font-display); font-weight:500; font-size:13.5px;
  color:var(--deep);
  transition:color var(--dur-fast) var(--ease);
}
.r-back svg{ width:15px; height:15px; transition:transform var(--dur-state) var(--ease); }
.r-back:hover svg{ transform:translateX(-3px); }
.r-back:focus-visible{ outline:2px solid var(--azure); outline-offset:3px; }

/* Chosen-course chip. Only appears once a course is actually set, so someone
   arriving with no ?course= is never told they are registering for nothing. */
.r-course[hidden]{ display:none; }
.r-course{
  display:inline-block; margin:0;
  padding:6px 12px; border-radius:999px;
  background:var(--mist); border:1px solid var(--line-soft);
  font-size:13px; line-height:1.4; color:var(--slate);
}
.r-course b{ font-weight:500; color:var(--deep); }

@media (max-width:600px){
  .r-rail{ gap:14px; }
  .r-rail__t{ font-size:13px; }
  .r-step__top{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Confirmation ----------
   Sibling of the form, not a replacement for it: register.js hides one and
   reveals the other, which is the same swap main.js does for the newsletter.
   [hidden] needs the explicit display:none because .r-done sets display below
   and would otherwise win over the attribute. */
/* Confirmation. A sibling of .r-band rather than a child, because it replaces
   the band entirely — heading, steps and photograph all hide with it. Centred
   in the section on its own, since at that point there is nothing to sit beside. */
.r-done[hidden]{ display:none; }
.r-done{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(14px,1.6vw,20px);
  max-width:760px; margin-inline:auto;
  padding-block:clamp(8px,2vw,24px);
}
.r-done h2{ margin:0; color:var(--deep); }
.r-done h2:focus-visible{ outline:2px solid var(--azure); outline-offset:4px; }
.r-done .lead{ margin:0; color:var(--slate); max-width:64ch; }
.r-done .btn{ margin-top:clamp(6px,.8vw,10px); }

@media (max-width:600px){
  .r-done{ padding:24px; }
}