/* Purpose: Post-registration confirmation screen — one viewport, photo pane beside the copy.
   Mobile first: the two panes stack and the page scrolls; from 901px up it locks to 100dvh. */

/* The page is the only thing on screen, so the dark ground belongs on the document,
   not on the section — otherwise overscroll and the dock gutter flash white. */
body:has(.thankyou) {
  padding-bottom: 0;
  background: var(--color-navy);
}

.thankyou {
  display: grid;
  grid-template-columns: 1fr;
  color: var(--color-on-dark);
  background: var(--color-navy);
  /* The reference build runs a tighter body leading than the rest of the site. */
  line-height: var(--leading-card);
  overflow-x: hidden;
}

/* ── left: photo ─────────────────────────────────────────── */
.thankyou__photo {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-34) var(--space-24) var(--space-8);
  overflow: hidden;
  background: linear-gradient(150deg, var(--color-navy-deep), var(--color-navy-2));
}

.thankyou__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--ty-backdrop-opacity);
}

.thankyou__photo-img {
  position: relative;
  z-index: var(--z-raised);
  /* height:auto is load-bearing — WordPress prints width/height attributes, so without it
     the max-width below squashes the portrait instead of scaling it. */
  width: auto;
  height: auto;
  max-width: var(--size-ty-photo-sm);
  object-fit: contain;
  animation: fs-ty-fade var(--duration-slower) var(--ease-smooth) both;
}

/* ── right: copy ─────────────────────────────────────────── */
.thankyou__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-18);
  padding: var(--space-34) var(--space-24) var(--space-40);
  background: var(--color-navy);
}

.thankyou__copy > * {
  position: relative;
  z-index: var(--z-raised);
  margin: 0;
  animation: fs-ty-rise var(--duration-slow) var(--ease-smooth) both;
}

.thankyou__copy > *:nth-child(1) { animation-delay: 60ms; }
.thankyou__copy > *:nth-child(2) { animation-delay: 140ms; }
.thankyou__copy > *:nth-child(3) { animation-delay: 220ms; }
.thankyou__copy > *:nth-child(4) { animation-delay: 300ms; }
.thankyou__copy > *:nth-child(5) { animation-delay: 380ms; }
.thankyou__copy > *:nth-child(6) { animation-delay: 460ms; }
.thankyou__copy > *:nth-child(7) { animation-delay: 540ms; }

.thankyou__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-ty-h1-sm);
  font-weight: var(--weight-black);
  line-height: var(--leading-ty-h1);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-on-dark);
}

.thankyou__heading b {
  color: var(--color-primary);
  font-weight: inherit;
}

/* Personalised greeting only — the authored fallback line stays shouted like the rest of the
   heading. `is-personal` is added by JS once a registrant's name is actually in place. */
.thankyou__greeting.is-personal {
  text-transform: none;
}

/* Only the name is shouted — everything else in the greeting reads as typed. */
.thankyou__greeting.is-personal .thankyou__name {
  text-transform: uppercase;
}

.thankyou__greeting.is-personal .thankyou__hl {
  color: var(--color-primary);
}

.thankyou__lede {
  font-size: var(--fs-16-5);
  color: var(--color-on-dark-list);
}

.thankyou__lede b {
  color: var(--color-on-dark);
  font-weight: var(--weight-bold);
}

.thankyou__note {
  font-size: var(--fs-15-5);
  color: var(--color-on-dark-soft);
}

/* ── detail cards ────────────────────────────────────────── */
.thankyou__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-ty-cards);
}

.thankyou__card {
  padding: var(--space-ty-card-y) var(--space-ty-card-x);
  background: var(--color-navy-2);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
}

.thankyou__label {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-ty-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.thankyou__label .icon {
  flex: 0 0 auto;
  width: var(--size-ty-icon);
  height: auto;
  color: var(--color-primary);
}

.thankyou__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-17);
  font-weight: var(--weight-extra);
  line-height: var(--leading-pull);
  color: var(--color-on-dark);
}

/* ── next steps ──────────────────────────────────────────── */
/* The reference build leaves the browser's default block margins on this pair, which is what
   sets the next-steps block apart from the cards above and the closer below. Reproduced here
   rather than reset, or the block sits 42px tighter than the approved design. */
.thankyou__steps-title {
  margin-top: 1em;
  margin-bottom: var(--space-ty-steps);
  font-family: var(--font-heading);
  font-size: var(--fs-ty-steps-t);
  font-weight: var(--weight-extra);
  color: var(--color-on-dark);
}

.thankyou__steps {
  display: grid;
  gap: var(--space-ty-steps);
  margin: var(--space-16) 0;
  padding: 0;
  list-style: none;
}

.thankyou__step {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--fs-15-5);
  color: var(--color-on-dark-list);
}

.thankyou__tick {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--size-ty-tick);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text);
  font-size: var(--fs-ty-tick);
  font-weight: var(--weight-black);
}

/* ── action cards ────────────────────────────────────────── */
.thankyou__actions {
  display: grid;
  gap: var(--space-16);
}

/* Heads the cards. Bigger than the list title it replaced — it is the last instruction on the
   page, so it has to read as a section header rather than a label. */
.thankyou__actions-title {
  position: relative;
  margin: var(--space-8) 0 var(--space-22);
  padding-bottom: var(--space-14);
  font-family: var(--font-heading);
  font-size: var(--fs-ty-actions-t);
  font-weight: var(--weight-black);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
  color: var(--color-on-dark);
}

/* Short yellow rule — the same accent the section headings use elsewhere on the site. */
.thankyou__actions-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--size-ty-rule);
  height: var(--size-ty-rule-h);
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
  padding: var(--space-20);
  background: var(--color-navy-2);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) ease, transform var(--duration-base) var(--ease-smooth);
}

.action:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.action__icon {
  display: grid;
  place-items: center;
  width: var(--size-ty-tile);
  height: var(--size-ty-tile);
  border-radius: var(--radius-md);
  background: var(--color-glow);
  color: var(--color-primary);
}

.action__icon svg {
  width: var(--size-ty-tile-icon);
  height: auto;
}

.action__eyebrow {
  margin: 0 0 var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-ty-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-primary);
}

.action__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-ty-action);
  font-weight: var(--weight-extra);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-snug);
  color: var(--color-on-dark);
}

.action__note {
  margin: var(--space-10) 0 0;
  font-size: var(--fs-ty-note);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

.action__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-top: var(--space-16);
}

/* Narrower than the page's main CTA — these sit inside a card, several to a row. */
.action__button {
  --cta-pad-y: var(--space-14);
  --cta-pad-x: var(--space-20);
  --cta-size: var(--fs-ty-label);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: auto;
  letter-spacing: var(--tracking-caps);
}

.action__button svg {
  width: var(--size-ty-icon);
  height: auto;
  flex: 0 0 auto;
}

.thankyou__closer {
  font-family: var(--font-heading);
  font-size: var(--fs-21);
  font-weight: var(--weight-extra);
  line-height: var(--leading-pull);
  color: var(--color-primary);
}

/* ── footer line ─────────────────────────────────────────── */
.thankyou__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-18);
  padding-top: var(--space-ty-foot);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--fs-ty-foot);
  color: var(--color-text-faint);
}

.thankyou__tel {
  color: var(--color-primary);
  font-weight: var(--weight-extra);
  text-decoration: none;
}

@keyframes fs-ty-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fs-ty-fade {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ── desktop: two panes locked to the viewport ───────────── */
@media (min-width: 901px) {
  .thankyou {
    height: 100dvh;
    min-height: var(--ty-min-height);
    grid-template-columns: minmax(0, var(--ty-col-photo)) minmax(0, var(--ty-col-copy));
    overflow: hidden;
  }

  /* The admin bar eats 32px off the viewport for logged-in users only. */
  .admin-bar .thankyou {
    height: calc(100dvh - 32px);
  }

  /* With action cards the copy is far taller than one screen. Locking it to the viewport would
     bury the steps inside a pane scrollbar nobody notices, so the page scrolls normally and the
     photo sticks alongside it instead. */
  .thankyou--actions,
  .admin-bar .thankyou--actions {
    height: auto;
    align-items: start;
    /* `clip` rather than `hidden`: hidden makes this a scroll container, which silently kills
       the sticky photo below. The older value stays first as the fallback — a browser without
       `clip` loses the stick, not the layout. */
    overflow: hidden;
    overflow: clip visible;
  }

  .thankyou--actions .thankyou__photo {
    position: sticky;
    top: 0;
    height: 100dvh;
  }

  .admin-bar .thankyou--actions .thankyou__photo {
    top: 32px;
    height: calc(100dvh - 32px);
  }

  .thankyou--actions .thankyou__copy {
    justify-content: flex-start;
    overflow: visible;
  }

  .thankyou__photo {
    /* A definite row is load-bearing: with the default auto row the grid area grows to the
       portrait's natural height, so max-height:100% resolves against the image itself and
       stops constraining anything — the photo then spills past a short viewport. */
    grid-template-rows: minmax(0, 1fr);
    padding: var(--space-ty-photo);
  }

  .thankyou__photo-img {
    max-height: 100%;
    max-width: 100%;
  }

  .thankyou__copy {
    gap: var(--space-ty-gap);
    padding: var(--space-ty-pane-y) var(--space-ty-pane-x);
    /* Taller copy than viewport scrolls inside its own pane rather than being clipped.
       `safe` keeps the first line reachable — plain centring pushes overflow past the
       scroll container's top edge, where it cannot be scrolled back to. */
    justify-content: center;
    justify-content: safe center;
    /* Both axes must be declared: setting only overflow-y turns overflow-x into `auto` too,
       and the glow blob below sits outside the pane, so that adds a horizontal scrollbar. */
    overflow: hidden auto;
  }

  /* Yellow bloom in the top-right corner of the copy pane. */
  .thankyou__copy::after {
    content: "";
    position: absolute;
    top: calc(var(--size-ty-glow) / -2.875);
    right: calc(var(--size-ty-glow) / -2.875);
    width: var(--size-ty-glow);
    height: var(--size-ty-glow);
    border-radius: var(--radius-full);
    background: radial-gradient(circle, var(--color-ty-glow), transparent 66%);
    pointer-events: none;
  }

  .thankyou__heading {
    font-size: var(--fs-ty-h1);
  }

  .thankyou__lede {
    font-size: var(--fs-ty-lede);
  }

  .thankyou__note,
  .thankyou__step {
    font-size: var(--fs-ty-note);
  }

  .thankyou__details {
    grid-template-columns: repeat(3, 1fr);
  }

  .thankyou__value {
    font-size: var(--fs-ty-value);
  }

  .thankyou__closer {
    font-size: var(--fs-ty-closer);
  }
}

@media (prefers-reduced-motion: reduce) {
  .thankyou__copy > *,
  .thankyou__photo-img {
    animation: none;
  }
}