/* /carte-personalizata-despre-cineva-drag, the book about grown-ups (T1025-28; Sam, 25 Oct 2026: „fix spacing and make
   this less boring”): a warm band behind the top, the sections closer together, the book's life in pages, its first
   page, the moments it is for on a navy panel. */

/* closer sections than the long product pages, the band reaching the header */
.main:has(> .cd-top) { --main-gap: clamp(44px, 5vw, 72px); }
.cd-top { padding: clamp(20px, 3vw, 40px) 0 clamp(8px, 1.5vw, 20px); background: linear-gradient(180deg, #fbf1e6 0%, #fdf8f2 70%, rgba(253, 248, 242, 0) 100%); }
.main:has(> .cd-top) > .cd-top + section::before { content: none; }
.cd-top .pd-hero { align-items: center; }
.cd-top .pd-stage { background: #f4e8da; }

/* the book's life in pages: a label per spread, two a row, the spreads lying open */
.cd-life { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 36px); max-width: 1180px; margin: 0 auto; padding: 0; list-style: none; counter-reset: life; }
.cd-life__item { position: relative; display: flex; flex-direction: column; gap: 12px; }
.cd-life__item img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 1px 2px rgba(23, 40, 84, .08), 0 18px 36px -18px rgba(23, 40, 84, .35); }
.cd-life__label { counter-increment: life; display: inline-flex; align-items: center; gap: 10px; font-family: Rubik, sans-serif; font-weight: 600; font-size: 17px; color: var(--navy); }
.cd-life__label::before { content: counter(life); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--navy-3); font-size: 14px; }

/* the first page: the page itself beside its words */
.cd-first { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1080px; margin: 0 auto; }
.cd-first__page { margin: 0; padding: clamp(14px, 2vw, 22px); background: #f4e8da; border-radius: 22px; transform: rotate(-1.5deg); }
.cd-first__page img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 20px 40px -20px rgba(23, 40, 84, .45); }
.cd-first__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack, 16px); }
.cd-first__cta { width: auto; padding-inline: 36px; margin-top: 8px; }

/* the moments it is for: four on navy */
.cd-for { background: var(--navy); color: #fff; }
.cd-for .h2 { color: #fff; }
.cd-for .tag { background: rgba(255, 255, 255, .12); color: #fff; }
.cd-for .head { margin-bottom: clamp(28px, 4vw, 44px); }
.cd-for__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cd-for__item { padding: 24px 22px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.cd-for__item h3 { margin: 14px 0 6px; font-family: Rubik, sans-serif; font-size: 18px; color: #fff; }
.cd-for__item p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.cd-for__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--yellow); color: var(--navy-3); }
.cd-for__icon svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .cd-life { grid-template-columns: minmax(0, 1fr); }
  .cd-first { grid-template-columns: minmax(0, 1fr); }
  .cd-first__page { max-width: 420px; margin: 0 auto; }
  .cd-for__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .cd-for__list { grid-template-columns: minmax(0, 1fr); } }