/* Блоки кейсу. Кожен тип — окрема секція.
   Додати новий тип = дописати правило тут і шаблон у CLAUDE.md. Наявні кейси не чіпаються. */

/* Два медіа-блоки поспіль у макеті утворюють один блок з відступом 24 між ними */
.stack > [class*="b-media"] + [class*="b-media"] { margin-top: var(--gutter); }

/* Плейсхолдер медіа, поки не підставлено контент */
.media {
  background: var(--c-placeholder);
  border-radius: var(--radius);
  overflow: hidden;
}
.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- tiles: мозаїка плиток 5 в ряд на всю ширину макета.
   Порожні клітинки лишаються порожніми — позиція плитки задана її номером. --- */
.b-tiles__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gutter);
}

.b-tiles__grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

/* --- intro: назва + підзаголовок зліва, опис справа. Один на кейс, містить h1 --- */
.b-intro__title { grid-column: 3 / span 3; }
.b-intro__body  { grid-column: 7 / span 4; }
.b-intro__sub { margin-top: 12px; color: var(--c-text-muted); }

/* --- media-wide: одне медіа 840 по центру --- */
.b-media-wide > .media { grid-column: 3 / span 8; aspect-ratio: 840 / 472; }

/* --- media-pair: два по 408. На мобільному — стек --- */
.b-media-pair > .media:first-child { grid-column: 3 / span 4; aspect-ratio: 408 / 544; }
.b-media-pair > .media:last-child  { grid-column: 7 / span 4; aspect-ratio: 408 / 544; }

/* --- media-full: від краю до краю --- */
.b-media-full > .media {
  grid-column: 1 / -1;
  /* виходить за поля сторінки, але лишається в межах макета 1512, не на все вікно */
  margin-inline: calc(-1 * var(--margin));
  aspect-ratio: 1512 / 844;
}

/* --- carousel: горизонтальна стрічка, вилазить за поля. На мобільному — сітка плиток --- */
.b-carousel__track {
  grid-column: 3 / span 8;
  aspect-ratio: 840 / 472;
  border-radius: var(--radius);
  background: var(--c-placeholder);

  /* смуга плиток ширша за рамку і обрізається нею — як у макеті */
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.b-carousel__track::-webkit-scrollbar { display: none; }
.b-carousel__track > .media {
  flex: 0 0 192px;
  aspect-ratio: 192 / 256;
  background: var(--c-surface);
}

/* --- statement: великий текст по центру + абзац під ним --- */
.b-statement { text-align: center; }
.b-statement__lead {
  grid-column: 1 / -1;
  max-width: 722px;
  margin-inline: auto;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
}
.b-statement__body {
  grid-column: 1 / -1;
  max-width: 638px;
  margin-inline: auto;
  margin-top: 24px;
  line-height: var(--lh-tight); /* у макеті 120% */
  color: var(--c-text-muted);   /* бодітекст завжди приглушений, як усюди на сайті */
}

/* --- text-block: абзац справа + опціональний підпис зліва --- */
.b-text__label { grid-column: 3 / span 3; }
.b-text__body  { grid-column: 7 / span 4; color: var(--c-text-muted); }

/* --- impact: 4 картки в ряд на всю ширину макета, як у Figma --- */
.b-impact__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

.b-impact__card {
  aspect-ratio: 300 / 400;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* --- credits --- */
.b-credits__label { grid-column: 3 / span 3; }
.b-credits__list  { grid-column: 7 / span 4; }
.b-credits__list li + li { margin-top: 8px; }

/* Заголовки цих блоків стоять на тій самій вісі, що й текст і медіа вище —
   колонка 3, а не від краю полів */
/* Заголовки блоків того ж кегля, що h1 і великі тексти — 36 на десктопі,
   30 на мобільному. Не бодітекст. */
.b-impact > h2,
.b-more > h2 {
  grid-column: 3 / span 8;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
}

/* У макеті від заголовка до вмісту 24 в обох блоках */

/* --- more-projects: 4 прев'ю --- */
.b-more__grid {
  grid-column: 3 / span 8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.b-more__grid .media { aspect-ratio: 192 / 256; }

/* ---------- Мобільні правила ---------- */
@media (max-width: 767px) {
  .b-intro__title,
  .b-intro__body,
  .b-media-wide > .media,
  .b-media-pair > .media:first-child,
  .b-media-pair > .media:last-child,
  .b-text__label,
  .b-text__body,
  .b-credits__label,
  .b-credits__list,
  .b-more__grid { grid-column: 1 / -1; }

  .b-media-pair > .media + .media { margin-top: var(--gutter); }

  /* карусель стає сіткою плиток 2×N */
  .b-carousel__track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    aspect-ratio: auto;
    padding: var(--gutter);
    overflow: visible;
  }
  .b-carousel__track > .media { flex: none; }

  .b-impact__grid { grid-template-columns: 1fr; }
  .b-impact__card { aspect-ratio: auto; }
  .b-impact > h2, .b-more > h2 { grid-column: 1 / -1; }
  .b-more__grid { grid-template-columns: repeat(2, 1fr); }
}