/* ОБЪЕКТ — блок «Наши услуги» (objs-*): 5 карточек-ссылок.
   Изолирован от main.css: селекторы из двух классов (.objs .objs-x). Раскладка — от ширины места вставки
   (container queries; пороги чуть ниже 768/1024 — ширина блока меньше экрана на полосу прокрутки):
     до 767px — одна колонка 01→05, поля 16px (до 390px) / 20px, промежутки 16px;
     768–1023px — две колонки, пятая карточка на всю ширину;
     от 1024px — 6 колонок: 01–02 по 3, 03–05 по 2.
   Нижняя полоса прижата к низу карточки — полосы в ряду на одной линии; высота карточек не фиксируется.
   Hover (только мышь): фото чуть увеличивается внутри рамки, полоса становится бежевой. На телефоне полосы
   бежевые всегда. Цвета и шрифты — objekt-tokens.css. */
/* main.css гасит рамку фокуса у всего (* { outline: none !important }) — поэтому у :focus-visible здесь !important. */

.objs,
.objs *,
.objs *::before,
.objs *::after{box-sizing:border-box;}

.objs{
  container:objs / inline-size;
  background:var(--objekt-color-bg);
  color:var(--objekt-color-cream);
  font-family:var(--objekt-font-body);
  padding:var(--objekt-section-py-cq) 0;
  margin:0;
  --objs-ease:cubic-bezier(.22,.61,.36,1);
  --objs-dur:250ms;
}
.objs .objs-wrap{padding:0 16px;}
.objs p{margin:0;padding:0;}

/* ---------- заголовок ---------- */
.objs .objs-eyebrow{
  display:flex;align-items:center;gap:16px;
  font-size:var(--objekt-fs-caption);
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--objekt-color-accent);
  margin:0 0 16px;
}
.objs .objs-eyebrow span{flex-shrink:0;}
/* линия справа от эйдброу — стандарт для всех блоков, на телефоне тоже */
.objs .objs-eyebrow i{display:block;flex:1 1 auto;height:1px;background:var(--objekt-color-line-strong);}
.objs .objs-title{
  font-family:var(--objekt-font-heading);
  font-weight:500;
  font-size:clamp(26px, 8.5cqw, 32px);
  line-height:var(--objekt-lh-heading);
  letter-spacing:var(--objekt-tracking-heading);
  color:var(--objekt-color-cream);
  margin:0 0 12px;
}
.objs .objs-title span{color:var(--objekt-color-accent);}
.objs .objs-subtitle{
  font-size:15px;
  line-height:1.45;
  color:var(--objekt-color-text-light);
}

/* ---------- сетка ---------- */
.objs .objs-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:16px;
  margin-top:24px;
}

/* ---------- карточка: вся — одна ссылка ---------- */
.objs .objs-card{
  display:flex;flex-direction:column;
  min-width:0;
  background:#221F1F;
  border:1px solid var(--objekt-color-line);
  border-radius:var(--objekt-radius-card);
  overflow:hidden;
  color:var(--objekt-color-cream);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--objs-dur) var(--objs-ease);
}
.objs .objs-card:hover,
.objs .objs-card:focus,
.objs .objs-card:visited{color:var(--objekt-color-cream);text-decoration:none;}
.objs .objs-card:focus{outline:none;}
.objs .objs-card:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:3px;}

/* фото: на телефоне ≈1.9:1, кадрирование — своё у каждой карточки */
.objs .objs-media{
  position:relative;
  aspect-ratio:1.9 / 1;
  overflow:hidden;
  background:#151313;
}
/* при наведении фото увеличивается настоящим размером слоя (inset), а не transform: scale —
   при scale браузер на время анимации растягивает снимок как картинку, и фото с подписью мылятся */
.objs .objs-media__zoom{
  position:absolute;inset:0;
  transition:inset var(--objs-dur) var(--objs-ease);
}
.objs .objs-media__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  max-width:none;
  object-fit:cover;
  object-position:var(--objs-pos-m, var(--objs-pos, 50% 50%));
  display:block;margin:0;border-radius:0;
}
/* лёгкое затемнение сверху — номер и выноска читаются на любом фото */
.objs .objs-media__zoom::after{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom, rgba(20,18,18,0.42) 0, rgba(20,18,18,0) 42%);
  pointer-events:none;
}
/* номер: «01 —» поверх фото */
.objs .objs-num{
  position:absolute;left:16px;top:12px;z-index:3;
  display:flex;align-items:center;gap:10px;
  font-family:var(--objekt-font-heading);
  font-size:30px;
  line-height:1;
  color:var(--objekt-color-cream);
  text-shadow:0 1px 12px rgba(0,0,0,0.45);
  pointer-events:none;
}
.objs .objs-num i{display:block;width:22px;height:1px;background:currentColor;box-shadow:0 1px 6px rgba(0,0,0,0.4);}

/* выноска: точка + линия + подпись; декоративная, клики не перехватывает.
   Точку, линию и подпись ставит JS (objekt-services.js) в процентах от слоя фото — при увеличении фото
   они едут вместе с ним, а размер текста не меняется. До расстановки выноска скрыта. */
.objs .objs-callout{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;}
.objs .objs-callout.is-ready{opacity:1;}
.objs .objs-callout__line{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;}
.objs .objs-callout__line path{fill:none;stroke:rgba(245,242,237,0.9);stroke-width:1;vector-effect:non-scaling-stroke;}
.objs .objs-callout__dot{
  position:absolute;left:0;top:0;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:var(--objekt-color-cream);
  box-shadow:0 0 0 3px rgba(245,242,237,0.28), 0 1px 6px rgba(0,0,0,0.4);
}
/* подпись: подчёркивание — продолжение линии выноски */
.objs .objs-callout__label{
  position:absolute;
  max-width:62%;
  padding:0 2px 5px;
  border-bottom:1px solid rgba(245,242,237,0.9);
  font-size:14px;
  font-weight:500;
  line-height:1.3;
  color:var(--objekt-color-cream);
  text-shadow:0 0 12px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.9);
  transition:color var(--objs-dur) var(--objs-ease);
}

.objs .objs-body{padding:16px 16px 18px;}
.objs .objs-card__title{
  font-family:var(--objekt-font-heading);
  font-weight:500;
  font-size:clamp(23px, 6.6cqw, 25px);
  line-height:1.15;
  color:var(--objekt-color-cream);
  transition:color var(--objs-dur) var(--objs-ease);
}
.objs .objs-card__desc{
  margin-top:8px;
  font-size:15px;
  line-height:1.45;
  color:var(--objekt-color-text-light);
}

/* нижняя полоса: всегда внизу карточки; на телефоне и планшете — бежевая всегда */
.objs .objs-bar{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:52px;
  padding:10px 16px;
  background:var(--objekt-color-accent);
  color:var(--objekt-color-bg);
  transition:background-color var(--objs-dur) var(--objs-ease), color var(--objs-dur) var(--objs-ease), border-color var(--objs-dur) var(--objs-ease);
}
.objs .objs-bar__name{font-size:16px;font-weight:500;line-height:1.3;}
.objs .objs-bar__arrow{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border:1px solid var(--objekt-color-bg);
  border-radius:50%;
  background:var(--objekt-color-bg);
  color:var(--objekt-color-cream);
  transition:background-color var(--objs-dur) var(--objs-ease), color var(--objs-dur) var(--objs-ease), border-color var(--objs-dur) var(--objs-ease);
}
.objs .objs-bar__arrow svg{width:20px;height:20px;}
.objs .objs-card:active .objs-bar{background:#9A876F;}

@container objs (min-width: 390px){
  .objs .objs-wrap{padding:0 20px;}
}

/* ---------- 768–1023: две колонки, пятая на всю ширину ---------- */
@container objs (min-width: 750px){
  .objs .objs-wrap{padding:0 32px;}
  .objs .objs-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px;margin-top:32px;}
  .objs .objs-card:nth-child(5){grid-column:1 / -1;}
  .objs .objs-card:nth-child(5) .objs-media{aspect-ratio:2.8 / 1;}
  .objs .objs-media{aspect-ratio:1.7 / 1;}
  .objs .objs-media__img{object-position:var(--objs-pos, 50% 50%);}
  .objs .objs-eyebrow{font-size:var(--objekt-fs-meta);letter-spacing:0.3em;gap:24px;margin-bottom:18px;}
  .objs .objs-title{font-size:clamp(34px, 5.2cqw, 48px);}
  .objs .objs-subtitle{font-size:var(--objekt-fs-lead);}
  .objs .objs-body{padding:20px 24px 22px;}
  .objs .objs-bar{padding:10px 24px;min-height:60px;}
  .objs .objs-num{left:24px;top:18px;font-size:38px;}
  .objs .objs-card__title{font-size:clamp(24px, 2.6cqw, 28px);}
  .objs .objs-card__desc{font-size:16px;}
}

/* ---------- от 1024: 6 колонок, 3+3 / 2+2+2 ---------- */
@container objs (min-width: 1000px){
  .objs .objs-grid{grid-template-columns:repeat(6, minmax(0, 1fr));gap:clamp(20px, 1.4cqw, 24px);}
  .objs .objs-card--wide{grid-column:span 3;}
  .objs .objs-card--narrow,
  .objs .objs-card:nth-child(5){grid-column:span 2;}
  .objs .objs-card--wide .objs-media{aspect-ratio:2.4 / 1;}
  .objs .objs-card--narrow .objs-media,
  .objs .objs-card:nth-child(5) .objs-media{aspect-ratio:1.8 / 1;}
  .objs .objs-title{font-size:var(--objekt-fs-display-wide-cq);margin-bottom:14px;}
  .objs .objs-body{padding:22px 24px 24px;}
  .objs .objs-card__title{font-size:clamp(24px, 1.75cqw, 32px);}
  .objs .objs-card__desc{font-size:clamp(15px, 0.9cqw, 16px);}
  /* высота полосы вмещает 2 строки названия — полосы в ряду совпадают и сверху, и снизу */
  .objs .objs-bar{min-height:clamp(64px, 4cqw, 72px);}
  .objs .objs-bar__name{font-size:clamp(16px, 1cqw, 18px);}
  .objs .objs-bar__arrow{width:clamp(36px, 2.4cqw, 44px);height:clamp(36px, 2.4cqw, 44px);}
  .objs .objs-num{font-size:clamp(38px, 2.6cqw, 48px);}
  .objs .objs-callout__label{font-size:15px;}
}
@container objs (min-width: 1200px){
  .objs .objs-wrap{width:min(81.77083cqw, 1600px);margin:0 auto;padding:0;}
}

/* ---------- мышь: спокойное состояние + hover/focus ---------- */
@media (hover: hover) and (pointer: fine){
  .objs .objs-bar{background:transparent;color:var(--objekt-color-cream);border-top:1px solid var(--objekt-color-line);}
  .objs .objs-bar__arrow{background:transparent;border-color:var(--objekt-color-accent);color:var(--objekt-color-accent);}

  .objs .objs-card:hover,
  .objs .objs-card:focus-visible{border-color:rgba(169,150,125,0.55);}
  .objs .objs-card:hover .objs-bar,
  .objs .objs-card:focus-visible .objs-bar{background:var(--objekt-color-accent);color:var(--objekt-color-bg);border-top-color:var(--objekt-color-accent);}
  .objs .objs-card:hover .objs-bar__arrow,
  .objs .objs-card:focus-visible .objs-bar__arrow{background:var(--objekt-color-bg);border-color:var(--objekt-color-bg);color:var(--objekt-color-cream);}
  .objs .objs-card:hover .objs-card__title,
  .objs .objs-card:focus-visible .objs-card__title{color:#E6D6BF;}
  .objs .objs-card:hover .objs-callout__label{color:#fff;}
  /* фото увеличивается внутри рамки на 2.5% (слой шире на 1.25% с каждой стороны);
     точка, линия и подпись выноски едут вместе с фото, размер текста не меняется */
  .objs .objs-card:hover .objs-media__zoom{inset:-1.25%;}
  .objs .objs-card:active .objs-bar{background:#9A876F;}
}

@media (prefers-reduced-motion: reduce){
  .objs .objs-card,
  .objs .objs-media__zoom,
  .objs .objs-callout,
  .objs .objs-callout__label,
  .objs .objs-card__title,
  .objs .objs-bar,
  .objs .objs-bar__arrow{transition:none;}
  .objs .objs-card:hover .objs-media__zoom{inset:0;}
}