/* ========================================
   VIA PAGE - EXACT FIGMA MATCH
   ======================================== */

/* ========================================
   VIA Header — точные координаты .fig (origin: контент L80, верх = T162)
   VIA @L212/T207; Line9 @L210/T319 w542; desc @L210/T361;
   делитель Line15 @L883/T162 h370; стек @L948 (PROCESS T162 / ENV T305 / DISC T448).
   ======================================== */
.via-header-section {
  padding-top: 90px;          /* отступ под фикс-навбар; PROCESS ~T162 от верха */
  background: #F1F1F1;
}

.via-header-content {
  position: relative;
  width: 1280px;
  max-width: 100%;
  height: 370px;              /* T162→T532 (DISCIPLINE низ) */
  margin: 0 auto;
  padding-bottom: 80px;
}

.via-main-title {
  position: absolute;
  left: 132px;                /* Figma L212 - 80 */
  top: 45px;                  /* Figma T207 - 162 */
  margin: 0;
  font-family: 'Luxerie', sans-serif;   /* Figma: Luxerie 96px */
  font-size: 96px;
  font-weight: 400;
  letter-spacing: 0.06em;     /* Figma: 6% */
  text-transform: uppercase;
  color: #000000;
  line-height: 1;
}

.via-hero-rule {
  position: absolute;
  left: 130px;                /* Figma L210 - 80 */
  top: 157px;                 /* Figma T319 - 162 */
  width: 542px;               /* Figma Line9 */
  height: 1px;                /* sw=1 */
  background: #989CA0;
}

.via-description {
  position: absolute;
  left: 130px;
  top: 199px;                 /* Figma T361 - 162 */
  width: 466px;
}

.via-description p {
  font-family: 'Maven Pro', sans-serif;   /* Figma: Maven Pro 24px #474646 */
  font-size: 24px;
  font-weight: 400;
  color: #474646;
  line-height: 0.78;                  /* Figma: lh 0.78x (≈18.7px при 24px) */
  margin: 0 0 18.72px;                /* Figma: зазор = одна пустая строка (0.78em) */
}

.via-description p:last-child { margin-bottom: 0; }

.via-divider {
  position: absolute;
  left: 803px;                /* Figma L883 - 80 */
  top: 0;                     /* Figma T162 */
  width: 0.5px;               /* Figma Line15 sw=0.5 */
  height: 370px;
  background: #989CA0;
}

.via-right {
  position: absolute;
  left: 868px;                /* Figma L948 - 80 */
  top: 0;
}

.via-right-item {
  position: absolute;
  margin: 0;
  font-family: 'Luxerie', sans-serif;   /* Figma: Luxerie 48px #252525 */
  font-size: 48px;
  font-weight: 400;
  text-transform: uppercase;
  color: #252525;
  white-space: nowrap;
}

.via-right-item:nth-child(1) { top: 0; }     /* PROCESS  @T162 */
.via-right-item:nth-child(2) { top: 143px; } /* ENVIRONMENT @T305 */
.via-right-item:nth-child(3) { top: 286px; } /* DISCIPLINE @T448 */

.via-right-process {
  font-family: 'Maven Pro', sans-serif;  /* Figma: PROCESS. набран Maven Pro */
}

/* Section Headings Light */
.section-heading-light {
  font-family: 'Luxerie', sans-serif;   /* Figma: Luxerie Regular 40px */
  font-size: 40px;
  font-weight: 400;
  /* Figma: у 40px Luxerie-заголовков ls отсутствует — без letter-spacing */
  text-transform: uppercase;
  color: #000000;
  max-width: 1280px;                  /* Figma: контент 1280 при холсте 1440 */
  margin: 0 auto 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #989CA0;   /* Figma: Line sw=1 #989CA0 */
}

/* What is Recorded */
.what-recorded-section {
  padding: 80px 40px;
  background: #F1F1F1;
}

/* Figma: 4 карточки 305x70 #E5E3E3 @L82, зазоры 18.7px, ряд 1276 */
.recorded-cards {
  display: grid;
  grid-template-columns: repeat(4, 305px);
  justify-content: space-between;
  width: 1276px;
  max-width: 100%;
  margin: 32px auto 0;
}

.recorded-card {
  background: #E5E3E3;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Maven Pro', sans-serif;   /* Figma: Maven Pro Regular 20px #000 */
  font-size: 20px;
  font-weight: 400;
  color: #000000;
  /* Figma: у текста карточек (Maven Pro 20px) ls отсутствует */
}

/* ========================================
   Registry Table — точные значения из .fig (table-rel: левый край=0, верх=0)
   Ширина 1278 (L81→L1359). CASE 545 (Line11 @545). Правый блок 733.
   Вертикали: 0 (Line14), 545 (Line11), 1278 (Line13), 493-в-правом (Line12).
   Горизонтали: верх 4 линии y=55/92/129/166 (w733); низ 4 линии y=263/301/339/377 (w493).
   Линии strokeWeight=0.5 #D3D2D3. Шрифты Maven Pro 24/20, Luxerie 40 #252525.
   ======================================== */
.registry-table-section {
  padding: 80px 40px;
  background: #F1F1F1;
}

.registry-table {
  display: grid;
  grid-template-columns: 545px 733px;  /* Figma: CASE 545, правый блок 733 */
  width: 1278px;
  max-width: 100%;
  margin: 0 auto;
  border-left: 0.5px solid #D3D2D3;    /* Figma Line 14 */
  border-right: 0.5px solid #D3D2D3;   /* Figma Line 13 */
}

.rt-case {
  border-right: 0.5px solid #D3D2D3;   /* Figma Line 11 — делитель */
  padding-left: 20px;                  /* Figma: текст CASE на table-rel 20 */
}

.rt-right {
  display: flex;
  flex-direction: column;
  gap: 46px;                           /* Figma: зазор подтаблиц (166→212) */
}

.rt-sub {
  display: grid;
}

.rt-sub-3 {
  grid-template-columns: 254px 236px 243px;  /* Figma текст-иксы 14/268/504 */
}

.rt-sub-2 {
  grid-template-columns: 254px 239px 240px;  /* col2 закрывается на 493 (Line12) */
}

.rt-cell {
  font-family: 'Maven Pro', sans-serif;
  box-sizing: border-box;
  padding-left: 14px;                  /* Figma: текст блока на block-rel 14 */
}

.rt-h {
  height: 55px;                        /* Figma: полоса шапки 820→875 */
  padding-top: 1px;
  font-size: 24px;                     /* Figma: Maven Pro 24px #000 */
  font-weight: 400;
  color: #000000;
  text-transform: uppercase;
  border-bottom: 0.5px solid #D3D2D3;
}

.rt-d {
  height: 37px;                        /* Figma: строка 37px */
  padding-top: 5px;
  font-size: 20px;                     /* Figma: Maven Pro 20px #474646 */
  font-weight: 400;
  color: #474646;
  border-bottom: 0.5px solid #D3D2D3;
}

.rt-sub-2 .rt-h { height: 51px; padding-top: 0; }   /* Figma: 1032→1083 */
.rt-sub-2 .rt-d { height: 38px; padding-top: 6px; } /* Figma: строки 38px */

.rt-case-title {
  height: 50px;                        /* Figma: CASE @table-rel 1, item1 @51 */
  padding-top: 1px;
  font-size: 24px;                     /* CASE: Maven Pro 24px #000, без линии */
  font-weight: 400;
  color: #000000;
  text-transform: uppercase;
}

.rt-case-item {
  font-family: 'Luxerie', sans-serif;  /* Figma: Luxerie 40px #252525 */
  font-size: 40px;
  font-weight: 400;
  color: #252525;
  line-height: 48px;                   /* Figma: item1 @51, item2 @108 → шаг 57 */
  margin-bottom: 9px;
}

/* Нижняя подтаблица — только 2 из 3 колонок (как в Figma), col3 пуст */
.rt-sub-2 .rt-cell:nth-child(odd) { grid-column: 1; }
.rt-sub-2 .rt-cell:nth-child(even) { grid-column: 2; }

.rt-sub-2 .rt-edge {
  border-right: 0.5px solid #D3D2D3;   /* Figma Line 12 — закрытие на 493 */
}

/* Serial Info Section */
.serial-info-section {
  padding: 80px 40px;
  background: #F1F1F1;
}

.serial-note {
  position: relative;
  max-width: 1280px;
  margin: 0 auto 64px;
  padding-top: 15px;                  /* Figma: Line23 @T1288, текст @T1303 */
  font-family: 'Maven Pro', sans-serif;   /* Figma: Maven Pro 20px #252525 */
  font-size: 20px;
  font-weight: 400;
  color: #252525;
}

.serial-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 323px;                       /* Figma Line23 */
  height: 0.5px;
  background: #D3D2D3;
}

/* ========================================
   RESPONSIVE VIA
   ======================================== */

@media (max-width: 1320px) {
  /* ниже дизайн-ширины 1280 — переводим hero в поток (точный десктоп = 1440) */
  .via-header-content {
    position: static;
    width: auto;
    height: auto;
    padding: 0 0 48px;
  }
  .via-main-title,
  .via-hero-rule,
  .via-description,
  .via-divider,
  .via-right,
  .via-right-item {
    position: static;
  }
  .via-main-title { left: auto; top: auto; }
  .via-divider { display: none; }
  .via-right { margin-top: 48px; display: flex; flex-direction: column; gap: 48px; }
  .via-hero-rule { margin: 16px 0; }
  .via-description { width: auto; max-width: 466px; margin-top: 24px; }
}

@media (max-width: 1024px) {
  .via-right-item {
    font-size: 32px;
  }
  
  .recorded-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .registry-table {
    grid-template-columns: 1fr;
  }

  .rt-case {
    border-right: none;
    border-bottom: 1px solid #D3D2D3;
    padding-bottom: 32px;
  }
}

@media (max-width: 768px) {
  .via-header-section {
    padding: 120px 24px 60px;
  }
  
  .via-main-title {
    font-size: 64px;
  }
  
  .via-description p {
    font-size: 16px;
  }
  
  .via-right-item {
    font-size: 28px;
  }
  
  .section-heading-light {
    font-size: 32px;
  }
  
  .what-recorded-section,
  .registry-table-section,
  .serial-info-section {
    padding: 60px 24px;
  }
  
  .recorded-cards {
    grid-template-columns: 1fr;
  }
  
  .rt-case-item {
    font-size: 24px;
  }
}

@media (max-width: 375px) {
  .via-main-title {
    font-size: 48px;
  }
  
  .via-right-item {
    font-size: 24px;
  }
}

/* ========================================
   ARTE PAGE STYLES
   ======================================== */

.arte-header-section {
  padding: 140px 40px 80px;
  background: #F1F1F1;
  max-width: 1440px;
  margin: 0 auto;
}

.arte-header-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.arte-left {
  padding-right: 40px;
  border-right: 1px solid #D0D0D0;
}

.arte-main-title {
  font-family: 'Luxerie', sans-serif;   /* Figma: Luxerie Regular 96px */
  font-size: 96px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: 24px;
  line-height: 1;
}

.arte-description {
  margin-top: 32px;
}

.arte-description p {
  font-family: 'Maven Pro', sans-serif;   /* Figma: Maven Pro Regular 24px #474646 */
  font-size: 24px;
  font-weight: 400;
  color: #474646;
  margin-bottom: 12px;
  line-height: 1.35;
}

.arte-right {
  padding-left: 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.arte-right-item {
  font-family: 'Luxerie', sans-serif;   /* Figma: Luxerie Regular 48px #252525 */
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #252525;
  margin: 0;
}

/* ========================================
   COLLECTA PAGE STYLES
   ======================================== */

.collecta-header-section {
  padding: 140px 40px 80px;
  background: #F1F1F1;
  max-width: 1440px;
  margin: 0 auto;
}

.collecta-header-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.collecta-left {
  padding-right: 40px;
  border-right: 1px solid #D0D0D0;
}

.collecta-main-title {
  font-family: 'Luxerie', sans-serif;   /* Figma: Luxerie Regular 96px */
  font-size: 96px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: 24px;
  line-height: 1;
}

.collecta-description {
  margin-top: 32px;
}

.collecta-description p {
  font-family: 'Maven Pro', sans-serif;   /* Figma: Maven Pro Regular 24px #474646 */
  font-size: 24px;
  font-weight: 400;
  color: #474646;
  margin-bottom: 12px;
  line-height: 1.35;
}

.collecta-right {
  padding-left: 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.collecta-right-item {
  font-family: 'Luxerie', sans-serif;   /* Figma: Luxerie Regular 48px #252525 */
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #252525;
  margin: 0;
}

/* ========================================
   PROBATUM PAGE STYLES
   ======================================== */

.probatum-header-section {
  padding: 140px 40px 80px;
  background: #F1F1F1;
  max-width: 1440px;
  margin: 0 auto;
}

.probatum-header-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.probatum-left {
  padding-right: 40px;
  border-right: 1px solid #D0D0D0;
}

.probatum-main-title {
  font-family: 'Luxerie', sans-serif;   /* Figma: Luxerie Regular 96px */
  font-size: 96px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: 24px;
  line-height: 1;
}

.probatum-description {
  margin-top: 32px;
}

.probatum-description p {
  font-family: 'Maven Pro', sans-serif;   /* Figma: Maven Pro Regular 24px #474646 */
  font-size: 24px;
  font-weight: 400;
  color: #474646;
  margin-bottom: 12px;
  line-height: 1.35;
}

.probatum-right {
  padding-left: 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.probatum-right-item {
  font-family: 'Luxerie', sans-serif;   /* Figma: Luxerie Regular 48px #252525 */
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #252525;
  margin: 0;
}

/* ========================================
   ARTE, COLLECTA, PROBATUM - Placeholders
   ======================================== */

.arte-content-section,
.collecta-content-section,
.probatum-content-section {
  padding: 80px 40px;
  background: #F1F1F1;
  border-top: 1px solid #D0D0D0;
  text-align: center;
}

/* ── Пример паспорта объекта (страница VIA, под «Пример записи») ───────────────
   Макет повторяет PDF-паспорт (pdf/passport.html.erb). Документ англоязычный. */
.via-passport-desktop{max-width:1440px;margin:0 auto;padding:0 81px 80px;box-sizing:border-box}
.via-passport{
  box-sizing:border-box;max-width:640px;margin:8px auto 0;padding:32px 36px;
  background:#fafafa;border:1px solid #474646;color:#252525;font-family:'Maven Pro',sans-serif;
}
.via-passport *{box-sizing:border-box}
.vp-head{display:flex;align-items:center;justify-content:center;gap:12px}
.vp-mark{width:34px;height:34px;object-fit:contain}
.vp-word{font-size:20px;font-weight:400;letter-spacing:2.4px;text-transform:uppercase;color:#474646}
.vp-subhead{text-align:center;margin-top:6px;font-size:14px;color:#474646}
.vp-rule{height:1px;background:#474646;margin:14px 0}
.vp-rule--soft{background:#c2c5c9}
.vp-title{text-align:center;padding:12px 0}
.vp-title h3{margin:0;font-size:26px;font-weight:400;letter-spacing:3px;color:#474646}
.vp-title h4{margin:2px 0 0;font-size:13px;letter-spacing:1px;color:#474646;font-weight:400}
.vp-rows{display:flex;flex-direction:column}
.vp-row{display:flex;align-items:baseline;gap:12px;padding:7px 0;border-top:1px solid #d3d2d3}
.vp-row:first-child{border-top:none}
.vp-label{width:160px;flex-shrink:0;font-size:13px;color:#6b6b6b}
.vp-value{font-size:14px;color:#252525}
.vp-value.vp-big{font-size:18px}
.vp-sechead{display:flex;align-items:center;gap:16px;margin:18px 0 10px}
.vp-sechead .vp-rule{flex:1;margin:0}
.vp-sechead b{font-size:14px;font-weight:500;letter-spacing:2px;color:#474646}
.vp-object{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.vp-name{font-size:22px;color:#252525;padding-top:10px}
.vp-photo{width:120px;height:130px;flex-shrink:0;background:#e0e0e0}
.vp-master-name{text-align:center;font-size:17px;color:#252525;margin-bottom:8px}
.vp-origin{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.vp-origin-rows{flex:1}
.vp-qr{width:84px;height:84px;flex-shrink:0;display:block}
.vp-trace{display:flex;align-items:baseline;gap:8px;padding:10px 0;flex-wrap:wrap}
.vp-trace .vp-t{font-size:14px;color:#252525}
.vp-trace .vp-v{font-size:12px;color:#252525}
.vp-trace .vp-u{font-size:12px;color:#474646;word-break:break-all}
@media (max-width:767px){
  .via-passport{max-width:100%;padding:22px 18px;margin-top:4px}
  .vp-label{width:120px}
  .vp-word{font-size:17px;letter-spacing:1.6px}
  .vp-title h3{font-size:22px}
}

/* Отдельная страница примера паспорта + ссылка из мобильной версии */
.via-passport-page{max-width:680px;margin:0 auto;padding:32px 18px 64px;box-sizing:border-box}
.vpp-title{font-family:'Luxerie',sans-serif;font-weight:400;font-size:28px;line-height:1.2;color:#000;text-align:center;margin:0 0 20px}
.vpp-back{display:inline-block;margin-top:24px;font-family:'Maven Pro',sans-serif;font-size:16px;color:#474646;text-decoration:none}
.vpp-back:hover{color:#000}
/* Ссылка-кнопка «посмотреть пример паспорта» (только мобайл, в канве VIA) */
.via-passport-link{
  display:inline-block;margin-top:16px;font-family:'Maven Pro',sans-serif;font-size:16px;line-height:1.4;
  color:#474646;text-decoration:none;border-bottom:1px solid #919190;padding-bottom:2px;
}
.via-passport-link:hover{color:#000;border-color:#000}

/* Мобильная ссылка на пример паспорта — вне канвы (десктоп скрыт, там инлайн-паспорт) */
.via-passport-mlink{display:none}
@media (max-width:767px){
  .via-passport-mlink{display:block;text-align:center;padding:4px 24px 40px}
}
