/* listicle_1 — multi-product listicle (task LISTICLE_1_MULTI_PRODUCT_LISTICLE_TEMPLATE).
   Ported from the codefunnels-theme child-listicle.css / child-footer.css
   (docs/product/template_imports/listicle_1/) onto l1-* classes, logical
   properties only (RTL), border-box throughout.

   Colour tokens: the template re-declares the four --l1-accent* tokens for a
   chosen cta.button_color (green / orange); the defaults below are the red
   house colour. --l1-accent fills the top bar and the buttons, --l1-accent-text
   is the small-text shade (>= 4.5:1 on white) and the footer band (white text
   >= 5.3:1 on it in every palette). Keep in step with
   lp.constants.CTA_BUTTON_COLORS (tests/test_listicle_1.py). */
:root {
  --l1-accent: #d40000;
  --l1-accent-dark: #a80000;
  --l1-accent-text: #c00000;
  --l1-accent-tint: rgba(212, 0, 0, .1);
  --l1-ink: #2b2d42;
  --l1-body: #333333;
  --l1-rule: #edeef0;
  --l1-grey: #edf2f4;
}
.l1, .l1 *, .l1 *::before, .l1 *::after { box-sizing: border-box; }
.l1 { margin: 0; font-family: "Inter", sans-serif; color: var(--l1-body); background: #ffffff; -webkit-text-size-adjust: 100%; }
.l1 img { max-width: 100%; height: auto; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.l1-topbar { background: var(--l1-accent); color: #ffffff; }
.l1-topbar__in { max-width: 80rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; }
.l1-topbar__brand img { display: block; max-width: 12.5rem; max-height: 3rem; width: auto; }
.l1-topbar__name { font-weight: 800; font-size: 1.125rem; letter-spacing: .01em; color: #ffffff; }
.l1-share { display: flex; align-items: center; gap: .5rem; }
.l1-share__a { display: inline-flex; color: #ffffff; padding: .375rem; border-radius: .375rem; }
.l1-share__a:hover { background: rgba(255, 255, 255, .15); }
.l1-share__a svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 1000px) {
  .l1-topbar__in { justify-content: center; }
  .l1-share { display: none; }
}

/* ── Hook ────────────────────────────────────────────────────────────── */
.l1-page { max-width: 48rem; margin-inline: auto; padding-inline: 1rem; }
.l1-hook { padding-block-start: .75rem; }
.l1-h1 { margin: .75rem 0 .5rem; padding-block-end: .75rem; text-align: center; color: #303242; font-size: 2.6875rem; line-height: 1.26; font-weight: 700; }
.l1-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-block-end: 1.25rem; font-size: .75rem; color: var(--l1-ink); text-transform: uppercase; text-align: center; }
.l1-byline__item { padding-inline: .75rem; border-inline-end: 1px solid var(--l1-ink); }
.l1-byline__item:last-child { border-inline-end: 0; }
.l1-byline__item a { color: var(--l1-ink); text-decoration: none; }
.l1-byline__item a:hover { text-decoration: underline; }
.l1-hero { margin: 0; }
.l1-hero img { display: block; width: 100%; border-radius: .75rem; }
.l1-note { margin: 1.25rem 0; padding-inline-start: 2.5rem; font-style: italic; font-weight: 700; font-size: .875rem; line-height: 1.5; color: var(--l1-ink); }
.l1-intro { border-block-end: 3px solid var(--l1-rule); margin-block-end: 1.25rem; }

/* ── Prose ───────────────────────────────────────────────────────────── */
.l1-prose { font-size: 1.125rem; line-height: 1.67; color: var(--l1-body); }
.l1-prose p { margin: 1.25rem 0; }
.l1-prose a { text-decoration: none; font-weight: 700; color: var(--l1-accent-text); }
/* The product-name links linkify_product adds carry an inline
   color:#00AD41 on every template; here they take the theme's text shade
   (!important is the only way past an inline style). */
.l1 a[style*="color:#00AD41"] { color: var(--l1-accent-text) !important; }
.l1-prose ul, .l1-prose ol { padding-inline-start: 1.5rem; }

/* ── Product items ───────────────────────────────────────────────────── */
.l1-list { padding-block-start: .5rem; }
.l1-item { border-block-end: 3px solid var(--l1-rule); padding-block-end: 2rem; margin-block-end: 2rem; }
.l1-item__title { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.5; color: var(--l1-ink); font-weight: 700; }
.l1-n { display: inline-block; background: var(--l1-grey); color: var(--l1-ink); font-weight: 800; padding: .125rem .375rem .125rem .625rem; margin-inline-end: .5rem; border-radius: .3125rem; }
.l1-item__name { color: var(--l1-accent-text); text-decoration: none; }
a.l1-item__name:hover { text-decoration: underline; }
.l1-media { position: relative; display: block; border-radius: .75rem; overflow: hidden; }
.l1-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .75rem; }
.l1-media__shade { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 1rem 1rem; gap: .25rem; color: #ffffff; pointer-events: none; background: linear-gradient(200deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .8) 100%); border-radius: .75rem; }
.l1-media__stars { font-size: 1rem; letter-spacing: .08em; color: #ffc83d; }
.l1-media__stars b { color: #ffffff; letter-spacing: 0; margin-inline-start: .5rem; }
.l1-media__cap { font-size: 1rem; line-height: 1.35; color: #ffffff; }
.l1-item .l1-prose p:last-child { margin-block-end: 0; }
.l1-item__cta { margin-block-start: 1.125rem; text-align: center; }
.l1-btn { display: block; width: 100%; padding: 1rem; border-radius: .75rem; background: var(--l1-accent); color: #ffffff; font-weight: 700; font-size: 1.25rem; line-height: 1.3; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform .3s ease, background-color .2s ease; }
.l1-btn:hover { background: var(--l1-accent-dark); transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .l1-btn, .l1-btn:hover { transition: none; transform: none; } }

/* ── Find it Fast ────────────────────────────────────────────────────── */
.l1-quick { margin-block: 2rem; }
.l1-quick__h { font-size: 1.125rem; margin: 1rem 0; color: var(--l1-ink); }
.l1-quick__list { list-style: none; margin: 0; padding: 0; }
.l1-quick__row { display: flex; align-items: baseline; gap: .25rem; margin-block-end: .875rem; font-size: 1.125rem; line-height: 1.45; color: var(--l1-ink); }
.l1-quick__row .l1-n { background: none; padding: 0; margin-inline-end: .5rem; }
.l1-quick__t { font-weight: 500; }
.l1-quick__name { color: var(--l1-accent-text); font-weight: 700; text-decoration: none; }
.l1-quick__name:hover { text-decoration: underline; }

/* ── Footer: grey disclosure band + theme band (logo, legal links). The
   shared partials emit .footer-disclaimer / .footer-links. ──────────── */
.site-footer { margin-block-start: 2rem; font-family: "Inter", sans-serif; }
.l1-legals { background: var(--l1-grey); padding: 2.5rem 1.25rem; }
.site-footer .footer-inner { max-width: 48rem; margin-inline: auto; text-align: center; }
.site-footer .footer-disclaimer { color: var(--l1-body); font-size: .875rem; line-height: 1.75; margin-block: .75rem 0; }
.site-footer .footer-disclaimer a { color: var(--l1-accent-text); text-decoration: none; }
.site-footer .footer-disclaimer strong { color: var(--l1-body); }
.l1-foot { background: var(--l1-accent-text); color: #ffffff; }
.l1-foot__in { max-width: 78.75rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.5rem 1.25rem; }
.l1-foot__brand img { display: block; max-width: 12.5rem; max-height: 3.5rem; width: auto; }
.l1-foot__menu { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; font-size: 1rem; }
.l1-foot__ql { font-weight: 600; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.5rem; }
.site-footer .footer-links a { color: #ffffff; font-weight: 700; text-decoration: none; }
.site-footer .footer-links a:hover { text-decoration: underline; }
@media (max-width: 750px) {
  .l1-foot__in { flex-direction: column; align-items: flex-start; }
  .l1-foot__menu { align-items: flex-start; }
  .site-footer .footer-links { justify-content: flex-start; }
}

/* ── Sticky mobile bar (sticky_cta on) ───────────────────────────────── */
.l1-stickybar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 900; background: #ffffff; box-shadow: 0 -4px 16px rgba(0, 0, 0, .12); transform: translateY(110%); transition: transform .25s ease; }
.l1-stickybar.is-on { transform: translateY(0); }
.l1-stickybar__in { display: flex; align-items: center; gap: .75rem; padding: .625rem 1rem; }
.l1-stickybar__in img { width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: .375rem; }
.l1-stickybar__name { flex: 1; min-width: 0; font-weight: 700; font-size: .875rem; color: var(--l1-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l1-btn.l1-btn--sm { width: auto; flex: 0 0 auto; padding: .625rem 1rem; font-size: .875rem; }
@media (min-width: 901px) { .l1-stickybar { display: none; } }
@media (prefers-reduced-motion: reduce) { .l1-stickybar { transition: none; } }

@media (max-width: 1000px) {
  .l1-h1 { font-size: 1.5rem; line-height: 1.33; margin-block-start: 1.5rem; }
  .l1-item__title { font-size: 1.25rem; }
  .l1-btn { font-size: 1.125rem; }
  .l1-media__cap { font-size: .8125rem; }
  .l1-media__stars { font-size: .8125rem; }
}
/* With the bar on, keep the footer's last links clear of it on phones. */
@media (max-width: 900px) { .l1:has(.l1-stickybar) .l1-foot { padding-block-end: 4.5rem; } }

/* ── lpgen shared chrome: exit-intent modal (editorial/_partials/exit_intent.html.j2) ── */
.exit-intent {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 9999;
  align-items: center; justify-content: center; padding: 2rem;
}
.exit-intent--open { display: flex; }
.exit-intent-card {
  background: #fff; max-width: 35rem; width: 100%;
  border-radius: 0.6rem; padding: 0; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  display: flex; flex-direction: row; position: relative;
}
.exit-intent-close {
  position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.8rem;
  background: rgba(0,0,0,0.06); border: none;
  color: #1f2937; width: 1.75rem; height: 1.75rem;
  font-size: 1.125rem; line-height: 1; cursor: pointer;
  border-radius: 50%;
}
.exit-intent-image { flex: 1; min-width: 0; }
.exit-intent-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exit-intent-body  { flex: 1.2; padding: 1.5rem 1.4rem; display: flex; flex-direction: column; justify-content: center; }
.exit-intent-heading { font-family: "Inter", sans-serif; font-size: 1.875rem; font-weight: 800; color: #1f2937; margin: 0 0 0.5rem; text-decoration: underline; }
.exit-intent-subheading { font-family: "Inter", sans-serif; font-size: 1rem; line-height: 1.5; color: #4b5563; margin: 0 0 .9rem; }
.exit-intent-offer { font-family: "Inter", sans-serif; font-weight: 700; font-size: 1.375rem; line-height: 1.3; color: #1f2937; margin: 0 0 .9rem; }
.exit-intent-cta {
  display: block; text-align: center; padding: .9rem 1rem;
  background-color: var(--l1-accent); color: #fff;
  font-family: "Inter", sans-serif; font-size: 1.0625rem; font-weight: 800;
  text-decoration: none; border-radius: 0.4rem;
}
.exit-intent-fineprint { font-family: "Inter", sans-serif; font-size: .6875rem; color: #6b7280; text-align: center; margin-block-start: 0.5rem; }
@media (max-width: 640px) { .exit-intent-card { flex-direction: column; } }

/* ── RTL exceptions: star rows stay left-to-right inside an RTL line. ── */
[dir="rtl"] .l1-media__stars { direction: ltr; unicode-bidi: isolate; }