/* =========================================================
   Layout module
   File: assets/css/modules/20-layout.css
   ========================================================= */


/* ===============================
   Sticky footer layout
   =============================== */

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.wp-site-blocks {
  flex: 1;
  display: flex;
  flex-direction: column;
}


/* ===============================
   Base container
   =============================== */

.bo-container {
  max-width: var(--wp--style--global--content-size);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}


/* ===============================
   Page content wrapper
   Добавь класс .bo-page-content на
   главный Group блок страницы
   =============================== */

.bo-page-content {
  max-width: var(--wp--style--global--content-size);
  margin: 0 auto 60px;
  padding: 40px clamp(20px, 4vw, 48px);
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* ===============================
   Image grid (3-col hero gallery)
   =============================== */

.bo-image-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 60px !important;
}

.bo-image-grid figure {
  margin: 0 !important;
}

.bo-image-grid img {
  width: 100% !important;
  height: 320px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}


/* ===============================
   Section variation
   Добавь .bo-section-alt на Group блок
   =============================== */

.bo-section-alt {
  background: rgba(0, 0, 0, .12);
  border-top:    1px solid rgba(255, 255, 255, .045);
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  padding-top:    48px;
  padding-bottom: 48px;
}

.bo-section-alt + .bo-section-alt {
  border-top: none;
}



.bo-footer {
  margin-top: auto;
  padding: 14px 0 14px;
  color: rgba(226, 232, 240, .72);
  font-size: 13px;
  line-height: 1.4;
  background: rgba(3, 14, 20, 1);
  border-top: 1px solid rgba(109, 223, 255, .09);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .30);
  display: flex;
  justify-content: center;
}


/* ===============================
   Footer inner container
   =============================== */

.bo-footer-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: fit-content !important;
  max-width: calc(var(--wp--style--global--content-size) - 80px) !important;
  min-width: min(700px, 90vw) !important;
  padding: 0 clamp(16px, 3.5vw, 40px) !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}


/* ===============================
   Footer top / brand row
   =============================== */

.bo-footer-top,
.bo-footer-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.bo-footer-top > .wp-block-group:not(.bo-footer-brand-group),
.bo-footer-brand > .wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

.bo-footer-brand-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

.bo-footer-logo {
  height: 34px;
  width: auto;
  display: block;
  opacity: .72;
  flex-shrink: 0;
}

.bo-footer-brand-name {
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(226, 232, 240, .68);
  margin: 0;
  line-height: 1;
}

.bo-footer-region {
  font-size: 11px;
  color: rgba(226, 232, 240, .42);
  margin: 3px 0 0;
  padding: 0;
  line-height: 1;
  letter-spacing: .02em;
}


/* ===============================
   Footer contact / license line
   =============================== */

.bo-footer-contact {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 6px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.bo-footer-contact-left {
  font-size: 12px;
  color: rgba(226, 232, 240, .54);
  line-height: 1.6;
}

.bo-footer-contact-right {
  flex-shrink: 0;
}

.bo-footer-contact-phone {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: rgba(226, 232, 240, .92) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  letter-spacing: .01em;
  transition: color .12s ease !important;
  white-space: nowrap;
}

.bo-footer-contact-phone:hover {
  color: var(--bo-primary) !important;
}

.bo-footer-contact a {
  color: rgba(226, 232, 240, .54) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color .12s ease !important;
}

.bo-footer-contact a:hover {
  color: rgba(109, 223, 255, .72) !important;
}

@media (max-width: 768px) {
  .bo-footer-contact {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .bo-footer-contact-phone {
    font-size: 16px !important;
  }
}


/* ===============================
   Footer columns grid
   =============================== */

.bo-footer-columns {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 8px 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.bo-footer-col h4 {
  font-family: "Roboto Condensed", "Roboto", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(109, 223, 255, .80) !important;
  margin: 0 0 4px !important;
}

.bo-footer-col ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bo-footer-col ul li a {
  color: rgba(226, 232, 240, .72) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  line-height: 1.35 !important;
  transition: color .12s ease !important;
}

.bo-footer-col ul li a:hover {
  color: rgba(255, 255, 255, .88) !important;
}


/* ===============================
   Footer bottom row
   =============================== */

.bo-footer-bottom {
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}

.bo-footer-bottom p,
.bo-footer-bottom span {
  font-size: 13px !important;
  color: rgba(226, 232, 240, .52) !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.bo-footer-bottom a {
  color: rgba(226, 232, 240, .56) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color .12s ease !important;
}

.bo-footer-bottom a:hover {
  color: rgba(255, 255, 255, .72) !important;
}


/* ===============================
   Footer socials
   =============================== */

.bo-footer-socials,
.bo-footer-bottom .wp-block-social-links,
.bo-footer-bottom ul.wp-block-social-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.bo-footer-socials li,
.bo-footer-bottom .wp-social-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width:  36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  transition: background .12s ease, border-color .12s ease !important;
}

.bo-footer-socials li:hover,
.bo-footer-bottom .wp-social-link:hover {
  background: rgba(109, 223, 255, .09) !important;
  border-color: rgba(109, 223, 255, .20) !important;
}

.bo-footer-socials svg,
.bo-footer-bottom .wp-social-link svg {
  width:  18px !important;
  height: 18px !important;
  display: block !important;
  fill: rgba(226, 232, 240, .48) !important;
  stroke: none !important;
}


/* ===============================
   Footer links (legacy)
   =============================== */

.bo-footer a {
  color: rgba(226, 232, 240, .56);
  text-decoration: none;
  border-bottom: none;
  transition: color .12s ease;
}

.bo-footer a:hover {
  color: rgba(255, 255, 255, .88);
}


.bo-footer-top .wp-block-social-links {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}


/* ===============================
   Footer CTA link
   =============================== */

.bo-footer-cta-btn {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px !important;
  color: rgba(109, 223, 255, .70) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color .12s ease !important;
}

.bo-footer-cta-btn:hover {
  color: var(--bo-primary) !important;
}


/* ===============================
   Footer legal links (bottom bar)
   =============================== */

.bo-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}

.bo-footer-legal-links a {
  font-size: 13px !important;
  color: rgba(226, 232, 240, .52) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  white-space: nowrap;
  transition: color .12s ease !important;
}

.bo-footer-legal-links a:hover {
  color: rgba(255, 255, 255, .72) !important;
}


/* ===============================
   Footer address column (no links)
   =============================== */

.bo-footer-address li {
  color: rgba(226, 232, 240, .56) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  list-style: none !important;
}


/* ===============================
   Mobile footer
   =============================== */

@media (max-width: 768px) {

  /* Hide nav columns entirely */
  .bo-footer-columns,
  .bo-footer-columns.is-layout-grid,
  .bo-footer .bo-footer-columns {
    display: none !important;
  }

  .bo-footer {
    padding: 14px 0 10px;
  }

  .bo-footer-brand,
  .bo-footer-top {
    padding-bottom: 8px;
    margin-bottom: 4px;
  }

  .bo-footer-bottom {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .bo-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* ===============================
   Mobile hero image gallery
   =============================== */

@media (max-width: 768px) {

  /* Grid has inline styles — must override with !important */
  /* Class bo-image-grid is on wp-block-group div */
  .bo-image-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hide 2nd and 3rd images */
  .bo-image-grid .wp-block-image:nth-child(n+2) {
    display: none !important;
  }

  /* First image full width, adjusted height */
  .bo-image-grid .wp-block-image:first-child img {
    height: 260px !important;
  }
}


/* ===============================
   Footer columns — WP grid layout override
   WP рендерит bo-footer-columns как .wp-block-group.is-layout-grid
   =============================== */

@media (min-width: 769px) {

  .bo-footer-columns.is-layout-grid,
  .bo-footer .bo-footer-columns {
    display: grid !important;
    grid-template-columns: repeat(4, auto) !important;
    gap: 8px 40px !important;
  }

  .bo-footer-columns.is-layout-grid > .wp-block-group,
  .bo-footer .bo-footer-columns > .wp-block-group {
    width: auto !important;
    min-width: unset !important;
  }

}