/* ============================================
   TABLET STYLES — 768px to 1199px
   kapital theme, Drupal 11, КОМПЛЕКС-Н
   ============================================ */

@media (min-width: 768px) and (max-width: 1199px) {

  /* ===== CONTAINER ===== */
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* ===== HEADER ===== */
  .site-header__inner {
    height: 70px;
    padding: 0 30px;
  }
  .site-header__brand .site-logo img {
    height: 36px;
  }
  .site-header__brand .site-name a {
    font-size: 14px;
  }
  .main-menu {
    gap: 0;
  }
  .main-menu__link {
    font-size: 16px;
    padding: 8px 12px;
  }
  .layout-container > main {
    padding-top: 70px;
  }
  .path-frontpage .layout-container > main {
    padding-top: 0;
  }

  /* ===== HERO ===== */
  .hero__inner {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 60px;
  }
  .hero__title {
    font-size: 34px;
    max-width: 480px;
  }
  .hero__subtitle {
    font-size: 16px;
    max-width: 420px;
  }
  .hero__cta {
    height: 64px;
    padding: 0 28px;
    font-size: 24px;
  }

  /* ===== НАШИ ПРЕИМУЩЕСТВА (split) ===== */
  .advantages {
    padding: 50px 0 12px;
  }
  .advantages__inner {
    padding: 0 30px;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 16px;
  }
  .advantages__photo {
    min-height: 280px;
  }
  .advantages__card {
    padding: 32px 24px;
  }
  .advantages__card-title {
    font-size: 26px;
    margin-bottom: 16px;
  }
  .advantages__card-list {
    gap: 10px;
  }
  .advantages__card-list li {
    font-size: 13px;
  }

  /* ===== 5 КАРТОЧЕК ПРЕИМУЩЕСТВ ===== */
  .benefits {
    padding: 40px 0 0;
  }
  .benefits__grid {
    gap: 10px;
  }
  .benefit-card {
    padding: 20px 10px 18px;
    gap: 8px;
    border-radius: 24px;
  }
  .benefit-card__icon {
    width: 60px;
    height: 60px;
  }
  .benefit-card__title {
    font-size: 13px;
  }
  .benefit-card__text {
    font-size: 11px;
    line-height: 1.25;
  }

  /* ===== ОБЩИЙ ЗАГОЛОВОК СЕКЦИЙ ===== */
  .section__title {
    font-size: 32px;
    margin-bottom: 32px;
  }

  /* ===== ФОРМА СВЯЗИ ===== */
  .contact-form-section {
    padding: 50px 0 0;
  }
  .contact-form-section__inner {
    padding: 0 30px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
  }
  .contact-form-section__lead-title {
    font-size: 28px;
  }
  .contact-form-section__lead-text {
    font-size: 15px;
  }
  .contact-form {
    gap: 20px;
  }
  .contact-form__input {
    height: 56px;
    padding: 0 20px;
    font-size: 12px;
  }
  .contact-form__submit {
    height: 56px;
    padding: 0 24px;
    font-size: 15px;
    width: 100%;
    white-space: normal;
  }

  /* ===== БЛОГ ===== */
  .blog-section {
    padding: 50px 0 0;
  }
  .blog-section__inner {
    padding: 0 30px;
  }
  .blog-section .view-content {
    gap: 24px;
  }

  /* ===== ПАРТНЁРЫ ===== */
  .partners {
    padding: 50px 0 12px;
  }
  .partners__inner {
    padding: 0 30px;
  }
  .partners__grid {
    gap: 12px;
  }
  .partner-card {
    height: 130px;
    gap: 8px;
    padding: 12px;
  }
  .partner-card__name {
    font-size: 12px;
  }

  /* ===== ФУТЕР ===== */
  .site-footer__inner {
    padding: 50px 30px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }
  .site-footer__logo img {
    height: 64px;
  }
  .footer-menu {
    gap: 14px;
  }
  .footer-menu a {
    font-size: 16px;
  }
  .site-footer__phone {
    font-size: 20px;
  }
  .site-footer__email {
    font-size: 16px;
    margin-bottom: 4px;
  }
  .site-footer__legal-link {
    font-size: 13px;
  }
  .site-footer__social-link {
    width: 44px;
    height: 44px;
  }
  .site-footer__social-link svg {
    width: 20px;
    height: 20px;
  }

  /* ===== КАТАЛОГ: список категорий (/katalog) ===== */
  .catalog-cats {
    padding: 40px 0 0;
  }
  .catalog-cats__grid {
    gap: 24px;
  }
  /* Figma (tablet): label sits ABOVE the photo, centered, narrower than
     the photo — not overlaid on top of it like on desktop. Markup order
     is already <label> then <photo>, so switching both from absolute to
     normal flow (flex column) reproduces it without touching Twig. */
  .catalog-cat-card {
    aspect-ratio: unset;
    border-radius: 0;
    overflow: visible;
    min-height: 0;
  }
  .catalog-cat-card__link {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .catalog-cat-card__link::before {
    display: none;
  }
  .catalog-cat-card__label {
    position: static;
    align-self: center;
    width: calc(100% - 40px);
    font-size: 13px;
    padding: 8px 14px;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    box-sizing: border-box;
    /* Reserve space for 2 lines of text so a short category name (1 line)
       and a long one (2 lines) end at the same height — otherwise the
       photos in neighbouring columns start at different Y and the row
       looks skewed. */
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .catalog-cat-card__photo {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 645 / 462;
    border-radius: 24px;
    overflow: hidden;
  }

  .catalog-search {
    padding: 40px 0 0;
  }
  /* Figma: compact centered pill (~45% of content width), not full-width */
  .catalog-search__form {
    max-width: 45%;
  }

  /* ===== КАТАЛОГ: список товаров (используется и на /katalog, и на странице категории) ===== */
  .catalog-items {
    padding: 40px 0 22px;
  }
  .catalog-items__grid {
    grid-template-columns: 1fr;
    gap: 120px;
  }
  .catalog-item-card {
    padding: 24px;
  }
  .catalog-item-card__img {
    width: 200px;
    min-height: 220px;
  }
  .catalog-item-card__body {
    padding: 0 24px 24px 32px;
  }
  .catalog-item-card__title {
    font-size: 20px;
  }

  /* ===== ПРОЕКТЫ / ВАКАНСИИ: hero-баннер ===== */
  /* Desktop clamp(500px, 51.5vw, 900px) hits its 500px floor below 971px
     width, making the container disproportionately tall and forcing
     background-size:cover to crop/zoom the photo much more than the
     Figma tablet mockup shows. The 51.5vw ratio itself matches the
     mockup, so drop the floor for the tablet range. */
  .pv-hero {
    height: 51.5vw;
  }
  /* Figma tablet mockup: 24px/900/100% (было 48px как на десктопе). */
  .pv-hero__title {
    font-size: 24px;
    line-height: 1;
  }

  /* Заголовки секций "Этапы работы" (/proekty), "Почему стоит выбрать
     нас" (/vakansii) и "Реализованные проекты..." над списком проектов
     (/proekty) — Figma tablet mockup: 24px/900/100% (было 36px). */
  .work-steps__heading,
  .vac-benefits__heading,
  .projects-listing__heading {
    font-size: 24px;
    line-height: 1;
  }

  /* ===== КАТЕГОРИЯ ТОВАРА: hero-баннер ===== */
  .cat-hero {
    height: 320px;
  }
  /* Figma tablet mockup shows the title as a compact green pill badge over
     the photo (not the big plain white heading used on desktop) — an
     intentional tablet-only deviation, confirmed with the user. */
  .cat-hero__title {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    color: #000;
    background: var(--color-accent, #7BE800);
    padding: 10px 24px;
    border-radius: 30px;
    margin: 0;
  }

  /* ===== ТОВАР: страница детали ===== */
  .catalog-product__layout {
    gap: 30px;
  }
  .catalog-product__title {
    font-size: 28px;
    margin-bottom: 32px;
  }
  .catalog-product__desc-short {
    font-size: 16px;
  }

  /* ===== ПРОЕКТЫ (/proekty): карточка проекта фото+инфо ===== */
  /* Desktop title/city/tag font sizes (40/40/24px) are unchanged at
     tablet widths, causing 4-5 line wraps and very tall cards vs. the
     narrow ~190-280px info column (796fr/525fr split). Figma tablet
     mockup shows a compact single/two-line title, much smaller than
     desktop scale. */
  .project-item__info {
    padding: 24px 20px;
  }
  .project-item__title {
    font-size: 20px;
    margin: 0 0 6px;
  }
  .project-item__city {
    font-size: 15px;
    margin: 0 0 8px;
  }
  .project-item__tags {
    margin: 0 0 8px;
  }
  .project-item__tag {
    font-size: 13px;
  }
  .project-item__area {
    font-size: 13px;
    margin: 8px 0 0;
  }

  /* ===== О КОМПАНИИ (/o-kompanii): "Полный спектр услуг" ===== */
  /* .about-services__grid used plain repeat(4,1fr) — classic CSS Grid
     min-content trap: below ~1024px content width the columns' min-content
     (longest unbreakable word per card) no longer fits the fair 1fr share,
     so columns lock to different widths (195/197/143/177px observed at
     768px) instead of the equal columns seen on desktop (1440) and mobile
     (390, separately overridden). Same fix pattern as .advantages__inner. */
  .about-services__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}