/* ======================================================================
  1) FONT 
====================================================================== */
@font-face {
  font-family: 'Bevellier-Variable';
  src:
    url('/user/documents/font/Bevellier-Variable.woff2') format('woff2'),
    url('/user/documents/font/Bevellier-Variable.woff') format('woff'),
    url('/user/documents/font/Bevellier-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}


/* ======================================================================
  2) NAVIGACE – Bevellier, normální/lehčí váha, o něco větší, sjednocené stavy
====================================================================== */
.navigation-in ul li a {
  font-family: 'Bevellier-Variable', sans-serif;
  font-weight: 400;      /* lehké/úzké (fallback 400, pokud font nepodporuje) */
  font-size: 1.15em;     /* o chlup víc než původních 1.1em */
  line-height: 1.2;
  color: #263143;
  border: none;
  box-shadow: none;
  text-decoration: none;
}

/* sjednocení stavů, aby „neodskočilo“ menu při hover/focus/active */
.navigation-in ul li a:hover,
.navigation-in ul li a:focus,
.navigation-in ul li.active > a,
.navigation-in ul li.open > a,
.navigation-in ul li.expanded > a {
  font-weight: 400;
  color: #263143;
  border: none;
  box-shadow: none;
  text-decoration: none;
}

/* podřízené/sbalené části menu používají stejný font a velikost */
.navigation-in .menu-level-2 a,
.navigation-in .submenu a,
.navigation-in .collapse a {
  font-family: 'Bevellier-Variable', sans-serif;
  font-weight: 400;
  font-size: 1.15em;
  color: #263143;
}

/* pokud jsou v odkazech <b>, nedovolíme jim „ztučnit“ a rozhazovat šířku */
.navigation-in ul li a b {
  font-weight: 400;
}


/* ======================================================================
  3) BLOG – články (detail a přehledy)
====================================================================== */

/* Nadpis článku v detailu */
.type-post h1 {
  font-size: 24pt;
  font-weight: 700;
}

/* Wrapper kolem blogových dlaždic / článků */
.blogproduct {
  width: 100%;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

/* Dlaždice – základní varianta */
.blogproimg2 {
  width: calc(50% - 2.5px);
  padding: 10px;
  display: inline-block;
  max-width: 240px !important;
}

/* Společné přechody */
.blogproimg2,
.blogproimg3,
.blogproimg4 {
  transition: 350ms;
}

/* Hover efekt – zvětšení a podklad */
.blogproimg2:hover,
.blogproimg3:hover,
.blogproimg4:hover {
  transition: 350ms;
  transform: scale(1.05);
  background-color: #f9f9f9;
  border-radius: 10px;
}

/* Responsivní chování – mobil */
@media (max-width: 992px) {
  .blogproimg4 {
    width: calc(50% - 2.5px);
    padding: 2.5px;
    display: inline-block;
  }
  .type-post .text {
    width: 100%;
  }
  .blogproimg3 {
    width: calc(33% - 1.0);
    padding: 2.5px;
    display: inline-block;
  }
}

/* Responsivní chování – desktop */
@media (min-width: 992px) {
  .blogproimg4 {
    width: calc(50% - 2.5px);
    padding: 12.5px;
    display: inline-block;
    max-width: 240px !important;
  }
  .type-post .text {
    width: 80%;
    margin: auto;
  }
  .blogproimg3 {
    width: calc(33% - 2.5px);
    padding: 12.5px;
    display: inline-block;
  }
}


/* ======================================================================
  4) DETAIL PRODUKTU
====================================================================== */

.s_rightImg {
  display: flex;
  column-gap: 68px;
}

.rightImg_img img {
  max-width: 400px;
  border-radius: 2.285rem;
}

.rightImg_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.s_rightImg .rightImg_text h2 {
  font-weight: bold; /* Tučné písmo */
  font-size: 18px;   /* Velikost písma 18px */
}

.s_rightImg .rightImg_text p {
  font-size: 14px;   /* Velikost písma 14px */
}

.margin_buttom {
  margin-bottom: 68px;
}

.flex-reverse {
  flex-direction: row-reverse;
}

.references_row {
  display: flex;
  column-gap: 36px;
}

.reference {
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 18px;
}

.reference img {
  max-width: 88px;
  margin-left: auto;
  margin-right: auto;
}

.reference_title {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

/* MOBILE FIX – dříve 200px, nyní se obrázek přizpůsobí kontejneru */
@media (max-width: 992px) {
  .rightImg_img img {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .references_row {
    column-gap: 24px;
  }
  .s_rightImg {
    column-gap: 32px;
  }
}

@media (max-width: 480px) {
  .s_rightImg {
    display: block;
  }
  .references_row {
    display: block;
  }
  .rightImg_img {
    display: flex;
    justify-content: center;
  }
}

.full-width-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 2.285rem; /* Zaoblené rohy */
}

@media (max-width: 992px) {
  .full-width-image img {
    border-radius: 1.5rem; /* Mírně menší zaoblení pro menší zařízení */
  }
}

@media (max-width: 480px) {
  .full-width-image img {
    border-radius: 1rem; /* Ještě menší zaoblení pro malá zařízení */
  }
}


/* ======================================================================
  5) TYPOGRAFIE BANNERY + VIZUÁL WRAPPERU (dle zadání)
====================================================================== */
.benefitBanner__title,
.extended-banner-title {
  font-family: 'Bevellier-Variable', sans-serif !important;
}

.banner-wrapper {
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  border-radius: 20px;
}