/* ==========================================================================
   smi.css — страница «Аккредитация СМИ» (раздел «Медиа»).
   Макет: Figma 2472:63333 (файл czVrMu5TZMTjWkq0ZBhTe9, «ФОК 30.07.26 Copy»).
   Каркас переиспользуется:
     • крошки / геометрия геро — arrival.css;
     • светлый геро (тёмный заголовок, без шторки) — visa.css (.arr-hero--light);
     • светлая карточка с тёмной шапкой — visa.css (.visa-block / __head / __body /
       .visa-group / .visa-label / .visa-text / .visa-bullets / .visa-list);
     • предупреждение — visa.css (.visa-callout);
     • таб-меню раздела — page-tabs.css (.ptabs--flow), как на «Политике упоминаний».
   Новое здесь: скоуп .smi на <main> — плашки даты и названия форума в геро,
   ромб-список порядка выдачи бейджей, блок контактов с двумя тёмными карточками.
   Макет свёрстан на 1920; значения в @1919 не занижаем — плавно уменьшаем
   к 1440 через clamp(). Лесенка брейкпоинтов проекта: 1920 / 1440 / 768 / 360.
   ========================================================================== */

.smi {
  /* Боди макета — 18/1.6 на 1920, к 1440 сходится к канонным 16 (UI-кит). */
  --smi-txt: clamp(16px, calc(0.4167vw + 10px), 18px);
  /* Cochin-подзаголовки макета — 32 на 1920, 28 на 1440. */
  --smi-h3: clamp(28px, calc(0.833vw + 16px), 32px);
}

/* ---------- Full-bleed: гасим гаттер контейнера у табов и баннера ---------- */
/* В макете полоса --flow (article) и hero идут x=0 w=1920, секции ниже — x=40. */
.smi .ptabs--flow,
.smi .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ==========================================================================
   Геро (Figma 2472:63347): коллаж запечён, заголовок 64/72, под ним — две
   плашки: даты регистрации и название форума.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Figma Frame 76 + Frame 62 — колонка с gap 30 (метка→заголовок), плашки
     ниже на 40 (лишние 10 добираем margin-ом). Инна: x=88, низ 60. */
  .smi .arr-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    left: 88px;
    bottom: 60px;
    max-width: min(920px, calc(100% - 176px));
  }
  .smi .arr-hero__title {
    margin-top: 0;
    font-size: clamp(40px, 3.333vw, 64px);
    line-height: 1.125;
  }
  .smi-hero__meta { margin-top: 10px; }
}

/* Ниже 1486 высота геро упирается в пол 480 (arrival.css) — коллаж кропается
   по бокам. Держим окно кропа у левого края: плотная живопись начинается с
   ~45% ширины картинки и уезжает правее заголовка и плашек. */
@media (max-width: 1486px) {
  .smi .arr-hero__img { object-position: left center; }
}

.smi-hero__meta {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* Плашка дат: 03 —◆— 24 / августа 2026 г */
.smi-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 162px;
  padding: 13px 17px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(1, 31, 39, .2);
  border-radius: 8px;
}
.smi-date__days {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.smi-date__d {
  width: 32px;
  font: 400 clamp(20px, 1.458vw, 28px) / 40px var(--font-display);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-text);
}
.smi-date__dash {
  width: 67px;
  height: 12px;
  color: var(--c-accent);
  fill: currentColor;
  opacity: .2;
}
.smi-date__when {
  width: 67px;
  font: 400 12px/20px var(--font-text);
  text-align: center;
  color: var(--c-text);
}

/* Плашка названия форума */
.smi-hero__about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 15px 17px 13px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(1, 31, 39, .2);
  border-radius: 8px;
}
/* Ширина плашки = ширине текста (608 на 1920). Ниже 1920 сужаем вместе с
   кеглем — иначе плашка не сжимается и наезжает на живопись коллажа. */
.smi-hero__about-title {
  max-width: min(608px, 31.67vw);
  font: 400 clamp(18px, 1.458vw, 28px) / 1.4286 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
  text-wrap: balance;
}
.smi-hero__about-sub {
  font: 400 clamp(13px, 0.833vw, 16px) / 1.6 var(--font-text);
  color: var(--c-text);
}

/* ==========================================================================
   Карточки «Для аккредитации…» и «Порядок выдачи…» (Figma 2472:63385 / 63422).
   Размеры макета: шапка/тело padding 56, тело gap 32, заголовок 40/48.
   ========================================================================== */
.smi .visa-block { margin-top: 28px; }
/* Геро → первая карточка: 80 (Figma: hero низ 898, карточка 978).
   :first-of-type здесь не годится — первая <section> на странице это геро. */
.smi .arr-hero + .visa-block { margin-top: clamp(64px, 4.167vw, 80px); }

.smi .visa-block__head {
  gap: 48px;
  padding: clamp(44px, calc(2.5vw + 8px), 56px);
}
.smi .visa-block__title {
  max-width: 1120px;
  font-size: clamp(32px, calc(1.667vw + 8px), 40px);
  line-height: 1.2;
}
.smi .visa-block__body {
  gap: clamp(28px, calc(0.833vw + 16px), 32px);
  padding: clamp(44px, calc(2.5vw + 8px), 56px);
}

/* Тело: типографика макета (18/1.6, лейбл 14 regular) */
.smi .visa-text,
.smi .visa-bullets li,
.smi .visa-list li {
  font-size: var(--smi-txt);
  line-height: 1.6;
}
.smi .visa-bullets li { padding-left: 26px; }
.smi .visa-list li { padding-left: 34px; }
/* Ширина колонки текста — по макету (Figma: текст 1130 в теле 1726) */
.smi .visa-text { max-width: 1130px; }
.smi .visa-label {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1.2px;
}

/* Ключевая строка блока (Cochin 24/32 с ссылкой-акцентом) */
.smi-key {
  font: 400 clamp(20px, calc(0.833vw + 8px), 24px) / 1.333 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.smi-key a { color: var(--c-accent); text-decoration: underline; }
.smi-key a:hover { text-decoration: none; }

/* Хвост первого блока: два абзаца через 6 */
.smi-outro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 1130px;
}
.smi-outro p {
  font-size: var(--smi-txt);
  line-height: 1.6;
  color: var(--c-text);
  text-wrap: pretty;
}

/* Приглушённая вставка (серый #8c8c8c) — внутри абзаца и отдельной строкой */
.smi-muted { color: var(--color-grey, #8c8c8c); }
.smi-note {
  display: block;
  margin-top: 2px;
  font-size: clamp(14px, calc(0.4167vw + 8px), 16px);
  line-height: 1.6;
  color: #8c8c8c;
}

/* ---------- Порядок выдачи: ромб-список с вложенными пунктами ---------- */
.smi-rules { gap: clamp(28px, calc(0.833vw + 16px), 32px); }
.smi-rules > li > p + p { margin-top: 2px; }
.smi-rules .visa-bullets { margin-top: 16px; }
.smi-sublabel {
  display: block;
  font: 400 14px/20px var(--font-text);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-secondary);
}

/* ==========================================================================
   Примечания оргкомитета и предупреждение (Figma 2472:63467 / 63470).
   ========================================================================== */
.smi-notes {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 28px;
  max-width: 1383px;
}
.smi-notes p {
  font-size: var(--smi-txt);
  line-height: 1.6;
  color: var(--c-text);
  text-wrap: pretty;
}

.smi-callout {
  margin-top: 28px;
  max-width: 1726px;
  padding: 24px 37px;
  font-size: clamp(14px, calc(0.4167vw + 8px), 16px);
  line-height: 1.6;
}
.smi-callout a { color: var(--c-accent); text-decoration: underline; }
.smi-callout a:hover { text-decoration: none; }

/* ==========================================================================
   Контакты (Figma 2472:63472): лейбл + H2, ниже две тёмные карточки.
   ========================================================================== */
.smi-contacts {
  margin-top: 70px; /* 28 до блока + 42 внутренний отступ макета */
  margin-bottom: clamp(80px, 6.25vw, 120px);
}
.smi-contacts__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 985px;
}
.smi .section-label__text {
  font-size: var(--smi-txt);
  line-height: 1.6;
}
.smi-contacts__title {
  font: 400 var(--smi-h3) / 1.25 var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
  text-wrap: balance;
}

.smi-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.smi-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(40px, calc(1.875vw + 13px), 49px) clamp(44px, calc(2.708vw + 5px), 57px);
  background: var(--c-dark);
  border-radius: var(--r-24);
}
.smi-card--org { justify-content: center; }
.smi-card__title {
  font: 400 var(--smi-h3) / 1.25 var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.smi-card__title-em { color: var(--c-bg); }
.smi-card__contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.smi-card__phone {
  font: 400 var(--smi-h3) / 1.25 var(--font-display);
  text-transform: uppercase;
  color: var(--c-bg);
}
.smi-card__mail {
  font-size: var(--smi-txt);
  line-height: 1.6;
  color: var(--c-accent);
  text-decoration: underline;
}
.smi-card__mail:hover { text-decoration: none; }

/* ==========================================================================
   ≤1440 — десктоп-ступень @1919. Размеры макета держат clamp() выше,
   здесь — только вертикальный ритм.
   ========================================================================== */
@media (max-width: 1919px) {
  .smi-contacts { margin-top: 60px; }
}

/* ==========================================================================
   ≤768 — планшет. Геро выше макетных 360: под заголовком живут две плашки.
   ========================================================================== */
@media (max-width: 1023px) {
  .smi .arr-hero { height: 480px; }
  .smi .arr-hero__inner {
    left: 32px;
    right: 32px;
    bottom: 32px;
  }
  .smi .arr-hero__title { margin-top: 14px; font-size: 40px; line-height: 44px; }
  .smi-hero__meta { margin-top: 20px; }

  /* Коллаж кропается сильно — держим окно так, чтобы живопись начиналась
     правее плашек (~65% ширины баннера), а не уезжала за экран целиком. */
  .smi .arr-hero__img { object-position: 20% center; }

  .smi-date { height: auto; padding: 12px 14px; }
  .smi-date__d { font-size: 24px; line-height: 32px; }
  .smi-hero__about { padding: 12px 14px; }
  .smi-hero__about-title,
  .smi-hero__about-sub { max-width: min(608px, 46vw); }
  .smi-hero__about-title { font-size: 20px; line-height: 26px; }
  .smi-hero__about-sub { font-size: 14px; }

  .smi .arr-hero + .visa-block { margin-top: 48px; }
  .smi .visa-block { margin-top: 20px; }
  /* Скоуп-clamp'ы выше перебивают ступени visa.css — возвращаем их значения. */
  .smi .visa-block__head { padding: 32px; }
  .smi .visa-block__body { gap: 32px; padding: 32px; }
  .smi .visa-block__title { font-size: 28px; line-height: 34px; }
  .smi-notes { gap: 18px; margin-top: 20px; }
  .smi-callout { margin-top: 20px; }

  .smi-contacts { margin-top: 48px; }
  .smi-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ≤360 — узкая мобила. Full-bleed выключаем: полоса и баннер — по контейнеру.
   Плашки геро встают колонкой, даты — в строку.
   ========================================================================== */
@media (max-width: 767px) {
  .smi .ptabs--flow,
  .smi .arr-hero { margin-inline: 0; }

  .smi .arr-hero { height: 460px; }
  .smi .arr-hero__inner { left: 16px; right: 16px; bottom: 20px; }
  .smi .arr-hero__title { margin-top: 10px; font-size: 28px; line-height: 32px; }

  .smi-hero__meta {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 16px;
  }
  .smi-date {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }
  .smi-date__days { flex-direction: row; gap: 8px; }
  .smi-date__d { width: auto; font-size: 22px; line-height: 28px; }
  .smi-date__when { width: auto; text-align: left; }
  .smi-hero__about-title,
  .smi-hero__about-sub { max-width: none; }
  .smi-hero__about-title { font-size: 18px; line-height: 24px; }
  .smi-hero__about-sub { font-size: 13px; }

  .smi .arr-hero + .visa-block { margin-top: 32px; }
  .smi .visa-block { margin-top: 16px; }
  .smi .visa-block__head { padding: 24px 20px; }
  .smi .visa-block__body { gap: 24px; padding: 24px 20px; }
  .smi .visa-block__title { font-size: 22px; line-height: 28px; }
  .smi-key { font-size: 20px; line-height: 26px; }
  .smi-rules { gap: 24px; }

  .smi-notes { gap: 16px; margin-top: 16px; }
  .smi-callout { margin-top: 16px; padding: 16px 18px; }

  .smi-contacts { margin-top: 40px; margin-bottom: 56px; }
  .smi-cards { gap: 12px; margin-top: 20px; }
  .smi-card { gap: 16px; padding: 28px 20px; }
  .smi-card__title,
  .smi-card__phone { font-size: 22px; line-height: 28px; }
  .smi-contacts__title { font-size: 24px; line-height: 30px; }
}