/* =========================================================================
 * Regional Info Block — Shipping Manifest / Editorial Craft
 * 2026-04-24
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500;600&family=Inter+Tight:wght@400;500;600&display=swap');

.regional-info-wrapper {
  --paper:       #EFE6D0;
  --paper-dark:  #E5D9BC;
  --ri-ink:      #1C140B;
  --ri-ink-2:    #4E3F2C;
  --ri-ink-3:    #84725A;
  --ri-rule:     #C4B693;
  --ri-accent:   #A84B1C;
  --ri-accent-2: #7A3410;
  --ri-gold:     #8F6B1E;
  --ri-stamp:    rgba(168,75,28,0.75);

  margin: 40px 0 56px;
  padding: 0;
}

.regional-info-wrapper > .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

.regional-info-wrapper .regional-info {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ri-rule);
  padding: 58px 64px 48px;
  overflow: hidden;
  isolation: isolate;
  font-family: 'Inter Tight', system-ui, sans-serif;
  color: var(--ri-ink);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.02),
    0 18px 28px -18px rgba(0,0,0,0.18);
}

/* бумажная текстура */
.regional-info-wrapper .regional-info::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.regional-info-wrapper .regional-info > * {
  position: relative;
  z-index: 1;
}

/* HEAD */
.regional-info-wrapper .ri__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: baseline;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ri-ink);
}
.regional-info-wrapper .ri__head-left,
.regional-info-wrapper .ri__head-right {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ri-ink-2);
  font-weight: 500;
}
.regional-info-wrapper .ri__head-right { text-align: right; }
.regional-info-wrapper .ri__head-center {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ri-accent);
  font-weight: 600;
  white-space: nowrap;
}
.regional-info-wrapper .ri__region-no {
  display: inline-block;
  font-weight: 700;
  color: var(--ri-ink);
}

/* ROUTE */
.regional-info-wrapper .ri__route {
  margin: 0 0 44px;
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.regional-info-wrapper .ri__route-item { flex: 1; }
.regional-info-wrapper .ri__route-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ri-ink-3);
  margin-bottom: 8px;
}
.regional-info-wrapper .ri__route-city {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 50, 'opsz' 144, 'wght' 400;
  font-style: italic;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.018em;
  color: var(--ri-ink);
  display: block;
}
.regional-info-wrapper .ri__route-arrow {
  align-self: center;
  padding-top: 28px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  color: var(--ri-accent);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.regional-info-wrapper .ri__route-from .ri__route-city {
  color: var(--ri-ink-2);
  font-variation-settings: 'SOFT' 100, 'opsz' 144, 'wght' 350;
  font-style: normal;
}

.regional-info-wrapper .ri__route-sub {
  display: block;
  margin-top: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ri-ink-3);
  line-height: 1.5;
  max-width: 260px;
}

/* Main domain — Москва как точка отгрузки (не маршрут) */
.regional-info-wrapper .ri__route--main .ri__route-from .ri__route-city,
.regional-info-wrapper .ri__route--main .ri__route-to .ri__route-city {
  font-variation-settings: 'SOFT' 40, 'opsz' 144, 'wght' 400;
  font-style: italic;
  color: var(--ri-ink);
}
.regional-info-wrapper .ri__route--main .ri__route-to .ri__route-city {
  color: var(--ri-accent);
}

/* TITLE */
.regional-info-wrapper .ri__title {
  font-family: 'Instrument Serif', 'Fraunces', serif !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.005em;
  color: var(--ri-ink) !important;
  margin: 0 0 40px !important;
  max-width: 82%;
  font-style: italic;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* METRIC */
.regional-info-wrapper .ri__metric {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 44px;
  padding: 24px 28px 28px;
  background: var(--paper-dark);
  border: 1px solid var(--ri-rule);
  position: relative;
}
.regional-info-wrapper .ri__metric::before {
  content: 'СРОК';
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--ri-ink-3);
}
.regional-info-wrapper .ri__metric-number {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 0, 'opsz' 144, 'wght' 500, 'WONK' 1;
  font-size: clamp(64px, 10vw, 118px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ri-accent);
}
.regional-info-wrapper .ri__metric-number--small {
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-style: italic;
}
.regional-info-wrapper .ri__metric-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.regional-info-wrapper .ri__metric-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ri-ink-3);
}
.regional-info-wrapper .ri__metric-caption {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: 'SOFT' 80, 'opsz' 48;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ri-ink);
}

/* CARRIERS */
.regional-info-wrapper .ri__carriers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 40px;
}
.regional-info-wrapper .ri__carriers-label {
  flex-basis: 100%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ri-ink-3);
  margin-bottom: 2px;
}
.regional-info-wrapper .ri__carrier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;
  border: 1px solid var(--ri-ink);
  background: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--ri-ink);
  text-transform: uppercase;
  position: relative;
  transition: transform .18s ease, background .18s ease;
}
.regional-info-wrapper .ri__carrier::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ri-accent);
  display: inline-block;
}
.regional-info-wrapper .ri__carrier:hover {
  transform: translateY(-2px) rotate(-0.6deg);
  background: var(--paper-dark);
}
.regional-info-wrapper .ri__carrier--cdek::before { background: var(--ri-gold); }
.regional-info-wrapper .ri__carrier--flag {
  border-color: var(--ri-accent);
  color: var(--ri-accent-2);
}
.regional-info-wrapper .ri__carrier--flag::before { background: var(--ri-accent); animation: ri-pulse 2s infinite; }
@keyframes ri-pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

/* PROSE */
.regional-info-wrapper .ri__content {
  columns: 2;
  column-gap: 40px;
  margin-bottom: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--ri-rule);
}
.regional-info-wrapper .ri__content p {
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--ri-ink-2) !important;
  margin-bottom: 14px !important;
  break-inside: avoid;
  hyphens: auto;
}
.regional-info-wrapper .ri__content p:first-child::first-line {
  font-weight: 500;
  letter-spacing: 0.005em;
}
.regional-info-wrapper .ri__content strong {
  color: var(--ri-ink);
  font-weight: 600;
  background: linear-gradient(to bottom, transparent 70%, rgba(168,75,28,0.18) 70% 90%, transparent 90%);
  padding: 0 2px;
}
.regional-info-wrapper .ri__content ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  break-inside: avoid;
}
.regional-info-wrapper .ri__content ul li {
  padding: 4px 0 4px 18px !important;
  position: relative;
  font-size: 14px !important;
  color: var(--ri-ink-2);
  line-height: 1.5;
}
.regional-info-wrapper .ri__content ul li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--ri-accent);
  font-weight: 700;
}

/* TERMS */
.regional-info-wrapper .ri__terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ri-ink);
  margin-bottom: 30px;
}
.regional-info-wrapper .ri__term {
  padding: 18px 22px 20px;
  border-right: 1px solid var(--ri-rule);
  position: relative;
  background: var(--paper);
}
.regional-info-wrapper .ri__term:last-child { border-right: none; }
.regional-info-wrapper .ri__term-no {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ri-ink-3);
}
.regional-info-wrapper .ri__term-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ri-ink-3);
  margin-bottom: 8px;
}
.regional-info-wrapper .ri__term-value {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 48, 'wght' 450;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ri-ink);
  display: block;
}
.regional-info-wrapper .ri__term-value a {
  color: var(--ri-accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.regional-info-wrapper .ri__term-value a:hover { color: var(--ri-accent-2) !important; }
.regional-info-wrapper .ri__term-value .mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

/* FOOT */
.regional-info-wrapper .ri__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px dashed var(--ri-rule);
  gap: 24px;
}
.regional-info-wrapper .ri__origin {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ri-ink-2);
  line-height: 1.65;
}
.regional-info-wrapper .ri__origin strong {
  color: var(--ri-ink);
  font-weight: 600;
}
.regional-info-wrapper .ri__stamp {
  flex-shrink: 0;
  border: 2px solid var(--ri-stamp);
  color: var(--ri-stamp);
  padding: 9px 16px 8px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: 'opsz' 48, 'wght' 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1;
  transform: rotate(-3deg);
  position: relative;
  opacity: 0.92;
  background: transparent;
}
.regional-info-wrapper .ri__stamp::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  opacity: 0.5;
  pointer-events: none;
}
.regional-info-wrapper .ri__stamp small {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  margin-top: 3px;
  opacity: 0.9;
  text-transform: uppercase;
}

/* ANIMATIONS */
@keyframes ri-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ri-ink {
  from { opacity: 0; letter-spacing: -0.08em; filter: blur(3px); }
  to   { opacity: 1; letter-spacing: -0.04em; filter: blur(0); }
}
@keyframes ri-stamp {
  0%   { opacity: 0; transform: rotate(-3deg) scale(1.4); }
  60%  { opacity: 0.4; }
  100% { opacity: 0.92; transform: rotate(-3deg) scale(1); }
}
.regional-info-wrapper .ri__head { animation: ri-up .7s both; }
.regional-info-wrapper .ri__route { animation: ri-up .7s .08s both; }
.regional-info-wrapper .ri__title { animation: ri-up .7s .16s both; }
.regional-info-wrapper .ri__metric-number { animation: ri-ink .9s .3s both; }
.regional-info-wrapper .ri__metric-body { animation: ri-up .7s .32s both; }
.regional-info-wrapper .ri__carriers-label { animation: ri-up .7s .4s both; }
.regional-info-wrapper .ri__carrier { animation: ri-up .5s both; }
.regional-info-wrapper .ri__carrier:nth-child(2) { animation-delay: .48s; }
.regional-info-wrapper .ri__carrier:nth-child(3) { animation-delay: .54s; }
.regional-info-wrapper .ri__carrier:nth-child(4) { animation-delay: .60s; }
.regional-info-wrapper .ri__carrier:nth-child(5) { animation-delay: .66s; }
.regional-info-wrapper .ri__carrier:nth-child(6) { animation-delay: .72s; }
.regional-info-wrapper .ri__content { animation: ri-up .7s .55s both; }
.regional-info-wrapper .ri__terms { animation: ri-up .7s .65s both; }
.regional-info-wrapper .ri__foot { animation: ri-up .7s .75s both; }
.regional-info-wrapper .ri__stamp { animation: ri-stamp 1s .95s both; }

@media (prefers-reduced-motion: reduce) {
  .regional-info-wrapper * { animation: none !important; transition: none !important; }
}

/* RESPONSIVE */
@media (max-width: 720px) {
  .regional-info-wrapper .regional-info { padding: 34px 22px 28px; }
  .regional-info-wrapper .ri__head { grid-template-columns: 1fr; gap: 6px; }
  .regional-info-wrapper .ri__head-right { text-align: left; }
  .regional-info-wrapper .ri__route { flex-direction: column; gap: 10px; }
  .regional-info-wrapper .ri__route-arrow { transform: rotate(90deg); padding: 0; align-self: flex-start; margin-left: 12px; }
  .regional-info-wrapper .ri__metric { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; }
  .regional-info-wrapper .ri__content { columns: 1; }
  .regional-info-wrapper .ri__terms { grid-template-columns: 1fr; }
  .regional-info-wrapper .ri__term { border-right: none; border-bottom: 1px solid var(--ri-rule); }
  .regional-info-wrapper .ri__term:last-child { border-bottom: none; }
  .regional-info-wrapper .ri__title { max-width: 100%; }
  .regional-info-wrapper .ri__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
}