/* ============================================================
   expo.css — стили страницы «Агропродмаш-2026»
   Подключается ТОЛЬКО на agroprodmash-2026.html, после styles.css.
   Использует переменные и типографику из styles.css.
   ============================================================ */

/* ---------- Бейдж выставки над hero ---------- */
.expo-topbadge{
  /* Бейдж — первый элемент на странице, header зафиксирован (position:fixed),
     поэтому именно здесь компенсируем его высоту переменной --header-h. */
  position:relative;
  margin-top:var(--header-h);
  background:linear-gradient(90deg, rgba(249,63,52,0.16), rgba(249,63,52,0) 60%), var(--panel);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.expo-topbadge::before{
  /* Красная полоса-акцент во всю ширину экрана, чтобы бейдж считывался
     с первого взгляда, а не терялся рядом с тёмным header. */
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--red);
}
.expo-topbadge-inner{
  display:flex;
  align-items:center;
  gap:20px;
  padding:22px 0;
}
.expo-topbadge-emblem{
  width:60px;
  height:auto;
  flex-shrink:0;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
.expo-topbadge-text{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:12px;
  row-gap:4px;
}
.expo-topbadge-kicker{
  flex-basis:100%;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:8px;
}
.expo-topbadge-kicker::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 4px rgba(249,63,52,0.18);
}
.expo-topbadge-name{
  font-family:var(--display);
  font-size:26px;
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--white);
  line-height:1;
}
.expo-topbadge-year{
  font-family:var(--display);
  font-size:26px;
  font-weight:700;
  color:var(--red);
  line-height:1;
}
.expo-topbadge-venue{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--steel);
  padding-left:12px;
  border-left:1px solid var(--line);
}
@media (max-width: 560px){
  .expo-topbadge-inner{ padding:14px 0; gap:12px; }
  .expo-topbadge-emblem{ width:40px; }
  .expo-topbadge-name{ font-size:19px; }
  .expo-topbadge-year{ font-size:19px; }
  .expo-topbadge-kicker{ display:none; }
  .expo-topbadge-venue{ border-left:none; padding-left:0; flex-basis:100%; }
}

/* ---------- Hero выставки ----------
   Базовый .hero (styles.css) резервирует сверху var(--header-h), чтобы уйти
   из-под зафиксированного header. На этой странице header уже "закрывает"
   бейдж над hero, поэтому здесь этот отступ убираем и оставляем только
   обычные вертикальные отступы секции — иначе получится двойной зазор. */
.expo-hero{ padding-top:96px; }
@media (max-width: 980px){
  .expo-hero{ padding-top:56px; }
}
@media (max-width: 640px){
  .expo-hero{ padding-top:40px; }
}

/* ---------- Hero выставки ---------- */
.expo-hero .hero-inner{
  grid-template-columns:1.05fr 0.95fr;
  align-items:start;
}
.expo-hero h1{ max-width:14ch; }
.expo-hero .lede{ max-width:48ch; }

.expo-dates{
  margin-top:20px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
}
.expo-dates .sep{ color:var(--line); }

.countdown{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 14px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--steel);
  letter-spacing:0.04em;
}
.countdown b{ color:var(--red); font-weight:500; font-size:13px; }
.countdown[hidden]{ display:none; }

/* Координаты стенда — «шильдик» */
.coords{
  margin-top:34px;
  border:1px solid var(--line);
  background:rgba(20,43,60,0.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.coords-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--steel);
}
.coords-head::before{
  content:"";
  width:7px; height:7px;
  background:var(--red);
  flex-shrink:0;
}
.coords-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
}
.coords-cell{
  background:var(--panel);
  padding:18px 20px 20px;
}
.coords-cell .k{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--steel);
}
.coords-cell .v{
  font-family:var(--display);
  font-size:clamp(22px, 3vw, 30px);
  font-weight:700;
  color:var(--white);
  margin-top:6px;
  line-height:1;
}
.coords-cell.is-stand .v{ color:var(--red); }

/* Схема стенда в hero */
.expo-graphic{ position:relative; }
.expo-graphic svg{ width:100%; height:auto; }

/* ---------- Общие секции страницы ---------- */
.section-light{
  position:relative;
  background:var(--white);
  padding:96px 0;
  overflow:hidden;
}
.section-light::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(14,16,21,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,16,21,0.055) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  pointer-events:none;
}
.section-light > .wrap{ position:relative; z-index:1; }
.section-light .eyebrow{ color:var(--red-deep); }
.section-light h2{
  font-family:var(--display);
  font-size:clamp(26px, 3vw, 34px);
  font-weight:700;
  margin-top:14px;
  line-height:1.18;
  color:var(--ink);
  max-width:22ch;
}
.section-light .section-lede{
  margin-top:16px;
  font-size:16px;
  color:#3c4250;
  line-height:1.7;
  max-width:62ch;
}

.section-dark{
  background:var(--bg);
  color:var(--white);
  padding:96px 0;
}
.section-dark .eyebrow{ color:var(--red); }
.section-dark h2{
  font-family:var(--display);
  font-size:clamp(26px, 3vw, 34px);
  font-weight:700;
  margin-top:14px;
  line-height:1.18;
  max-width:22ch;
}
.section-dark .section-lede{
  margin-top:16px;
  font-size:15px;
  color:var(--muted);
  line-height:1.7;
  max-width:60ch;
}

.head-block{ margin-bottom:48px; }

/* ---------- Экспозиция: что покажем ---------- */
.show-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.show-item{
  background:var(--white);
  padding:28px 26px 30px;
  display:flex;
  flex-direction:column;
}
.show-item-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:46px;
}
.show-code{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--red-deep);
  text-transform:uppercase;
}
.show-item h3{
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
  margin-top:20px;
  color:var(--ink);
}
.show-item p{
  font-size:14px;
  color:#5a6070;
  line-height:1.65;
  margin-top:10px;
  flex-grow:1;
}
.show-item ul{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.show-item li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  color:#3c4250;
  line-height:1.5;
}
.show-item li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:5px; height:5px;
  background:var(--red);
}
.show-item .show-link{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #dcdfe5;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  transition:color 0.2s ease;
}
.show-item .show-link svg{ width:13px; height:13px; }
.show-item .show-link:hover{ color:var(--red-deep); }

/* Белая «плашка» под оригинальный логотип на любом фоне */
.logo-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #e2e5ea;
  border-radius:3px;
  padding:9px 14px;
  height:46px;
  flex-shrink:0;
}
.logo-chip img{
  /* width/height у <img> заданы атрибутами — сбрасываем в auto,
     иначе браузер игнорирует пропорции при масштабировании */
  width:auto;
  height:auto;
  max-height:26px;
  max-width:100%;
  object-fit:contain;
}
.section-dark .logo-chip{ border-color:transparent; }

/* ---------- Компании группы / партнёры ---------- */
.brand-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.brand-grid.is-two{ grid-template-columns:repeat(2, 1fr); }

.brand-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:26px 24px 24px;
  display:flex;
  flex-direction:column;
  transition:border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
a.brand-card:hover{
  border-color:var(--red-deep);
  background:var(--panel-2);
  transform:translateY(-4px);
}
.brand-card .logo-chip{
  height:96px;
  width:100%;
  justify-content:flex-start;
  padding:14px 20px;
}
/* Логотипы у брендов разной формы — вертикальные, горизонтальные, вордмарки.
   Двойное ограничение по высоте и ширине выравнивает их оптический размер. */
.brand-card .logo-chip img{
  width:auto;
  height:auto;
  max-height:64px;
  max-width:200px;
}
.brand-card h3{
  font-family:var(--display);
  font-size:18px;
  font-weight:600;
  color:var(--white);
  margin-top:22px;
}
.brand-card .tag{
  font-family:var(--mono);
  font-size:11px;
  color:var(--steel);
  margin-top:6px;
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.brand-card p{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.65;
  margin-top:14px;
  flex-grow:1;
}
.brand-card .goto{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--white);
  transition:color 0.2s ease;
}
.brand-card .goto svg{ width:13px; height:13px; transition:transform 0.2s ease; }
a.brand-card:hover .goto{ color:var(--red); }
a.brand-card:hover .goto svg{ transform:translate(3px,-3px); }
.brand-card .goto.is-static{ color:var(--steel); font-weight:500; font-family:var(--mono); font-size:12px; }

/* ---------- Собственные разработки ---------- */
.own-body p{
  font-size:16px;
  color:#3c4250;
  line-height:1.75;
  max-width:64ch;
}
.own-body p + p{ margin-top:14px; }

.photo-grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.photo-slot{
  position:relative;
  margin:0;
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
}
.photo-slot img{
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  display:block;
}
.photo-slot figcaption{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--steel);
  padding:11px 14px;
  border-top:1px solid var(--line);
  background:var(--panel);
}

/* ---------- Как найти стенд ---------- */
.find-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:48px;
  align-items:start;
}
.find-list{
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.find-row{
  background:var(--panel);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  padding:15px 20px;
}
.find-row .k{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--steel);
  flex-shrink:0;
}
.find-row .v{
  font-size:14.5px;
  color:var(--white);
  text-align:right;
}
.find-row .v a:hover{ color:var(--red); }

.expo-cta{
  margin-top:28px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:13px 22px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--white);
  transition:border-color 0.2s ease, color 0.2s ease;
}
.btn-ghost svg{ width:15px; height:15px; flex-shrink:0; }
.btn-ghost:hover{ border-color:var(--red); color:var(--red); }
/* На светлой секции белый текст был бы не виден — перекрашиваем */
.section-light .btn-ghost{ color:var(--ink); border-color:#c9ced8; }
.section-light .btn-ghost:hover{ color:var(--red-deep); border-color:var(--red-deep); }

/* Хлебные крошки */
.crumbs{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  color:var(--steel);
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.crumbs a:hover{ color:var(--red); }
.crumbs span{ color:var(--line); }

/* Пункт меню-«маячок» для страницы выставки */
.nav-expo{ position:relative; }
.nav-expo::after{
  content:"";
  position:absolute;
  top:2px; right:-9px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--red);
}

/* ---------- Адаптив ---------- */
@media (max-width: 980px){
  .expo-hero .hero-inner{ grid-template-columns:1fr; }
  /* на узких экранах схема зала идёт ПОСЛЕ текста и координат стенда */
  .expo-graphic{ order:1; max-width:380px; margin:4px auto 0; }
  .section-light{ padding:68px 0; }
  .section-dark{ padding:68px 0; }
  .show-grid{ grid-template-columns:1fr; }
  .brand-grid, .brand-grid.is-two{ grid-template-columns:1fr; }
  .photo-grid{ grid-template-columns:repeat(2, 1fr); }
  .find-grid{ grid-template-columns:1fr; gap:32px; }
}

@media (max-width: 640px){
  .coords-grid{ grid-template-columns:1fr; }
  .coords-cell{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:14px 18px; }
  .coords-cell .v{ margin-top:0; font-size:22px; }
  .photo-grid{ grid-template-columns:1fr; }
  .expo-cta .btn-primary,
  .expo-cta .btn-ghost{ width:100%; justify-content:center; }
  .find-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .find-row .v{ text-align:left; }
  .section-light h2, .section-dark h2{ font-size:24px; }
}