/*
 * Страница «Системы из стального профиля» — стили скоупированы под .steel-profile-page
 * Исходник: data/page/steel-profile-layout/index.html
 * Шапка и подвал предоставляются base.html / header.css / site-footer.css
 */

.steel-profile-page {
  --blue: #00347c;
  --ink: #062252;
  --line: #bcc9d8;
  color: var(--ink);
  font-family: var(--font-sans);
  background-color: #fff;
  background-image:
    linear-gradient(rgba(0, 52, 124, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 52, 124, .055) 1px, transparent 1px);
  background-size: 32px 32px;
}

.steel-profile-page *,
.steel-profile-page *::before,
.steel-profile-page *::after { box-sizing: border-box; }

.steel-profile-page a { text-decoration: none; color: inherit; }
.steel-profile-page img { display: block; width: 100%; height: 100%; object-fit: cover; }

.steel-profile-page .wrap { width: min(calc(100% - 88px), 1396px); margin: auto; }

.steel-profile-page .icon {
  width: 31px; height: 31px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.steel-profile-page .title { margin: 0; font: 400 var(--text-md) var(--font-sans); }
.steel-profile-page .title:after {
  content: ""; display: inline-block; width: 18px; height: 1px;
  margin: 0 0 4px 12px; background: var(--blue);
}

/* ---- Hero --------------------------------------------------------------- */
.steel-profile-page .hero { height: 402px; position: relative; overflow: hidden; }
.steel-profile-page .hero-photo {
  position: absolute; inset: 0 0 0 51.2%;
  overflow: hidden;
  background: #fff;
}
.steel-profile-page .hero-photo picture,
.steel-profile-page .hero-photo__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.steel-profile-page .hero-photo:before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(130deg, rgba(255, 255, 255, .9) 0 11%, transparent 11.2%);
}
.steel-profile-page .hero-copy { position: relative; z-index: 2; padding-top: 28px; width: 590px; }
.steel-profile-page .crumbs { font-size: var(--text-caption); font-weight: 600; margin-bottom: 20px; }
.steel-profile-page .hero h1 { margin: 0; font: var(--fw-display) clamp(36px, 4.5vw, 48px)/.98 var(--font-display); letter-spacing: -.025em; }
.steel-profile-page .rule { width: 27px; height: 2px; background: var(--blue); margin: 19px 0; }
.steel-profile-page .hero-lead { font-size: var(--text-caption); line-height: 1.35; text-transform: uppercase; font-weight: 800; }
.steel-profile-page .hero-features { display: flex; gap: 27px; margin-top: 27px; }
.steel-profile-page .hero-feature { display: flex; gap: 8px; align-items: center; font-size: var(--text-caption); line-height: 1.25; }
.steel-profile-page .hero-feature .icon { color: var(--blue); }
.steel-profile-page .actions { display: flex; align-items: center; gap: 28px; margin-top: 25px; }
.steel-profile-page .btn {
  height: 38px; padding: 0 22px; border: 1px solid var(--blue); background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-caption); font-weight: 700;
}
.steel-profile-page .download { font-size: var(--text-caption); color: var(--blue); }

/* ---- Применение + типы -------------------------------------------------- */
.steel-profile-page .catalog-row {
  display: grid; grid-template-columns: 61.4% 38.6%;
  background: rgba(255, 255, 255, .92);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.steel-profile-page .use,
.steel-profile-page .types { padding: 18px 44px 16px; }
.steel-profile-page .types { border-left: 1px solid var(--line); padding-left: 28px; }
.steel-profile-page .use-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px; margin-top: 13px; }
.steel-profile-page .use-card img { height: 110px; }
.steel-profile-page .use-card h3 { margin: 9px 0 5px; font-size: var(--text-caption); }
.steel-profile-page .use-card p { margin: 0; font-size: var(--text-caption); line-height: 1.35; }
.steel-profile-page .type-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 22px; }
.steel-profile-page .type { text-align: center; font-size: var(--text-caption); line-height: 1.25; }
.steel-profile-page .type svg { width: 100%; height: 94px; color: #315e99; fill: none; stroke: currentColor; stroke-width: 1.2; }
.steel-profile-page .type span { display: block; margin-top: 9px; }

/* ---- Профили + проекты -------------------------------------------------- */
.steel-profile-page .lower { display: grid; grid-template-columns: 53% 47%; background: rgba(255, 255, 255, .93); }
.steel-profile-page .profiles,
.steel-profile-page .projects { padding: 18px 44px 16px; min-height: 205px; }
.steel-profile-page .projects { border-left: 1px solid var(--line); padding-left: 20px; }
.steel-profile-page .profile-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 22px; margin-top: 16px; }
.steel-profile-page .profile { font-size: var(--text-caption); line-height: 1.25; }
.steel-profile-page .profile-visual {
  height: 80px; border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 9px; background: #fafafa;
}
.steel-profile-page .profile-visual svg { width: 90%; height: 90%; color: #222; fill: none; stroke: currentColor; }
.steel-profile-page .swatch { width: 100%; height: 80px; margin-bottom: 9px; border: 1px solid #aaa; }
.steel-profile-page .profile strong { display: block; font-size: var(--text-caption); margin-bottom: 4px; }
.steel-profile-page .project-head { display: flex; justify-content: space-between; }
.steel-profile-page .project-head a { font-size: var(--text-caption); }
.steel-profile-page .project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 14px; }
.steel-profile-page .project img { height: 97px; }
.steel-profile-page .project h3 { margin: 9px 0 0; font: 400 var(--text-caption)/1.25 var(--font-sans); }

/* ---- CTA ---------------------------------------------------------------- */
.steel-profile-page .cta {
  min-height: 152px; background-color: #003277;
  background-image:
    linear-gradient(rgba(160, 203, 240, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 203, 240, .13) 1px, transparent 1px);
  background-size: 48px 48px; color: white;
  display: grid; grid-template-columns: 30% 30% 40%; position: relative; overflow: hidden;
}
.steel-profile-page .cta:before,
.steel-profile-page .cta:after {
  content: ""; position: absolute; border: 1px solid rgba(165, 204, 239, .22);
  width: 330px; height: 170px; transform: rotate(-13deg);
}
.steel-profile-page .cta:before {
  left: -30px; top: 48px;
  box-shadow: 30px -17px 0 -1px #003277, 30px -17px rgba(165, 204, 239, .16);
}
.steel-profile-page .cta:after {
  right: -35px; top: 50px; transform: rotate(-25deg);
  box-shadow: 38px -20px 0 -1px #003277, 38px -20px rgba(165, 204, 239, .18);
}
.steel-profile-page .cta-intro,
.steel-profile-page .cta-benefits,
.steel-profile-page .form { position: relative; z-index: 2; }
.steel-profile-page .cta-intro { padding: 25px 50px; }
.steel-profile-page .cta-intro h2 { margin: 0; font: 400 clamp(22px, 3vw, 28px)/1.05 var(--font-display); }
.steel-profile-page .cta-intro p { font-size: var(--text-caption); line-height: 1.4; margin-top: 16px; }
.steel-profile-page .cta-benefits {
  background: rgba(255, 255, 255, .97); color: var(--ink);
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;
}
.steel-profile-page .cta-benefit { text-align: center; font: 400 var(--text-caption)/1.35 var(--font-sans); }
.steel-profile-page .cta-benefit .icon { display: block; margin: 0 auto 8px; width: 38px; height: 38px; }
.steel-profile-page .form { padding: 31px 35px; }
.steel-profile-page .fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.steel-profile-page .fields input { min-width: 0; height: 29px; border: 0; padding: 0 12px; font-size: var(--text-caption); }
.steel-profile-page .submit {
  margin-top: 13px; width: 176px; height: 37px; border: 1px solid white;
  background: transparent; color: white; font-size: var(--text-caption); font-weight: 700;
}
.steel-profile-page .consent { font-size: var(--text-caption); margin-top: 10px; }

/* ---- Адаптив ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .steel-profile-page .hero-copy { width: 520px; }
  .steel-profile-page .hero h1 { font-size: clamp(36px, 4.5vw, 48px); }
  .steel-profile-page .use,
  .steel-profile-page .types,
  .steel-profile-page .profiles { padding-left: 25px; padding-right: 25px; }
  .steel-profile-page .use-grid { gap: 12px; }
  .steel-profile-page .profile-grid { gap: 12px; }
  .steel-profile-page .cta { grid-template-columns: 30% 32% 38%; }
  .steel-profile-page .cta-intro { padding-left: 30px; }
}

@media (max-width: 900px) {
  .steel-profile-page .hero { height: 520px; }
  .steel-profile-page .hero-photo { left: 20%; opacity: .55; }
  .steel-profile-page .hero:after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .9) 46%, transparent);
  }
  .steel-profile-page .hero-copy { z-index: 3; }
  .steel-profile-page .catalog-row,
  .steel-profile-page .lower { grid-template-columns: 1fr; }
  .steel-profile-page .types,
  .steel-profile-page .projects { border-left: 0; border-top: 1px solid var(--line); }
  .steel-profile-page .use-grid { gap: 18px; }
  .steel-profile-page .profiles,
  .steel-profile-page .projects { padding-left: 30px; padding-right: 30px; }
  .steel-profile-page .cta { grid-template-columns: 1fr 1fr; }
  .steel-profile-page .cta-intro { min-height: 145px; }
  .steel-profile-page .form { grid-column: 1/-1; }
  .steel-profile-page .profile-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 650px) {
  .steel-profile-page .hero { height: 610px; }
  .steel-profile-page .hero-photo { left: 0; opacity: .3; }
  .steel-profile-page .hero:after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .83) 66%, transparent);
  }
  .steel-profile-page .hero-copy { width: 100%; padding-top: 22px; }
  .steel-profile-page .hero h1 { font-size: clamp(36px, 4.5vw, 48px); }
  .steel-profile-page .hero-features { display: grid; grid-template-columns: 1fr 1fr; }
  .steel-profile-page .actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .steel-profile-page .use,
  .steel-profile-page .types { padding: 20px 16px; }
  .steel-profile-page .use-grid { grid-template-columns: 1fr 1fr; }
  .steel-profile-page .type-grid { grid-template-columns: repeat(2, 1fr); }
  .steel-profile-page .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .steel-profile-page .project-grid { grid-template-columns: 1fr 1fr; }
  .steel-profile-page .cta { grid-template-columns: 1fr; }
  .steel-profile-page .cta-benefits { min-height: 145px; }
  .steel-profile-page .form { grid-column: auto; padding: 25px 20px; }
  .steel-profile-page .fields { grid-template-columns: 1fr; }
  .steel-profile-page .fields input { height: 36px; }
  .steel-profile-page .submit { width: 100%; }
}

@media (max-width: 390px) {
  .steel-profile-page .hero-features { grid-template-columns: 1fr; }
  .steel-profile-page .hero-feature:last-child { display: none; }
  .steel-profile-page .use-grid,
  .steel-profile-page .project-grid { grid-template-columns: 1fr; }
  .steel-profile-page .cta-benefits { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .steel-profile-page .profile-grid { gap: 16px; }
}