/* css/dlya-dvoh.css — /dlya-dvoh/ преміум-редакційний редизайн.
   У межах залоченого бренду: Tenor Sans / Open Sans; ecru/brown/blue/ink/sand з styles.css. Нових hex нема. */

/* ── Редакційні мітки секцій: hairline + letterspaced label (hero-kicker не чіпаємо) ── */
.dd-choice .kicker, .dd-types .kicker, .dd-day .kicker, .dd-occasion .kicker, .dd-glance .kicker, .faq .kicker {
  color:var(--brown,#8C5A2B); display:inline-flex; align-items:center; gap:.7em }
.dd-choice .kicker::before, .dd-types .kicker::before, .dd-day .kicker::before,
.dd-occasion .kicker::before, .dd-glance .kicker::before, .faq .kicker::before {
  content:''; width:30px; height:1px; background:currentColor; opacity:.55 }

/* Заголовки секцій — стримана міра (кожне речення окремим рядком) */
.dd-choice h2, .dd-types h2, .dd-day h2, .dd-glance h2, .faq h2 { max-width:18ch; letter-spacing:-.01em }
/* консистентний відступ kicker→заголовок у ВСІХ секціях (як у «Вибір»; *{margin:0} інакше приплюскує) */
.dd-types h2, .dd-day h2, .dd-glance h2, .faq h2 { margin-top:clamp(18px,1.8vw,24px) }

/* ── ② Вибір — велике редакційне твердження ── */
.dd-choice { padding-block:clamp(64px,9vh,128px) }
.dd-choice + .dd-types { padding-top:clamp(48px,6vh,96px) }
.dd-choice h2 { font-size:clamp(2.1rem,4.4vw,3.4rem); margin:18px 0 0 }
.dd-choice__body { font-size:clamp(1.12rem,1.5vw,1.4rem); line-height:1.75; max-width:60ch; margin-top:24px; color:var(--ink-soft,#33352F) }

/* ── ③ Два типи — преміум-картки з глибиною ── */
.dd-types__grid { margin-top:clamp(36px,4.5vw,64px); align-items:stretch; gap:clamp(24px,3vw,40px) }
.dd-type { position:relative; background:var(--paper,#fff); border-radius:10px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-card), var(--edge-card);
  transition:transform .5s var(--ease-out,ease), box-shadow .5s var(--ease-out,ease) }
.dd-type:hover { transform:translateY(-4px); box-shadow:0 1px 2px rgba(25,26,24,.05), 0 30px 64px -30px rgba(25,26,24,.5) }
.dd-type picture { display:block; aspect-ratio:3/2; overflow:hidden; background:var(--sand,#E8D9C3) }
.dd-type img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease-out,ease) }
.dd-type:hover img { transform:scale(1.04) }
.dd-type__body { padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; gap:18px; flex:1 }
.dd-type__body h3 { font-size:clamp(1.7rem,2.4vw,2.1rem); line-height:1 }
.dd-type__body > p { color:var(--ink-soft,#33352F); max-width:48ch }
.dd-facts { margin:4px 0 0 }
.dd-facts > div { display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:13px 0; border-top:1px solid rgba(140,90,43,.16) }
.dd-facts dt { color:var(--willow,#67725A); font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap }
.dd-facts dd { margin:0; text-align:right; font-weight:600; font-variant-numeric:tabular-nums }
.dd-facts > div:last-child { border-bottom:1px solid rgba(140,90,43,.16) }
.dd-facts > div:last-child dt { color:var(--brown,#8C5A2B) }
.dd-facts > div:last-child dd { font-family:var(--font-h,'Tenor Sans',serif); font-weight:400; font-size:1.22rem; color:var(--brown,#8C5A2B) }
.dd-type .btn--ghost { align-self:flex-start; margin-top:auto }
.dd-types__note { margin-top:30px; color:var(--willow,#67725A); font-size:.95rem; max-width:64ch }

/* ── ④ Сценарії — триптих доби з нумерацією ── */
.dd-day { background:var(--paper,#fff) }
.dd-day__grid { margin-top:clamp(36px,4.5vw,64px); gap:clamp(22px,2.6vw,40px); counter-reset:vig }
.dd-vignette { counter-increment:vig }
.dd-vignette picture { display:block; aspect-ratio:3/2; border-radius:10px; overflow:hidden; background:var(--sand,#E8D9C3) }
.dd-vignette img { width:100%; height:100%; object-fit:cover; object-position:50% 66%; display:block; transition:transform .8s var(--ease-out,ease) }
.dd-vignette:hover img { transform:scale(1.03) }
.dd-vignette h3 { font-size:1.35rem; margin:18px 0 8px; display:flex; align-items:baseline; gap:.65em }
.dd-vignette h3::before { content:counter(vig,decimal-leading-zero); font-size:.8rem; letter-spacing:.12em;
  color:var(--brown,#8C5A2B); font-family:var(--font-b,sans-serif); font-weight:700 }
.dd-vignette p { color:var(--ink-soft,#33352F) }

/* ── ⑤ Особливі дати — тихий «пауза»-такт із декор-кільцем ── */
.dd-occasion { position:relative; overflow:hidden; text-align:center }
.dd-occasion::before { content:''; position:absolute; width:min(48vw,520px); height:min(48vw,520px); border-radius:50%;
  border:clamp(28px,4vw,56px) solid var(--brown,#8C5A2B); opacity:.12; right:-13vw; top:50%; transform:translateY(-50%); pointer-events:none }
.dd-occasion .wrap { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center }
.dd-occasion__line { font-size:clamp(1.4rem,2.6vw,2.1rem); font-family:var(--font-h,'Tenor Sans',serif); line-height:1.32;
  max-width:24ch; margin:18px 0 28px; text-wrap:balance }

/* ── ⑥ Що входить — спец-аркуш ── */
.dd-glance { background:var(--paper,#fff) }
.dd-glance__included { list-style:none; padding:0; margin:28px 0 clamp(40px,5vw,64px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 clamp(28px,4vw,56px) }
.dd-glance__included li { padding:13px 0 13px 22px; position:relative; color:var(--ink-soft,#33352F); border-top:1px solid rgba(140,90,43,.14) }
.dd-glance__included li::before { content:''; position:absolute; left:0; top:1.2em; width:6px; height:6px; border-radius:50%; background:var(--brown,#8C5A2B) }
.dd-facts--wide { display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,4vw,56px); border-top:2px solid rgba(140,90,43,.22); margin-top:4px }
.dd-facts--wide > div { display:block; padding:18px 0; border-top:1px solid rgba(140,90,43,.14) }
.dd-facts--wide dt { color:var(--willow,#67725A); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px }
.dd-facts--wide dd { margin:0; font-weight:600; font-size:1.06rem; line-height:1.4; font-variant-numeric:tabular-nums }

/* ── ⑦ FAQ — тонкі лінії ── */
.faq h2 { font-size:clamp(1.9rem,3.4vw,3rem) }
.faq .faq__item { border-top:1px solid rgba(140,90,43,.18) }
.faq .faq__item:last-of-type { border-bottom:1px solid rgba(140,90,43,.18) }

/* ── ⑧ Фінальний CTA — драматичний темний такт ── */
.dd-final { position:relative; overflow:hidden; background:var(--ink,#191A18); color:var(--ecru,#F7F3EC); text-align:center }
.dd-final::before { content:''; position:absolute; width:min(60vw,640px); height:min(60vw,640px); border-radius:50%;
  border:clamp(32px,5vw,64px) solid var(--brown,#8C5A2B); opacity:.16; left:50%; top:-32%; transform:translateX(-50%); pointer-events:none }
.dd-final .wrap { position:relative; z-index:1 }
.dd-final h2 { color:var(--ecru,#F7F3EC); max-width:16ch; margin-inline:auto; font-size:clamp(2rem,4vw,3.2rem) }
.dd-final p { margin:16px 0 14px; color:rgba(247,243,236,.85); font-size:1.1rem }

@media (max-width:880px) { .dd-facts--wide { grid-template-columns:repeat(2,1fr) } }
@media (max-width:760px) {
  .grid-2.dd-types__grid, .grid-3.dd-day__grid { grid-template-columns:1fr }
  .dd-facts--wide { grid-template-columns:1fr }
  .dd-occasion::before { display:none }
}
@media (prefers-reduced-motion:reduce) {
  .dd-type, .dd-type img, .dd-vignette img { transition:none }
  .dd-type:hover { transform:none }
}

/* ── ① Hero: текст + тепла скляна картка-факти (порт budynky .bud-card → .dd-card; рецепт-канон PAGE_PLAYBOOK §5) ── */
.dd-hero__inner { position:relative; z-index:2; width:100%; max-width:1280px; margin-inline:auto;
  padding:128px clamp(24px,5vw,56px) 84px; display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,56px); align-items:center }
@media (min-width:1000px){ .dd-hero__inner { grid-template-columns:1.08fr minmax(338px,408px); gap:clamp(48px,6vw,88px) } }
.dd-hero .hero__sub { max-width:42ch }
.dd-card { position:relative; z-index:2; width:100%; max-width:408px; justify-self:end; isolation:isolate;
  border-radius:16px; padding:24px 24px 22px; color:var(--ecru,#F7F3EC);
  background:rgba(25,26,24,.46); backdrop-filter:blur(15px) saturate(1.08); -webkit-backdrop-filter:blur(15px) saturate(1.08);
  border:1px solid rgba(247,243,236,.18); box-shadow:0 34px 90px -44px rgba(0,0,0,.78);
  opacity:0; animation:ddCardIn 1s 1.25s var(--ease-out,ease) forwards }
@keyframes ddCardIn { from{opacity:0; transform:translateX(34px)} to{opacity:1; transform:none} }
.dd-card__eyebrow { font-size:.66rem; letter-spacing:var(--track-label,.26em); text-transform:uppercase; font-weight:600; color:var(--sand,#E8D9C3); margin-bottom:14px }
.dd-card__toggle { display:flex; gap:8px; margin-bottom:20px }
.dd-pill { flex:1; background:rgba(247,243,236,.07); border:1px solid rgba(247,243,236,.2); color:rgba(247,243,236,.86);
  font-family:var(--font-h,'Tenor Sans',serif); font-size:1rem; padding:11px 8px; border-radius:10px; cursor:pointer; min-height:44px;
  transition:background .2s var(--ease-out,ease), color .2s var(--ease-out,ease), border-color .2s var(--ease-out,ease) }
.dd-pill:hover { background:rgba(247,243,236,.13) }
.dd-pill[aria-selected="true"] { background:var(--ecru,#F7F3EC); color:var(--ink,#191A18); border-color:var(--ecru,#F7F3EC) }
.dd-card__title { font-family:var(--font-h,'Tenor Sans',serif); font-weight:400; font-size:1.9rem; line-height:1; margin:0 0 6px }
.dd-card__lead { color:rgba(247,243,236,.82); font-size:.95rem; margin:0 0 14px; min-height:2.8em }
.dd-card__facts { margin:0 }
.dd-card__facts > div { display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:11px 0; border-top:1px solid rgba(247,243,236,.14) }
.dd-card__facts dt { color:rgba(247,243,236,.6); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap }
.dd-card__facts dd { margin:0; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ecru,#F7F3EC) }
.dd-card__price { display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:15px 0 4px; margin-top:2px; border-top:1px solid rgba(247,243,236,.22) }
.dd-card__price .lbl { color:var(--sand,#E8D9C3); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase }
.dd-card__price .price { color:var(--sand,#E8D9C3); font-family:var(--font-h,'Tenor Sans',serif); font-weight:400; font-size:1.34rem; line-height:1 }
.dd-card .btn { display:block; text-align:center; margin-top:16px; width:100% }
.dd-card__note { margin:11px 0 0; font-size:.74rem; line-height:1.45; color:rgba(247,243,236,.6) }
.dd-hero .rings--card { width:430px; height:430px; right:-120px; top:50%; transform:translateY(-50%); opacity:.14; z-index:1 }
@media (max-width:999px){ .dd-card { justify-self:stretch; max-width:none } .dd-hero .rings--card { display:none } }
@media (prefers-reduced-motion:reduce){ .dd-card { animation:none; opacity:1 } }

/* ── ④b Триптих доби — більші портретні кадри (редакційніше) ── */
.dd-vignette picture { aspect-ratio:4/5 }
.dd-vignette h3 { margin-top:22px }
.dd-vignette p { font-size:1.02rem }

/* ── Бренд-кільце у «Вибір» (тихий такт; народний орнамент тут НЕ юзаємо — collection) ── */
.dd-choice { position:relative; overflow:hidden }
.dd-choice .wrap { position:relative; z-index:1 }
.dd-choice .rings { width:min(42vw,460px); height:min(42vw,460px); border-width:clamp(26px,3.4vw,48px); right:-11vw; top:-14%; opacity:.13; z-index:0 }
@media (max-width:760px){ .dd-choice .rings { display:none } }