/* Resource library (resource.aminfoundation.io). Uses the core tokens; every selector is scoped under .res-*. */

/* ---- Library: filters and cards ---------------------------------------------------------------------------- */
.res-filters { margin: 0 0 1.75rem; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-soft); }
.res-filter-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.res-field-q { grid-column: 1 / -1; }
@media (min-width: 900px) { .res-field-q { grid-column: span 2; } }
.res-field label { font-size: .95rem; }
.res-field input[type="search"], .res-field select { width: 100%; min-height: 48px; padding: .6rem .9rem; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; font-size: 1rem; }
.res-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F5F69' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.4rem; }
.res-field input:focus, .res-field select:focus { outline: none; border-color: var(--teal-700); box-shadow: 0 0 0 3px var(--teal-100); }
.res-filter-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.js .res-filters [type="submit"] { display: none; }
.res-results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 1rem; }
.res-results-head h2 { font-size: 1.4rem; }
.res-status { margin: 0; color: var(--ink-2); font-weight: 700; }
.res-grid { margin: 0; }
/* The 54-item browse grid keeps four narrow columns on wide screens (site.css caps .grid-3 at three). */
.res-grid.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.res-card { margin: 0; }
.res-card .rcard-body { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.res-card-img { border-bottom: 1px solid var(--line); }
.res-card-page { object-position: top; background: #fff; }
.res-card-art { display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--teal-50), #fff); color: var(--teal-700); border-bottom: 1px solid var(--line); }
.res-card-art-printables { background: linear-gradient(135deg, var(--sun-50), #fff); color: var(--sun-700); }
.res-card-art-infographics { background: linear-gradient(135deg, var(--coral-50), #fff); color: var(--coral-700); }
.res-card-art-lessons { background: linear-gradient(135deg, var(--navy-50), #fff); color: var(--navy); }
.res-card-meta { margin: auto 0 0; padding-top: .55rem; color: var(--ink-3); font-size: .88rem; font-weight: 700; }
.res-empty { margin-top: 1rem; }
.res-more { margin-top: 2.5rem; }
.res-more-title { font: 800 1.05rem/1.3 var(--display); margin-bottom: .75rem; }
.res-extras { margin-top: 3rem; }
.res-extras h2 { margin-bottom: 1.1rem; }

/* ---- "What you can do today" ------------------------------------------------------------------------------------ */
.res-today { margin-top: 2.5rem; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--teal-50); border: 1px solid var(--teal-200); }
.res-today h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; margin-bottom: .5rem; color: var(--teal-900); }
.res-today h2 .icon { color: var(--teal-700); }
.res-today p { margin: 0; max-width: 64ch; }
.res-today .actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Detail pages ----------------------------------------------------------------------------------------------- */
.res-badges { margin-top: .9rem; }
.page-header .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.1rem; }
.res-size { font: 700 .82rem/1 var(--sans); opacity: .85; }
.res-layout { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .res-layout { grid-template-columns: minmax(0, 1fr) 300px; } .res-aside { position: sticky; top: 24px; } }
.res-main { min-width: 0; max-width: 780px; }
.res-block { margin-top: 2.25rem; }
.res-block:first-child, .res-intro + .res-block { margin-top: 0; }
.res-intro { margin-bottom: 2rem; }
.res-block > h2, .res-rest h2 { margin-bottom: .8rem; }
.res-ticks { list-style: none; padding: 0; display: grid; gap: .6rem; }
.res-ticks li { display: flex; gap: .6rem; align-items: flex-start; }
.res-ticks .icon { flex: none; margin-top: .25rem; color: var(--teal-700); }
.res-materials { padding-left: 1.3em; display: grid; gap: .35rem; }
.res-materials li::marker { color: var(--teal-600); }
.res-steps .step-text { margin: .2rem 0 .3rem; color: var(--ink); }
.res-steps .step-text > :last-child { margin-bottom: .3rem; }
.res-steps .step-text ul { padding-left: 1.2em; }
.res-minutes { display: inline-block; margin-left: .4rem; padding: .05rem .55rem; border-radius: 999px; background: var(--sun-100); color: var(--sun-700); font: 700 .8rem/1.5 var(--sans); vertical-align: middle; }
.res-rest { margin-top: 2.25rem; }
.res-standards { padding-left: 1.2em; display: grid; gap: .4rem; }
.res-glance { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.res-glance-title { margin: 0 0 .75rem; font: 800 1.05rem/1.3 var(--display); }
.res-glance-list { margin: 0 0 1rem; display: grid; gap: .55rem; }
.res-glance-list div { display: grid; grid-template-columns: 100px 1fr; gap: 8px; font-size: .95rem; }
.res-glance-list dt { color: var(--ink-3); font-weight: 700; }
.res-glance-list dd { margin: 0; }
.res-glance .btn { width: 100%; white-space: nowrap; }
.res-glance .btn .res-size { display: none; } /* the list above already gives the PDF size */
.res-glance-thumb { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 1rem; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }

/* Printable preview: a sheet of paper */
.res-paper { position: relative; margin-top: 1rem; padding: clamp(18px, 4vw, 44px); background: #fff; border: 1px solid var(--line-2); border-radius: 6px; box-shadow: var(--shadow); }
.res-paper::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--teal-500); border-radius: 6px 6px 0 0; }
.res-paper-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid var(--teal-100); }
.res-paper-head img { width: 120px; height: auto; }
.res-paper-head span { font: 800 .78rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); }
.res-paper-title { margin: 0 0 .8rem; font: 900 clamp(1.4rem, 1.1rem + 1.4vw, 2rem)/1.15 var(--display); color: var(--teal-800); }
.res-paper-poster .res-paper-title { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.8rem); }
.res-paper-poster .res-paper-body { font-size: 1.2rem; }
.res-paper-card { max-width: 520px; border-style: dashed; }
.res-paper-foot { margin: 1.5rem 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-3); font: 700 .88rem/1.3 var(--sans); }

/* Infographics */
.res-ig-figure { margin: 0 0 2rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.res-ig-figure img { width: 100%; height: auto; }
.res-ig-sub { font-weight: 700; font-size: 1.1rem; }
.res-ig-social { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 1rem; }
.res-downloads { list-style: none; padding: 0; display: grid; gap: 10px; }
.res-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); text-decoration: none; }
.res-dl .icon { grid-row: span 2; color: var(--teal-700); }
.res-dl-label { font: 800 1rem/1.3 var(--display); color: var(--teal-800); }
.res-dl-detail { color: var(--ink-2); font-size: .92rem; }
.res-dl:hover { border-color: var(--teal-500); background: var(--teal-50); }
.res-dl:hover .res-dl-label { text-decoration: underline; }
.res-code textarea { width: 100%; min-height: 0; padding: .7rem .8rem; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg-soft); font: .86rem/1.45 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--ink); resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.res-code textarea:focus { outline: none; border-color: var(--teal-700); box-shadow: 0 0 0 3px var(--teal-100); }
.res-code + .btn { margin-top: 10px; }
.res-copy-status { min-height: 1.4em; margin: .5rem 0 0; color: var(--success); font-weight: 700; }
.res-embed-note { display: flex; gap: .4rem; align-items: flex-start; font-size: .93rem; }
.res-embed-note .icon { margin-top: .2rem; flex: none; }
.res-embed .tabs { margin-top: 1rem; }

/* Book companion */
.res-book-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.res-book-section:first-of-type { border-top: 0; padding-top: 0; }
.res-book-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: start; }
@media (max-width: 560px) { .res-book-head { grid-template-columns: 1fr; } }
.res-book-head h2 { margin-bottom: .6rem; }
.res-qr { margin: 0; display: grid; justify-items: center; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; width: max-content; max-width: 100%; }
.res-qr > svg.qr { width: 132px; height: 132px; }
.res-qr-small > svg.qr { width: 96px; height: 96px; }
.res-qr figcaption { display: grid; justify-items: center; gap: 2px; font-size: .85rem; text-align: center; }
.res-qr-code { font-weight: 700; color: var(--ink-2); word-break: break-all; }
.res-qr figcaption a { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.res-book-items { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: 10px; }
.res-book-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
@media (max-width: 480px) { .res-book-item { grid-template-columns: 1fr; } }
.res-book-link { display: inline-flex; align-items: center; gap: .35rem; font: 800 1.06rem/1.3 var(--display); text-decoration: none; }
.res-book-link:hover { text-decoration: underline; }
.res-book-item p { margin: .25rem 0 0; color: var(--ink-2); font-size: .96rem; }
.res-buy { padding: 20px; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--teal-800), var(--teal-700)); color: #fff; box-shadow: var(--shadow); }
.res-buy-eyebrow { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; font: 800 .8rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #CDE8EB; }
.res-buy-title { color: #fff; font-size: 1.5rem; margin-bottom: .6rem; }
.res-buy p { color: #E3F2F4; }
.res-buy .btn { width: 100%; }

/* Press kit */
.res-boiler { padding: 18px 20px; border-left: 5px solid var(--teal-500); border-radius: var(--radius); background: var(--bg-soft); }
.res-boiler .prose > :last-child { margin-bottom: .6rem; }
.res-logos { margin-top: 1rem; }
.res-logo { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.res-logo-art { display: grid; place-items: center; min-height: 170px; padding: 24px; background: #fff; border-bottom: 1px solid var(--line); }
.res-logo-dark .res-logo-art { background: var(--teal-800); }
.res-logo-art img { max-height: 120px; width: auto; max-width: 100%; }
.res-logo-body { padding: 14px 16px 16px; }
.res-logo-body h3 { margin-bottom: .3rem; }
.res-logo-body p { color: var(--ink-2); font-size: .95rem; margin-bottom: .7rem; }
.res-logo-body .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.res-swatches { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.res-swatch { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.res-chip { grid-row: span 3; width: 52px; height: 52px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .12); }
.res-swatch-name { font: 800 .98rem/1.3 var(--display); }
.res-swatch code { font-size: .88rem; color: var(--ink-2); }
.res-swatch-use { font-size: .86rem; color: var(--ink-3); line-height: 1.35; }
.res-type { list-style: none; padding: 0; display: grid; gap: 14px; }
.res-type li { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.res-type-sample { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.2; color: var(--teal-800); }
.res-type-display { font-family: var(--display); font-weight: 800; }
.res-type-body { font-family: var(--sans); }

/* ---- Print (browser printing of the web pages; the PDFs use print.css) -------------------------------------------- */
@media print {
  .res-aside, .res-filters, .res-embed, .res-downloads, .res-today .actions, .res-more, .res-extras, .res-qr figcaption a { display: none !important; }
  .res-layout { display: block; }
  .res-paper { box-shadow: none; border: 0; padding: 0; }
  .res-paper::before { display: none; }
  .res-ig-figure { box-shadow: none; }
}