/* /abonament-povesti-personalizate ("Povestea de vineri"). Loaded only by that page, after site.css, so it uses its
   tokens (--navy, --mist, --yellow, --stack, ...) and its shared blocks (tag, h2, card, timeline, faq, cta). The page
   shows a real screen book: a cover that moves, three of its pages with their own words, and the shelf they land on. */

/* the hero: the ritual on the left, the book's own cover moving on the right */
.wk-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(26px, 4.4vw, 56px); border-radius: 32px; background: var(--mist); }
.wk-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
.wk-hero__art { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }

/* a screen: the cover clip inside a plain device, so it reads as "in the app" without pretending to be a photograph */
.wk-screen { width: 100%; padding: 12px; border-radius: 26px; background: var(--navy); box-shadow: 0 20px 50px rgba(20, 30, 60, 0.22); }
.wk-screen--tablet { max-width: 480px; }
.wk-screen--phone { max-width: 420px; padding: 10px; border-radius: 22px; }
.wk-screen__media { display: block; width: 100%; height: auto; border-radius: 16px; background: #fff; }
.wk-screen--phone .wk-screen__media { border-radius: 13px; }
.wk-screen__cap { margin: 0; max-width: 30em; font-size: 14px; line-height: 1.5; color: var(--text-3); text-align: center; }
@media (max-width: 900px) {
  .wk-hero { grid-template-columns: 1fr; }
  .wk-hero__art { order: -1; }
  .wk-screen--tablet { max-width: 400px; }
}

/* "28-36 de pagini ilustrate . se citeste pe lat . 10-15 minute de citit" */
.wk-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.wk-facts li { padding: 7px 16px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font-size: 14.5px; font-weight: 600; color: var(--navy); }

/* three real pages, one under the other, each on its own white card like a page on the table */
.wk-spreads { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 26px); }
.wk-spread { margin: 0; padding: clamp(10px, 1.4vw, 18px); border-radius: 22px; background: #fff; box-shadow: 0 18px 44px rgba(20, 30, 60, 0.08), inset 0 0 0 1px var(--border); }
.wk-spread img { width: 100%; border-radius: 12px; }
.wk-note { margin: 20px 0 0; text-align: center; font-size: 14px; line-height: 1.55; color: var(--text-3); }

/* the same boy, three covers */
.wk-covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
.wk-cover { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.wk-cover img { width: 100%; border-radius: 16px; box-shadow: 0 16px 36px rgba(20, 30, 60, 0.14); }
.wk-cover figcaption { display: flex; flex-direction: column; gap: 2px; }
.wk-cover__title { font-family: var(--display); font-size: 17px; font-weight: 500; color: var(--navy); }
.wk-cover__line { font-size: 14.5px; color: var(--text-2); }
@media (max-width: 760px) { .wk-covers { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* what the parent does not have to do */
.wk-not { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; max-width: 820px; margin: 24px auto 0; padding: 20px 26px; border-radius: 18px; background: var(--yellow); }
.wk-not__title { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 500; color: var(--navy); }
.wk-not__list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.wk-not__list li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--navy); }
.wk-not__list li::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }

/* one sentence of theirs becomes Friday's title */
.wk-spark { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.wk-spark__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
.wk-spark__ex { margin: 0; font-size: 14px; color: var(--text-3); }
.wk-flow { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.wk-flow__card { padding: 22px 24px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.wk-flow__card--book { background: var(--navy); box-shadow: none; }
.wk-flow__label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); }
.wk-flow__card--book .wk-flow__label { color: rgba(255, 255, 255, 0.7); }
.wk-flow__said { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.wk-flow__title { margin: 0; font-family: var(--display); font-size: clamp(20px, 2vw, 25px); font-weight: 600; line-height: 1.2; color: var(--yellow); }
.wk-flow__arrow { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; background: var(--yellow); color: var(--navy); }
.wk-flow__arrow svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .wk-spark { grid-template-columns: 1fr; } }

/* other sentences that become stories */
.wk-chips { margin-top: 32px; text-align: center; }
.wk-chips__title { margin: 0 0 16px; font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--navy); }
.wk-chips__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wk-chips__list li { padding: 9px 18px; border-radius: 999px; background: var(--pink); font-size: 15px; color: var(--navy); }

/* the cover that moves, beside the words about it */
.wk-phone { display: flex; justify-content: center; margin: 0; }

/* the shelf: the covers already there, then the places the next Fridays take */
.wk-shelf { padding: clamp(22px, 3vw, 36px) clamp(18px, 3vw, 36px) clamp(16px, 2vw, 24px); border-radius: 28px; background: var(--mist); }
.wk-shelf__row { display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 14px; margin: 0; padding: 0 0 20px; list-style: none; border-bottom: 5px solid var(--navy); border-radius: 0 0 4px 4px; }
.wk-shelf__item { min-width: 0; }
.wk-shelf__cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 22px rgba(20, 30, 60, 0.16); }
.wk-shelf__slot { display: block; width: 100%; aspect-ratio: 1; border: 2px dashed var(--border-2); border-radius: 10px; background: rgba(255, 255, 255, 0.45); }
.wk-shelf__note { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--text-3); }
@media (max-width: 900px) { .wk-shelf__row { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
.wk-marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; }
.wk-mark { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.wk-mark__when { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); }
.wk-mark__what { font-family: var(--display); font-size: 19px; font-weight: 500; line-height: 1.25; color: var(--navy); }
@media (max-width: 760px) { .wk-marks { grid-template-columns: 1fr; } }

/* one price, one card */
.wk-pricebox { display: flex; flex-direction: column; align-items: center; }
.wk-pricebox .head { margin-bottom: 32px; }
.wk-plan { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 460px; padding: clamp(26px, 3.4vw, 38px); border-radius: 26px; background: var(--surface); box-shadow: 0 20px 50px rgba(20, 30, 60, 0.1); text-align: center; }
.wk-plan__name { margin: 0; font-family: var(--display); font-size: 23px; font-weight: 500; color: var(--navy); }
.wk-plan__price { margin: 0; font-family: var(--display); font-size: clamp(44px, 5.4vw, 62px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--navy); }
.wk-plan__price span { display: block; margin-top: 8px; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
.wk-plan__list { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 4px 0 6px; padding: 0; list-style: none; text-align: left; }
.wk-plan__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.wk-plan__list svg { flex: none; width: 19px; height: 19px; margin-top: 2px; color: var(--navy); }
.wk-plan__note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.wk-first { max-width: 44em; margin: 28px 0 0; text-align: center; font-size: 16px; line-height: 1.6; color: var(--text-2); }

/* the printed ladder, small and last */
.wk-ladder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin: 0; font-size: 15px; color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .wk-screen__media { animation: none; }
}