/* Book list and book pages (templates/books/*). Green and white slides alternate;
   the order steps are the shared .jn-steps component. */

.bk { --bk-line: rgb(255 255 255 / .16); --bk-soft: rgb(255 255 255 / .08); overflow-x: clip; }
.bk .jn-slide--white .jn-section-heading h2 { color: var(--jn-green); }
.bk .jn-section-heading { margin-bottom: 2.25rem; }
.bk .jn-section-heading h2 { letter-spacing: -.02em; }
.bk-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1.25rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.bk-label { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; color: var(--jn-orange-dark); }
.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.bk-actions form { margin: 0; }
.bk-button--ghost { color: #fff; border-color: rgb(255 255 255 / .35); background: transparent; }
.bk-button--ghost:hover { border-color: var(--jn-orange); color: #fff; }
.bk-link { color: var(--jn-orange-dark); font-size: .9375rem; font-weight: 700; text-decoration: none; }
.bk-link:hover { text-decoration: underline; }
.bk-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; margin: 0; }
.bk-price strong { font-size: 1.75rem; line-height: 1.1; color: var(--jn-green); }
.bk-price del { font-size: 1rem; color: var(--jn-muted); }
.bk-price span { padding: .2rem .5rem; border-radius: .35rem; background: var(--jn-orange); color: #fff; font-size: .75rem; font-weight: 700; }
.bk-note { padding: .9rem 1.1rem; border-left: 3px solid var(--jn-orange); border-radius: var(--jn-radius-sm); background: var(--jn-cream); font-size: .875rem; line-height: 1.6; color: #444; }

/* Hero */
.bk-hero { padding-block: clamp(3.5rem, 7vw, 5rem); }
.bk-hero h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.bk-hero h1 span { color: var(--jn-orange); }
.bk-hero__lead { max-width: 40rem; margin: 1rem 0 2rem; font-size: clamp(.9375rem, 1.6vw, 1.125rem); line-height: 1.75; color: rgb(255 255 255 / .78); }

/* List: one wide card per book, image side alternating */
.bk-shelf { display: grid; gap: 2rem; }
.bk-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: center; padding: 2rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: #fff; transition: box-shadow .3s ease, border-color .2s ease; }
.bk-item:hover { border-color: var(--jn-orange); box-shadow: 0 18px 40px rgb(1 60 53 / .1); }
.bk-item--reverse .bk-item__cover { order: 2; }
.bk-item__cover { display: block; overflow: hidden; border-radius: var(--jn-radius-sm); background: var(--jn-cream); }
.bk-item__cover img { display: block; width: 100%; height: auto; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
.bk-item:hover .bk-item__cover img { scale: 1.03; }
.bk-item__copy { display: grid; gap: .75rem; }
.bk-item h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.25; }
.bk-item h2 a { color: var(--jn-green); text-decoration: none; }
.bk-item h2 a:hover { color: var(--jn-orange-dark); }
.bk-item__text { font-size: 1rem; line-height: 1.7; color: #444; }
.bk-buy { display: grid; gap: 1rem; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--jn-border); }

/* Book page hero */
.bk-book { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; align-items: center; }
.bk-back { display: inline-block; margin-bottom: 1.5rem; color: rgb(255 255 255 / .75); font-size: .875rem; font-weight: 600; text-decoration: none; }
.bk-back:hover { color: var(--jn-orange); }
.bk-book__subtitle { margin-top: .75rem; font-size: 1.0625rem; font-weight: 600; color: var(--jn-orange); }
.bk-hero--book .bk-hero__lead { margin-bottom: 1.5rem; }
.bk-buy--hero { margin: 0; padding-top: 0; border: 0; }
.bk-buy--hero .bk-price strong { color: #fff; font-size: 2rem; }
.bk-buy--hero .bk-price del { color: rgb(255 255 255 / .55); }
.bk-note--hero { margin-top: 1.5rem; max-width: 36rem; background: var(--bk-soft); color: rgb(255 255 255 / .85); }
.bk-book__cover { margin: 0; padding: 1.25rem; border-radius: var(--jn-radius); background: #fff; box-shadow: 0 30px 70px rgb(0 0 0 / .3); rotate: 1.5deg; }
.bk-book__cover img { display: block; width: 100%; height: auto; border-radius: .6rem; }

/* About the book */
.bk-about { display: grid; grid-template-columns: minmax(0, var(--jn-reading)) minmax(15rem, 20rem); gap: 4rem; justify-content: space-between; align-items: start; }
.bk-about--single { grid-template-columns: minmax(0, var(--jn-reading)); }
.bk-prose h2 { margin-top: 2rem; font-size: 1.5rem; color: var(--jn-green); }
.bk-prose > h2:first-child { margin-top: 0; }
.bk-prose h3 { font-size: 1.0625rem; color: var(--jn-green); }
.bk-prose ul li::marker { color: var(--jn-orange); }
.bk-specs { padding: 1.5rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: var(--jn-cream); }
.bk-specs__title { margin-bottom: 1rem; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.bk-specs dl { display: grid; margin: 0; }
.bk-specs dl div { display: grid; gap: .15rem; padding: .7rem 0; border-top: 1px solid var(--jn-border); }
.bk-specs dt { font-size: .75rem; color: var(--jn-muted); }
.bk-specs dd { margin: 0; font-size: .9375rem; font-weight: 600; color: #222; }

/* Order steps and other books */
.bk-order { margin-top: 2rem; padding: 2.5rem 2.25rem; border-radius: var(--jn-radius); background: var(--jn-cream); --jn-steps-ring: var(--jn-cream); }
.bk-divided { border-top: 1px solid var(--jn-border); }
.bk-more { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--jn-border); }
.bk-more__title { margin-bottom: 1rem; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }

/* Gallery */
.bk-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem; }
.bk-gallery figure { margin: 0; }
.bk-gallery a { display: block; overflow: hidden; border-radius: var(--jn-radius-sm); background: #fff; box-shadow: 0 18px 40px rgb(0 0 0 / .22); }
.bk-gallery img { display: block; width: 100%; height: auto; transition: scale .6s ease; }
.bk-gallery a:hover img { scale: 1.04; }
.bk-gallery figcaption { margin-top: .75rem; font-size: .875rem; font-weight: 600; color: rgb(255 255 255 / .8); }
.bk-others { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.bk-other { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: var(--jn-cream); color: #111; text-decoration: none; transition: translate .3s ease, border-color .2s ease; }
.jn-slide--green .bk-other { border-color: transparent; background: #fff; }
.bk-other:hover { translate: 0 -3px; border-color: var(--jn-orange); }
.bk-other img { width: 100%; height: auto; border-radius: .6rem; }
.bk-other__copy { display: grid; gap: .35rem; }
.bk-other strong { font-size: 1.0625rem; line-height: 1.35; color: var(--jn-green); }
.bk-other__price { font-size: .875rem; font-weight: 700; color: var(--jn-orange-dark); }


/* Motion: hero entrance only; system.css disables it for reduced motion and .jn-lite. */
@keyframes bk-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.bk-hero .jn-container > *, .bk-book__copy > *, .bk-book__cover { animation: bk-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.bk-book__cover { animation-delay: .25s; animation-duration: 1s; }
@supports (animation-timeline: view()) {
  .bk :is(.bk-item, .bk-gallery figure, .bk-other) { animation: bk-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}

/* Responsive */
@media (max-width: 900px) {
  .bk-item, .bk-book, .bk-about { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .bk-item--reverse .bk-item__cover { order: 0; }
  .bk-book__cover { grid-row: 1; justify-self: center; width: 100%; max-width: 28rem; rotate: none; }
}
@media (max-width: 40rem) {
  .bk-item { padding: 1.25rem; }
  .bk-order { padding: 1.75rem 1.25rem; }
  .bk-actions .jn-button, .bk-actions form { flex: 1 1 100%; }
  .bk-actions form .jn-button { width: 100%; }
  .bk-other { grid-template-columns: 6rem minmax(0, 1fr); }
}