/**
 * Section: Licence card
 *
 * Ported from _mockups/accreditations.html `.ac-licence-wrap` / `.ac-licence` /
 * `.ac-guilloche` / `.ac-wm` / `.ac-seal` / `.ac-licence-head` /
 * `.ac-licence-body` / `.ac-lrow` / `.ac-licence-note`, which is the canonical
 * style block. One page, so there is no drift to resolve.
 *
 * Everything here has exactly one consumer. The shared pieces are global and
 * are NOT re-declared: `.card` is not used at all because this card has its own
 * layered treatment, and `.head`, `.note`, `.eyebrow`, `.ph-badge`,
 * `.container`, `.section` and `.reveal` all come from base.css, components.css
 * and tokens.css.
 *
 * THE SEAL'S CLASS NAMES ARE SCOPED ON PURPOSE. `.sun`, `.peak` and `.p2` are
 * also the class names inside the page hero's ridge SVG, and base.css scopes
 * that one to `.pg-hero-ridge` for this exact reason. A bare `.sun { fill: … }`
 * in either file repaints the other component. Every rule below that touches
 * one of those names is prefixed with `.pasia-licence-seal` or
 * `.pasia-licence-wm`.
 *
 * Tokens only. No hex, no rgb(), no pixel type sizes. The pixel values that
 * remain are the artefact's geometry, which has no token to name it: the sheet
 * offsets, the guilloche band height, the seal and the label column.
 *
 * CONTRAST, measured rather than eyeballed. The section sits on the default
 * mist band and the card itself is `--paper`:
 *
 *   --ink        #14231f  on --paper   16.28:1   the row values
 *   --ink-soft   #45524d  on --paper    8.18:1   the line under the name
 *   --ink-soft   #45524d  on --mist     7.45:1   the note under the card
 *   --ink-faint  #5f6b66  on --paper    5.55:1   the row labels
 *   --gold-deep  #7e622e  on --paper    5.72:1   the kicker, the licence row's
 *                                                label, .ph-badge text and the
 *                                                focus ring
 *   --gold-deep  on the badge's own gold hatch    5.18:1   worst case
 *
 * All clear WCAG AA for normal text. The badge stays on its light form here:
 * the on-dark variant in components.css is for the forest bands and this
 * section never has one.
 */

/* ---------------------------------------------------------------------------
 * The stack of sheets behind the card. A pile of documents, not a photograph.
 * ------------------------------------------------------------------------ */
.pasia-licence-wrap {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
}

.pasia-licence-wrap::before,
.pasia-licence-wrap::after {
  content: "";
  position: absolute;
  inset: 10px 8px -10px;
  z-index: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-m);
}

.pasia-licence-wrap::before { transform: rotate(-1.3deg); }
.pasia-licence-wrap::after  { transform: rotate(.9deg); }

.pasia-licence-card {
  position: relative;
  z-index: var(--z-raised);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}

/* The inset gold keyline, which is what makes it read as a certificate. */
.pasia-licence-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: calc(var(--z-raised) + 1);
  pointer-events: none;
  border: 1.5px solid var(--gold);
  border-radius: calc(var(--r-lg) - 10px);
}

/* ---------------------------------------------------------------------------
 * Engraving: guilloche bands top and bottom, seal watermark bottom right
 * ------------------------------------------------------------------------ */
.pasia-licence-guilloche {
  position: absolute;
  left: 0;
  width: 100%;
  height: 58px;
  z-index: 0;
  color: var(--gold);
  opacity: .26;
  pointer-events: none;
}

.pasia-licence-guilloche.top { top: 0; }
.pasia-licence-guilloche.bottom { bottom: 0; transform: scaleY(-1); }

.pasia-licence-guilloche path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.pasia-licence-guilloche path.faint { opacity: .55; }

.pasia-licence-wm {
  position: absolute;
  right: -52px;
  bottom: -52px;
  width: 250px;
  height: 250px;
  z-index: 0;
  color: var(--gold-deep);
  opacity: .07;
  pointer-events: none;
}

/* Scoped, not bare. See the header. */
.pasia-licence-wm .peak,
.pasia-licence-wm .p2,
.pasia-licence-wm .sun {
  fill: currentColor;
}

.pasia-licence-wm .ring-faint,
.pasia-licence-seal .ring-faint {
  opacity: .55;
}

/* ---------------------------------------------------------------------------
 * Masthead
 * ------------------------------------------------------------------------ */
.pasia-licence-head {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: calc(var(--s-5) + 14px) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
}

.pasia-licence-seal {
  width: 78px;
  height: 78px;
  flex: none;
  color: var(--gold-deep);
}

/* Scoped, not bare. See the header. */
.pasia-licence-seal .peak { fill: var(--forest); }
.pasia-licence-seal .p2   { fill: var(--pine); }
.pasia-licence-seal .sun  { fill: var(--gold); }

.pasia-licence-head .kicker {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.pasia-licence-head .nm {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin-top: .2em;
}

.pasia-licence-head .sub {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-top: .3em;
}

/* ---------------------------------------------------------------------------
 * The rows
 * ------------------------------------------------------------------------ */
.pasia-licence-body {
  position: relative;
  z-index: var(--z-raised);
  margin: 0;
  padding: var(--s-4) var(--s-5) calc(var(--s-5) + 6px);
}

.pasia-licence-row {
  display: grid;
  grid-template-columns: 215px 1fr;
  gap: .3em var(--s-4);
  padding: .8em 0;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}

.pasia-licence-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* `overflow-wrap` ON THE dt AS WELL AS THE dd. The `dd` below has carried it
   since this file was written and the `dt` never did, which is the same
   sibling-not-carried shape the heading rules had: both halves of the row are
   client free text and the row label had no cover. One 66-character
   unbreakable token ran 444px past `.pasia-licence-card`'s clip edge at 320
   and cut the label 541px at 1440, and because the card clips, the document
   never moved and no width sweep saw it.

   `anywhere` and not `break-word`, measured: at 320 the row collapses to a
   single auto track, so the containing block is sized from min-content and
   `break-word` left the overrun at the identical 444px. Same value as the
   `dd`, which is what this component already decided. */
.pasia-licence-row dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.pasia-licence-row dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

/* The licence number itself. The one row this section exists for, so it is set
   apart, and its badge is set larger because it is the single most important
   gap on the site until the client supplies the number. */
.pasia-licence-row.is-hero { padding-block: 1em; }
.pasia-licence-row.is-hero dt { color: var(--gold-deep); }

.pasia-licence-row.is-hero .ph-badge {
  font-size: var(--text-sm);
  padding: .45em 1em;
}

.pasia-licence-note {
  margin: var(--s-5) auto 0;
  max-width: 62ch;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Breakpoints. The canonical set is 1024 / 860 / 620 / 560, tokens.css.
 * ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .pasia-licence-head { align-items: flex-start; }
  .pasia-licence-seal { width: 64px; height: 64px; }
}

@media (max-width: 620px) {
  .pasia-licence-row {
    grid-template-columns: 1fr;
    gap: .15em;
  }
}

@media (max-width: 560px) {
  .pasia-licence-head {
    padding: calc(var(--s-4) + 14px) var(--s-4) var(--s-3);
    gap: var(--s-3);
  }

  .pasia-licence-body {
    padding: var(--s-3) var(--s-4) var(--s-4);
  }
}