/************************************************************************************************************************/
/**************************************************** HOMEPAGE **********************************************************/
/************************************************************************************************************************/
@media screen {
  /******************** NASTAVENÍ HOMEPAGE ********************/
  body:has(> #chatymore) {
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-accent-hover: #8f1930;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-text-size: 1rem;
    --bk-section-heading: clamp(1.4rem, 2.3vw, 1.9rem);
    --bk-hero-heading: clamp(1.25rem, 2.5vw, 1.9rem);
    --bk-width: 76rem;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-section-space: clamp(1.65rem, 3.4vw, 2.6rem);
    --bk-radius: 0.9rem;
    --bk-card-padding: 15px;
    --bk-card-gap: 15px;
    --bk-list-gap: 0.25rem;
    --bk-listing-padding: var(--bk-card-padding);
    --bk-hero-height: 380px;
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-search-height: 2.65rem;
    --bk-menu-height: 3.05rem;
    --bk-family-feature-height: 17rem;
    --bk-family-small-height: 14rem;

    --bk-inner: min(var(--bk-width), calc(100% - 2 * var(--bk-gutter)));
    --bk-edge: max(var(--bk-gutter), calc((100% - var(--bk-width)) / 2));
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);

    display: flex;
    flex-direction: column;
    margin: 0;
    background-color: var(--bk-page);
    background-image: var(--bk-background-image);
    background-repeat: repeat;
    color: var(--bk-text);
    font: var(--bk-text-size) / 1.55 var(--bk-font);
  }

  /****************** ODKAZY A NADPISY SEKCÍ ******************/
  body:has(> #chatymore) > :is(header, #zeme, #chatymore, #aktuality, #arealy, section.last, #posledni-navstivene, footer) a {
    font-weight: bold;
  }

  body:has(> #chatymore) :is(#arealy, #doporucujeme, #posledni-navstivene) > h2 {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bk-ink);
    font-size: var(--bk-section-heading);
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-align: center;
  }

  /******************** HEADER A FULLTEXT *********************/
  body:has(> #chatymore) > header {
    order: -2;
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 1rem;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.85rem var(--bk-edge);
    background: var(--bk-surface);
  }

  body:has(> #chatymore) > header > a {
    grid-column: 1;
    grid-row: 1;
    display: block;
  }

  body:has(> #chatymore) > header #logo {
    width: calc(136px * var(--bk-logo-scale));
    height: calc(108px * var(--bk-logo-scale));
    margin: 0;
    background-image: url("/images/design/ikonky.png");
    background-repeat: no-repeat;
    background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
    background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
  }

  body:has(> #chatymore) > header > p {
    grid-column: 2;
    grid-row: 1;
    position: static;
    margin: 0;
    font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
    letter-spacing: -0.025em;
  }

  body:has(> #chatymore) > header > p a,
  body:has(> #chatymore) > header > p a span {
    color: var(--bk-ink);
    font: inherit;
    text-decoration: none;
  }

  body:has(> #chatymore) > header > nav {
    grid-column: 3;
    grid-row: 1;
    position: static;
    display: grid;
    justify-items: end;
    gap: 0.25rem 1rem;
    min-width: 0;
    width: auto;
    height: auto;
    background: none;
  }

  body:has(> #chatymore) > header > nav > ul {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.8rem;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 0.85rem;
  }

  body:has(> #chatymore) > header > nav > ul > li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
  }

  body:has(> #chatymore) > header > nav > ul a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    color: var(--bk-text);
    line-height: 1.25;
    font-weight: 700;
    text-decoration: none;
  }

  body:has(> #chatymore) > header > nav > ul a.telefon {
    color: var(--bk-accent);
    white-space: nowrap;
  }

  body:has(> #chatymore) > header > nav > ul a:hover {
    color: var(--bk-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  body:has(> #chatymore) > header > nav > form {
    float: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    justify-self: end;
    gap: 0;
    width: 100%;
    max-width: 17rem;
    margin: 0;
    background: none;
  }

  body:has(> #chatymore) > header > nav input[type="search"],
  body:has(> #chatymore) > header > nav input[type="submit"] {
    box-sizing: border-box;
    display: block;
    min-height: var(--bk-search-height);
    margin: 0;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.25;
  }

  body:has(> #chatymore) > header > nav input[type="search"] {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--bk-border);
    border-right: 0;
    border-radius: 0.5rem 0 0 0.5rem;
    background: var(--bk-mist);
    color: var(--bk-ink);
  }

  body:has(> #chatymore) > header > nav input[type="submit"] {
    border: 1px solid var(--bk-navy);
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--bk-navy);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
  }

  body:has(> #chatymore) > header > nav input[type="submit"]:is(:hover, :focus-visible) {
    background: var(--bk-navy-hover);
    color: #fff;
  }

  /************************ MENU ZEMÍ *************************/
  body:has(> #chatymore) > nav#zeme {
    order: -1;
    margin: 0;
    background: var(--bk-navy);
  }

  body:has(> #chatymore) > nav#zeme > ul {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: min(100%, 60rem);
    margin: 0 auto;
    padding: 0;
    background: none;
  }

  body:has(> #chatymore) > nav#zeme > ul > li {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
  }

  body:has(> #chatymore) > nav#zeme > ul a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bk-menu-height);
    padding: 0.4rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }

  body:has(> #chatymore) > nav#zeme > ul a:is(:hover, :focus-visible, [aria-current="page"]) {
    background: var(--bk-navy-hover);
    color: #fff;
  }

  /******************* SPOLEČNÁ ŠÍŘKA SEKCÍ *******************/
  body:has(> #chatymore) > :is(#chatymore, #aktuality, #arealy, section.last:has(> #doporucujeme), #posledni-navstivene) {
    box-sizing: border-box;
    width: var(--bk-inner);
    margin-inline: auto;
  }

  /**************** DOVOLENÁ NA CHATĚ A U MOŘE ****************/
  body:has(> #chatymore) > #chatymore {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bk-gap);
    margin-block: var(--bk-section-space) 0;
  }

  body:has(> #chatymore) > #chatymore > article {
    box-sizing: border-box;
    display: grid;
    grid-template:
      "foto" minmax(8rem, 1fr)
      "odkazy" auto
      "tlacitko" auto / minmax(0, 1fr);
    min-width: 0;
    min-height: var(--bk-hero-height);
    width: auto;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    background: var(--bk-surface);
    box-shadow: var(--bk-shadow);
    text-align: left;
  }

  body:has(> #chatymore) > #chatymore > article > .ilustracka {
    grid-area: foto;
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: var(--bk-navy);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  body:has(> #chatymore) > #chatymore > #chaty > .ilustracka {
    background-image: url("/images/ilustracni/chaty-4.jpg");
    background-position: 37% center;
  }

  body:has(> #chatymore) > #chatymore > #more > .ilustracka {
    background-image: url("/images/ilustracni/more-4.jpg");
    background-position: 39% center;
  }

  body:has(> #chatymore) > #chatymore .ilustracka::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 22%, rgb(10 26 42 / 70%) 70%, rgb(10 26 42 / 92%));
    pointer-events: none;
  }

  body:has(> #chatymore) > #chatymore > article > h2 {
    grid-area: foto;
    align-self: end;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--bk-hero-heading);
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-align: center;
    pointer-events: none;
  }

  body:has(> #chatymore) > #chatymore > article > h2 > a {
    display: inline-block;
    padding: 0.6rem var(--bk-card-padding) var(--bk-card-padding);
    color: #fff;
    line-height: inherit;
    text-decoration: none;
    text-shadow: 0 1px 3px rgb(10 26 42 / 70%);
    pointer-events: auto;
  }

  body:has(> #chatymore) > #chatymore > article > h2 > a:hover {
    text-decoration: underline;
    text-underline-offset: 0.16em;
  }

  body:has(> #chatymore) > #chatymore > article > ul {
    grid-area: odkazy;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--bk-list-gap);
    margin: 0;
    padding: 1.25rem var(--bk-card-padding) 1.25rem calc(var(--bk-card-padding) + 1rem);
    font-size: var(--bk-text-size);
    line-height: 1.55;
  }

  body:has(> #chatymore) > #chatymore > article > ul > li {
    margin: 0;
    padding: 0;
    list-style: disc;
    color: var(--bk-text);
    text-align: left;
  }

  body:has(> #chatymore) > #chatymore > article > ul > li::marker {
    color: var(--bk-accent);
  }

  body:has(> #chatymore) > #chatymore > article > ul a {
    color: var(--bk-text);
    line-height: inherit;
    text-decoration: underline;
    text-decoration-color: #a5b4c2;
    text-underline-offset: 0.18em;
  }

  body:has(> #chatymore) > #chatymore > article > ul a:hover {
    color: var(--bk-accent);
    text-decoration-color: currentColor;
  }

  body:has(> #chatymore) > #chatymore > article > br.konec {
    display: none;
  }

  /******************** TLAČÍTKA V KARTÁCH ********************/
  /* Původní bk.css nastavuje barvu textu tlačítek přes !important. */
  body:has(> #chatymore) > :is(#chatymore, #arealy) a.tlacitko {
    box-sizing: border-box;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
  }

  body:has(> #chatymore) > #chatymore > article > a.tlacitko {
    grid-area: tlacitko;
    justify-self: start;
    margin: 0 var(--bk-card-padding) var(--bk-card-padding);
    border: 1px solid var(--bk-accent);
    background: var(--bk-accent);
    color: #fff !important;
  }

  body:has(> #chatymore) > #chatymore > article > a.tlacitko:hover {
    border-color: var(--bk-accent-hover);
    background: var(--bk-accent-hover);
  }

  /********************** RYCHLÉ ODKAZY ***********************/
  body:has(> #chatymore) > #aktuality {
    margin-block: var(--bk-gap) 0;
    padding: 0;
    border: 0;
    background: none;
  }

  body:has(> #chatymore) > #aktuality > ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bk-card-gap);
    margin: 0;
    padding: 0;
  }

  body:has(> #chatymore) > #aktuality > ul > li {
    display: flex;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
  }

  body:has(> #chatymore) > #aktuality > ul a {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 4.75rem;
    padding: var(--bk-card-padding);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    background: var(--bk-surface);
    box-shadow: var(--bk-shadow);
    color: var(--bk-ink);
    font-size: 0.875rem;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
  }

  body:has(> #chatymore) > #aktuality > ul a:is(:hover, :focus-visible) {
    background: var(--bk-mist);
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  /************* NAŠE TIPY NA RODINNOU DOVOLENOU **************/
  body:has(> #chatymore) > #arealy {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bk-card-gap);
    margin-block: var(--bk-section-space) 0;
    padding: 0;
  }

  body:has(> #chatymore) > #arealy > h2 {
    grid-column: 1 / -1;
  }

  body:has(> #chatymore) > #arealy > div {
    box-sizing: border-box;
    display: grid;
    grid-template: "dlazdice" 1fr / minmax(0, 1fr);
    isolation: isolate;
    min-width: 0;
    min-height: var(--bk-family-small-height);
    width: auto;
    max-width: none;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    background: var(--bk-navy);
    box-shadow: var(--bk-shadow);
    text-align: left;
  }

  body:has(> #chatymore) > #arealy > :is(#ostruzno, #pecka) {
    grid-column: span 2;
    min-height: var(--bk-family-feature-height);
  }

  body:has(> #chatymore) > #arealy > div > a {
    grid-area: dlazdice;
    float: none;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    background-color: var(--bk-navy);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /******************* FOTKY RODINNÝCH TIPŮ *******************/
  body:has(> #chatymore) > #arealy > #ostruzno > a {
    background-image: url("/images/ilustracni/ostruzno.jpg");
  }

  body:has(> #chatymore) > #arealy > #pecka > a {
    background-image: url("/images/ilustracni/pecka.jpg");
  }

  body:has(> #chatymore) > #arealy > #kalabrie > a {
    background-image: url("/images/ilustracni/kalabrie.jpg");
  }

  body:has(> #chatymore) > #arealy > div > a[href$="/leto/3718/"] {
    background-image: url("/images/ilustracni/stribrnak.jpg");
  }

  /* Dočasné fotky dvou testovacích karet. */
  body:has(> #chatymore) > #arealy > div > a[href$="/chaty.php"] {
    background-image: url("/images/ilustracni/chaty-4.jpg");
    background-position: 35% center;
  }

  body:has(> #chatymore) > #arealy > div > a[href$="/more.php"] {
    background-image: url("/images/ilustracni/more-4.jpg");
    background-position: 40% center;
  }

/****************** FOTKA Z ADMINISTRACE *******************/
  body:has(> #chatymore) > #arealy > div:has(
    > div > h3 + img,
    > div > h3 + :is(p, div) > img:only-child
  ) {
    position: relative;
  }

  body:has(> #chatymore) > #arealy > div:has(
    > div > h3 + img,
    > div > h3 + :is(p, div) > img:only-child
  ) > a {
    /* Přebije původní pozadí nastavovaná přes ID jednotlivých karet. */
    background-image: none !important;
    background-color: transparent;
  }

  body:has(> #chatymore) > #arealy > div > div:has(
    > h3 + img,
    > h3 + :is(p, div) > img:only-child
  ) {
    /* Obrázek se pozicuje vůči celé kartě. */
    position: static;
    z-index: auto;
  }

  body:has(> #chatymore) > #arealy > div > div > h3 + :is(p, div):has(> img:only-child) {
    display: contents;
  }

  body:has(> #chatymore) > #arealy > div > div > h3 + img,
  body:has(> #chatymore) > #arealy > div > div > h3 + :is(p, div) > img:only-child {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
  }

  /******************* TEXT RODINNÝCH TIPŮ ********************/
  body:has(> #chatymore) > #arealy > div > div {
    grid-area: dlazdice;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem var(--bk-card-gap);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    max-width: 100%;
    padding: var(--bk-card-padding);
    background: rgb(255 255 255 / 50%);
    color: #08111b;
    overflow-wrap: anywhere;
    pointer-events: none;
  }

  body:has(> #chatymore) > #arealy > div > div a {
    color: inherit;
    pointer-events: auto;
  }

  body:has(> #chatymore) > #arealy h3 {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1.3;
  }

  body:has(> #chatymore) > #arealy > :is(#ostruzno, #pecka) h3 {
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  }

  body:has(> #chatymore) > #arealy > div > div > ul {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0 0 0 1rem;
    color: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
  }

  body:has(> #chatymore) > #arealy > div > div > ul > li {
    margin: 0;
    padding: 0;
    color: inherit;
    list-style: disc;
    text-align: left;
  }

  body:has(> #chatymore) > #arealy > div > div > ul > li + li {
    margin-block-start: var(--bk-list-gap);
  }

  body:has(> #chatymore) > #arealy > div > div > ul > li::marker {
    color: currentColor;
  }

  body:has(> #chatymore) > #arealy a.tlacitko {
    flex: 0 0 auto;
    max-width: 100%;
    margin: 0;
    margin-inline-start: auto;
    border: 1px solid var(--bk-surface);
    background: var(--bk-surface);
    color: var(--bk-ink) !important;
  }

  body:has(> #chatymore) > #arealy a.tlacitko:hover {
    border-color: var(--bk-navy);
    background: var(--bk-navy);
    color: #fff !important;
  }

  @media (hover: hover) and (pointer: fine) {
    body:has(> #chatymore) > #arealy > div:not(:hover):not(:focus-within) > div > ul {
      display: none;
    }

    body:has(> #chatymore) > #arealy > div:not(:hover):not(:focus-within) > div > h3 {
      flex: 1 1 auto;
    }
  }

  /*********************** DOPORUČUJEME ***********************/
  body:has(> #chatymore) > section.last:has(> #doporucujeme) {
    margin-block: var(--bk-section-space) 0;
  }

  body:has(> #chatymore) > section.last > #doporucujeme {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bk-card-gap);
    width: auto;
    max-width: none;
    padding: 0;
  }

  body:has(> #chatymore) > section.last > #doporucujeme > h2 {
    grid-column: 1 / -1;
  }

  body:has(> #chatymore) > section.last > #doporucujeme > p {
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 var(--bk-listing-padding) var(--bk-listing-padding);
    overflow: hidden;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    background: var(--bk-surface);
    box-shadow: var(--bk-shadow);
    color: var(--bk-muted);
    font-size: 0.9rem;
    text-align: center;
  }

  body:has(> #chatymore) > section.last > #doporucujeme > p > a {
    display: block;
    /* Odkaz s fotkou sahá až k oběma okrajům karty. */
    margin-inline: calc(-1 * var(--bk-listing-padding));
    margin-bottom: 0.3rem;
    /* Původní styl odkazů HTTPS přidává šipku a pravý padding. */
    padding-inline: 0;
    background-image: none;
    color: var(--bk-ink);
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-decoration: none;
  }

  body:has(> #chatymore) > section.last > #doporucujeme > p > a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  body:has(> #chatymore) > section.last > #doporucujeme > p > a > img {
    float: none;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1.65;
    margin: 0 0 var(--bk-listing-padding);
    border: 0;
    object-fit: cover;
  }

  body:has(> #chatymore) > section.last > #doporucujeme > p > a + br {
    display: none;
  }

  body:has(> #chatymore) > section.last > #doporucujeme > p > strong {
    color: var(--bk-ink);
  }

  /*************** POSLEDNÍ PROHLÍŽENÉ OBJEKTY ****************/
  body:has(> #chatymore) > #posledni-navstivene {
    clear: both;
    margin-block: var(--bk-section-space) 0;
    padding: 0;
    border: 0;
    background: none;
  }

  body:has(> #chatymore) > #posledni-navstivene > h2 {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    min-height: var(--bk-menu-height);
    margin: 0 0 var(--bk-card-gap);
    padding: 0.25rem var(--bk-card-padding);
    border-radius: var(--bk-radius);
    background: var(--bk-navy);
    color: #fff;
    font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  }

  body:has(> #chatymore) > #posledni-navstivene > #posledni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--bk-card-gap);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    list-style: none;
  }

  body:has(> #chatymore) > #posledni-navstivene > #posledni > li {
    box-sizing: border-box;
    flex: 0 1 calc((100% - 3 * var(--bk-card-gap)) / 4);
    min-width: 0;
    margin: 0;
    padding: var(--bk-listing-padding);
    overflow: hidden;
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    background: var(--bk-surface);
    box-shadow: var(--bk-shadow);
    color: var(--bk-text);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    text-align: center;
    list-style: none;
  }

  body:has(> #chatymore) > #posledni-navstivene > #posledni > li > a {
    display: block;
    margin-block: 0.55rem;
    margin-inline: calc(-1 * var(--bk-listing-padding));
  }

  body:has(> #chatymore) > #posledni-navstivene > #posledni > li > a > img {
    float: none;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1.65;
    margin: 0;
    border: 0;
    object-fit: cover;
  }

  body:has(> #chatymore) > #posledni-navstivene > #posledni > li > br,
  body:has(> #chatymore) > #posledni-navstivene > #posledni > br.konec {
    display: none;
  }

  body:has(> #chatymore) > #posledni-navstivene > a[href="#"] {
    box-sizing: border-box;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: var(--bk-card-gap) auto 0;
    padding: 0.5rem var(--bk-card-padding);
    color: var(--bk-ink);
    line-height: 1.3;
    text-align: center;
    text-underline-offset: 0.2em;
  }
  /*************** LIMIT PROHLÍŽENÝCH OBJEKTŮ ****************/
  body:has(> #chatymore) > #posledni-navstivene:not(:has(> a[href="#"].schovane))
    > #posledni > li:nth-of-type(n+5),
  body:has(> #chatymore) > #posledni-navstivene > a[href="#"].schovane {
    display: none;
  }

  /************************** FOOTER **************************/
  body:has(> #chatymore) > footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: var(--bk-gap);
    margin: var(--bk-gap) 0 0;
    padding: 1.8rem var(--bk-edge) 1.3rem;
    border-top: 1px solid var(--bk-border);
    background: var(--bk-mist);
    color: var(--bk-muted);
    font-size: 0.875rem;
  }

  body:has(> #chatymore) > footer > div {
    float: none;
    min-width: 0;
    height: auto;
    margin: 0;
    overflow-wrap: anywhere;
  }

  /* Box s logy je předposlední div před Facebookem. */
  body:has(> #chatymore) > footer > div:nth-last-of-type(2):has(+ div.fb-page) {
    display: none;
  }

  body:has(> #chatymore) > footer a {
    color: var(--bk-ink);
    font-weight: bold;
    line-height: inherit;
    text-underline-offset: 0.15em;
  }

  body:has(> #chatymore) > footer > .fb-page > span,
  body:has(> #chatymore) > footer img,
  body:has(> #chatymore) > footer iframe {
    max-width: 100%;
  }

  body:has(> #chatymore) > footer img {
    height: auto;
  }

  body:has(> #chatymore) > footer > br.konec,
  body:has(> #chatymore) > footer + br:has(+ #copyright) {
    display: none;
  }

  body:has(> #chatymore) > #copyright {
    width: auto;
    margin: 0;
    padding: 0.8rem var(--bk-gutter);
    background: var(--bk-navy);
    color: #fff;
    font-size: 0.8rem;
  }

  /********************* FOKUS KLÁVESNICE *********************/
  body:has(> #chatymore) > :is(header, #zeme, #chatymore, #aktuality, #arealy, section.last, #posledni-navstivene, footer)
    :is(a, input):focus-visible {
    outline: 2px solid var(--bk-focus);
    outline-offset: -2px;
  }

  body:has(> #chatymore) > #zeme a:focus-visible,
  body:has(> #chatymore) > #chatymore :is(h2 > a, a.ilustracka, a.tlacitko):focus-visible,
  body:has(> #chatymore) > #arealy > div > a:focus-visible,
  body:has(> #chatymore) > header input[type="submit"]:focus-visible {
    outline-color: #fff;
    outline-offset: -4px;
  }

  /****************** RESPONZIVNÍ ROZLOŽENÍ *******************/
  @media (width > 64rem) {
    body:has(> #chatymore) > #chatymore > article {
      grid-template:
        "foto foto" minmax(8rem, 1fr)
        "odkazy tlacitko" auto / minmax(0, 1fr) auto;
    }

    body:has(> #chatymore) > #chatymore > article > ul {
      min-height: 8.75rem;
    }

    body:has(> #chatymore) > #chatymore > article > a.tlacitko {
      align-self: end;
      justify-self: end;
      margin-inline-start: 0;
    }

    /* Šest karet v mozaice s dominantním Ostružnem vlevo. */
    body:has(> #chatymore) > #arealy:has(> div:nth-of-type(6):last-of-type) > #ostruzno {
      grid-column: 1 / span 2;
      grid-row: 2 / span 2;
    }

    body:has(> #chatymore) > #arealy:has(> div:nth-of-type(6):last-of-type) > div:nth-of-type(n+5),
    body:has(> #chatymore) > #arealy:has(> div:nth-of-type(8):last-of-type) > div:nth-of-type(n+7),
    body:has(> #chatymore) > #arealy:has(> div:nth-of-type(4):last-of-type) > div:nth-of-type(n+3) {
      grid-column: span 2;
    }
  }

  @media (max-width: 64rem) {
    body:has(> #chatymore) > header {
      grid-template-columns: auto minmax(0, 1fr);
      row-gap: 0.55rem;
    }

    body:has(> #chatymore) > header > nav {
      grid-column: 1 / -1;
      grid-row: 2;
      grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
      align-items: center;
      justify-items: start;
    }

    body:has(> #chatymore) > #arealy,
    body:has(> #chatymore) > section.last > #doporucujeme {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:has(> #chatymore) > #arealy > :is(#ostruzno, #pecka) {
      grid-column: auto;
    }

    body:has(> #chatymore) > #posledni-navstivene > #posledni > li {
      flex-basis: calc((100% - var(--bk-card-gap)) / 2);
    }
  }

  @media (max-width: 43rem) {
    body:has(> #chatymore) {
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;
    }

    body:has(> #chatymore) > header {
      column-gap: 0.65rem;
    }

    body:has(> #chatymore) > header > nav {
      grid-template-columns: minmax(0, 1fr);
    }

    body:has(> #chatymore) > header > nav > ul {
      column-gap: 0.65rem;
      font-size: 0.8rem;
    }

    body:has(> #chatymore) > header > nav > form {
      max-width: none;
    }

    body:has(> #chatymore) > nav#zeme > ul {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body:has(> #chatymore) > nav#zeme > ul a {
      font-size: 0.85rem;
    }

    body:has(> #chatymore) > #chatymore {
      grid-template-columns: minmax(0, 1fr);
    }

    body:has(> #chatymore) > #aktuality > ul {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 32rem) {
    body:has(> #chatymore) > #chatymore > #chaty > .ilustracka {
      background-image: url("/images/ilustracni/chaty-1.jpg");
    }

    body:has(> #chatymore) > #chatymore > #more > .ilustracka {
      background-image: url("/images/ilustracni/more-1.jpg");
    }

    body:has(> #chatymore) > #arealy,
    body:has(> #chatymore) > section.last > #doporucujeme {
      grid-template-columns: minmax(0, 1fr);
    }

    body:has(> #chatymore) > #posledni-navstivene > #posledni > li {
      flex-basis: 100%;
    }
  }
}
/************************************************************************************************************************/
/********************************************KONEC HOMEPAGE KONEC *******************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/*************************************************** VÝPIS NEMOVITOSTÍ **************************************************/
/************************************************************************************************************************/
@media screen {
  /* Společná šablona výpisu pro všechny země a sezóny. */
  body#view:has(> nav#kontext > form#hledani) {
    /*********************** NASTAVENÍ VÝPISU ***********************/
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-accent-hover: #8f1930;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;
    --bk-field-border: #8094a6;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-edge: max(var(--bk-gutter), calc((100% - 76rem) / 2));
    --bk-radius: 0.9rem;
    --bk-card-padding: 15px;
    --bk-card-gap: 15px;
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-menu-height: 3.05rem;
    --bk-control-height: 2.75rem;
    --bk-filter-width: clamp(13rem, 17vw, 15rem);
    /* Šířka fotografie odpovídá náhledu z výpisu. Karta přidává vnitřní odsazení a okraj. */
    --bk-photo-width: 300px;
    --bk-result-card-width: calc(var(--bk-photo-width) + 2 * var(--bk-card-padding) + 2px);
    --bk-result-columns: 3;
    --bk-results-width: calc(
      var(--bk-result-columns) * var(--bk-result-card-width)
      + (var(--bk-result-columns) - 1) * var(--bk-card-gap)
    );

    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--bk-gutter), 1fr)
      [listing-start] var(--bk-filter-width)
      [filters-end] var(--bk-gap)
      [results-start] minmax(0, var(--bk-results-width))
      [listing-end] minmax(var(--bk-gutter), 1fr)
      [full-end];
    grid-template-rows: auto auto auto 1fr auto auto;
    min-height: 100vh;
    margin: 0;
    background: var(--bk-page) var(--bk-background-image) repeat;
    color: var(--bk-text);
    font: 1rem / 1.55 var(--bk-font);

    & > :is(header, #zeme, footer, #copyright) {
      grid-column: full-start / full-end;
      min-width: 0;
    }

    & > :is(#drobecky, #kontext, #obsah, footer) a {
      color: var(--bk-ink);
      font-weight: 700;
      text-underline-offset: 0.16em;
    }

    /************************ HEADER A FULLTEXT ***********************/
    & > header {
      grid-row: 1;
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) max-content;
      align-items: center;
      gap: 0.55rem 1rem;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0.85rem var(--bk-edge);
      background: var(--bk-surface);

      & > a {
        grid-area: 1 / 1;
        display: block;
      }

      & #logo {
        width: calc(136px * var(--bk-logo-scale));
        height: calc(108px * var(--bk-logo-scale));
        margin: 0;
        background: url("/images/design/ikonky.png") no-repeat;
        background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
        background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
      }

      & > p {
        grid-area: 1 / 2;
        position: static;
        margin: 0;
        font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
        letter-spacing: -0.025em;
      }

      & > p :is(a, span) {
        color: var(--bk-ink);
        font: inherit;
        text-decoration: none;
      }

      & > nav {
        grid-area: 1 / 3;
        position: static;
        display: grid;
        justify-items: end;
        gap: 0.25rem 1rem;
        min-width: 0;
        width: auto;
        height: auto;
        background: none;
      }

      & > nav > ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.8rem;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 0.85rem;
      }

      & > nav > ul > li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        color: var(--bk-text);
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
      }

      & > nav > ul a.telefon {
        color: var(--bk-accent);
        white-space: nowrap;
      }

      & > nav > ul a:hover {
        color: var(--bk-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      & > nav > form {
        float: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-self: end;
        width: 100%;
        max-width: 17rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > nav input:is([type="search"], [type="submit"]) {
        box-sizing: border-box;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.75rem;
        font: 0.875rem / 1.25 var(--bk-font);
      }

      & > nav input[type="search"] {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--bk-field-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > nav input[type="submit"] {
        border: 1px solid var(--bk-navy);
        border-radius: 0 0.5rem 0.5rem 0;
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      & > nav input[type="submit"]:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /**************** MENU ZEMÍ A DROBEČKOVÁ NAVIGACE ****************/
    & > nav#zeme {
      grid-row: 2;
      margin: 0;
      background: var(--bk-navy);

      & > ul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, 60rem);
        margin: 0 auto;
        padding: 0;
        background: none;
      }

      & > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > ul a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
      }

      & > ul a:is(:hover, :focus-visible),
      & > ul > li[id^="aktivni-"] > a {
        background: var(--bk-navy-hover);
        color: #fff;
      }

      & > ul > li[id^="aktivni-"] > a {
        box-shadow: inset 0 -3px #c7dbee;
      }
    }

    & > #drobecky {
      grid-column: listing-start / listing-end;
      grid-row: 3;
      min-width: 0;
      margin: 0.65rem 0 var(--bk-card-gap);
      padding: 0;
      color: var(--bk-muted);
      font-size: 0.875rem;
      overflow-wrap: anywhere;
    }

    /******************* VYHLEDÁVÁNÍ A SEZÓNY *********************/
    & > nav#kontext {
      grid-column: listing-start / filters-end;
      grid-row: 4;
      align-self: start;
      position: static;
      width: auto;
      min-width: 0;
      margin: 0;
      padding: 0;
      font-size: 0.875rem;
    }

    & #kontext > #hledani_ovladac {
      float: none;
      width: auto;
      margin: 0;
      padding: 0;
      border-radius: var(--bk-radius);
      background: var(--bk-navy);

      & > a {
        display: block;
        padding: 0.65rem var(--bk-card-padding);
        color: #fff;
        text-decoration: none;
      }

      & > a:hover {
        text-decoration: underline;
      }
    }

    /* Zobrazení formuláře na mobilu řídí původní odkaz Zobraz vyhledávání. */
    & #kontext > form#hledani {
      position: static;
      inset: auto;
      width: auto;
      min-width: 0;
      margin: 0;
      padding: 0;
      background: none;

      & > h6 {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 0.5rem;
        padding: 0.6rem var(--bk-card-padding);
        border-radius: 0.6rem;
        background: var(--bk-navy);
        color: #fff;
        font-size: 1rem;
        text-align: center;
      }

      & > h6::first-letter {
        text-transform: uppercase;
      }

      & > #obdobi {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        margin: 0 0 0.5rem;
        padding: 0;
      }

      & > #obdobi > li,
      & > #obdobi > li > a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
      }

      & > #obdobi > li {
        margin: 0;
        padding: 0;
        border: 1px solid var(--bk-border);
        border-radius: 0.5rem;
        background: var(--bk-surface);
      }

      & > #obdobi > li > a {
        width: 100%;
        border-radius: inherit;
      }

      & > #obdobi > li.aktivni {
        border-color: var(--bk-field-border);
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > #obdobi > li > a:hover {
        background: var(--bk-mist);
      }
    }

    /************************ SKUPINY FILTRŮ ************************/
    & #hledani > fieldset {
      position: relative;
      float: none;
      min-inline-size: 0;
      margin: 0 0 0.5rem;
      padding: var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: 0.65rem;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    & #hledani > fieldset:has(> legend) {
      padding-block-start: calc(var(--bk-control-height) + 0.65rem);
    }

    & #hledani > fieldset.zbaleno {
      padding-block: var(--bk-control-height) 0;
    }

    & #hledani > fieldset > legend {
      box-sizing: border-box;
      position: absolute;
      inset: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      width: 100%;
      min-height: var(--bk-control-height);
      margin: 0;
      padding: 0 0.65rem;
      border-radius: 0.6rem 0.6rem 0 0;
      background: var(--bk-mist);
      line-height: 1.25;
    }

    & #hledani > fieldset.zbaleno > legend {
      border-radius: 0.6rem;
    }

    & #hledani > fieldset > legend > a {
      display: flex;
      flex: 1;
      align-items: center;
      min-height: var(--bk-control-height);
      text-decoration: none;
    }

    & #hledani > fieldset > legend > a:hover {
      text-decoration: underline;
    }

    & #hledani :is(fieldset, .obal) label {
      float: none;
      width: auto;
      margin: 0 0 0.55rem;
      padding: 0;
    }

    & #hledani > fieldset > label:last-child,
    & #hledani .obal > label:last-child {
      margin-bottom: 0;
    }

    & #hledani > #zakladni > br.konec {
      display: none;
    }

    & #hledani .obal {
      margin: 0 0 0.55rem;
      padding: 0.55rem;
      border: 1px solid var(--bk-border);
      border-radius: 0.45rem;
      background: var(--bk-mist);
    }

    & #hledani .checkboxy {
      margin: 0;
      padding: 0;
    }

    & #hledani fieldset:not(.zbaleno) .checkboxy li > label:not(.schovane) {
      display: flex;
      align-items: flex-start;
      gap: 0.45rem;
      margin: 0;
      padding: 0.2rem 0;
    }

    & #hledani .checkboxy .popisek {
      width: auto;
      min-width: 0;
      margin: 0;
      overflow-wrap: anywhere;
    }

    & #hledani input[type="checkbox"] {
      flex: 0 0 auto;
      margin: 0.25em 0.25em 0 0;
      accent-color: var(--bk-navy);
    }

    & #hledani > fieldset > a {
      margin-inline-start: 0;
    }

    & #hledani > #odeslat {
      margin: 0;
      padding: 0;
    }

    /****************** POLE A AKČNÍ TLAČÍTKA ******************/
    & #hledani :is(select, input[type="date"], input[type="text"]),
    & #razeni-strankovani select {
      box-sizing: border-box;
      min-width: 0;
      max-width: 100%;
      min-height: 2.35rem;
      padding: 0.3rem 0.45rem;
      border: 1px solid var(--bk-field-border);
      border-radius: 0.45rem;
      background: var(--bk-surface);
      color: var(--bk-ink);
      font: inherit;
    }

    & #hledani :is(select, input[type="date"], input[type="text"]) {
      width: 100%;
      margin: 0.2rem 0 0;
    }

    & :is(#hledani, #razeni-strankovani) input[type="submit"],
    & > #obsah > article.objekt > a.tlacitko {
      box-sizing: border-box;
      float: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--bk-control-height);
      max-width: 100%;
      margin: 0;
      padding: 0.45rem 0.9rem;
      border: 1px solid var(--bk-accent);
      border-radius: 0.5rem;
      background: var(--bk-accent);
      color: #fff;
      font: 700 0.875rem / 1.25 var(--bk-font);
      text-align: center;
      text-decoration: none;
      cursor: pointer;
    }

    & #hledani input[type="submit"] {
      width: 100%;
    }

    & :is(#hledani, #razeni-strankovani) input[type="submit"]:hover,
    & > #obsah > article.objekt > a.tlacitko:hover {
      border-color: var(--bk-accent-hover);
      background: var(--bk-accent-hover);
    }

    /* Původní bk.css používá !important pro barvu textu odkazu. */
    & > #obsah > article.objekt > a.tlacitko,
    & > #obsah > article.objekt > a.tlacitko:hover {
      color: #fff !important;
    }

    /****************** VÝSLEDKY, ŘAZENÍ A MAPA ******************/
    & > #obsah {
      grid-column: results-start / listing-end;
      grid-row: 4;
      display: grid;
      grid-template-columns: repeat(var(--bk-result-columns), minmax(0, 1fr));
      align-content: start;
      gap: var(--bk-card-gap);
      width: auto;
      min-width: 0;
      margin: 0;
      padding: 0;

      & > :not(article.objekt) {
        grid-column: 1 / -1;
        min-width: 0;
      }

      & > h1 {
        margin: 0;
        padding: 0;
        color: var(--bk-ink);
        font-size: clamp(1.45rem, 2.35vw, 2rem);
        line-height: 1.25;
        letter-spacing: -0.025em;
        text-align: center;
        overflow-wrap: anywhere;
      }

      & > p:not([id]) {
        margin: 0;
      }

      & > br.konec,
      & > #razeni-strankovani > br.konec {
        display: none;
      }
    }

    & #razeni-strankovani {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem var(--bk-card-gap);
      margin: 0;
      padding: 0.6rem var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
      font-size: 0.875rem;

      & > p {
        float: none;
        margin: 0;
      }

      & > form {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem;
        min-width: 0;
        max-width: 100%;
        margin: 0 0 0 auto;
      }

      & > form > label {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
        max-width: 100%;
        margin: 0;
      }

      & select {
        flex: 0 1 auto;
      }
    }

    & > #obsah > #mapa_obal {
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);

      & > #map_canvas {
        height: clamp(16rem, 44vw, 32rem);
      }

      & > p {
        margin: 0;
        padding: 0.65rem var(--bk-card-padding);
        font-size: 0.875rem;
      }
    }

    /********************* KARTY NEMOVITOSTÍ *********************/
    & > #obsah > article.objekt {
      --bk-parametr-padding-y: 0.34rem;

      box-sizing: border-box;
      float: none;
      display: grid;
      grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
      align-items: start;
      gap: var(--bk-card-gap);
      width: auto;
      min-width: 0;
      max-width: none;
      height: auto;
      margin: 0;
      padding: var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);

      /* Karty vedle sebe sdílejí výšku nadpisu, fotky s ikonami, parametrů, popisu a tlačítka. */
      @supports (grid-template-rows: subgrid) {
        grid-row: span 5;
        grid-template-rows: subgrid;
      }

      & > .zahlavi {
        grid-row: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.25rem 0.75rem;
        min-width: 0;
        margin: 0;
        padding: 0 0 0.65rem;
        border-bottom: 1px solid var(--bk-border);
        background: none;
      }

      & > .zahlavi > h3 {
        float: none;
        flex: 1 1 12rem;
        min-width: 0;
        margin: 0;
        color: var(--bk-ink);
        font-size: 1.12rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
      }

      & > .zahlavi > h3 a:hover {
        text-decoration: underline;
      }

      & > .zahlavi > .kod {
        margin: 0;
        color: var(--bk-muted);
        font-size: 0.78rem;
      }

      /********************* FOTKA A PIKTOGRAMY *********************/
      & > .ikonky {
        grid-row: 2;
        float: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        /* Fotka a dva řádky ikon. Při větším počtu ikon vzniknou další řádky. */
        grid-template-rows: auto repeat(2, minmax(32px, auto));
        grid-auto-rows: minmax(32px, auto);
        align-items: center;
        gap: 0.3rem;
        width: auto;
        min-width: 0;
        margin: 0;
      }

      & > .ikonky > a:has(> img) {
        grid-area: 1 / 1 / 2 / -1;
        display: block;
        min-width: 0;
        border-radius: 0.55rem;
      }

      & > .ikonky > a > img {
        float: none;
        display: block;
        width: 100%;
        max-width: var(--bk-photo-width);
        height: auto;
        aspect-ratio: 3 / 2;
        margin: 0;
        border: 0;
        border-radius: 0.55rem;
        object-fit: cover;
      }

      & > .ikonky > div {
        margin: 0;
      }

      /********************** PARAMETRY OBJEKTU *********************/
      &::before,
      & > table {
        grid-area: 3 / 1;
        font-size: 0.83rem;
        line-height: 1.35;
      }

      /* Rezerva na deset jednořádkových parametrů. Tabulka si zachová přirozenou výšku. */
      &::before {
        content: "";
        min-height: calc(10 * (1lh + 2 * var(--bk-parametr-padding-y) + 1px));
        pointer-events: none;
      }

      & > table {
        float: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        border-collapse: collapse;
        table-layout: fixed;
      }

      & > table tr {
        background: var(--bk-mist);
      }

      & > table :is(th, td) {
        padding: var(--bk-parametr-padding-y) 0.45rem;
        border: 0;
        border-bottom: 1px solid var(--bk-border);
        overflow-wrap: anywhere;
        vertical-align: middle;
      }

      & > table th {
        width: 43%;
        color: var(--bk-muted);
      }

      & > table div.ikona {
        margin: 0;
      }

      /* Cena je v posledním řádku přehledu parametrů karty. */
      & > table tr:last-child > :is(th, td) {
        border-bottom: 0;
        background: var(--bk-mist);
        color: var(--bk-ink);
        font-weight: 700;
      }

      & > br.konec {
        display: none;
      }

      /*********************** POPIS A TLAČÍTKO **********************/
      & > p.text {
        grid-row: 4;
        display: block;
        max-width: none;
        margin: 0;
        font-size: 0.875rem;
        line-height: 1.5;
        overflow-wrap: anywhere;
      }

      & > a.tlacitko {
        grid-row: 5;
        justify-self: end;
      }
    }

    /**************** STRÁNKOVÁNÍ A DOPLŇUJÍCÍ OBSAH ****************/
    & > #obsah > #strankovani {
      margin: 0;
      padding: 0.65rem var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      color: var(--bk-ink);
      text-align: center;

      & > .cisla > :is(a, span) {
        box-sizing: border-box;
        min-width: 2.25rem;
        padding: 0.45rem 0.6rem;
        border-radius: 0.4rem;
        font-size: 1rem;
        font-weight: 700;
      }

      & > .cisla > a:hover {
        background: var(--bk-mist);
      }
    }

    & > #obsah > section.doplnujici {
      padding: var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      overflow-wrap: anywhere;
    }

    /******************** POSLEDNÍ PROHLÍŽENÉ OBJEKTY ****************/
    & > #obsah > #posledni-navstivene {
      margin: var(--bk-card-gap) 0 0;
      padding: 0;
      border: 0;
      background: none;
      text-align: center;

      & > h2 {
        display: grid;
        place-items: center;
        min-height: var(--bk-menu-height);
        margin: 0 0 var(--bk-card-gap);
        padding: 0.25rem var(--bk-card-padding);
        border: 0;
        border-radius: var(--bk-radius);
        background: var(--bk-navy);
        color: #fff;
        font-size: clamp(1.05rem, 2.6vw, 1.5rem);
      }

      & > #posledni {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--bk-card-gap);
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > #posledni > li {
        box-sizing: border-box;
        flex: 0 1 calc((100% - 3 * var(--bk-card-gap)) / 4);
        min-width: 0;
        margin: 0;
        padding: var(--bk-card-padding);
        overflow: hidden;
        border: 1px solid var(--bk-border);
        border-radius: var(--bk-radius);
        background: var(--bk-surface);
        box-shadow: var(--bk-shadow);
        font-size: 0.875rem;
        list-style: none;
        overflow-wrap: anywhere;
      }

      & > #posledni > li > a:has(> img) {
        display: block;
        margin: 0.5rem calc(-1 * var(--bk-card-padding));
      }

      & > #posledni > li > a > img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1.65;
        margin: 0;
        border: 0;
        object-fit: cover;
      }

      & > #posledni > br.konec,
      & > #posledni > li > br {
        display: none;
      }

      & > a[href="#"]:not(.schovane) {
        display: block;
        width: fit-content;
        margin: var(--bk-card-gap) auto 0;
        padding: 0.5rem var(--bk-card-padding);
      }
    }

    /***************************** FOOTER ****************************/
    & > footer {
      grid-row: 5;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
      gap: var(--bk-gap);
      margin: var(--bk-gap) 0 0;
      padding: 1.8rem var(--bk-edge) 1.3rem;
      border-top: 1px solid var(--bk-border);
      background: var(--bk-mist);
      color: var(--bk-muted);
      font-size: 0.875rem;

      & > div {
        float: none;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow-wrap: anywhere;
      }

      & a {
        line-height: inherit;
      }

      & :is(img, iframe) {
        max-width: 100%;
      }

      & img {
        height: auto;
      }
    }

    & > footer > br.konec,
    & > footer + br:has(+ #copyright) {
      display: none;
    }

    & > #copyright {
      grid-row: 6;
      width: auto;
      margin: 0;
      padding: 0.8rem var(--bk-gutter);
      background: var(--bk-navy);
      color: #fff;
      font-size: 0.8rem;
    }

    /********************* FOKUS KLÁVESNICE **********************/
    & > :is(header, #zeme, #drobecky, #kontext, #obsah, footer)
      :is(a, input, select):focus-visible {
      outline: 2px solid var(--bk-focus);
      outline-offset: 2px;
    }

    & > #zeme a:focus-visible,
    & > header input[type="submit"]:focus-visible,
    & #hledani_ovladac a:focus-visible {
      outline-color: #fff;
      outline-offset: -4px;
    }

    /******************** RESPONZIVNÍ ROZLOŽENÍ ********************/
    @media (width < 1280px) {
      --bk-result-columns: 2;
    }

    @media (width < 1024px) {
      grid-template-columns:
        [full-start] minmax(var(--bk-gutter), 1fr)
        [listing-start] minmax(0, var(--bk-results-width))
        [listing-end] minmax(var(--bk-gutter), 1fr)
        [full-end];
      grid-template-rows: auto auto auto auto 1fr auto auto;

      & > header {
        grid-template-columns: auto minmax(0, 1fr);
      }

      & > header > nav {
        grid-area: 2 / 1 / auto / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        align-items: center;
        justify-items: start;
      }

      & > #kontext,
      & > #obsah {
        grid-column: listing-start / listing-end;
      }

      & #kontext > form#hledani {
        margin-top: 0.5rem;
      }

      & > #obsah {
        grid-row: 5;
        margin-top: var(--bk-card-gap);
      }

      & > #obsah > #posledni-navstivene > #posledni > li {
        flex-basis: calc((100% - var(--bk-card-gap)) / 2);
      }

      & > footer {
        grid-row: 6;
      }

      & > #copyright {
        grid-row: 7;
      }
    }

    @media (width <= 43rem) {
      --bk-result-columns: 1;
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;

      & > header {
        column-gap: 0.65rem;
      }

      & > header > nav {
        grid-template-columns: minmax(0, 1fr);
      }

      & > header > nav > ul {
        column-gap: 0.65rem;
        font-size: 0.8rem;
      }

      & > header > nav > form {
        max-width: none;
      }

      & > nav#zeme > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > nav#zeme > ul a {
        font-size: 0.85rem;
      }
    }

    @media (width <= 34rem) {
      & #razeni-strankovani > form {
        width: 100%;
        margin-inline-start: 0;
      }

      & #razeni-strankovani > form > label {
        flex: 1 1 10.5rem;
      }
    }

    @media (width <= 32rem) {
      & > #obsah > #posledni-navstivene > #posledni > li {
        flex-basis: 100%;
      }
    }
  }
}
/************************************************************************************************************************/
/************************************************ KONEC VÝPISU NEMOVITOSTÍ ***********************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************** DETAIL NEMOVITOSTI **************************************************/
/************************************************************************************************************************/
@media screen {
  /* Společná šablona objektu pro všechny země a sezóny. */
  body#detail:has(> div > #foto-uvod) {
    /************************ NASTAVENÍ DETAILU ************************/
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-accent-hover: #8f1930;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;
    --bk-field-border: #8094a6;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-width: 76rem;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-inner: min(var(--bk-width), calc(100% - 2 * var(--bk-gutter)));
    --bk-edge: max(var(--bk-gutter), calc((100% - var(--bk-width)) / 2));
    --bk-radius: 0.9rem;
    --bk-card-padding: 15px;
    --bk-card-gap: 15px;
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-menu-height: 3.05rem;
    --bk-control-height: 2.75rem;
    --bk-detail-photo-width: 540px;
    --bk-detail-gallery-width: calc(var(--bk-detail-photo-width) + 2 * var(--bk-card-padding) + 2px);
    --bk-detail-thumb-gap: 15px;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--bk-page) var(--bk-background-image) repeat;
    color: var(--bk-text);
    font: 1rem / 1.55 var(--bk-font);

    & > :is(#drobecky, div:has(> #foto-uvod)) {
      width: var(--bk-inner);
      min-width: 0;
      margin-inline: auto;
    }

    & > :is(#drobecky, footer) a,
    & > div:has(> #foto-uvod) a:not(:where(#map_canvas a)) {
      color: var(--bk-ink);
      font-weight: 700;
      text-underline-offset: 0.16em;
    }

    /************************ HEADER A FULLTEXT ***********************/
    & > header {
      order: -2;
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) max-content;
      align-items: center;
      gap: 0.55rem 1rem;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0.85rem var(--bk-edge);
      background: var(--bk-surface);

      & > a {
        grid-area: 1 / 1;
        display: block;
      }

      & #logo {
        width: calc(136px * var(--bk-logo-scale));
        height: calc(108px * var(--bk-logo-scale));
        margin: 0;
        background: url("/images/design/ikonky.png") no-repeat;
        background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
        background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
      }

      & > p {
        grid-area: 1 / 2;
        position: static;
        margin: 0;
        font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
        letter-spacing: -0.025em;
      }

      & > p :is(a, span) {
        color: var(--bk-ink);
        font: inherit;
        text-decoration: none;
      }

      & > nav {
        grid-area: 1 / 3;
        position: static;
        display: grid;
        justify-items: end;
        gap: 0.25rem 1rem;
        min-width: 0;
        width: auto;
        height: auto;
        background: none;
      }

      & > nav > ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.8rem;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 0.85rem;
      }

      & > nav > ul > li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        color: var(--bk-text);
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
      }

      & > nav > ul a.telefon {
        color: var(--bk-accent);
        white-space: nowrap;
      }

      & > nav > ul a:hover {
        color: var(--bk-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      & > nav > form {
        float: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-self: end;
        width: 100%;
        max-width: 17rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > nav input:is([type="search"], [type="submit"]) {
        box-sizing: border-box;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.75rem;
        font: 0.875rem / 1.25 var(--bk-font);
      }

      & > nav input[type="search"] {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--bk-field-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > nav input[type="submit"] {
        border: 1px solid var(--bk-navy);
        border-radius: 0 0.5rem 0.5rem 0;
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      & > nav input[type="submit"]:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /**************** MENU ZEMÍ A DROBEČKOVÁ NAVIGACE ****************/
    & > nav#zeme {
      order: -1;
      margin: 0;
      background: var(--bk-navy);

      & > ul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, 60rem);
        margin: 0 auto;
        padding: 0;
        background: none;
      }

      & > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > ul a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
      }

      & > ul a:is(:hover, :focus-visible),
      & > ul > li[id^="aktivni-"] > a {
        background: var(--bk-navy-hover);
        color: #fff;
      }

      & > ul > li[id^="aktivni-"] > a {
        box-shadow: inset 0 -3px #c7dbee;
      }
    }

    & > #drobecky {
      min-width: 0;
      margin-block: 0.65rem var(--bk-card-gap);
      padding: 0;
      color: var(--bk-muted);
      font-size: 0.875rem;
      overflow-wrap: anywhere;
    }

    /*********************** NADPIS A ROZLOŽENÍ DETAILU *********************/
    & > div:has(> #foto-uvod) {
      display: grid;
      grid-template-columns: minmax(0, min(51%, var(--bk-detail-gallery-width))) minmax(0, 1fr);
      align-items: start;
      gap: var(--bk-card-gap);
      margin-block: 0 var(--bk-gap);
    }

    & > div:has(> #foto-uvod) > :is(h1, .karty-obal, section.last) {
      grid-column: 1 / -1;
      min-width: 0;
    }

    & > div:has(> #foto-uvod) > h1 {
      margin: 0 0 0.3rem;
      padding: 0;
      color: var(--bk-ink);
      font: 700 clamp(1.5rem, 2.5vw, 2rem) / 1.2 var(--bk-font);
      letter-spacing: -0.025em;
      text-align: center;
      overflow-wrap: anywhere;
    }

    & > div:has(> #foto-uvod) > br.konec {
      display: none;
    }

    & :is(#foto-uvod, #ikony-prehledovka, .karty-obal > .karta) {
      box-sizing: border-box;
      min-width: 0;
      margin: 0;
      padding: var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    /*********************** FOTOGALERIE A ÚVODNÍ TEXT *********************/
    & #foto-uvod {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: start;
      gap: var(--bk-detail-thumb-gap);
      float: none;
      width: 100%;
      max-width: var(--bk-detail-gallery-width);

      & > a:not(.skryte, .schovane, [hidden]):has(> img) {
        display: block;
        min-width: 0;
        border-radius: 0.5rem;
      }

      & > a:has(> img#fotka) {
        grid-column: 1 / -1;
      }

      & > a > img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 0.5rem;
      }

      & > a > img#fotka {
        margin-inline: auto;
      }

      & > a#posledni {
        position: relative;
        width: auto;
        height: auto;
      }

      & > a#posledni > div {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0.5rem;
        background: rgb(18 50 80 / 75%);
        color: #fff;
        font-size: clamp(0.85rem, 2.1vw, 1.45rem);
      }

      & > #uvodni-veta {
        grid-column: 1 / -1;
        min-width: 0;
        margin: calc(var(--bk-card-padding) - var(--bk-detail-thumb-gap)) 0 0;
        color: var(--bk-text);
        overflow-wrap: anywhere;
      }
    }

    /******************** PIKTOGRAMY, PŘEHLED A REZERVACE ******************/
    & #ikony-prehledovka {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
      float: none;
      width: 100%;

      & > :is(.vlevo, .vpravo) {
        float: none;
        min-width: 0;
        margin: 0;
      }

      & > .ikonky {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem;
        height: auto;
        max-width: 100%;
      }

      & > .ikonky.vlevo {
        flex: 1 1 15rem;
      }

      & > .ikonky.vlevo > div,
      & > .ikonky.vpravo div.auto {
        float: none;
        margin: 0;
      }

      & .ikonky.social {
        height: auto;
      }

      & > .vpravo:not(.ikonky) {
        margin-inline-start: auto;
      }

      & > br.konec,
      & > .vpravo:not(.ikonky) > br {
        display: none;
      }

      & > table.prehledovka {
        float: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
      }

      & table.prehledovka tr.misto a {
        margin: 0;
      }

      & table.prehledovka tr:last-child:has(> td > strong) > :is(th, td) {
        background: var(--bk-mist);
        color: var(--bk-ink);
        font-weight: 700;
      }
    }

    & #ikony-prehledovka > div.vpravo > a.tlacitko,
    & #karta-ceny > table.cenik > tbody > tr > td > a[href*="rezervace-formular.php"] {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      float: none;
      min-height: var(--bk-control-height);
      margin: 0;
      padding: 0.55rem 0.9rem;
      border: 1px solid var(--bk-accent);
      border-radius: 0.5rem;
      background: var(--bk-accent);
      color: #fff !important;
      font: 700 0.9rem / 1.3 var(--bk-font);
      text-align: center;
      text-decoration: none;
    }

    & #ikony-prehledovka > div.vpravo > a.tlacitko:is(:hover, :focus-visible),
    & #karta-ceny > table.cenik > tbody > tr > td > a[href*="rezervace-formular.php"]:is(:hover, :focus-visible) {
      border-color: var(--bk-accent-hover);
      background: var(--bk-accent-hover);
    }

    & #ikony-prehledovka > div.vpravo > a.tlacitko > div.ikona {
      float: none;
      flex: 0 0 auto;
      margin: 0;
      background-position: -255px -132px;
    }

    /************************** ZÁLOŽKY DETAILU ***************************/
    & > div:has(> #foto-uvod) > .karty-obal {
      float: none;
      margin: 0;

      & > ul.karty {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin: 0 0 0.5rem;
        padding: 0;
      }

      & > ul.karty > li {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        background: none;
      }

      & > ul.karty > li > a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-control-height);
        padding: 0.5rem 0.8rem;
        border: 1px solid var(--bk-border);
        border-radius: 0.5rem;
        background: var(--bk-surface);
        color: var(--bk-ink);
        font-size: 0.9rem;
        line-height: 1.25;
        text-align: center;
        text-decoration: none;
      }

      & > ul.karty > li > a:is(:hover, :focus-visible) {
        background: var(--bk-mist);
      }

      & > ul.karty > li.aktivni > a {
        border-color: var(--bk-navy);
        background: var(--bk-navy);
        color: #fff;
      }

      & > .karta > div:first-child {
        height: auto;
        background: none;
      }

      /* Skrývání a přepínání panelů řídí třídy původní šablony. */
      & > .karta .karta-obsah:not(.skryte, .schovane, [hidden]) {
        display: flow-root;
        width: auto;
        max-width: none;
        margin: 0;
        color: var(--bk-text);
      }

      /* Kopie hlavní fotky uvnitř panelu zůstává skrytá i při přepínání záložek. */
      & > .karta a[itemprop="image"][rel="lightbox[fotogalerie]"]:has(> img) {
        display: none !important;
      }

      & > .karta .karta-obsah :is(p, li) {
        overflow-wrap: anywhere;
      }
    }

    & :is(#ikony-prehledovka > table.prehledovka, .karta-obsah table.info) {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;

      & > tbody > tr {
        background: var(--bk-surface);
      }

      & > tbody > tr:nth-child(odd) {
        background: var(--bk-mist);
      }

      & > tbody > tr > :is(th, td) {
        padding: 0.45rem 0.65rem;
        border: 0;
        border-bottom: 1px solid var(--bk-border);
        line-height: 1.35;
        text-align: left;
        overflow-wrap: anywhere;
      }

      & > tbody > tr > th {
        color: var(--bk-muted);
      }

      & > tbody > tr > td {
        color: var(--bk-ink);
      }

      & > tbody > tr > th:only-child {
        background: var(--bk-mist);
        color: var(--bk-ink);
        font-weight: 700;
      }
    }

    /********************* CENÍK, TERMÍNY A PODMÍNKY *********************/
    & #karta-ceny.karta-obsah {
      overflow-x: auto;
      scroll-margin-block-start: var(--bk-card-gap);

      & > table.cenik {
        width: 100%;
        margin: 0.75rem 0;
        border-collapse: collapse;
        font-size: 0.9rem;
      }

      & > table.cenik > :is(thead, tbody) > tr > :is(th, td) {
        padding: 0.55rem 0.75rem;
        border: 0;
        border-bottom: 1px solid var(--bk-border);
        line-height: 1.35;
        text-align: left;
        vertical-align: middle;
      }

      & > table.cenik > :is(thead, tbody) > tr > th {
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
      }

      & > table.cenik > :is(thead, tbody) > tr > th :is(a, span, strong, small, b, abbr) {
        color: inherit;
      }

      & > table.cenik > tbody > tr > td {
        background: var(--bk-surface);
        color: var(--bk-ink);
      }

      & > table.cenik > tbody > tr:nth-child(odd) > td {
        background: var(--bk-mist);
      }

      & > table.cenik > tbody > tr.hledano > td {
        background: #faedf0;
      }

      & > table.cenik > :is(thead, tbody) > tr > :is(th, td):nth-child(n + 3) {
        text-align: right;
      }

      & > table.cenik > tbody > tr > td > a[href*="rezervace-formular.php"] {
        min-height: 2.25rem;
        padding: 0.4rem 0.7rem;
        font-size: 0.85rem;
      }

      /* Třísloupcový ceník v pořadí termín, cena, stav. */
      @supports (grid-template-columns: subgrid) and (reading-flow: grid-rows) {
        & > table.cenik:has(> :is(thead, tbody) > tr > th:nth-child(3):last-child):not(:has(
          > colgroup,
          > :is(thead, tbody, tfoot) > tr > :is(:nth-child(2):last-child, :nth-child(4)),
          > :is(thead, tbody, tfoot) > tr > [rowspan]:not([rowspan="1"]),
          > :is(thead, tbody, tfoot) > tr > [colspan]:not([colspan="1"], :only-child)
        )) {
          display: grid;
          grid-template-columns: minmax(min-content, 2fr) minmax(min-content, 1fr) max-content;

          & > caption {
            grid-column: 1 / -1;
          }

          & > :is(thead, tbody, tfoot):not(.skryte, .schovane, [hidden]),
          & > :is(thead, tbody, tfoot) > tr:not(.skryte, .schovane, [hidden]) {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
          }

          & > :is(thead, tbody, tfoot) > tr {
            reading-flow: grid-rows;

            & > :is(th, td):not(:only-child) {
              align-content: center;
            }

            & > :is(th, td):first-child:not(:only-child) {
              order: 1;
              text-align: right;
            }

            & > :is(th, td):only-child {
              grid-column: 1 / -1;
            }
          }
        }
      }

      & > :is(a.obdobi-detail, a.vsechny_terminy):not(.skryte, .schovane, [hidden]) {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        float: none;
        margin: 0 0.65rem 0 0;
        padding: 0.4rem 0.65rem;
        border: 1px solid var(--bk-border);
        border-radius: 0.5rem;
        background: var(--bk-mist);
      }

      & > .ceny-detail {
        float: none;
        max-width: none;
        margin: var(--bk-card-gap) 0 0;
        padding: var(--bk-card-padding);
        border-radius: 0.5rem;
        background: var(--bk-mist);
      }

      & > .ceny-detail > p {
        margin: 0;
        color: var(--bk-text);
      }

      & > .ceny-detail > p + p {
        margin-top: 0.75rem;
      }
    }

    /************************** RECENZE A MAPA **************************/
    & #karta-recenze > article {
      box-sizing: border-box;
      float: none;
      width: min(100%, 52rem);
      margin: 0.75rem 0 0;
      padding: var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: 0.5rem;
      background: var(--bk-mist);
    }

    & #karta-recenze > article > h1 {
      margin: 0 0 0.5rem;
      padding: 0 0 0.5rem;
      border-bottom: 1px solid var(--bk-border);
      color: var(--bk-ink);
      font: 700 1rem / 1.35 var(--bk-font);
      overflow-wrap: anywhere;
    }

    & #karta-recenze > article > table {
      float: none;
      max-width: 100%;
      margin: 0 0 0.5rem;
    }

    & #karta-recenze > article ul {
      max-width: none;
    }

    & #karta-mapa #mapa_obal {
      box-sizing: border-box;
      width: 100%;
      margin: 0;
      border-color: var(--bk-border);
      border-radius: 0.5rem;
    }

    & #karta-mapa #map_canvas {
      height: clamp(16rem, 42vw, 31rem);
    }

    & #itinerar input[type="text"] {
      box-sizing: border-box;
      max-width: 100%;
      padding: 0.45rem 0.6rem;
      border: 1px solid var(--bk-field-border);
      border-radius: 0.5rem;
      font: inherit;
    }

    /********************* DALŠÍ UBYTOVÁNÍ V OKOLÍ **********************/
    & > div:has(> #foto-uvod) > section.last {
      margin: var(--bk-card-gap) 0 0;

      & > #doporucujeme {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--bk-card-gap);
        width: auto;
        max-width: none;
        margin: 0;
      }

      & #doporucujeme > :is(h2, div) {
        flex: 0 0 100%;
        min-width: 0;
        text-align: center;
      }

      & #doporucujeme > h2 {
        box-sizing: border-box;
        display: grid;
        place-items: center;
        min-height: var(--bk-menu-height);
        margin: 0;
        padding: 0.25rem var(--bk-card-padding);
        border: 0;
        border-radius: var(--bk-radius);
        background: var(--bk-navy);
        color: #fff;
        font: 700 clamp(1.05rem, 2.6vw, 1.5rem) / 1.2 var(--bk-font);
        letter-spacing: -0.025em;
        text-align: center;
      }

      & #doporucujeme > p.blizky {
        box-sizing: border-box;
        flex: 0 1 17rem;
        display: block;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: var(--bk-card-padding);
        border: 1px solid var(--bk-border);
        border-radius: var(--bk-radius);
        background: var(--bk-surface);
        box-shadow: var(--bk-shadow);
        color: var(--bk-muted);
        text-align: center;
        overflow-wrap: anywhere;
      }

      & #doporucujeme > p.blizky > a:has(> img) {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 0.55rem;
        padding: 0;
        background: none;
      }

      & #doporucujeme > p.blizky > a > img {
        display: block;
        float: none;
        max-width: 100%;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 0.5rem;
      }

      & #doporucujeme > div > a.tlacitko {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        float: none;
        min-height: 2.5rem;
        margin: 0.35rem;
        padding: 0.3rem 0.75rem;
        border: 1px solid var(--bk-navy);
        border-radius: 0.5rem;
        background: var(--bk-navy);
        color: #fff !important;
        line-height: 1.25;
      }

      & #doporucujeme > div > a.tlacitko:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }

      & #doporucujeme > div > a.tlacitko > span {
        color: inherit;
      }
    }

    /***************************** FOOTER ****************************/
    & > footer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
      gap: var(--bk-gap);
      margin: var(--bk-gap) 0 0;
      padding: 1.8rem var(--bk-edge) 1.3rem;
      border-top: 1px solid var(--bk-border);
      background: var(--bk-mist);
      color: var(--bk-muted);
      font-size: 0.875rem;

      & > div {
        float: none;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow-wrap: anywhere;
      }

      & a {
        line-height: inherit;
      }

      & :is(img, iframe),
      & > .fb-page > span {
        max-width: 100%;
      }

      & img {
        height: auto;
      }
    }

    & > footer > br.konec,
    & > footer + br:has(+ #copyright) {
      display: none;
    }

    & > #copyright {
      width: auto;
      margin: 0;
      padding: 0.8rem var(--bk-gutter);
      background: var(--bk-navy);
      color: #fff;
      font-size: 0.8rem;
    }

    /********************* FOKUS KLÁVESNICE **********************/
    & > :where(header, #zeme, #drobecky, footer, div:has(> #foto-uvod))
      :is(a, input, select):focus-visible:not(:where(#map_canvas *)) {
      outline: 2px solid var(--bk-focus);
      outline-offset: 2px;
    }

    & > #zeme a:focus-visible,
    & > header input[type="submit"]:focus-visible {
      outline-color: #fff;
      outline-offset: -4px;
    }

    /******************** RESPONZIVNÍ ROZLOŽENÍ ********************/
    @media (width < 1024px) {
      & > header {
        grid-template-columns: auto minmax(0, 1fr);
      }

      & > header > nav {
        grid-area: 2 / 1 / auto / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        align-items: center;
        justify-items: start;
      }
    }

    @media (width > 52rem) {
      & > div:has(> #foto-uvod) > :is(#foto-uvod, #ikony-prehledovka) {
        align-self: stretch;
        /*align-content: start;*/
      }
    }

    @media (width <= 52rem) {
      & > div:has(> #foto-uvod) {
        grid-template-columns: minmax(0, 1fr);
      }

      & :is(#foto-uvod, #ikony-prehledovka) {
        justify-self: center;
        max-width: var(--bk-detail-gallery-width);
      }
    }

    @media (width <= 43rem) {
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;

      & > header {
        column-gap: 0.65rem;
      }

      & > header > nav {
        grid-template-columns: minmax(0, 1fr);
      }

      & > header > nav > ul {
        column-gap: 0.65rem;
        font-size: 0.8rem;
      }

      & > header > nav > form {
        max-width: none;
      }

      & > nav#zeme > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > nav#zeme > ul a {
        font-size: 0.85rem;
      }
    }

    @media (width <= 32rem) {
      --bk-detail-thumb-gap: 8px;

      & #ikony-prehledovka > div.vpravo:not(.ikonky) {
        flex-basis: 100%;
      }

      & #ikony-prehledovka > div.vpravo > a.tlacitko {
        width: 100%;
      }

      & > div:has(> #foto-uvod) > .karty-obal > ul.karty > li {
        flex-grow: 1;
      }

      & #karta-ceny > table.cenik > :is(thead, tbody) > tr > :is(th, td) {
        padding-inline: 0.4rem;
      }

      & #karta-ceny > table.cenik > tbody > tr > td > a[href*="rezervace-formular.php"] {
        padding-inline: 0.5rem;
      }
    }
  }
}
/************************************************************************************************************************/
/*********************************************** KONEC DETAILU NEMOVITOSTI **********************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************** REZERVAČNÍ FORMULÁŘ **************************************************/
/************************************************************************************************************************/
@media screen {
  body:has(> #zmena-terminu > form#rezervace_formular) {
    /********************** BARVY A ROZLOŽENÍ STRÁNKY **********************/
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-accent-hover: #8f1930;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;
    --bk-field-border: #8094a6;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-width: 76rem;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-inner: min(var(--bk-width), calc(100% - 2 * var(--bk-gutter)));
    --bk-edge: max(var(--bk-gutter), calc((100% - var(--bk-width)) / 2));
    --bk-radius: 0.9rem;
    --bk-card-padding: clamp(15px, 2.3vw, 24px);
    --bk-card-gap: 15px;
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-menu-height: 3.05rem;
    --bk-control-height: 2.75rem;

    display: grid;
    grid-template-columns:
      minmax(var(--bk-gutter), 1fr)
      minmax(0, calc((var(--bk-inner) - var(--bk-card-gap)) * 0.53))
      var(--bk-card-gap)
      minmax(0, calc((var(--bk-inner) - var(--bk-card-gap)) * 0.47))
      minmax(var(--bk-gutter), 1fr);
    grid-template-rows: repeat(6, auto) minmax(0, 1fr) auto auto;
    grid-template-areas:
      "header header header header header"
      "countries countries countries countries countries"
      ". breadcrumbs breadcrumbs breadcrumbs ."
      ". title title title ."
      ". form . info ."
      ". note note note ."
      ". . . . ."
      "footer footer footer footer footer"
      "copyright copyright copyright copyright copyright";
    min-height: 100vh;
    margin: 0;
    background: var(--bk-page) var(--bk-background-image) repeat;
    color: var(--bk-text);
    font: 1rem / 1.55 var(--bk-font);

    /* Rezervační šablona má hlavičku a patičku uvnitř tohoto obalu. */
    & > #zmena-terminu {
      display: contents;
    }

    & > :is(h1, #drobecky) a,
    & > #zmena-terminu > :is(#rezervace_formular, div.rezervace, footer) a {
      color: var(--bk-ink);
      font-weight: 700;
      text-underline-offset: 0.16em;
    }

    & > #zmena-terminu > br.konec {
      display: none;
    }

    /************************ HEADER A FULLTEXT ***********************/
    & > #zmena-terminu > header {
      grid-area: header;
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) max-content;
      align-items: center;
      gap: 0.55rem 1rem;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0.85rem var(--bk-edge);
      background: var(--bk-surface);

      & > a {
        grid-area: 1 / 1;
        display: block;
      }

      & #logo {
        width: calc(136px * var(--bk-logo-scale));
        height: calc(108px * var(--bk-logo-scale));
        margin: 0;
        background: url("/images/design/ikonky.png") no-repeat;
        background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
        background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
      }

      & > p {
        grid-area: 1 / 2;
        position: static;
        margin: 0;
        font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
        letter-spacing: -0.025em;
      }

      & > p :is(a, span) {
        color: var(--bk-ink);
        font: inherit;
        text-decoration: none;
      }

      & > nav {
        grid-area: 1 / 3;
        position: static;
        display: grid;
        justify-items: end;
        gap: 0.25rem 1rem;
        min-width: 0;
        width: auto;
        height: auto;
        background: none;
      }

      & > nav > ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.8rem;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 0.85rem;
      }

      & > nav > ul > li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        color: var(--bk-text);
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
      }

      & > nav > ul a.telefon {
        color: var(--bk-accent);
        white-space: nowrap;
      }

      & > nav > ul a:hover {
        color: var(--bk-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      & > nav > form {
        float: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-self: end;
        width: 100%;
        max-width: 17rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > nav input:is([type="search"], [type="submit"]) {
        box-sizing: border-box;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.75rem;
        font: 0.875rem / 1.25 var(--bk-font);
      }

      & > nav input[type="search"] {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--bk-field-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > nav input[type="submit"] {
        border: 1px solid var(--bk-navy);
        border-radius: 0 0.5rem 0.5rem 0;
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      & > nav input[type="submit"]:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /**************** MENU ZEMÍ A DROBEČKOVÁ NAVIGACE ****************/
    & > nav#zeme {
      grid-area: countries;
      margin: 0;
      background: var(--bk-navy);

      & > ul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, 60rem);
        margin: 0 auto;
        padding: 0;
        background: none;
      }

      & > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > ul a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
      }

      & > ul a:is(:hover, :focus-visible),
      & > ul > li[id^="aktivni-"] > a {
        background: var(--bk-navy-hover);
        color: #fff;
      }

      & > ul > li[id^="aktivni-"] > a {
        box-shadow: inset 0 -3px #c7dbee;
      }
    }

    & > #drobecky {
      grid-area: breadcrumbs;
      min-width: 0;
      margin-block: 0.65rem var(--bk-card-gap);
      padding: 0;
      color: var(--bk-muted);
      font-size: 0.875rem;
      overflow-wrap: anywhere;
    }

    /**************************** NADPIS REZERVACE ***************************/
    & > h1 {
      grid-area: title;
      min-width: 0;
      margin: 0 0 var(--bk-gap);
      padding: 0;
      color: var(--bk-ink);
      font: 700 clamp(1.45rem, 2.6vw, 2rem) / 1.2 var(--bk-font);
      letter-spacing: -0.025em;
      text-align: center;
      overflow-wrap: anywhere;

      & > a {
        display: block;
        margin-top: 0.3rem;
        font-size: 0.68em;
        line-height: 1.4;
        letter-spacing: normal;
      }
    }

    & > #zmena-terminu > :is(form#rezervace_formular, div.rezervace) {
      box-sizing: border-box;
      float: none;
      width: auto;
      min-width: 0;
      max-width: none;
      margin: 0;
      padding: var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    /************************ KONTAKTNÍ ÚDAJE A VOLBY ************************/
    & > #zmena-terminu > form#rezervace_formular {
      grid-area: form;
      display: flex;
      flex-direction: column;

      & > fieldset {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem var(--bk-card-gap);
        float: none;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > fieldset > legend {
        box-sizing: border-box;
        max-width: 100%;
        margin: 0 0 0.85rem;
        padding: 0;
        border: 0;
        background: none;
        color: var(--bk-ink);
        font: 700 clamp(1.15rem, 1.8vw, 1.35rem) / 1.25 var(--bk-font);
      }

      & > fieldset > br.konec,
      & > fieldset > label > br {
        display: none;
      }

      & > fieldset > label {
        float: none;
        min-width: 0;
        margin: 0;
        color: var(--bk-ink);
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.4;
        overflow-wrap: anywhere;
      }

      & > fieldset > label:not([for="jmeno"], [for="prijmeni"], [for="email"], [for="mobil2"]) {
        grid-column: 1 / -1;
      }

      & > fieldset > label > a {
        line-height: inherit;
      }

      & > fieldset > label > :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):not([hidden], .skryte, .schovane) {
        box-sizing: border-box;
        display: block;
        width: 100%;
        min-width: 0;
        min-height: var(--bk-control-height);
        margin: 0.3rem 0 0;
        padding: 0.55rem 0.7rem;
        border: 1px solid var(--bk-field-border);
        border-radius: 0.5rem;
        background: var(--bk-surface);
        color: var(--bk-ink);
        font: 1rem / 1.35 var(--bk-font);
      }

      & > fieldset > label > textarea {
        min-height: 6.25rem;
        resize: vertical;
      }

      & > fieldset > label[for="zvire"]:not([hidden], .skryte, .schovane) {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        min-height: var(--bk-control-height);
        padding: 0.5rem 0.7rem;
        border-radius: 0.5rem;
        background: var(--bk-mist);
        cursor: pointer;
      }

      & > fieldset > label[for="zvire"] > input[type="checkbox"] {
        flex: 0 0 auto;
        width: 1.15rem;
        height: 1.15rem;
        margin: 0;
        accent-color: var(--bk-navy);
      }

      & > fieldset > label.chyba > :is(input, select, textarea),
      & > fieldset :is(input, select, textarea)[aria-invalid="true"] {
        border-color: var(--bk-accent);
      }

      & > p {
        margin: 0;
        color: var(--bk-text);
        overflow-wrap: anywhere;
      }

      & > p.pzn {
        margin: 0.85rem 0 1rem;
        color: var(--bk-muted);
        font-size: 0.875rem;
      }
    }

    /************************ ODESLÁNÍ A STAV FORMULÁŘE ***********************/
    & > #zmena-terminu > #rezervace_formular > input[type="submit"] {
      box-sizing: border-box;
      align-self: flex-end;
      max-width: 100%;
      min-height: var(--bk-control-height);
      margin: auto 0 0;
      padding: 0.65rem 1.15rem;
      border: 1px solid var(--bk-accent);
      border-radius: 0.5rem;
      background: var(--bk-accent);
      color: #fff;
      font: 700 1rem / 1.25 var(--bk-font);
      cursor: pointer;
    }

    & > #zmena-terminu > #rezervace_formular > input[type="submit"]:enabled:is(:hover, :focus-visible) {
      border-color: var(--bk-accent-hover);
      background: var(--bk-accent-hover);
      color: #fff;
    }

    & > #zmena-terminu > #rezervace_formular > input[type="submit"]:disabled {
      cursor: default;
    }

    & > #zmena-terminu > #rezervace_formular > #cekani {
      box-sizing: border-box;
      inset: 50% auto auto 50%;
      z-index: 20;
      width: min(24rem, calc(100% - 2rem));
      height: auto;
      margin: 0;
      padding: 1rem;
      transform: translate(-50%, -50%);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
      color: var(--bk-ink);
      font: 700 1rem / 1.5 var(--bk-font);
    }

    /************************* TERMÍN, POSTUP A KONTAKT ***********************/
    & > #zmena-terminu > div.rezervace {
      grid-area: info;

      & > h2 {
        margin: 0 0 1rem;
        padding: 0.85rem 1rem;
        border: 0;
        border-inline-start: 3px solid var(--bk-navy);
        border-radius: 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
        font: 700 clamp(1rem, 1.5vw, 1.15rem) / 1.4 var(--bk-font);
        overflow-wrap: anywhere;
      }

      & > h2.chyba {
        border-inline-start-color: var(--bk-accent);
        background: #fbeff1;
        color: var(--bk-accent-hover);
      }

      & > h3 {
        margin: 1rem 0 0.55rem;
        color: var(--bk-ink);
        font: 700 1.05rem / 1.3 var(--bk-font);
      }

      & > :is(ul, ol) {
        margin: 0 0 1rem;
        padding-inline-start: 1.25rem;
      }

      & > :is(ul, ol) > li {
        margin: 0 0 0.4rem;
        color: var(--bk-text);
        overflow-wrap: anywhere;
      }

      & > p {
        margin: 0 0 0.75rem;
        padding: 0;
        color: var(--bk-text);
        overflow-wrap: anywhere;
      }

      & > p:has(> img) {
        display: flow-root;
        margin: 0;
        padding: 0.75rem;
        border-radius: 0.5rem;
        background: var(--bk-mist);
      }

      & > p > img {
        float: left;
        width: clamp(4.25rem, 11vw, 7.5rem);
        max-width: 100%;
        height: auto;
        margin: 0 0.75rem 0 0;
        border: 0;
        border-radius: 0.5rem;
      }

      & > p > img + br {
        display: none;
      }
    }

    & > #zmena-terminu > #zajemci {
      grid-area: note;
      margin: 0.75rem 0 0;
      color: var(--bk-muted);
      font-size: 0.875rem;
      text-align: center;
    }

    /***************************** FOOTER ****************************/
    & > #zmena-terminu > footer {
      grid-area: footer;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
      gap: var(--bk-gap);
      margin: var(--bk-gap) 0 0;
      padding: 1.8rem var(--bk-edge) 1.3rem;
      border-top: 1px solid var(--bk-border);
      background: var(--bk-mist);
      color: var(--bk-muted);
      font-size: 0.875rem;

      & > div {
        float: none;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow-wrap: anywhere;
      }

      & a {
        line-height: inherit;
      }

      & :is(img, iframe),
      & > .fb-page > span {
        max-width: 100%;
      }

      & img {
        height: auto;
      }
    }

    & > #zmena-terminu > footer > br.konec,
    & > #zmena-terminu > footer + br:has(+ #copyright) {
      display: none;
    }

    & > #zmena-terminu > #copyright {
      grid-area: copyright;
      text-align: center;
      width: auto;
      margin: 0;
      padding: 0.8rem var(--bk-gutter);
      background: var(--bk-navy);
      color: #fff;
      font-size: 0.8rem;
    }

    /*************************** FOKUS KLÁVESNICE **************************/
    & > :is(h1, #drobecky, #zeme, #skipto) a:focus-visible,
    & > #zmena-terminu :is(a, input, select, textarea):focus-visible {
      outline: 2px solid var(--bk-focus);
      outline-offset: 2px;
    }

    & > #zeme a:focus-visible,
    & > #zmena-terminu > header input[type="submit"]:focus-visible {
      outline-color: #fff;
      outline-offset: -4px;
    }

    & > #skipto:focus-within {
      position: fixed;
      inset: 0.75rem auto auto 0.75rem;
      z-index: 30;
      width: auto;
      max-width: calc(100% - 1.5rem);
      height: auto;
      padding: 0.75rem;
      overflow: visible;
      border: 1px solid var(--bk-border);
      border-radius: 0.5rem;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    /************************** RESPONZIVNÍ ROZLOŽENÍ ************************/
    @media (width < 1024px) {
      & > #zmena-terminu > header {
        grid-template-columns: auto minmax(0, 1fr);
      }

      & > #zmena-terminu > header > nav {
        grid-area: 2 / 1 / auto / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        align-items: center;
        justify-items: start;
      }
    }

    @media (width <= 52rem) {
      grid-template-columns: minmax(var(--bk-gutter), 1fr) minmax(0, var(--bk-inner)) minmax(var(--bk-gutter), 1fr);
      grid-template-rows: repeat(7, auto) minmax(0, 1fr) auto auto;
      grid-template-areas:
        "header header header"
        "countries countries countries"
        ". breadcrumbs ."
        ". title ."
        ". form ."
        ". info ."
        ". note ."
        ". . ."
        "footer footer footer"
        "copyright copyright copyright";

      & > #zmena-terminu > div.rezervace {
        margin-top: var(--bk-card-gap);
      }
    }

    @media (width <= 43rem) {
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;

      & > #zmena-terminu > header {
        column-gap: 0.65rem;
      }

      & > #zmena-terminu > header > nav {
        grid-template-columns: minmax(0, 1fr);
      }

      & > #zmena-terminu > header > nav > ul {
        column-gap: 0.65rem;
        font-size: 0.8rem;
      }

      & > #zmena-terminu > header > nav > form {
        max-width: none;
      }

      & > nav#zeme > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > nav#zeme > ul a {
        font-size: 0.85rem;
      }
    }

    @media (width <= 36rem) {
      & > #zmena-terminu > #rezervace_formular > fieldset {
        grid-template-columns: minmax(0, 1fr);
      }

      & > #zmena-terminu > #rezervace_formular > input[type="submit"] {
        align-self: stretch;
      }
    }
  }
}
/************************************************************************************************************************/
/*********************************************** KONEC REZERVAČNÍHO FORMULÁŘE ********************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/********************************************** PODĚKOVÁNÍ A STAV REZERVACE **********************************************/
/************************************************************************************************************************/
@media screen {
  body#podekovani {
    /********************** BARVY A ROZLOŽENÍ STRÁNKY **********************/
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-width: 76rem;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-inner: min(var(--bk-width), calc(100% - 2 * var(--bk-gutter)));
    --bk-edge: max(var(--bk-gutter), calc((100% - var(--bk-width)) / 2));
    --bk-radius: 0.9rem;
    --bk-card-padding: clamp(15px, 2.3vw, 24px);
    --bk-card-gap: 15px;
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-menu-height: 3.05rem;
    --bk-control-height: 2.75rem;

    display: grid;
    grid-template-columns:
      minmax(var(--bk-gutter), 1fr)
      minmax(0, calc((var(--bk-inner) - var(--bk-card-gap)) * 0.53))
      var(--bk-card-gap)
      minmax(0, calc((var(--bk-inner) - var(--bk-card-gap)) * 0.47))
      minmax(var(--bk-gutter), 1fr);
    grid-template-rows: repeat(7, auto) minmax(0, 1fr) auto auto;
    grid-template-areas:
      "header header header header header"
      "countries countries countries countries countries"
      ". breadcrumbs breadcrumbs breadcrumbs ."
      ". title title title ."
      ". intro intro intro ."
      ". back back back ."
      ". status . info ."
      ". . . . ."
      "footer footer footer footer footer"
      "copyright copyright copyright copyright copyright";
    min-height: 100vh;
    margin: 0;
    background: var(--bk-page) var(--bk-background-image) repeat;
    color: var(--bk-text);
    font: 1rem / 1.55 var(--bk-font);

    & > :where(#drobecky, table, div.rezervace, footer) a {
      color: var(--bk-ink);
      font-weight: 700;
      text-underline-offset: 0.16em;
    }

    & > br.konec {
      display: none;
    }

    /************************ HEADER A FULLTEXT ***********************/
    & > header {
      grid-area: header;
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) max-content;
      align-items: center;
      gap: 0.55rem 1rem;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0.85rem var(--bk-edge);
      background: var(--bk-surface);

      & > a {
        grid-area: 1 / 1;
        display: block;
      }

      & #logo {
        width: calc(136px * var(--bk-logo-scale));
        height: calc(108px * var(--bk-logo-scale));
        margin: 0;
        background: url("/images/design/ikonky.png") no-repeat;
        background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
        background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
      }

      & > p {
        grid-area: 1 / 2;
        position: static;
        margin: 0;
        font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
        letter-spacing: -0.025em;
      }

      & > p :is(a, span) {
        color: var(--bk-ink);
        font: inherit;
        text-decoration: none;
      }

      & > nav {
        grid-area: 1 / 3;
        position: static;
        display: grid;
        justify-items: end;
        gap: 0.25rem 1rem;
        min-width: 0;
        width: auto;
        height: auto;
        background: none;
      }

      & > nav > ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.8rem;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 0.85rem;
      }

      & > nav > ul > li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        color: var(--bk-text);
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
      }

      & > nav > ul a.telefon {
        color: var(--bk-accent);
        white-space: nowrap;
      }

      & > nav > ul a:hover {
        color: var(--bk-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      & > nav > form {
        float: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-self: end;
        width: 100%;
        max-width: 17rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > nav input:is([type="search"], [type="submit"]) {
        box-sizing: border-box;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.75rem;
        font: 0.875rem / 1.25 var(--bk-font);
      }

      & > nav input[type="search"] {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--bk-field-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > nav input[type="submit"] {
        border: 1px solid var(--bk-navy);
        border-radius: 0 0.5rem 0.5rem 0;
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      & > nav input[type="submit"]:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /**************** MENU ZEMÍ A DROBEČKOVÁ NAVIGACE ****************/
    & > nav#zeme {
      grid-area: countries;
      margin: 0;
      background: var(--bk-navy);

      & > ul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, 60rem);
        margin: 0 auto;
        padding: 0;
        background: none;
      }

      & > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > ul a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
      }

      & > ul a:is(:hover, :focus-visible),
      & > ul > li[id^="aktivni-"] > a {
        background: var(--bk-navy-hover);
        color: #fff;
      }

      & > ul > li[id^="aktivni-"] > a {
        box-shadow: inset 0 -3px #c7dbee;
      }
    }

    & > #drobecky {
      grid-area: breadcrumbs;
      min-width: 0;
      margin: 0.65rem 0 var(--bk-card-gap);
      padding: 0;
      color: var(--bk-muted);
      font-size: 0.875rem;
      overflow-wrap: anywhere;
    }

    /********************* NADPIS A NÁVRAT NA DETAIL *********************/
    & > h1 {
      grid-area: title;
      min-width: 0;
      margin: 0 0 var(--bk-card-gap);
      padding: 0;
      color: var(--bk-ink);
      font: 700 clamp(1.45rem, 2.6vw, 2rem) / 1.2 var(--bk-font);
      letter-spacing: -0.025em;
      text-align: center;
      overflow-wrap: anywhere;
    }

    & > h1 + p:not(#zpet_detail) {
      grid-area: intro;
      min-width: 0;
      margin: 0 0 var(--bk-gap);
      color: var(--bk-muted);
      text-align: center;
    }

    & > #zpet_detail {
      grid-area: back;
      min-width: 0;
      margin: 0 0 var(--bk-gap);
      text-align: center;

      & > a {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        min-height: var(--bk-control-height);
        padding: 0.55rem 0.9rem;
        border: 1px solid var(--bk-navy);
        border-radius: 0.5rem;
        background: var(--bk-navy);
        color: #fff;
        font: 700 0.9rem / 1.3 var(--bk-font);
        text-align: center;
        text-decoration: none;
      }

      & > a:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /*********************** STAV REZERVACE A TERMÍN **********************/
    & > table {
      grid-area: status;
      align-self: start;
      box-sizing: border-box;
      float: none;
      width: 100%;
      min-width: 0;
      max-width: none;
      margin: 0;
      border: 1px solid var(--bk-border);
      border-top: 0;
      border-radius: 0 0 var(--bk-radius) var(--bk-radius);
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);

      & > caption {
        margin: 0;
        padding: 0.8rem var(--bk-card-padding);
        border: 0;
        border-radius: var(--bk-radius) var(--bk-radius) 0 0;
        background: var(--bk-navy);
        color: #fff;
        font: 700 clamp(0.95rem, 1.5vw, 1.1rem) / 1.45 var(--bk-font);
        text-align: left;
        overflow-wrap: anywhere;
      }

      & > caption :is(a, strong, span) {
        color: inherit;
      }

      & > caption a:focus-visible {
        outline-color: #fff;
      }

      & > tbody > tr {
        background: var(--bk-surface);
      }

      & > tbody > tr:nth-child(odd) {
        background: var(--bk-mist);
      }

      & > tbody > tr > td {
        padding: 0.7rem var(--bk-card-padding);
        border: 0;
        border-bottom: 1px solid var(--bk-border);
        color: var(--bk-text);
        font-size: 0.9rem;
        line-height: 1.45;
        vertical-align: middle;
        overflow-wrap: anywhere;
      }

      & > tbody > tr > td > strong {
        color: var(--bk-ink);
      }

      & > tbody > tr > td:last-child {
        box-sizing: border-box;
        width: clamp(6rem, 10vw, 7rem);
        padding-inline: 0.45rem;
        border-inline-start: 1px solid var(--bk-border);
        font-variant-numeric: tabular-nums;
        text-align: center;
      }

      & > tbody > tr:last-child > td {
        border-bottom: 0;
      }

      & > tbody > tr:last-child > td:first-child {
        border-bottom-left-radius: var(--bk-radius);
      }

      & > tbody > tr:last-child > td:last-child {
        border-bottom-right-radius: var(--bk-radius);
      }

      /* Ikony a datum zůstávají v buňkách podle skutečného stavu rezervace. */
      & > tbody > tr > td > :is(.ikona.ok, .ikona.cekame) {
        display: block;
        float: none;
        margin: 0 auto;
      }

      & > tbody > tr > td:has(> .ikona.ok) {
        background: #eef6ee;
        color: #294f36;
      }
    }

    /*********************** POSTUP A KONTAKT *****************************/
    & > div.rezervace {
      grid-area: info;
      align-self: start;
      box-sizing: border-box;
      float: none;
      width: auto;
      min-width: 0;
      margin: 0;
      padding: var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);

      & > h2 {
        margin: 0 0 1rem;
        padding: 0.85rem 1rem;
        border: 0;
        border-inline-start: 3px solid var(--bk-navy);
        border-radius: 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
        font: 700 clamp(1rem, 1.5vw, 1.15rem) / 1.4 var(--bk-font);
        overflow-wrap: anywhere;
      }

      & > h3 {
        margin: 1rem 0 0.55rem;
        color: var(--bk-ink);
        font: 700 1.05rem / 1.3 var(--bk-font);
      }

      & > :is(ul, ol) {
        margin: 0 0 1rem;
        padding-inline-start: 1.25rem;
      }

      & > :is(ul, ol) > li {
        margin: 0 0 0.4rem;
        color: var(--bk-text);
        overflow-wrap: anywhere;
      }

      & > p {
        margin: 0 0 0.75rem;
        padding: 0;
        color: var(--bk-text);
        overflow-wrap: anywhere;
      }

      & > p:has(> img) {
        display: flow-root;
        margin: 0;
        padding: 0.75rem;
        border-radius: 0.5rem;
        background: var(--bk-mist);
      }

      & > p > img {
        float: left;
        width: clamp(4.25rem, 11vw, 7.5rem);
        max-width: 100%;
        height: auto;
        margin: 0 0.75rem 0 0;
        border: 0;
        border-radius: 0.5rem;
      }

      & > p > img + br {
        display: none;
      }
    }

    /***************************** FOOTER ****************************/
    & > footer {
      grid-area: footer;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
      gap: var(--bk-gap);
      margin: var(--bk-gap) 0 0;
      padding: 1.8rem var(--bk-edge) 1.3rem;
      border-top: 1px solid var(--bk-border);
      background: var(--bk-mist);
      color: var(--bk-muted);
      font-size: 0.875rem;

      & > div {
        float: none;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow-wrap: anywhere;
      }

      & a {
        line-height: inherit;
      }

      & :is(img, iframe),
      & > .fb-page > span {
        max-width: 100%;
      }

      & img {
        height: auto;
      }
    }

    & > footer > br.konec,
    & > footer + br:has(+ #copyright) {
      display: none;
    }

    & > #copyright {
      grid-area: copyright;
      text-align: center;
      width: auto;
      margin: 0;
      padding: 0.8rem var(--bk-gutter);
      background: var(--bk-navy);
      color: #fff;
      font-size: 0.8rem;
    }

    /*************************** FOKUS KLÁVESNICE **************************/
    & > :where(#drobecky, #zeme, #skipto, #zpet_detail, table, div.rezervace, footer) a:focus-visible,
    & > header :is(a, input):focus-visible {
      outline: 2px solid var(--bk-focus);
      outline-offset: 2px;
    }

    & > #zeme a:focus-visible,
    & > header input[type="submit"]:focus-visible {
      outline-color: #fff;
      outline-offset: -4px;
    }

    & > #skipto:focus-within {
      position: fixed;
      inset: 0.75rem auto auto 0.75rem;
      z-index: 30;
      width: auto;
      max-width: calc(100% - 1.5rem);
      height: auto;
      padding: 0.75rem;
      overflow: visible;
      border: 1px solid var(--bk-border);
      border-radius: 0.5rem;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    /************************** RESPONZIVNÍ ROZLOŽENÍ ************************/
    @media (width < 1024px) {
      & > header {
        grid-template-columns: auto minmax(0, 1fr);
      }

      & > header > nav {
        grid-area: 2 / 1 / auto / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        align-items: center;
        justify-items: start;
      }
    }

    @media (width <= 52rem) {
      grid-template-columns: minmax(var(--bk-gutter), 1fr) minmax(0, var(--bk-inner)) minmax(var(--bk-gutter), 1fr);
      grid-template-rows: repeat(8, auto) minmax(0, 1fr) auto auto;
      grid-template-areas:
        "header header header"
        "countries countries countries"
        ". breadcrumbs ."
        ". title ."
        ". intro ."
        ". back ."
        ". status ."
        ". info ."
        ". . ."
        "footer footer footer"
        "copyright copyright copyright";

      & > div.rezervace {
        margin-top: var(--bk-card-gap);
      }
    }

    @media (width <= 43rem) {
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;

      & > header {
        column-gap: 0.65rem;
      }

      & > header > nav {
        grid-template-columns: minmax(0, 1fr);
      }

      & > header > nav > ul {
        column-gap: 0.65rem;
        font-size: 0.8rem;
      }

      & > header > nav > form {
        max-width: none;
      }

      & > nav#zeme > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > nav#zeme > ul a {
        font-size: 0.85rem;
      }
    }
  }
}
/************************************************************************************************************************/
/******************************************** KONEC PODĚKOVÁNÍ A STAVU REZERVACE *****************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/****************************************************** KONTAKTY ********************************************************/
/************************************************************************************************************************/
@media screen {
  body#kontakty {
    /********************** BARVY A ROZLOŽENÍ STRÁNKY **********************/
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-field-border: #8094a6;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-width: 76rem;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-inner: min(var(--bk-width), calc(100% - 2 * var(--bk-gutter)));
    --bk-edge: max(var(--bk-gutter), calc((100% - var(--bk-width)) / 2));
    --bk-radius: 0.9rem;
    --bk-card-padding: clamp(15px, 2.3vw, 24px);
    --bk-card-gap: 15px;
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-menu-height: 3.05rem;
    --bk-control-height: 2.75rem;

    display: grid;
    grid-template-columns:
      minmax(var(--bk-gutter), 1fr)
      repeat(2, minmax(0, calc(var(--bk-inner) / 2)))
      minmax(var(--bk-gutter), 1fr);
    grid-template-rows: repeat(7, auto) minmax(0, 1fr) auto auto;
    grid-template-areas:
      "header header header header"
      "countries countries countries countries"
      ". title title ."
      ". booking address ."
      ". map map ."
      ". sales-title sales-title ."
      ". sales sales ."
      ". . . ."
      "footer footer footer footer"
      "copyright copyright copyright copyright";
    min-height: 100vh;
    margin: 0;
    background: var(--bk-page) var(--bk-background-image) repeat;
    color: var(--bk-text);
    font: 1rem / 1.55 var(--bk-font);

    & > :where(.boxik, table, footer) a {
      color: var(--bk-ink);
      font-weight: 700;
      text-underline-offset: 0.16em;
    }

    & > h1 + p:empty {
      display: none;
    }

    /************************ HEADER A FULLTEXT ***********************/
    & > header {
      grid-area: header;
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) max-content;
      align-items: center;
      gap: 0.55rem 1rem;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0.85rem var(--bk-edge);
      background: var(--bk-surface);

      & > a {
        grid-area: 1 / 1;
        display: block;
      }

      & #logo {
        width: calc(136px * var(--bk-logo-scale));
        height: calc(108px * var(--bk-logo-scale));
        margin: 0;
        background: url("/images/design/ikonky.png") no-repeat;
        background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
        background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
      }

      & > p {
        grid-area: 1 / 2;
        position: static;
        margin: 0;
        font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
        letter-spacing: -0.025em;
      }

      & > p :is(a, span) {
        color: var(--bk-ink);
        font: inherit;
        text-decoration: none;
      }

      & > nav {
        grid-area: 1 / 3;
        position: static;
        display: grid;
        justify-items: end;
        gap: 0.25rem 1rem;
        min-width: 0;
        width: auto;
        height: auto;
        background: none;
      }

      & > nav > ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.8rem;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 0.85rem;
      }

      & > nav > ul > li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        color: var(--bk-text);
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
      }

      & > nav > ul a.telefon {
        color: var(--bk-accent);
        white-space: nowrap;
      }

      & > nav > ul a:is(:hover, .aktivni) {
        color: var(--bk-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      & > nav > form {
        float: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-self: end;
        width: 100%;
        max-width: 17rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > nav input:is([type="search"], [type="submit"]) {
        box-sizing: border-box;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.75rem;
        font: 0.875rem / 1.25 var(--bk-font);
      }

      & > nav input[type="search"] {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--bk-field-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > nav input[type="submit"] {
        border: 1px solid var(--bk-navy);
        border-radius: 0 0.5rem 0.5rem 0;
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      & > nav input[type="submit"]:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /****************************** MENU ZEMÍ ******************************/
    & > nav#zeme {
      grid-area: countries;
      margin: 0;
      background: var(--bk-navy);

      & > ul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, 60rem);
        margin: 0 auto;
        padding: 0;
        background: none;
      }

      & > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > ul a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
      }

      & > ul a:is(:hover, :focus-visible),
      & > ul > li[id^="aktivni-"] > a {
        background: var(--bk-navy-hover);
        color: #fff;
      }

      & > ul > li[id^="aktivni-"] > a {
        box-shadow: inset 0 -3px #c7dbee;
      }
    }

    /********************* REZERVAČNÍ ODDĚLENÍ A ADRESA *********************/
    & > h1 {
      grid-area: title;
      margin: var(--bk-gap) 0 var(--bk-card-gap);
      padding: 0;
      color: var(--bk-ink);
      font: 700 clamp(1.45rem, 2.6vw, 2rem) / 1.2 var(--bk-font);
      letter-spacing: -0.025em;
      text-align: center;
    }

    & > div#hlavni.boxik {
      grid-area: booking;
      margin-inline-end: calc(var(--bk-card-gap) / 2);

      & > img {
        grid-row: 2 / span 3;
        margin-bottom: 0 !important;
      }

      & > p {
        margin: 0;
      }

      & > p > a {
        color: var(--bk-ink);
        font-size: inherit;
      }

      & > p > a:is([href^="tel:"], [href^="mailto:"]) {
        color: var(--bk-accent);
        font-size: clamp(1rem, 1.65vw, 1.2rem);
      }
    }

    & > div#hlavni.boxik + div.boxik {
      grid-area: address;
      margin-inline-start: calc(var(--bk-card-gap) / 2);
    }

    & > div.boxik {
      box-sizing: border-box;
      display: grid;
      grid-template-columns: minmax(0, min(42%, 260px)) minmax(0, 1fr);
      align-content: start;
      align-items: start;
      gap: 0.6rem clamp(0.75rem, 1.6vw, 1.2rem);
      min-width: 0;
      width: auto;
      margin: 0;
      padding: var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);

      & > h2 {
        grid-column: 1 / -1;
        margin: 0 0 0.15rem;
        padding: 0 0 0.6rem;
        border: 0;
        border-bottom: 1px solid var(--bk-border);
        background: none;
        color: var(--bk-ink);
        font: 700 clamp(1.15rem, 2vw, 1.4rem) / 1.25 var(--bk-font);
      }

      & > img {
        grid-column: 1;
        grid-row: 2;
        display: block;
        float: none;
        width: 100%;
        max-width: 260px;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 0.55rem;
      }

      & > p {
        grid-column: 2;
        float: none;
        min-width: 0;
        margin: 0;
        color: var(--bk-text);
        font-size: 0.95rem;
        overflow-wrap: anywhere;
      }

      & > p :is(span, time) {
        color: inherit;
      }

      & > p [itemprop="name"] {
        color: var(--bk-ink);
        font-weight: 700;
      }

      & > p a {
        line-height: inherit;
      }
    }

    /*********************** MAPA A VYHLEDÁNÍ TRASY ***********************/
    & a#mapaOvladac,
    & > #mapa_obal > form > input[type="submit"] {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      min-height: var(--bk-control-height);
      padding: 0.5rem 0.85rem;
      border: 1px solid var(--bk-navy);
      border-radius: 0.5rem;
      background: var(--bk-navy);
      color: #fff;
      font: 700 0.9rem / 1.3 var(--bk-font);
      text-align: center;
      text-decoration: none;
    }

    & a#mapaOvladac:is(:hover, :focus-visible),
    & > #mapa_obal > form > input[type="submit"]:is(:hover, :focus-visible) {
      background: var(--bk-navy-hover);
      color: #fff;
    }

    & a#mapaOvladac {
      margin-top: 0.65rem;
    }

    /* Původní skript otevírá a zavírá panel mapy změnou display. */
    & > #mapa_obal {
      grid-area: map;
      box-sizing: border-box;
      min-width: 0;
      width: 100%;
      margin: var(--bk-card-gap) 0 0;
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);

      & > #map_canvas {
        height: clamp(15rem, 38vw, 30rem);
        border-radius: var(--bk-radius) var(--bk-radius) 0 0;
        background: var(--bk-mist);
      }

      & > #itinerar:not(:empty) {
        padding: var(--bk-card-padding) var(--bk-card-padding) 0;
      }

      & > form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
        margin: 0;
        padding: var(--bk-card-padding);
      }

      & > form > p {
        flex-basis: 100%;
        margin: 0;
        color: var(--bk-ink);
        font-weight: 700;
      }

      & > form > input[type="text"] {
        box-sizing: border-box;
        flex: 0 1 20rem;
        min-width: 0;
        max-width: 100%;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.7rem;
        border: 1px solid var(--bk-field-border);
        border-radius: 0.5rem;
        background: var(--bk-surface);
        color: var(--bk-ink);
        font: inherit;
      }

      & > form > input[type="submit"] {
        margin: 0;
        cursor: pointer;
      }

      & > form > br.konec {
        display: none;
      }
    }

    /************************* NAŠE PRODEJNÍ MÍSTA ************************/
    & > h2:has(+ table) {
      grid-area: sales-title;
      box-sizing: border-box;
      display: grid;
      place-items: center;
      min-height: var(--bk-menu-height);
      margin: var(--bk-gap) 0 var(--bk-card-gap);
      padding: 0.25rem var(--bk-card-padding);
      border: 0;
      border-radius: var(--bk-radius);
      background: var(--bk-navy);
      color: #fff;
      font: 700 clamp(1.05rem, 2.6vw, 1.5rem) / 1.2 var(--bk-font);
      text-align: center;
    }

    & > h2 + table {
      grid-area: sales;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      border-collapse: separate;
      border-spacing: 0;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);

      & > tbody > tr {
        background: var(--bk-surface);
      }

      & > tbody > tr:nth-child(even) {
        background: var(--bk-mist);
      }

      & > tbody > tr > td {
        padding: 0.6rem 0.8rem;
        border: 0;
        border-bottom: 1px solid var(--bk-border);
        color: var(--bk-text);
        font-size: 0.9rem;
        line-height: 1.45;
        vertical-align: middle;
        overflow-wrap: anywhere;
      }

      & > tbody > tr:last-child > td {
        border-bottom: 0;
      }

      & > tbody > tr > td:first-child {
        color: var(--bk-ink);
        font-weight: 700;
      }

      & > tbody > tr > td:nth-child(4) {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
    }

    /***************************** FOOTER ****************************/
    & > footer {
      grid-area: footer;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
      gap: var(--bk-gap);
      margin: var(--bk-gap) 0 0;
      padding: 1.8rem var(--bk-edge) 1.3rem;
      border-top: 1px solid var(--bk-border);
      background: var(--bk-mist);
      color: var(--bk-muted);
      font-size: 0.875rem;

      & > div {
        float: none;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow-wrap: anywhere;
      }

      & a {
        line-height: inherit;
      }

      & :is(img, iframe),
      & > .fb-page > span {
        max-width: 100%;
      }

      & img {
        height: auto;
      }
    }

    & > footer > br.konec,
    & > footer + br:has(+ #copyright) {
      display: none;
    }

    & > #copyright {
      grid-area: copyright;
      text-align: center;
      width: auto;
      margin: 0;
      padding: 0.8rem var(--bk-gutter);
      background: var(--bk-navy);
      color: #fff;
      font-size: 0.8rem;
    }

    /*************************** FOKUS KLÁVESNICE **************************/
    & > :where(header, nav, .boxik, table, footer) :is(a, input):focus-visible,
    & > #mapa_obal > form > input:focus-visible {
      outline: 2px solid var(--bk-focus);
      outline-offset: 2px;
    }

    & > nav#zeme a:focus-visible,
    & > header input[type="submit"]:focus-visible {
      outline-color: #fff;
      outline-offset: -4px;
    }

    & > #skipto:focus-within {
      position: fixed;
      inset: 0.75rem auto auto 0.75rem;
      z-index: 30;
      width: auto;
      max-width: calc(100% - 1.5rem);
      height: auto;
      padding: 0.75rem;
      overflow: visible;
      border: 1px solid var(--bk-border);
      border-radius: 0.5rem;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    /************************** RESPONZIVNÍ ROZLOŽENÍ ************************/
    @media (width < 1024px) {
      & > header {
        grid-template-columns: auto minmax(0, 1fr);
      }

      & > header > nav {
        grid-area: 2 / 1 / auto / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        align-items: center;
        justify-items: start;
      }
    }

    @media (width <= 52rem) {
      grid-template-columns: minmax(var(--bk-gutter), 1fr) minmax(0, var(--bk-inner)) minmax(var(--bk-gutter), 1fr);
      grid-template-rows: repeat(8, auto) minmax(0, 1fr) auto auto;
      grid-template-areas:
        "header header header"
        "countries countries countries"
        ". title ."
        ". booking ."
        ". address ."
        ". map ."
        ". sales-title ."
        ". sales ."
        ". . ."
        "footer footer footer"
        "copyright copyright copyright";

      & > div#hlavni.boxik {
        margin-inline-end: 0;
      }

      & > div#hlavni.boxik + div.boxik {
        margin: var(--bk-card-gap) 0 0;
      }

      /* Posuvná tabulka drží všech pět údajů u každého prodejního místa. */
      & > h2 + table {
        display: block;
        overflow-x: auto;

        & > tbody > tr > td {
          min-width: 8.5rem;
          overflow-wrap: normal;
        }

        & > tbody > tr > :is(td:nth-child(2), td:last-child) {
          min-width: 13rem;
        }
      }
    }

    @media (width <= 43rem) {
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;

      & > header {
        column-gap: 0.65rem;
      }

      & > header > nav {
        grid-template-columns: minmax(0, 1fr);
      }

      & > header > nav > ul {
        column-gap: 0.65rem;
        font-size: 0.8rem;
      }

      & > header > nav > form {
        max-width: none;
      }

      & > nav#zeme > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > nav#zeme > ul a {
        font-size: 0.85rem;
      }
    }

    @media (width <= 38rem) {
      & > div.boxik {
        grid-template-columns: minmax(0, 1fr);

        & > :is(img, p) {
          grid-column: 1;
          grid-row: auto;
        }
      }

      & > div#hlavni.boxik > img {
        grid-row: auto;
      }
    }
  }
}
/************************************************************************************************************************/
/**************************************************** KONEC KONTAKTŮ ****************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/******************************************************* O NÁS **********************************************************/
/************************************************************************************************************************/
@media screen {
  body#onas {
    /********************** BARVY A ROZLOŽENÍ STRÁNKY **********************/
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;
    --bk-field-border: #8094a6;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-width: 76rem;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-inner: min(var(--bk-width), calc(100% - 2 * var(--bk-gutter)));
    --bk-edge: max(var(--bk-gutter), calc((100% - var(--bk-width)) / 2));
    --bk-radius: 0.9rem;
    --bk-card-padding: clamp(15px, 2.3vw, 24px);
    --bk-card-gap: 15px;
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-menu-height: 3.05rem;
    --bk-control-height: 2.75rem;

    --bk-half-tracks: 5;
    --bk-content-track: calc(
      (var(--bk-inner) - (2 * var(--bk-half-tracks) - 1) * var(--bk-card-gap))
      / (2 * var(--bk-half-tracks))
    );

    display: grid;
    grid-template-columns:
      [page-start] minmax(0, 1fr)
      [content-start] repeat(var(--bk-half-tracks), minmax(0, var(--bk-content-track)))
      [content-middle] repeat(var(--bk-half-tracks), minmax(0, var(--bk-content-track)))
      [content-end] minmax(0, 1fr) [page-end];
    column-gap: var(--bk-card-gap);
    align-content: start;
    min-height: 100vh;
    margin: 0;
    background: var(--bk-page) var(--bk-background-image) repeat;
    color: var(--bk-text);
    font: 1rem / 1.55 var(--bk-font);

    & > :is(header, #zeme, footer, #copyright) {
      grid-column: page-start / page-end;
      min-width: 0;
    }

    & > :is(h1, h2, section) {
      grid-column: content-start / content-end;
      min-width: 0;
    }

    & > :where(.boxik, .clovek, section, footer) a {
      color: var(--bk-ink);
      font-weight: 700;
      text-underline-offset: 0.16em;
      overflow-wrap: anywhere;
    }

    /************************ HEADER A FULLTEXT ***********************/
    & > header {
      order: -2;
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) max-content;
      align-items: center;
      gap: 0.55rem 1rem;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0.85rem var(--bk-edge);
      background: var(--bk-surface);

      & > a {
        grid-area: 1 / 1;
        display: block;
      }

      & #logo {
        width: calc(136px * var(--bk-logo-scale));
        height: calc(108px * var(--bk-logo-scale));
        margin: 0;
        background: url("/images/design/ikonky.png") no-repeat;
        background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
        background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
      }

      & > p {
        grid-area: 1 / 2;
        position: static;
        margin: 0;
        font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
        letter-spacing: -0.025em;
      }

      & > p :is(a, span) {
        color: var(--bk-ink);
        font: inherit;
        text-decoration: none;
      }

      & > nav {
        grid-area: 1 / 3;
        position: static;
        display: grid;
        justify-items: end;
        gap: 0.25rem 1rem;
        min-width: 0;
        width: auto;
        height: auto;
        background: none;
      }

      & > nav > ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.8rem;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 0.85rem;
      }

      & > nav > ul > li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        color: var(--bk-text);
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
      }

      & > nav > ul a.telefon {
        color: var(--bk-accent);
        white-space: nowrap;
      }

      & > nav > ul a:is(:hover, .aktivni) {
        color: var(--bk-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      & > nav > form {
        float: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-self: end;
        width: 100%;
        max-width: 17rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > nav input:is([type="search"], [type="submit"]) {
        box-sizing: border-box;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.75rem;
        font: 0.875rem / 1.25 var(--bk-font);
      }

      & > nav input[type="search"] {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--bk-field-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > nav input[type="submit"] {
        border: 1px solid var(--bk-navy);
        border-radius: 0 0.5rem 0.5rem 0;
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      & > nav input[type="submit"]:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /****************************** MENU ZEMÍ ******************************/
    & > nav#zeme {
      order: -1;
      margin: 0;
      background: var(--bk-navy);

      & > ul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, 60rem);
        margin: 0 auto;
        padding: 0;
        background: none;
      }

      & > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > ul a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
      }

      & > ul a:is(:hover, :focus-visible),
      & > ul > li[id^="aktivni-"] > a {
        background: var(--bk-navy-hover);
        color: #fff;
      }

      & > ul > li[id^="aktivni-"] > a {
        box-shadow: inset 0 -3px #c7dbee;
      }
    }

    /********************** KDO JSME A DOKUMENTY **************************/
    & > h1 {
      margin: var(--bk-gap) 0 var(--bk-card-gap);
      padding: 0;
      color: var(--bk-ink);
      font: 700 clamp(1.45rem, 2.6vw, 2rem) / 1.2 var(--bk-font);
      letter-spacing: -0.025em;
      text-align: center;
    }

    & > :is(.boxik.dokumenty, p.clovek),
    & > section > article {
      box-sizing: border-box;
      min-width: 0;
      width: auto;
      margin: 0;
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
      margin-top: 15px;
    }

    & > .boxik.dokumenty {
      display: block;
      padding: var(--bk-card-padding);
      color: var(--bk-text);
      overflow-wrap: anywhere;

      & > h2 {
        margin: 0 0 0.8rem;
        padding: 0 0 0.55rem;
        border: 0;
        border-bottom: 1px solid var(--bk-border);
        background: none;
        color: var(--bk-ink);
        font: 700 clamp(1.15rem, 2vw, 1.4rem) / 1.25 var(--bk-font);
      }
    }

    & > #hlavni.boxik.dokumenty {
      grid-column: content-start / content-middle;

      & > p {
        margin: 1rem 0;
        color: var(--bk-muted);
        font-size: 0.9rem;
      }

      & > div {
        display: inline-block;
        width: auto;
        max-width: 100%;
        margin: 0 0.8rem 0.4rem 0;
        vertical-align: middle;
      }

      & > div img {
        display: block;
        float: none;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 6rem;
        margin: 0;
        border: 0;
        border-radius: 0.35rem;
      }
    }

    & > #hlavni + .boxik.dokumenty {
      grid-column: content-middle / content-end;

      & > table {
        width: 100%;
        border: 1px solid var(--bk-border);
        border-spacing: 0;
        border-radius: 0.5rem;
        border-collapse: separate;
      }

      & > table > tbody > tr {
        background: var(--bk-surface);
      }

      & > table > tbody > tr:nth-child(even) {
        background: var(--bk-mist);
      }

      & > table > tbody > tr > td {
        padding: 0.4rem 0.7rem;
        border: 0;
        border-bottom: 1px solid var(--bk-border);
        color: var(--bk-text);
        font-size: 0.9rem;
      }

      & > table > tbody > tr:last-child > td {
        border-bottom: 0;
      }

      & > table a {
        line-height: 1.45;
      }
    }

    /**************************** TÝM B&K TOUR ****************************/
    & > h2:has(+ p.clovek),
    & > section > h2 {
      box-sizing: border-box;
      display: grid;
      place-items: center;
      min-height: var(--bk-menu-height);
      margin: var(--bk-gap) 0 var(--bk-card-gap);
      padding: 0.25rem var(--bk-card-padding);
      border: 0;
      border-radius: var(--bk-radius);
      background: var(--bk-navy);
      color: #fff;
      font: 700 clamp(1.05rem, 2.6vw, 1.5rem) / 1.2 var(--bk-font);
      text-align: center;
    }

    & > p.clovek {
      grid-column: span 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;
      margin: 0 0 var(--bk-card-gap);
      padding: 15px;
      color: var(--bk-text);
      font-size: 0.875rem;
      line-height: 1.4;
      text-align: center;
      overflow-wrap: anywhere;

      & > img,
      &:has(> img[src$="/images/bk/"])::before {
        display: block;
        float: none;
        width: min(120px, 100%);
        height: auto;
        aspect-ratio: 1;
        margin: 0 0 0.45rem;
        border: 0;
        border-radius: 0.55rem;
        background: var(--bk-mist);
        object-fit: cover;
      }

      /* U tohoto profilu je v HTML cesta ke složce bez souboru. */
      &:has(> img[src$="/images/bk/"])::before {
        content: "";
      }

      & > img[src$="/images/bk/"],
      & > br {
        display: none;
      }

      & > [itemprop="jobTitle"] {
        color: var(--bk-muted);
        font-size: 0.8rem;
        font-weight: 400;
      }

      & > [itemprop="name"] {
        color: var(--bk-ink);
        font-size: 0.95rem;
        font-weight: 700;
      }

      & > a {
        max-width: 100%;
        line-height: inherit;
      }
    }

    /*************************** REKREAČNÍ AREÁLY **************************/
    & > section:has(> article) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--bk-card-gap);
      margin: 0;
      margin-top: 15px;

      & > :is(h2, p) {
        grid-column: 1 / -1;
      }

      & > h2 {
        margin: 0;
      }

      & > p {
        justify-self: center;
        max-width: 75ch;
        margin: 0;
        color: var(--bk-text);
        text-align: center;
      }

      & > article {
        display: grid;
        grid-template-columns: minmax(0, min(42%, 249px)) minmax(0, 1fr);
        align-content: start;
        align-items: start;
        gap: 0.75rem var(--bk-card-gap);
        max-width: none;
        padding: var(--bk-card-padding);
      }

      & > article > h1 {
        grid-column: 1 / -1;
        margin: 0;
        padding: 0;
        color: var(--bk-ink);
        font: 700 clamp(1.05rem, 1.8vw, 1.3rem) / 1.3 var(--bk-font);
        overflow-wrap: anywhere;
      }

      & > article > div > img {
        display: block;
        float: none;
        width: 100%;
        max-width: 249px;
        height: auto;
        aspect-ratio: 4 / 3;
        margin: 0;
        border: 0;
        border-radius: 0.55rem;
        object-fit: cover;
      }

      & > article > ul {
        min-width: 0;
        margin: 0;
        padding-inline-start: 1.2rem;
        font-size: 0.9rem;
      }

      & > article > ul > li {
        margin: 0 0 0.35rem;
        color: var(--bk-text);
        overflow-wrap: anywhere;
      }

      & > article > br.konec {
        display: none;
      }
    }

    /***************************** FOOTER ****************************/
    & > footer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
      gap: var(--bk-gap);
      margin: var(--bk-gap) 0 0;
      padding: 1.8rem var(--bk-edge) 1.3rem;
      border-top: 1px solid var(--bk-border);
      background: var(--bk-mist);
      color: var(--bk-muted);
      font-size: 0.875rem;

      & > div {
        float: none;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow-wrap: anywhere;
      }

      & a {
        line-height: inherit;
      }

      & :is(img, iframe),
      & > .fb-page > span {
        max-width: 100%;
      }

      & img {
        height: auto;
      }
    }

    & > footer > br.konec,
    & > footer + br:has(+ #copyright) {
      display: none;
    }

    & > #copyright {
      text-align: center;
      width: auto;
      margin: 0;
      padding: 0.8rem var(--bk-gutter);
      background: var(--bk-navy);
      color: #fff;
      font-size: 0.8rem;
    }

    /*************************** FOKUS KLÁVESNICE **************************/
    & > :where(header, nav, .boxik, .clovek, section, footer) :is(a, input):focus-visible {
      outline: 2px solid var(--bk-focus);
      outline-offset: 2px;
    }

    & > nav#zeme a:focus-visible,
    & > header input[type="submit"]:focus-visible {
      outline-color: #fff;
      outline-offset: -4px;
    }

    & > #skipto:focus-within {
      position: fixed;
      inset: 0.75rem auto auto 0.75rem;
      z-index: 30;
      width: auto;
      max-width: calc(100% - 1.5rem);
      height: auto;
      padding: 0.75rem;
      overflow: visible;
      border: 1px solid var(--bk-border);
      border-radius: 0.5rem;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    @media (width < 1024px) {
      & > header {
        grid-template-columns: auto minmax(0, 1fr);
      }

      & > header > nav {
        grid-area: 2 / 1 / auto / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        align-items: center;
        justify-items: start;
      }
    }

    @media (width <= 43rem) {
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;

      & > header {
        column-gap: 0.65rem;
      }

      & > header > nav {
        grid-template-columns: minmax(0, 1fr);
      }

      & > header > nav > ul {
        column-gap: 0.65rem;
        font-size: 0.8rem;
      }

      & > header > nav > form {
        max-width: none;
      }

      & > nav#zeme > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > nav#zeme > ul a {
        font-size: 0.85rem;
      }
    }

    /************************** RESPONZIVNÍ ROZLOŽENÍ ************************/
    @media (width > 72rem) {
      & > p.clovek:nth-child(5n + 1 of p.clovek) {
        grid-column: content-start / span 2;
      }
    }

    @media (45rem < width <= 72rem) {
      --bk-half-tracks: 3;

      & > p.clovek:nth-child(3n + 1 of p.clovek) {
        grid-column: content-start / span 2;
      }

      & > p.clovek:nth-child(3n + 1 of p.clovek):nth-last-child(1 of p.clovek) {
        grid-column: 4 / span 2;
      }
    }

    @media (width <= 52rem) {
      & > #hlavni.boxik.dokumenty,
      & > #hlavni + .boxik.dokumenty {
        grid-column: content-start / content-end;
      }

      & > #hlavni + .boxik.dokumenty {
        margin-top: var(--bk-card-gap);
      }

      & > section:has(> article) {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (30rem < width <= 45rem) {
      --bk-half-tracks: 2;

      & > p.clovek:nth-child(2n + 1 of p.clovek) {
        grid-column: content-start / span 2;
      }

      & > p.clovek:nth-child(2n + 1 of p.clovek):nth-last-child(1 of p.clovek) {
        grid-column: 3 / span 2;
      }
    }

    @media (width <= 38rem) {
      & > section:has(> article) > article {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (width <= 30rem) {
      --bk-half-tracks: 1;

      & > p.clovek {
        grid-column: content-start / content-end;
      }
    }
  }
}
/************************************************************************************************************************/
/**************************************************** KONEC O NÁS *******************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/**************************************************** JAK REZERVOVAT ****************************************************/
/************************************************************************************************************************/
@media screen {
  body#napoveda:has(> #obsah > article#jak-rezervovat) {
    /********************** BARVY A ROZLOŽENÍ STRÁNKY **********************/
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;
    --bk-field-border: #8094a6;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-width: 76rem;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-inner: min(var(--bk-width), calc(100% - 2 * var(--bk-gutter)));
    --bk-edge: max(var(--bk-gutter), calc((100% - var(--bk-width)) / 2));
    --bk-radius: 0.9rem;
    --bk-card-padding: clamp(15px, 2.3vw, 24px);
    --bk-card-gap: 15px;
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-menu-height: 3.05rem;
    --bk-control-height: 2.75rem;

    --bk-guide-menu-width: clamp(12.5rem, 18vw, 15rem);

    display: grid;
    grid-template-columns:
      minmax(var(--bk-gutter), 1fr)
      var(--bk-guide-menu-width)
      var(--bk-card-gap)
      minmax(0, calc(var(--bk-inner) - var(--bk-guide-menu-width) - var(--bk-card-gap)))
      minmax(var(--bk-gutter), 1fr);
    grid-template-rows: repeat(4, auto) minmax(0, 1fr) auto auto;
    grid-template-areas:
      "header header header header header"
      "countries countries countries countries countries"
      ". title title title ."
      ". toc . guide ."
      ". . . . ."
      "footer footer footer footer footer"
      "copyright copyright copyright copyright copyright";
    min-height: 100vh;
    margin: 0;
    background: var(--bk-page) var(--bk-background-image) repeat;
    color: var(--bk-text);
    font: 1rem / 1.55 var(--bk-font);

    & > :is(header, #zeme, footer, #copyright) {
      min-width: 0;
    }

    & > :where(#obsah, footer) a {
      color: var(--bk-ink);
      font-weight: 700;
      text-underline-offset: 0.16em;
      overflow-wrap: anywhere;
    }

    /************************ HEADER A FULLTEXT ***********************/
    & > header {
      grid-area: header;
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) max-content;
      align-items: center;
      gap: 0.55rem 1rem;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0.85rem var(--bk-edge);
      background: var(--bk-surface);

      & > a {
        grid-area: 1 / 1;
        display: block;
      }

      & #logo {
        width: calc(136px * var(--bk-logo-scale));
        height: calc(108px * var(--bk-logo-scale));
        margin: 0;
        background: url("/images/design/ikonky.png") no-repeat;
        background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
        background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
      }

      & > p {
        grid-area: 1 / 2;
        position: static;
        margin: 0;
        font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
        letter-spacing: -0.025em;
      }

      & > p :is(a, span) {
        color: var(--bk-ink);
        font: inherit;
        text-decoration: none;
      }

      & > nav {
        grid-area: 1 / 3;
        position: static;
        display: grid;
        justify-items: end;
        gap: 0.25rem 1rem;
        min-width: 0;
        width: auto;
        height: auto;
        background: none;
      }

      & > nav > ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.8rem;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 0.85rem;
      }

      & > nav > ul > li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        color: var(--bk-text);
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
      }

      & > nav > ul a.telefon {
        color: var(--bk-accent);
        white-space: nowrap;
      }

      & > nav > ul a:is(:hover, .aktivni) {
        color: var(--bk-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      & > nav > form {
        float: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-self: end;
        width: 100%;
        max-width: 17rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > nav input:is([type="search"], [type="submit"]) {
        box-sizing: border-box;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.75rem;
        font: 0.875rem / 1.25 var(--bk-font);
      }

      & > nav input[type="search"] {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--bk-field-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > nav input[type="submit"] {
        border: 1px solid var(--bk-navy);
        border-radius: 0 0.5rem 0.5rem 0;
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      & > nav input[type="submit"]:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /****************************** MENU ZEMÍ ******************************/
    & > nav#zeme {
      grid-area: countries;
      margin: 0;
      background: var(--bk-navy);

      & > ul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, 60rem);
        margin: 0 auto;
        padding: 0;
        background: none;
      }

      & > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > ul a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
      }

      & > ul a:is(:hover, :focus-visible),
      & > ul > li[id^="aktivni-"] > a {
        background: var(--bk-navy-hover);
        color: #fff;
      }

      & > ul > li[id^="aktivni-"] > a {
        box-shadow: inset 0 -3px #c7dbee;
      }
    }

    /********************** NADPIS A NAVIGACE NÁVODU ************************/
    & > #hlavni {
      grid-area: title;
      min-width: 0;
      margin: var(--bk-gap) 0 0;
      padding: 0;
      color: var(--bk-ink);
      font: 700 clamp(1.45rem, 2.6vw, 2rem) / 1.2 var(--bk-font);
      letter-spacing: -0.025em;
      text-align: center;

      /* Prázdný nadpis v šabloně je cílem odkazu pro přeskočení navigace. */
      &:empty {
        margin: 0;
      }
    }

    & > nav#kontext {
      grid-area: toc;
      position: sticky;
      inset: var(--bk-card-gap) auto auto;
      align-self: start;
      box-sizing: border-box;
      float: none;
      width: auto;
      min-width: 0;
      max-height: calc(100dvh - 2 * var(--bk-card-gap));
      margin: var(--bk-gap) 0 0;
      padding: 0.6rem;
      overflow: auto;
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);

      & > ul {
        display: grid;
        gap: 0.2rem;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      & > ul > li {
        display: block;
        min-width: 0;
        margin: 0;
      }

      & > ul > li > a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        min-height: 2.25rem;
        padding: 0.45rem 0.65rem;
        border-radius: 0.5rem;
        color: var(--bk-ink);
        font: 700 0.9rem / 1.3 var(--bk-font);
        text-decoration: none;
        overflow-wrap: anywhere;
      }

      & > ul > li > a:is(:hover, :focus-visible) {
        background: var(--bk-mist);
        color: var(--bk-navy);
      }
    }

    /********************* KAPITOLY, SEZNAMY A FAQ *************************/
    & > #obsah {
      grid-area: guide;
      display: grid;
      align-content: start;
      gap: var(--bk-card-gap);
      min-width: 0;
      margin: var(--bk-gap) 0 0;
      padding: 0;

      & > article:empty {
        display: none;
      }

      & > article:not(:empty) {
        display: flow-root;
        box-sizing: border-box;
        clear: none;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: var(--bk-card-padding);
        border: 1px solid var(--bk-border);
        border-radius: var(--bk-radius);
        background: var(--bk-surface);
        box-shadow: var(--bk-shadow);
        color: var(--bk-text);
        overflow-wrap: anywhere;
        scroll-margin-block-start: var(--bk-card-gap);
      }

      & > article:is(:target, :has(> h3:target)) {
        border-color: var(--bk-focus);
      }

      & > article > h2 {
        margin: 1.25rem 0 0.75rem;
        padding: 0.65rem 0.8rem;
        border: 0;
        border-radius: 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
        font: 700 clamp(1.05rem, 1.8vw, 1.2rem) / 1.25 var(--bk-font);
      }

      & > article > h2:first-child {
        box-sizing: border-box;
        display: grid;
        align-items: center;
        min-height: var(--bk-menu-height);
        margin: calc(-1 * var(--bk-card-padding)) calc(-1 * var(--bk-card-padding)) 1rem;
        padding: 0.5rem var(--bk-card-padding);
        border-radius: calc(var(--bk-radius) - 1px) calc(var(--bk-radius) - 1px) 0 0;
        background: var(--bk-navy);
        color: #fff;
        font-size: clamp(1.05rem, 2.2vw, 1.4rem);
      }

      & > article > :is(h3, h4) {
        margin: 1rem 0 0.45rem;
        color: var(--bk-ink);
        font: 700 1.1rem / 1.35 var(--bk-font);
        scroll-margin-block-start: var(--bk-card-gap);
      }

      & > article :is(p, li, dd) {
        color: var(--bk-text);
      }

      & > article a {
        line-height: inherit;
      }

      & > article > :is(p, ul, ol, dl) {
        max-width: 90ch;
        margin: 0 0 0.8rem;
      }

      & > article :is(ul, ol) {
        padding-inline-start: 1.35rem;
      }

      & > article li {
        margin: 0.35rem 0;
        list-style-image: none;
      }

      & > article li::marker {
        color: var(--bk-navy);
      }

      & > article > :is(p, ul, ol, dl):last-child {
        margin-bottom: 0;
      }

      & > :is(#platby, #faq) > dl > dt {
        margin: 0.7rem 0 0.25rem;
        padding: 0.55rem 0.75rem;
        border-radius: 0.45rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
        font-weight: 700;
      }

      & > :is(#platby, #faq) > dl > dd {
        margin: 0 0 0.85rem;
        padding: 0 0.75rem;
      }

      & > :is(#platby, #faq) > dl > dd:last-child {
        margin-bottom: 0;
      }
    }

    /********************** POUKÁZKY A CERTIFIKÁT *************************/
    & > #obsah #poukazky {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
      align-items: center;
      gap: var(--bk-card-gap);
      max-width: none;

      & > img {
        box-sizing: border-box;
        display: block;
        justify-self: center;
        width: 100%;
        max-width: 15rem;
        height: auto;
        aspect-ratio: 5 / 3;
        margin: 0;
        padding: 0.3rem;
        border: 1px solid var(--bk-border);
        border-radius: 0.5rem;
        background: var(--bk-mist);
        object-fit: scale-down;
      }
    }

    & > #obsah > :is(#darkove-poukazy, #pojisteni-ck) > div:has(img) {
      float: left;
      width: min(34%, 200px);
      margin: 0 1rem 0.75rem 0;

      & > a {
        display: block;
        border-radius: 0.5rem;
      }

      /* Šablona dává fotografiím float a okraje přímo do HTML. */
      & img {
        display: block;
        box-sizing: border-box;
        float: none !important;
        width: 100%;
        height: auto;
        margin: 0 !important;
        border: 1px solid var(--bk-border);
        border-radius: 0.5rem;
      }
    }

    & > #obsah > #darkove-poukazy > ul {
      display: flow-root;
    }

    /********************* TABULKY POUŽITÝCH SYMBOLŮ **********************/
    & > #obsah > #vysvetlivky > table {
      box-sizing: border-box;
      width: 100%;
      margin: 0 0 0.85rem;
      border: 1px solid var(--bk-border);
      border-top: 0;
      border-radius: 0 0 0.5rem 0.5rem;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      font-size: 0.9rem;

      & > caption {
        box-sizing: border-box;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--bk-border);
        border-radius: 0.5rem 0.5rem 0 0;
        background: var(--bk-mist);
        color: var(--bk-ink);
        font-size: 1rem;
        text-align: left;
      }

      & > tbody > tr {
        background: var(--bk-surface);
      }

      & > tbody > tr:nth-child(even) {
        background: var(--bk-mist);
      }

      & > tbody > tr > td {
        padding: 0.55rem 0.65rem;
        border: 0;
        border-bottom: 1px solid var(--bk-border);
        color: var(--bk-text);
        vertical-align: middle;
        overflow-wrap: anywhere;
      }

      & > tbody > tr > td:first-child {
        box-sizing: border-box;
        width: 32%;
        color: var(--bk-ink);
        font-weight: 700;
      }

      & > tbody > tr:last-child > td {
        border-bottom: 0;
      }

      &.ikonky > tbody > tr > td:first-child {
        width: 5rem;
      }

      &.ikonky > tbody > tr > td:first-child > div {
        float: none;
        margin: 0 auto;
      }
    }

    /***************************** FOOTER ****************************/
    & > footer {
      grid-area: footer;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
      gap: var(--bk-gap);
      margin: var(--bk-gap) 0 0;
      padding: 1.8rem var(--bk-edge) 1.3rem;
      border-top: 1px solid var(--bk-border);
      background: var(--bk-mist);
      color: var(--bk-muted);
      font-size: 0.875rem;

      & > div {
        float: none;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow-wrap: anywhere;
      }

      & a {
        line-height: inherit;
      }

      & :is(img, iframe),
      & > .fb-page > span {
        max-width: 100%;
      }

      & img {
        height: auto;
      }
    }

    & > footer > br.konec,
    & > footer + br:has(+ #copyright) {
      display: none;
    }

    & > #copyright {
      grid-area: copyright;
      text-align: center;
      width: auto;
      margin: 0;
      padding: 0.8rem var(--bk-gutter);
      background: var(--bk-navy);
      color: #fff;
      font-size: 0.8rem;
    }

    /*************************** FOKUS KLÁVESNICE **************************/
    & > :where(header, nav, #obsah, footer) :is(a, input):focus-visible {
      outline: 2px solid var(--bk-focus);
      outline-offset: 2px;
    }

    & > nav#zeme a:focus-visible,
    & > header input[type="submit"]:focus-visible {
      outline-color: #fff;
      outline-offset: -4px;
    }

    & > #skipto:focus-within {
      position: fixed;
      inset: 0.75rem auto auto 0.75rem;
      z-index: 30;
      width: auto;
      max-width: calc(100% - 1.5rem);
      height: auto;
      padding: 0.75rem;
      overflow: visible;
      border: 1px solid var(--bk-border);
      border-radius: 0.5rem;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    @media (width < 1024px) {
      & > header {
        grid-template-columns: auto minmax(0, 1fr);
      }

      & > header > nav {
        grid-area: 2 / 1 / auto / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        align-items: center;
        justify-items: start;
      }
    }

    @media (width <= 43rem) {
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;

      & > header {
        column-gap: 0.65rem;
      }

      & > header > nav {
        grid-template-columns: minmax(0, 1fr);
      }

      & > header > nav > ul {
        column-gap: 0.65rem;
        font-size: 0.8rem;
      }

      & > header > nav > form {
        max-width: none;
      }

      & > nav#zeme > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > nav#zeme > ul a {
        font-size: 0.85rem;
      }
    }

    /************************** RESPONZIVNÍ ROZLOŽENÍ ************************/
    @media (width <= 52rem) {
      grid-template-columns: minmax(var(--bk-gutter), 1fr) minmax(0, var(--bk-inner)) minmax(var(--bk-gutter), 1fr);
      grid-template-rows: repeat(5, auto) minmax(0, 1fr) auto auto;
      grid-template-areas:
        "header header header"
        "countries countries countries"
        ". title ."
        ". toc ."
        ". guide ."
        ". . ."
        "footer footer footer"
        "copyright copyright copyright";

      & > nav#kontext {
        position: static;
        max-height: none;
        overflow: visible;

        & > ul {
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
        }

        & > ul > li > a {
          min-height: var(--bk-control-height);
          background: var(--bk-mist);
        }

        & > ul > li > a:is(:hover, :focus-visible) {
          background: var(--bk-navy);
          color: #fff;
        }
      }

      & > #obsah {
        margin-top: var(--bk-card-gap);
      }
    }

    @media (width <= 36rem) {
      & > #obsah > :is(#darkove-poukazy, #pojisteni-ck) > div:has(img) {
        float: none;
        width: min(100%, 200px);
        margin: 0 auto 0.85rem;
      }
    }
  }
}
/************************************************************************************************************************/
/************************************************** KONEC JAK REZERVOVAT ************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/******************************************************* AKTUALITY ******************************************************/
/* Obsah přidej na konec bk-add.css za blok JAK REZERVOVAT. */
@media screen {
  body#aktuality {
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-accent-hover: #8f1930;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;
    --bk-field-border: #8094a6;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-width: 76rem;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-edge: max(var(--bk-gutter), calc((100% - var(--bk-width)) / 2));
    --bk-news-width: min(64rem, calc(100% - 2 * var(--bk-gutter)));
    --bk-news-spacing: clamp(1.5rem, 3vw, 2.5rem);
    --bk-radius: 0.9rem;
    --bk-card-padding: clamp(15px, 2.3vw, 24px);
    --bk-card-gap: 15px;
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-menu-height: 3.05rem;
    --bk-control-height: 2.75rem;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--bk-page) var(--bk-background-image) repeat;
    color: var(--bk-text);
    font: 1rem / 1.55 var(--bk-font);

    & > :is(header, #zeme, footer, #copyright) {
      min-width: 0;
    }

    & > :where(article, ul.aktuality, footer) a {
      color: var(--bk-ink);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 0.16em;
      overflow-wrap: anywhere;
    }

    & > :where(article, ul.aktuality, footer) a:hover {
      color: var(--bk-accent);
    }

    /************************ HEADER A FULLTEXT ***********************/
    & > header {
      order: -2;
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) max-content;
      align-items: center;
      gap: 0.55rem 1rem;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0.85rem var(--bk-edge);
      background: var(--bk-surface);

      & > a {
        grid-area: 1 / 1;
        display: block;
      }

      & #logo {
        width: calc(136px * var(--bk-logo-scale));
        height: calc(108px * var(--bk-logo-scale));
        margin: 0;
        background: url("/images/design/ikonky.png") no-repeat;
        background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
        background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
      }

      & > p {
        grid-area: 1 / 2;
        position: static;
        margin: 0;
        font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
        letter-spacing: -0.025em;
      }

      & > p :is(a, span) {
        color: var(--bk-ink);
        font: inherit;
        text-decoration: none;
      }

      & > nav {
        grid-area: 1 / 3;
        position: static;
        display: grid;
        justify-items: end;
        gap: 0.25rem 1rem;
        min-width: 0;
        width: auto;
        height: auto;
        background: none;
      }

      & > nav > ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.8rem;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 0.85rem;
      }

      & > nav > ul > li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        color: var(--bk-text);
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
      }

      & > nav > ul a.telefon {
        color: var(--bk-accent);
        white-space: nowrap;
      }

      & > nav > ul a:is(:hover, .aktivni) {
        color: var(--bk-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      & > nav > form {
        float: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-self: end;
        width: 100%;
        max-width: 17rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > nav input:is([type="search"], [type="submit"]) {
        box-sizing: border-box;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.75rem;
        font: 0.875rem / 1.25 var(--bk-font);
      }

      & > nav input[type="search"] {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--bk-field-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > nav input[type="submit"] {
        border: 1px solid var(--bk-navy);
        border-radius: 0 0.5rem 0.5rem 0;
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      & > nav input[type="submit"]:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /****************************** MENU ZEMÍ ******************************/
    & > nav#zeme {
      order: -1;
      margin: 0;
      background: var(--bk-navy);

      & > ul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, 60rem);
        margin: 0 auto;
        padding: 0;
        background: none;
      }

      & > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
      }

      & > ul a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
      }

      & > ul a:is(:hover, :focus-visible),
      & > ul > li[id^="aktivni-"] > a {
        background: var(--bk-navy-hover);
        color: #fff;
      }

      & > ul > li[id^="aktivni-"] > a {
        box-shadow: inset 0 -3px #c7dbee;
      }
    }

    /***************************** PŘEHLED *****************************/
    & > h1#hlavni,
    & > ul.aktuality,
    & > article {
      box-sizing: border-box;
      width: var(--bk-news-width);
      min-width: 0;
      margin-inline: auto;
    }

    & > h1#hlavni,
    & > article > h1#hlavni {
      padding: 0;
      color: var(--bk-ink);
      font: 700 clamp(1.45rem, 2.6vw, 2rem) / 1.2 var(--bk-font);
      letter-spacing: -0.025em;
      text-align: center;
      overflow-wrap: anywhere;
    }

    & > h1#hlavni {
      margin-block: var(--bk-news-spacing) var(--bk-card-gap);
      padding: 0.8rem var(--bk-card-padding);
      border-radius: var(--bk-radius);
      background: var(--bk-navy);
      color: #fff;
    }

    & > h1#hlavni + p:empty,
    & > br.konec {
      display: none;
    }

    & > ul.aktuality {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--bk-card-gap);
      margin-block: 0 var(--bk-news-spacing);
      padding: 0;
      list-style: none;

      & > li {
        display: flex;
        flex-direction: column;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 1px solid var(--bk-border);
        border-radius: var(--bk-radius);
        background: var(--bk-surface);
        box-shadow: var(--bk-shadow);
        list-style: none;
      }

      & > li > a {
        box-sizing: border-box;
        display: flex;
        flex: 1 0 auto;
        align-items: center;
        min-height: 4.4rem;
        padding: 0.9rem var(--bk-card-padding);
        border-radius: calc(var(--bk-radius) - 1px);
        font-size: 1.05rem;
        line-height: 1.35;
      }

      & > li > a:is(:hover, :focus-visible) {
        background: var(--bk-mist);
      }

      & > li:has(> div:not(:empty)) > a {
        flex: none;
        min-height: var(--bk-control-height);
        padding-bottom: 0.55rem;
      }

      & > li > br,
      & > li > div:empty {
        display: none;
      }

      & > li > div {
        padding: 0 var(--bk-card-padding) 0.95rem;
        color: var(--bk-muted);
        font-size: 0.925rem;
        overflow-wrap: anywhere;
      }
    }

    /**************************** DETAIL ČLÁNKU ****************************/
    & > article {
      display: flow-root;
      margin-block: var(--bk-news-spacing);
      padding: var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
      overflow-wrap: anywhere;

      & > h1#hlavni {
        margin: 0 0 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--bk-border);
      }

      & > [itemprop="description"]:not(:empty) {
        margin-bottom: 1rem;
        color: var(--bk-muted);
      }

      & > [itemprop="articleBody"] {
        display: flow-root;

        & h2 {
          margin: 1.1rem 0 0.7rem;
          padding: 0.65rem 0.85rem;
          border: 0;
          border-radius: 0.5rem;
          background: var(--bk-mist);
          color: var(--bk-ink);
          font-size: clamp(1.05rem, 2vw, 1.25rem);
          line-height: 1.3;
        }

        & :is(h3, h4) {
          margin: 0.9rem 0 0.45rem;
          color: var(--bk-ink);
          font-size: 1.05rem;
          line-height: 1.35;
        }

        & p {
          margin: 0.65rem 0;
        }

        & :is(img, video) {
          max-width: 100%;
          height: auto;
        }

        /* Editor vkládá šířky a výšky tabulek i buněk přímo do HTML. */
        & table {
          box-sizing: border-box;
          width: 100% !important;
          max-width: 100%;
          height: auto !important;
          margin: 0.75rem auto;
          overflow: hidden;
          border: 1px solid var(--bk-border);
          border-collapse: separate !important;
          border-spacing: 0;
          border-radius: 0.65rem;
          background: var(--bk-surface);
          font-size: 0.9rem;
        }

        & table tr[style] {
          height: auto !important;
        }

        & table :is(th, td) {
          width: auto !important;
          height: auto !important;
          padding: 0.65rem clamp(0.55rem, 1.2vw, 0.9rem);
          border: 0;
          background: var(--bk-surface);
          color: var(--bk-text);
          vertical-align: middle;
        }

        & table tr:nth-child(even) > td {
          background: var(--bk-mist);
        }

        & table tr + tr > :is(th, td) {
          border-top: 1px solid var(--bk-border);
        }

        & table :is(th, tr:first-child > td[colspan]:has(> h3:only-child)) {
          background: var(--bk-navy);
          color: #fff;
          font-weight: 700;

          & :is(h3, a, a:hover) {
            color: inherit;
          }

          & a:focus-visible {
            outline-color: #fff;
          }
        }

        & table :is(p, h3, h4) {
          margin: 0;
        }

        & table h4 {
          font-size: 1em;
        }

        & table:has(> tbody > tr:first-child > td[colspan] > h3:only-child) td > h4:only-child > a:only-child {
          box-sizing: border-box;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: var(--bk-control-height);
          padding: 0.4rem 0.75rem;
          border-radius: 0.5rem;
          background: var(--bk-accent);
          color: #fff;
          text-align: center;
          text-decoration: none;

          &:is(:hover, :focus-visible) {
            background: var(--bk-accent-hover);
          }

          &:focus-visible {
            outline-color: #fff;
            outline-offset: -4px;
          }
        }

        /* Širší ceník má na mobilu vlastní vodorovný posuv. */
        & center:has(> table tr > :is(th, td):nth-child(4)) {
          overflow-x: auto;
          text-align: start;

          & > table {
            min-width: 36rem;
          }
        }
      }
    }

    /***************************** FOOTER ****************************/
    & > footer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
      gap: var(--bk-gap);
      margin: auto 0 0;
      padding: 1.8rem var(--bk-edge) 1.3rem;
      border-top: 1px solid var(--bk-border);
      background: var(--bk-mist);
      color: var(--bk-muted);
      font-size: 0.875rem;

      & > #paticka {
        display: block;
      }

      & > div {
        float: none;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow-wrap: anywhere;
      }

      & a {
        line-height: inherit;
      }

      & :is(img, iframe) {
        max-width: 100%;
      }

      & img {
        height: auto;
      }
    }

    & > footer > br.konec,
    & > footer + br:has(+ #copyright) {
      display: none;
    }

    & > #copyright {
      text-align: center;
      width: auto;
      margin: 0;
      padding: 0.8rem var(--bk-gutter);
      background: var(--bk-navy);
      color: #fff;
      font-size: 0.8rem;
    }

    /*************************** FOKUS KLÁVESNICE **************************/
    & > :where(header, nav, article, ul.aktuality, footer) :is(a, input):focus-visible {
      outline: 2px solid var(--bk-focus);
      outline-offset: 2px;
    }

    & > nav#zeme a:focus-visible,
    & > header input[type="submit"]:focus-visible {
      outline-color: #fff;
      outline-offset: -4px;
    }

    & > #skipto:focus-within {
      position: fixed;
      inset: 0.75rem auto auto 0.75rem;
      z-index: 30;
      width: auto;
      max-width: calc(100% - 1.5rem);
      height: auto;
      padding: 0.75rem;
      overflow: visible;
      border: 1px solid var(--bk-border);
      border-radius: 0.5rem;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    @media (width < 1024px) {
      & > header {
        grid-template-columns: auto minmax(0, 1fr);
      }

      & > header > nav {
        grid-area: 2 / 1 / auto / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        align-items: center;
        justify-items: start;
      }
    }

    @media (width <= 43rem) {
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;

      & > header {
        column-gap: 0.65rem;
      }

      & > header > nav {
        grid-template-columns: minmax(0, 1fr);
      }

      & > header > nav > ul {
        column-gap: 0.65rem;
        font-size: 0.8rem;
      }

      & > header > nav > form {
        max-width: none;
      }

      & > nav#zeme > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > nav#zeme > ul a {
        font-size: 0.85rem;
      }
    }

    @media (width <= 40rem) {
      & > ul.aktuality {
        grid-template-columns: minmax(0, 1fr);
      }
    }
  }
}
/************************************************************************************************************************/
/**************************************************** KONEC AKTUALITY ***************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/******************************************************* DOPRAVA ********************************************************/
/* Blok přidej na konec bk-add.css pod AKTUALITY. Platí pro Itálii a Chorvatsko. */
@media screen {
  body#doprava:has(> nav#zeme :where(#aktivni-IT, #aktivni-HR)) {
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-accent-hover: #8f1930;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;
    --bk-field-border: #8094a6;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-width: 76rem;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-inner: min(var(--bk-width), calc(100% - 2 * var(--bk-gutter)));
    --bk-edge: max(var(--bk-gutter), calc((100% - var(--bk-width)) / 2));
    --bk-transport-reading-width: min(58rem, var(--bk-inner));
    --bk-transport-spacing: clamp(1.5rem, 3vw, 2.5rem);
    --bk-radius: 0.9rem;
    --bk-card-padding: clamp(15px, 2.3vw, 24px);
    --bk-card-gap: 15px;
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-menu-height: 3.05rem;
    --bk-control-height: 2.75rem;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--bk-page) var(--bk-background-image) repeat;
    color: var(--bk-text);
    font: 1rem / 1.55 var(--bk-font);

    & > :is(header, #zeme, footer, #copyright) {
      min-width: 0;
    }

    & > :where(#drobecky, .stred, table.doprava, p, footer) a {
      color: var(--bk-ink);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 0.16em;
      overflow-wrap: anywhere;
    }

    & > :where(#drobecky, .stred, table.doprava, p, footer) a:hover {
      color: var(--bk-accent);
    }

    /************************ HEADER A FULLTEXT ***********************/
    & > header {
      order: -4;
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) max-content;
      align-items: center;
      gap: 0.55rem 1rem;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0.85rem var(--bk-edge);
      background: var(--bk-surface);

      & > a {
        grid-area: 1 / 1;
        display: block;
      }

      & #logo {
        width: calc(136px * var(--bk-logo-scale));
        height: calc(108px * var(--bk-logo-scale));
        margin: 0;
        background: url("/images/design/ikonky.png") no-repeat;
        background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
        background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
      }

      & > p {
        grid-area: 1 / 2;
        position: static;
        margin: 0;
        font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
        letter-spacing: -0.025em;
      }

      & > p :is(a, span) {
        color: var(--bk-ink);
        font: inherit;
        text-decoration: none;
      }

      & > nav {
        grid-area: 1 / 3;
        position: static;
        display: grid;
        justify-items: end;
        gap: 0.25rem 1rem;
        min-width: 0;
        width: auto;
        height: auto;
        background: none;
      }

      & > nav > ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.8rem;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 0.85rem;
      }

      & > nav > ul > li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        color: var(--bk-text);
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
      }

      & > nav > ul a.telefon {
        color: var(--bk-accent);
        white-space: nowrap;
      }

      & > nav > ul a:is(:hover, .aktivni, [href$="/doprava.php"]) {
        color: var(--bk-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      & > nav > form {
        float: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-self: end;
        width: 100%;
        max-width: 17rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > nav input:is([type="search"], [type="submit"]) {
        box-sizing: border-box;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.75rem;
        font: 0.875rem / 1.25 var(--bk-font);
      }

      & > nav input[type="search"] {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--bk-field-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > nav input[type="submit"] {
        border: 1px solid var(--bk-navy);
        border-radius: 0 0.5rem 0.5rem 0;
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      & > nav input[type="submit"]:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /****************************** MENU ZEMÍ ******************************/
    & > nav#zeme {
      order: -3;
      margin: 0;
      background: var(--bk-navy);

      & > ul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, 60rem);
        margin: 0 auto;
        padding: 0;
        background: none;
      }

      & > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
      }

      & > ul a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
      }

      & > ul a:is(:hover, :focus-visible),
      & > ul > li[id^="aktivni-"] > a {
        background: var(--bk-navy-hover);
        color: #fff;
      }

      & > ul > li[id^="aktivni-"] > a {
        box-shadow: inset 0 -3px #c7dbee;
      }
    }

    /************************ DROBEČKY A NADPIS ************************/
    & > :is(nav#drobecky, h1#hlavni, .stred, table.doprava, h2, p) {
      box-sizing: border-box;
      width: var(--bk-inner);
      min-width: 0;
      margin-inline: auto;
    }

    & > nav#drobecky {
      order: -2;
      margin-block: 0.75rem var(--bk-gap);
      padding: 0;
      color: var(--bk-muted);
      font-size: 0.875rem;
      overflow-wrap: anywhere;

      & a {
        padding: 0;
      }
    }

    & > h1#hlavni {
      order: -1;
      margin-block: 0 var(--bk-gap);
      padding: 0;
      color: var(--bk-ink);
      font: 700 clamp(1.45rem, 2.6vw, 2rem) / 1.2 var(--bk-font);
      letter-spacing: -0.025em;
      text-align: center;
      overflow-wrap: anywhere;
    }

    /*************************** VOLBA DOPRAVY **************************/
    & > .stred:has(> .doprava-varianta) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--bk-card-gap);
      margin-block: 0 var(--bk-transport-spacing);
    }

    & > .stred > .doprava-varianta {
      box-sizing: border-box;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 1rem;
      width: auto;
      max-width: none;
      min-width: 0;
      margin: 0;
      padding: 0 var(--bk-card-padding) var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
      text-align: left;

      & > h2 {
        margin: 0 calc(-1 * var(--bk-card-padding));
        padding: 0;
        border: 0;
        background: none;
        font: 700 clamp(1.05rem, 2vw, 1.25rem) / 1.25 var(--bk-font);
      }

      & > h2 > a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.55rem var(--bk-card-padding);
        border-radius: calc(var(--bk-radius) - 1px) calc(var(--bk-radius) - 1px) 0 0;
        background: var(--bk-navy);
        color: #fff;
        text-align: center;
        text-decoration: none;
      }

      & > h2 > a:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }

      & > a:has(> img) {
        display: block;
        justify-self: center;
        max-width: 100%;
        border-radius: 0.5rem;
      }

      & > a > img {
        float: none;
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0;
        border: 0;
      }

      & > p {
        margin: 0;
        overflow-wrap: anywhere;
      }

      & > a.tlacitko {
        box-sizing: border-box;
        display: flex;
        float: none;
        align-items: center;
        justify-content: center;
        justify-self: end;
        min-height: var(--bk-control-height);
        max-width: 100%;
        margin: 0;
        padding: 0.55rem 0.85rem;
        border: 0;
        border-radius: 0.5rem;
        background: var(--bk-accent);
        /* Původní šablona používá !important u barvy odkazu na tlačítku. */
        color: #fff !important;
        font-size: 0.9rem;
        line-height: 1.25;
        text-align: center;
        text-decoration: none;
      }

      & > a.tlacitko:is(:hover, :focus-visible) {
        background: var(--bk-accent-hover);
      }

      & > br.konec {
        display: none;
      }
    }

    /************************* INFORMACE K CESTĚ ************************/
    & > p {
      margin-block: 0;
      overflow-wrap: anywhere;
    }

    & > p:empty {
      display: none;
    }

    & > p:has(> strong),
    & > h2 + p {
      width: var(--bk-transport-reading-width);
      margin-block-end: var(--bk-card-gap);
      padding: var(--bk-card-padding);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    & > p > strong {
      color: var(--bk-ink);
    }

    & > h2 {
      width: var(--bk-transport-reading-width);
      margin-block: var(--bk-gap) 0;
      padding: 0.75rem var(--bk-card-padding);
      border: 0;
      border-radius: var(--bk-radius) var(--bk-radius) 0 0;
      background: var(--bk-navy);
      color: #fff;
      font: 700 clamp(1.05rem, 2vw, 1.25rem) / 1.3 var(--bk-font);
    }

    & > h2 + p {
      margin-block-end: var(--bk-transport-spacing);
      border-top: 0;
      border-radius: 0 0 var(--bk-radius) var(--bk-radius);
    }

    /*********************** LOKALITY A SVOZOVÁ MÍSTA **********************/
    & > table.doprava {
      max-width: none;
      margin-block: var(--bk-card-gap);
      border: 1px solid var(--bk-border);
      border-radius: var(--bk-radius);
      border-collapse: separate;
      border-spacing: 0;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
      font-size: 0.9rem;
      line-height: 1.4;
      overflow-wrap: anywhere;

      &:has(> caption) {
        border-radius: 0 0 var(--bk-radius) var(--bk-radius);
      }

      & > caption {
        box-sizing: border-box;
        padding: 0.75rem var(--bk-card-padding);
        border-radius: var(--bk-radius) var(--bk-radius) 0 0;
        background: var(--bk-navy);
        color: #fff;
        font: 700 clamp(1.05rem, 2vw, 1.25rem) / 1.3 var(--bk-font);
        text-align: left;
      }

      & > tbody > tr > :is(th, td) {
        min-width: 0;
        padding: 0.65rem clamp(0.55rem, 1.15vw, 0.85rem);
        border: 0;
        background: var(--bk-surface);
        color: var(--bk-text);
        text-align: left;
        vertical-align: middle;
      }

      & > tbody > tr > th {
        background: var(--bk-mist);
        color: var(--bk-ink);
        font-weight: 700;
      }

      & > tbody > tr:nth-child(odd) > td {
        background: var(--bk-mist);
      }

      & > tbody > tr + tr > :is(th, td) {
        border-top: 1px solid var(--bk-border);
      }

      & > tbody > tr > :is(th, td) + :is(th, td) {
        border-inline-start: 1px solid var(--bk-border);
      }

      & > tbody > tr:last-child > :first-child {
        border-end-start-radius: calc(var(--bk-radius) - 1px);
      }

      & > tbody > tr:last-child > :last-child {
        border-end-end-radius: calc(var(--bk-radius) - 1px);
      }
    }

    & > table.doprava:not(.doprava-lokality) {
      width: var(--bk-transport-reading-width);
      table-layout: fixed;

      & > tbody > tr > :first-child {
        width: clamp(4.75rem, 18%, 7rem);
        color: var(--bk-ink);
        font-weight: 700;
        white-space: nowrap;
      }
    }

    & > table.doprava:not(.doprava-lokality) + p {
      width: var(--bk-transport-reading-width);
      color: var(--bk-muted);
      font-size: 0.925rem;
    }

    & > table.doprava-lokality {
      table-layout: fixed;
      scrollbar-color: var(--bk-field-border) var(--bk-mist);

      & > tbody > tr:first-child > th {
        background: var(--bk-navy);
        color: #fff;
      }

      & > tbody > tr:first-child > th:first-child {
        width: 8.25rem;
        border-start-start-radius: calc(var(--bk-radius) - 1px);
      }

      & > tbody > tr:first-child > th:last-child {
        border-start-end-radius: calc(var(--bk-radius) - 1px);
      }

      & > tbody > tr:first-child > th + th {
        border-inline-start-color: var(--bk-navy-hover);
      }

      & > tbody > tr:first-child > th a {
        color: #fff;
      }

      & > tbody > tr:nth-child(2) > :is(th, td) {
        vertical-align: top;
      }

      & > tbody > tr:nth-child(2) > td > a {
        display: block;
      }

      & > tbody > tr:last-child > td {
        color: var(--bk-ink);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
    }

    /***************************** FOOTER ****************************/
    & > footer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
      gap: var(--bk-gap);
      margin: auto 0 0;
      padding: 1.8rem var(--bk-edge) 1.3rem;
      border-top: 1px solid var(--bk-border);
      background: var(--bk-mist);
      color: var(--bk-muted);
      font-size: 0.875rem;

      & > #paticka {
        display: block;
      }

      & > div {
        float: none;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow-wrap: anywhere;
      }

      & a {
        line-height: inherit;
      }

      & :is(img, iframe) {
        max-width: 100%;
      }

      & img {
        height: auto;
      }
    }

    & > footer > br.konec,
    & > footer + br:has(+ #copyright) {
      display: none;
    }

    & > #copyright {
      text-align: center;
      width: auto;
      margin: 0;
      padding: 0.8rem var(--bk-gutter);
      background: var(--bk-navy);
      color: #fff;
      font-size: 0.8rem;
    }

    /*************************** FOKUS KLÁVESNICE **************************/
    & > :where(header, nav, .stred, table.doprava, p, footer) :is(a, input):focus-visible {
      outline: 2px solid var(--bk-focus);
      outline-offset: 2px;
    }

    & > nav#zeme a:focus-visible,
    & > header input[type="submit"]:focus-visible {
      outline-color: #fff;
      outline-offset: -4px;
    }

    & > #skipto:focus-within {
      position: fixed;
      inset: 0.75rem auto auto 0.75rem;
      z-index: 30;
      width: auto;
      max-width: calc(100% - 1.5rem);
      height: auto;
      padding: 0.75rem;
      overflow: visible;
      border: 1px solid var(--bk-border);
      border-radius: 0.5rem;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    @media (width < 1024px) {
      & > header {
        grid-template-columns: auto minmax(0, 1fr);
      }

      & > header > nav {
        grid-area: 2 / 1 / auto / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        align-items: center;
        justify-items: start;
      }
    }

    @media (width <= 43rem) {
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;

      & > header {
        column-gap: 0.65rem;
      }

      & > header > nav {
        grid-template-columns: minmax(0, 1fr);
      }

      & > header > nav > ul {
        column-gap: 0.65rem;
        font-size: 0.8rem;
      }

      & > header > nav > form {
        max-width: none;
      }

      & > nav#zeme > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > nav#zeme > ul a {
        font-size: 0.85rem;
      }
    }

    & > .stred > .doprava-varianta :is(h2 > a, a.tlacitko):focus-visible {
      outline: 2px solid #fff;
      outline-offset: -4px;
    }

    & > table.doprava-lokality > tbody > tr:first-child a:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }

    /* Ceník se sedmi sloupci potřebuje vlastní posuv i na tabletu. */
    @media (width <= 64rem) {
      & > table.doprava-lokality:has(> tbody > tr:first-child > th:nth-child(7)) {
        display: block;
        overflow-x: auto;

        & > tbody > tr > :is(th, td) {
          min-width: 7.25rem;
        }
      }
    }

    @media (width <= 40rem) {
      & > .stred:has(> .doprava-varianta) {
        grid-template-columns: minmax(0, 1fr);
      }

      & > table.doprava-lokality {
        display: block;
        overflow-x: auto;

        & > tbody > tr > :is(th, td) {
          min-width: 7.25rem;
        }
      }
    }
  }
}
/************************************************************************************************************************/
/***************************************************** KONEC DOPRAVA ****************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/**************************************************** CHATY A MOŘE ******************************************************/
/************************************************************************************************************************/
@media screen {
  html:has(> head > meta[property="og:url"]:is(
    [content="https://www.bktour.cz/chaty.php"],
    [content="https://www.bktour.cz/more.php"]
  )) > body:has(> #flex-obal-rozcestniku) {
    --bk-page: #f4f6f8;
    --bk-background-image: url("/images/design/background1.jpg");
    --bk-surface: #fff;
    --bk-ink: #142d46;
    --bk-text: #263b50;
    --bk-muted: #4d6072;
    --bk-navy: #123250;
    --bk-navy-hover: #21496d;
    --bk-accent: #b52540;
    --bk-accent-hover: #8f1930;
    --bk-border: #dbe4ec;
    --bk-mist: #edf3f7;
    --bk-focus: #1969a3;
    --bk-field-border: #8094a6;

    --bk-font: "Open Sans", system-ui, sans-serif;
    --bk-width: 76rem;
    --bk-gutter: clamp(1rem, 3.2vw, 2.5rem);
    --bk-gap: clamp(1rem, 2vw, 1.5rem);
    --bk-inner: min(var(--bk-width), calc(100% - 2 * var(--bk-gutter)));
    --bk-edge: max(var(--bk-gutter), calc((100% - var(--bk-width)) / 2));
    --bk-section-space: clamp(1.5rem, 3vw, 2.5rem);
    --bk-radius: 0.9rem;
    --bk-card-padding: clamp(15px, 2.3vw, 24px);
    --bk-card-gap: 15px;
    --bk-shadow: 0 4px 16px rgb(20 45 70 / 7%);
    --bk-logo-scale: 0.73;
    --bk-header-text-size: clamp(0.95rem, 1.4vw, 1.22rem);
    --bk-menu-height: 3.05rem;
    --bk-control-height: 2.75rem;
    --bk-photo-width: 715px;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--bk-page) var(--bk-background-image) repeat;
    color: var(--bk-text);
    font: 1rem / 1.55 var(--bk-font);

    & > :is(header, #zeme, footer, #copyright) {
      min-width: 0;
    }

    & > :where(#flex-obal-rozcestniku, p, footer) a {
      color: var(--bk-ink);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 0.16em;
      overflow-wrap: anywhere;
    }

    & > :where(#flex-obal-rozcestniku, p, footer) a:hover {
      color: var(--bk-accent);
    }

    /************************ HEADER A FULLTEXT ***********************/
    & > header {
      order: -4;
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) max-content;
      align-items: center;
      gap: 0.55rem 1rem;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0.85rem var(--bk-edge);
      background: var(--bk-surface);

      & > a {
        grid-area: 1 / 1;
        display: block;
      }

      & #logo {
        width: calc(136px * var(--bk-logo-scale));
        height: calc(108px * var(--bk-logo-scale));
        margin: 0;
        background: url("/images/design/ikonky.png") no-repeat;
        background-size: calc(400px * var(--bk-logo-scale)) calc(800px * var(--bk-logo-scale));
        background-position: calc(-116px * var(--bk-logo-scale)) calc(-302px * var(--bk-logo-scale));
      }

      & > p {
        grid-area: 1 / 2;
        position: static;
        margin: 0;
        font: 700 var(--bk-header-text-size) / 1.25 var(--bk-font);
        letter-spacing: -0.025em;
      }

      & > p :is(a, span) {
        color: var(--bk-ink);
        font: inherit;
        text-decoration: none;
      }

      & > nav {
        grid-area: 1 / 3;
        position: static;
        display: grid;
        justify-items: end;
        gap: 0.25rem 1rem;
        min-width: 0;
        width: auto;
        height: auto;
        background: none;
      }

      & > nav > ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.8rem;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 0.85rem;
      }

      & > nav > ul > li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        border: 0;
      }

      & > nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        color: var(--bk-text);
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
      }

      & > nav > ul a.telefon {
        color: var(--bk-accent);
        white-space: nowrap;
      }

      & > nav > ul a:is(:hover, .aktivni) {
        color: var(--bk-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      & > nav > form {
        float: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-self: end;
        width: 100%;
        max-width: 17rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
      }

      & > nav input:is([type="search"], [type="submit"]) {
        box-sizing: border-box;
        min-height: var(--bk-control-height);
        margin: 0;
        padding: 0.5rem 0.75rem;
        font: 0.875rem / 1.25 var(--bk-font);
      }

      & > nav input[type="search"] {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--bk-field-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        background: var(--bk-mist);
        color: var(--bk-ink);
      }

      & > nav input[type="submit"] {
        border: 1px solid var(--bk-navy);
        border-radius: 0 0.5rem 0.5rem 0;
        background: var(--bk-navy);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      & > nav input[type="submit"]:is(:hover, :focus-visible) {
        background: var(--bk-navy-hover);
      }
    }

    /****************************** MENU ZEMÍ ******************************/
    & > nav#zeme {
      order: -3;
      margin: 0;
      background: var(--bk-navy);

      & > ul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(100%, 60rem);
        margin: 0 auto;
        padding: 0;
        background: none;
      }

      & > ul > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
      }

      & > ul a {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--bk-menu-height);
        padding: 0.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
      }

      & > ul a:is(:hover, :focus-visible),
      & > ul > li[id^="aktivni-"] > a {
        background: var(--bk-navy-hover);
        color: #fff;
      }

      & > ul > li[id^="aktivni-"] > a {
        box-shadow: inset 0 -3px #c7dbee;
      }
    }

    /********************** NADPIS A ÚVOD ************************/
    & > h1 {
      order: -2;
      box-sizing: border-box;
      width: var(--bk-inner);
      margin: var(--bk-section-space) auto 0.65rem;
      padding: 0;
      color: var(--bk-ink);
      font: 700 clamp(1.45rem, 2.6vw, 2rem) / 1.2 var(--bk-font);
      letter-spacing: -0.025em;
      text-align: center;
      overflow-wrap: anywhere;
    }

    & > p {
      order: -1;
      width: min(52rem, var(--bk-inner));
      margin: 0 auto;
      color: var(--bk-muted);
      text-align: center;
      overflow-wrap: anywhere;
    }

    /********************* KARTY A FOTOGALERIE *********************/
    & > #flex-obal-rozcestniku {
      display: grid;
      gap: var(--bk-gap);
      width: var(--bk-inner);
      margin: var(--bk-section-space) auto;

      & > article.rozcestnik {
        display: block;
        box-sizing: border-box;
        width: auto;
        min-width: 0;
        margin: 0;
        border: 1px solid var(--bk-border);
        border-radius: var(--bk-radius);
        background: var(--bk-surface);
        box-shadow: var(--bk-shadow);
      }

      & > article.rozcestnik > h2 {
        margin: 0;
        padding: 0.72rem var(--bk-card-padding);
        border: 0;
        border-radius: calc(var(--bk-radius) - 1px) calc(var(--bk-radius) - 1px) 0 0;
        background: var(--bk-navy);
        color: #fff;
        font: 700 clamp(1.05rem, 2vw, 1.35rem) / 1.3 var(--bk-font);
        text-align: left;
        overflow-wrap: anywhere;
      }

      & > article.rozcestnik > .flex-obal {
        display: grid;
        grid-template-columns: minmax(0, var(--bk-photo-width)) minmax(16rem, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
          "photo links"
          "thumbs links";
        gap: 0.65rem var(--bk-card-gap);
        padding: var(--bk-card-padding);
      }

      /* Stávající galerie mění background-image přímo na tomto prvku. */
      & > article.rozcestnik .fotka {
        grid-area: photo;
        align-self: start;
        float: none;
        width: 100%;
        min-width: 0;
        max-width: var(--bk-photo-width);
        height: auto;
        aspect-ratio: 715 / 336;
        margin: 0;
        border: 0;
        border-radius: 0.65rem;
        background-color: var(--bk-mist);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      & > article.rozcestnik .fotky {
        grid-area: thumbs;
        align-self: start;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 85px));
        gap: 6px;
        width: auto;
        min-width: 0;
        height: auto;
        margin: 0;
        background: none;
      }

      & > article.rozcestnik .fotky > img {
        display: block;
        width: 100%;
        height: auto;
        min-height: 2.75rem;
        aspect-ratio: 85 / 64;
        margin: 0;
        border: 0;
        border-radius: 0.45rem;
        object-fit: cover;
        cursor: pointer;
      }

      & > article.rozcestnik .fotky > img:hover {
        outline: 2px solid var(--bk-focus);
        outline-offset: 2px;
      }

      & > article.rozcestnik .obsah {
        grid-area: links;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        float: none;
        min-width: 0;
        margin: 0;
        padding: clamp(0.8rem, 1.6vw, 1.15rem);
        border-radius: 0.65rem;
        background: var(--bk-mist);
        overflow-wrap: anywhere;
      }

      & > article.rozcestnik .obsah > h3 {
        margin: 0;
        color: var(--bk-ink);
        font: 700 1.05rem / 1.35 var(--bk-font);
      }

      & > article.rozcestnik .obsah > ul {
        display: grid;
        gap: 0.5rem 1.3rem;
        margin: 0;
        padding: 0 0 0 1.15rem;
      }

      & > article.rozcestnik .obsah > h3 + ul {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
      }

      & > article.rozcestnik .obsah > ul > li {
        margin: 0;
        padding: 0;
        list-style: disc;
      }

      & > article.rozcestnik .obsah > ul > li::marker {
        color: var(--bk-navy);
      }

      & > article.rozcestnik .obsah > a.tlacitko {
        box-sizing: border-box;
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        justify-content: center;
        float: none;
        min-height: var(--bk-control-height);
        max-width: 100%;
        margin: auto 0 0;
        padding: 0.55rem 0.85rem;
        border: 0;
        border-radius: 0.5rem;
        background: var(--bk-accent);
        /* Přebíjí důležitost původní barvy tlačítka. */
        color: #fff !important;
        font-size: 0.9rem;
        line-height: 1.25;
        text-align: center;
        text-decoration: none;
      }

      & > article.rozcestnik .obsah > a.tlacitko:is(:hover, :focus-visible) {
        background: var(--bk-accent-hover);
      }

      & > article.rozcestnik .obsah > a.tlacitko:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -4px;
      }

      & > article.rozcestnik > br.konec,
      & > article.rozcestnik .obsah > br.konec {
        display: none;
      }
    }

    /***************************** FOOTER ****************************/
    & > footer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
      gap: var(--bk-gap);
      margin: auto 0 0;
      padding: 1.8rem var(--bk-edge) 1.3rem;
      border-top: 1px solid var(--bk-border);
      background: var(--bk-mist);
      color: var(--bk-muted);
      font-size: 0.875rem;

      & > #paticka {
        display: block;
      }

      & > div {
        float: none;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow-wrap: anywhere;
      }

      & a {
        line-height: inherit;
      }

      & :is(img, iframe) {
        max-width: 100%;
      }

      & img {
        height: auto;
      }
    }

    & > footer > br.konec,
    & > footer + br:has(+ #copyright) {
      display: none;
    }

    & > #copyright {
      text-align: center;
      width: auto;
      margin: 0;
      padding: 0.8rem var(--bk-gutter);
      background: var(--bk-navy);
      color: #fff;
      font-size: 0.8rem;
    }

    /*************************** FOKUS KLÁVESNICE **************************/
    & > :where(header, nav, #flex-obal-rozcestniku, p, footer) :is(a, input):focus-visible {
      outline: 2px solid var(--bk-focus);
      outline-offset: 2px;
    }

    & > nav#zeme a:focus-visible,
    & > header input[type="submit"]:focus-visible {
      outline-color: #fff;
      outline-offset: -4px;
    }

    & > #skipto:focus-within {
      position: fixed;
      inset: 0.75rem auto auto 0.75rem;
      z-index: 30;
      width: auto;
      max-width: calc(100% - 1.5rem);
      height: auto;
      padding: 0.75rem;
      overflow: visible;
      border: 1px solid var(--bk-border);
      border-radius: 0.5rem;
      background: var(--bk-surface);
      box-shadow: var(--bk-shadow);
    }

    @media (width < 1024px) {
      & > header {
        grid-template-columns: auto minmax(0, 1fr);
      }

      & > header > nav {
        grid-area: 2 / 1 / auto / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        align-items: center;
        justify-items: start;
      }
    }

    @media (width <= 43rem) {
      --bk-logo-scale: 0.51;
      --bk-menu-height: 2.75rem;

      & > header {
        column-gap: 0.65rem;
      }

      & > header > nav {
        grid-template-columns: minmax(0, 1fr);
      }

      & > header > nav > ul {
        column-gap: 0.65rem;
        font-size: 0.8rem;
      }

      & > header > nav > form {
        max-width: none;
      }

      & > nav#zeme > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > nav#zeme > ul a {
        font-size: 0.85rem;
      }
    }

    @media (width <= 48rem) {
      & > #flex-obal-rozcestniku > article.rozcestnik > .flex-obal {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
          "photo"
          "thumbs"
          "links";
      }
    }

    /* Na desktopu se galerie a odkazy skládají pod sebe v každé ze dvou karet. */
    @media (width >= 64rem) {
      & > #flex-obal-rozcestniku {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        & > article.rozcestnik {
          display: grid;
          grid-template-rows: auto 1fr;
        }

        & > article.rozcestnik > .flex-obal {
          grid-template-columns: minmax(0, 1fr);
          grid-template-rows: auto auto 1fr;
          grid-template-areas:
            "photo"
            "thumbs"
            "links";
        }
      }
    }
  }
}
/************************************************************************************************************************/
/************************************************** KONEC CHATY A MOŘE **************************************************/
/************************************************************************************************************************/