/* x1-resources - /resources, the resource library (1001 additional pages).
   Design A "annual report": each resource is a catalogue entry beside a cover built in CSS. */

.x1-resources .rs-lib {padding-top: 0;}
.x1-resources .d29-hero + .rs-lib {border-top: 0;}

/* catalogue entries */
.x1-resources .rs-entry {align-items: center; row-gap: var(--stack-m);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem); border-top: 1px solid var(--rule);}
.x1-resources .rs-entry:last-child {padding-bottom: 0;}
.x1-resources .rs-text {grid-column: 1 / span 5;}
.x1-resources .rs-media {grid-column: 7 / span 6;}
.x1-resources .rs-tag {display: inline-flex; align-items: center; gap: .6rem; margin-bottom: var(--stack-s);
  font: 600 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent);}
.x1-resources .rs-tag::before {content: ""; width: 1.75rem; height: 1px; background: currentColor;}
.x1-resources .rs-text .h3 {margin-bottom: 1.1rem; max-width: 18ch; font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.08;}
.x1-resources .rs-text p:not(.rs-tag) {max-width: var(--measure); text-wrap: pretty; color: var(--text);}
.x1-resources .rs-text .d29-cta-row {margin-top: var(--stack-m);}
.x1-resources .rs-links {gap: 1rem 2rem;}

/* covers - the signature: each resource as a report cover on the shelf */
.x1-resources .rs-cover {position: relative; display: flex; flex-direction: column; gap: .5rem;
  max-width: 30rem; margin-inline: auto; aspect-ratio: 4 / 3.1; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px 14px 14px 6px;
  box-shadow: inset 10px 0 0 var(--tint), var(--shadow); color: var(--ink); text-decoration: none;
  transition: transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease);}
.x1-resources .rs-cover::after {content: ""; position: absolute; inset: auto 0 -10px 18px; height: 10px; z-index: -1;
  border-radius: 0 0 12px 6px; background: var(--tint); border: 1px solid var(--rule); border-top: 0;}
.x1-resources .rs-entry:hover .rs-cover {transform: translateY(-4px);}
.x1-resources .rs-cover-k {padding-left: .9rem; font: 600 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted);}
.x1-resources .rs-cover-t {padding-left: .9rem; font: 400 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1.08 var(--serif); letter-spacing: -.015em; color: var(--ink);
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule); margin-bottom: .4rem;}

.x1-resources .rs-toc {list-style: none; margin: 0; padding: 0 0 0 .9rem; counter-reset: none;}
.x1-resources .rs-toc li {display: flex; align-items: baseline; gap: .6rem; padding-block: .32rem; font-size: var(--fs-small); color: var(--text);}
.x1-resources .rs-toc li::after {content: ""; flex: 1; order: 2; border-bottom: 1px dotted rgba(0,0,0,.25); transform: translateY(-.25em);}
.x1-resources .rs-toc li::before {content: ""; order: 3; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); opacity: .85;}

.x1-resources .rs-boxes {list-style: none; margin: 0; padding: 0 0 0 .9rem; display: grid; gap: .55rem;}
.x1-resources .rs-boxes li {display: flex; align-items: center; gap: .75rem; font-size: var(--fs-body); color: var(--text);}
.x1-resources .rs-boxes li::before {content: ""; flex: none; width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--ink); border-radius: 3px;}
.x1-resources .rs-boxes li.is-done::before {background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center/80% no-repeat; border-color: var(--accent);}

/* film */
.x1-resources .rs-film {margin: 0;}
.x1-resources .rs-video {display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-img);
  background: var(--tint); box-shadow: var(--shadow); object-fit: cover;}
.x1-resources .rs-chips {display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem;}
.x1-resources .rs-chips span {font-size: .8125rem; font-weight: 600; color: var(--ink); padding: .35rem .8rem;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);}
.x1-resources .rs-chips span:nth-child(2) {border-color: var(--accent); color: var(--accent);}

/* training vs review */
.x1-resources .rs-pair {display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1rem; max-width: 34rem; margin-inline: auto;}
.x1-resources .rs-pair-c {display: flex; align-items: flex-end; min-height: 11rem; padding: 1.5rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--tint);}
.x1-resources .rs-pair-c.is-yours {background: var(--surface); border-color: var(--accent); box-shadow: var(--shadow);}
.x1-resources .rs-pair-k {font: 400 clamp(1.375rem, 1.1rem + .9vw, 1.875rem)/1.15 var(--serif); color: var(--ink); text-wrap: balance;}
.x1-resources .rs-pair-c.is-yours .rs-pair-k {color: var(--accent);}
.x1-resources .rs-pair-ne {align-self: center; font: 400 2.25rem/1 var(--serif); color: var(--muted);}

/* the pull line */
.x1-resources .rs-aha {background: var(--tint); border-top: 0 !important;}
.x1-resources .rs-aha-q {margin-inline: auto; max-width: 22ch; padding: 0; border: 0; text-align: center; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);}
.x1-resources .rs-aha-q::before {content: ""; display: block; width: 3rem; height: 1px; margin: 0 auto 1.75rem; background: var(--accent);}

/* FAQ */
.x1-resources .rs-faq {border-top: 0 !important; padding-bottom: var(--stack-l);}
.x1-resources .rs-faq-h {grid-column: 1 / span 4;}
.x1-resources .rs-faq-l {grid-column: 5 / span 8;}
.x1-resources .close {padding-bottom: var(--section);}

@media (max-width: 960px) {
  .x1-resources .rs-text, .x1-resources .rs-media, .x1-resources .rs-faq-h, .x1-resources .rs-faq-l {grid-column: 1 / -1;}
  .x1-resources .rs-cover, .x1-resources .rs-pair {margin-inline: 0;}
  .x1-resources .rs-faq-h {margin-bottom: var(--stack-s);}
}
@media (max-width: 560px) {
  .x1-resources .rs-cover {aspect-ratio: auto;}
  .x1-resources .rs-pair {gap: .6rem;}
  .x1-resources .rs-pair-c {min-height: 8.5rem; padding: 1rem;}
  .x1-resources .rs-pair-ne {font-size: 1.75rem;}
  .x1-resources .rs-links {flex-direction: column; align-items: flex-start;}
}
@media (prefers-reduced-motion: reduce) {
  .x1-resources .rs-cover {transition: none;}
  .x1-resources .rs-entry:hover .rs-cover {transform: none;}
}