/* ─────────────────────────────────────────────────────────────────────────────
   Pro Tracks product cards + product detail pages.
   Markup is generated at build time by hooks/products.py from data/products.yml.
   Uses the brand tokens from brand.css (--lx-sky, --lx-card-bg, --lx-card-border, --lx-muted …),
   so it follows the light / dark scheme automatically.
   ───────────────────────────────────────────────────────────────────────────── */

/* Grid: as many ~14rem columns as the content area fits — 2 beside the sidebars on desktop, 1 on phones */
.lx-products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin: 1rem 0 1.6rem;
}

/* Card */
.lx-product {
  display: flex; flex-direction: column; overflow: hidden; 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, transform 0.2s;
}
.lx-product:hover, .lx-product:focus-within {
  border-color: var(--lx-sky); box-shadow: 0 10px 30px rgba(56, 189, 248, 0.1); transform: translateY(-2px);
}
.lx-product__media { aspect-ratio: 16 / 9; background: #0B1220; border-bottom: 1px solid var(--lx-card-border); }
.lx-product__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lx-product__body { display: flex; flex-direction: column; flex: 1; padding: 0.9rem 1rem 1rem; }

/* Category label + format */
.lx-product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.lx-product__cat {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--md-typeset-a-color); background: rgba(56, 189, 248, 0.12); border-radius: 999px; padding: 0.15rem 0.55rem;
}
.lx-product__format {
  font-size: 0.6rem; font-weight: 600; color: var(--lx-muted);
  border: 1px solid var(--lx-card-border); border-radius: 999px; padding: 0.12rem 0.5rem;
}

/* Title, description, benefits */
.md-typeset .lx-product__title { margin: 0 0 0.35rem; font-size: 0.86rem; line-height: 1.35; font-weight: 700; }
.md-typeset .lx-product__title a { color: var(--md-default-fg-color); }
.md-typeset .lx-product__title a:hover { color: var(--md-typeset-a-color); }
.md-typeset .lx-product__desc { margin: 0 0 0.6rem; font-size: 0.72rem; line-height: 1.55; color: var(--lx-muted); }
.md-typeset ul.lx-product__benefits { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.md-typeset ul.lx-product__benefits li {
  position: relative; margin: 0 0 0.3rem; padding-left: 1.1rem; font-size: 0.7rem; line-height: 1.45;
}
.md-typeset ul.lx-product__benefits li::before {
  content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--lx-green);
}

/* Price — pushed to the bottom so prices and buttons line up across a row */
.lx-product__price { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
.lx-product__now { font-size: 1.15rem; font-weight: 800; color: var(--md-default-fg-color); font-variant-numeric: tabular-nums; }
.lx-product__was { font-size: 0.78rem; color: var(--lx-muted); }
.lx-product__save {
  font-size: 0.6rem; font-weight: 800; color: var(--lx-green); background: rgba(16, 185, 129, 0.14);
  border-radius: 999px; padding: 0.12rem 0.5rem;
}
.lx-product__note { flex-basis: 100%; font-size: 0.6rem; color: var(--lx-muted); font-style: italic; }

/* Buttons: View details (outline) + Buy now (primary), equal width */
.lx-product__actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.md-typeset .lx-product__btn {
  flex: 1; margin: 0; padding: 0.55em 0.8em; font-size: 0.7rem; text-align: center; border-radius: 8px; white-space: nowrap;
}
.md-typeset .lx-product__buy[disabled] {
  cursor: not-allowed; opacity: 0.45; background: var(--lx-sky); border-color: var(--lx-sky); color: var(--lx-ink);
}
.md-typeset .lx-product__status { margin: 0.5rem 0 0; font-size: 0.64rem; color: var(--lx-muted); }
.md-typeset .lx-product__preview { display: inline-block; margin-top: 0.5rem; font-size: 0.68rem; font-weight: 700; }

/* Visible keyboard focus for every interactive element in the store */
.lx-product a:focus-visible, .lx-product button:focus-visible,
.lx-product-detail a:focus-visible, .lx-product-detail button:focus-visible,
.lx-product-detail__back a:focus-visible {
  outline: 2px solid var(--lx-sky); outline-offset: 2px; border-radius: 6px;
}

/* ── Product detail page (/pro/products/<id>/) ── */
.lx-product-detail {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start;
  margin: 1rem 0 1.4rem; padding: 1rem; border-radius: var(--lx-radius);
  background: var(--lx-card-bg); border: 1px solid var(--lx-card-border);
}
.lx-product-detail__cover { display: block; width: auto; max-width: 100%; height: auto; max-height: 30rem; margin: 0 auto;
                            border-radius: 10px; border: 1px solid var(--lx-card-border); }
.lx-product-detail__info { display: flex; flex-direction: column; }
.md-typeset .lx-product-detail .lx-product__desc { font-size: 0.8rem; }
.lx-product-detail .lx-product__price { margin-top: 0.2rem; }
.lx-product-detail .lx-product__now { font-size: 1.5rem; }
.md-typeset .lx-product-detail__back { margin: 0 0 0.4rem; font-size: 0.72rem; }
@media screen and (max-width: 44.9375em) { .lx-product-detail { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .lx-product { transition: none; } .lx-product:hover { transform: none; } }

/* ── "Get your free download" email dialog (created by learn.js) ── */
.lx-gate {
  width: min(26rem, 92vw); padding: 0; border: 1px solid var(--lx-card-border); border-radius: var(--lx-radius);
  background: var(--md-default-bg-color); color: var(--md-default-fg-color); box-shadow: 0 24px 60px rgba(2, 8, 23, 0.4);
}
.lx-gate::backdrop { background: rgba(2, 8, 23, 0.6); }
.lx-gate__form { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem 1.3rem 1.1rem; }
.lx-gate h2 { margin: 0; font-size: 1rem; font-family: var(--lx-heading-font); }
.lx-gate__product { margin: 0; font-size: 0.72rem; color: var(--md-typeset-a-color); font-weight: 700; }
.lx-gate label { font-size: 0.68rem; font-weight: 700; margin-top: 0.3rem; }
.lx-gate input {
  font: inherit; font-size: 0.8rem; padding: 0.55rem 0.7rem; border-radius: 8px;
  border: 1px solid var(--lx-card-border); background: var(--lx-card-bg); color: var(--md-default-fg-color);
}
.lx-gate input:focus { outline: 2px solid var(--lx-sky); outline-offset: 1px; }
.lx-gate__note { margin: 0; font-size: 0.62rem; line-height: 1.5; color: var(--lx-muted); }
.lx-gate .lx-msg { margin: 0; min-height: 1em; font-size: 0.66rem; color: var(--lx-muted); }
.lx-gate__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.3rem; }
.lx-gate__actions .md-button {          /* the dialog lives outside .md-typeset, so style the buttons here */
  margin: 0; font: inherit; font-size: 0.7rem; font-weight: 700; padding: 0.55em 1.2em; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--lx-sky); background: transparent; color: var(--md-typeset-a-color);
}
.lx-gate__actions .md-button--primary { background: var(--lx-sky); color: var(--lx-ink); }
.lx-gate__actions .md-button:hover { filter: brightness(1.08); }
.lx-gate__actions .md-button[disabled] { opacity: 0.6; cursor: default; }
.lx-gate__note a { color: var(--md-typeset-a-color); }
.lx-gate button:focus-visible, .lx-gate a:focus-visible { outline: 2px solid var(--lx-sky); outline-offset: 2px; }