/* Блоки контента (стартовые стили; точную отрисовку под концепт делаем поблочно с GPT). @layer components. */
@layer components {
  .bbq-section--alt { background: var(--bbq-surface-2); }

  /* Плейсхолдер-иконка (пока нет чистых ассетов) — приглушённая, чтобы выглядела как заглушка, а не «битая картинка». */
  .bbq-ico-ph { color: var(--bbq-muted); }

  /* иконочные сетки: chto_stroim / komu_podhodit / iz_chego_cena */
  .bbq-icongrid__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
    background: var(--bbq-surface); border: 1px solid var(--bbq-line); border-radius: var(--bbq-radius); padding: 24px 16px; color: var(--bbq-ink); }
  a.bbq-icongrid__item:hover { border-color: var(--bbq-accent); }
  .bbq-icongrid__icon { width: 56px; height: 56px; object-fit: contain; }
  .bbq-icongrid__name { font-weight: 600; }
  .bbq-icongrid__note { margin-top: 20px; color: var(--bbq-ink-soft); }

  /* ЧТО СТРОИМ — ряд из 7 карточек (иконка-сверху) */
  .bbq-chto__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
  .bbq-chto .bbq-icongrid__item { padding: 18px 10px; gap: 10px; }
  .bbq-chto .bbq-icongrid__icon { width: 100%; height: 64px; object-fit: contain; }
  .bbq-chto .bbq-icongrid__name { font-size: 13px; line-height: 1.2; }
  @media (max-width: 1100px) { .bbq-chto__grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 760px)  { .bbq-chto__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 520px)  { .bbq-chto__grid { grid-template-columns: repeat(2, 1fr); } }

  /* КОМУ ПОДХОДИТ — 4 в ряд, иконка слева, БЕЗ карточки (прозрачные, как в макете) */
  .bbq-komu__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .bbq-komu__item { display: flex; gap: 14px; align-items: flex-start; padding: 8px 4px; background: transparent; border: 0; box-shadow: none; }
  .bbq-komu__icon { width: 60px; height: 60px; object-fit: contain; flex: 0 0 auto; }
  .bbq-komu__name { font-family: var(--bbq-font-head); font-weight: 700; color: var(--bbq-ink); display: block; margin-bottom: 6px; }
  .bbq-komu__desc { color: var(--bbq-ink-soft); font-size: 14px; margin: 0; line-height: 1.4; }
  @media (max-width: 900px) { .bbq-komu__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .bbq-komu__grid { grid-template-columns: 1fr; } }

  /* почему не только кирпич */
  /* Иконка в карточке блока: достаточно крупная, чтобы «держать» карточку.
     Высота фиксирована, ширина auto — широкие scene-иконки (cs-*) не сжимаются в крошку,
     квадратные (sostav-*) рендерятся 64×64. Правило: иконка не должна теряться в карточке. */
  .bbq-why__icon { width: auto; max-width: 100%; height: 64px; object-fit: contain; object-position: left center; margin-bottom: 14px; }
  .bbq-why__item p { color: var(--bbq-ink-soft); margin: 0; }

  /* кейсы */
  .bbq-keysy__item { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
  .bbq-keysy__img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
  .bbq-keysy__name { margin: 16px 20px 8px; font-size: 19px; }
  .bbq-keysy__meta { display: flex; gap: 16px; align-items: baseline; margin: 0 20px 16px; }
  .bbq-keysy__price { font-family: var(--bbq-font-head); font-weight: 700; font-size: 20px; color: var(--bbq-ink); }
  .bbq-keysy__term { color: var(--bbq-muted); font-size: 14px; }
  .bbq-keysy__item .bbq-btn { margin: 0 20px 20px; }

  /* эксперт */
  .bbq-expert { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
  .bbq-expert__photo img { width: 100%; border-radius: var(--bbq-radius); object-fit: cover; }
  .bbq-expert__tag { color: var(--bbq-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
  .bbq-expert__name { margin: 6px 0 2px; }
  .bbq-expert__role { color: var(--bbq-ink-soft); margin: 0 0 12px; }
  .bbq-expert__q { color: var(--bbq-ink-soft); margin: 0 0 16px; padding-left: 18px; }
  .bbq-expert__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .bbq-expert__phone { font-family: var(--bbq-font-head); font-weight: 700; color: var(--bbq-ink); }

  /* faq */
  .bbq-faq__inner { max-width: 820px; }
  .bbq-faq__item { background: var(--bbq-surface); border: 1px solid var(--bbq-line); border-radius: var(--bbq-radius-sm); padding: 4px 20px; margin-bottom: 12px; }
  .bbq-faq__item summary { cursor: pointer; font-family: var(--bbq-font-head); font-weight: 600; padding: 14px 0; list-style: none; }
  .bbq-faq__item summary::-webkit-details-marker { display: none; }
  .bbq-faq__item[open] summary { color: var(--bbq-accent); }
  .bbq-faq__a { color: var(--bbq-ink-soft); padding-bottom: 14px; }

  /* cta */
  .bbq-cta { background: var(--bbq-ink); color: #fff; position: relative; overflow: hidden; }
  /* фоновый чертёж (как в макете): реальный hero-blueprint, инвертированный в светлые линии, очень слабый */
  .bbq-cta::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46%;
    background: url(https://barbekyu-iz-kirpicha.ru/wp-content/uploads/2026/06/hero-blueprint.png) center right / contain no-repeat;
    filter: invert(1) brightness(2); opacity: .06; pointer-events: none; }
  .bbq-cta__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 40px; flex-wrap: wrap; }
  .bbq-cta h2 { color: #fff; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .01em; }
  .bbq-cta p { color: #c9d4dd; margin: 0; }
  .bbq-cta__action { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .bbq-cta__note { color: #9fb0bd; font-size: 13px; }

  /* «Смотреть все объекты» под блоком кейсов (главная) */
  .bbq-keysy-all { text-align: center; margin-top: -36px; padding-bottom: var(--bbq-section-y); }

  /* price */
  .bbq-price__table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
  .bbq-price__table td { padding: 14px 16px; border-bottom: 1px solid var(--bbq-line); }
  .bbq-price__val { text-align: right; font-family: var(--bbq-font-head); font-weight: 700; white-space: nowrap; }

  /* text */
  .bbq-text__inner { max-width: 820px; }
  .bbq-text__body { color: var(--bbq-ink-soft); }

  /* pohozhie */
  .bbq-pohozhie__list { display: flex; flex-wrap: wrap; gap: 12px; }
  .bbq-pohozhie__link { background: var(--bbq-surface); border: 1px solid var(--bbq-line); border-radius: 999px; padding: 8px 18px; color: var(--bbq-ink); }
  .bbq-pohozhie__link:hover { border-color: var(--bbq-accent); color: var(--bbq-accent); }

  @media (max-width: 700px) {
    .bbq-expert { grid-template-columns: 1fr; text-align: center; }
    .bbq-expert__photo img { max-width: 220px; margin: 0 auto; }
    .bbq-expert__q { text-align: left; }
  }

  /* ===================== 1-в-1 ГЛАВНАЯ (scoped body.home, чтобы не задеть лендинги/цены) ===================== */

  /* ЦЕНА — один ряд из 8 серых плиток (иконка-сверху, только название), как в макете */
  body.home .bbq-cena .bbq-grid--4 { grid-template-columns: repeat(8, 1fr); gap: 12px; }
  body.home .bbq-cena .bbq-icongrid__item { background: var(--bbq-surface-2); border-color: transparent; border-radius: 14px; padding: 18px 8px; gap: 10px; }
  body.home .bbq-cena .bbq-icongrid__icon { width: 62px; height: 62px; object-fit: contain; }
  body.home .bbq-cena .bbq-icongrid__name { font-size: 12.5px; line-height: 1.25; }
  @media (max-width: 1100px) { body.home .bbq-cena .bbq-grid--4 { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 640px)  { body.home .bbq-cena .bbq-grid--4 { grid-template-columns: repeat(2, 1fr); } }

  /* ПОЧЕМУ — 7 компактных прозрачных колонок (иконка-сверху, имя + мелкий desc) */
  body.home .bbq-why .bbq-grid--3 { grid-template-columns: repeat(7, 1fr); gap: 18px; }
  body.home .bbq-why .bbq-why__item { background: transparent; border: 0; box-shadow: none; padding: 0 6px; text-align: center; }
  body.home .bbq-why .bbq-why__icon { width: 76px; height: 76px; object-fit: contain; margin: 0 auto 12px; display: block; }
  body.home .bbq-why .bbq-why__item h3 { font-size: 15px; margin: 0 0 6px; }
  body.home .bbq-why .bbq-why__item p { font-size: 13px; line-height: 1.4; }
  @media (max-width: 1100px) { body.home .bbq-why .bbq-grid--3 { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 640px)  { body.home .bbq-why .bbq-grid--3 { grid-template-columns: repeat(2, 1fr); } }

  /* ЭКСПЕРТ + (FAQ / Коротко о компании) — 2 колонки рядом (главная + о-компании) */
  @media (min-width: 992px) {
    .bbq-ef { display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px; align-items: start;
      max-width: var(--bbq-container); margin-inline: auto; padding-inline: 20px; padding-block: var(--bbq-section-y); }
    .bbq-ef > section { padding-block: 0; }
    .bbq-ef > section > .bbq-container { max-width: none; padding-inline: 0; width: auto; }
    .bbq-ef .bbq-faq__inner, .bbq-ef .bbq-text__inner { max-width: none; }
  }
}