/*
 * Контент головної.
 *
 * Сторінка показує стан, а не редагує його: обкладинка — картка того, що зараз стоїть на головній,
 * новини — звичайний `fs-datalist`. Обидві панелі беруть спільну білу поверхню, як вимагає brand
 * book; розрізняє їх не колір, а анатомія — картка з превʼю проти таблиці рядків, і глиф у
 * structural label.
 *
 * Редагування відкривається діалогом, тому власних форм тут немає: поля, кадрування і превʼю
 * належать спільному `image-frame`.
 */

.company-content__block {
  display: grid;
  align-content: start;
  gap: var(--fs-space-4);
}

/*
 * Глиф structural label. Файл іконки задає лише маску: колір рядка лишається один, тому іконка
 * не може принести власний штрих.
 */
.company-content__icon--cover {
  --fs-section-icon: url("/stoneware/icons/smartphone.svg");
}

.company-content__icon--news {
  --fs-section-icon: url("/stoneware/icons/navigation/news.svg");
}

/*
 * Обкладинка стоїть поруч зі своїм поясненням, а не над ним: обидва читають в один погляд.
 * Колонка телефона має сталу ширину — саме вона є змістом превʼю, тому пояснення не має права
 * її звужувати.
 */
.company-content__cover {
  display: grid;
  grid-template-columns: 340px minmax(240px, 1fr);
  align-items: start;
  gap: var(--fs-space-5);
}

.company-content__facts {
  display: grid;
  align-content: start;
  gap: var(--fs-space-3);
  margin: 0;
  flex: 1 1 260px;
  min-width: 0;
}

.company-content__facts dt {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.company-content__facts dd {
  margin: 0;
  color: var(--fs-color-text);
  font-size: var(--fs-text-sm);
  line-height: 1.45;
}

.company-content__facts code,
.company-content__hint code {
  color: var(--fs-color-primary-text);
  font-weight: 600;
}

.company-content__hint {
  margin: 0;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  line-height: 1.45;
}

/* Поля запису в діалозі: одна колонка, бо праворуч від них стоїть превʼю. */
.company-content__fields {
  display: grid;
  align-content: start;
  gap: var(--fs-space-3);
  min-width: 0;
}

.company-content__grid {
  column-gap: var(--fs-space-3);
  grid-template-columns: minmax(0, 1fr) 150px 132px;
}

/* Перемикач стану — форма з однією кнопкою, тому вона не додає власного боксу в рядок дій. */
.company-content__toggle {
  display: contents;
}

.company-content__entry {
  display: flex;
  align-items: center;
  gap: var(--fs-space-3);
  min-width: 0;
}

.company-content__entry img,
.company-content__entry-blank {
  flex: 0 0 auto;
  width: 96px;
  height: 72px;
  border-radius: var(--fs-radius-sm);
  object-fit: cover;
}

/*
 * Новина без зображення тримає те саме місце: інакше рядки з фото і без нього починали б текст у
 * різних колонках, і список читався б як два різні списки.
 */
.company-content__entry-blank {
  display: block;
  background: var(--fs-color-surface-subtle);
  border: 1px dashed var(--fs-color-border);
}

.company-content__entry-text {
  display: grid;
  gap: var(--fs-space-1);
  min-width: 0;
}

.company-content__entry-text strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-content__entry-untitled {
  color: var(--fs-color-text-muted);
  font-style: italic;
}

/* Текст новини є попереднім переглядом рядка, а не самою новиною: два рядки, далі — обрив. */
.company-content__entry-text p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 760px) {
  /*
   * Телефон на mobile не тулиться поруч із поясненням: він стає першим блоком картки на всю
   * ширину, а факти йдуть під ним.
   */
  .company-content__cover {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fs-space-4);
  }

  .company-content__list .fs-datalist__head {
    display: none;
  }

  .company-content__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fs-space-2);
    min-height: 0;
    padding: var(--fs-space-3);
  }

  .company-content__entry {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-content__entry img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 220px;
  }

  /*
   * У стовпчик картки заглушка не потрібна: вирівнювати нема з чим, а порожній прямокутник на
   * пів екрана коштує більше, ніж пояснює.
   */
  .company-content__entry-blank {
    display: none;
  }

  .company-content__state {
    justify-self: start;
  }

  /* Дії рядка стають окремим рядком картки — місця вистачає на підписані кнопки. */
  .company-content__toggle {
    display: contents;
  }
}