/* Медіакіт — /ua/media-kit/, /en/media-kit/. Кольори й типографіка — з main.css. */

/* Перший екран: текст над горизонтом, як у фінальному заклику */
.mk-hero {
  --hz-w: max(1500px, 277.78vw);
  --visible: 200px;
  position: relative;
  overflow: hidden;
  padding: clamp(150px, 20vh, 210px) 0 calc(var(--visible) + 56px);
  background: var(--surface-ink);
  isolation: isolate;
}
.mk-hero__horizon { top: calc(100% - var(--visible)); width: var(--hz-w); }
.mk-hero__atmosphere { top: calc(100% - var(--visible) - var(--hz-w) * 0.02); width: calc(var(--hz-w) * 1.04); }
.mk-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}
.mk-hero__inner .display-xl { max-width: 960px; text-wrap: balance; }
.mk-hero__inner .lead { max-width: 720px; }
.mk-hero__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); padding-top: var(--space-16); }
.mk-hero__actions .btn__arrow { transform: none; }
.mk-hero__actions .btn:hover .btn__arrow { transform: translateY(2px); }

.mk-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.mk-head .display-l { max-width: 880px; text-wrap: balance; }
.mk-sub { display: flex; flex-direction: column; gap: var(--space-24); }

/* Про компанію: цифри + готові тексти */
.mk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.mk-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-24);
  border-top: 1px solid var(--line);
}
.mk-stat__value {
  font-size: clamp(40px, 3.9vw, 56px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.mk-stat__value small { margin-right: 6px; font-size: 0.4em; letter-spacing: 0; color: var(--fg-2); }

.mk-texts { display: flex; flex-direction: column; gap: var(--space-16); }
.mk-text {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-32);
  padding: var(--space-32);
  border-radius: var(--radius-l);
  background: var(--surface-white);
}
.mk-text .label-text { padding-top: 4px; }
.mk-text .body-l { max-width: 760px; }
.mk-text .btn.is-copied { --btn-bg: var(--fg); --btn-fg: var(--surface-white); }

/* Логотипи */
.mk-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.mk-logo-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-dark-2);
}
.mk-logo-tile__art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 0 14%;
}
.mk-logo-tile__art img { width: 100%; height: auto; }
.mk-logo-tile__art--mark img { width: 22%; }
.mk-bg--ink { background: var(--surface-ink); }
.mk-bg--white { background: var(--surface-white); }
.mk-bg--blue { background: linear-gradient(180deg, var(--band-blue), var(--band-blue-end)); }
.mk-bg--lavender { background: var(--surface-lavender); }
.mk-logo-tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-16) var(--space-16) var(--space-24);
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.mk-logo-tile__meta > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.mk-logo-tile__meta b { font-weight: 500; font-size: 15px; line-height: 22px; }
.mk-logo-tile__meta small { overflow: hidden; font-size: 12px; line-height: 16px; color: var(--fg-3); text-overflow: ellipsis; white-space: nowrap; }
.mk-logo-tile__dl { display: flex; flex: none; gap: var(--space-8); }

.mk-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.mk-rule { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-24); border-top: 1px solid var(--line); }

/* Кольори */
.mk-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
.mk-swatch {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-white);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: copy;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.mk-swatch:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(10, 11, 20, 0.35); }
.mk-swatch:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 3px; }
.mk-swatch__chip { display: block; height: 120px; border-bottom: 1px solid var(--line); }
.mk-swatch__meta { display: flex; flex-direction: column; gap: 2px; padding: var(--space-16) var(--space-16) var(--space-24); }
.mk-swatch__meta b { font-weight: 500; font-size: 16px; line-height: 24px; }
.mk-swatch__hex { font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.mk-swatch__meta small { margin-top: var(--space-8); font-size: 13px; line-height: 18px; color: var(--fg-3); }
.mk-swatch.is-copied .mk-swatch__hex { color: var(--theme-accent); }

.mk-type {
  display: flex;
  align-items: center;
  gap: var(--space-48);
  padding: var(--space-32) var(--space-48);
  border-radius: var(--radius-l);
  background: var(--surface-lavender);
}
.mk-type__aa { flex: none; font-size: clamp(56px, 6vw, 88px); line-height: 1; letter-spacing: -0.04em; font-weight: 500; }
.mk-type > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); max-width: 640px; }
.mk-link { color: var(--theme-accent); font-weight: 500; }
.mk-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Фото й скріншоти */
.mk-gallery,
.mk-screens--desktop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.mk-screens--mobile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.mk-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--surface-dark-2);
  aspect-ratio: 16 / 9;
}
.mk-shot--desktop { aspect-ratio: 16 / 10; border: 1px solid var(--line); }
.mk-shot--mobile { aspect-ratio: 564 / 960; border: 1px solid var(--line); }
.mk-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.8s var(--ease-out); }
.mk-shot:hover img { transform: scale(1.03); }
.mk-shot__dl {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(5, 6, 12, 0.6);
  backdrop-filter: blur(8px);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.mk-shot:hover .mk-shot__dl,
.mk-shot:focus-visible .mk-shot__dl { opacity: 1; transform: none; }
@media (hover: none) { .mk-shot__dl { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .mk-text { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-16) var(--space-24); }
  .mk-text .body-l { grid-column: 1 / -1; grid-row: 2; }
  .mk-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mk-hero { --visible: 140px; }
  .mk-stats, .mk-rules { grid-template-columns: 1fr; gap: var(--space-16); }
  .mk-logos, .mk-gallery, .mk-screens--desktop { grid-template-columns: 1fr; }
  .mk-screens--mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-text { padding: var(--space-24); }
  .mk-text .body-l { font-size: 16px; line-height: 26px; }
  .mk-swatch__chip { height: 88px; }
  .mk-type { flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: var(--space-24); }
}