/* ============================================================
   The free resource library, /free-resources/, and every book's own
   lead magnet page, /free-resources/<slug>/.

   Why a file of its own: the pages are built by their own workstream
   and must not edit main.css. Loaded only on those pages by
   inc/auto/free-resources.php. Paper Dusk only (docs/design/paper-dusk.md):
   paper, ink and terracotta through the --pd-* tokens, with the old
   theme tokens (remapped by paper-dusk.css) where main.css already uses
   them. Phone first: one column, more from 760px.
   Bangla line-height never below 1.25; no motion beyond paper-dusk.js.
   ============================================================ */

.fr-notice { background: var(--pd-accent-tint); color: var(--pd-ink); padding: 12px 0; font-weight: 600; line-height: 1.5; }

/* the three problems */
.fr-why { padding: 40px 0 8px; }
.fr-probs { display: grid; grid-template-columns: 1fr; gap: 14px; }
.fr-probs > div {
  background: var(--pd-paper-2);
  border: 1px solid var(--pd-line);
  border-left: 4px solid var(--pd-accent);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.fr-probs h2 { font-size: 1.12rem; font-weight: 700; line-height: 1.4; margin: 0 0 6px; }
.fr-probs p { color: var(--pd-ink-2); line-height: 1.6; margin: 0; }

/* the books */
.fr-lib { padding: 44px 0 48px; }
.fr-lib .shead { margin-bottom: 24px; }
.fr-books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.fr-book {
  background: var(--pd-paper-2);
  border: 1px solid var(--pd-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.fr-cover { display: block; aspect-ratio: 1200 / 630; background: var(--pd-paper-3); }
.fr-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fr-ph {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 2.6rem; font-weight: 700; line-height: 1.3;
  color: var(--pd-accent-2); opacity: .45;
}
.fr-meta { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fr-meta h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.4; margin: 0; }
.fr-meta h3 a { color: var(--pd-ink); text-decoration: none; }
.fr-meta h3 a:hover { color: var(--pd-accent-2); }
.fr-meta p { color: var(--pd-ink-2); line-height: 1.6; margin: 0; font-size: 1rem; }
.fr-new {
  align-self: flex-start; font-size: .8rem; font-weight: 700; line-height: 1.5;
  color: var(--pd-accent-2); background: var(--pd-accent-tint); border-radius: 999px; padding: 2px 10px;
}
.fr-pages { font-size: .85rem; color: var(--pd-ink-2); line-height: 1.5; }
.fr-more { margin-top: auto; font-weight: 700; color: var(--pd-accent-2); text-decoration: underline; text-underline-offset: 3px; line-height: 1.5; }
.fr-dl { align-self: flex-start; margin-top: auto; padding: 12px 22px; }
.fr-soon { margin-top: auto; font-size: .92rem; color: var(--pd-ink-2); line-height: 1.5; border: 1px dashed var(--pd-line); border-radius: var(--radius); padding: 8px 12px; }
.fr-keep { margin-top: 20px; color: var(--pd-ink-2); line-height: 1.6; }

/* the form */
.fr-get { padding: 44px 0 48px; }
.fr-form-wrap { max-width: 520px; }
.fr-form-wrap h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.fr-form { margin-top: 18px; display: flex; flex-direction: column; }
.fr-form label { font-weight: 600; font-size: .95rem; margin: 10px 0 6px; line-height: 1.4; }
.fr-form input[type=text],
.fr-form input[type=email] {
  width: 100%; font: inherit; font-size: 16px; line-height: 1.4;
  padding: 13px 14px; border: 1px solid var(--pd-line); border-radius: var(--radius); background: var(--pd-paper-2); color: var(--pd-ink);
}
.fr-form input:focus { outline: 3px solid var(--pd-accent); outline-offset: 2px; }
.fr-form .btn { margin-top: 18px; justify-content: center; width: 100%; }
.fr-err { margin: 0 0 8px; padding: 10px 12px; border-radius: var(--radius); background: var(--pd-paper-2); border-left: 4px solid var(--pd-accent); color: var(--pd-accent-2); line-height: 1.5; }
.fr-small { margin-top: 12px; font-size: .88rem; line-height: 1.6; color: var(--pd-ink-2); }

/* paid, kept apart */
.fr-paid { padding: 44px 0 56px; }
.fr-paid-box {
  max-width: 680px;
  border: 1px dashed var(--pd-line);
  border-radius: var(--radius);
  padding: 22px 20px;
  background: var(--pd-paper-2);
}
.fr-paid-box .label { display: block; color: var(--pd-ink-2); margin-bottom: 8px; }
.fr-paid-box h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin: 0 0 8px; }
.fr-paid-box p { line-height: 1.6; color: var(--pd-ink-2); }
.fr-paid-links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.fr-link { font-weight: 700; color: var(--pd-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.fr-who { margin-top: 22px; max-width: 62ch; font-size: var(--fs-small); color: var(--pd-ink-2); line-height: 1.6; }

/* ---------------------------------------------------- one book's page */
.fb-hero { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
.fb-hero-copy { min-width: 0; }
.fb-hero h1 { overflow-wrap: anywhere; }
.fb-cover img {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: 10px; box-shadow: 0 14px 30px -14px rgba(31,29,36,.7);
}
.fb-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.fb-facts span {
  font-size: .88rem; font-weight: 600; line-height: 1.5;
  border: 1px solid rgba(237,230,214,.32); border-radius: 999px; padding: 3px 12px; color: var(--pd-paper);
}
.fb-dl { font-size: 1.05rem; padding: 14px 24px; }

.fb-who, .fb-take, .fb-toc { padding: 40px 0 8px; }
.fb-toc { padding-bottom: 44px; }
.fb-who-list, .fb-take-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.fb-who-list li {
  position: relative; padding: 14px 16px 14px 44px; line-height: 1.6;
  background: var(--pd-paper-2); border: 1px solid var(--pd-line); border-radius: var(--radius);
}
.fb-who-list li::before {
  content: ""; position: absolute; left: 16px; top: 21px; width: 14px; height: 8px;
  border-left: 3px solid var(--pd-accent); border-bottom: 3px solid var(--pd-accent); transform: rotate(-45deg);
}
.fb-take-list { counter-reset: fbt; }
.fb-take-list li {
  counter-increment: fbt; position: relative; padding: 16px 16px 16px 58px; line-height: 1.6;
  background: var(--pd-paper-2); border: 1px solid var(--pd-line); border-left: 4px solid var(--pd-accent); border-radius: var(--radius);
}
.fb-take-list li::before {
  content: counter(fbt, bengali); position: absolute; left: 16px; top: 14px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pd-accent-2); color: var(--pd-paper); font-weight: 700; line-height: 1;
}
.fb-chapters {
  margin: 0; padding: 0 0 0 1.8em; columns: 1; column-gap: 32px; list-style-type: bengali;
  line-height: 1.6; color: var(--pd-ink);
}
.fb-chapters li { padding: 4px 0; break-inside: avoid; }
.fb-chapters li::marker { color: var(--pd-accent-2); font-weight: 700; }
.fb-lib { padding: 8px 0 8px; }
.fb-lib-link a { font-weight: 700; color: var(--pd-accent-2); text-decoration: underline; text-underline-offset: 3px; line-height: 1.6; }

@media (min-width: 760px) {
  .fr-probs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fr-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .fr-form .btn { width: auto; align-self: flex-start; }
  .fb-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
  .fb-who-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fb-chapters { columns: 2; }
}
@media (min-width: 1080px) {
  .fr-books { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Copy 13: the quiet course link under a download (after it, never before). */
.fr-next-c { display: block; margin-top: 10px; font-size: .86rem; line-height: 1.5; color: var(--pd-ink-2, #5D5A64); text-decoration: underline; text-underline-offset: 3px; }
.fr-next-c:hover { color: var(--pd-accent-2, #9C4130); }