/* common */

h1, h2 { font-size: 32px; margin-top: var(--text-heading-margin); margin-bottom: var(--text-heading-margin);}
h1 { margin: var(--text-heading-margin) 0;}
h2 { margin: var(--text-margin) 0;}
h1.heading {margin-top: 0; padding-top: var(--text-heading-margin);}
h3 { font-size: var(--h3-font-size)}

p, td, tr, li, h3 { line-height: var(--text-line-height);}
p, ul { margin-top: var(--text-margin); margin-bottom: var(--text-margin); }


ul li { margin-bottom: var(--list-item-margin); }
ul li:last-child { margin-bottom: 0; }
ul.dot, ul.not-dot { padding-left:0; margin-left: 3px; }
ul.dot li { list-style-type:none; padding-left:18px; background:url(images/icons/dot-black.png) no-repeat left -1px; }
ul.not-dot li { list-style-type:none;  }
.box ul.dot { margin-left: -3px;}


/* intro */

.intro-container { max-width: 670px;  display: flex; flex-direction: row; align-items: flex-start; gap: 4.8%; margin: var(--box-margin) 0; }
.intro-text {  width: 36.6%; background-color: var(--sandywarmgrey); background-image: url("images/banner-sandy-warm-light.jpg"); padding: 1px 14px; color: black;  border-radius: 4px;}
.intro-text strong { font-weight: normal; color: var(--sandyellow); white-space: nowrap;}
.intro-image {  width: 58.6%; }
.intro-image img {  display: block;  max-width: 100%; }

@media (max-width: 850px)
{
    .intro-text {  width: 39.6%;  }
    .intro-image { width: 56.8%; }
}

@media (max-width: 530px)
{
    .intro-container { flex-direction: column; align-items: center; gap: var(--box-margin);}
    .intro-text, .intro-image {  width: auto;  max-width: 88%;  }
    .intro-image { max-width: 80%;}
}

/*  panels  */

    /* >> .express-panel, .light-panel, .image-panel */

.panel { display: flex; flex-direction: column; align-items: center; padding: 6px 0;  border-radius: 3px; gap: 8px; }
.article .panel {  max-width: var(--box-max-width); margin-top: var(--box-margin);  margin-bottom: var(--box-margin);  }

.panel h2 { text-align: center; margin: 8px 0; font-size: 29px; letter-spacing: -1px;}
.panel .text { text-align: center;  margin: 8px 0; }
.panel .label-button-wrapper { margin: 20px 0; display: flex; gap:12px;  }
.panel .label-button-link { font-weight: 700; padding: 0 20px;  border-radius: 28px; font-size: 26px; display: block; width: fit-content;margin: 0 auto; line-height: 40px; height: 40px; letter-spacing: -2px; word-spacing: 2px; text-decoration: none; white-space: nowrap; background-position: 12px center;  background-repeat: no-repeat; }
.panel .phone-link { cursor: default;}
.panel .small-button-link { font-size: 18px; line-height: 38px; height: 38px; font-weight: normal; letter-spacing: 0; }
.panel .small-button-link span { position: relative; top: -1px;}

.phone-text-link { color: white; text-decoration: none;}

.express-panel { background-color: var(--metalblack); }
.express-panel h2 { color: white; letter-spacing: 0; }
.express-panel .text { color: white; }
.express-panel .text strong { font-weight: normal; color: var(--sandyellow);}
.express-panel .mail-link { color: var(--sandyellow-strong); padding: 3px 14px 4px;  border-radius: 16px;}
.express-panel .mail-link:hover {  background-color: #fff3;}
.express-panel .label-button-link { padding-left: 47px; background-color: var(--sandyellow); color: black;  background-image: url("images/icons/phone-black-28.png"); }

.metal-panel-variante {  background-color: var(--metalblack);}

.light-panel { background-color: var(--lightgrey); }
.light-panel h2 { color: var(--metalblack-x); }
.light-panel .text { color: black; }
.light-panel .text strong { font-weight: normal; color: blue;}
.light-panel .label-button-link { background-color: var(--metalblack); color: white;  }
.light-panel .label-button-link:hover { background-color: var(--metalblack-hover); }

.light-panel .centered-box {  width: fit-content;  margin: 0 auto; text-align: left; }

.image-panel { width: fit-content;}
.image-panel img { display: block; max-width: 100%;  border-radius: 3px; }
.image-panel div {  position:relative;}

.bbox { margin-left: var(--box-slight-indent); margin-right: var(--box-slight-indent);}


/*  boxes  */

.box { display: flex; flex-direction: column; gap: var(--text-margin);  padding: 0 12px 0 18px; margin-top: var(--box-margin); margin-bottom: var(--box-margin); border-radius: 4px; max-width: var(--box-max-width);  }
.box a { padding: 0 3px 2px; margin: 0 -1px;  border-radius: 2px;}
.box a:hover {  background-color: #9996;}

.light-box { background-color: var(--lightgrey); color: #000;}
.express-box  { background-color: var(--metalblack); color:#fff; }
.light-box a { color: blue;}
.express-box strong, .express-box a { font-weight: normal; color: yellow;}
.box a:hover { /*text-decoration: none;*/}
.box h2 { font-size: 28px;  }
.express-box h2 { color: #fff; letter-spacing: 0;}
.express-box ul.dot li  { background-image:url(images/dot-white.png); }


p.todo { display: flex; justify-content: center; align-items: center; margin-top: var(--box-margin);  margin-bottom: var(--box-margin); height: 240px; padding:28px 12px; text-align: center;  max-width: var(--box-max-width); background-color: #fde1e3; color: #a4a4a4; border: 1px dashed #a4a4a4;}

p.todo:before { content: "Doplnit";  }
p.todo:after { content: "....";  }

@media (max-width: 610px)
{
    .box { max-width: none; }
    ul.dot li { background-position-y: -2px; /* fix android */ }
    .article .panel { margin-left:  auto; margin-right:  auto; }
    p.todo { margin-right: auto;  margin-left: auto;  min-width: auto; width: auto; max-width: none;}
}

@media (max-width: 520px)
{
    .box { padding: 0 8px 0 12px; }
    .box ul.dot { margin-left: -2px;}
    .box p:first-child, .box ul:first-child, .box h2:first-child { margin-top: var(--text-margin-mobile); }
    .box p:last-child, .box ul:last-child, .box h2:last-child { margin-bottom: var(--text-margin-mobile); }
}

    /* .bbox >> .box, .panel, .image-container, overrides code above ! */
/*.panel + .panel   { margin-top: var(--text-margin);}*/
.bbox + .bbox   { margin-top: var(--box-box-margin);}
@media (max-width: 700px)
{
    .bbox + .bbox   { margin-top: var(--box-margin);}
}

/*  images  */

    /* must contain div > img+p */

.image-container { display: flex; flex-flow: wrap row; justify-content: flex-start; align-items: flex-end; gap: var(--box-box-margin) 4.0%; margin-top: var(--box-margin); margin-bottom: var(--box-margin); }
.narrow-single-image {  margin-left: 2.0%; }
.image-container img { display: block; max-width: 100%;}
p.image-caption { margin: 10px 0 0 1px;}

    /* apply on inner div */
    .twin-large-image { max-width: 460px;}
    .twin-medium-image { max-width: 390px;}
    .twin-small-image { max-width: 330px;}
    .small-image { max-width: 580px;}
    .medium-image { max-width: 700px;}
    .large-image { max-width: 820px;}


@media (max-width: 1030px)
{
    .twin-large-image { max-width: initial;}
}


@media (max-width: 910px)
{
    .twin-medium-image { max-width: none; }
    .narrow-multi-images {  margin-left: 4.0%; }
}

@media (max-width: 610px)
{
    .image-container {  justify-content: center; gap: var(--box-margin) 4.0%; }
    p.image-caption { margin-top: 8px;}
    .narrow-single-image, .narrow-multi-images {  margin-left: auto; }
    .narrow-single-image div, .narrow-multi-images div {  margin: 0 4.0%; max-width: 78%; }
}

@media (max-width: 520px)
{
    .narrow-single-image div {   margin: 0; }
    .narrow-single-image img { margin: 0 auto;}
}

@media (max-width: 320px)
{
    .narrow-single-image {  background-color: yellow; }
    .narrow-single-image img { max-width: 80%;}
}


/* 2 column text */

.col2-container {  display: flex; flex-direction: row; align-items: flex-start; gap: var(--box-margin);  max-width: var(--text-col2-max-width); margin: var(--text-margin) 0; }
.col-item { min-width: 190px;}
.col-item > :first-child { margin-top: 0; }
.col-item > :last-child { margin-bottom: 0; }

@media (max-width: 820px)
{
    .col2-container { display: block; }
    .col-item { min-width: auto;}
    .col-item > :first-child { margin-top: var(--text-margin); }
    .col-item > :last-child { margin-bottom: var(--text-margin); }
    .col-item > ul.join-list-first { margin-bottom: var(--list-item-margin); }
    .col-item > ul.join-list-last { margin-top: var(--list-item-margin); }
}

/* table */

.min-table { margin-bottom: var(--text-margin);}
.min-table td { padding: 3px 6px;}

.pricelist-container { max-width: 840px; clear: right; }

.table { margin: var(--box-margin) 0;}
.table td { padding: 4px 15px; border:1px solid var(--lightgrey); line-height: 24px;}
.table .heading td { font-weight: bold;  background-color: var(--lightgrey);  /*white-space: nowrap;*/ }
.table .heading td {vertical-align: inherit;}
.table .heading td:nth-child(n+1) { border-right-color: white;}
.table .heading td:last-child { border-right-color: var(--lightgrey);}
.table .price { white-space: nowrap; text-align: right; width: 100px; padding-right: 20px;}

.table-pricelist { margin-top: 0;}
.product-image { max-width: 100% ;}

/*.article*/ h3.table-title { margin: var(--box-margin) 0 0 0; padding: 8px 15px; background-color: var(--metalblack); color: white; max-width: initial; }

.smart-table tbody tr:hover td { background-color: #f6f6f6;  cursor: default;}
.active-table tbody tr[data-link]:hover td { background-color: #f6f6f6; }
.active-table tbody tr[data-link].data-link:hover td { cursor: pointer;}
tbody tr td { transition: var(--fast-transition);}

/*@media (max-width: 700px)*/
/*{*/
/*    .table tr td:first-child  { width: 73%;}    !* use inherit - study this theme ;) *!*/
/*    .table .duration { width: auto; padding-right: 15px;}*/
/*    .table .price { width: 86px; padding-right: 15px;}*/
/*}*/

/*@media (max-width: 520px)*/
/*{*/
/*    .pricelist-container { margin-left: -1px;  margin-right: -1px; }*/
/*    .table td {  padding-right: 6px;  padding-left: 6px;}*/
/*    .table tr td:first-child  {  width: auto;}*/
/*    .table .price, .table .duration { width: auto; padding-right: 4px;  padding-left: 4px;}*/
/*}*/

/* breakpoints */

.mobile-view { display: none;}

@media (max-width: 850px)
{
    .desktop-view { display: none;}
    .mobile-view { display: block;} /* initial sometimes works not satisfiably */
}

.menu-mobile-view { display: flex;}
.toggle-menu-button { display: none;}

@media (max-width: 650px)
{
    .main-menu .button { padding-left: 28px;  padding-right: 28px; }
    .menu-mobile-view { display: none;}
    .toggle-menu-button { display: block;}
}

/* global overriding */

.menu-opened { display: flex;}

/* new flex-flow boxes/imageBoxes */

.photo-wrapper {  display: flow-root;  width: fit-content;  max-width: 800px; }
.sample-photo { display: block; max-width: 100%;}
.photo-caption { }

.text-panel {  display: flow-root; max-width: 700px;  background-color: #f3f3f3; padding: 0 20px;  border-radius: 4px; }