/*
Theme Name: PODLAHY KOREJTKO S.R.O.
Author: MARVIO agency s.r.o.
Author URI: http://marvio.cz
Description: Naše společnost má více než 20 let zkušeností s montáží podlah, a to díky zakladateli a současnému jednateli, Miloslavu Korejtkovi. Pan Korejtko začínal v oboru jako zaměstnanec a později jako OSVČ, přičemž díky rostoucímu počtu zakázek a prvním zaměstnancům se firma postupně rozvinula. Od ledna 2017 působíme jako společnost s ručením omezeným, což nám umožnilo lépe reagovat na potřeby našich zákazníků a rozšířit naši nabídku.
Version: 1.0
*/



@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

body {
  font-family: "Source Sans 3", sans-serif!important;
}

.navbar-nav {
  margin-left: auto!important;
}


.nav-item > .nav-link {
  font-size: 1.1rem!important;
  color: #000!important;
  font-weight: 500!important;
  border-bottom: 3px solid #FFF!important;
  text-transform: uppercase!important;
  padding-top: 7px!important;
  padding-bottom: 7px!important;
  padding-left: 0px!important;
  padding-right: 0px!important;
}

.nav-item > .nav-link:hover,
.nav-item > .nav-link:focus {
  border-bottom: 3px solid #B74B2F!important;
  padding-bottom: 0px!important;
}

.dropdown-item {
  font-size: 1.1rem!important;
  text-transform: uppercase!important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #EF7F3B!important;
}

@media (min-width: 1100px) {
.nav-item > .nav-link {
  margin-right: 35px!important;
}}

.btn-primary {
  border-radius: 0px!important;
  background-color: #B74B2F!important;
  color: #FFF!important;
  font-size: 1.1rem!important;
  font-weight: 500!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
  text-transform: uppercase!important;
  border: none!important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #973E27!important;
}

.btn-01 {
  border-radius: 0px!important;
  background-color: #B74B2F!important;
  color: #FFF!important;
  font-size: 1.4rem!important;
  font-weight: 500!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
  text-transform: uppercase!important;
  border: none!important;
  width: 100%!important;
}

.btn-01:hover,
.btn-01:focus {
  background-color: #973E27!important;
}

.btn-02 {
  border-radius: 0px!important;
  background-color: #EEB528!important;
  color: #FFF!important;
  font-size: 1.4rem!important;
  font-weight: 500!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
  text-transform: uppercase!important;
  border: none!important;
  width: 100%!important;
}

.btn-02:hover,
.btn-02:focus {
  background-color: #D99A00!important;
}

.btn-03 {
  border-radius: 0px!important;
  background-color: #1E4890!important;
  color: #FFF!important;
  font-size: 1.4rem!important;
  font-weight: 500!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
  text-transform: uppercase!important;
  border: none!important;
  width: 100%!important;
}

.btn-03:hover,
.btn-03:focus {
  background-color: #05317B!important;
}

@media (max-width: 1099px) {
.btn-primary,
.btn-warning,
.btn-dangerous {
  width: 100%!important;
}}

@media (min-width: 1100px) {
.btn-primary {
  margin-left: 20px!important;
}}

.btn-secondary {
  border-radius: 0px!important;
  background-color: #B74B2F!important;
  color: #FFF!important;
  font-size: 1.1rem!important;
  font-weight: 500!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
  text-transform: uppercase!important;
  border: none!important;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.50)!important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #973E27!important;
}

.btn-warning {
  border-radius: 0px!important;
  background-color: #B74B2F!important;
  color: #FFF!important;
  font-size: 1.1rem!important;
  font-weight: 500!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
  text-transform: uppercase!important;
  border: none!important;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #973E27!important;
}

.btn-dangerous {
  border-radius: 0px!important;
  background-color: #FFF!important;
  color: #000!important;
  font-size: 1.4rem!important;
  font-weight: 500!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
  text-transform: uppercase!important;
  border: none!important;
}

.btn-dangerous:hover,
.btn-dangerous:focus {
  background-color: #E5E5E5!important;
}

.white-color {
  color: #FFF!important;
}

.black-color {
  color: #000!important;
}

.gold-color {
  color: #EEB528!important;
}

.orange-color {
  color: #B74B2F!important;
}

.green-color {
  color: #EF7F3B!important;
}

/* Landing Page */
.web-title {
  padding-top: 200px!important;
  padding-bottom: 200px!important;
}

@media (max-width: 1099px) {
.web-title {
  padding-top: 150px!important;
  padding-bottom: 150px!important;
}}

.web-title-content > span {
  font-size: 1.875rem!important;
  color: #FFF!important;
  text-transform: uppercase!important;
  font-weight: 400!important;
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.50)!important;
}

@media (max-width: 800px) {
.web-title-content > span {
  font-size: 1.5rem!important;
}}

@media (max-width: 500px) {
.web-title-content {
  text-align: center!important;
}}

.web-title-content > h1 {
  font-size: 3.5rem!important;
  font-weight: 700!important;
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.50)!important;
  color: #FFF!important;
  text-transform: uppercase!important;
  padding-top: 15px!important;
  padding-bottom: 15px!important;
}

@media (max-width: 800px) {
.web-title-content > h1 {
  font-size: 3rem!important;
}}

.web-hero {
  padding-bottom: 80px!important;
  padding-top: 80px!important;
}

.web-basic-content > .display-1 {
  font-size: 2.5rem!important;
  text-transform: uppercase!important;
  font-weight: 700!important;
  color: #000!important;
  padding-bottom: 20px!important;
}

.web-basic-content > .display-3 {
  font-size: 1.7rem!important;
  font-weight: 700!important;
  text-transform: uppercase!important;
  padding-top: 20px!important;
}

.web-basic-content > p.contact {
  padding-bottom: 5px!important;
  margin-bottom: 0px!important;
}

.web-basic-content > p > i {
  color: #B74B2F!important;
  font-size: 1.3rem!important;
  margin-right: 10px!important;
  margin-top: 3px!important;
}

.web-basic-content > p > a {
  color: #000!important;
  font-size: 1.1rem!important;
  text-decoration: none!important;
  font-weight: 700!important;
  border-bottom: 2px solid #FFF!important;
}

.web-basic-content > p > a:hover,
.web-basic-content > p > a:focus {
  border-bottom: 2px solid #B74B2F!important;
}

.web-basic-content > p,
.modal-body > p {
  color: #000!important;
  font-size: 1.1rem!important;
  text-align: justify!important;
}

ul.wp-block-list > li {
  color: #000!important;
}

@media (min-width: 1100px) {
.web-basic-content > p {
  max-width: 90%!important;
}}

.web-basic-content > img {
  margin-bottom: 15px!important;
}

.web-advantages {
  background-color: #B74B2F!important;
}

.web-basic-content > .display-2 {
  font-size: 1.875rem!important;
  font-weight: 700!important;
  text-transform: uppercase!important;
}

@media (max-width: 1099px) {
.web-basic-content > .display-2 {
  font-size: 1.5rem!important;
}}

.web-basic-content > .text-adv {
  color: #FFF!important;
  font-size: 1rem!important;
  max-width: 80%!important;
  margin-left: auto!important;
  margin-right: auto!important;
  text-align: center!important;
}

.web-new-box-detail > a > img {
  margin-bottom: 15px!important;
}

.web-new-box-detail > a {
  color: #000!important;
  font-size: 1.4rem!important;
  text-transform: uppercase!important;
  font-weight: 400!important;
  text-decoration: none!important;
  border-bottom: 3px solid #FFF!important;
}

.web-new-box-detail > a:hover,
.web-new-box-detail > a:focus {
  border-bottom: 3px solid #1E4890!important;
}

.web-cta {
  background-color: #B74B2F!important;
  padding-top: 45px!important;
  padding-bottom: 45px!important;
}

@media (max-width: 850px) {
.web-cta {
  padding-top: 70px!important;
  padding-bottom: 70px!important;
}}

.web-cta-content {
  font-size: 2.5rem!important;
  color: #FFF!important;
  text-transform: uppercase!important;
  line-height: 2.9rem!important;
}

@media (max-width: 1099px) {
.web-cta-content {
  font-size: 2rem!important;
}}

@media (max-width: 1099px) {
.web-cta-content {
  text-align: center!important;
  padding-bottom: 30px!important;
}}

.card-body > p {
  font-size: 1.5rem!important;
  font-weight: 400!important;
  color: #000!important;
  max-width: 90%!important;
  font-style: italic!important;
}

@media (min-width: 1100px) {
.card-body > p {
  max-width: 80%!important;
  margin-left: auto!important;
  margin-right: auto!important;
}}

span.client-name {
  font-size: 1.5rem!important;
  font-weight: 700!important;
  color: #000!important;
  font-style: italic!important;
}

.swiper-pagination-bullet-active {
  background-color: #1E4890!important;
}

.web-btns {
  padding-top: 45px!important;
  padding-bottom: 30px!important;
  background: rgba(217, 217, 217, 0.60)!important;
}

@media (max-width: 850px) {
.web-btns {
  padding-top: 55px!important;
  padding-bottom: 55px!important;
}}

@media (max-width: 850px) {
.web-btns-box {
  padding-top: 7px!important;
  padding-bottom: 7px!important;
}}

.web-footer {
  padding-top: 70px!important;
  padding-bottom: 70px!important;
}

.web-footer-logo {
  padding-top: 55px!important;
}

@media (max-width: 850px) {
.web-footer-logo {
  padding-top: 0px!important;
  padding-bottom: 70px!important;
  text-align: center!important;
}}

@media (max-width: 550px) {
.web-footer-content {
  padding-bottom: 20px!important;
  text-align: center!important;
}}

.web-footer-content > span {
  font-size: 1.3rem!important;
  font-weight: 700!important;
  color: #FFF!important;
  text-transform: uppercase!important;
}

.web-footer-content > ul {
  list-style-type: none!important;
  padding: 0px!important;
  margin: 0px!important;
  padding-top: 20px!important;
  padding-bottom: 10px!important;
}

.web-footer-content > p {
  color: #FFF!important;
  padding: 0px!important;
  margin: 0px!important;
  padding-bottom: 10px!important;
}

.web-footer-content > ul > li {
  padding-bottom: 5px!important;
}

.web-footer-content > ul > li > strong {
  color: #B74B2F!important;
  margin-right: 10px!important;
}

.web-footer-content > ul > li > a {
  color: #FFF!important;
  font-size: 1.1rem!important;
  text-decoration: none!important;
  font-weight: 400!important;
  border-bottom: 2px solid #292929!important;
}

.web-footer-content > ul > li > a:hover,
.web-footer-content > ul > li > a:focus {
  border-bottom: 2px solid #D99A00!important;
}

.web-footer-content > a {
  font-size: 2.8rem!important;
  margin-right: 15px!important;
  color: #EEB528!important;
}

.web-footer-content > a:hover,
.web-footer-content > a:focus {
  color: #D99A00!important;
}

.web-footer-copy > p {
  font-size: 1.125rem!important;
  color: #FFF!important;
  font-weight: 400!important;
}

.web-footer-copy > p > a {
  color: #FFF!important;
  font-weight: 700!important;
  text-decoration: none!important;
  border-bottom: 2px solid #292929!important;
}

.web-footer-copy > p > a:hover,
.web-footer-copy > p > a:focus {
  border-bottom: 2px solid red!important;
}

.google-maps {
  margin-bottom: -9px!important;
}

.step-number {
  background-color: rgba(164, 139, 91, 0.50)!important;
}

.step-body > .display-4 {
  text-transform: uppercase!important;
  font-size: 1.3rem!important;
  color: #18677B!important;
}

.step-body > p {
  font-size: 1rem!important;
  margin-top: 15px!important;
  color: #18677B!important;
}

.web-invest-dots > ul,
.web-basic-content > ul {
  list-style-type: none!important;
  padding: 0px!important;
  margin: 0px!important;
}

.web-invest-dots > ul > li {
  padding-bottom: 10px!important;
  text-align: justify!important;
}

@media (min-width: 1000px) {
.web-invest-dots > ul > li,
.web-basic-content > ul > li  {
  max-width: 95%!important;
}}

.web-basic-content > ul > li {
  color: #18677B!important;
  padding-bottom: 15px!important;
  font-size: 1.1rem!important;
}

.web-basic-content > ul > li > i {
  color: #EF7F3B!important;
  font-size: 1.4rem!important;
  margin-right: 10px!important;
}

.modal-content {
  border-radius: 0px!important;
}

/* WP Forms */
div.wpforms-container-full {
  margin-bottom: 0px!important;
}

div.wpforms-container-full .wpforms-form input
{
  background-color: inherit!important;
  border-bottom: 1px solid #000!important;
  border-left: none!important;
  border-right: none!important;
  border-top: none!important;
  border-radius: 0px!important;
  color: #000!important;
  font-weight: 400!important;
  font-size: 1.2rem!important; 
}

div.wpforms-container-full .wpforms-form textarea {
  background-color: inherit!important;
  border-bottom: 1px solid #000!important;
  border-left: none!important;
  border-right: none!important;
  border-top: none!important;
  border-radius: 0px!important;
  color: #000!important;
  font-weight: 400!important;
  font-size: 1.2rem!important; 
}

.wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
  color: #000!important;
}
 
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #000!important;
   opacity: 1!important;
}
 
.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #000!important;
   opacity: 1!important;
}
 
.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000!important;
}
 
.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
  color: #000!important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
  font-size: 1.5rem!important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
  font-size: 1.5rem!important;
}

.wpforms-field-description {
  margin-top: -17px!important;
  margin-left: 30px!important;
  font-size: 1rem!important;
  color: #000!important;
}

.wpforms-field-description > a {
  color: #1E4890!important;
  font-weight: 700!important;
  text-decoration: none!important;
}

.wpforms-field-description > a:hover,
.wpforms-field-description > a:focus {
  text-decoration: underline!important;
}

.wpforms-field-label-inline {
  display: none!important;
}

.wpforms-submit-container {
  margin-top: 0px!important;
  padding-top: 0px!important;
}

div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
  font-family: "Source Sans 3", sans-serif;
  margin-top: 10px!important;
}

div.wpforms-container-full input[type=submit]:hover, div.wpforms-container-full button[type=submit]:hover, div.wpforms-container-full .wpforms-page-button:hover, .wp-core-ui div.wpforms-container-full input[type=submit]:hover, .wp-core-ui div.wpforms-container-full button[type=submit]:hover, .wp-core-ui div.wpforms-container-full .wpforms-page-button:hover {
  font-family: "Source Sans 3", sans-serif;
  margin-top: 10px!important;
}

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}
/* ==========================================================================
   SEO / GEO – přeskočení na obsah + blok častých dotazů (FAQ)
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1080;
  padding: 10px 20px;
  background: #292929;
  color: #fff !important;
  text-decoration: none;
}

.web-faq {
  padding-bottom: 60px !important;
}

.web-faq-item {
  border-bottom: 1px solid #e4e4e4;
  padding: 18px 0;
}

.web-faq-item:first-of-type {
  border-top: 1px solid #e4e4e4;
}

.web-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
}

.web-faq-item > summary::-webkit-details-marker {
  display: none;
}

.web-faq-item > summary h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.4;
}

.web-faq-item > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.75rem;
  line-height: 1;
  color: #B74B2F;
  transition: transform 0.2s ease;
}

.web-faq-item[open] > summary::after {
  content: "–";
}

.web-faq-item > summary:hover h3,
.web-faq-item > summary:focus-visible h3 {
  color: #B74B2F;
}

.web-faq-answer {
  padding-top: 12px;
}

.web-faq-answer p {
  margin-bottom: 0;
  max-width: 100% !important;
}

/* Adresa v patičce – přebírá stejný vzhled jako odstavce vedle ní. */
.web-footer-content > address {
  color: #FFF !important;
  padding: 0px !important;
  margin: 0px !important;
  padding-bottom: 10px !important;
  font-style: normal !important;
}

/* ==========================================================================
   Terasy – čtvrté tlačítko služeb na úvodní stránce
   ========================================================================== */

.btn-04 {
  border-radius: 0px!important;
  background-color: #4A7C59!important;
  color: #FFF!important;
  font-size: 1.4rem!important;
  font-weight: 500!important;
  padding-left: 40px!important;
  padding-right: 40px!important;
  text-transform: uppercase!important;
  border: none!important;
  width: 100%!important;
}

.btn-04:hover,
.btn-04:focus {
  background-color: #3A6347!important;
}

/* Se čtyřmi tlačítky v řadě je sloupec užší – zmenšíme odsazení a písmo,
   aby se delší názvy služeb vešly na jeden řádek. */
@media (min-width: 992px) {
  .web-btns .btn-01,
  .web-btns .btn-02,
  .web-btns .btn-03,
  .web-btns .btn-04 {
    padding-left: 10px!important;
    padding-right: 10px!important;
    font-size: 1.1rem!important;
  }
}

/* Číslovaný postup spolupráce na stránce Terasy */
.web-steps {
  max-width: 100%!important;
  padding-left: 20px!important;
}

.web-steps > li {
  padding-bottom: 12px!important;
  line-height: 1.6!important;
}

/* ==========================================================================
   Datumový štítek na kartách referencí, blogu a akcí
   (dřív bylo v Přizpůsobit → Doplňkové CSS, teď je to součást šablony)
   ========================================================================== */

.box-image-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%!important;
  margin-bottom: 15px!important;
}

.box-image-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
}

.date-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto!important;   /* pojistka, kdyby v Přizpůsobit zbylo staré pravidlo */
  z-index: 2;
  background-color: #ff6a00;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

@media (max-width: 575px) {
  .date-badge {
    font-size: 13px;
    padding: 5px 10px;
  }
}

/* ==========================================================================
   Provozní upozornění – lišta nad menu
   Text se nastavuje v Přizpůsobit → Provozní upozornění.
   ========================================================================== */

.notification-bar {
  background-color: #f4a700!important;
  border-bottom: 3px solid #B74B2F!important;
  padding-top: 12px!important;
  padding-bottom: 12px!important;
}

.notification-bar .col-12 {
  /* Tmavý text na oranžové má kontrast 7,2:1. Bílý text měl jen 2:1
     a byl na tomhle podkladu prakticky nečitelný. */
  color: #241A00!important;
  font-size: 17px!important;
  font-weight: 500!important;
  line-height: 1.5!important;
}

.notification-bar-icon {
  font-size: 20px!important;
  vertical-align: -3px!important;
  margin-right: 6px!important;
}

.notification-bar-label {
  display: inline-block;
  background-color: #292929;
  color: #FFF;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: 1px;
}

.notification-bar a {
  color: #241A00!important;
  font-weight: 700!important;
  text-decoration: underline!important;
}

.notification-bar a:hover,
.notification-bar a:focus {
  color: #000!important;
}

@media (max-width: 767px) {
  .notification-bar .col-12 {
    font-size: 15px!important;
  }
  .notification-bar-label {
    display: block;
    margin: 0 auto 6px auto;
    max-width: max-content;
  }
}

/* ==========================================================================
   Jednotné náhledy fotek, karty a galerie
   ========================================================================== */

/* --- Karta (reference, blog, akce, výsledky vyhledávání) --- */

/* Původní pravidlo kreslilo border-bottom na inline odkaz, takže se čára
   objevila pod každým zalomeným řádkem nadpisu zvlášť. Odkaz je teď blok
   a podtržení nese jen samotný titulek. */
.web-new-box-detail > a,
.web-new-box-detail > a.box-link {
  display: block!important;
  color: #000!important;
  font-size: 1.4rem!important;
  text-transform: uppercase!important;
  font-weight: 400!important;
  text-decoration: none!important;
  border-bottom: none!important;
}

.web-new-box-detail > a > img {
  margin-bottom: 0!important;
}

.box-title {
  display: inline;
  background-image: linear-gradient(#1E4890, #1E4890);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
  padding-bottom: 3px;
  transition: background-size 0.35s ease, color 0.25s ease;
}

.web-new-box-detail > a:hover .box-title,
.web-new-box-detail > a:focus-visible .box-title {
  background-size: 100% 3px;
  color: #1E4890;
}

/* --- Jednotný poměr stran u všech náhledů --- */

.box-image-wrapper,
.korejtko-gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background-color: #ededed;
}

.box-image-wrapper {
  margin-bottom: 15px!important;
}

.box-image-wrapper img,
.korejtko-gallery-item img,
.web-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  margin: 0!important;
  transition: transform 0.45s ease;
}

.web-new-box-detail > a:hover .box-image-wrapper img,
.web-new-box-detail > a:focus-visible .box-image-wrapper img,
.korejtko-gallery-item:hover img,
.korejtko-gallery-item:focus-visible img {
  transform: scale(1.06);
}

/* --- Efekt při najetí na fotku v galerii (závoj + lupa) --- */

.korejtko-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(23, 33, 23, 0);
  transition: background-color 0.3s ease;
}

.korejtko-gallery-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background-color: #ff6a00;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.korejtko-gallery-item:hover::after,
.korejtko-gallery-item:focus-visible::after {
  background-color: rgba(23, 33, 23, 0.45);
}

.korejtko-gallery-item:hover::before,
.korejtko-gallery-item:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.korejtko-gallery-item:focus-visible {
  outline: 3px solid #1E4890;
  outline-offset: 3px;
}

/* --- Samostatná fotka vedle textu --- */

.web-media {
  margin: 0!important;
  overflow: hidden;
  border-radius: 6px;
  background-color: #ededed;
}

/* Na výšku orientovaná fotka vedle delšího textu – jinak by sekci roztáhla
   do nesmyslné výšky. */
.web-media-tall img {
  aspect-ratio: 3 / 4;
}

@media (max-width: 991px) {
  .web-media-tall img {
    aspect-ratio: 4 / 3;
  }
  .web-media {
    margin-top: 25px!important;
  }
}

/* Galerie vložená v obsahu příspěvku */
.web-content-gallery .korejtko-gallery-item,
.korejtko-gallery .korejtko-gallery-item {
  display: block;
}

/* ==========================================================================
   Drobečková navigace
   ========================================================================== */

.breadcrumb-scroller {
  background-color: transparent!important;
  border: none!important;
  border-bottom: 1px solid #E4E4E4!important;
  border-radius: 0!important;
  padding: 0 0 12px 0!important;
  margin-top: 30px!important;
  margin-bottom: 0!important;
  overflow-x: auto;
}

.breadcrumb-scroller .breadcrumb {
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  font-size: 0.82rem!important;
  text-transform: uppercase!important;
  letter-spacing: 0.08em!important;
  font-weight: 500!important;
}

/* Položky i oddělovač zarovnáme na střed, jinak šipka „›" klesá pod účaří. */
.breadcrumb-scroller .breadcrumb-item {
  display: flex!important;
  align-items: center!important;
}

.breadcrumb-scroller .breadcrumb-item a {
  color: #7A7A7A!important;
  text-decoration: none!important;
  transition: color 0.2s ease;
}

.breadcrumb-scroller .breadcrumb-item a:hover,
.breadcrumb-scroller .breadcrumb-item a:focus {
  color: #B74B2F!important;
}

.breadcrumb-scroller .breadcrumb-item.active {
  color: #172117!important;
  font-weight: 700!important;
}

/* Oddělovač – šipka v barvě značky místo výchozího lomítka.
   Kreslíme ji z okrajů, ne znakem „›". Ten totiž uvnitř svého em-boxu sedí
   nízko (leží kolem střední výšky písma, ne kolem středu verzálek), takže by
   se s velkými písmeny nesrovnal ani při vycentrovaném boxu. */
.breadcrumb-scroller .breadcrumb-item + .breadcrumb-item::before {
  content: ""!important;
  display: block!important;
  float: none!important;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  padding: 0!important;
  margin: 0 0.65rem 0 0.3rem;
  border-top: 2px solid #B74B2F;
  border-right: 2px solid #B74B2F;
  transform: rotate(45deg);
}

.breadcrumb-scroller .breadcrumb-item .bx {
  display: block;
  font-size: 1.15rem!important;
  line-height: 1!important;
}

/* ==========================================================================
   Perex a otázky v rozhovoru (stránka O nás)
   ========================================================================== */

.web-basic-content > p.perex {
  font-size: 1.25rem!important;
  line-height: 1.6!important;
  color: #3A3A3A!important;
  border-left: 4px solid #B74B2F!important;
  padding-left: 20px!important;
  margin-bottom: 30px!important;
}

/* Otázky v rozhovoru – ať je na první pohled vidět, kde otázka končí
   a začíná odpověď.
   Výjimka pro .display-2: tou třídou jsou označené nadpisy v sekci výhod,
   které mají vlastní vzhled a tenhle styl na ně patřit nesmí. */
.web-basic-content > h3:not(.display-2) {
  margin-top: 38px!important;
  margin-bottom: 12px!important;
  font-size: 1.35rem!important;
  line-height: 1.4!important;
  color: #172117!important;
}

.web-basic-content > h3:not(.display-2)::before {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  background-color: #B74B2F;
  margin-bottom: 14px;
}

.web-basic-content > p > em {
  display: inline-block;
  margin-top: 6px;
  color: #7A7A7A;
  font-style: normal;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 575px) {
  .web-basic-content > p.perex {
    font-size: 1.1rem!important;
    padding-left: 15px!important;
  }
}

/* ==========================================================================
   Sekce výhod (rezavý pruh s ikonami)
   ========================================================================== */

.web-advantages .web-basic-content > img {
  margin-bottom: 10px!important;
}

.web-advantages .web-basic-content > .display-2 {
  /* Barvu řeší tenhle selektor, ne pomocná třída v šabloně. */
  color: #FFF!important;
  margin-top: 0!important;
  margin-bottom: 12px!important;
}

/* ==========================================================================
   Hero sekce – video na pozadí
   ========================================================================== */

.web-title {
  position: relative!important;
  overflow: hidden!important;
}

.web-title-video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  /* Dokud se video nenačte, prosvítá pod ním obrázek na pozadí. */
  opacity: 0;
  transition: opacity 0.6s ease;
}

.web-title-video.is-ready {
  opacity: 1;
}

.web-title-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Obsah musí zůstat nad videem i nad ztmavením. */
.web-title > .container {
  position: relative;
  z-index: 2;
}