/**
 * Pattern styles.
 *
 * Ported from components/blocks/Blocks.module.css and components/layout/Section.module.css.
 *
 * These style the TIER 1 patterns — the ones an editor composes freely. The class names
 * are the contract: a pattern's markup can be rewritten in the editor, but as long as the
 * classes survive, the design does. An editor who strips the classes gets unstyled core
 * blocks, which is a visible mistake rather than a silent one.
 */

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.ss-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 600px;
  background: var(--surface-inverse);
  overflow: hidden;
}

.ss-hero--short {
  min-height: 380px;
}

.ss-hero__image,
.ss-hero__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/**
 * A FLAT overlay at 55%, across the whole image.
 *
 * The design system rules out a protection gradient explicitly, and gradients are not
 * used anywhere on this site. A partial scrim reads as one. If the text is hard to read
 * over a particular photograph, the answer is a different photograph — stylelint bans
 * gradient functions in this file, so there is no way to reach for one here anyway.
 */
.ss-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--ss-ink);
  opacity: 0.55;
}

.ss-hero__inner {
  position: relative;
  width: 100%;
  padding-block: var(--space-11);
  padding-inline: var(--layout-gutter);
  margin-inline: auto;
}

.ss-hero__eyebrow {
  color: var(--ss-zinc);
  margin-bottom: var(--space-4);
}

.ss-hero__heading {
  color: var(--text-inverse);
  max-width: 22ch;
}

.ss-hero__sub {
  color: var(--ss-zinc);
  margin-top: var(--space-5);
  max-width: 62ch;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.ss-hero__actions {
  margin-top: var(--space-8);
}

@media (width <= 768px) {
  .ss-hero {
    min-height: 460px;
  }
}

/* ── Proof bar ────────────────────────────────────────────────────────────── */

.ss-proof {
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  background: var(--surface-base);
}

.ss-proof__inner {
  padding-inline: var(--layout-gutter);
  margin-inline: auto;
}

.ss-proof__list {
  margin: 0;
  gap: 0;
}

.ss-proof__item {
  padding: var(--space-7) var(--space-5);
  border-left: var(--hairline);
}

.ss-proof__item:first-child {
  border-left: 0;
  padding-left: 0;
}

.ss-proof__value {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 40px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--ss-blue);
  font-variant-numeric: tabular-nums;
  display: block;
}

.ss-proof__label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  display: block;
  margin-top: var(--space-2);
}

@media (width <= 768px) {
  .ss-proof__item {
    flex-basis: 50%;
    border-left: 0;
    border-top: var(--hairline);
    padding-inline: 0;
  }

  .ss-proof__item:first-child {
    border-top: 0;
  }

  .ss-proof__value {
    font-size: 26px;
    line-height: 32px;
  }
}

/* ── Section ──────────────────────────────────────────────────────────────── */

.ss-section {
  padding-block: var(--section-pad-y);
  padding-inline: var(--layout-gutter);
}

.ss-section--paper {
  background: var(--surface-section);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.ss-section__title {
  max-width: 26ch;
  margin-bottom: var(--space-5);
}

.ss-section__lead {
  color: var(--text-secondary);
  max-width: var(--measure-prose);
  margin-bottom: var(--space-8);
}

/* ── Page header ──────────────────────────────────────────────────────────── */

.ss-page-header {
  padding-block: var(--space-10) var(--space-8);
  padding-inline: var(--layout-gutter);
  border-bottom: var(--hairline);
}

.ss-page-header__breadcrumb {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.ss-page-header__breadcrumb a {
  color: var(--text-secondary);
}

.ss-page-header__breadcrumb a:hover {
  color: var(--ss-blue);
}

.ss-page-header__lead {
  color: var(--text-secondary);
  margin-top: var(--space-5);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  max-width: var(--measure-prose);
}

/* ── Call to action ───────────────────────────────────────────────────────── */

.ss-cta {
  padding-block: var(--section-pad-y-tight);
  padding-inline: var(--layout-gutter);
  background: var(--surface-section);
  border-top: var(--hairline);
}

.ss-cta__heading {
  max-width: 22ch;
}

.ss-cta__body {
  color: var(--text-secondary);
  margin-top: var(--space-4);
  max-width: var(--measure-prose);
}

.ss-cta__actions {
  margin-top: var(--space-7);
}

/* ── Button variants ──────────────────────────────────────────────────────── */

/**
 * Outline on the inverse ground, for a secondary action over photography.
 *
 * White border and white text, because --action-secondary-fg is ink and ink on a 55%
 * ink overlay is unreadable. A legibility fix, not a style preference — the hero's
 * secondary action was illegible over photography once already.
 */
.is-style-outline-inverse .wp-block-button__link {
  background: transparent;
  color: var(--text-inverse);
  border: 1px solid var(--text-inverse);
}

.is-style-outline-inverse .wp-block-button__link:hover {
  background: var(--text-inverse);
  color: var(--ss-ink);
}

.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--action-secondary-fg);
  border: 1px solid var(--action-secondary-border);
}

.is-style-outline .wp-block-button__link:hover {
  background: var(--action-secondary-border);
  color: var(--text-inverse);
}

@media print {
  /* A hero is 600px of photograph at the top of a printed detail sheet. Architects
     print these to read the build-up, not the marketing. */
  .ss-hero,
  .ss-cta {
    display: none;
  }
}

/* ── Callouts ────────────────────────────────────────────────────────────────
   Ported from components/layout/Section.module.css (.callout, .pendingCallout)
   value for value, because the twenty static pages carry three things that are
   neither body copy nor a heading: a clarification, a warning, and the standing
   "not yet stated" notice on the legal stubs.

   The reference had these; the WordPress theme did not, so the pages had no way
   to say "this bit matters" other than by making it another paragraph. */

.ss-callout {
  border: var(--hairline);
  border-left: 2px solid var(--ss-blue);
  background: var(--surface-section);
  padding: var(--space-5) var(--space-6);
  font-size: 17px;
  line-height: 27px;
}

/* The gate's own voice. Monospaced on purpose: a figure that is not yet stated
   should not look like prose, because prose is what a reader skims. */
.ss-callout--pending {
  border: 1px solid var(--border-pending);
  border-left: 1px solid var(--border-pending);
  background: var(--surface-pending);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 21px;
  letter-spacing: var(--tracking-mono);
  color: var(--text-pending);
}

.ss-note-list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: 17px;
  line-height: 27px;
  max-width: var(--measure-prose);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}