/* Vodorovné přetečení řeš u viníka, ne tady. `overflow-x:hidden` na html se
   propaguje na viewport a html samo pak počítá `visible`; stejné pravidlo na
   body proto z body udělá vlastní scroll kontejner — stránka jde posouvat do
   strany (na mobilu swipem), jen bez viditelného posuvníku. Proto jen html a
   `clip` místo `hidden`: clip je pojistka, která nic scrollovat nenechá. */
html {
  overflow-x:hidden;  /* fallback pro prohlížeče bez `clip` (Safari < 16) */
  overflow-x:clip;
}

/* Bootstrap 5 podtrhává všechny odkazy ve výchozím stavu, původní web (BS3)
   nikoli — podtržení patří až na hover. Tlačítka a dlaždice si hover podtržení
   ruší vlastním pravidlem (např. #quickLinks a:hover). */
a {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}
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. */
  /* Pruh je `right:-100vw`, tedy o celý viewport za pravým okrajem. Bez
     oříznutí je z něj 100vw vodorovného přetečení na každé stránce. `clip`
     (ne `hidden`) proto, že jako jediná hodnota nenutí druhou osu na `auto` —
     rozbalovačky se pořád vykreslí pod hlavičkou. Fallback na `hidden` tu
     schválně není — ten by rozbalovačky ořízl; na prohlížečích bez `clip`
     pruh zachytí `overflow-x:hidden` na html. */
  overflow-x:clip;
  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%;
}

/* Logo i název jsou jeden odkaz na úvodní stránku — bez hover efektu. */
.navbar .navbar-brand {
  max-width:45%;
  padding-left:1rem;
  font-size:1rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}

.navbar .navbar-brand,
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color:#fff;
  text-decoration:none;
}

.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) {
  /* Dlaždice musí vyplnit celou výšku hlavičky. Původní web měl hlavičku
     vysokou přesně jako položka menu; tady ji roztahuje logo školy, takže bez
     tohohle zbyde nad dlaždicemi a pod nimi pruh tmavě modré / červené. */
  .navbar > .container {
    align-items:stretch;
  }
  .navbar .navbar-collapse,
  .navbar .navbar-nav > li {
    display:flex;
    align-items:stretch;
  }
  .navbar .navbar-nav > li > a {
    display:flex;
    align-items:center;
  }
  .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;
  /* Bootstrap dává top:100% jen s atributem data-bs-popper, který nastavuje jeho
     JS. Tohle menu se otevírá přes CSS :hover, takže popper nikdy neproběhne a
     top zůstane auto — u položky s display:flex by se rozbalovačka vykreslila
     přes samotnou položku, na horní hraně hlavičky. */
  top:100%;
  z-index:1;
  background-color:#fff;
  border:0;
  min-width:250px;
  /* Menu je `ms-auto`, takže i prostřední položky sedí u pravého okraje —
     rozbalovačka (min-width:250px) by s `left:0` vyjela ven z viewportu
     o 45–139 px podle šířky. Kotvi ji proto k pravé hraně položky a rozbaluj
     doleva: platí to nezávisle na počtu položek (`home_page.menu` je
     StreamField, redaktor je přidává). Nejtěsnější je 768 px, kde první
     rozbalovačce zbývá vlevo ještě 86 px. Na mobilu je `position:initial`
     a `width:100%`, takže se tam left/right neuplatní. */
  left:auto;
  right: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);
}

/* Dlaždice menu jsou tlačítka — podtržení na hover ne. */
.navbar .navbar-nav a:hover {
  text-decoration:none;
}

.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:5px;
  }
  /* 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;
    padding-left: 0;
    margin-right: 0;
  }
  .navbar .navbar-toggler {
    margin-left:auto;
  }
  /* Flex položky mají `min-width:auto`, takže se nesmrsknou pod min-content
     svého obsahu. Bez `min-width:0` drží rozbalené menu šířku nejdelší
     položky. */
  .navbar .navbar-collapse,
  .navbar .navbar-nav,
  .navbar .navbar-nav > li {
    min-width:0;
  }
  .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;
  }
  /* Bootstrap dává `.dropdown-item { white-space:nowrap }`. Dlouhé položky
     („DofE - Mezinárodní cena vévody z Edinburghu“) tím drží rozbalenému menu
     spodní hranici 364 px, takže pod ~400 px displeje hlavička přeteče. */
  .navbar .navbar-nav li.dropdown .dropdown-menu a {
    white-space:normal;
  }
}

.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 {
  /* Vytáhni karusel do krajů sloupce — přesně o půl gutteru Bootstrapu
     (12 px), ne o 15 px jako v BS3, jinak přeteče o 3 px na každou stranu. */
  margin:0 calc(var(--bs-gutter-x) * -.5);
  margin-bottom:2rem;
}

#carousel .article {
  position:relative;
}

#carousel .article picture {
  display:block;
}

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

/* --- 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;
  }
  /* Samotné zrušení odsazení nestačí — widget má pevných 304 px a nejde
     zmenšit atributem, takže na 320px displeji pořád přeteče. Zmenši ho
     transformem (do scrollable overflow se počítá až transformovaný box) a
     sraž i výšku, ať po něm nezbude mezera. */
  .contact-form .g-recaptcha {
    transform:scale(.82);
    transform-origin:0 0;
    height:64px;
  }
}

#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 .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%;
}

/* Názvy příloh a odkazy typu `pravidla_pro_psani_seminarnich_praci_na_dg.doc`
   jsou jedno nezalomitelné slovo a na mobilu vyjedou ze sloupce. */
.page-content,
.sidebar {
  overflow-wrap:break-word;
}

.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;
}

/* Nadpis sekce (Vedení / Učitelé) na stránce učitelů. */
h2.teacher-group {
  margin-top:2rem;
  margin-bottom:1rem;
  padding-bottom:.3rem;
  border-bottom:solid 2px #c44d58;
}

h2.teacher-group:first-of-type {
  margin-top:1rem;
}

.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;
}

/* --- Vložená média (video, Prezentace Google) --- */
.block-media-figure { margin: 1.5rem 0; }
/* Volba "Velikost" v bloku; hodnota = max. šířka, nikdy víc než šířka obsahu. */
.media-size-sm { max-width: 480px; }
.media-size-md { max-width: 720px; }
.media-size-lg { max-width: 960px; }
.media-size-full { max-width: 100%; }
/* Video vložené přímo do textu (Draftail „Embed"). oEmbed vrací pevné rozměry —
   uložené embedy mají 200×113 px — a nastavení velikosti u takového videa
   Draftail neumí uložit, takže se šířka řeší tady, plošně. Cíleně jen na
   přehrávače: iframe Google formuláře apod. musí zůstat ve své velikosti. */
.page-content iframe[src*="youtube"],
.page-content iframe[src*="youtu.be"],
.page-content iframe[src*="player.vimeo.com"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
/* Uvnitř bloku poměr drží obal (.ratio), iframe jen vyplní plochu. Selektor je
   záměrně stejně specifický jako pravidlo výše a stojí za ním, aby přebil. */
.page-content .block-media iframe,
.page-content .block-media object,
.page-content .block-media embed {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}
.block-media-caption {
  margin-top: .5rem;
  font-size: .9rem;
  color: #6c757d;
  text-align: center;
}

/* Wagtail obaluje oEmbed do .responsive-object s padding-bottom (starý trik na
   poměr stran). Bez těchto pravidel by se iframe vykreslil v pevné velikosti od
   poskytovatele (typicky 480 px) a zbytek plochy zůstal prázdný. */
.page-content .responsive-object {
  position: relative;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.page-content .responsive-object iframe,
.page-content .responsive-object object,
.page-content .responsive-object embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Uvnitř .ratio už poměr řeší Bootstrap — padding-bottom by ho zdvojil. */
.block-media .responsive-object {
  position: static;
  height: 100%;
  padding-bottom: 0 !important;
}

/* --- Karty s odkazy (partneři, granty) --- */
.link-cards-heading { margin-bottom: 1.25rem; }
.link-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.link-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 1.25rem;
  background: #fff;
}
.link-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  margin-bottom: 1rem;
}
.link-card-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.link-card-title {
  font-size: 1.15rem;
  margin: 0 0 .5rem;
}
.link-card-text {
  font-size: .95rem;
  color: #444;
}
.link-card-text p:last-child { margin-bottom: 0; }