/* Purpose: Thank-you page — confirmation copy, the visitor's request summary, next steps and a framed image on the dark glow panel. */

.thanks {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + var(--space-12)) 0 var(--sec);
}

.thanks__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--col-gap); align-items: center; }
.thanks__lede { margin-top: var(--space-6); }

.thanks__label { font-size: var(--text-caption); letter-spacing: var(--tracking-label); color: var(--color-accent); margin-bottom: var(--space-3); }

/* Request summary — revealed by thank-you.js when the visitor arrives from the form */
.thanks__summary { margin-top: var(--space-10); padding: var(--space-6); border: 1px solid var(--color-accent-line); }
.thanks__summary[hidden] { display: none; }
.thanks__list { margin: 0; }
.thanks__row { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-accent-faint); }
.thanks__row:last-child { border-bottom: 0; padding-bottom: 0; }
.thanks__row[hidden] { display: none; }
.thanks__row dt { font-size: var(--text-caption); color: var(--color-ivory-soft); }
.thanks__row dd { margin: 0; font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-cozy); color: var(--color-ivory); }

/* Next steps */
.thanks__next { margin-top: var(--space-10); }
.thanks__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-accent-faint); }
.thanks__step { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-accent-faint); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-ivory-soft); }
.thanks__step b { display: block; font-weight: var(--weight-regular); font-size: var(--text-body-sm); color: var(--color-ivory); margin-bottom: 2px; }
.thanks__num { width: 32px; height: 32px; border-radius: var(--radius-full); border: 1px solid var(--color-accent); display: grid; place-items: center; font-family: var(--font-heading); font-size: var(--text-body-sm); color: var(--color-ivory); }

.thanks__note { margin-top: var(--space-4); font-size: var(--text-caption); color: var(--color-ivory-soft); }

.thanks__media { aspect-ratio: 4 / 3; }

/* md */
@media (min-width: 641px) {
  .thanks__summary { padding: var(--space-8); }
  .thanks__row { grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: baseline; }
}

/* lg */
@media (min-width: 901px) {
  .thanks__grid { grid-template-columns: 1.1fr .9fr; align-items: start; }
  .thanks__media { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--header-h) + var(--space-8)); }
}