/* ============================================================
   Resources group — ad-specs.html, faq.html, genlypedia.html and
   404.html (2026-10-08). Carries the approved homepage language
   (home.css, theme.css) onto the reference pages: white cards on
   the one light band, navy-tinted dark cards on black, Source Sans
   card titles, pill chips, and the motion.js wipes.

   Loaded after theme.css by these four pages only. Every rule is
   scoped to a component class used only here (rs-*, .specs-group,
   .faq, .posts, .res) so nothing leaks.
   ============================================================ */

/* Grid children may shrink below their content's width. */
.rs-intro > *, .rs-net > *, .posts > *, .res > * { min-width: 0; }

/* The middle band: dark, as on the homepage (owner, 2026-10-08: dark
   bands, white only for long reading). A lifted near-black so it stays a
   step next to the #05080F hero; raised cards on it. The wipe panel is
   the band's own ground. overflow is visible again (on-navy hides it)
   so the sticky screenshots on ad-specs keep working. */
.theme .rs-specs, .theme .rs-posts {
  background: #0A111C; color: var(--sa-ink); --wipe-bg: #0A111C;
  overflow: visible;
  padding-block: clamp(64px, 7.5vw, 104px);
}


/* ============================================================
   Ad specs. Each network is a raised dark card: the spec tables on
   the left, the placement screenshot on the right (it stays in view
   while the tables scroll past on desktop). The screenshots and the
   network graphic were drawn for white, so each keeps a white panel.
   ============================================================ */
.theme .specs-group { margin-top: 0; display: grid; gap: 24px; color: var(--sa-ink); }

/* site.css styled these as bare rules; the cards replace that. */
.theme .specs-group h2 { padding-bottom: 0; border-bottom: 0; }
.theme .specs-group h3 { margin-top: 0; }
.theme .specs-group p { max-width: none; margin-top: 0; }
.theme .specs-group img { margin-top: 0; border: 0; border-radius: 6px; width: 100%; height: auto; }

.rs-intro, .rs-net {
  background: #121D30; border: 1px solid var(--sa-line); border-radius: 12px;
  padding: clamp(24px, 3vw, 32px);
}
/* The text leads; the network graphic sits beside it at its top. */
.rs-intro { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: clamp(24px, 3.5vw, 40px); }
.theme .rs-intro p { font-size: 20px; line-height: 1.5; color: var(--sa-ink); max-width: 34rem; }
.rs-intro__fig { margin: 0; background: #FFFFFF; border-radius: 10px; padding: clamp(12px, 2vw, 20px); }
.rs-intro__fig img { max-width: 400px; margin-inline: auto; }
@media (min-width: 900px) { .rs-intro { grid-template-columns: 1.1fr 0.9fr; } }

.rs-net { display: grid; gap: 28px clamp(32px, 5vw, 72px); }
.theme .rs-net h2 {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.12; font-weight: 500;
  letter-spacing: -0.025em; color: var(--sa-ink);
}
.rs-net__specs { display: grid; gap: 16px; align-content: start; }
.rs-net__fig {
  margin: 0; background: #FFFFFF; border-radius: 10px;
  padding: clamp(16px, 2.5vw, 28px);
  align-self: start;
  --wipe-bg: #121D30;   /* the figure sits inside the raised card */
}
.rs-net__fig img { box-shadow: 0 0 0 1px #E3E8EF; }
@media (min-width: 960px) {
  .rs-net {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas: "head fig" "specs fig";
    grid-template-rows: auto 1fr;
  }
  .rs-net h2 { grid-area: head; }
  .rs-net__specs { grid-area: specs; }
  .rs-net__fig { grid-area: fig; position: sticky; top: 104px; }
  /* theme.css gives wipe targets position:relative; keep the figure sticky. */
  .motion-on .rs-net__fig[data-wipe] { position: sticky; }
}

/* One spec table: a header strip, then label / value rows. */
.rs-spec { border: 1px solid var(--sa-line); border-radius: 10px; overflow: hidden; }
.theme .rs-spec h3 {
  font-family: var(--sa-body); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
  color: var(--sa-ink); background: #172438;
  padding: 14px 20px; border-bottom: 1px solid var(--sa-line);
}
.rs-spec dl { margin: 0; }
.rs-spec dl > div {
  display: grid; grid-template-columns: minmax(8.5rem, 0.8fr) minmax(0, 1.2fr); gap: 4px 20px;
  padding: 12px 20px; font-size: 16px; line-height: 1.45;
}
.rs-spec dl > div + div { border-top: 1px solid var(--sa-line); }
.rs-spec dt { color: var(--sa-muted); }
.rs-spec dd { margin: 0; color: var(--sa-ink); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .rs-spec dl > div { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding-inline: 16px; gap: 4px 14px; font-size: 15px; }
  .theme .rs-spec h3 { padding-inline: 16px; }
}
/* Only the narrowest phones stack label over value. */
@media (max-width: 359px) {
  .rs-spec dl > div { grid-template-columns: 1fr; padding-inline: 16px; }
  .theme .rs-spec h3 { padding-inline: 16px; }
}


/* ============================================================
   FAQ. The accordion itself is the shared one in theme.css (the
   homepage's .sa-acc); this is only its place on the page: on the
   hero's left edge, at a width where the answers fill the card.
   ============================================================ */
.theme .rs-faq { padding-block: clamp(64px, 7.5vw, 104px); }
.theme .faq { margin: 0; border-top: 0; }
.theme .faq details > :not(summary) { max-width: none; }
.rs-faq__item { border-radius: 10px; }   /* the wipe panel follows the item's corners */


/* ============================================================
   Genlypedia. Resource cards in the shape of StackAdapt's "Learn
   what's next": image on top, a kind chip and the date, the title,
   and an arrow, as raised dark cards on the middle band.
   ============================================================ */
.theme .posts { gap: 24px; }
.theme .post {
  display: flex; flex-direction: column;
  background: #121D30; border: 1px solid var(--sa-line); border-radius: 12px; overflow: hidden;
  color: var(--sa-ink);
  padding-bottom: 76px;   /* room for the arrow */
}
.theme .post__img { aspect-ratio: 16 / 9; border-radius: 0; margin-bottom: 0; background: var(--sa-card); }
.theme .post__img::after { content: none; }   /* the previous design's teal tick */
.theme .post__img img { transition: transform 0.6s cubic-bezier(.16, 1, .3, 1); }
.theme .post:hover .post__img img { transform: scale(1.04); }

.theme .post__kind {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0; padding: 24px 24px 0;
  font-size: 14px; color: var(--sa-muted);
}
.rs-chip {
  font-size: 13px; font-weight: 600; letter-spacing: 0.005em; color: var(--sa-sky);
  background: rgba(95,217,199,0.10); border: 1px solid rgba(95,217,199,0.40); border-radius: 64px; padding: 3px 12px;
}
/* The middot between kind and date stays for screen readers and
   copy-paste; the chip already separates them on screen. */
.rs-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme .post__title {
  margin: 0; padding: 16px 24px 0;
  font-family: var(--sa-body); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--sa-ink); text-wrap: pretty;
}
.theme .post:hover .post__title { color: var(--sa-sky); }
/* The arrow, a round button pinned to the card's foot. ::after is
   the wipe panel under motion, so the arrow uses ::before. */
.theme .post::before {
  content: ""; position: absolute; left: 24px; bottom: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #6B7C94;   /* 3:1+ on the card */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F5F8FC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme .post { position: relative; }
/* Gold with a navy arrow on hover and focus, as on the 404 cards. */
.theme .post:hover::before, .theme .post:focus-visible::before {
  border-color: var(--gold); background-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23062B59' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
}
.theme .post:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Stagger per row, not across the whole grid (motion.js numbers every
   card in the group inline, so the row position has to win with
   !important). One column: each card arrives on its own. */
.theme .posts > [data-wipe], .theme .res > [data-wipe] { --wipe-delay: 0ms !important; }
@media (min-width: 620px) and (max-width: 999px) {
  .theme .posts > [data-wipe]:nth-child(2n) { --wipe-delay: 90ms !important; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .theme .res > [data-wipe]:nth-child(2n) { --wipe-delay: 90ms !important; }
}
@media (min-width: 1000px) {
  .theme .posts > [data-wipe]:nth-child(3n+2), .theme .res > [data-wipe]:nth-child(3n+2) { --wipe-delay: 90ms !important; }
  .theme .posts > [data-wipe]:nth-child(3n), .theme .res > [data-wipe]:nth-child(3n) { --wipe-delay: 180ms !important; }
}


/* ============================================================
   404. Both sections on black, the way the homepage runs, with the
   destinations as dark cards that wipe in.
   ============================================================ */
.theme .rs-lost { padding-block: clamp(64px, 7.5vw, 104px); }
/* At the homepage's section-heading scale. */
.theme .rs-lost .h-sub {
  font-size: clamp(2rem, 3.3vw, 2.75rem); line-height: 1.14; letter-spacing: -0.028em; font-weight: 500;
  color: var(--sa-ink); max-width: 22ch;
}
.theme .res {
  margin-top: clamp(32px, 4vw, 48px); border-top: 0;
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .theme .res { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .theme .res { grid-template-columns: repeat(3, 1fr); } }
.theme .res a {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 168px;
  padding: 24px 24px 76px;
  background: var(--sa-card); border: 0; border-radius: 12px;
  color: var(--sa-ink);
  transition: background-color 0.25s var(--ease);
}
.theme .res a:hover { padding-left: 24px; background: #13203A; color: var(--sa-ink); }
.theme .res__kind { font-size: 14px; font-weight: 600; color: var(--sa-sky); }
.theme .res__title { font-size: 22px; }   /* family and weight: theme.css card title */
.theme .res a::before {
  content: ""; position: absolute; left: 24px; bottom: 24px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #6B7C94;   /* 3:1+ on the card */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F5F8FC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme .res a:hover::before, .theme .res a:focus-visible::before {
  border-color: var(--gold);
  background-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23062B59' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
}

/* Phones: compact rows with the arrow on the right. */
@media (max-width: 639px) {
  .theme .res a { min-height: 0; padding: 18px 68px 18px 20px; gap: 4px; }
  .theme .res a:hover { padding-left: 20px; }
  .theme .res a::before { left: auto; right: 20px; bottom: auto; top: 50%; margin-top: -18px; }
  .theme .res__title { font-size: 20px; }
}

@media print {
  .theme .post::before, .theme .res a::before { display: none; }
}