html, body {
  overflow-x:hidden;
}
body {
  background-color:#f0f0f0;
  font-family:Open Sans,Arial,sans-serif;
  font-size:.8rem;
}

h1,h2,h3,h4,h5,h6 {
  font-family:Roboto,sans-serif;
  font-weight:100;
  text-transform:uppercase;
  text-align:left;
}

h1 {
  font-size:2rem;
}

h2 {
  font-size:1.7rem;
}

h3 {
  font-size:1.5rem;
}

h4 {
  font-size:1.3rem;
}

@media(min-width:993px) {
  .navbar-header button {
    height:3.5rem;
  }
  .navbar-nav a {
    font-size:1.05rem;
    padding:1.4rem 1.1rem !important;
    padding-bottom:.7rem !important;
  }
}

@media(max-width:992px) {
  .navbar-header button {
    height:2.7rem;
  }
  .navbar-nav a {
    font-size:.81rem;
    padding:1.08rem .78rem !important;
    padding-bottom:.38rem !important;
  }
  .navbar .navbar-brand {
    font-size:.9rem !important;
  }
}

.navbar {
  /* Původní header_bg.jpg = levá půlka tmavě modrá, pravá červená.
     Tmavý základ; červený pruh začíná přesně u levého okraje menu
     (viz .navbar-nav::before), aby nevyčníval vlevo před položkami. */
  background-color:#273946;
  color:#fff;
  border-radius:0;
  border:0;
  padding:0;
  position:relative;
  z-index:1000;
}

.navbar a {
  color:#fff;
}

.navbar .navbar-header {
  margin-right:20px;
}

.navbar .navbar-header button {
  background-color:#3b5f78;
  width:50px;
  margin:15px;
}

.navbar .navbar-header button .icon-bar {
  background-color:#fff;
  width:100%;
}

.navbar .navbar-brand {
  max-width:30%;
  padding-left:1rem;
  font-size:1rem;
}

.navbar .navbar-nav {
  list-style:none;
}

/* Červený pruh vpravo — začíná u levého okraje menu, táhne se za pravý okraj.
   Položky menu (barevné dlaždice n1–n5) jej překrývají. Jen md+ (vodorovné menu). */
@media (min-width:768px) {
  .navbar .navbar-nav {
    position:relative;
  }
  .navbar .navbar-nav::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:-100vw;
    background-color:#c54d57;
    z-index:0;
  }
  .navbar .navbar-nav > li {
    position:relative;
    z-index:1;
  }
}

.navbar .navbar-nav li.dropdown {
  position:relative;
}

.navbar .navbar-nav li.dropdown .dropdown-menu {
  margin:0;
  padding:0;
  display:none;
  position:absolute;
  z-index:1;
  background-color:#fff;
  border:0;
  min-width:250px;
  left:0;
  border-radius:0;
  -webkit-box-shadow:3px 3px 7px 3px rgba(200,200,200,.75) !important;
  -moz-box-shadow:3px 3px 7px 3px rgba(200,200,200,.75) !important;
  box-shadow:3px 3px 7px 3px rgba(200,200,200,.75) !important;
}

.navbar .navbar-nav li.dropdown .dropdown-menu a {
  padding:10px 20px !important;
  color:#000;
  display:block;
  text-transform:none;
  font-weight:normal;
  font-size:.9rem;
  border:0;
}

.navbar .navbar-nav li.dropdown .dropdown-menu a:hover {
  background-color:#f2f2f2;
  text-decoration:none;
}

.navbar .navbar-nav li.dropdown .dropdown-menu.show {
  display:none;
}

.navbar .navbar-nav li.dropdown:hover .dropdown-menu {
  display:block;
}

.navbar .navbar-nav a {
  display:table-cell;
  vertical-align:middle;
  text-transform:uppercase;
  border-bottom:solid 10px transparent;
}

.navbar .navbar-nav a.n1 {
  background-color:#3b5f78;
}

.navbar .navbar-nav a.n2 {
  background-color:#44c2c4;
}

.navbar .navbar-nav a.n3 {
  background-color:#bfcc34;
}

.navbar .navbar-nav a.n4 {
  background-color:#ff6b6b;
}

.navbar .navbar-nav a.n5 {
  background-color:#273946;
}

.navbar .navbar-nav li:hover a {
  border-bottom-color:rgba(255,255,255,.3);
}

.navbar-toggler {
  color:#fff;
}

.lang-switcher {
  display:flex;
  position: relative;
  align-items:center;
  gap:.25rem;
  padding:.4rem .6rem;
  font-size:.85rem;
}
.lang-switcher .active {
  background-color:#44c2c4;
  color:#fff;
  padding:.15rem .45rem;
}
.lang-switcher a {
  color:#fff;
  padding:.15rem .45rem;
  border:solid 1px rgba(255,255,255,.4);
}
.lang-switcher a:hover {
  background-color:#3b5f78;
  text-decoration:none;
}

@media(max-width:767px) {
  .navbar {
    background:#273946;
    padding:20px;
  }
  /* Logo + nadpis u sebe vlevo, hamburger vpravo (žádné space-between mezery). */
  .navbar .container {
    justify-content:flex-start;
    gap:.6rem;
  }
  .navbar .navbar-brand {
    max-width:none;
  }
  .navbar .navbar-toggler {
    margin-left:auto;
  }
  .navbar .navbar-nav {
    margin:20px 0;
  }
  .navbar .navbar-nav a {
    width:100%;
    display:block !important;
  }
  /* Rozbalovací menu sbalené; otevře se třídou .is-open (přes JS). */
  .navbar .navbar-nav li.dropdown .dropdown-menu {
    display:none;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    position:initial;
    -webkit-box-shadow:0 0 0 0 transparent !important;
    -moz-box-shadow:0 0 0 0 transparent !important;
    box-shadow:0 0 0 0 transparent !important;
  }
  .navbar .navbar-nav li.dropdown .dropdown-menu.is-open {
    display:block;
  }
}

.dropdown-toggle::after {
  display:none;
}

.breadcrumb {
  background-color:transparent;
  padding:.2rem;
  font-size:.8rem;
}

.breadcrumb a {
  color:#c44d58;
}

.home-page {
  padding:1rem 0;
}

.home-page .article-list .article-box {
  border-top:none;
}

#carousel {
  margin:0 -15px;
  margin-bottom:2rem;
}

#carousel .article {
  position:relative;
}

#carousel .article img {
  display:block;
  width:100%;
}

/* --- Dva sloupce (flex, zalamuje na malých displejích) --- */
.flex-cols {
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
}
.flex-cols > .flex-col {
  flex:1 1 280px;
  min-width:0;
}

/* --- Mapa (Mapy.cz / Leaflet) --- */
.seznam-map .js-map {
  height:320px;
  width:100%;
  background:#eee;
  z-index:0;
}
.school-marker {
  background:#000;
  border-radius:50%;
  padding:6px !important;
  box-sizing:border-box;
}

.dropdown-menu {
  z-index: 3 !important;
}

/* --- Kontaktní formulář --- */
.contact-form {
  background:#fff;
  border:solid 1px #e0e0e0;
  padding:1.75rem;
}
.contact-form h2 {
  margin-top:0;
  margin-bottom:1rem;
}
.contact-form .form-control {
  padding:.6rem .75rem;
}
.contact-form .form-check {
  margin:1rem 0;
}
.contact-form .all-articles-btn {
  margin-top:.5rem;
  padding:.6rem 2rem;
}
/* Na úzkých displejích zruš okraj/odsazení formuláře, aby se 304px reCAPTCHA
   widget vešel bez přetékání. */
@media (max-width:400px) {
  .contact-form {
    border:0;
    padding:0;
  }
}

#carousel .article h2 {
  position:absolute;
  bottom:-10px;
  background-color:rgba(59,95,120,.7);
  width:100%;
  padding:1rem 1rem;
  text-transform:none;
  font-size:1.5rem;
}

#carousel .article h2 a {
  color:#fff;
}

#carousel .article h2 a:hover {
  text-decoration:none;
}

#carousel .slick-dots {
  list-style:none;
  background-color:#3b5f78;
  width:100%;
  height:30px;
  padding:0 1rem;
}

#carousel .slick-dots li {
  display:inline-block;
  padding:3px;
}

#carousel .slick-dots li button {
  background-color:#fff;
  border:none;
  font-size:0;
  width:15px;
  height:15px;
  display:block;
  cursor:pointer;
}

#carousel .slick-dots li.slick-active button {
  background-color:#44c2c4;
}

.article-list .article-box {
  background-color:#fff;
  margin-bottom:1rem;
  border-top:solid 1px #ccc;
}

.article-list .article-box .article-icon a {
  display:block;
  padding:.7rem;
  text-align:center;
}

.article-list .article-box .article-info {
  padding:.2rem .7rem .7rem .7rem;
}

.article-list .article-box .article-info ul {
  border-top:solid 1px #ccc;
}

.article-list .article-box .article-text h3 {
  font-size:1rem;
  text-transform:none;
  font-weight:400;
  margin-top:1rem;
  overflow:auto;
  width:100%;
}

.article-list .article-box .article-text h3 a {
  color:#000;
}

.article-list .article-box .article-text h3 em {
  float:right;
  background-color:#ff6b6b;
  color:#fff;
  font-style:normal;
  padding:.3rem .8rem;
  text-transform:uppercase;
  font-size:.8rem;
}

.article-info {
  color:#a09f9f;
  text-transform:uppercase;
  font-size:.7rem;
}

.article-info ul {
  padding:0;
  padding-top:.7rem;
  list-style:none;
  margin:0;
}

.article-info ul li {
  padding:0 .5rem;
  border-right:solid 1px #a09f9f;
  display:inline-block;
}

.article-info ul li:last-child {
  border-right:none;
}

.article-info .fa {
  margin-right:.3rem;
}

.article-tags a {
  color:#a09f9f;
  text-decoration:none;
  border-bottom:dotted 1px #a09f9f;
  display:inline-block;
  margin-right:.3rem;
}

.article-tags a:hover {
  text-decoration:none;
}

.article .article-icon {
  margin-bottom:1rem;
}

.article .article-info {
  margin-bottom:1rem;
}

.article .article-info ul li:first-child {
  padding-left:0;
}

.sidebar h2 {
  font-size:1.5rem;
  font-weight:400;
  text-transform:none;
  margin-bottom:1rem;
}

.sidebar>div {
  padding:1.2rem;
}

.sidebar #twitter {
  margin-top:1rem;
  padding:.5rem;
  position:relative;
}

.sidebar #twitter:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  background:transparent url("/Content/Images/logo_twitter.png") no-repeat right top;
  width:100%;
  height:100%;
  opacity:.7;
  z-index:-1;
}

.sidebar #twitter h2 {
  margin-bottom:.5rem;
}

.sidebar #twitter h2 a {
  color:#3b3b3b;
}

.sidebar #twitter ul {
  list-style:none;
  padding:0;
  margin:0;
}

.sidebar #twitter ul li {
  padding:.3rem 0;
}

.sidebar #twitter ul li span {
  color:#a09f9f;
}

.sidebar #quickLinks {
  background-color:#fff;
  overflow:auto;
}

.sidebar #quickLinks a {
  padding:.5rem 1rem;
  color:#fff;
  float:left;
  margin-right:.5rem;
  margin-bottom:.5rem;
  text-transform:uppercase;
  font-size:.8rem;
}

.sidebar #quickLinks a.c0 {
  background-color:#ff6b6b;
}

.sidebar #quickLinks a.c1 {
  background-color:#44c2c4;
}

.sidebar #quickLinks a.c2 {
  background-color:#c44d58;
}

.sidebar #quickLinks a.c3 {
  background-color:#bfcc34;
}

.sidebar #quickLinks a.c4 {
  background-color:#3b5f78;
}

.sidebar #quickLinks a:hover {
  background-color:#273946;
  text-decoration:none;
}

.sidebar #highlighted-arts {
  background-color:#fff;
  margin-top:1rem;
}

.sidebar #highlighted-arts ul {
  margin:0;
  padding:0;
  list-style:none;
}

.sidebar #highlighted-arts li {
  margin-bottom:.3rem;
  padding-bottom:.3rem;
  border-bottom:solid 1px #efefef;
}

.sidebar #highlighted-arts a {
  color:#c44d58;
}

.sidebar #highlighted-arts span {
  color:#a09f9f;
  font-size:.7rem;
}

.sidebar #calendar {
  margin-top:1rem;
  background-color:#fff;
}

.sidebar #calendar dt {
  font-weight:normal;
  font-size:.8rem;
  color:#a09f9f;
}

.sidebar #calendar dd {
  border-bottom:solid 1px #eee;
  padding-bottom:.4rem;
  font-weight:bold;
  color:#3b3b3b;
}

.sidebar #partners {
  background-color:#fff;
  margin-top:1rem;
}

.sidebar #partners a {
  margin-bottom:1rem;
  display:block;
  text-align:center;
}

a.continue-reading {
  color:#c44d58;
  margin-left:.2rem;
}

a.continue-reading:hover {
  text-decoration:none;
  color:#3b5f78;
}

.page-content {
  margin-top:20px;
  background-color:#fff;
  text-align:justify;
  position:relative;
}

.page-content>div {
  padding:20px;
}

.page-content h1 {
  margin-bottom:0;
}

.page-content img {
  max-width:100%;
}

.page-content table {
  border:0;
  width:100%;
  margin:1rem 0;
}

.page-content table th,.page-content table td {
  padding:.3rem;
}

.page-content table th {
  border-bottom:solid 2px #444;
}

.page-content table td {
  border-bottom:solid 1px #999;
}

.page-content table p {
  margin:0;
}

.attachments {
  list-style:none;
  margin:0;
  padding:0;
}

.attachments li {
  padding:.3rem .3rem;
  font-size:1rem;
}

.attachments li a {
  color:#000;
  margin-right:.5rem;
}

.attachments li i {
  margin-right:.5rem;
}

.attachments li span {
  color:#999;
}

.page-footer {
  border-top:solid 1px #ccc;
  padding-top:.5rem;
  font-size:.7rem;
  color:#a09f9f;
}

.article-footer {
  display:flex;
  align-items:center;
  gap:1rem;
}

.article-footer .page-updated {
  margin-left:auto;
  white-space:nowrap;
}

#yt-channel .yt-info a {
  color:#c44d58;
}

#yt-channel .row {
  margin-bottom:1rem;
  border-bottom:solid 1px #eee;
}

.child-pages {
  margin-top:2rem;
}

.child-pages h2 {
  margin-bottom:1rem;
}

.child-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;
}

.child-tile {
  position:relative;
  display:block;
  background:#fff;
  border-top:solid 4px #ccc;
  padding:1rem 1.2rem 2rem 1.2rem;
  color:#000;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  transition:box-shadow .15s ease,transform .15s ease;
}

.child-tile:hover {
  text-decoration:none;
  color:#000;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transform:translateY(-2px);
}

.child-tile h3 {
  font-size:1.1rem;
  font-weight:400;
  text-transform:none;
  margin:0 0 .4rem 0;
}

.child-tile p {
  font-size:.8rem;
  color:#666;
  margin:0;
}

.child-tile-arrow {
  position:absolute;
  right:1.2rem;
  bottom:.7rem;
  color:#c44d58;
  font-size:1.1rem;
}

.child-tile.c0 { border-top-color:#ff6b6b; }
.child-tile.c1 { border-top-color:#44c2c4; }
.child-tile.c2 { border-top-color:#c44d58; }
.child-tile.c3 { border-top-color:#bfcc34; }
.child-tile.c4 { border-top-color:#3b5f78; }

.pager {
  list-style:none;
  margin:0;
  padding:0;
}

.pager li {
  display:inline-block;
}

.pager li a,.pager li span {
  display:block;
  padding:.2rem .5rem;
  color:#3b3b3b;
  border:solid 1px transparent;
}

.pager li a:hover {
  text-decoration:none;
  border-color:#c44d58;
}

.pager li span {
  border-color:#a09f9f;
  font-weight:bold;
}

.substitutions ul {
  padding:1rem 0;
  margin:0;
  list-style:none;
}

.substitutions ul li {
  display:inline-block;
}

.substitutions ul li a {
  display:block;
  padding:.3rem .3rem;
  background-color:#c44d58;
  color:#fff;
}

.substitutions ul li a:hover {
  text-decoration:none;
  background-color:#3b5f78;
}

.substitutions ul li.current a {
  background-color:#3b5f78;
}

.substitutions table {
  border:solid 1px #ccc;
  margin-bottom:2rem;
}

.substitutions table tr td {
  border-collapse:collapse;
  border:solid 1px #ccc;
  text-align:center;
  vertical-align:middle;
  padding:.2rem .4rem;
}

.substitutions table tr td p {
  margin:0;
  padding:0;
}

.substitutions table tr td:first-child {
  text-align:left;
  font-weight:bold;
}

.substitutions table tr:first-child td {
  background-color:#44c2c4;
  color:#fff;
}

.schedules h3 {
  margin:1rem 0;
}

.schedules ul {
  list-style:none;
  padding:0;
  margin:0;
}

.schedules ul.tchrs li {
  font-size:.9rem;
  padding:.2rem 0;
}

.schedules ul.tchrs li a {
  color:#c44d58;
  text-decoration:underline;
}

.schedules ul.tchrs li a:hover {
  color:#3b5f78;
}

.schedules ul.clss,.schedules ul.rooms {
  text-align:left;
}

.schedules ul.clss li,.schedules ul.rooms li {
  display:inline-block;
}

.schedules ul.clss li a,.schedules ul.rooms li a {
  display:table-cell;
  width:3.5rem;
  height:3.5rem;
  background-color:#bfcc34;
  color:#fff;
  font-size:1.1rem;
  font-weight:bold;
  vertical-align:middle;
  text-align:center;
}

.schedules ul.clss li a:hover,.schedules ul.rooms li a:hover {
  text-decoration:none;
  background-color:#ff6b6b;
}

.teacher {
  margin-bottom:1rem;
  padding-bottom:1rem;
  border-bottom:solid 1px #ccc;
}

.teacher .teacher-contact {
  margin-bottom:.3rem;
  padding-bottom:.3rem;
  border-bottom:solid 1px #eee;
  font-size:.8rem;
  color:#444;
}

.teacher .teacher-contact i {
  margin-left:.3rem;
}

.teacher .teacher-contact span {
  margin-right:.6rem;
}

footer {
  color:#fff;
  font-size:.7rem;
  background-color:#273946;
  margin-top:1rem;
}

footer .r1 {
  background-color:#3b5f78;
  color:#9aacba;
  padding-top:1.5rem;
  padding-bottom:1.5rem;
}

footer .r2 {
  background-color:#273946;
  padding:1rem;
}

footer h3 {
  font-size:1.2rem;
  text-transform:none;
  font-weight:400;
}

footer p {
  text-align:justify;
}

footer dl {
  overflow:auto;
}

footer dl dt {
  float:left;
  clear:left;
}

footer dl dd {
  float:left;
  margin-left:.2rem;
  margin-bottom:.1rem;
}

.related-articles {
  margin-top:2rem;
}

/* --- Tlačítka: hranatá, sjednocená barevnost --- */
.all-articles-btn {
  display:inline-block;
  padding:.5rem 1rem;
  background-color:#44c2c4;
  color:#fff;
  text-transform:uppercase;
  font-size:.8rem;
  margin-top:1rem;
  border:0;
  border-radius:0;
  cursor:pointer;
}
.all-articles-btn:hover {
  background-color:#273946;
  color:#fff;
  text-decoration:none;
}
.back-btn {
  background-color:#6c757d;
}
.back-btn:hover {
  background-color:#273946;
}
.btn,
.form-control,
.form-select,
input[type="text"],
input[type="email"],
textarea {
  border-radius:0 !important;
}
.btn-primary {
  background-color:#3b5f78;
  border-color:#3b5f78;
}
.btn-primary:hover {
  background-color:#273946;
  border-color:#273946;
}

/* --- Carousel: šipky --- */
#carousel .slick-prev,
#carousel .slick-next {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:2.5rem;
  height:2.5rem;
  border:0;
  background-color:rgba(39,57,70,.6);
  color:#fff;
  cursor:pointer;
  font-size:1.1rem;
}
#carousel .slick-prev:hover,
#carousel .slick-next:hover {
  background-color:#44c2c4;
}
#carousel .slick-prev {
  left:0;
}
#carousel .slick-next {
  right:0;
}

/* --- Rodičovské položky v menu --- */
.navbar .navbar-nav li.dropdown .dropdown-menu a.current {
  background-color:#273946;
}
.navbar .navbar-nav li.dropdown:hover > a {
  background-image:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12));
}

/* --- Široké displeje / 4K — využít prostor velkých obrazovek ---
   Full HD (1920) i menší: ponecháno rozvržení jako na původním webu.
   Zvětšuje se až nad Full HD (obsah, hlavička i patička). */

/* Nad Full HD — lehké zvětšení */
@media (min-width:2100px) {
  body { font-size:1rem; }
  .container { max-width:1900px; }
  h1 { font-size:2.6rem; }
  h2 { font-size:2.1rem; }
  .article-list .article-box .article-text h3 { font-size:1.2rem; }
  .article-info { font-size:.85rem; }
  /* hlavička */
  .school-logo { height:72px; }
  .navbar .navbar-brand { font-size:1.2rem; }
  .navbar .navbar-nav a { font-size:1.1rem; }
  .navbar .navbar-nav li.dropdown .dropdown-menu a { font-size:1rem; }
  /* patička */
  footer { font-size:.85rem; }
  footer h3 { font-size:1.4rem; }
  footer .r1 { padding-top:2rem; padding-bottom:2rem; }
  footer .r2 { padding:1.5rem; }
}

/* 1440p / QHD */
@media (min-width:2560px) {
  body { font-size:1.1rem; }
  .container { max-width:2240px; }
  h1 { font-size:3rem; }
  h2 { font-size:2.4rem; }
  #carousel .article h2 { font-size:1.9rem; }
  /* hlavička */
  .school-logo { height:84px; }
  .navbar .navbar-brand { font-size:1.35rem; }
  .navbar .navbar-nav a { font-size:1.2rem; }
  .navbar .navbar-nav li.dropdown .dropdown-menu a { font-size:1.1rem; }
  /* patička */
  footer { font-size:.95rem; }
  footer h3 { font-size:1.6rem; }
  footer .r1 { padding-top:2.5rem; padding-bottom:2.5rem; }
  footer .r2 { padding:2rem; }
}

/* 4K / UHD */
@media (min-width:3440px) {
  body { font-size:1.2rem; }
  .container { max-width:3000px; }
  h1 { font-size:3.4rem; }
  h2 { font-size:2.7rem; }
  /* hlavička */
  .school-logo { height:100px; }
  .navbar .navbar-brand { font-size:1.5rem; }
  .navbar .navbar-nav a { font-size:1.35rem; }
  .navbar .navbar-nav li.dropdown .dropdown-menu a { font-size:1.2rem; }
  /* patička */
  footer { font-size:1.05rem; }
  footer h3 { font-size:1.8rem; }
  footer .r1 { padding-top:3rem; padding-bottom:3rem; }
  footer .r2 { padding:2.5rem; }
}

/* Video blok (odkaz YouTube/Vimeo nebo nahraný mp4) */
.block-video-figure { margin: 1.5rem 0; }
video.block-video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  background: #000;
}
.block-video-caption {
  margin-top: .5rem;
  font-size: .9rem;
  color: #6c757d;
  text-align: center;
}