/* ============================================================
   page-kottedzh.css — коттедж 350 м² (/kottedzh/).
   Только var(--…) из tokens.css. 1-в-1 с kottedzh.dc.html.
   ============================================================ */

/* ---------- HERO (тёмный, фото на фоне) ---------- */
.khero{ position: relative; border-radius: 24px; overflow: hidden; min-height: 580px; background: #1a2420 center/cover no-repeat; display: flex; align-items: flex-end; margin-top: 6px; }
.khero__grad{ position: absolute; inset: 0; background: linear-gradient(180deg,rgba(15,20,18,.35) 30%,rgba(15,20,18,.85)); }
.khero__body{ position: relative; padding: 48px; width: 100%; color: var(--c-white); }
.khero__badge{ display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: 20px; }
.khero__badge .stars{ color: var(--c-star); font-size: 13px; letter-spacing: 2px; }
.khero__badge span:last-child{ font-family: var(--font-head); font-size: 13px; letter-spacing: .03em; }
.khero__h1{ font-size: clamp(32px,5vw,60px); line-height: 1.03; margin: 0; max-width: 20ch; }
.khero__lead{ max-width: 62ch; font-size: 18px; line-height: 1.7; color: #DCE5E1; margin: 18px 0 0; }
.khero__lead-below{ max-width: 72ch; font-size: 18px; line-height: 1.7; color: var(--c-muted, #5A6663); margin: 22px 0 0; }
.khero__foot{ display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: 26px 0 0; }
.khero__price{ font-family: var(--font-head); font-size: clamp(30px,4vw,44px); color: var(--c-pattern); line-height: 1; }
.khero__price span{ font-size: 16px; color: #8a8f8c; }
.khero__price-note{ font-size: 15px; color: #5A6663; max-width: 34ch; }
.khero__actions{ display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Метрики ---------- */
.kmetrics{ display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid rgba(23,27,26,.16); }
.kmetric{ padding: 24px 18px 0; border-left: 1px solid var(--bd-dark); }
.kmetric__num{ font-family: var(--font-head); font-size: clamp(26px,3vw,38px); line-height: 1; color: var(--c-pattern); }
.kmetric__label{ font-size: 13px; color: #5A6663; margin-top: 9px; line-height: 1.4; }

/* ---------- Удобства (чипы) ---------- */
.kamen{ display: flex; flex-wrap: wrap; gap: 10px; }
.kamen span{ border: 1px solid var(--bd-dark-2); background: var(--c-white); border-radius: var(--r-pill); padding: 10px 18px; font-size: 15px; color: var(--c-graygreen); }

/* ---------- Планировка ---------- */
.kfloors{ display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.kfloor{ padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; min-height: 220px; border-radius: 20px; }
.kfloor__tag{ font-family: var(--font-head); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-green); }

/* ---------- УТП территории (тёмный) ---------- */
.kterr{ position: relative; overflow: hidden; border-radius: 24px; color: var(--c-white); background: var(--c-pattern) url('pattern-dark-seamless.png'); background-size: 300px; }
.kterr__grad{ position: absolute; inset: 0; background: linear-gradient(115deg,rgba(15,32,25,.92),rgba(15,32,25,.66)); }
.kterr__body{ position: relative; padding: 56px 48px; }
.kterr__body h2{ font-size: clamp(28px,3.8vw,48px); line-height: 1.04; margin: 0 0 16px; max-width: 22ch; }
.kterr__lead{ font-size: 18px; line-height: 1.7; color: var(--c-on-dark); margin: 0 0 34px; max-width: 60ch; }
.kterr__grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.kterr__card{ background: rgba(255,255,255,.07); border: 1px solid var(--bd-light-2); border-radius: 16px; padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.kterr__card span{ font-size: 28px; }
.kterr__card h3{ font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; font-size: 17px; margin: 0; }
.kterr__card p{ font-size: 14px; line-height: 1.55; color: #9FB3AC; margin: 0; }

/* ---------- Мероприятия ---------- */
.kevents{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.kevent{ padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; border-radius: 18px; }
.kevent span{ font-size: 26px; }
.kevent h3{ font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; font-size: 18px; margin: 0; color: var(--c-text); }
.kevent p{ font-size: 14px; line-height: 1.55; color: #5A6663; margin: 0; }

/* ---------- Цены ---------- */
.kprices{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.kprices__table{ overflow: hidden; }
.kprices__head{ padding: 26px 28px; border-bottom: 1px solid var(--bd-dark); }
.ktable{ width: 100%; border-collapse: collapse; font-size: 15px; }
.ktable th{ font-family: var(--font-head); font-weight: 500; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #8a8f8c; text-align: right; padding: 16px 14px; }
.ktable th:first-child{ text-align: left; padding-left: 28px; }
.ktable th:last-child{ padding-right: 28px; }
.ktable td{ padding: 18px 14px; border-top: 1px solid var(--bd-dark); text-align: right; font-family: var(--font-head); color: var(--c-pattern); }
.ktable td:first-child{ text-align: left; padding-left: 28px; color: var(--c-text); font-family: var(--font-body); }
.ktable td:last-child{ padding-right: 28px; }
.kprices__free{ padding: 20px 28px; border-top: 1px solid var(--bd-dark); display: flex; align-items: center; gap: 12px; background: rgba(30,122,90,.06); font-size: 15px; color: var(--c-pattern); }
.kprices__side{ display: flex; flex-direction: column; gap: 18px; }
.kprices__box{ padding: 24px 26px; border-radius: 18px; }
.kprices__box--dark{ background: var(--c-pattern); color: var(--c-white); }
.kprices__box--dark p{ font-size: 15px; line-height: 1.65; color: var(--c-on-dark); margin: 0; }

/* ---------- Отзывы (2 колонки) ---------- */
.reviews-rating{ display: inline-flex; align-items: center; gap: 10px; background: var(--c-white); border: 1px solid var(--bd-dark); border-radius: var(--r-pill); padding: 9px 18px; color: var(--c-text); }
.reviews-rating__stars{ color: var(--c-star); font-size: 16px; letter-spacing: 2px; }
.reviews-rating__label{ font-family: var(--font-head); font-size: 15px; letter-spacing: .03em; }
.reviews-grid{ columns: 2; column-gap: 22px; }
.review{ break-inside: avoid; margin: 0 0 22px; background: var(--c-white); border: 1px solid var(--bd-dark); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.review__stars{ color: var(--c-star); font-size: 15px; letter-spacing: 2px; }
.review blockquote{ margin: 0; font-size: 16px; line-height: 1.65; color: var(--c-graygreen); flex: 1; }
.review figcaption{ margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bd-dark); }
.review__author{ font-family: var(--font-head); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--c-text); }
.review__meta{ font-size: 13px; color: #8a8f8c; margin-top: 3px; }
.review__src{ display: inline-block; font-size: 12px; color: var(--c-green); margin-top: 8px; letter-spacing: .02em; }
.dev-note{ margin-top: 28px; background: #FBF6E9; border: 1px dashed #C9A24B; border-radius: var(--r-md); padding: 18px 22px; font-size: 14px; line-height: 1.6; color: #7A5E1E; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1024px){
  .kmetrics{ grid-template-columns: repeat(3,1fr); }
  .kfloors, .kterr__grid, .kevents{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px){
  .kprices{ grid-template-columns: 1fr; gap: 28px; }
  .khero__body{ padding: 32px 24px; }
  .kterr__body{ padding: 40px 28px; }
  .reviews-grid{ columns: 1; }
}
@media (max-width: 900px){
  .kmetrics{ grid-template-columns: repeat(2,1fr); }
  .kmetric{ padding: 18px 14px 18px; border-top: 1px solid rgba(23,27,26,.1); }
  .kmetrics > .kmetric:nth-child(odd){ border-left: 0; }
  .kmetrics > .kmetric:nth-child(-n+2){ border-top: 0; }
  .kmetrics > .kmetric:last-child:nth-child(odd){ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .kfloors, .kterr__grid, .kevents{ grid-template-columns: 1fr; }
}

/* ---------- Галерея + вертикальное видео ---------- */
.kgallery{ display:grid; grid-template-columns:27% 1fr; gap:14px; align-items:start; }
.kvideo{ position:relative; width:100%; border-radius:18px; overflow:hidden; aspect-ratio:9/16; background:var(--c-dark-deep); }
.kvideo__bg{ position:absolute; inset:0; background:repeating-linear-gradient(135deg,#16201b 0 18px,#1b271f 18px 36px); }
.kvideo__grad{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,20,18,.12),rgba(15,20,18,.8)); }
.kvideo__body{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--c-white); text-align:center; padding:22px; }
.kvideo__play{ width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; }
.kvideo__play i{ width:0; height:0; border-left:20px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:5px; }
.kvideo__label{ font-family:var(--font-head); font-weight:500; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(18px,1.5vw,24px); }
.kvideo__note{ font-size:12px; color:var(--c-on-dark); margin-top:6px; font-family:ui-monospace,monospace; letter-spacing:.03em; line-height:1.5; }
.kgrid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:300px; gap:14px; }
.kgrid figure{ margin:0; border-radius:18px; overflow:hidden; position:relative; background:#e6e4db; min-height:150px; cursor:pointer; }
.kgrid figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.kgrid figure .ph{ width:100%; height:100%; }
.kgrid figure.span2{ grid-column:span 2; }
@media (max-width:900px){ .kgallery{ grid-template-columns:1fr; } .kvideo{ max-width:280px; margin:0 auto; } .kgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .kgrid{ grid-template-columns:1fr; grid-auto-rows:210px; } .kgrid figure.span2{ grid-column:auto; } }