/*
 * info.css — специфика страниц /o-nas/ и /proizvodstvo/
 * Подключается ПОСЛЕ showroom.css
 * Версия: v=26
 */

/* ─── Hero ─── */
.info-hero{
  padding:80px var(--px) 72px;
  background:var(--cream);
  position:relative;
}
.info-hero--image{
  padding:0;
  min-height:460px;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.info-hero-bg{
  position:absolute;inset:0;
  background:var(--slate);
  overflow:hidden;
}
.info-hero-bg img{
  width:100%;height:100%;object-fit:cover;
  opacity:.55;
}
.info-hero-grad{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,28,26,.72) 0%,rgba(30,28,26,.18) 60%,transparent 100%);
}
.info-hero-inner{
  position:relative;z-index:2;
  padding:64px var(--px) 56px;
  max-width:880px;
}
.info-hero-tag{
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(242,237,230,.65);font-weight:500;
  margin-bottom:18px;
}
.info-hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,6vw,3.4rem);
  color:var(--cream);line-height:1.12;
  margin:0 0 20px;
}
.info-hero h1 em{font-style:italic;color:#e8d8c4}
.info-hero-lead{
  font-size:clamp(1rem,2.2vw,1.15rem);
  color:rgba(242,237,230,.88);
  line-height:1.65;max-width:680px;
  margin:0;
}
/* Non-image hero */
.info-hero:not(.info-hero--image) h1{color:var(--ink)}
.info-hero:not(.info-hero--image) .info-hero-tag{color:var(--taupe)}
.info-hero:not(.info-hero--image) .info-hero-lead{color:var(--slate)}
@media(min-width:768px){
  .info-hero--image{min-height:520px}
  .info-hero-inner{padding:96px var(--px-md) 72px}
}
@media(min-width:1200px){
  .info-hero--image{min-height:580px}
  .info-hero-inner{padding:120px var(--px-lg) 96px}
}

/* ─── Sections ─── */
.info-sec{
  padding:72px var(--px);
  background:var(--cream);
}
.info-sec--cream-wrap{background:var(--cream)}
.info-sec--cream{
  background:var(--sand);
  padding:72px var(--px);
  border-top:1px solid var(--ink15);
  border-bottom:1px solid var(--ink15);
}
.info-sec--slate-wrap{background:var(--slate)}
.info-sec--slate{
  background:var(--slate);
  padding:72px var(--px);
}
.info-sec--slate .slabel{color:rgba(242,237,230,.6)}
.info-sec--slate .sec-h{color:var(--cream)}
.info-sec-head{
  max-width:760px;
  margin-bottom:48px;
}
.info-sec-lead{
  font-size:1rem;color:var(--taupe);line-height:1.7;
  margin-top:14px;
}
.info-sec--slate .info-sec-lead{color:rgba(242,237,230,.78)}
@media(min-width:768px){
  .info-sec{padding:96px var(--px-md)}
  .info-sec--cream{padding:96px var(--px-md)}
  .info-sec--slate{padding:96px var(--px-md)}
}
@media(min-width:1200px){
  .info-sec{padding:112px var(--px-lg)}
  .info-sec--cream{padding:112px var(--px-lg)}
  .info-sec--slate{padding:112px var(--px-lg)}
}

/* ─── Two-col lead + body ─── */
.info-two{
  display:grid;grid-template-columns:1fr;gap:32px;
  max-width:1280px;
}
.info-two-lead h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,4vw,2.4rem);
  color:var(--ink);line-height:1.2;
  margin:0 0 16px;
}
.info-two-body p{
  font-size:1rem;color:var(--taupe);line-height:1.7;
  margin:0 0 16px;
}
.info-two-body p:last-child{margin:0}
@media(min-width:860px){
  .info-two{grid-template-columns:1fr 1fr;gap:64px;align-items:start}
}

/* ─── Cards ─── */
.info-cards{
  display:grid;grid-template-columns:1fr;gap:16px;
  max-width:1280px;
}
.info-cards--3{grid-template-columns:1fr}
.info-cards--4{grid-template-columns:1fr}
.info-card{
  padding:28px 26px;
  background:var(--cream);
  border:1px solid var(--ink15);
}
.info-sec--slate .info-card,
.info-sec--cream .info-card{
  background:rgba(242,237,230,.06);
  border-color:rgba(242,237,230,.14);
}
.info-sec--cream .info-card{
  background:var(--cream);
  border-color:var(--ink15);
}
.info-card-num{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mauve);font-weight:500;
  margin-bottom:10px;
}
.info-sec--slate .info-card-num{color:rgba(194,156,150,.9)}
.info-card-h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.15rem,2.5vw,1.35rem);
  color:var(--ink);line-height:1.3;
  margin:0 0 12px;
}
.info-sec--slate .info-card-h{color:var(--cream)}
.info-card-body{
  font-size:.92rem;color:var(--taupe);line-height:1.65;
}
.info-sec--slate .info-card-body{color:rgba(242,237,230,.75)}
@media(min-width:640px){
  .info-cards--3{grid-template-columns:1fr 1fr}
  .info-cards--4{grid-template-columns:1fr 1fr}
}
@media(min-width:1024px){
  .info-cards--3{grid-template-columns:1fr 1fr 1fr}
  .info-cards--4{grid-template-columns:repeat(4,1fr)}
}

/* ─── Gallery ─── */
.info-gallery{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  max-width:1280px;
}
.info-gallery--3{grid-template-columns:1fr 1fr}
.info-gallery a,
.info-gallery div{display:block}
.info-gallery img{
  width:100%;height:220px;object-fit:cover;
  display:block;
  transition:opacity .25s ease;
}
.info-gallery img:hover{opacity:.88}
@media(min-width:768px){
  .info-gallery--3{grid-template-columns:1fr 1fr 1fr}
  .info-gallery img{height:280px}
}

/* ─── Feature callout ─── */
.info-feature{
  max-width:800px;
  padding:40px 36px;
  background:var(--sand);
  border:1px solid var(--ink15);
  border-left:3px solid var(--mauve);
}
.info-feature-tag{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mauve);font-weight:500;
  margin-bottom:14px;
}
.info-feature h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,3vw,1.7rem);
  color:var(--ink);line-height:1.25;
  margin:0 0 14px;
}
.info-feature p{
  font-size:1rem;color:var(--taupe);line-height:1.7;
  margin:0 0 22px;
}
.info-feature-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ─── Steps ─── */
.info-steps{
  display:grid;grid-template-columns:1fr;gap:0;
  max-width:1280px;
  border:1px solid var(--ink15);
}
.info-step{
  display:grid;grid-template-columns:64px 1fr;gap:0;
  border-bottom:1px solid var(--ink15);
}
.info-step:last-child{border-bottom:none}
.info-step-num{
  padding:24px 20px;
  font-family:var(--serif);font-weight:300;
  font-size:1.4rem;color:var(--mauve);
  border-right:1px solid var(--ink15);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:28px;
}
.info-step-content{
  padding:24px 28px;
}
.info-step-content h3{
  font-family:var(--serif);font-weight:400;
  font-size:1.1rem;color:var(--ink);
  margin:0 0 8px;line-height:1.3;
}
.info-step-content p{
  font-size:.92rem;color:var(--taupe);line-height:1.65;
  margin:0;
}
@media(min-width:768px){
  .info-steps{grid-template-columns:1fr 1fr}
  .info-step{border-right:1px solid var(--ink15)}
  .info-step:nth-child(2n){border-right:none}
}
@media(min-width:1024px){
  .info-steps{grid-template-columns:1fr 1fr 1fr}
  .info-step:nth-child(2n){border-right:1px solid var(--ink15)}
  .info-step:nth-child(3n){border-right:none}
}

/* ─── FAQ ─── */
.info-faq{
  max-width:860px;
  border-top:1px solid var(--ink15);
}
.info-faq details{
  border-bottom:1px solid var(--ink15);
}
.info-faq summary{
  padding:20px 0;
  font-family:var(--ui);font-weight:500;font-size:1rem;
  color:var(--ink);line-height:1.4;
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;
}
.info-faq summary::-webkit-details-marker{display:none}
.info-faq summary::after{
  content:'+';
  font-size:1.4rem;font-weight:300;color:var(--mauve);
  flex-shrink:0;transition:transform .2s ease;
}
.info-faq details[open] summary::after{
  transform:rotate(45deg);
}
.info-faq-body{
  padding:0 0 24px;
}
.info-faq-body p{
  font-size:.95rem;color:var(--taupe);line-height:1.7;
  margin:0 0 12px;
}
.info-faq-body p:last-child{margin:0}

/* ─── Contact note ─── */
.info-contact-note{
  font-size:.9rem;color:var(--taupe);line-height:1.65;
  font-style:italic;
  padding-top:16px;
  border-top:1px solid var(--ink15);
}