/* =========================================================
   Хабы пород: /maltipu/, /francuzskij-buldog/, /toj-pudel/, /border-kolli/
   Только раскладка блоков хаба — плитки, кнопки, карточки щенков берутся из main.css и pages.css.
   ========================================================= */

/* первый экран на весь экран (ui.page_hero full=true): длинное название породы («Щенки французского бульдога»)
   — в две-три строки по ширине текста, а не в четыре; чипы гарантий — в одну строку на 1440 */
.phero__title { max-width: none; }
@media (min-width: 1001px) { .phero__copy { max-width: min(740px, 60%); } }
/* кадр — квадрат во всю высоту плитки, поэтому высоту плитки ограничиваем шириной экрана (высокий планшет), а текст
   заканчивается левее собаки: её левый край ≈ 59 % высоты плитки от правого края (кадр сдвинут на 8 %) */
@media (min-width: 761px) {
  .phero--full .phero__tile { --ph: min(max(560px, calc(100svh - var(--head-h) - 76px)), 72vw); min-height: max(560px, calc(100svh - var(--head-h) - 76px)); }
  .phero--full .phero__copy { max-width: min(740px, max(420px, calc(100% + clamp(28px, 3.4vw, 52px) - .59 * var(--ph) - 24px))); }
  /* высокий экран (портретный планшет): плитка — на весь экран, кадр — квадрат --ph, стоит на полу плитки;
     над ним — верхний тон кадра, линия пола плитки пересчитана на высоту кадра */
  .phero--full .phero__photo { top: auto; height: var(--ph); }
  .phero--full .phero--photo {
    background: linear-gradient(180deg, var(--tone-top, var(--tone-hi)) 0, var(--tone-top, var(--tone-hi)) calc(100% - var(--ph)), var(--tone-hi) calc(100% - .78 * var(--ph)),
      var(--tone-hi) calc(100% - (1 - var(--fa, .78)) * var(--ph)), var(--tone-floor) calc(100% - (1 - var(--fb, .97)) * var(--ph)));
  }
}
/* планшет: кадр сдвинут правее (собака целиком), текст до её левого края ≈ 51 % высоты плитки */
@media (min-width: 761px) and (max-width: 1000px) {
  .phero--full .phero__photo { transform: translateX(16%); }
  .phero--full .phero__copy { max-width: max(360px, calc(100% + clamp(28px, 3.4vw, 52px) - .51 * var(--ph) - 24px)); }
}

/* страница окраса (ui.page_hero cls="phero--colour", правка 15.10 «фото побольше»): плитка выше, справа — тот же щенок
   крупно (okras-…-big.jpg) во всю высоту плитки, шириной --ph, без сдвига за край; плитка выше --ph (длинный текст
   на планшете) — кадр режется по бокам (cover), пол кадра остаётся на линии пола плитки. Текст — до левого края щенка */
@media (min-width: 761px) {
  .phero--colour .phero__tile { --ph: clamp(460px, 40vw, 600px); min-height: var(--ph); align-items: center; }
  .phero--colour .phero__photo { width: var(--ph); aspect-ratio: auto; transform: none; }
  .phero--colour .phero__photo img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, transparent 0, #000 10%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, transparent 0, #000 10%);
  }
  .phero--colour .phero__copy { max-width: min(680px, calc(100% + clamp(28px, 3.4vw, 52px) - .8 * var(--ph))); }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .phero--colour .phero__tile { --ph: 380px; }
}
@media (max-width: 760px) {
  /* «Подобрать бордер-колли мраморный триколор» не помещается в строку на 360–390 — подпись переносится */
  .phero--colour .phero__actions .btn, .brd-colinfo__cta .btn {
    height: auto; min-height: 52px; padding-block: 12px; white-space: normal; line-height: 1.2; text-align: center;
  }
  .brd-colinfo__cta .btn { width: 100%; }
  .phero--colour .phero__photo { aspect-ratio: 1; }
  .phero--colour .phero__photo img {
    -webkit-mask-image: linear-gradient(180deg, #000 93%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 93%, transparent 100%);
  }
}

/* карусель «Фото и видео»: подпись карточки — обычной строкой (метка «Видео» в начале строки, длинная подпись
   переносится под неё, а не уходит отдельным блоком на вторую строку, как во flex-подписи из main.css) */
#foto-video .mcard__cap { display: block; }
#foto-video .mcard__kind { display: inline-block; margin-right: 8px; vertical-align: 1px; }

/* =========================================================
   «Какой он» — фото из жизни + четыре короткие карточки 2×2
   ========================================================= */
.brd-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); }
.brd-about__media { position: relative; min-height: 340px; border-radius: var(--r-tile); overflow: hidden; background: #E7E1D8; }
.brd-about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brd-about__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.brd-trait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "label ico" "title title" "line line" ". .";
  min-height: clamp(200px, 15vw, 232px);
  padding: var(--tile-pad); border-radius: var(--r-tile); background: var(--tile);
}
.brd-trait__label { grid-area: label; align-self: center; font-size: 14px; color: var(--muted); }
.brd-trait .ico { grid-area: ico; }
.brd-trait__title { grid-area: title; margin-top: clamp(28px, 3vw, 44px); font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.brd-trait__line { grid-area: line; margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--muted); }

/* =========================================================
   «Перед покупкой» — родители (студийное фото «в цвет»), цена, документы
   ========================================================= */
.brd-pre {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "parents price price price" "parents docs docs docs";
}
.brd-pre__parents { grid-area: parents; display: grid; container-type: inline-size; }
.brd-pre__price { grid-area: price; }
.brd-pre__docs { grid-area: docs; }
/* плитка родителей тянется на две строки, но не ниже своих 3 : 4 — собака всегда целиком */
.brd-pre__parents .stile { aspect-ratio: auto; height: 100%; min-height: calc(100cqi * 4 / 3); }

.brd-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--tile-pad); border-radius: var(--r-tile); background: var(--tile);
}
.brd-card__head { align-self: stretch; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.brd-card__title { font-size: clamp(24px, 2.1vw, 34px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; }
.brd-card__line { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--muted); }
.brd-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.brd-card__chips li {
  display: inline-flex; align-items: center; min-height: 38px; padding: 6px 15px;
  border-radius: var(--r-pill); background: var(--page);
  font-size: 14px; font-weight: 500; line-height: 1.25;
}
.brd-card .badges { margin-top: 16px; }
.brd-card .badges li { background: var(--page); }
.brd-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: auto; padding-top: 24px; }

/* =========================================================
   «Сравнить и почитать» — шесть ссылок: три сравнения и три материала, по три в ряд
   ========================================================= */
/* ссылок много — плитки компактные, в одну строку: кружок, текст, стрелка */
.brd-links .ltiles { --n: 3; }
.brd-links .ltile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 18px;
  min-height: 0; padding: 22px 22px 22px 24px;
}
.brd-links .ltile .face, .brd-links .ltile .ico { width: 52px; height: 52px; }
.brd-links .ltile .tcta { margin: 0; }
.brd-links .ltile__title { font-size: clamp(18px, 1.3vw, 21px); }

/* =========================================================
   Страница породы v2 (body.page-breed, правки 15.10): «Помочь с выбором» у каталога, окрасы-карусель,
   «Как мы отдаём щенка». Коралловые кнопки, крупная карусель фото и SEO-текст — общие правила в main.css
   ========================================================= */
.brd-help { flex: none; }

/* окрасы: лента карточек «с начала» (data-align="start" в main.js) — первая карточка у левого поля, без увеличения
   активной; на 1440 видно четыре карточки и край пятой, дальше — свайп и стрелки под лентой */
.brd-cols { --mc-w: clamp(256px, 22.4vw, 330px); }
.brd-cols .media-carousel__track { padding-inline: var(--pad); }
.brd-cols .media-carousel__viewport { scroll-padding-inline: var(--pad); }
.brd-cols .media-carousel__item { display: flex; scroll-snap-align: start; transform: none; opacity: 1; }
.brd-col { display: flex; flex-direction: column; width: 100%; border-radius: var(--r-tile); background: var(--tile); overflow: hidden; }
/* студийный кадр окраса целиком, на своём замеренном фоне (tone_style): квадрат во всю ширину карточки */
.brd-col__media { display: block; aspect-ratio: 1 / 1; background: var(--tone-hi, var(--peach)); overflow: hidden; }
.brd-col__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
@media (hover: hover) { .brd-col:hover .brd-col__media img { transform: scale(1.04); } }
.brd-col__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px 22px; }
.brd-col__name { font-size: clamp(21px, 1.7vw, 26px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; }
.brd-col__name a { text-decoration: none; }
.brd-col__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* две кнопки друг под другом: «Подобрать …» (коралловая) и «Подробнее» (белая, страница окраса) */
.brd-col__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto; }
.brd-col__text { font-size: 15px; line-height: 1.45; color: var(--muted); }
/* «Подобрать абрикосового мальтипу» — длинная подпись: кнопка во всю ширину, перенос в две строки вместо обрезки */
.brd-col__btn { width: 100%; height: auto; min-height: 46px; padding: 11px 14px; font-size: 14px; white-space: normal; line-height: 1.2; text-align: center; }
.brd-col__text { margin-bottom: 14px; }

/* карточка щенка на странице породы и окраса (cards.puppy_card simple=true): одна белая «Узнать цену» во всю ширину */
.ct-card--simple .ct-card__actions .btn { flex: 1 1 100%; width: 100%; }
.ct-card--simple .ct-card__price { background: #fff; border-color: transparent; }
.ct-card--simple .ct-card__price:hover { border-color: var(--ink); }
.ct-card--simple .pup__name { padding-right: 0; }
@media (max-width: 560px) { .ct-card--simple .ct-card__price { border-color: var(--line-2); } }

/* «Всё о мальтипу» (правки 15.10): четыре широкие карточки статей в ряд по ширине страницы, остальные — за краем,
   стрелки под лентой и свайп (part.post_carousel); планшет — три в ряд. Ширина карточки — от ширины ленты (cqw) */
.brd-posts { container-type: inline-size; --mc-w: calc((100cqw - 3 * var(--gap)) / 4); }
.brd-posts .media-carousel__track { padding-inline: var(--pad); }
.brd-posts .media-carousel__viewport { scroll-padding-inline: var(--pad); }
.brd-posts .media-carousel__item { display: flex; scroll-snap-align: start; transform: none; opacity: 1; }
.brd-posts .bteaser { width: 100%; }
.brd-posts .bteaser__topic { max-width: calc(100% - 16px); }

/* страница окраса: текст об окрасе слева, справа — факты и уход */
.brd-colinfo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); }
.brd-colinfo__text { padding: clamp(22px, 2.6vw, 40px); border-radius: var(--r-tile); background: var(--tile); }
.brd-colinfo__text p { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; }
.brd-colinfo__text p + p { margin-top: 14px; }
.brd-colinfo__side { display: flex; flex-direction: column; gap: var(--gap); }
.brd-colinfo__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: clamp(20px, 2.2vw, 32px); border-radius: var(--r-tile); background: var(--tile); }
.brd-colinfo__cta-title { font-size: clamp(22px, 1.8vw, 28px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.brd-colinfo__cta-text { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.brd-colinfo__cta .btn { margin-top: auto; }
.brd-colinfo__care { display: flex; gap: 14px; align-items: flex-start; padding: 18px var(--tile-pad); border-radius: var(--r-tile); background: var(--mint-50, #DDF5E8); }
.brd-colinfo__care .ico { flex: none; }
.brd-colinfo__care-title { font-size: 17px; font-weight: 500; }
.brd-colinfo__care-text { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

/* «Как мы отдаём щенка»: широкая плитка «приданого» (фото + список того, что едет со щенком),
   под ней четыре плитки-преимущества с фото: документы, гарантия, доставка, цена */
.brd-kit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap);
  padding: 8px; border-radius: var(--r-tile); background: var(--tile);
}
.brd-kit__media { position: relative; min-height: 340px; margin: 0; border-radius: var(--r-img); overflow: hidden; background: #E7E1D8; }
.brd-kit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brd-kit__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 2.4vw, 40px); }
.brd-kit__title { font-size: clamp(26px, 2.4vw, 40px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; }
.brd-kit__line { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--muted); }
.brd-kit__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: clamp(20px, 2.2vw, 32px); }
.brd-kit__item { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15.5px; font-weight: 500; line-height: 1.25; }
.brd-kit__item .ico { flex: none; }

.brd-gives { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.brd-give { display: flex; flex-direction: column; min-width: 0; padding: 8px; border-radius: var(--r-tile); background: var(--tile); }
.brd-give__media { aspect-ratio: 3 / 2; border-radius: var(--r-img); overflow: hidden; background: #E7E1D8; }
.brd-give__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brd-give__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px clamp(12px, 1.2vw, 18px) clamp(12px, 1.2vw, 18px); }
.brd-give__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.brd-give__line { font-size: 15px; line-height: 1.4; color: var(--muted); }
.brd-give__cta { margin-top: auto; padding-top: 14px; }

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 1199px) {
  .brd-posts { --mc-w: calc((100cqw - 2 * var(--gap)) / 3); }
  .brd-links .ltiles { --n: 2; }
  .brd-gives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brd-give__media { aspect-ratio: 16 / 9; }
  .brd-pre { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "parents price price" "parents docs docs"; }
}

@media (max-width: 1000px) {
  .brd-colinfo { grid-template-columns: minmax(0, 1fr); }
  .brd-kit { grid-template-columns: minmax(0, 1fr); }
  .brd-kit__media { min-height: 0; aspect-ratio: 16 / 9; }
  .brd-about { grid-template-columns: minmax(0, 1fr); }
  .brd-about__media { min-height: 0; aspect-ratio: 16 / 9; }

  /* цена и документы рядом, родители — широкой плиткой: кадр справа во всю высоту, левый край гаснет в стену */
  .brd-pre { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "price docs" "parents parents"; }
  .brd-pre__parents .stile {
    min-height: 0; height: clamp(232px, 56vw, 320px);
    background: linear-gradient(180deg, var(--tone-top, var(--tone-hi)) 0, var(--tone-hi) 22%, var(--tone-hi) calc(var(--fa, .78) * 100%), var(--tone-floor) calc(var(--fb, .97) * 100%));
  }
  .brd-pre__parents .stile__top { max-width: 52%; }
  .brd-pre__parents .stile__photo { left: auto; right: -6%; top: 0; bottom: 0; height: 100%; }
  .brd-pre__parents .stile__photo img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 12%);
    mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 12%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}

@media (max-width: 900px) {
  .brd-links .ltiles { --n: 1; }
}

@media (max-width: 760px) {
  /* «Помочь с выбором» — под заголовком каталога, во всю ширину */
  #shchenki .sec-head { flex-wrap: wrap; }
  .brd-help { width: 100%; }
  /* окрасы: карточка ≈ три четверти экрана — видно край следующей, листается свайпом */
  .brd-cols { --mc-w: min(76vw, 320px); }
  /* статьи: на телефоне не листаются вбок (правка 13.10) — компактный список, как в blocks.blog_teasers */
  .brd-posts .media-carousel__viewport { overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .brd-posts .media-carousel__track { display: grid; grid-template-columns: minmax(0, 1fr); width: auto; padding: 0; }
  .brd-posts .media-carousel__item { width: auto; }
  .brd-posts .media-carousel__nav { display: none; }
  .brd-kit__media { aspect-ratio: 3 / 2; }
  .brd-kit__body { padding: 12px 12px 16px; }
  .brd-kit__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .brd-gives { grid-template-columns: minmax(0, 1fr); }
  .brd-give__media { aspect-ratio: 16 / 9; }
  .brd-about__media { aspect-ratio: 3 / 2; }
  .brd-trait { min-height: 0; padding: 18px; }
  .brd-trait__title { margin-top: 18px; font-size: 19px; }
  .brd-trait__line { margin-top: 6px; font-size: 14.5px; }

  /* одна колонка: цена, документы, затем родители широкой плиткой */
  .brd-pre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "price" "docs" "parents"; }
  .brd-card { padding: 20px; }
  .brd-card__title { font-size: 24px; }
  .brd-card .ico { width: 40px; height: 40px; }
  .brd-card__line { font-size: 15px; }
  .brd-card__chips li, .brd-card .badges li { min-height: 34px; font-size: 13.5px; }
  .brd-card__actions { padding-top: 20px; }
  .brd-card__actions .btn { flex: 1 1 100%; }

  .brd-links .ltile { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 16px; }
  .brd-links .ltile .tcta { grid-column: 2; justify-self: start; }
  .brd-links .ltile .face, .brd-links .ltile .ico { width: 44px; height: 44px; }
  .brd-links .ltile__title { font-size: 18px; }
}

/* короткий телефон (360 × 640, 375 × 667): кадр ниже, чипы гарантий — под кнопками, «Подобрать щенка» — в первом экране */
@media (max-width: 760px) and (max-height: 720px) {
  .phero--full .phero__photo { min-height: 150px; }
  .phero--full .phero__chips { order: 1; padding-top: 16px; }
}

@media (max-width: 560px) {
  /* первый экран на телефоне: без надзаголовка («в Москве» уже в H1) — кнопки помещаются в первый экран */
  .phero .eyebrow { display: none; }
  .phero .eyebrow + .phero__title { margin-top: 0; }
  .phero__chips li { height: 32px; font-size: 13px; }

  .brd-about__list { grid-template-columns: minmax(0, 1fr); }
  .brd-trait { grid-template-rows: auto auto auto; grid-template-areas: "label ico" "title ico" "line line"; row-gap: 2px; }
  .brd-trait__title { margin-top: 0; }
  .brd-trait__label { align-self: end; font-size: 13px; }
  .brd-trait .ico { align-self: center; }
}