/* =============================================
       CONSTRUCTION SITE — page-specific styles
       (hero + composition reuse patterns from
        business-areas & service-detailed-fence;
        stages/facts/cases/cta come from styles.css)
       ============================================= */

    /* match about.html: reduce global .blocks top gap for this page */

    /* ---- hero ---- */
    .ba-hero {
      padding: 0 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .ba-back__link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 8px 12px 8px 6px;
      background: var(--color-white-second);
      border-radius: 50px;
      font-family: 'Onest', sans-serif;
      font-size: 16px;
      font-weight: 500;
      color: var(--color-text-grey);
      text-decoration: none;
      transition: color 0.2s;
      align-self: flex-start;
    }
    .ba-back__link:hover { background: var(--color-white-second); color: var(--color-grey); }

    .ba-hero__inner {
      display: flex;
      flex-direction: row;
      gap: 20px;
      align-items: center;
    }

    .ba-hero__content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .ba-hero__title {
      font-size: 48px;
      line-height: 52px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      margin: 0;
    }
    .ba-hero__title-main { color: var(--color-black); }
    .ba-hero__title-grey  { color: var(--color-text-grey); }

    .ba-hero__desc {
      font-size: 20px;
      line-height: 24px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--color-black);
      margin: 0;
    }

    .ba-hero__buttons {
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: center;
    }

    .ba-hero__image {
      flex: 1;
      height: 520px;
      border-radius: 40px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .ba-hero__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ---- composition block ("Что входит в строительство") ---- */
    .sd-comp {
      padding: 0 32px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .sd-comp__title {
      font-size: 48px;
      line-height: 52px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--color-black);
      margin: 0;
    }

    .sd-comp__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }

    .sd-comp__card {
      background: var(--color-white-second);
      border-radius: 20px;
      border: 0.3px solid var(--color-secondary-grey);
      padding: 32px 20px;
      display: flex;
      flex-direction: column;
      gap: 32px;
      cursor: pointer;
      transition: background 0.22s ease, border-color 0.22s ease;
    }

    .sd-comp__card:hover {
      background: var(--color-black);
      border-color: transparent;
    }

    .sd-comp__card-title {
      font-size: 32px;
      line-height: 36px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--color-black);
      margin: 0;
      word-break: break-word;
      overflow-wrap: break-word;
      transition: color 0.22s ease;
    }

    .sd-comp__card:hover .sd-comp__card-title {
      color: var(--color-bg);
    }

    .sd-comp__card-desc {
      font-size: 16px;
      line-height: 20px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--color-text-grey);
      margin: 0;
      transition: color 0.22s ease;
    }

    .sd-comp__card:hover .sd-comp__card-desc {
      color: rgba(250, 250, 251, 0.6);
    }

    /* ---- comparison block ("Чем строительство объекта отличается…") ---- */
    .ba-diff {
      padding: 0 32px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: nowrap;
    }

    .ba-diff__title {
      font-size: 48px;
      line-height: 52px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-black);
      margin: 0;
      flex: 1;
    }
    .ba-diff__title-grey { color: var(--color-text-grey); }

    .ba-diff__cards {
      display: flex;
      flex-direction: row;
      gap: 20px;
      align-items: flex-start;
      flex: 1 1 auto;
      min-width: 0;
      max-width: 100%;
      flex-wrap: nowrap;
    }

    .ba-diff__card {
      border-radius: 32px;
      padding: 28px 32px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: auto;
      flex: 1 1 420px;
      max-width: calc(50% - 10px);
      min-width: 0;
      align-self: flex-start;
    }

    .ba-diff__card--light {
      background: var(--color-white-second);
      border: 0.4px solid rgba(43, 42, 50, 0.12);
    }

    .ba-diff__card--dark { background: var(--color-black); }

    .ba-diff__card-title {
      font-size: 32px;
      line-height: 36px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin: 0;
    }
    .ba-diff__card--light .ba-diff__card-title { color: var(--color-black); }
    .ba-diff__card--dark  .ba-diff__card-title { color: var(--color-bg); }

    .ba-diff__card-items {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .ba-diff__card-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
    }
    .ba-diff__card-item svg { flex-shrink: 0; }

    .ba-diff__card-text {
      font-size: 16px;
      line-height: 20px;
      font-weight: 500;
      letter-spacing: 0.04em;
      margin: 0;
    }
    .ba-diff__card--light .ba-diff__card-text { color: #000; }
    .ba-diff__card--dark  .ba-diff__card-text { color: var(--color-bg); }

    /* =============================================
       WIDE INTERMEDIATE 901–1280px: 2-col grid + stack diff
       ============================================= */
    @media (max-width: 1500px) and (min-width: 901px) {
      .sd-comp__grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .sd-comp__card-title { font-size: 24px; line-height: 28px; }

      /* diff: stack vertically */
      .ba-diff {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
      }
      .ba-diff__cards {
        flex-direction: column;
        width: 100%;
      }
      .ba-diff__card {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
        border-radius: 24px;
      }
    }

    /* =============================================
       TABLET/INTERMEDIATE 481–900px
       ============================================= */
    @media (max-width: 900px) and (min-width: 481px) {

      /* hero: stack content + image */
      .ba-hero { padding: 0 24px; }
      .ba-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
      }
      .ba-hero__image {
        width: 100%;
        height: 300px;
        border-radius: 24px;
      }

      /* composition: 1 column */
      .sd-comp { padding: 0 24px; }
      .sd-comp__grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .sd-comp__card {
        padding: 20px;
        gap: 16px;
        border-radius: 16px;
      }
      .sd-comp__card-title {
        font-size: 22px;
        line-height: 26px;
      }

      /* diff: stack vertically */
      .ba-diff {
        padding: 0 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
      }
      .ba-diff__cards {
        flex-direction: column;
        width: 100%;
      }
      .ba-diff__card {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
        padding: 24px 20px;
        border-radius: 24px;
      }
    }

    /* =============================================
       MOBILE (max 480px)
       ============================================= */
    @media (max-width: 480px) {

      /* reset desktop gap — mobile uses styles.css value */
      main.blocks { padding-top: 8px; }

      /* hero */
      .ba-hero {
        padding: 12px 20px 0;
        gap: 16px;
      }
      .ba-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
      }
      .ba-hero__title {
        font-size: 28px;
        line-height: 32px;
      }
      .ba-hero__desc {
        font-size: 15px;
        line-height: 20px;
      }
      .ba-hero__image {
        width: 100%;
        height: 260px;
        border-radius: 24px;
      }

      /* composition */
      .sd-comp {
        padding: 0 20px;
        gap: 24px;
        margin-top: 80px;
      }
      .sd-comp__title {
        font-size: 26px;
        line-height: 30px;
      }
      .sd-comp__grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .sd-comp__card {
        padding: 12px 16px;
        gap: 12px;
        border-radius: 16px;
      }
      .sd-comp__card-title {
        font-size: 20px;
        line-height: 24px;
      }
      .sd-comp__card-desc {
        color: var(--color-text-grey);
        font-size: 15px;
      }

      .ba-hero__buttons {
        flex-direction: row;
        gap: 8px;
      }
      .ba-hero__buttons .btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
        height: 48px;
        padding: 0 12px;
        font-size: 14px;
      }

      /* comparison */
      .ba-diff {
        padding: 0 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-top: 80px;
      }
      .ba-diff__title {
        font-size: 26px;
        line-height: 32px;
      }
      .ba-diff__cards {
        flex-direction: column;
        width: 100%;
      }
      .ba-diff__card {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
        padding: 24px 20px;
        border-radius: 24px;
      }
      .ba-diff__card-title {
        font-size: 22px;
        line-height: 28px;
      }
    }