/* === Sofas: превью + описание, возможность двигать изображение === */
:root {
  --bg: #fff;
  --ink: #111;
  --muted: #6b7280;
  --line: #e5e7eb;
  --accent: #23483e;   /* фірмовий зелено-вугільний */
  --radius: 14px;
  --page-pad: 50px;
}

* { box-sizing: border-box; font-family: 'Open Sans', Arial, sans-serif; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
html { scroll-behavior: smooth; }
body { padding: 0 var(--page-pad); overflow-x: hidden; }

/* a11y */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Верхняя полоса */
.top-accent-bar{
  background:rgba(35,72,62,.65);color:#fff;text-align:center;font-weight:600;font-size:14px;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:12px 0;margin-bottom:12px;
}

/* Карточка (2-колоночная) */
.sofa-card{
  position:relative;
  display:grid;
  grid-template-columns:calc(50% + 300px) calc(50% - 300px);
  align-items:center; gap:clamp(12px,2vw,24px);
  width:100vw; max-width:100vw;
  padding:clamp(6px,1.2vw,16px) var(--page-pad) clamp(6px,1.2vw,16px) 0;
  margin-left:calc(50% - 50vw - var(--page-pad));
  margin-right:calc(50% - 50vw);
  overflow:visible; /* можна рухати картинку через object-position */
}

/* расстояние между карточками */
.sofa-card + .sofa-card{ margin-top:80px; }

.sofa-card img{
  width:100%;
  height:clamp(280px,42vw,520px);
  object-fit:cover;
  object-position:50% 50%;    /* регулюй: 60% center; center 40%; і т.д. */
  display:block;
  position:relative;
  z-index:1;
  transition:object-position .3s ease;
}

.sofa-info{
  padding:0 20px; display:flex; flex-direction:column; justify-content:center;
}
.model-title{
  margin:0; font-size:22px; font-weight:800; border-bottom:3px solid var(--ink); padding-bottom:8px;
}
.sofa-info p{
  font-size:14px; line-height:1.65; color:var(--muted); margin-top:12px;
  text-align:left; max-width:480px;
}

/* Кнопка: заливка слева→направо, мягкий накат, текст белеет */
.sofa-btn{
  align-self:flex-end;
  margin-top:24px;
  padding:10px 26px;
  font:600 14px/1 'Open Sans', Arial, sans-serif;
  color:var(--ink);
  background-image:linear-gradient(90deg,#0e1a16 0%,#23483e 100%);
  background-size:0% 100%; background-repeat:no-repeat; background-position:left top;
  border:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-size .6s cubic-bezier(.45,0,.2,1), color .3s ease;
}
.sofa-btn:hover{ background-size:100% 100%; color:#fff; }
.sofa-btn span{ position:relative; }

/* --- Articles (3 колонки) --- */
.articles{ margin:120px auto 140px; width:100%; }
.article-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(240px,1fr));
  gap: clamp(40px, 4vw, 60px);
  max-width: clamp(700px, 82vw, 1200px);
  margin: 0 auto;
}
.article-card{ display:flex; flex-direction:column; min-height:100%; padding:12px 0; }
.article-card h3{
  margin:0 0 10px 0; font-size:16px; font-weight:800;
  border-bottom:1px solid var(--line); padding-bottom:8px;
}
.article-card p{
  margin:10px 0 14px 0; color:var(--muted); font-size:14px; line-height:1.6;
  max-width:52ch; text-align:left;
}
.article-link{
  margin-top:auto; align-self:flex-start; font-size:13px; font-weight:700;
  color:var(--accent); text-decoration:none; position:relative; padding:2px 0;
}
.article-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.article-link:hover::after{ transform:scaleX(1); }

/* Footer guard */
[data-include="footer"], footer, .site-footer{
  max-width:none!important; width:100%!important; margin-left:0!important; margin-right:0!important;
}

/* Адаптив */
@media (max-width:1200px){
  .sofa-card{ grid-template-columns:1fr; padding-right:var(--page-pad); }
  .sofa-card img{ height:clamp(240px,48vw,420px); }
  .sofa-info{ padding-top:8px; }
}
@media (max-width:980px){
  .article-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .article-grid{ grid-template-columns:1fr; }
}
/* === Мобильный центринг карточек .sofa-card (index + sofas) === */
@media (max-width: 900px) {
  .sofa-card {
    grid-template-columns: 1fr;
    /* на мобильном тянем блок на всю ширину окна без горизонтального скрола */
    padding: 12px 16px 24px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .sofa-card img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-position: center center;
  }

  .sofa-info {
    padding: 12px 16px 0;
    align-items: center;   /* вместо flex-end */
    text-align: center;    /* вместо right на десктопе */
  }

  .sofa-info p {
    max-width: 32rem;
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-align-last: center;
  }

  /* кнопка/ссылка под заголовком — строго по центру */
  .sofa-btn,
  .model-link {
    align-self: center;
  }
    .articles {
    margin: 40px auto 60px;
  }

  .article-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }

  .article-card {
    align-items: center;
    text-align: center;
  }

  .article-card p {
    text-align: center;
  }
}
/* === Фікс: картинка починається чітко від краю === */
body {
  padding: 0;
}

.sofa-card {
  padding: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

.sofa-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center;
}
/* === Фикс: картинка с края, но кадрирование и текст как раньше === */

/* убираем общий паддинг, чтобы не было зазора слева */
body {
  padding: 0;
}

/* возвращаем нормальные паддинги карточки, но двигаем её ровно от края */
.sofa-card {
  /* как было, чтобы текст и сетка не ломались */
  padding: clamp(6px, 1.2vw, 16px) var(--page-pad) clamp(6px, 1.2vw, 16px) 0;
  width: 100vw;
  max-width: 100vw;

  /* ключевое: тянем блок от самого левого края вьюпорта */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* оставляем старое кадрирование по высоте */
.sofa-card img {
  width: 100%;
  height: clamp(280px, 42vw, 520px);
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
/* === Мобільний режим: картинка на всю ширину екрану (SOFAS) === */
@media (max-width: 900px) {
  .sofa-card {
    grid-template-columns: 1fr;                 /* одна колонка */
    padding: 0;                                 /* без внутренних отступов у блока */
    margin-left: calc(50% - 50vw);              /* тянем секцию від краю до краю */
    margin-right: calc(50% - 50vw);
  }

  .sofa-card img {
    width: 100vw;                               /* картинка на всю ширину екрана */
    max-width: 100vw;
    height: auto;                               /* без фиксованої висоти, як фото */
    object-fit: cover;
    object-position: center center;
  }

  .sofa-info {
    padding: 16px 16px 24px;                    /* текст уже в «чистій» коробці */
    text-align: left;
    align-items: flex-start;
  }
}