/* IGW Channel 0.2.1 — companion stylesheet for igwchannel-0.2.1.js.
 * Copyright © 2026 Interstellar Gateway. All rights reserved.
 *
 * /news and /about-us carry these rules in their page head. The homepage cannot
 * (its head and footer code belong to another owner), so the same rules ship
 * here as a versioned, SHA-384-pinned asset and are linked from the films
 * section. The runtime's class names (igwch-*) are the contract. Delivered
 * bytes must match this file.
 *
 * What 0.2.1 changes, all of it measured on the delivered pages:
 *
 * 1. The card hover is the one in docs/design/SPEC.md §2. It was
 *    border-color rgba(143,215,255,.5) with translateY(-2px) over 180ms: an
 *    accent on a boundary the spec reserves for white, and a lift the spec
 *    rules out. Rest and hover are now the §2 clickable-card treatment —
 *    fill #0b0d0f, edge rgba(255,255,255,.14); hover edge .36, fill #12161a,
 *    150ms ease-out, no translate. The card's fill was #0b1218 and its edge
 *    rgba(160,196,224,.16), neither of which is a system value.
 * 2. The grid is three columns, so the items fill it. auto-fill with a 300px
 *    minimum gave four columns at 1440 (300.3px each), which left the
 *    homepage's six films as a row of four and a row of two — two holes in
 *    the strip — and /news's fifteen as three rows of four and a row of
 *    three. Three columns divides both: 6 = 2 rows, 15 = 5 rows.
 * 3. A strip shows three films on a phone. The homepage films section
 *    measured 2,494px tall at 390 (release checklist E5). The runtime marks
 *    a mount that shows eight or fewer as data-igw-channel-mode="strip";
 *    /news, which shows the whole shelf, is "index" and is untouched.
 * 4. The title is 16 and the channel link 12, which is where the site footer
 *    block has been holding them since the 2026-09-03 type sweep (SPEC,
 *    "Remainder, for the module owners"). They are the module's own values
 *    now; the footer override agrees with them and can be retired.
 */
/* The hidden row carrying the snapshot JSON. Clipped rather than display:none,
   because a collection list that is never laid out can be skipped. */
[data-igw-channel-feed] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-igw-module="igw-channel"] { margin-top: 30px; }

.igwch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.igwch-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #0b0d0f;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.igwch-card:hover,
.igwch-card:focus-visible {
  border-color: rgba(255, 255, 255, .36);
  background: #12161a;
}
.igwch-card:focus-visible { outline: 2px solid #7DB8EA; outline-offset: 2px; }

/* 16:9 reserved before the image arrives, so a fifteen-card grid does not
   reflow as the thumbnails load. */
.igwch-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: #05080b;
  overflow: hidden;
}
.igwch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.igwch-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
  flex: 1 1 auto;
}

.igwch-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #EAF1F8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 6.1:1 measured on the card ground. */
.igwch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: auto;
  font-size: 12px;
  letter-spacing: .02em;
  color: #8A94A0;
}
.igwch-views { font-variant-numeric: tabular-nums; }

.igwch-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-top: 22px;
}
.igwch-channel-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #8fd7ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.igwch-channel-link:hover,
.igwch-channel-link:focus-visible { color: #C8E9FF; }

.igwch-note {
  font-size: 12px;
  line-height: 1.5;
  color: #8A94A0;
  max-width: 62ch;
}

@media (max-width: 991px) {
  .igwch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 479px) {
  .igwch-grid { grid-template-columns: 1fr; gap: 18px; }
  /* A strip is a sample of IGW's work, not the shelf: three cards, not six.
     The index on /news keeps every film. */
  [data-igw-channel-mode="strip"] .igwch-card:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .igwch-card { transition: none; }
}