/* Page-specific rules for /wallpapers/, the press kit. The design system is
 * public/css/aiforce.css.
 *
 * Three things live here and nowhere else: the thumbnail grid, the large view it opens
 * into, and the asset grid the marks are offered in. None is in the design system,
 * because none has a second caller — the one other modal on the site, the recruiting
 * overlay, is page-scoped in css/enlist.css for the same reason, and this file follows it
 * rather than inventing a second idiom.
 */

.wp-callout {
  margin-top: var(--s-5);
}

.wp-callout__text {
  margin: 0;
  max-width: 78ch;
}

/* --- The thumbnail grid --------------------------------------------------- */

.wp-grid {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  /* Three across at the column's full width, one fewer whenever a plate would fall
     under 330px: the same rule as the ballot's cards. */
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}

.wp-cell {
  min-width: 0;
}

/* The whole tile is the link: one target, one focus ring, and a caption that is part of
   the accessible name rather than a second stop beside it. */
.wp-thumb {
  display: block;
  padding: 6px 6px var(--s-3);
  color: inherit;
  text-decoration: none;
  background: linear-gradient(150deg, #232949, #12172e);
  border: 1px solid var(--c-line-brass);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  transition: border-color var(--dur-1) var(--ease);
}

/* Hover changes colour and border and nothing else: the soft shadow and the lift the
   design system allows a poster frame are not for a tile this small, and the grid would
   twitch under the pointer. */
.wp-thumb:hover,
.wp-thumb:focus-visible {
  border-color: var(--c-brass);
}

.wp-thumb__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--c-navy-deep);
}

.wp-thumb__title {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  color: var(--c-brass);
  transition: color var(--dur-1) var(--ease);
}

.wp-thumb:hover .wp-thumb__title,
.wp-thumb:focus-visible .wp-thumb__title {
  color: var(--c-brass-bright);
}

/* --- The large view ------------------------------------------------------- */

.wp-view {
  /* The plate's width, capped so a 16:9 image never takes more than 58% of the viewport
     height. It is what keeps the whole view — heading, plate and controls — inside a
     375px phone and a short laptop without the box ever scrolling. */
  --wp-plate-w: calc(58dvh * 16 / 9);
  width: min(1100px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  max-height: min(92dvh, calc(100vh - 2 * var(--s-4)));
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--c-ink);
  background: var(--c-panel);
  border: var(--bw) solid var(--c-brass);
  border-radius: var(--radius);
}

/* The UA rule that hides a closed dialog is display: none; a display of our own would
   override it and leave the plate sitting on the page. Only the open state gets one. */
.wp-view[open] {
  display: flex;
  flex-direction: column;
}

.wp-view::backdrop {
  background: var(--c-scrim);
  backdrop-filter: blur(3px);
}

/* The page behind an open overlay does not scroll under it. */
html:has(.wp-view[open]) {
  overflow: hidden;
}

/* The inner panel fills the dialog box exactly, so a click whose target is the dialog
   element itself landed on the backdrop and nowhere else. */
.wp-view__inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(var(--s-4), 3vw, var(--s-5));
}

/* The plate is the measure of the view: on a wide screen it is capped by height rather
   than by the box, and the heading and the controls are held to the same column so the
   three read as one card and not as a picture floating in a panel. */
.wp-view__head,
.wp-view__img,
.wp-view__foot {
  max-width: var(--wp-plate-w);
  margin-inline: auto;
}

.wp-view__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.wp-view__heading {
  min-width: 0;
}

.wp-view__title {
  margin: var(--s-1) 0 0;
}

.wp-view__close {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--c-brass);
  background: transparent;
  border: var(--bw) solid var(--c-line-brass);
  border-radius: var(--radius);
  cursor: pointer;
}

.wp-view__close:hover {
  color: var(--c-brass-bright);
  border-color: var(--c-brass);
}

.wp-view__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--c-navy-deep);
  border: 1px solid var(--c-line-brass);
}

.wp-view__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.wp-view__step {
  margin: 0;
}

.wp-view__get {
  margin: 0;
}

@media (max-width: 559px) {
  .wp-view__foot {
    display: grid;
  }

  .wp-view__step {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .wp-view__get .aif-btn {
    width: 100%;
  }
}

/* --- The asset grid ------------------------------------------------------- */

/* The stamps and the marks, one tile per asset: the drawing, its name, and a download
   for every size it ships in. Denser than the plate grid because the subjects are small
   and square, and there is no dialog behind them — every link here hands over a file. */
.wp-kit {
  list-style: none;
  /* Four stamps and two marks: two columns, then four, so each group fills whole rows
     and shares the gallery's edges. */
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4) var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
  .wp-kit {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.wp-kit__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  text-align: center;
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius);
}

/* One box for every asset whatever its native size, so a 32px mark and a 512px roundel
   sit on the same baseline. The stamp is transparent and the roundel is cut to a circle;
   both read on the panel without a plate of their own. */
.wp-kit__img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.wp-kit__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  color: var(--c-ink);
}

/* The sizes are the machine's own annotation, and each is its own target. */
.wp-kit__get {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-3);
  margin: auto 0 0;
  padding-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
}

.wp-kit__get a {
  display: inline-block;
  min-height: 24px;
  padding: 2px 6px;
  color: var(--c-brass);
  text-decoration: underline;
  text-decoration-color: var(--c-line-brass);
}

.wp-kit__get a:hover,
.wp-kit__get a:focus-visible {
  color: var(--c-brass-bright);
  text-decoration-color: var(--c-brass);
}

/* --- Stamps -----------------------------------------------------------------------
   A rubber stamp is ink on paper and is unreadable at the 88px a mark gets. These sit
   wider, on a bone plate, which is also the ground they were drawn against. */
.wp-kit--stamps .wp-kit__img {
  width: 100%;
  height: auto;
  max-width: 260px;
  aspect-ratio: 720 / 460;
  padding: var(--s-3);
  background: var(--c-bone);
  border: 1px solid var(--c-bone-line);
  border-radius: var(--radius);
}


/* Three sections with no rule between them: the space between two is one section's
   worth, not two, so each after the first drops its top padding. */
#stamps,
#marks {
  padding-block-start: 0;
}