/* ============================================================
   responsive.css – responzivita + typografická revize diacel.cz
   ------------------------------------------------------------
   Pravidla jsou rozdělena do 3 sekcí:
     1) BASE – pro všechny obrazovky (typografie, čitelnost)
     2) @media max-width: 900px – tablet a menší (stackování)
     3) @media max-width: 500px – telefon (jemné dolazení)
   ============================================================ */


/* ============================================================
   1) BASE – typografická revize (platí na všech obrazovkách)
   ============================================================ */

/* Obrázky nepřesahují kontejner */
img { max-width: 100%; height: auto; }

/* Čitelnější body – trochu větší základ, lepší line-height, system fallback */


/* Hlavní obsah – optimalizovaný pro čtení */
#center h1 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  margin: 10px 0 14px !important;
  color: #222 !important;
}
#center h3 {
  font-size: 14px !important;
  line-height: 1.4 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* Odkazy v obsahu – lepší kontrast */
#center a { color: #B8390E; }
#center a:hover { color: #7a2609; }

/* Postranní sloupce – mírně větší a čitelnější */

#left_side h3, #right_side h3 {
  font-size: 12px !important;
  letter-spacing: 0.3px;
}

/* Menu – čitelnější label */
#css3menu a, #css3menu .topmenu > a {
  font-size: 13px !important;
  letter-spacing: 0.2px;
}

/* Tabulky v obsahu – nikdy nepřetečou (desktop pořád respektuje jejich šířku) */
#center img { max-width: 100%; height: auto; }

/* Scrollbar pro Firefox v #center kdyby cokoli přeteklo */
#center { scrollbar-width: thin; }


/* ============================================================
   2) TABLET + MENŠÍ (do 900 px) – stackování layoutu
   ============================================================ */
@media (max-width: 900px) {

  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /* Hlavní rámec – šířka přes celou obrazovku, bez 3-sloupcového pozadí */
  #page_wrapper {
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    min-height: 0;
  }

  /* -------- HLAVIČKA -------- */
  #page_header {
    height: auto !important;
    padding: 12px 0 0;
    text-align: center;
    position: relative;
  }
  #page_header h1 {
    position: static !important;
    padding: 4px 10px 0 0 !important;
    font-size: 12px !important;
    color: #666 !important;
    text-align: right;
    line-height: 1 !important;
    letter-spacing: 0;
  }
  #page_header h2,
  h2 {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 4px 14px 2px !important;
    padding-top: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-align: center;
    color: #4a3f1a !important;
    font-weight: 600;
  }

  /* Logo (dianapis) – menší, ať na mobilu nezabírá celou obrazovku */
  #dianapis {
    position: static !important;
    height: auto !important;
    top: 0 !important;
    text-align: center;
    padding: 8px 0 12px;
  }
  #dianapis img {
    width: 45% !important;
    max-width: 230px;
    height: auto !important;
  }

  /* Pozdrav + datum */
  #pozdrav {
    position: static !important;
    text-align: center;
    font-size: 14px !important;
    font-weight: 500;
    margin: 6px 10px 2px !important;
    color: #3a3a3a;
  }
  #datum {
    position: static !important;
    text-align: center;
    font-size: 12px !important;
    margin: 0 10px 8px !important;
    color: #777;
  }
  /* Slideshow na mobilu schovat (user intent) */
  #uvodfoto { display: none !important; }

  /* -------- HORNÍ MENU – dlaždice -------- */
  ul#css3menu.topmenu,
  ul#css3menu {
    position: static !important;
    top: 0 !important;
    left: 0 !important;
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 10px 8px !important;
    background: #f1ecd5 !important;
    border: 0 !important;
  }
  ul#css3menu.topmenu li.topmenu {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    background: transparent !important;
  }
  ul#css3menu.topmenu li.topmenu > a {
    display: block !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
    font-weight: 500;
    background: #fff !important;
    border: 1px solid #c8b97f !important;
    border-radius: 4px !important;
    color: #333 !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
    height: auto !important;
    transition: background .15s, color .15s;
  }
  ul#css3menu.topmenu li.topmenu > a:hover,
  ul#css3menu.topmenu li.topmenu > a:focus {
    background: #c00 !important;
    color: #fff !important;
    border-color: #a00 !important;
  }
  ul#css3menu ul { display: none !important; }

  /* -------- OBSAHOVÉ SLOUPCE (3 → pod sebe) -------- */
  #content_wrapper {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 12px !important;
  }
  #center     { order: 1; }
  #left_side  { order: 2; }
  #right_side { order: 3; }

  #center, #left_side, #right_side {
    float: none !important;
    width: 100% !important;
    margin: 14px 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  /* Hlavní obsah – komfortní velikost pro čtení na mobilu */
  #center {
    overflow-x: auto;
  }
  #center p, #center td, #center li {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #1a1a1a !important;
  }
  #center p {
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }
  #center h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin: 6px 0 16px !important;
    width: auto !important;
  }
  #center h3 {
    font-size: 15px !important;
    background-position: left center !important;
    padding: 8px 10px !important;
    margin: 18px 0 10px !important;
  }
  #center table { max-width: 100% !important; width: auto !important; }
  #center img  { max-width: 100%; height: auto; display: block; margin: 10px auto; }

  /* Rámečky úvodní stránky (#ram...#ram5) – pryč s fixními šířkami */
  #ram, #ram2, #ram3, #ram4, #ram5 {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 12px !important;
    letter-spacing: 0 !important;
    font-size: 17px !important;
    background-image: none !important;
    box-sizing: border-box;
  }
  #ram { background: #FBF9EC !important; border: 1px solid #d4c994; border-radius: 4px; }
  #ram2 { font-size: 15px !important; }

  /* -------- FOTOGALERIE -------- */
  #galram {
    width: auto !important;
    max-width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 6px 0 !important;
  }
  #galram > p#linklist {
    flex: 0 0 100%;
    font-size: 17px !important;
    margin: 10px 0 !important;
    text-align: left;
  }
  p#galerie {
    float: none !important;
    width: calc(50% - 10px) !important;
    max-width: 180px;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 4px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }
  p#galerie img {
    width: 100% !important;
    height: auto !important;
    max-width: 150px;
  }

  /* Tabulky s HTML atributem width – zmenšit písmo */
  #center table[width],
  #ram2 table, #ram3 table, #ram4 table, #ram5 table {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
  }
  #center table[width] td,
  #ram2 table td {
    width: auto !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 6px !important;
  }

  /* -------- BOČNÍ SLOUPCE – karty -------- */
  #left_side, #right_side {
    background: #fffaf0;
    border: 1px solid #e3d9b7;
    border-radius: 6px;
    padding: 12px 14px !important;
  }
  #left_side h3, #right_side h3 {
    background: #f1ecd5 !important;
    border: 1px solid #c8b97f !important;
    border-radius: 4px !important;
    margin: 10px -6px 8px !important;
    padding: 8px 12px !important;
    height: auto !important;
    font-size: 14px !important;
    text-align: left !important;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  #left_side h3:first-of-type,
  #right_side h3:first-of-type { margin-top: 2px !important; }
  #left_side p, #right_side p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 6px 0 12px !important;
  }
  #right_side img { margin: 6px auto; display: block; }

  /* Vyhledávací pole v levém sloupci – přes celou šířku */
  #left_side form {
    display: flex;
    gap: 6px;
    margin-bottom: 14px !important;
  }
  #left_side form input[type=text] {
    flex: 1;
    width: auto !important;
    font-size: 15px !important;
    padding: 9px 11px !important;
  }
  #left_side form input[type=submit] {
    font-size: 16px !important;
    padding: 9px 16px !important;
  }

  /* -------- PATIČKA -------- */
  #page_footer {
    height: auto !important;
    margin-top: 24px !important;
    padding: 14px !important;
  }
  #page_footer p { font-size: 12px !important; line-height: 1.45 !important; }

  /* Lightbox */
  #lightbox, #overlay { max-width: 100% !important; }
}


/* ============================================================
   3) TELEFON (do 500 px) – jemné dolazení
   ============================================================ */
@media (max-width: 500px) {

  #page_header h1 { display: none !important; }
  #page_header h2 {
    font-size: 12px !important;
    margin: 4px 12px !important;
    line-height: 1.3 !important;
  }
  #dianapis { padding: 4px 0 10px; }
  #dianapis img { width: 60% !important; max-width: 210px; }

  #pozdrav { font-size: 13px !important; margin-top: 4px !important; }
  #datum   { font-size: 11px !important; }

  ul#css3menu.topmenu { padding: 8px 6px !important; gap: 5px; }
  ul#css3menu.topmenu li.topmenu > a {
    padding: 8px 11px !important;
    font-size: 13px !important;
  }

  /* Pořád komfortní pro čtení – NE 11px! */
  #center p, #center td, #center li {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  #center h1 { font-size: 21px !important; }
  #center h3 { font-size: 14px !important; }

  #ram, #ram2, #ram3, #ram4, #ram5 { font-size: 15px !important; padding: 8px 10px !important; }

  #left_side, #right_side { padding: 10px 12px !important; }
  #left_side p, #right_side p { font-size: 14px !important; }

  /* Pravý sloupec – obrázky patronů trochu menší */
  #right_side img { max-width: 65%; }
}