/**
 * @file
 * 403 and 404 pages.
 *
 * Two parts, and they are deliberately the same two parts every other landing
 * surface on this site has: a full-bleed band carrying the heading, and a card
 * under it carrying the ways on. An error page that looks like a page is an
 * answer; an error page that looks like a fragment of one looks like a second
 * failure on top of the first.
 *
 * See templates/layout/page--404.html.twig for the markup and
 * _mosman_events_2026_error_page() for where the wording comes from.
 */

/* ---------------------------------------------------------------------------
 * The band
 * ------------------------------------------------------------------------ */
.error-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border-block-end: 1px solid var(--border-subtle);

  /* The same dark wash the submission form's band uses, so the two "this is a
     whole page" surfaces are recognisably one thing. Dark in both palettes on
     purpose: it is built from the navy ramp rather than from --surface-*. */
  background:
    radial-gradient(
      60% 120% at 12% 0%,
      color-mix(in srgb, var(--me-magenta) 22%, transparent) 0%,
      transparent 62%
    ),
    radial-gradient(
      50% 130% at 100% 100%,
      color-mix(in srgb, var(--me-magenta) 12%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(160deg, var(--me-navy-deep) 0%, var(--me-navy-900) 55%, var(--me-ink) 100%);
}

.error-band__body {
  inline-size: min(var(--wrapper-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/**
 * The number.
 *
 * Large, and hidden from assistive technology — a screen reader gets the
 * heading, which says the same thing in words. It is set in the accent at low
 * opacity rather than as a decorative background image so it scales with the
 * type and needs no asset.
 */
.error-band__status {
  margin: 0 0 var(--space-2xs);
  color: var(--me-magenta-300);
  font-size: var(--step-1);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  line-height: 1;
}

.error-band__title {
  margin: 0 0 var(--space-s);
  color: var(--me-white);
  font-size: var(--step-5);
  text-wrap: balance;
}

.error-band__lede {
  margin: 0;
  max-inline-size: var(--wrapper-prose);
  color: color-mix(in srgb, var(--me-white) 78%, transparent);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

.error-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-l) 0 0;
}

/* ---------------------------------------------------------------------------
 * The panel of ways on
 * ------------------------------------------------------------------------ */
.error-page {
  display: grid;
  gap: var(--space-m);
}

.error-page__content {
  margin-block-end: var(--space-l);
}

.error-page__panel {
  padding: var(--space-l);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--lift-rest-shadow);
}

.error-page__heading {
  margin: 0 0 var(--space-m);
  font-size: var(--step-2);
}

.error-page__links {
  display: grid;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  /* minmax(0, 1fr): a long description must not push a track wider than the
     card. This is the same floor every grid in the theme carries. */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.error-page__links li {
  display: grid;
  /* `start`, not the default `stretch`: the tracks are auto-height and the
     items in a row are equal-height, so a one-line description was having the
     spare height shared out between its two rows and sitting lower than the
     two-line ones beside it. */
  align-content: start;
  gap: var(--space-3xs);
  min-inline-size: 0;
}

.error-page__links a {
  color: var(--text-accent);
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.error-page__links a:hover {
  text-decoration: underline;
}

.error-page__links span {
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

/**
 * The address that was asked for.
 *
 * `overflow-wrap: anywhere` because the thing most likely to be printed here is
 * a long alias with no spaces in it, and on a phone that is exactly the string
 * that would otherwise hang off the side of the page.
 */
.error-page__address {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.error-page__address code {
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  background: var(--surface-well);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.95em;
  overflow-wrap: anywhere;
}