/* ============================================================
   Масла.сайт — pages2.css (brand, maps hub/transport/equipment,
   map detail, analogs). Light, modern, on-brand.
   ============================================================ */

/* ---------------- BRAND ---------------- */
.brand-hero { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; padding: 22px 0 8px; }
.brand-logo-box { aspect-ratio: 1.4/1; border-radius: var(--r-lg); border: var(--hairline); background: linear-gradient(160deg, #fff, var(--soft)); display: flex; align-items: center; justify-content: center; }
.brand-logo-box .nm { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: 0.04em; color: var(--ink); }
.brand-hero .claim { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; line-height: 1.1; color: var(--masla-navy); margin: 4px 0 16px; }
.brand-hero .claim em { font-style: normal; color: var(--cyan); }
.brand-hero p { font-size: 15px; line-height: 1.6; color: var(--neutral-500); margin-bottom: 12px; max-width: 680px; }
.brand-hero .acts { display: flex; gap: 12px; margin-top: 20px; }

.brand-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.brand-cat { border: var(--hairline); border-radius: var(--r-md); padding: 22px; display: flex; gap: 14px; align-items: flex-start; transition: box-shadow 160ms, transform 150ms, border-color 160ms; }
.brand-cat:hover { box-shadow: var(--el-2); transform: translateY(-2px); border-color: transparent; }
.brand-cat .ic { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--soft); color: var(--masla-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 160ms, color 160ms; }
.brand-cat:hover .ic { background: var(--cyan-50); color: var(--cyan-700); }
.brand-cat .nm { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--masla-navy); margin-bottom: 4px; }
.brand-cat .d { font-size: 13px; color: var(--neutral-500); line-height: 1.45; }

/* ---------------- MAPS HUB & landings ---------------- */
.maps-split { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; padding-top: 8px; }
.maps-intro h2 { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; color: var(--masla-navy); margin-bottom: 14px; }
.maps-intro p { font-size: 14.5px; color: var(--neutral-500); line-height: 1.55; margin-bottom: 22px; }
.maps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.map-cat {
  position: relative; border: var(--hairline); border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column; min-height: 150px; padding: 22px; background: #fff;
  transition: box-shadow 170ms, transform 150ms, border-color 170ms;
}
.map-cat:hover { box-shadow: var(--el-3); transform: translateY(-2px); border-color: transparent; }
.map-cat .ic { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--soft); color: var(--masla-navy); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: background 160ms, color 160ms; }
.map-cat:hover .ic { background: var(--cyan-50); color: var(--cyan-700); }
.map-cat .nm { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--masla-navy); margin-bottom: 5px; }
.map-cat .d { font-size: 13px; color: var(--neutral-500); line-height: 1.45; margin-bottom: 14px; }
.map-cat .ct { margin-top: auto; font-size: 12.5px; color: var(--neutral-400); display: flex; align-items: center; justify-content: space-between; }
.map-cat .ct b { color: var(--masla-navy); font-weight: 700; }
.map-cat .go { color: var(--neutral-300); transition: transform 150ms, color 150ms; }
.map-cat:hover .go { color: var(--cyan); transform: translateX(2px); }

/* equipment grouped maps */
.eq-section { margin-top: 8px; }
.eq-section + .eq-section { margin-top: 28px; }
.eq-cat-head { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.015em; color: var(--masla-navy); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.eq-cat-head .tag { font-size: 12px; font-weight: 500; color: var(--neutral-400); }
.eq-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.eq-group { border: var(--hairline); border-radius: var(--r-md); padding: 20px 22px; }
.eq-group .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: var(--hairline); }
.eq-group .brand .logo { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--masla-navy); filter: grayscale(1); }
.eq-group .brand .cnt { margin-left: auto; font-size: 12px; color: var(--neutral-400); }
.eq-group ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.eq-group li a { display: block; font-size: 13.5px; color: var(--neutral-700); padding: 6px 0; transition: color 120ms; }
.eq-group li a:hover { color: var(--cyan-700); }
.eq-group .more { margin-top: 10px; }

/* ---------------- MAP DETAIL ---------------- */
.md-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; padding-top: 10px; }
.md-photo { border-radius: var(--r-lg); overflow: hidden; border: var(--hairline); background: linear-gradient(160deg, #fff, var(--soft)); min-height: 380px; display: flex; align-items: center; justify-content: center; position: relative; }
.md-photo .ph-ic { color: var(--neutral-300); }
.md-photo .badge-pill { position: absolute; top: 16px; left: 16px; }
.md-desc p { font-size: 14.5px; line-height: 1.6; color: var(--neutral-700); margin-bottom: 14px; }

.md-table-sec { padding-top: 44px; }
.md-table { width: 100%; border-collapse: collapse; border: var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.md-table thead th { background: var(--soft); text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--neutral-500); padding: 14px 18px; }
.md-table tbody tr { border-top: var(--hairline); transition: background 120ms; }
.md-table tbody tr:hover { background: var(--soft); }
.md-table td { padding: 16px 18px; font-size: 14px; vertical-align: top; }
.md-table .node { font-weight: 600; color: var(--masla-navy); width: 24%; }
.md-table .prod a { color: var(--cyan-700); font-weight: 500; }
.md-table .prod a:hover { color: var(--cyan-900); }
.md-table .prod .sku { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--neutral-400); margin-top: 3px; }
.md-table .period { width: 22%; color: var(--masla-navy); font-weight: 600; white-space: nowrap; }
.md-table .add-cell { width: 130px; text-align: right; }

/* ---------------- ANALOGS ---------------- */
.an-intro { font-size: 15px; line-height: 1.6; color: var(--neutral-500); max-width: 880px; margin-top: 14px; }
.an-toolbar { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; }
.an-toolbar .spacer { flex: 1; }

.an-compare { display: grid; grid-template-columns: 200px 1fr 1fr; border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.an-col-head { padding: 22px; border-bottom: var(--hairline); }
.an-col-head.label { background: var(--soft); }
.an-col-head .role { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); margin-bottom: 14px; }
.an-col-head .role.orig { background: var(--soft-2); color: var(--neutral-500); }
.an-col-head .role.rf { background: var(--success-bg); color: var(--success); }
.an-col-head .pack-wrap { height: 120px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 14px; }
.an-col-head .pack-wrap .pdrum { width: 50px; height: 104px; margin: 0; }
.an-col-head .nm { font-size: 14.5px; font-weight: 600; color: var(--masla-navy); line-height: 1.35; min-height: 40px; }
.an-col-head .nm:hover { color: var(--cyan-700); }
.an-col-head .price { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--masla-navy); margin: 12px 0 4px; }
.an-col-head .price.muted { color: var(--neutral-400); font-size: 16px; }
.an-col-head .nds { font-size: 11px; color: var(--neutral-400); }
.an-col-head .stk { display: inline-flex; margin-top: 12px; }
.an-col-head .btn { width: 100%; margin-top: 16px; }
.an-label-cell { background: var(--soft); padding: 22px; display: flex; align-items: flex-end; }
.an-label-cell .t { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--masla-navy); }

.an-row { display: contents; }
.an-row .k { background: var(--soft); padding: 13px 22px; font-size: 13.5px; color: var(--neutral-500); border-top: var(--hairline); display: flex; align-items: center; }
.an-row .v { padding: 13px 22px; font-size: 14px; color: var(--masla-navy); font-weight: 600; border-top: var(--hairline); border-left: var(--hairline); display: flex; align-items: center; }
.an-row .v.best { color: var(--success); }
.an-desc-row .k { background: var(--soft); padding: 16px 22px; font-size: 13.5px; color: var(--neutral-500); border-top: var(--hairline); }
.an-desc-row .v { padding: 16px 22px; font-size: 13px; color: var(--neutral-500); line-height: 1.5; border-top: var(--hairline); border-left: var(--hairline); }

@media (max-width: 1024px) {
  .brand-hero, .maps-split, .md-top { grid-template-columns: 1fr; }
  .brand-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .maps-grid, .eq-groups, .brand-cats { grid-template-columns: 1fr; }
  .eq-group ul { grid-template-columns: 1fr; }
  .an-compare { grid-template-columns: 140px 1fr 1fr; }
  .md-table .add-cell { display: none; }
}
@media (max-width: 600px) {
  .an-compare { grid-template-columns: 1fr; display: block; }
  .an-compare .an-col-head.label { display: none; }
  .an-row .k, .an-row .v { border-left: 0; }
}