/* Resources page styles (15 Sep 2026). Linked from pages/resources.html only. Tokens from css/styles.css. */

/* ── Resources page (spec 15 Sep 2026): Upwork rhythm, WH tokens ───────────── */
/* Hero copy centred in the banner (CP 16 Sep). */
.hero--search .hero__body { margin-inline: auto; text-align: center; }
.hero--search .hero__lead { margin-inline: auto; }
@media (min-width: 640px) {
  /* Scrim follows the copy: dark under the centred title, both edges of the photo clear (CP 16 Sep). */
  .hero--search .hero__scrim { background: linear-gradient(to right,
    transparent,
    color-mix(in oklab, var(--navy-900) 68%, transparent) 35%,
    color-mix(in oklab, var(--navy-900) 68%, transparent) 65%,
    transparent); }
}

.topic-chips     { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.topic-chips .chip { text-decoration: none; }

.rrow            { padding-top: 4rem; }
.rrow__head      { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.rrow__head h2   { font-size: var(--text-display); }
.rrow__head a    { flex-shrink: 0; font-size: var(--text-body-sm); font-weight: 500; }
.rrow__grid      { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 720px) {
  .rrow__grid            { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rrow__grid .rcard     { grid-column: span 2; }          /* small: three across */
  .rrow__grid .rcard--large { grid-column: span 3; }       /* large: two across */
  .rrow__grid--featured .rcard--wide { grid-column: span 6; }
}
/* Mobile screens (CP 16 Sep): the three small cards of each row (Featured included) swipe sideways,
   next card peeking. Same mechanics as the launch homepage .featured-row (css/components.css). */
.rrow__swipe     { display: contents; }                    /* desktop: no effect on grid placement */
@media (max-width: 719px) {
  .rrow__swipe   { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 0.75rem; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -1.25rem; padding-inline: 1.25rem; padding-bottom: 0.25rem; scroll-padding-inline: 1.25rem; }
  .rrow__swipe::-webkit-scrollbar { display: none; }
  .rrow__swipe > .rcard { scroll-snap-align: start; }
}

.rcard           { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.rcard__media    { position: relative; aspect-ratio: 16 / 9; background: var(--muted); overflow: hidden; }
.rcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard__media::after { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--navy-900) 14%, transparent); pointer-events: none; }
.rcard__play     { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 999px; background: #fff; color: var(--primary); z-index: 1; }
.rcard__play svg { width: 1.25rem; height: 1.25rem; margin-left: 0.125rem; }
.rcard__len      { position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--navy-900) 80%, transparent); color: #fff; font-size: var(--text-caption); z-index: 1; }
.rcard__body     { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.25rem 1.25rem; }
.rcard__chips    { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.rcard__meta     { margin-left: auto; align-self: center; font-size: var(--text-caption); color: var(--muted-foreground); white-space: nowrap; }
.rcard__title    { margin-top: 0.625rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rcard__title a  { color: var(--primary); text-decoration: none; }
.rcard__title a::after { content: ""; position: absolute; inset: 0; }   /* whole card is the link */
.rcard__excerpt  { margin-top: 0.5rem; font-size: var(--text-body-sm); color: color-mix(in oklab, var(--foreground) 75%, transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard--small .rcard__excerpt { display: none; }
.articles-all .rcard--small .rcard__excerpt { display: -webkit-box; } /* articles/index.html (CP 17 Sep): every card carries image, headline and description */
/* Mobile screens (CP 17 Sep, Guardian app list): no card box. Thumbnail left, topic label in coral, serif headline,
   read time under it, a hairline between items. */
@media (max-width: 719px) {
  .articles-all .rrow__grid { gap: 0; margin-top: 0.5rem; }
  .articles-all .rcard--small { display: grid; grid-template-columns: 32% minmax(0, 1fr); column-gap: 0.875rem; align-items: start;
    background: none; border: 0; border-top: 1px solid var(--grey-200); border-radius: 0; padding: 0.875rem 0; }
  .articles-all .rcard--small:first-child { border-top: 0; }
  .articles-all .rcard--small .rcard__media { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
  .articles-all .rcard--small .rcard__body { padding: 0; }
  .articles-all .rcard--small .rcard__chips { display: contents; }               /* pill and meta become body children so they can sit either side of the title */
  .articles-all .rcard--small .rcard__chips .pill { order: 0; background: none; padding: 0; border-radius: 0; color: var(--coral-700); font-size: var(--text-body-sm); font-weight: 600; }
  .articles-all .rcard--small .rcard__title { order: 1; margin-top: 0.25rem; font-size: 1.125rem; line-height: 1.25; -webkit-line-clamp: 4; }
  .articles-all .rcard--small .rcard__meta { order: 2; margin: 0.5rem 0 0; align-self: start; }
  .articles-all .rcard--small .rcard__excerpt { display: none; }
}
.rcard--large .rcard__title { font-size: 1.375rem; }
.rcard--coming   { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.rcard--coming .rcard__title { color: var(--muted-foreground); }
@media (hover: hover) {
  .rcard:has(.rcard__title a):hover { border-color: var(--primary); }
}
@media (min-width: 720px) {
  .rcard--wide   { flex-direction: row; }
  .rcard--wide .rcard__media { flex: 0 0 55%; aspect-ratio: auto; min-height: 20rem; }
  .rcard--wide .rcard__body  { justify-content: center; padding: 2rem; }
  .rcard--wide .rcard__title { font-size: var(--text-display); -webkit-line-clamp: 3; }
  .rcard--wide .rcard__excerpt { -webkit-line-clamp: 4; font-size: var(--text-body); }
}

.band--tools .band__inner { display: grid; gap: 2rem; align-items: center; text-align: left; max-width: var(--w-5xl); }
.band--tools img { width: 100%; height: auto; border-radius: var(--radius-lg); }
@media (min-width: 720px) { .band--tools .band__inner { grid-template-columns: 1fr 1fr; } }

.faq-groups      { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.faq-group[hidden] { display: none; }