/* ==========================================================================
   Press kit — layered on top of main.css
   --------------------------------------------------------------------------
   Shares the brand tokens so it is unmistakably Binx, but deliberately reads
   as a DOCUMENT rather than a sales page: denser, flatter, monospace labels,
   every asset stamped with its dimensions, and no marketing furniture (no
   newsletter, no modal, no scroll traps). Journalists are here to grab facts
   and files, not to be converted.
   ========================================================================== */

:root {
  --press-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --press-rule: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------- top bar */

.press-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  background: rgba(18, 19, 23, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--press-rule);
}
.press-bar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}
.press-bar img { height: 26px; width: auto; }

.press-tag {
  padding: 4px 10px;
  border: 1px solid var(--orange);
  border-radius: 4px;
  font-family: var(--press-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}
.press-bar__spacer { margin-left: auto; }
.press-bar__link {
  font-family: var(--press-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.press-bar__link:hover { color: var(--orange); }

/* ------------------------------------------------------------------ head */

.press-head { padding: 54px 0 40px; }

/* min() with 100%, not a bare 460px: a plain max-width here is more specific
   than the global `img { max-width: 100% }` and overrides it, so the logo
   stayed 460px wide inside a 375px viewport and pushed the page sideways. */
.press-head__logo {
  max-width: min(460px, 100%);
  margin-bottom: 26px;
}
.press-head h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 12px;
}
/* When the h1 wraps a logo image, the heading itself contributes no text box
   — collapse its line height so it doesn't add phantom space above the art. */
.press-head__title:has(.press-head__logo) { line-height: 0; margin-bottom: 0; }
.press-head__sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--yellow);
  font-weight: 600;
  margin-bottom: 22px;
}

.press-hero {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--press-rule);
  margin-bottom: 34px;
}

/* Action row — the three things press actually came for */
.press-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 0;
  border-block: 1px solid var(--press-rule);
}

/* --------------------------------------------------------------- section */

.press-section { padding: 46px 0; border-bottom: 1px solid var(--press-rule); }
.press-section:last-of-type { border-bottom: 0; }

/* Descendant, not child: the heading sits inside .wrap, so a child selector
   silently misses it and the label renders as a full-size h2. */
.press-section h2 {
  font-family: var(--press-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--press-rule);
}
.press-section h3 { font-size: 1.15rem; margin-bottom: 10px; }

.press-note {
  font-size: 0.85rem;
  color: var(--text-mute);
  margin-bottom: 18px;
}

/* ------------------------------------------------------------- factsheet */

.factsheet {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 0;
  border: 1px solid var(--press-rule);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.factsheet dt,
.factsheet dd {
  padding: 12px 18px;
  border-bottom: 1px solid var(--press-rule);
  font-size: 0.92rem;
}
.factsheet dt {
  font-family: var(--press-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(255, 255, 255, 0.03);
}
.factsheet dd { color: var(--text); font-weight: 600; }
.factsheet dt:nth-last-of-type(1),
.factsheet dd:nth-last-of-type(1) { border-bottom: 0; }

/* ------------------------------------------------- copyable text blocks */

.copyblock {
  position: relative;
  border: 1px solid var(--press-rule);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.22);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.copyblock p { color: var(--text-soft); font-size: 0.97rem; margin-bottom: 14px; }
.copyblock p:last-of-type { margin-bottom: 0; }

.copyblock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.copyblock__label {
  font-family: var(--press-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.copybtn {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--glass);
  color: var(--text-soft);
  font-family: var(--press-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t);
}
.copybtn:hover { background: var(--glass-hi); color: var(--text); border-color: var(--orange); }
.copybtn.is-done { border-color: #46be78; color: #8ff0b6; }

/* --------------------------------------------------------------- trailer */

.press-trailer {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--press-rule);
  background: var(--bg-deep);
}
.press-trailer iframe { width: 100%; height: 100%; border: 0; display: block; }

.press-trailer--empty {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    var(--bg-deep);
}
.press-trailer--empty .icon { font-size: 2rem; margin-bottom: 12px; opacity: 0.7; }
.press-trailer--empty b {
  display: block;
  font-family: var(--press-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 10px;
}
.press-trailer--empty span {
  display: block;
  max-width: 52ch;
  color: var(--text-mute);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- assets */

.asset-group { margin-bottom: 38px; }
.asset-group:last-child { margin-bottom: 0; }

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.asset {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--press-rule);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--t), transform var(--t);
}
.asset:hover { border-color: rgba(245, 122, 63, 0.5); transform: translateY(-3px); }

/* Fixed height, not aspect-ratio. The asset set mixes 16:9 screenshots with
   600x900 capsules and 1338x97 logos; aspect-ratio is not a hard constraint,
   so portrait art out-grows the box and the grid goes ragged. A fixed box
   plus max-height keeps every card identical and letterboxes the odd shapes.
   The checkerboard shows transparency in the logo PNGs. */
.asset__thumb {
  height: 160px;
  padding: 12px;
  background:
    repeating-conic-gradient(rgba(255,255,255,.03) 0% 25%, transparent 0% 50%) 50% / 18px 18px,
    var(--bg-deep);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.asset__thumb img,
.asset__thumb video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-height: 0;
  min-width: 0;
  object-fit: contain;
}

/* The trailer already has a player in its own section, so its asset card is a
   plain file tile — a second embedded player for the same file is just noise. */
.asset__thumb--file { background: rgba(255, 255, 255, 0.04); }
.asset__filetype { font-size: 2.2rem; opacity: 0.65; }

.press-trailer video { width: 100%; height: 100%; display: block; background: #000; }

/* A video needs room for its controls to be usable — give it the full row
   and a taller box than a still. */
.asset--video { grid-column: 1 / -1; }
.asset--video .asset__thumb {
  height: auto;
  padding: 0;
  background: #000;
}
.asset--video .asset__thumb video {
  width: 100%;
  max-height: 460px;
  aspect-ratio: 16 / 9;
  display: block;
}

.asset__meta {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--press-rule);
}
.asset__name {
  font-family: var(--press-mono);
  font-size: 0.72rem;
  color: var(--text-soft);
  word-break: break-all;
  line-height: 1.4;
}
.asset__dims {
  display: block;
  color: var(--text-mute);
  margin-top: 3px;
}
.asset__dl {
  flex: 0 0 auto;
  font-family: var(--press-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--text-soft);
}
.asset__dl:hover { border-color: var(--orange); color: var(--orange); }

/* ---------------------------------------------------------------- lists */

.press-features { list-style: none; display: grid; gap: 11px; }
.press-features li { position: relative; padding-left: 26px; color: var(--text-soft); font-size: 0.97rem; }
.press-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px; height: 7px;
  background: var(--orange);
  transform: rotate(45deg);
}

.press-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.press-links a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--press-rule);
  border-radius: 4px;
  font-family: var(--press-mono);
  font-size: 0.76rem;
  color: var(--text-soft);
}
.press-links a:hover { border-color: var(--orange); color: var(--orange); }

/* --------------------------------------------------------------- history */

.press-history { max-width: 74ch; margin-bottom: 26px; }
.press-history p {
  color: var(--text-soft);
  font-size: 0.99rem;
  line-height: 1.75;
  margin-bottom: 16px;
}
.press-history p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- AI statement (press-only bits)
   The block itself is a SHARED component defined in main.css, because the
   studio page uses it too. Only the copy button is press-specific.

   Floated, not absolute: absolute positioning lifted it out of flow and it
   sat on top of the opening paragraph. Floating reserves real space, so the
   text wraps around it at every width. */
.ai-statement__copy {
  float: right;
  margin: 0 0 12px 18px;
}
.ai-statement:has(.ai-statement__copy)::after { content: ""; display: block; clear: both; }

@media (max-width: 620px) {
  .ai-statement__copy { float: none; display: block; margin: 0 0 18px; }
}

/* --------------------------------------------------------------- contact */

.press-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(245, 122, 63, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
}
.press-contact h3 { margin-bottom: 8px; }
.press-contact p { color: var(--text-mute); font-size: 0.92rem; line-height: 1.6; }
.press-contact a.mail {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--press-mono);
  font-size: 1rem;
  color: var(--yellow);
}

.press-foot {
  padding: 30px 0 50px;
  border-top: 1px solid var(--press-rule);
  color: var(--text-mute);
  font-size: 0.83rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 760px) {
  .factsheet { grid-template-columns: 1fr; }
  .factsheet dt { border-bottom: 0; padding-bottom: 2px; background: none; }
  .factsheet dd { padding-top: 4px; }
  .press-contact { grid-template-columns: 1fr; }
  .press-actions .btn { width: 100%; }
  .press-bar__link { display: none; }
}

/* ==========================================================================
   Press index (/press/)
   --------------------------------------------------------------------------
   The landing page that lists every game. Cards for games whose kit is not
   written yet are dimmed rather than hidden — press should be able to see
   the whole catalogue and know what to ask for.
   ========================================================================== */

.kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.kit-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--press-rule, var(--line));
  border-radius: var(--r);
  transition: border-color var(--t), transform var(--t);
}
.kit-card:hover { border-color: var(--orange); transform: translateY(-2px); }

.kit-card__shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-deep); }
.kit-card__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kit-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.kit-card__body h3 { font-size: 1.12rem; line-height: 1.25; }
.kit-card__body h3 a { color: var(--text); text-decoration: none; }
.kit-card__body h3 a:hover { color: var(--orange); }

.kit-card__meta {
  font-family: var(--press-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.kit-card__line { color: var(--text-soft); font-size: 0.94rem; }

.kit-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.kit-card__pending { font-size: 0.82rem; color: var(--text-mute); }
.kit-card__pending a { color: var(--text-mute); }
.kit-card__pending a:hover { color: var(--orange); }

/* No kit yet: the art stays legible but visibly secondary. */
.kit-card--pending .kit-card__shot img { opacity: 0.55; filter: saturate(0.7); }
.kit-card--pending:hover .kit-card__shot img { opacity: 0.8; }