/* ==========================================================================
   Efsus Games - press kit pages (under-the-disco-lights-press-kit.html)

   Loaded after css/site.css and before the game's theme. A press kit is a
   reading page in its game's theme: <main class="pk-page"> carries the
   data-theme. This file is the layout, and plain enough to stand in the
   studio theme; the skin is in the theme's own file, under PRESS KIT PAGE
   (css/theme-disco.css). It stands on the legal page's layout (LEGAL PAGE in
   css/site.css): the contents list stays in view on the left and the
   sections are numbered in Roman numerals. What it adds is what a press kit
   has and a policy does not: the cover, the fact sheet, and the pictures
   with their download links.

   The order of a press kit page:
   cover, fact sheet, description, trailer, logos, key art, screenshots,
   developer, social media, contact.
   ========================================================================== */

.pk-page { background: var(--sc-canvas); color: var(--sc-ink); }

/* ---------------------------------------------------------------- cover --
   The game's key art as a strip across the top, fading into the page. The
   title sits on the faded part. */
.pk-cover {
  position: relative; isolation: isolate;
  padding-top: calc(var(--bar-h) + clamp(7rem, 21vw, 19rem));
  padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
}
.pk-cover__art {
  position: absolute; inset: 0 0 auto 0; z-index: -1; overflow: hidden;
  height: calc(var(--bar-h) + clamp(11rem, 29vw, 26rem));
}
.pk-cover__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.pk-cover__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 72%, var(--sc-canvas) 100%);
}
/* a cover whose key art already carries the game's name: the picture starts
   under the top bar and is shown as far down as its counter, so the name on
   it is whole. The written title stays for screen readers and is not drawn
   a second time; the rest sits on the picture's faded foot. */
.pk-cover--titled { --pk-art-h: min(51.14vw, 62svh); padding-top: calc(var(--bar-h) + var(--pk-art-h) - clamp(1rem, 3vw, 3rem)); }
.pk-cover--titled .pk-cover__art { top: var(--bar-h); height: var(--pk-art-h); }
.pk-cover--titled .pk-cover__art img { object-position: 50% 18%; }
.pk-cover--titled .pk-cover__art::after { background: linear-gradient(to bottom, transparent 66%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 88%, var(--sc-canvas) 100%); }
.pk-cover--titled h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pk-cover .lede { margin-top: clamp(1rem, 2.4vh, 1.5rem); max-width: 44ch; color: var(--sc-ink-soft); }
.pk-cover .actions { margin-top: clamp(1.5rem, 4vh, 2.25rem); align-items: center; }
/* the size of a download, said quietly inside its button */
.pk-size { margin-left: 0.6rem; font-weight: 500; opacity: 0.7; }

/* --------------------------------------------------------------- layout --
   The legal page's two columns, with a wider one for the pictures. Text
   keeps its reading width inside it. */
@media (min-width: 861px) {
  .pk { grid-template-columns: minmax(12rem, 15rem) minmax(0, 60rem); gap: clamp(2.5rem, 5vw, 5.5rem); }
}
.pk .legal__body > section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pk .legal__body p, .pk .legal__body ul, .pk-facts { max-width: 44rem; }
.pk .legal__body h3 {
  margin: clamp(2rem, 5vh, 2.75rem) 0 0;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.pk .legal__body h2 + h3 { margin-top: 1.5rem; }

/* ----------------------------------------------------------- fact sheet -- */
.pk-facts { margin: 1.5rem 0 0; }
.pk-facts > div {
  display: grid; grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr); gap: 0.25rem 1.5rem;
  padding-block: 0.85rem; border-top: 1px solid var(--hair);
}
.pk-facts > div:last-child { border-bottom: 1px solid var(--hair); }
.pk-facts dt { padding-top: 0.32em; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.pk-facts dd { margin: 0; font-weight: 500; line-height: 1.5; color: var(--sc-ink); }
.pk-facts dd span { color: var(--sc-ink-soft); font-weight: 400; }
/* a value still to come: shown, but quieter */
.pk-tba { font-style: italic; opacity: 0.62; }

/* ------------------------------------------------------------- pictures --
   A picture, and under it what the file is and a link that downloads the
   full-size one. .pk-item__view is the picture itself: a button that opens
   it large (the lightbox, js/site.js) or, for a logo, the download link. */
.pk-grid { --pk-gap-x: clamp(1rem, 2vw, 1.5rem); display: grid; gap: clamp(1.25rem, 2.2vw, 1.75rem) var(--pk-gap-x); margin-top: 1.75rem; align-items: start; }
.pk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the logos: as many square plates to a row as fit */
.pk-grid--plates { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
/* the wide key art beside the tall one: both end up the same height */
.pk-grid--pair { grid-template-columns: minmax(0, 920fr) minmax(0, 359fr); }
.pk-item { margin: 0; }
.pk .legal__body h2 + .pk-item { margin-top: 1.75rem; }
.pk-grid + .pk-item, .pk-item + .pk-grid { margin-top: clamp(1.25rem, 2.2vw, 1.75rem); }
.pk-item__view {
  display: block; position: relative; width: 100%; padding: 0; overflow: hidden; cursor: zoom-in;
  color: inherit; font: inherit;
  background: var(--sc-surface); border: 1px solid var(--hair-strong);
  transition: border-color 220ms var(--ease-out);
}
.pk-item__view img { display: block; width: 100%; height: auto; transition: scale 600ms var(--ease-out); }
.pk-item__view:hover, .pk-item__view:focus-visible { border-color: var(--sc-ink); }
.pk-item__view:hover img { scale: 1.03; }
/* a logo stands in a square with no frame, straight on the page. The whole
   picture is fitted into the middle of the square, whatever its shape; the
   logo files carry their own clear margin, so the gap here is small. */
.pk-item__view--plate { aspect-ratio: 1; border: 0; background: none; cursor: pointer; }
.pk-item__view--plate:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.pk-item__view--plate img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; }
.pk-item__view--plate:hover img { scale: 1; }
/* a wide logo takes two squares side by side and is as tall as one of them */
.pk-item--wide { grid-column: span 2; container-type: inline-size; }
.pk-item--wide .pk-item__view--plate { aspect-ratio: auto; height: calc((100cqi - var(--pk-gap-x)) / 2); }
/* under a name of its own, a row of logos sits closer */
.pk .legal__body h3 + .pk-grid { margin-top: 1rem; }
/* the dark logo cannot be seen on a dark page: it keeps a light ground */
.pk-item__view--bone { background: var(--sc-ink); }
.pk-item figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
  padding-top: 0.7rem; font-size: 0.8125rem; line-height: 1.4; color: var(--sc-ink-soft);
}
.pk-item figcaption strong { display: block; font-weight: 600; color: var(--sc-ink); }
/* under a plate there is no room beside the words: the link goes below them */
.pk-grid--plates figcaption { display: grid; justify-items: start; gap: 0.35rem; }
/* a link that saves a file: an arrow down, then what it is */
.pk-get {
  flex: none; font-weight: 600; color: var(--sc-ink); white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 0.28em;
  transition: color 200ms, text-decoration-color 200ms;
}
.pk-get::before { content: "\2193"; display: inline-block; margin-right: 0.4em; color: var(--sc-accent); }
.pk-get:hover { color: var(--sc-accent); text-decoration-color: var(--sc-accent); }
/* a file still to come: an empty plate */
.pk-soon {
  display: grid; place-items: center; aspect-ratio: 1; padding: 1rem; text-align: center;
  border: 1px dashed var(--hair-strong); font-size: 0.875rem; color: var(--sc-ink-soft);
}

/* -------------------------------------------------------------- trailer -- */
.pk-video { display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 1.75rem; background: #000; border: 1px solid var(--hair-strong); }
.pk-links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 0.9rem; font-size: 0.875rem; }

/* --------------------------------------------- social media and contact --
   The homepage's social buttons, two to a row. They are a list inside the
   reading column, so the column's own list marker is taken off them. */
.pk .contact__social { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; max-width: none; }
.pk .contact__social li { padding-left: 0; margin-top: 0; }
.pk .contact__social li::before { content: none; }
.pk .contact__mail { margin-top: 1.4rem; font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem); }

/* --------------------------------------------------------------- footer --
   The game page's small print (.gp-foot__base in css/site.css) closes the
   page; here it has no contact block above it. */
.pk-foot { margin-top: clamp(3rem, 8vh, 6rem); padding-top: 0; }
.pk-foot .gp-foot__base { margin-top: 0; border-top: 0; }

@media (max-width: 560px) {
  .pk-grid--2, .pk-grid--pair, .pk .contact__social { grid-template-columns: 1fr; }
  .pk-grid--plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-facts > div { grid-template-columns: 1fr; }
  /* the download button says a lot: on a narrow phone it may take two lines */
  .pk-cover .actions .btn { flex: 1 1 auto; flex-wrap: wrap; gap: 0.2rem 0.6rem; padding-block: 0.8rem; white-space: normal; text-align: center; line-height: 1.3; }
  .pk-cover .pk-size { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-item__view img { transition-duration: 1ms; }
  .pk-item__view:hover img { scale: 1; }
}