/* Figma 1440: блок 1368×220 */
.community-intro {
  background-color: var(--color-bg-page);
  padding: 120px var(--container-padding) 0;
  overflow-x: clip;
}

.community-intro__row {
  width: 100%;
  max-width: min(1368px, calc(100vw - var(--container-padding) * 2));
  margin-inline: auto;
}

.community-intro .microheading {
  flex: none;
  width: auto;
  max-width: 100%;
  padding: 0;
}

.community-intro__text {
  display: none;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.community-intro__line {
  display: block;
}

@media (min-width: 1129px) {
  .community-intro__text--wide {
    display: block;
  }
}

/* 1129–1439 — плавный fluid 1200↔1440 */
@media (min-width: 1129px) and (max-width: 1439px) {
  .community-intro {
    padding-top: 120px;
  }

  .community-intro__row {
    max-width: clamp(1128px, calc(1128px + (1368 - 1128) * (100vw - 1200px) / 240), 1368px);
  }

  .community-intro__text--wide {
    font-size: clamp(40px, calc(40px + 10 * (100vw - 1200px) / 240), 50px);
  }
}

/* 1025–1200 — плавный padding без скачка с 1024 */
@media (min-width: 1025px) and (max-width: 1200px) {
  :root {
    --container-padding: clamp(32px, calc(32px + 8 * (1200px - 100vw) / 175), 40px);
  }
}

/* 944–1128 — колонка, microheading + текст 1024 */
@media (min-width: 944px) and (max-width: 1128px) {
  .community-intro {
    padding-top: 120px;
  }

  .community-intro__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(32px, calc(32px + 8 * (100vw - 944px) / 184), 40px);
    max-width: min(
      calc(944px + (1128 - 944) * (100vw - 944px) / 184),
      calc(100vw - var(--container-padding) * 2)
    );
  }

  .community-intro .microheading {
    display: flex;
    width: auto;
    height: auto;
    padding: 0;
  }

  .community-intro__text--wide,
  .community-intro__text--768,
  .community-intro__text--375 {
    display: none;
  }

  .community-intro__text--1024 {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    font-size: 40px;
    line-height: 1.1;
  }
}

/* 500–767 */
@media (min-width: 500px) and (max-width: 767px) {
  :root {
    --container-padding: clamp(20px, calc(20px + 4 * (100vw - 500px) / 267), 24px);
  }

  .community-intro {
    padding: clamp(56px, calc(56px + 8 * (100vw - 500px) / 267), 64px) var(--container-padding)
      clamp(40px, calc(40px + 8 * (100vw - 500px) / 267), 48px);
  }

  .community-intro__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, calc(20px + 4 * (100vw - 500px) / 267), 24px);
    max-width: min(462px, calc(100vw - var(--container-padding) * 2));
  }

  .community-intro .microheading {
    display: flex;
    width: auto;
    height: auto;
    padding: 0;
  }

  .community-intro__text--wide,
  .community-intro__text--1024,
  .community-intro__text--375 {
    display: none;
  }

  .community-intro__text--768 {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: clamp(32px, calc(32px + 8 * (100vw - 500px) / 267), 40px);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}

/* 400–499 */
@media (min-width: 400px) and (max-width: 499px) {
  .community-intro {
    padding: 64px var(--container-padding) 48px;
  }

  .community-intro__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: min(688px, calc(100vw - var(--container-padding) * 2));
  }

  .community-intro .microheading {
    display: flex;
    width: auto;
    height: auto;
    padding: 0;
  }

  .community-intro__text--wide,
  .community-intro__text--1024,
  .community-intro__text--375 {
    display: none;
  }

  .community-intro__text--768 {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: clamp(28px, calc(28px + 4 * (100vw - 400px) / 99), 32px);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}

/* 768–943 */
@media (min-width: 768px) and (max-width: 943px) {
  .community-intro {
    padding: 64px var(--container-padding) 48px;
  }

  .community-intro__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: min(688px, calc(100vw - var(--container-padding) * 2));
  }

  .community-intro .microheading {
    display: flex;
    width: auto;
    height: auto;
    padding: 0;
  }

  .community-intro__text--wide,
  .community-intro__text--1024,
  .community-intro__text--375 {
    display: none;
  }

  .community-intro__text--768 {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}

/* ≤399 */
@media (max-width: 399px) {
  .community-intro {
    padding: 48px var(--container-padding) 20px;
  }

  .community-intro__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: min(345px, calc(100vw - var(--container-padding) * 2));
  }

  .community-intro .microheading {
    display: none;
  }

  .community-intro__text--wide,
  .community-intro__text--1024,
  .community-intro__text--768 {
    display: none;
  }

  .community-intro__text--375 {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 24px;
    line-height: 1.1;
  }
}

/* Desktop hub: intro + cards в одной сетке */
.community-hub {
  background-color: var(--color-bg-page);
  overflow-x: clip;
}

@media (min-width: 1129px) {
  .community-hub {
    padding: 120px var(--container-padding) 120px;
  }

  .community-hub__inner {
    --community-hub-gap: clamp(21px, calc(21px + 3 * (100vw - 1200px) / 240), 24px);
    --community-intro-size: clamp(40px, calc(40px + 10 * (100vw - 1200px) / 240), 50px);
    --community-hub-width: clamp(1128px, calc(1128px + (1368 - 1128) * (100vw - 1200px) / 240), 1368px);

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--community-hub-gap);
    row-gap: 40px;
    align-items: start;
    width: 100%;
    max-width: min(var(--community-hub-width), calc(100vw - var(--container-padding) * 2));
    margin-inline: auto;
  }

  .community-hub .community-intro,
  .community-hub .community-cards {
    display: contents;
  }

  .community-hub .community-intro,
  .community-hub .community-cards {
    padding: 0;
  }

  .community-hub .community-intro__row {
    display: contents;
  }

  .community-hub .community-intro .microheading {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: auto;
    height: auto;
    padding: 0 0 0 clamp(20px, calc(20px + 10 * (100vw - 1200px) / 240), 30px);
    margin: 0;
  }

  .community-hub .community-intro__text--wide {
    grid-column: 2 / -1;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    margin: 0;
    font-size: var(--community-intro-size);
    line-height: 1.1;
  }

  .community-hub .community-cards__grid {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--community-hub-gap);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .community-hub .community-card {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: clamp(300px, calc(300px + 20 * (100vw - 1200px) / 240), 320px);
    padding: clamp(20px, calc(20px + 10 * (100vw - 1200px) / 240), 30px);
  }

  .community-hub .community-card__title,
  .community-hub .community-card__desc {
    max-width: 100%;
  }
}