/*
 * cassiopeia_kzm – vzhled původní šablony vlacek3 (KŽM Slovácko) nad Cassiopeií.
 * Barvy: červený pruh #EF3E18, krémový podklad #f5f5c5, okolí #eee, odkazy #095197.
 */

:root {
  --kzm-red: #ef3e18;
  --kzm-cream: #f5f5c5;
  --kzm-page: #eeeeee;
  --kzm-link: #095197;
  --kzm-link-hover: #1b6ba5;
  --kzm-text: #444444;
  --kzm-muted: #555555;
  --kzm-line: #dddddd;
  --kzm-box: #f9f9f9;
  --kzm-width: 1040px;

  /* proměnné Cassiopeie / Bootstrapu */
  --cassiopeia-color-primary: var(--kzm-red);
  --cassiopeia-color-link: var(--kzm-link);
  --cassiopeia-color-hover: var(--kzm-link-hover);
  --link-color: var(--kzm-link);
  --link-color-rgb: 9, 81, 151;
  --link-hover-color: var(--kzm-link-hover);
  --link-hover-color-rgb: 27, 107, 165;
  --body-color: var(--kzm-text);
  --body-font-family: Arial, Helvetica, sans-serif;
}

body.site {
  background: var(--kzm-page);
  color: var(--kzm-text);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: var(--kzm-link); }
a:hover, a:focus { color: var(--kzm-link-hover); }

/* ---------- Boxovaný layout jako ve vlacek3 ---------- */
.container-header,
.site-grid,
.container-footer {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--kzm-width);
  margin-inline: auto;
  background: var(--kzm-cream);
}

.site-grid {
  /* jen jeden sloupec obsahu uvnitř boxu, bez plných okrajů */
  grid-template-columns: [full-start] minmax(0, 0) [main-start] repeat(4, minmax(0, 1fr)) [main-end] minmax(0, 0) [full-end];
  padding: 1.25rem 1rem 1rem;
  grid-gap: 0 1.25rem;
  box-shadow: 0 0 6px rgba(0, 0, 0, .25);
}

/* ---------- Záhlaví: červený pruh s názvem + fotka vlaku ---------- */
.container-header {
  background: var(--kzm-cream);
  background-image: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, .25);
  padding: 2.75rem .625rem 0;
}

.container-header > .grid-child:has(.navbar-brand) {
  max-width: none;
  padding: 0;
}

.container-header .navbar-brand {
  display: block;
  width: 100%;
  margin: 0;
  padding: .35rem 1rem;
  background: var(--kzm-red);
  text-align: center;
}

.container-header .navbar-brand .brand-logo {
  color: #fff;
  font-size: clamp(1.5rem, 4.2vw, 2.9rem);
  line-height: 1.15;
  font-weight: normal;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
}

.container-header .navbar-brand .brand-logo:hover { color: #fff; }

.container-header .site-description {
  color: #fff;
  font-size: 1rem;
}

/* fotka pod pruhem, poměr stran původního obrázku 1024 × 228 */
.container-header::after {
  content: "";
  display: block;
  aspect-ratio: 1024 / 228;
  margin: 0 0 0;
  border: 3px solid var(--kzm-red);
  border-top: 0;
  background: var(--kzm-red) url("../images/header-vlak.jpg") center bottom / cover no-repeat;
}

/* Rozbalovací menu v záhlaví (modul „Hlavní menu (mobil)“, pozice menu,
 * layout cassiopeia:collapse-metismenu) je jen pro mobil – na desktopu je
 * hlavní nabídka v levém sloupci jako dřív. */
@media (min-width: 992px) {
  .container-header .container-nav { display: none; }
}

/* ---------- Drobečková navigace + Facebook (na jednom řádku) ----------
 * Obsah je v Cassiopeii flexový sloupec: modul Facebook má nulovou výšku
 * a jeho odkaz se zobrazí vpravo na řádku drobečkové navigace pod ním. */
.container-component > .mod-custom:has(.kzm-facebook) {
  align-self: flex-end;
  height: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.container-component .breadcrumb {
  background: none;
  padding: 0 0 0 0 !important;
  padding-right: 6rem !important;
  margin-bottom: 1rem;
  font-size: .875rem;
  line-height: 1.5;
}

.container-component .kzm-facebook {
  display: inline-block;
  position: relative;
  top: 1rem;
  font-size: .875rem;
  line-height: 1.5;
}

.container-component .kzm-facebook img {
  width: 20px;
  height: auto;
  vertical-align: middle;
}

/* ---------- Karty modulů v postranních sloupcích a dole ---------- */
.site-grid .card {
  background: var(--kzm-box);
  border: 1px solid var(--kzm-line);
  border-radius: 4px;
  box-shadow: none;
  margin-bottom: 1rem;
}

.site-grid .card-header {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--kzm-line);
  margin: .9rem 1rem 0;
  padding: 0 0 .45rem;
  color: var(--kzm-text);
  font-size: 1.2rem;
  font-weight: normal;
}

.site-grid .card-body { padding: .9rem 1rem; }

/* Hlavní menu a Novinky: položky oddělené linkou */
.site-grid .card .mod-menu,
.site-grid .card .mod-articleslatest,
.site-grid .card .latestnews {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-grid .card .mod-menu > li,
.site-grid .card .mod-articleslatest > li,
.site-grid .card .latestnews > li {
  border-bottom: 1px solid var(--kzm-line);
  padding: .4rem 0;
  font-size: .875rem;
}

.site-grid .card .mod-menu > li > a,
.site-grid .card .mod-menu > li > span { color: var(--kzm-muted); text-decoration: none; }
.site-grid .card .mod-menu > li > a:hover { color: var(--kzm-link); }
.site-grid .card .mod-menu > li.current > a,
.site-grid .card .mod-menu > li.active > a { color: #333; font-weight: bold; }
.site-grid .card .mod-menu .mod-menu__sub { padding-left: 1rem; }

.site-grid .card .mod-articleslatest a,
.site-grid .card .latestnews a { color: var(--kzm-link); text-decoration: none; }

/* Bannery vpravo */
.container-sidebar-right .mod-banners .mod-banners__item { margin-bottom: 1rem; }
.container-sidebar-right .mod-banners img { max-width: 100%; height: auto; }

/* ---------- Obsah ---------- */
.container-component h1,
.container-component h2,
.container-component .page-header h2 {
  color: var(--kzm-link);
  font-weight: normal;
  font-size: 1.4rem;
}

.container-component .page-header {
  border-bottom: 1px solid var(--kzm-line);
  margin-bottom: 1rem;
}

.container-component .article-info {
  background: var(--kzm-box);
  border: 1px solid var(--kzm-line);
  border-radius: 4px;
  padding: .4rem .75rem;
  font-size: .8rem;
}

.container-component img { max-width: 100%; height: auto; }

/* tabulky kartotéky vozidel: bílé pozadí, široká tabulka se posouvá vodorovně místo přetékání */
.container-component { min-width: 0; }
.container-component main { overflow-x: auto; }
.container-component table { background: #fff; }

/* tlačítka laděná do šeda jako ve vlacek3 */
.btn-primary {
  --btn-bg: #dddddd;
  --btn-border-color: #cccccc;
  --btn-color: #333;
  --btn-hover-bg: #cfcfcf;
  --btn-hover-border-color: #bbbbbb;
  --btn-hover-color: #000;
  --btn-active-bg: #c4c4c4;
  background-color: #ddd;
  background-image: linear-gradient(#eeeeee, #dddddd);
  border-color: #ccc;
  color: #333;
}

/* ---------- Spodní řada (přihlášení, logo) a patička ---------- */
.container-bottom-a,
.container-bottom-b {
  border-top: 1px solid var(--kzm-line);
  padding-top: 1.25rem;
}

.container-footer {
  background: var(--kzm-cream);
  background-image: none;
  color: var(--kzm-muted);
  box-shadow: 0 0 6px rgba(0, 0, 0, .25);
  margin-bottom: 1.5rem;
}

.container-footer .grid-child { padding: 1rem; }
.container-footer a { color: var(--kzm-link); }

/* ---------- Mobil ----------
 * Záhlaví: nahoře fotka vlaku, pod ní červený pruh s názvem a tlačítkem menu (☰).
 * Záhlaví je „sticky“ posunuté nahoru o výšku fotky → při posouvání fotka odroluje
 * a červený pruh s tlačítkem zůstane připnutý k horní hraně obrazovky. */
@media (max-width: 991.98px) {
  .site-grid { padding: 1rem .75rem; }

  .container-header {
    --kzm-photo-h: calc(100vw * 228 / 1024);
    /* mřížka: 1. řádek fotka přes celou šířku, 2. řádek název | tlačítko */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    /* Cassiopeia má na mobilu position: relative !important */
    position: sticky !important;
    top: calc(-1 * var(--kzm-photo-h));
    z-index: 1020;
    padding: 0;
    max-width: none;
  }

  /* fotka nad pruhem místo pod ním */
  .container-header::after { display: none; }
  .container-header::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1;
    height: var(--kzm-photo-h);
    background: var(--kzm-red) url("../images/header-vlak.jpg") center bottom / cover no-repeat;
  }

  /* název klubu vlevo v pruhu */
  .container-header > .grid-child:has(.navbar-brand) {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    background: var(--kzm-red);
  }

  .container-header .navbar-brand {
    padding: .55rem .75rem;
    text-align: left;
  }

  .container-header .navbar-brand .brand-logo {
    font-size: clamp(1.05rem, 4.6vw, 1.7rem);
    line-height: 1.2;
  }

  /* tlačítko ☰ vpravo v pruhu */
  .container-header .container-nav {
    grid-column: 2;
    grid-row: 2;
    width: auto; /* Cassiopeia dává .grid-child šířku 100 % */
    display: flex;
    align-items: center;
    max-width: none;
    margin: 0;
    padding: 0 .6rem 0 0;
    background: var(--kzm-red);
  }

  .container-header .container-nav .navbar {
    position: static;
    padding: 0;
  }

  .container-header .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.5rem;
    padding: 0;
    color: #fff;
    font-size: 1.4rem;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 6px;
  }

  .container-header .navbar-toggler:hover,
  .container-header .navbar-toggler:focus-visible {
    background: rgba(255, 255, 255, .15);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
  }

  /* rozbalená nabídka přes celou šířku pod pruhem */
  .container-header .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: var(--kzm-cream);
    border-top: 3px solid var(--kzm-red);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
  }

  .container-header .navbar-collapse .mod-menu {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0 0 .25rem;
  }

  .container-header .navbar-collapse .metismenu-item {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--kzm-line);
  }

  .container-header .navbar-collapse .metismenu-item > a,
  .container-header .navbar-collapse .metismenu-item > span,
  .container-header .navbar-collapse .metismenu-item > button.mod-menu__heading {
    flex: 1 1 auto;
    display: block;
    padding: .7rem 1rem;
    color: #333;
    font-size: 1rem;
    text-decoration: none;
  }

  .container-header .navbar-collapse .metismenu-item.active > a,
  .container-header .navbar-collapse .metismenu-item.current > a {
    color: var(--kzm-link);
    font-weight: bold;
  }

  .container-header .navbar-collapse .metismenu-item > a:hover { background: rgba(0, 0, 0, .04); }

  /* tlačítko pro rozbalení podpoložek */
  .container-header .navbar-collapse .mm-toggler {
    flex: 0 0 auto;
    color: var(--kzm-text);
    padding: .7rem 1rem;
  }

  .container-header .navbar-collapse .mm-collapse {
    flex: 0 0 100%;
    position: static;
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    background: rgba(0, 0, 0, .03);
    border: 0;
    box-shadow: none;
  }

  .container-header .navbar-collapse .mm-collapse .metismenu-item:last-child { border-bottom: 0; }

  /* hlavní nabídka v levém sloupci je na mobilu zbytečná (je v záhlaví) */
  .container-sidebar-left .card:has(.mod-menu) { display: none; }
}