/* overrides.css — ручные правки поверх site.css.
   Сюда попадает то, чего нет в выгрузке Webflow: размещение элементов в сетке (element-level grid placement),
   состояния интеракций, поведение дропдаунов/табов. Каждое правило — с комментарием, где и зачем. */

/* Метки секций («about», «peculiarity»…): в Webflow у элемента стояло justify-self:start; без него grid растягивает пилюлю на всю колонку */
.bar{justify-self:start;align-self:start}
.flex-col > .bar, .text-wrapper > .bar{align-self:flex-start}

/* Главная, секция «What you receive every month»: картинка занимает 1-ю колонку на все 6 рядов, строки — 2-ю колонку */
._6-row{grid-template-columns:1fr 1fr}
._6-row > img{grid-column:1;grid-row:1 / span 6;align-self:start}
._6-row > .row-grid{grid-column:2}
@media (max-width:991px){
  ._6-row > img{grid-row:auto}
  ._6-row > .row-grid{grid-column:1}
}

/* FAQ-аккордеон: в Webflow это Dropdown, раскрытие было интеракцией */
.w-dropdown.dd-container{display:block;z-index:auto}
.w-dropdown-toggle.dd-header{display:flex;white-space:normal}
.w-dropdown-list.dd-open{position:static;background:transparent;min-width:0;padding:0 1.875rem 1.5rem}
.dd-icon{transition:transform .3s ease}
.w-dropdown.w--open .dd-icon{transform:rotate(45deg)}

/* Табы «We build the foundation first»: в Webflow ширина вкладок анимировалась интеракцией; здесь — активная вкладка раскрыта, остальные свёрнуты */
.tabs .tabs_content{flex:0 0 0;width:0;transition:flex .4s ease}
.tabs .tabs_content.is-active{flex:1 1 auto;width:auto}
.tabs .tabs_link{flex:0 0 auto;cursor:pointer}

/* Попап: открытие/закрытие — классом из site.js */
.popup-wrapper.is-open{display:flex}

/* --- Размещение в сетках, снятое с живого margintall.com (тот же шаблон), 05.11.2026 --- */
/* Подвал: 12-колоночная сетка */
.footer-grid > .footer-column:nth-child(1){grid-column:7/8;grid-row:1}
.footer-grid > .footer-column:nth-child(2){grid-column:1/4;grid-row:1}
.footer-grid > .footer-column:nth-child(3){grid-column:4/7;grid-row:1}
.footer-grid > .footer-column:nth-child(4){grid-column:9/12;grid-row:1}
.footer-grid > :nth-child(5){grid-column:1/4;grid-row:3}
.footer-grid > :nth-child(6){grid-column:4/5;grid-row:3}
.footer-grid > :nth-child(7){grid-column:8/13;grid-row:3}
.footer-grid > :nth-child(8){grid-column:1/13;grid-row:4}
@media (max-width:991px){
  .footer-grid > .footer-column:nth-child(1){grid-column:3/4}
  .footer-grid > .footer-column:nth-child(2){grid-column:1/2}
  .footer-grid > .footer-column:nth-child(3){grid-column:2/3}
  .footer-grid > .footer-column:nth-child(4){grid-column:4/5}
  .footer-grid > :nth-child(5){grid-column:1/3}
  .footer-grid > :nth-child(6){grid-column:3/4}
  .footer-grid > :nth-child(7){grid-column:4/5}
  .footer-grid > :nth-child(8){grid-column:1/5}
}
@media (max-width:767px){
  .footer-grid > *{grid-column:1 !important}
  .footer-grid > .footer-column:nth-child(4){grid-row:1}
  .footer-grid > .footer-column:nth-child(2){grid-row:2}
  .footer-grid > .footer-column:nth-child(3){grid-row:3}
  .footer-grid > .footer-column:nth-child(1){grid-row:4}
  .footer-grid > :nth-child(6){grid-row:5}
  .footer-grid > :nth-child(7){grid-row:6}
  .footer-grid > :nth-child(5){grid-row:7}
  .footer-grid > :nth-child(8){grid-row:8}
}
/* Главная, «What you receive every month»: точные ряды как в оригинале (5-й и 6-й блоки поменяны местами) */
._6-row > img{grid-row:2 / span 5}
._6-row > .row-grid:nth-of-type(1){grid-row:1}
._6-row > .row-grid:nth-of-type(2){grid-row:2}
._6-row > .row-grid:nth-of-type(3){grid-row:3}
._6-row > .row-grid:nth-of-type(4){grid-row:4}
._6-row > .row-grid:nth-of-type(5){grid-row:6}
._6-row > .row-grid:nth-of-type(6){grid-row:5}
@media (max-width:991px){
  ._6-row > .row-grid{grid-column:1}
  ._6-row > .row-grid:nth-of-type(1){grid-row:1} ._6-row > .row-grid:nth-of-type(2){grid-row:2}
  ._6-row > .row-grid:nth-of-type(3){grid-row:3} ._6-row > .row-grid:nth-of-type(4){grid-row:4}
  ._6-row > .row-grid:nth-of-type(5){grid-row:5} ._6-row > .row-grid:nth-of-type(6){grid-row:6}
  ._6-row > img{grid-column:1;grid-row:7;align-self:end}
  body[data-page="about"] ._6-row > img{grid-row:5}
}
/* Табы: в оригинале активная вкладка ≈38% ширины, четыре ссылки делят остаток поровну */
.tabs .tabs_link{width:auto;flex:1 1 0;min-width:0}
.tabs .tabs_content.is-active{flex:0 0 38.4%;width:38.4%}
@media (max-width:991px){
  .tabs .tabs_link{flex:0 0 auto;width:100%}
  .tabs .tabs_content{width:100%;flex:0 0 auto;display:none}
  .tabs .tabs_content.is-active{display:block;width:100%}
}
/* Страховка от горизонтальной прокрутки из-за декоративных элементов за краем экрана */
html{overflow-x:clip}

/* Мобильное меню: класс .flex-row из site.css перебивает display:none из base.css — прячем явно, пока не открыто бургером */
@media (max-width:991px){
  .w-nav-menu:not(.w--open){display:none !important}
}


/* --- Размещение в сетках для остальных страниц (снято с живого margintall.com 05.11.2026) --- */
/* Все страницы: правая колонка hero-блока по центру; на планшете/телефоне левая часть на всю ширину */
.hero-grid > .right-wrapper{align-self:center}
@media (max-width:991px){
  .hero-grid > .left-wrapper.bg-image{grid-column:1/3;grid-row:1/2}
  body[data-page="about"] .hero-grid > .left-wrapper.bg-image,
  body[data-page="contact"] .hero-grid > .left-wrapper.bg-image{grid-row:2/3}
}
/* Попап: чекбокс и кнопка на всю ширину двухколоночной формы */
._2-col > .chexbox-wrapper{grid-column:1/3;grid-row:4/5}
._2-col > .btn-main.fill-100{grid-column:1/3;grid-row:5/6}
/* About: hero-карточки */
._3-col-2-row._1-col-5-row._2fr > :nth-child(1){grid-column:1/2;grid-row:1/3}
@media (max-width:991px){
  ._3-col-2-row._1-col-5-row._2fr > *{grid-column:1/2}
  ._3-col-2-row._1-col-5-row._2fr > :nth-child(1){grid-row:5/6}
  ._3-col-2-row._1-col-5-row._2fr > :nth-child(2){grid-row:1/2}
  ._3-col-2-row._1-col-5-row._2fr > :nth-child(3){grid-row:2/3}
  ._3-col-2-row._1-col-5-row._2fr > :nth-child(4){grid-row:3/4}
  ._3-col-2-row._1-col-5-row._2fr > :nth-child(5){grid-row:4/5}
  ._3_col-grid._2_col-2_row_tablet > :nth-child(3){grid-column:1/3;grid-row:2/3}
  ._4_col-grid._2_col-2_row > :nth-child(3), ._4_col-grid._2_col-2_row > :nth-child(4){grid-column:span 2}
  ._3_col-grid._2_col-2_row.flex_row > :nth-child(2):last-child{grid-column:1/3;grid-row:2/3}
}
@media (max-width:767px){
  ._3_col-grid._2_col-2_row_tablet > :nth-child(3){grid-column:1/2}
  ._4_col-grid._2_col-2_row > :nth-child(3), ._4_col-grid._2_col-2_row > :nth-child(4){grid-column:span 2;grid-row:2}
}
/* Contact: карточки hero */
._3-col-2-row._1-col-5-row:not(._2fr) > :nth-child(1){grid-column:1/2;grid-row:1/3}
._3-col-2-row._1-col-5-row:not(._2fr) > :nth-child(4){grid-column:2/4;grid-row:2/3}
@media (max-width:991px){
  ._3-col-2-row._1-col-5-row:not(._2fr) > :nth-child(1){grid-column:1/4;grid-row:1/2}
  ._3-col-2-row._1-col-5-row:not(._2fr) > :nth-child(3){grid-column:2/4;grid-row:2/3}
  ._3-col-2-row._1-col-5-row:not(._2fr) > :nth-child(4){grid-column:1/4;grid-row:3/4}
}
/* Blog: заголовок рядом с меткой */
._2_col-grid._2_row-grid-mob._2-row.gap-30.mob-grid > :nth-child(2){grid-column:2/3;grid-row:1/3}
@media (max-width:991px){
  ._2_col-grid._2_row-grid-mob._2-row.gap-30.mob-grid > :nth-child(2){grid-column:1/2;grid-row:2/3}
}
/* Карта офиса (MapWidget) */
.br-20.h-220 iframe{border-radius:20px}