/* ─────────────────────────────────────────────────────────────────────────────
   Free Resources page (docs/free-resources.md).
   Uses only the brand tokens from brand.css, so it follows light / dark mode.
   The "Look inside" toggle is handled in assets/javascripts/learn.js.
   ───────────────────────────────────────────────────────────────────────────── */

.lx-res-hero { text-align: center; padding: 1.2rem 0 0.4rem; }
.md-typeset .lx-res-hero h1 { margin: 0.2rem 0 0.6rem; font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.lx-res-hero__eyebrow {
  display: inline-block; margin: 0; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--md-typeset-a-color); border: 1px solid var(--lx-card-border); border-radius: 999px; padding: 0.2rem 0.75rem;
}
.md-typeset .lx-res-hero__lead { max-width: 38rem; margin: 0 auto; color: var(--lx-muted); font-size: 0.82rem; line-height: 1.65; }

/* Two cards side by side on wide screens, stacked on phones and small tablets */
.lx-res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 1.6rem 0; }
@media screen and (max-width: 59.9375em) { .lx-res-grid { grid-template-columns: 1fr; } }

.lx-res {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 1.1rem; row-gap: 0; align-items: start; align-content: start;
  padding: 1.1rem; border-radius: var(--lx-radius); background: var(--lx-card-bg); border: 1px solid var(--lx-card-border);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lx-res:hover, .lx-res:focus-within { border-color: var(--lx-sky); box-shadow: 0 10px 30px rgba(56, 189, 248, 0.1); }
@media screen and (max-width: 29.9375em) { .lx-res { grid-template-columns: 1fr; } .lx-res__cover { max-width: 11rem; margin: 0 auto; } }

/* Thumbnail = real page 1 of the PDF; clicking it opens the preview */
.md-typeset a.lx-res__cover { position: relative; display: block; border-radius: 8px; text-decoration: none; }
.lx-res__cover img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--lx-card-border);
                     background: #fff; box-shadow: 0 8px 24px rgba(2, 8, 23, 0.18); transition: transform 0.2s; }
.lx-res__cover:hover img { transform: translateY(-2px); }
.lx-res__cover-label {
  position: absolute; left: 0.4rem; right: 0.4rem; bottom: 0.4rem; padding: 0.22rem 0.4rem; border-radius: 6px;
  font-size: 0.56rem; font-weight: 700; text-align: center; color: #fff; background: rgba(2, 8, 23, 0.72);
}
/* Cover + meta/title/description side by side; tags, buttons and previews use the full card width */
.lx-res__body { display: contents; }
.lx-res__body > * { grid-column: 1 / -1; min-width: 0; }
.lx-res__body > .lx-res__meta, .lx-res__body > .lx-res__title, .lx-res__body > .lx-res__desc { grid-column: 2; }
.lx-res__cover { grid-row: 1 / span 3; }
@media screen and (max-width: 29.9375em) {
  .lx-res__body > .lx-res__meta, .lx-res__body > .lx-res__title, .lx-res__body > .lx-res__desc { grid-column: 1; }
  .lx-res__cover { grid-row: auto; }
}

.lx-res__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 0.66rem; color: var(--lx-muted); }
.lx-res__meta b { color: var(--md-default-fg-color); font-weight: 700; }
.lx-res__pdf { width: 1.6rem; height: 1.6rem; flex: none; fill: #dc2626; }
.lx-res__pdf path + path { stroke: #fff; stroke-width: 1.2; opacity: 0.6; }
.lx-res__pdf text { fill: #fff; font: 800 5.6px/1 system-ui, sans-serif; }
.lx-res__free {
  margin-left: auto; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #10b981; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 999px; padding: 0.12rem 0.55rem;
}
[data-md-color-scheme="default"] .lx-res__free { color: #047857; }

.md-typeset .lx-res__title { margin: 0.5rem 0 0.35rem; font-size: 1.05rem; line-height: 1.3; }
.md-typeset .lx-res__desc { margin: 0 0 0.9rem; font-size: 0.74rem; line-height: 1.6; color: var(--lx-muted); }

.md-typeset ul.lx-res__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0 0 0.9rem; padding: 0; }
.md-typeset ul.lx-res__tags li {
  margin: 0; font-size: 0.6rem; font-weight: 700; padding: 0.16rem 0.55rem; border-radius: 999px;
  color: var(--md-typeset-a-color); background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.25);
}

.lx-res__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.md-typeset .lx-res__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; flex: 1 1 auto;
  padding: 0.6rem 1rem; border-radius: 9px; font-size: 0.72rem; font-weight: 700; text-decoration: none;
  border: 1px solid var(--lx-sky); color: var(--md-typeset-a-color); transition: background 0.15s, color 0.15s;
}
.md-typeset .lx-res__btn:hover { background: rgba(56, 189, 248, 0.12); }
.md-typeset .lx-res__btn--primary { background: var(--lx-sky); color: var(--lx-ink); }
.md-typeset .lx-res__btn--primary:hover, .md-typeset .lx-res__btn--primary:focus { background: var(--lx-sky-light); color: var(--lx-ink); }
.lx-res__btn svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.md-typeset .lx-res__more { margin: 0.6rem 0 0.4rem; font-size: 0.64rem; color: var(--lx-muted); }

.lx-res__toggle {
  justify-self: start; margin-top: 0.2rem; padding: 0.3rem 0; text-align: left; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.68rem; font-weight: 700; color: var(--md-typeset-a-color);
}
.lx-res__toggle::before { content: "▸ "; display: inline-block; transition: transform 0.2s; }
.lx-res__toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.lx-res__toggle:hover { text-decoration: underline; }

.lx-res__preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.lx-res__preview[hidden] { display: none; }
.md-typeset .lx-res__preview figure { margin: 0; }
.lx-res__preview img { display: block; width: 100%; height: auto; border-radius: 5px; border: 1px solid var(--lx-card-border); background: #fff; }
.md-typeset .lx-res__preview figcaption { margin: 0.25rem 0 0; font-size: 0.56rem; color: var(--lx-muted); text-align: center; }

/* Visible keyboard focus everywhere on the page */
.lx-res a:focus-visible, .lx-res button:focus-visible, .lx-res-info a:focus-visible {
  outline: 2px solid var(--lx-sky); outline-offset: 2px; border-radius: 6px;
}

.lx-res-info {
  margin: 0.4rem 0 1rem; padding: 1rem 1.2rem; border-radius: var(--lx-radius);
  background: var(--lx-card-bg); border: 1px solid var(--lx-card-border);
}
.md-typeset .lx-res-info h2 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.md-typeset .lx-res-info ul { margin: 0 0 0.6rem; font-size: 0.74rem; }
.md-typeset .lx-res-info p { margin: 0; font-size: 0.74rem; }

/* In-page PDF viewer (dialog). Opened by learn.js on wide screens with a built-in PDF viewer. */
.md-typeset .lx-pdfview {
  width: min(64rem, 94vw); height: min(56rem, 92vh); max-width: none; max-height: none; padding: 0; overflow: hidden;
  border: 1px solid var(--lx-card-border); border-radius: var(--lx-radius);
  background: var(--md-default-bg-color); color: var(--md-default-fg-color);
}
.lx-pdfview[open] { display: flex; flex-direction: column; }
.lx-pdfview::backdrop { background: rgba(2, 8, 23, 0.72); }
.lx-pdfview__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--lx-card-border); }
.md-typeset .lx-pdfview__title { flex: 1; min-width: 0; margin: 0; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-typeset .lx-pdfview__download { flex: none; padding: 0.45rem 0.9rem; }
.lx-pdfview__close {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 8px;
  background: none; color: inherit; cursor: pointer;
}
.lx-pdfview__close:hover { background: rgba(56, 189, 248, 0.12); }
.lx-pdfview__close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.lx-pdfview__frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #525659; }
.md-typeset .lx-pdfview__fallback { margin: 0; padding: 0.45rem 0.8rem; font-size: 0.64rem; color: var(--lx-muted);
                                    border-top: 1px solid var(--lx-card-border); }
.lx-pdfview a:focus-visible, .lx-pdfview button:focus-visible { outline: 2px solid var(--lx-sky); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .lx-res, .lx-res__toggle::before, .lx-res__cover img { transition: none; } }