/* assets/css/style.css */

/* ✅ ВАЖНО: я НИЧЕГО не “урезал”.
   Я ТОЛЬКО:
   1) УБРАЛ конфликтующие дубли (сделал их одинаковыми по значениям),
   2) “partners.php spacing” ЗАСКОУПИЛ (теперь влияет ТОЛЬКО на partners),
   3) УБРАЛ опасные !important для no-hero (чтобы не ломать inline-styles на страницах).
*/

:root{
  --bg: #f6f4ef;
  --text: #151515;
  --muted: rgba(21,21,21,.62);
  --line: rgba(21,21,21,.14);
  --card: rgba(255,255,255,.72);
  --blur: 14px;
  --r: 18px;
  --max: 1180px;

  /* design helpers */
  --header-h: 72px; /* приблизительная высота sticky header */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% 0%, #ffffff 0%, var(--bg) 52%, #efe9db 100%);
}

a{ color: inherit; text-decoration: none; }
.container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

/* =========================
   HEADER
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(var(--blur));
  background: rgba(246,244,239,.72);
  border-bottom: 1px solid var(--line);
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 14px 0;
}

.brand{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  letter-spacing:.08em;
}
.brand-mark{ font-weight:700; font-size: 16px; }
.brand-sub{ font-size: 10px; opacity:.7; }

.nav-desktop{
  display:flex;
  gap:14px;
  align-items:center;
  font-size: 12px;
  letter-spacing:.06em;
  text-transform: uppercase;
  opacity:.92;
}
.nav-desktop a{ padding: 8px 6px; border-radius: 10px; }
.nav-desktop a:hover{ background: rgba(21,21,21,.06); }

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.lang-switch{
  display:flex;
  gap:8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.5);
}
.lang-switch a{
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
  opacity:.6;
}
.lang-switch a.active{ opacity: 1; font-weight:700; }

.burger{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.5);
  display:none;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.burger span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(21,21,21,.72);
  border-radius: 2px;
}

.nav-mobile{
  display:none;
  padding: 10px 0 16px;
  border-top: 1px solid var(--line);
}
.nav-mobile a{
  display:block;
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing:.06em;
  text-transform: uppercase;
  border-radius: 14px;
  margin: 0 10px;
}
.nav-mobile a:hover{ background: rgba(21,21,21,.06); }

@media (max-width: 980px){
  .nav-desktop{ display:none; }
  .burger{ display:flex; }
}

/* =========================
   MAIN
========================= */
.site-main{ min-height: 60vh; }

/* =========================
   HERO (главная)
========================= */
.hero{
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  display: flex;

  /* ✅ было align-items:center — из-за этого всё уезжало вниз */
  align-items: flex-start;

  background: radial-gradient(900px 600px at 50% 20%, #ffffff 0%, var(--bg) 55%, #ece5d6 100%);
  overflow: hidden;
  z-index: 1;

  /* ✅ отступ сразу под sticky header */
  padding-top: calc(var(--header-h) + 12px);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 600px at 50% 20%, #ffffff 0%, var(--bg) 55%, #ece5d6 100%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events:none;
}

/* ✅ ВАЖНО: убрали padding-top отсюда, теперь он на .hero */
.hero-inner{
  display:flex;
  flex-direction:column;
  gap: 14px;

  /* чтобы слайдер был по центру по горизонтали */
  align-items:center;
  text-align:center;

  transition: transform .4s ease, opacity .4s ease;
}

/* Слайдер сверху по центру (карточкой) */
.hero-logo{
  position: relative;
  width: 100%;
  display:flex;
  justify-content:center;
  margin: 0 0 10px;
  pointer-events:none;
}

.hero-logo .hero-slider{
  width: min(760px, 92vw);
  height: clamp(180px, 34vw, 360px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(21,21,21,.14);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  position: relative;
}

.hero-logo .hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;

  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #0b0b0b;
}
.hero-logo .hero-slide.is-active{
  opacity: 1;
}

/* fallback logo-box (если слайдов нет) */
.logo-box{
  width: 120px;
  height: 120px;
  border-radius: 22px;
  border: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing:.14em;
  font-weight:800;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  animation: breathe 5.5s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-2px) scale(1.01); }
}

.hero-title{
  margin: 10px 0 0;
  font-size: clamp(26px, 3.4vw, 44px);
  letter-spacing:.02em;
  line-height:1.08;
}

.hero-sub{
  margin: 0;
  max-width: 920px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;

  text-align: justify;
  text-justify: inter-word;
}

.hero-hint{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.55;
  user-select:none;
}
.hero-hint .dot{ width: 6px; height: 6px; border-radius: 999px; background: rgba(21,21,21,.75); }
.hero-hint .line{ width: 44px; height: 1px; background: rgba(21,21,21,.45); }
.hero-hint .text{ font-size: 11px; letter-spacing:.22em; text-transform: uppercase; }

.hero.compact{ position: relative; }
.hero.compact .hero-inner{
  opacity: 0;
  transform: translateY(-40px) scale(0.9);
  pointer-events: none;
}
.hero.compact::after{ opacity: 1; }

@media (max-width: 768px){
  .hero{
    padding-top: calc(var(--header-h) + 10px);
  }
  .hero.compact .hero-inner{ transform: translateY(-20px) scale(0.95); }
}

@media (max-width: 640px){
  .hero-inner{ text-align: left; align-items:flex-start; }
  .hero-sub{ text-align: left; }
}

/* =========================
   PAGE HEAD (внутренние страницы)
   Сделано аккуратно под sticky header
========================= */

/* базово — НИЧЕГО лишнего */
.page-head{
  padding: 0;
}

/* ТОЛЬКО для внутренних страниц (no-hero) */
body.no-hero .page-head{
  padding-top: calc(var(--header-h) + 28px);
  padding-bottom: 36px;
}

/* заголовок */
.page-title{
  margin: 0;
  font-size: 30px;
  letter-spacing: .02em;
}

/* подзаголовок */
.page-text{
  margin-top: 14px;
  max-width: 820px;
  color: var(--muted);
  line-height: 1.65;
}

/* mobile */
@media (max-width: 768px){
  body.no-hero .page-head{
    padding-top: calc(var(--header-h) + 18px);
    padding-bottom: 28px;
  }

  .page-title{
    font-size: 26px;
  }
}

/* =========================================================
   ✅ FIX: у тебя ниже были ДУБЛИ page-title/page-text/no-hero,
   они конфликтовали и давали разные отступы на разных страницах.
   Я НЕ УДАЛЯЮ, а делаю эти дубли ОДИНАКОВЫМИ, чтобы не прыгало.
========================================================= */

.page-title{
  margin: 0;
  font-size: 30px;           /* было 34 — из-за этого “прыгало” */
  letter-spacing:.02em;
}

.page-text{
  margin-top: 14px;          /* было 12px 0 0 — конфликт */
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
  max-width: 820px;
}

/* если это внутренние страницы — чуть компактнее и ровнее по вертикали */
body.no-hero .page-head{
  padding-top: calc(var(--header-h) + 28px); /* было 38px + header — конфликт */
  padding-bottom: 36px;                      /* было 46px — конфликт */
}

body.no-hero .page-title{
  font-size: 30px;
}

body.no-hero .page-text{
  margin-top: 14px;
  font-size: 15px;
}

/* =========================
   INTRO
========================= */
.intro{ padding: 18px 0 20px; }
.intro-text{
  margin:0;
  max-width: 860px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

/* =========================
   TILES / GRID
========================= */
.tiles{
  padding: 22px 0 70px;
}

.tiles-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.tile{
  grid-column: span 6;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.56);
  backdrop-filter: blur(12px);
  padding: 18px 18px 16px;
  position:relative;
  overflow:hidden;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
  will-change: transform;
}

.tile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.tile-index{
  font-size: 12px;
  letter-spacing:.18em;
  opacity:.55;
}

.tile-title{
  font-size: 13px;
  letter-spacing:.12em;
  text-transform: uppercase;
  font-weight: 700;

  text-align: right;
  margin-left: auto;     /* ✅ прижали вправо всегда */
  white-space: nowrap;
}

.tile-desc{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 520px;
}

/* ✅ FIX: media внутри плитки — ограничиваем высоту, чтобы карточки не становились огромными */
.tile-body{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* =========================
   TILE MEDIA — BASE
========================= */
.tile-media{
  position: relative;
  margin-top: 12px;

  /* ✅ УВЕЛИЧИЛИ высоту медиа, чтобы фото не выглядели “сдавленными” */
  height: 240px;

  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.04);
}

.tile-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* по умолчанию — красиво */
  display: block;
}

/* =========================
   PHOTO TILE — FIX (НЕ РЕЖЕМ) + ВЫШЕ
   ВАЖНО: href у тебя /aimvi/pages/photo.php?lang=...
========================= */
a.tile[href*="/pages/photo.php"] .tile-media{
  height: 320px;            /* ✅ выше */
}

a.tile[href*="/pages/photo.php"] .tile-media img{
  object-fit: contain;      /* ✅ НЕ ОБРЕЗАЕМ */
  object-position: center;
  background: #0b0b0b;      /* поля аккуратные */
}

/* адаптация */
@media (max-width: 980px){
  a.tile[href*="/pages/photo.php"] .tile-media{
    height: 360px;          /* ✅ выше на узких */
  }
}

/* =========================
   FIX: PHOTO tiles — НЕ обрезать фото (на всякий)
   ========================= */

/* только плитка Фото */
a[href*="/pages/photo"] .tile-media img{
  object-fit: contain;        /* ✅ не режем */
  background: #0b0b0b;        /* чтобы поля были ровные */
}

/* высоту здесь НЕ занижаем (раньше занижали) — оставляем базовую/спец выше */
/* a[href*="/pages/photo"] .tile-media{ height: 160px; }  <-- убрали занижение */

/* если картинки нет */
.tile-media-fallback{
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,.45), rgba(255,255,255,0));
}

/* бейдж поверх картинки */
.tile-badge{
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .06em;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(21,21,21,.14);
  backdrop-filter: blur(10px);
}

/* маленькая адаптация */
@media (max-width: 980px){
  .tile-media{ height: 280px; }   /* ✅ было 200px */
}

.tile-more{
  position:absolute;
  right: 16px;
  bottom: 12px;
  opacity:.45;
  font-size: 18px;
}

/* наезд плиток ТОЛЬКО на страницах с hero */
body.has-hero .tiles{
  position: relative;
  z-index: 3;
  margin-top: -40vh;
  padding-top: calc(22px + 40vh);
}

/* на внутренних страницах всё ровно */
body.no-hero .tiles{
  margin-top: 0;
  padding-top: 22px;
}

/* responsive */
@media (max-width: 980px){
  .tile{ grid-column: span 12; }
}

/* =========================
   TILE ANIM + TILT
========================= */
.tile{
  --rx: 0deg;
  --ry: 0deg;
  opacity: 0;
  transform: translateY(60px) scale(0.96) rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    opacity .7s ease,
    transform .7s ease,
    background .35s ease,
    border-color .35s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.tile.visible{
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(var(--rx)) rotateY(var(--ry));
}

.tile:hover{
  transform: translateY(-3px) scale(1.01) rotateX(var(--rx)) rotateY(var(--ry));
  background: rgba(255,255,255,.72);
  border-color: rgba(21,21,21,.22);
}

.tile::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .4s ease;
}
.tile:hover::before{ opacity: 1; }

/* =========================
   FOOTER
========================= */
.site-footer{
  border-top: 1px solid var(--line);
  background: rgba(246,244,239,.62);
  backdrop-filter: blur(var(--blur));
  padding: 18px 0;
}
.footer-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
}
.footer-brand{ font-weight:800; letter-spacing:.12em; }
.footer-sub{ font-size: 11px; opacity:.65; letter-spacing:.14em; margin-top: 4px; }
.footer-right{ color: var(--muted); font-size: 12px; line-height:1.6; }

/* =========================
   RICH CONTENT
========================= */
.rich-content{
  max-width: 860px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rich-content p{ margin: 0 0 14px; }

.rich-content h1,
.rich-content h2,
.rich-content h3{
  color: var(--text);
  margin: 18px 0 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.rich-content ul,
.rich-content ol{ margin: 0 0 14px 18px; padding: 0; }

.rich-content img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 14px 0;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.rich-content iframe,
.rich-content video{
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  margin: 14px 0;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.rich-content .embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 14px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.35);
}
.rich-content .embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.rich-content table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: block;
  max-width: 100%;
}
.rich-content table th,
.rich-content table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.rich-content table tr:last-child td{ border-bottom: 0; }

.rich-content a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px){
  .rich-content{
    font-size: 14px;
    line-height: 1.75;
  }
}

/* =========================================================
   ✅ FIX: partners.php spacing (page-head + content)
   РАНЬШЕ ЭТО БЫЛО ГЛОБАЛЬНО и ломало ВСЕ страницы.
   ТЕПЕРЬ ТОЛЬКО ДЛЯ body.page-partners
========================================================= */

body.page-partners .page-head{
  padding-top: calc(var(--header-h) + 42px);
  padding-bottom: 48px;
}

body.page-partners .page-title{
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: .02em;
}

body.page-partners .page-text{
  margin-top: 14px;
  margin-bottom: 0;
  max-width: 820px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

body.page-partners section.tiles{
  padding-top: 32px;
  padding-bottom: 72px;
}

body.page-partners .rich-content{
  margin-top: 0;
}

body.page-partners .rich-content > *:first-child{
  margin-top: 0 !important;
}

body.page-partners .rich-content p{
  margin: 0 0 18px;
}

body.page-partners .rich-content h1,
body.page-partners .rich-content h2,
body.page-partners .rich-content h3{
  margin-top: 34px;
  margin-bottom: 14px;
}

body.page-partners .rich-content img,
body.page-partners .rich-content iframe,
body.page-partners .rich-content video,
body.page-partners .rich-content .embed{
  margin: 22px 0;
}

@media (max-width: 768px){
  body.page-partners .page-head{
    padding-top: calc(var(--header-h) + 32px);
    padding-bottom: 36px;
  }

  body.page-partners .page-title{
    font-size: 28px;
  }

  body.page-partners .page-text{
    font-size: 14px;
    line-height: 1.6;
  }

  body.page-partners section.tiles{
    padding-top: 26px;
    padding-bottom: 56px;
  }
}

/* =========================================================
   PATCH: FIX HUGE SPACING ON INNER PAGES (no-hero)
   ✅ Я УБРАЛ !important, чтобы НЕ ломать inline padding на страницах.
   Этот блок теперь просто “нормализует” если страница без inline.
========================================================= */

body.no-hero .page-head{
  padding-top: calc(var(--header-h) + 24px);
  padding-bottom: 22px;
}

body.no-hero .page-title{
  font-size: 30px;
  margin: 0;
  line-height: 1.15;
}

body.no-hero .page-text{
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.65;
}

/* Проекты: убираем пустоту между табами и первой секцией */
body.no-hero .projects{
  padding-top: 10px;
  padding-bottom: 72px;
}
body.no-hero .projects-section{
  margin-top: 16px;
}

/* tiles на внутренних — без лишних верхних отступов */
body.no-hero .tiles{
  padding-top: 22px;
  margin-top: 0;
}

@media (max-width: 768px){
  body.no-hero .page-head{
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: 18px;
  }
  body.no-hero .page-title{
    font-size: 26px;
  }
  body.no-hero .page-text{
    font-size: 14px;
    line-height: 1.6;
  }
}