/*
 * Company announcements sit between the navigation and the brand mark. The
 * card is a frame, not a layout: the announcement fills it edge to edge and the
 * only chrome is a hairline border. Height stays fixed so switching cards cannot
 * shift the sidebar under the pointer.
 *
 * The frame keeps one 5px inset and nothing else. Every inner padding was
 * removed with it, so an image or a text announcement owns the whole panel
 * instead of sitting in a box inside a box.
 */
.fs-company-news {
  position: relative;
  display: grid;
  padding: 5px;
  overflow: hidden;
  touch-action: pan-y;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
  box-shadow: var(--fs-shadow-sm);
}

/*
 * Floated over the announcement so it never takes a row from the content, and
 * pinned to the top: the switcher is reached before the announcement is read,
 * and the bottom of the card stays free for the announcement itself.
 */
.fs-company-news__dots {
  position: absolute;
  z-index: 4;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  background: rgb(255 255 255 / 72%);
  border-radius: var(--fs-radius-pill);
  backdrop-filter: blur(6px);
}

.fs-company-news__dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-color-border);
  cursor: pointer;
  transition: background-color 0.16s ease, width 0.16s ease;
}

.fs-company-news__dot:hover {
  background: var(--fs-color-text-muted);
}

/* Neutral, not accent: a page indicator is not an action. */
.fs-company-news__dot[aria-selected="true"] {
  width: 12px;
  background: var(--fs-color-text-muted);
}

.fs-company-news__dot:focus-visible {
  outline: 0;
  box-shadow: var(--fs-focus-ring);
}

/* Reserved height keeps the sidebar from shifting between cards. */
.fs-company-news__deck {
  display: grid;
  height: 178px;
  overflow: hidden;
  border-radius: calc(var(--fs-radius-md) - 5px);
}

/*
 * A column rather than a grid of content-sized rows: the text costs exactly the
 * rows it needs and the image takes everything left over, so the announcement
 * always reaches the bottom of the deck instead of leaving a dead strip there.
 */
.fs-company-news__card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  grid-area: 1 / 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.fs-company-news__card[hidden] {
  display: none;
}

.fs-company-news__image {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: calc(var(--fs-radius-md) - 5px);
}

/*
 * The switcher floats over the top-right corner. Only the first row has to keep
 * clear of it — over an image it costs nothing, over a headline it would sit on
 * the words.
 */
.fs-company-news:has(.fs-company-news__dots) .fs-company-news__link,
.fs-company-news:has(.fs-company-news__dots) .fs-company-news__title {
  padding-right: 38px;
}

.fs-company-news__link,
.fs-company-news__title {
  color: var(--fs-color-text);
  font-size: var(--fs-text-sm);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.fs-company-news__link:hover {
  color: var(--fs-color-primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fs-company-news__summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Only the sidebar copy needs to outrank the navigation frieze behind it. */
.fs-company-news--sidebar {
  z-index: 1;
  margin: 0 var(--fs-space-2) var(--fs-space-2);
}

/*
 * Стрічка новин на desktop-головній.
 *
 * Одна горизонтальна доріжка рівних рамок. Складів за кількістю публікацій
 * більше немає: головна плюс дрібні прев'ю робили з однієї новини головну, а з
 * решти — позначки, хоча жодна з них не є другорядною. Висота блока тепер не
 * залежить ні від кількості новин, ні від того, яка з них показана.
 *
 * Бічні поля невеликі й існують заради самої доріжки: рамка, обрізана краєм
 * панелі, не каже, що стрічку можна гортати, а рамка, яка визирає з-за поля,
 * каже це без жодного напису.
 */
.fs-company-news-grid {
  display: grid;
  gap: 6px;
  padding: var(--fs-space-3) 0;
}

/*
 * Блок називає себе одним тихим рядком. Без нього смуга фото між обкладинкою
 * компанії та розділами читалася як частина обкладинки, а не як новини.
 */
.fs-company-news-grid__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  padding: 0 var(--fs-space-3);
}

.fs-company-news-grid__label {
  margin: 0;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fs-company-news-grid__dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

/*
 * Доріжка їде трансформацією, а не прокруткою.
 *
 * Прокрутник не вміє стати за останнім елементом, тому крапка «остання новина»
 * у ньому світилася б, а стрічка стояла б на передостанній позиції. Зсув такої
 * межі не має: будь-яка рамка стає ліворуч, і крапок стільки, скільки
 * публікацій. Він же дає плавність без другого скрипта — анімує сам браузер по
 * композитному шару.
 *
 * `pan-y` лишає сторінці вертикальний жест: стрічку тягнуть убік, а сторінку —
 * вгору й вниз, і одне не має відбирати інше.
 */
.fs-company-news-grid__viewport {
  padding: 0 var(--fs-space-3);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.fs-company-news-grid__viewport:active {
  cursor: grabbing;
}

.fs-company-news-grid__track {
  display: flex;
  gap: var(--fs-space-2);
  will-change: transform;
  transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
  user-select: none;
}

/* Читач, який попросив спокою, отримує ту саму стрічку без руху. */
@media (prefers-reduced-motion: reduce) {
  .fs-company-news-grid__track {
    transition: none;
  }
}

/*
 * Рамка новини.
 *
 * Висота рамки стала і не залежить ні від кількості публікацій, ні від того,
 * яка з них перед очима. Кадр у ній вписується цілком: клієнт публікує готову
 * графіку будь-
 * якої пропорції, і `cover` зрізав з неї те, заради чого її й зробили. Поле
 * навколо заповнює його ж розмите продовження — суцільна плашка читалася б як
 * дефект кадру, а не як його тло.
 *
 * Порядок шарів: розмите поле, кадр, затемнення, підпис.
 */
.fs-company-news-grid__card {
  position: relative;
  display: flex;
  flex: 0 0 min(400px, 78%);
  flex-direction: column;
  justify-content: flex-end;
  height: 300px;
  overflow: hidden;
  background: var(--fs-color-surface-subtle);
  border-radius: var(--fs-radius-md);
}

/*
 * Одна або дві публікації доріжки не роблять: вони ділять ширину смуги, а не
 * лишають поруч із собою порожнє поле завширшки з саму рамку. Ширина тут
 * змінна, а висота — ні: пропорція рамки зробила б висоту блока похідною від
 * кількості новин, і одна публікація на всю ширину панелі стала б рамкою на
 * вісімсот пікселів заввишки.
 */
.fs-company-news-grid__track:not(:has(:nth-child(3))) .fs-company-news-grid__card {
  flex: 1 1 0;
}

.fs-company-news-grid__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.fs-company-news-grid__backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(112%) brightness(0.92);
  transform: scale(1.18);
}

.fs-company-news-grid__image {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
 * Затемнення існує заради підпису, тому воно існує лише разом із ним. Кадр без
 * підпису отримував градієнт ні для чого: у новині, яка вся є готовою
 * графікою, він гасив її власний низ. Блок копії рендериться лише за наявності
 * заголовка чи опису, тож умова читається прямо з розмітки.
 *
 * `:not([hidden])` — заради прев'ю в адмініструванні: воно навмисно бере ці ж
 * production-класи, але ховає копію атрибутом замість того, щоб її не малювати.
 */
.fs-company-news-grid__card:has(.fs-company-news-grid__image):has(.fs-company-news-grid__copy:not([hidden]))::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(20 17 13 / 0%) 38%,
    rgb(20 17 13 / 58%) 74%,
    rgb(20 17 13 / 90%) 100%
  );
  content: "";
}

.fs-company-news-grid__copy {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 5px;
  padding: var(--fs-space-3) var(--fs-space-4);
}

/* A text-only announcement stays a panel in page colours: white on white is what a blanket
   cover treatment would produce. */
.fs-company-news-grid__card:not(:has(.fs-company-news-grid__image)) {
  justify-content: flex-start;
}

.fs-company-news-grid__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--fs-color-text);
  font-size: var(--fs-text-md);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.fs-company-news-grid__copy p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.fs-company-news-grid__card:has(.fs-company-news-grid__image) .fs-company-news-grid__title,
.fs-company-news-grid__card:has(.fs-company-news-grid__image) .fs-company-news-grid__copy p {
  color: #fff;
  text-shadow: 0 1px 3px rgb(20 17 13 / 45%);
}

.fs-company-news-grid__card:has(.fs-company-news-grid__image) .fs-company-news-grid__copy p {
  -webkit-line-clamp: 2;
}

a.fs-company-news-grid__title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Only over a page-coloured panel does the link tint read as a link; over the photo the
   underline is the whole affordance. */
.fs-company-news-grid__card:not(:has(.fs-company-news-grid__image)) a.fs-company-news-grid__title:hover {
  color: var(--fs-color-primary-text);
}

/*
 * Hero: the announcement opens the mobile home as a cover rather than a framed
 * card. The photo becomes the surface, the headline sits on it, and the frame
 * inset and hairline go away — a border around a full-bleed image only reads as
 * a second edge inside the screen edge.
 */
.fs-company-news--hero {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fs-company-news--hero .fs-company-news__deck {
  height: 300px;
  border-radius: 0;
}

/* The sheet below laps 16px over the foot of the photo — the copy clears it. */
.fs-company-news--hero .fs-company-news__card {
  position: relative;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 18px 34px;
  border-radius: 0;
}

/*
 * Bottom right, not top right: the top of the cover belongs to the mark and the
 * assistant, and the headline owns the bottom left.
 */
.fs-company-news--hero .fs-company-news__dots {
  top: auto;
  right: 14px;
  bottom: 36px;
}

/*
 * Only a card that actually carries a photo becomes a cover. A text-only
 * announcement keeps the page text colours on a panel of its own — white copy
 * over a white panel is what a blanket cover treatment would produce.
 */
.fs-company-news--hero .fs-company-news__card:not(:has(.fs-company-news__image)) {
  background: var(--fs-color-surface);
}

/*
 * Слайд новини вписується цілком, а не заповнює екран. Клієнт публікує готову
 * графіку будь-якої пропорції, і заповнення зрізало з неї те, заради чого її й
 * зробили. Поле навколо заповнює її ж розмите продовження: суцільна плашка
 * читалася б як дефект кадру, а не як його тло.
 *
 * Постійної обкладинки це не стосується — див. `--cover` нижче.
 */
.fs-company-news--hero .fs-company-news__card:has(.fs-company-news__image) .fs-company-news__image {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.fs-company-news--hero .fs-company-news__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/*
 * Постійна обкладинка заповнює екран: її кадр вибирають саме під цей екран, тому
 * розмите поле навколо нього означало б, що редактор пообіцяв не те, що показує.
 */
.fs-company-news--hero .fs-company-news__card--cover:has(.fs-company-news__image) .fs-company-news__image {
  object-fit: cover;
}

.fs-company-news--hero .fs-company-news__backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px) saturate(112%) brightness(0.9);
  transform: scale(1.18);
}

/*
 * Верхня частина миття лишається завжди: на ній стоять бейдж і марка. Нижня —
 * лише під підпис, як і в сітці. Без цього обкладинка без заголовка темніла
 * знизу під текст, якого там немає.
 */
.fs-company-news--hero .fs-company-news__card:has(.fs-company-news__image)::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(20 17 13 / 34%) 0%,
    rgb(20 17 13 / 0%) 34%
  );
  border-radius: inherit;
  content: "";
}

.fs-company-news--hero .fs-company-news__card:has(.fs-company-news__image):has(
  .fs-company-news__title, .fs-company-news__link, .fs-company-news__summary
)::after {
  background: linear-gradient(
    180deg,
    rgb(20 17 13 / 34%) 0%,
    rgb(20 17 13 / 0%) 34%,
    rgb(20 17 13 / 62%) 68%,
    rgb(20 17 13 / 92%) 100%
  );
}

/* Порядок шарів обкладинки: розмите поле, вписаний кадр, затемнення, копія. */
.fs-company-news--hero .fs-company-news__badge,
.fs-company-news--hero .fs-company-news__link,
.fs-company-news--hero .fs-company-news__title,
.fs-company-news--hero .fs-company-news__summary {
  position: relative;
  z-index: 3;
}

.fs-company-news--hero .fs-company-news__card:has(.fs-company-news__image) .fs-company-news__link,
.fs-company-news--hero .fs-company-news__card:has(.fs-company-news__image) .fs-company-news__title,
.fs-company-news--hero .fs-company-news__card:has(.fs-company-news__image) .fs-company-news__summary {
  color: #fff;
  text-shadow: 0 1px 3px rgb(20 17 13 / 45%);
}

/*
 * News slides carry their own quiet label because the mobile hero has no block
 * heading. The permanent cover needs no label: its image and company identity
 * already explain its role.
 */
.fs-company-news__badge {
  display: none;
}

.fs-company-news--hero .fs-company-news__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 8px;
  color: var(--fs-color-text);
  background: var(--fs-color-news-accent);
  border-radius: var(--fs-radius-sm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fs-company-news--hero .fs-company-news__link,
.fs-company-news--hero .fs-company-news__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.fs-company-news--hero .fs-company-news__summary {
  font-size: var(--fs-text-sm);
  -webkit-line-clamp: 2;
}