/* GKL • оболочка «ГКЛ для коммерческих объектов»: масштаб, инженерность, монтаж.
   Графит, металл, контровой свет, крупная типографика, песочный акцент системы СЕРГАЛ.
   Лайм (--sg-tech) — редкий технологический сигнал (одна лазерная линия разметки), не на кнопках/ссылках/нумерации.
   Все правила ограничены [data-direction="commercial-gkl"]. */

[data-direction="commercial-gkl"] {
  --bg: var(--sg-graphite);
  --surface: #171a1e;
  --surface-2: #1c2025;
  --ink: #eef0f3;
  --ink-2: #9aa3ae;
  --line: #2c3138;
  --accent: var(--sg-sand);
  --accent-ink: var(--sg-graphite);
  --accent-soft: color-mix(in srgb, var(--sg-graphite) 70%, var(--sg-sand) 30%);
  --header-bg: var(--sg-graphite);
  --header-ink: #eef0f3;
  --header-ink-2: #9aa3ae;
  --header-line: #23272d;
  --focus: var(--sg-sand);
  --radius: 4px;
  --mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
}
[data-direction="commercial-gkl"] .b-btn { border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; font-size: .86rem; }
[data-direction="commercial-gkl"] .mono { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- Первый экран: заголовок во всю ширину → панорама → полоса действий ---------- */
[data-direction="commercial-gkl"] .cg-hero { position: relative; padding-top: clamp(22px, 3vw, 36px); overflow: hidden; }
[data-direction="commercial-gkl"] .cg-hero .subnav { color: var(--ink-2); font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: clamp(22px, 3.5vw, 40px); }
[data-direction="commercial-gkl"] .cg-hero .subnav a { line-height: 1.25; }
@media (min-width: 1101px) {
  [data-direction="commercial-gkl"] .cg-hero > .wrap:first-child {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(30px, 3.5vw, 56px);
    align-items: start;
  }
  [data-direction="commercial-gkl"] .cg-hero .subnav {
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    margin: 0;
  }
  [data-direction="commercial-gkl"] .cg-hero .subnav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 10px 8px 14px;
    border-left: 2px solid var(--line);
    border-bottom: 0;
  }
  [data-direction="commercial-gkl"] .cg-hero .subnav a:hover,
  [data-direction="commercial-gkl"] .cg-hero .subnav a:focus-visible {
    color: var(--ink);
    border-left-color: var(--accent);
  }
  [data-direction="commercial-gkl"] .cg-hero > .wrap:first-child > .mono,
  [data-direction="commercial-gkl"] .cg-hero h1 { grid-column: 2; }
}
[data-direction="commercial-gkl"] .cg-hero h1 {
  font-size: clamp(2rem, 3.7vw, 3.5rem); font-weight: 850; line-height: .96; letter-spacing: -0.035em;
  text-transform: uppercase; margin: 10px 0 0; position: relative; z-index: 2;
}
/* выделение в заголовке — сталью, а не акцентом: лайм оставлен для кнопок и интерактива */
[data-direction="commercial-gkl"] .cg-hero h1 em { font-style: normal; color: #aab6c4; }
@media (max-width: 640px) { [data-direction="commercial-gkl"] .cg-hero h1 { line-height: 1.02; } }
@media (max-width: 400px) { [data-direction="commercial-gkl"] .cg-hero h1 { font-size: 2rem; } }
/* на узких экранах кнопка заявки не должна оказаться под декоративной панорамой */
@media (max-width: 900px) {
  [data-direction="commercial-gkl"] .cg-hero { display: flex; flex-direction: column; }
  [data-direction="commercial-gkl"] .cg-bar { order: 2; padding-top: 18px; }
  [data-direction="commercial-gkl"] .cg-pano { order: 3; height: clamp(220px, 36vh, 320px); margin-top: 0; }
}

[data-direction="commercial-gkl"] .cg-pano {
  position: relative; height: clamp(260px, 44vh, 470px); margin-top: calc(clamp(10px, 2vw, 26px) * -1);
  background: radial-gradient(70% 90% at 78% 8%, #2b333d 0%, #0f1113 62%);
  border-top: 1px solid #1d2126; border-bottom: 1px solid #1d2126;
  view-transition-name: art-gkl;
}
[data-direction="commercial-gkl"] .cg-pano svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  [data-direction="commercial-gkl"] .cg-pano { height: clamp(220px, 36vh, 320px); margin-top: 0; }
}
[data-direction="commercial-gkl"] .cg-pano__note {
  position: absolute; right: var(--gutter); bottom: 12px; z-index: 2; max-width: 420px; text-align: right;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: #7f8894; text-transform: uppercase;
}
@media (max-width: 640px) { [data-direction="commercial-gkl"] .cg-pano__note { left: var(--gutter); text-align: left; } }

@media (prefers-reduced-motion: no-preference) {
  [data-direction="commercial-gkl"] .cg-stud { stroke-dasharray: 420; stroke-dashoffset: 420; animation: cg-draw 1.1s cubic-bezier(.22,1,.36,1) forwards; }
  [data-direction="commercial-gkl"] .cg-sheet { animation: cg-sheet 1s cubic-bezier(.22,1,.36,1) both; }
  [data-direction="commercial-gkl"] .cg-laser { animation: cg-laser 1.4s ease .2s both; }
}
@keyframes cg-draw { to { stroke-dashoffset: 0; } }
@keyframes cg-sheet { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes cg-laser { from { stroke-dashoffset: 1600; opacity: 0; } 20% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }

[data-direction="commercial-gkl"] .cg-bar {
  display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 20px 40px; align-items: center;
  /* только вертикальные отступы: боковые поля даёт .wrap */
  padding-block: clamp(20px, 3vw, 30px) clamp(28px, 4vw, 44px);
}
@media (max-width: 900px) { [data-direction="commercial-gkl"] .cg-bar { grid-template-columns: 1fr; } }
[data-direction="commercial-gkl"] .cg-bar__lead { color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.12rem); max-width: 60ch; }
[data-direction="commercial-gkl"] .cg-bar__actions { display: flex; flex-wrap: wrap; gap: 10px; }
[data-direction="commercial-gkl"] .cg-specs { display: flex; flex-wrap: wrap; gap: 8px 28px; grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); }
[data-direction="commercial-gkl"] .cg-specs span::before { content: "■ "; color: #6a7582; }

/* ---------- Типы объектов: чертёжная сетка ---------- */
[data-direction="commercial-gkl"] .cg-section { padding: clamp(56px, 8vw, 100px) 0; border-top: 1px solid var(--line); }
[data-direction="commercial-gkl"] .cg-section--grid {
  background-color: #111316;
  background-image: linear-gradient(#1b1f24 1px, transparent 1px), linear-gradient(90deg, #1b1f24 1px, transparent 1px);
  background-size: 48px 48px;
}
[data-direction="commercial-gkl"] .cg-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 30px; margin-bottom: 30px; }
[data-direction="commercial-gkl"] .cg-section h2 { font-size: clamp(1.8rem, 4vw, 3.3rem); font-weight: 850; text-transform: uppercase; letter-spacing: -0.02em; line-height: .98; }

[data-direction="commercial-gkl"] .cg-objects { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); }
@media (max-width: 1000px) { [data-direction="commercial-gkl"] .cg-objects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { [data-direction="commercial-gkl"] .cg-objects { grid-template-columns: 1fr; } }
[data-direction="commercial-gkl"] .cg-obj { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(15, 17, 19, .82); min-height: 230px; display: flex; flex-direction: column; }
[data-direction="commercial-gkl"] .cg-obj svg { width: 100%; height: 110px; margin-bottom: 14px; }
[data-direction="commercial-gkl"] .cg-obj h3 { font-size: 1rem; font-weight: 750; text-transform: uppercase; letter-spacing: .02em; margin: 6px 0; }
[data-direction="commercial-gkl"] .cg-obj p { color: var(--ink-2); font-size: .88rem; }
[data-direction="commercial-gkl"] .cg-audience { margin-top: 26px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 24px; }
@media (max-width: 640px) { [data-direction="commercial-gkl"] .cg-audience { grid-template-columns: 1fr; } }

/* ---------- Конструкции: спецификация ---------- */
[data-direction="commercial-gkl"] .cg-spec { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 32px; }
[data-direction="commercial-gkl"] .cg-spec li { break-inside: avoid; display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
[data-direction="commercial-gkl"] .cg-spec li span:first-child { font-family: var(--mono); color: var(--accent); font-size: .78rem; padding-top: 3px; }
[data-direction="commercial-gkl"] .cg-note { margin-top: 20px; color: var(--ink-2); font-size: .9rem; }

/* ---------- Проект и объёмы ---------- */
[data-direction="commercial-gkl"] .cg-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
@media (max-width: 900px) { [data-direction="commercial-gkl"] .cg-cols { grid-template-columns: 1fr; } }
[data-direction="commercial-gkl"] .cg-col { padding: 26px; border-right: 1px solid var(--line); }
[data-direction="commercial-gkl"] .cg-col:last-child { border-right: 0; }
[data-direction="commercial-gkl"] .cg-col h3 { font-size: 1.15rem; font-weight: 750; margin: 10px 0 8px; }
[data-direction="commercial-gkl"] .cg-col p { color: var(--ink-2); }

/* ---------- Этапы: линия процесса ---------- */
[data-direction="commercial-gkl"] .cg-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: cg; }
@media (max-width: 900px) { [data-direction="commercial-gkl"] .cg-flow { grid-template-columns: 1fr; } }
[data-direction="commercial-gkl"] .cg-flow li { counter-increment: cg; padding: 22px 18px 22px 0; border-top: 3px solid var(--line); position: relative; transition: border-color .6s ease; }
[data-direction="commercial-gkl"] .cg-flow li.is-in { border-top-color: var(--accent); }
[data-direction="commercial-gkl"] .cg-flow li::before { content: counter(cg, decimal-leading-zero); font-family: var(--mono); color: var(--accent); font-size: .8rem; }
[data-direction="commercial-gkl"] .cg-flow svg { display: block; width: 100%; max-width: 180px; height: 90px; margin: 12px 0; }
[data-direction="commercial-gkl"] .cg-flow h3 { font-size: 1.05rem; font-weight: 750; text-transform: uppercase; margin-bottom: 6px; }
[data-direction="commercial-gkl"] .cg-flow p { color: var(--ink-2); font-size: .9rem; }

/* ---------- Реальные объекты ---------- */
[data-direction="commercial-gkl"] .cg-cases { display: grid; gap: clamp(28px, 5vw, 56px); }
[data-direction="commercial-gkl"] .cg-case { border: 1px solid var(--line); background: #13161a; }
[data-direction="commercial-gkl"] .cg-case__gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(220px, .7fr);
  gap: 1px;
  background: var(--line);
  overflow: hidden;
}
[data-direction="commercial-gkl"] .cg-case__photo { width: 100%; height: 100%; min-height: 260px; max-height: 620px; object-fit: cover; background: #0d0f12; }
[data-direction="commercial-gkl"] .cg-case__photo--lead { aspect-ratio: 8 / 5; }
[data-direction="commercial-gkl"] .cg-case__photo--detail { object-position: center; }
[data-direction="commercial-gkl"] .cg-case__gallery--three { grid-template-columns: minmax(0, 1.45fr) minmax(190px, .58fr) minmax(190px, .72fr); }
[data-direction="commercial-gkl"] .cg-case__body { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(260px, 1fr); gap: 20px 48px; padding: clamp(22px, 4vw, 42px); }
[data-direction="commercial-gkl"] .cg-case__heading .mono { margin-bottom: 10px; color: var(--accent); }
[data-direction="commercial-gkl"] .cg-case__heading h3 { font-size: clamp(1.45rem, 3vw, 2.4rem); line-height: 1.02; letter-spacing: -.025em; }
[data-direction="commercial-gkl"] .cg-case__work { align-self: end; color: var(--ink-2); font-size: clamp(1rem, 1.6vw, 1.22rem); max-width: 48ch; }
[data-direction="commercial-gkl"] .cg-case__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1 / -1; margin: 4px 0 0; border-top: 1px solid var(--line); }
[data-direction="commercial-gkl"] .cg-case__facts div { padding: 20px 20px 0 0; }
[data-direction="commercial-gkl"] .cg-case__facts dt { color: var(--ink-2); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
[data-direction="commercial-gkl"] .cg-case__facts dd { margin: 5px 0 0; font-size: clamp(1.25rem, 2.4vw, 1.8rem); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  [data-direction="commercial-gkl"] .cg-case__gallery,
  [data-direction="commercial-gkl"] .cg-case__gallery--three { grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr); }
  [data-direction="commercial-gkl"] .cg-case__gallery--three .cg-case__photo--extra { display: none; }
  [data-direction="commercial-gkl"] .cg-case__body { grid-template-columns: 1fr; }
  [data-direction="commercial-gkl"] .cg-case__facts { grid-column: 1; }
}
@media (max-width: 560px) {
  [data-direction="commercial-gkl"] .cg-case__gallery,
  [data-direction="commercial-gkl"] .cg-case__gallery--three { grid-template-columns: 1fr; }
  [data-direction="commercial-gkl"] .cg-case__photo { min-height: 0; max-height: none; }
  [data-direction="commercial-gkl"] .cg-case__photo--detail,
  [data-direction="commercial-gkl"] .cg-case__photo--extra { display: none; }
  [data-direction="commercial-gkl"] .cg-case__facts { grid-template-columns: 1fr; }
  [data-direction="commercial-gkl"] .cg-case__facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
  [data-direction="commercial-gkl"] .cg-case__facts dd { text-align: right; }
}

/* ---------- Форма ---------- */
[data-direction="commercial-gkl"] .cg-form { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px 56px; }
@media (max-width: 900px) { [data-direction="commercial-gkl"] .cg-form { grid-template-columns: 1fr; } }
[data-direction="commercial-gkl"] .f-input { background: #1a1d22; border-color: #343a42; border-radius: 3px; }
[data-direction="commercial-gkl"] .f-choice span { background: #1a1d22; border-color: #343a42; border-radius: 3px; }
[data-direction="commercial-gkl"] .f-demo, [data-direction="commercial-gkl"] .f-status[data-kind="demo"] { background: #2a2410; color: #ffe6a6; border-color: #6c5b18; }
[data-direction="commercial-gkl"] .f-status[data-kind="error"] { background: #2a1212; color: #ffbcbc; border-color: #6d2b2b; }