/* ============================================================
   Страница дизайн-проекта (Figma 669:13700) — page-specific CSS.
   Relies on ../assets/css/style.css for tokens/header/faq/footer.
   ============================================================ */

.dp{width:100%}
.dp-stack{margin-top:43px;display:flex;flex-direction:column;gap:140px}

/* shared outline button (accent) */
.dp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:58px;padding:0 20px;border-radius:12px;font-weight:700;font-size:20px;line-height:1;white-space:nowrap}
.dp-btn--out{background:#fff;border:1.5px solid var(--accent);color:var(--accent)}
.dp-arr{flex:none}

/* ============================================================
   1. PROJECT HERO (669:14846)
   ============================================================ */
.dph{display:flex;justify-content:space-between;align-items:flex-start;gap:102px}
.dph__left{flex:1;display:flex;flex-direction:column}
.dph__crumbs{display:flex;align-items:center;gap:10px;margin-bottom:52px;
  font-size:18px;line-height:21.6px;color:var(--muted)}
.dph__crumbs a{color:var(--muted)}
.dph__crumb-cur{color:var(--navy)}
.dph__dot{width:4px;height:4px;border-radius:50%;background:var(--muted);flex:none}

.dph__title{margin:0 0 42px;font-weight:700;font-size:62px;line-height:58.9px;color:var(--navy);max-width:841px}

.dph__specs{display:flex;gap:76px;margin-bottom:42px}
.dph__spec-col{display:flex;flex-direction:column;gap:36px}
.dph__spec{display:flex;flex-direction:column;gap:10px}
.dph__spec-l{font-size:18px;line-height:22px;color:var(--muted)}
.dph__spec-v{font-weight:700;font-size:20px;line-height:22px;color:var(--navy)}

.dph__about{margin-bottom:42px}
.dph__about-l{margin:0 0 14px;font-size:18px;line-height:22px;color:var(--muted)}
.dph__about-body{display:flex;flex-direction:column;gap:10px}
.dph__about-body p{margin:0;font-size:20px;line-height:26.4px;color:var(--navy)}

.dph__cta{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.dph__pdf{display:inline-flex;align-items:center;gap:12px;font-size:16px;line-height:23.6px;color:var(--muted)}
.dph__pdf svg{flex:none}

.dph__media{width:635px;height:778px;flex:none;border-radius:20px;overflow:hidden;background:#b8b8b8}
.dph__media img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   ROOM SECTIONS (669:14863 …) — gallery + title + text
   ============================================================ */
.dproom{display:flex;flex-direction:column;gap:52px}
/* Uniform responsive gallery grid — robust for ANY number of photos (the old
   fixed narrow/wide/narrow 3-per-row template broke on incomplete rows). */
.dproom__imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dproom__imgs img{width:100%;height:100%;aspect-ratio:373/300;object-fit:cover;border-radius:12px;display:block}

.dproom__kuh{display:flex;flex-direction:column;gap:20px}
.dproom__kuh-row2{display:flex;justify-content:space-between}
.dproom__kuh-row2 img{width:765px;height:440px;border-radius:12px;object-fit:cover;display:block}
.dproom__kuh-row3{display:flex;justify-content:space-between}
.dproom__kuh-row3 img{width:504px;height:440px;border-radius:12px;object-fit:cover;display:block}

.dproom__text{display:flex;flex-direction:column;gap:20px}
.dproom__title{margin:0;font-weight:700;font-size:48px;line-height:50px;color:var(--navy)}
.dproom__body{margin:0;font-size:20px;line-height:30px;color:var(--navy)}

/* ============================================================
   КАК МЫ РАБОТАЕМ (669:14965)
   ============================================================ */
.dpw{display:flex;flex-direction:column;gap:52px}
.dpw__title{margin:0;font-weight:700;font-size:48px;line-height:50px;color:var(--navy)}
.dpw__grid{display:flex;gap:20px}
.dpw__main{flex:1;display:flex;flex-direction:column;gap:20px}
.dpw__row{display:flex;gap:20px}
.dpw__card{flex:1;height:342px;border:2px solid var(--border);border-radius:12px;padding:32px;
  display:flex;flex-direction:column}
.dpw__num{font-weight:700;font-size:32px;line-height:26.8px;color:var(--accent);margin-bottom:32px}
.dpw__card-body{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.dpw__card-title{margin:0;font-weight:700;font-size:26px;line-height:30px;color:var(--navy)}
.dpw__card-desc{margin:0;font-size:18px;line-height:26px;color:var(--muted)}
.dpw__img{flex:1;height:342px;border-radius:12px;overflow:hidden}
.dpw__img img{width:100%;height:100%;object-fit:cover;display:block}

.dpw__side{width:373px;flex:none;display:flex;flex-direction:column;gap:20px}
.dpw__plan{width:373px;height:519px;border-radius:12px;overflow:hidden;position:relative}
.dpw__plan img{width:100%;height:100%;object-fit:cover;display:block}
.dpw__plan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 100%)}
.dpw__contact{height:163px;background:var(--card);border-radius:12px;padding:20px 28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.dpw__contact-txt{margin:0;font-size:20px;line-height:29px;text-align:center;color:var(--navy)}
.dpw__contact-btns{display:flex;gap:6px}
.dpw__cbtn{width:55px;height:53px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.dpw__cbtn--tg{background:#4a8ed5}
.dpw__cbtn--max{background:#5b22b8}

/* ============================================================
   ДРУГИЕ НАШИ ДИЗАЙН-ПРОЕКТЫ (669:15009) — full-width, inner 1552
   ============================================================ */
.dpp{width:100%;margin-top:120px}
.dpp__inner{width:var(--content);margin:0 auto;display:flex;flex-direction:column;gap:52px}
.dpp__head{display:flex;flex-direction:column;gap:20px}
.dpp__title{margin:0;font-weight:700;font-size:48px;line-height:50px;color:var(--navy)}
.dpp__sub{margin:0;font-size:20px;line-height:30px;color:var(--navy);max-width:797px}
.dpp__grid{display:flex;flex-direction:column;gap:20px}
.dpp__row{display:flex;gap:20px}
.dpp__more{align-self:flex-start}

.dpc{width:766px;height:607px;background:var(--card);border-radius:12px;display:flex;flex-direction:column}
.dpc__photo{width:766px;height:469px;border-radius:12px 12px 0 0;overflow:hidden;position:relative;flex:none}
.dpc__photo img{width:100%;height:100%;object-fit:cover;display:block}
.dpc__nav{position:absolute;bottom:16px;width:16px;height:16px;background:#fff;cursor:pointer}
.dpc__nav--l{left:20px;clip-path:polygon(100% 0,100% 100%,0 50%)}
.dpc__nav--r{right:20px;clip-path:polygon(0 0,0 100%,100% 50%)}
.dpc__dots{display:flex;gap:10px;justify-content:center;margin-top:16px}
.dpc__dots i{width:6px;height:6px;border-radius:50%;background:#d9d9d9}
.dpc__dots i.on{background:var(--navy)}
.dpc__foot{margin-top:24px;height:60px;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.dpc__info{display:flex;flex-direction:column;gap:14px}
.dpc__title{margin:0;font-weight:700;font-size:26px;line-height:26px;color:var(--navy)}
.dpc__sub{margin:0;font-size:18px;line-height:20px;color:var(--navy)}
.dpc__more{flex:none;display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:12px;
  padding:16px 28px;height:60px;font-weight:700;font-size:20px;line-height:1;color:var(--navy)}

/* ============================================================
   CTA «Давайте встретимся» (703:1906) — full-width navy
   ============================================================ */
.dpcta{position:relative;width:100%;height:612px;margin-top:120px;overflow:hidden;
  background:
    radial-gradient(1200px 700px at 78% -10%,#1b455e 0%,rgba(1,46,74,0) 60%),
    radial-gradient(1400px 900px at -10% 120%,#1b455e 0%,rgba(1,46,74,0) 55%),
    var(--navy)}
.dpcta__inner{position:relative;width:var(--content);height:100%;margin:0 auto}
.dpcta__content{position:absolute;top:136px;left:5px;width:1072px;display:flex;flex-direction:column}
.dpcta__heading{}
.dpcta__title{margin:0;font-weight:700;font-size:59px;line-height:70.2px;color:#fff}
.dpcta__u{border-bottom:6px solid rgba(11,102,195,0.5);padding-bottom:1px}
.dpcta__sub{margin:6px 0 0;font-size:38px;line-height:44px;color:#fff}
.dpcta__lead{margin:24px 0 0;font-size:20px;line-height:29.5px;color:#fff;max-width:871px}
.dpcta__actions{margin-top:98px;display:flex;align-items:center;gap:16px}
.dpcta__btn{display:inline-flex;align-items:center;justify-content:center;width:455px;height:68px;
  background:#fff;border-radius:12px;font-weight:700;font-size:22px;color:var(--navy)}
.dpcta__socs{display:flex;gap:8px}
.dpcta__soc{width:68px;height:68px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.dpcta__soc--max{background:#5b22b8}
.dpcta__soc--tg{background:#4a8ed5}
.dpcta__photo{position:absolute;top:101px;right:126px;width:410px;height:534px}
.dpcta__photo img{width:100%;height:100%;object-fit:contain;object-position:bottom;display:block}

/* keep reused faq/footer margins from home (both margin-top:120px) */

/* ============================================================
   NARROW DESKTOP (1025–1919) — scaled proportionally via `zoom`
   (see app.js / style.css). No per-page reflow rules needed.
   ============================================================ */

/* ============================================================
   MOBILE fallback (no dedicated mobile mockups — graceful degrade)
   ============================================================ */
@media(max-width:1000px){
  .dph{flex-direction:column;gap:32px}
  .dph__title{font-size:40px;line-height:1.05}
  .dph__media{width:100%;height:auto;aspect-ratio:635/778}
  .dph__specs{flex-wrap:wrap;gap:32px}
  .dproom__imgs{grid-template-columns:repeat(2,1fr);gap:16px}
  .dproom__kuh-row2 img,.dproom__kuh-row3 img{width:100%;height:auto}
  .dproom__kuh-row2,.dproom__kuh-row3{flex-direction:column;gap:16px}
  .dproom__title,.dpw__title,.dpp__title,.dpcta__title{font-size:32px;line-height:1.1}
  .dpw__grid{flex-direction:column}
  .dpw__row{flex-direction:column}
  .dpw__card,.dpw__img{width:auto;height:auto;min-height:280px}
  .dpw__side{width:auto}
  .dpp__row{flex-direction:column}
  .dpc{width:auto}
  .dpc__photo{width:auto}
  .dpcta{height:auto;padding:48px 0}
  .dpcta__content{position:static;width:auto}
  .dpcta__photo{display:none}
  .dpcta__title{font-size:32px}
  .dpcta__btn{width:100%}
}

/* ============================================================
   MOBILE 390px — Figma frame 698:688 (content 358, 16px margins)
   ============================================================ */
.dp-m{display:none}
@media(max-width:1024px){
  .dp-d{display:none}
  .dp-m{display:inline}

  /* Figma margins: 16px (content 358 on 390) */
  .container,.dpp__inner{
    width:auto;
    max-width:none;
    margin-left:0;
    margin-right:0;
    padding-left:16px;
    padding-right:16px;
  }

  /* stack rhythm (Figma content stack 703:2273 gap80) */
  .dp-stack{margin-top:20px;gap:80px}

  /* ---- PROJECT HERO 742:38677 (crumbs, image, title, specs, about, cta) ---- */
  .dph{flex-direction:column;gap:0}
  .dph__left{display:contents}
  .dph__crumbs{order:1;flex-wrap:wrap;gap:10px;margin:0 0 20px;font-size:15px;line-height:18px}
  .dph__media{order:2;width:100%;height:auto;aspect-ratio:358/334;margin:0 0 24px}
  .dph__title{order:3;margin:0 0 32px;font-size:36px;line-height:36px;max-width:none}
  .dph__specs{order:4;display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;margin:0 0 40px}
  .dph__spec-col{display:contents}
  .dph__spec{gap:8px}
  .dph__spec-l{font-size:15px;line-height:18px}
  .dph__spec-v{font-size:18px;line-height:22px}
  .dph__about{order:5;margin:0}
  .dph__about-l{font-size:16px}
  .dph__about-body p{font-size:20px;line-height:26px}
  .dph__cta{order:6;margin:0;gap:32px;align-self:stretch}
  .dph__cta .dp-btn{width:100%;height:63px;font-size:20px}
  .dph__pdf{font-size:15px;line-height:22px}

  /* ---- ROOM GALLERIES 703:1953 etc — horizontal carousel (images 300px) ---- */
  .dproom{gap:32px}
  .dproom__imgs{flex-wrap:nowrap;justify-content:flex-start;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .dproom__kuh{flex-direction:row;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .dproom__kuh-row2,.dproom__kuh-row3{display:contents}
  .dproom__imgs img,.dproom__kuh img{
    width:300px!important;height:445px!important;flex:none;border-radius:12px;scroll-snap-align:start}
  .dproom__text{gap:16px}
  .dproom__title{font-size:32px;line-height:36px}
  .dproom__body{font-size:20px;line-height:26px}

  /* ---- КАК МЫ РАБОТАЕМ 703:2106 — single column, cards + image + plan + contact ---- */
  .dpw{gap:40px}
  .dpw__title{font-size:32px;line-height:36px}
  .dpw__grid{flex-direction:column;gap:14px}
  .dpw__main{display:contents}
  .dpw__row{display:contents}
  .dpw__side{display:contents}
  .dpw__card{width:auto;height:auto;min-height:247px;padding:20px}
  .dpw__num{margin-bottom:24px}
  .dpw__img{width:auto;flex:none;height:247px;min-height:0}
  .dpw__plan{width:auto;height:296px}
  .dpw__contact{width:auto;height:auto;min-height:148px}

  /* ---- ДРУГИЕ ДИЗАЙН-ПРОЕКТЫ 703:2149 — listing cards single column ---- */
  .dpp{margin-top:80px}
  .dpp__title{font-size:32px;line-height:36px}
  .dpp__sub{font-size:20px;line-height:26px;max-width:none}
  .dpp__grid{gap:14px}
  .dpp__row{flex-direction:column;gap:14px}
  .dpc{width:auto;height:auto}
  .dpc__photo{width:auto;height:auto;aspect-ratio:358/487;flex:none}
  .dpc__foot{flex-direction:column;align-items:flex-start;height:auto;margin-top:16px;gap:16px;padding:0 12px 20px}
  .dpc__title{font-size:24px;line-height:28px}
  .dpc__sub{font-size:16px;line-height:22px}
  .dpc__more{padding:14px 24px;height:auto;font-size:16px}
  .dpp__more{align-self:center;width:auto;height:52px;padding:0 32px;font-size:16px}

  /* ---- CTA «Давайте встретимся» 703:2244 — centered, photo below ---- */
  .dpcta{height:auto;margin-top:80px;padding:76px 0 0}
  .dpcta__inner{width:auto;display:flex;flex-direction:column;align-items:center;padding:0 20px;text-align:center}
  .dpcta__content{position:static;width:auto;align-items:center;text-align:center}
  .dpcta__title{font-size:40px;line-height:45px}
  .dpcta__u{border-bottom-width:6px}
  .dpcta__sub{font-size:30px;line-height:36px}
  .dpcta__lead{max-width:none;font-size:20px;line-height:26.7px}
  .dpcta__actions{margin-top:32px;width:100%;justify-content:space-between;gap:8px}
  .dpcta__btn{width:auto;flex:1 1 auto;height:56px;font-size:20px}
  .dpcta__socs{gap:4px}
  .dpcta__soc{width:56px;height:56px}
  .dpcta__photo{display:block;position:static;width:280px;height:auto;aspect-ratio:280/364;margin:40px auto 0}
  .dpcta__photo img{object-fit:contain}

  /* faq/footer reflow via home style.css @media; align section gap */
  .faq{margin-top:80px}
}