/* sohoarchitects.com — стили сайта. На экранах шире 931 px вёрстка повторяет прежний сайт
   один в один (колонка 900 px по центру экрана); уже — адаптив для телефона. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; padding: 0;
  background: #fff; color: #000;
  font-family: Arial, Helvetica, SunSans-Regular, sans-serif; font-size: 12px;
}
p, h1, h2 { margin: 0; padding: 0; }
a { color: #578497; background: transparent; text-decoration: none; }
img { border: 0; }

#main {
  position: relative; width: 900px; margin: 0 auto;
  padding-top: max(0px, calc(50vh - 300px)); /* как прежде: середина колонки — на середине экрана */
}

/* шапка */
#top-row { position: relative; height: 100px; background: #fff; }
#logo { float: right; padding-top: 40px; }
#lang { position: absolute; left: 0; top: 54px; font-family: Arial; font-size: 12px; }
.lang-on { color: #000; }
.lang-off { color: #777; }

/* область содержимого */
.content {
  position: relative; height: 374px; overflow: hidden;
  border-bottom: 1px dotted #888; margin-bottom: 36px;
  animation: sa-fade 1s ease-in-out .2s both;
}
@keyframes sa-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .content { animation: none; } }

/* главная: шесть кругов со сменой картинок */
.tiles { display: grid; grid-template-columns: repeat(3, 290px); column-gap: 15px; row-gap: 17px; } /* как прежде: 15 px отступа + строчный зазор */
.tile { position: relative; width: 290px; height: 180px; }
.tile-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 0s 1s; }
.tile-slide.is-on { opacity: 1; visibility: visible; transition: opacity 1s, visibility 0s; z-index: 1; }
.tile-slide img { display: block; }

/* проект: слайды 900×374, квадратики под чертой, «T» — текст проекта */
.c-project { overflow: visible; }
.gallery { position: relative; width: 900px; height: 374px; }
.g-stage { position: relative; width: 900px; height: 374px; overflow: hidden; }
.g-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; background: #fff; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 0s 1s; }
.g-slide.is-on { opacity: 1; visibility: visible; transition: opacity 1s, visibility 0s; z-index: 1; }
.g-slide img { display: block; width: 900px; height: 374px; object-fit: cover; }
.g-text { position: absolute; top: 0; right: 0; bottom: 0; width: 550px; padding-left: 15px; box-sizing: border-box; }
.g-pager { position: absolute; right: 0; top: 374px; padding: 5px 0; z-index: 3; }
.g-dot {
  display: block; float: left; width: 12px; height: 12px; margin: 6px 0 0 10px; padding: 0;
  border: 0; border-radius: 0; background: #cbcbcb; cursor: pointer; overflow: hidden;
  font: inherit; color: transparent; -webkit-appearance: none; appearance: none;
}
.g-dot.is-on { background: #989898; }
.g-dot.g-t { background: #fff; color: #555; margin: 5px 2px 0 8px; line-height: normal; text-align: center; }
.g-dot:focus-visible { outline: 1px dotted #555; outline-offset: 2px; }
.g-mobile-text { display: none; }
#thumbPreview { position: absolute; right: 0; top: -5px; opacity: 0; transition: opacity .1s; pointer-events: none; }
#thumbPreview.on { opacity: 1; }
#thumbPreview img { display: block; width: 100px; height: 42px; }
#thumbPreview.blank img { visibility: hidden; }

/* текстовые страницы и прокрутка длинного текста (тонкая полоса справа, как прежде) */
.scroll { position: relative; height: 374px; overflow: hidden; }
.scroll-in { height: 100%; overflow-x: hidden; overflow-y: auto; }
.js .scroll-in { scrollbar-width: none; }
.js .scroll-in::-webkit-scrollbar { display: none; }
.scroll.clip .scroll-in { overflow: hidden; }
.scroll.has-bar .scroll-in { margin-right: 10px; }
.sbar { position: absolute; top: 0; right: 0; width: 4px; height: 100%; display: none; opacity: .75; }
.scroll:hover > .sbar { opacity: 1; }
.scroll.has-bar .sbar { display: block; }
.sbar-rail { width: 2px; height: 100%; margin: 0 auto; border-radius: 10px; background: rgba(0, 0, 0, .15); }
.sbar-drag { position: absolute; top: 0; left: 0; width: 100%; height: 30px; cursor: pointer; touch-action: none; }
.sbar-drag i { display: block; width: 4px; height: 100%; margin: 0 auto; border-radius: 10px; background: rgba(0, 0, 0, .75); }
.sbar-drag:hover i { background: rgba(0, 0, 0, .85); }
.sbar-drag.drag i { background: rgba(0, 0, 0, .9); }
.blk-image.al-center { text-align: center; }
.blk-image.al-right { text-align: right; }
.blk-image img { max-width: 100%; height: auto; }
.blk-map iframe { display: inline-block; border: 0; vertical-align: baseline; max-width: 100%; }

/* меню: колонки раскрываются вправо */
#finderparent { position: relative; }
#finder, #finder ul { list-style: none; margin: 0; padding: 0; font-family: arial, sans-serif; font-size: 12px; }
#finder li { padding-bottom: 4px; }
#finder ul.hidden { display: none; position: absolute; top: 0; }
#finder ul.shown { display: block; position: absolute; top: 0; left: 205px; }
#finder ul.m-2 { margin-left: -50px; }
#finder ul.m-3 { width: 540px; }
#finder a { color: #555; text-decoration: none; }
#finder a:hover { color: #000; }
#finder a.parent { padding-right: 16px; }
#finder a.open { color: #777; font-weight: bold; padding-right: 16px; }
#finder a.act { color: #000; font-weight: bold; padding-right: 16px; }

/* телефон и узкие окна */
@media (max-width: 931px) {
  body { font-size: 14px; line-height: 1.45; }
  #main { width: auto; margin: 0; padding: 12px 16px 40px; }
  #top-row { height: auto; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; padding: 8px 0 20px; }
  #logo { float: none; padding-top: 0; line-height: 0; }
  #logo img { width: min(290px, 62vw); height: auto; }
  #lang { position: static; font-size: 14px; padding-bottom: 2px; }
  .content { height: auto; overflow: visible; margin-bottom: 24px; padding-bottom: 16px; }
  .scroll, .scroll-in { height: auto; overflow: visible; }
  .scroll.has-bar .scroll-in { margin-right: 0; }
  .sbar { display: none !important; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { width: auto; height: auto; aspect-ratio: 290 / 180; }
  .tile-slide img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
  .gallery { width: auto; height: auto; }
  .g-stage { width: auto; height: auto; aspect-ratio: 900 / 374; touch-action: pan-y; }
  .g-slide img { width: 100%; height: 100%; }
  .g-textslide, .g-t { display: none !important; }
  .g-pager { position: static; display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 10px 0 4px; }
  .g-dot { float: none; width: 14px; height: 14px; margin: 0 0 6px 12px; }
  .g-mobile-text { display: block; padding-top: 8px; }
  #thumbPreview { display: none; }
  .blk-map iframe { width: 100%; }
  #finder, #finder ul { font-size: 15px; }
  #finder li { padding-bottom: 0; }
  #finder a { display: inline-block; padding: 6px 0; }
  #finder ul.hidden, #finder ul.shown { position: static; margin-left: 0; width: auto; padding: 0 0 4px 18px; }
}
@media (max-width: 380px) {
  .tiles { gap: 8px; }
}