/*
 * responsive.css — AIT-126 Vlna B, mobile-first responsive layer.
 * Loaded AFTER zivotopis.css; only overrides the legacy 990px fixed-grid
 * layout on tablet/phone widths. Desktop (>=1024px) is untouched.
 * Generator (generator/*) has its own header/viewport and is NOT affected.
 */

/* ---- Global hardening (all widths) ---- */
img { max-width: 100%; height: auto; }

/* AIT-200 Vlna B(3): responsive_pic() balí <img> do <picture>. Descendant
   selektory (#slider img, #bubbles ...) i tak matchují vnitřní <img>. Slider
   slidy musí být blokové, aby je jQuery.cycle změřil stejně jako původní <img>. */
#slider picture { display: block; }

/* =====================================================================
   Tablet and below
   ===================================================================== */
@media only screen and (max-width: 1023px) {

  /* Fluid main containers (were fixed 956-990px) */
  #top,
  #main,
  #aboutwrapper,
  #tip,
  #content .tretinywrapper,
  #content .tretiny,
  #faces,
  #ftr,
  #dobraprace {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #top { padding: 12px 15px 0; position: static; }
  #main { padding: 0 15px; }

  /* ---- Header / navigation ---- */
  #menu {
    height: auto;
    line-height: 1.4;
    padding: 10px 12px;
    text-align: center;
  }
  #logo { float: none; display: inline-block; padding: 4px 0 10px; }
  #menu ul {
    float: none;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 4px;
  }
  #menu li { float: none; margin: 0; }
  #menu li a { height: auto; line-height: 1.6; padding: 6px 10px; display: block; }

  /* Decorative / desktop-only chrome -> static or hidden */
  #socialicons { position: static; height: auto; text-align: center; margin: 4px 0; }
  #socialicons a { float: none; }
  #topwrapper #func { position: static; height: auto; text-align: center; margin: 6px 0 0; }
  #topwrapper a.smallbutton { float: none; margin: 0 0 8px; }
  #topwrapper .facebook { float: none; display: inline-block; }
  #langs { position: static; display: inline-block; margin: 4px auto; }

  /* ---- Hero (homepage) ---- */
  #topwrapper,
  .hp #topwrapper,
  #topwrapper2,
  .hp #topwrapper2 {
    height: auto;
    background: #eaf4fb none;
  }
  #topwrapper3 { height: auto; background: #f6f6f6 none; }

  #aboutwrapper {
    background: none;
    padding: 24px 15px;
  }
  #about { float: none; width: auto; }
  #about p { padding: 0 0 24px; }
  #about h1, #about .h1, #about h1 a, #about .h1 a {
    font-size: 32px;
    margin: 0 0 24px;
  }

  /* Template slider -> centered fluid block */
  #sliderwrapper {
    position: static;
    width: 100%;
    max-width: 329px;
    height: auto;
    margin: 0 auto 20px;
  }
  #slider { width: 100%; height: auto; }
  #slider img { width: 100%; height: auto; }
  #sliderwrapper #sprev, #sliderwrapper #snext { top: 40%; }
  #pager { display: none; }

  /* ---- Tip strip ---- */
  #tip {
    width: auto;
    height: auto;
    padding: 18px 15px;
  }

  /* ---- Subpage CTA bar ---- */
  #subpage { height: auto; background: none; text-align: center; padding: 12px 0; }
  #subpage a.bigbutton { position: static; display: inline-block; right: auto; top: auto; }

  /* ---- Content ---- */
  #content { padding: 22px 0 16px; }
  .hp #content p { padding-left: 0; padding-right: 0; }

  #content .tretiny { margin: 0; }
  #content .tretina { float: none; width: auto; margin: 0 0 22px; min-height: 0; }
  #content .box .pul { float: none; width: auto; padding-right: 0; }

  /* Wide tables scroll instead of overflowing */
  #content table {
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Forms (contact, overlay) usable on mobile ---- */
  input.text, textarea, select {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    box-sizing: border-box;
  }
  input.small, input.smallest, input.file, input.longer { width: auto; }
  label { float: none; display: block; width: auto; margin-right: 0; }

  /* ---- Homepage "bubbles" tiles (4x 194px floats, 948px row) ---- */
  #bubbles {
    width: auto !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 0;
  }
  #bubbles a.bubble { float: none; margin: 0; }

  /* ---- Testimonials (absolutely-positioned boxes) -> stacked ---- */
  #faceswrapper { height: auto; background: none; }
  #faces { height: auto; background: none; padding: 0; }
  #faces .box,
  #faces .box1, #faces .box2, #faces .box3 {
    position: static;
    display: block;
    width: auto !important;
    height: auto !important;
    left: auto; right: auto; top: auto; bottom: auto;
    margin: 0 0 12px;
    padding: 20px 24px;
    background-image: none;
  }
  #faces .box3 .count, #faces .box3 .right { text-align: left; }

  /* ---- "Dobra prace" footer promo ---- */
  #praclogo, #pracovninabidky {
    float: none;
    width: auto;
    padding: 0 0 16px;
    border-left: none;
  }
  #praclogo a { margin-top: 0; }
  #dobraprace a.banner { float: none; display: inline-block; margin-top: 12px; }

  /* ---- Footer ---- */
  #footer { padding: 28px 15px 0; }
  #ftr, #ftr2 { width: auto; }
}

/* =====================================================================
   Phone
   ===================================================================== */
@media only screen and (max-width: 600px) {
  body { font-size: 14px; }
  .h1, h1, h2, h3, h4 { font-size: 26px; }
  h2 { font-size: 21px; }
  h3 { font-size: 18px; }
  #about h1, #about .h1, #about h1 a, #about .h1 a { font-size: 26px; }

  a.bigbutton {
    font-size: 16px;
    height: auto;
    line-height: 1.3;
    white-space: normal;
    padding: 16px 22px;
    background: #ff8314;
    border-radius: 5px;
    box-shadow: 0 3px 0 #cf6100, 0 2px 5px rgba(0,0,0,0.4);
  }
  a.bigbutton:hover { background: #ff8314; }

  #menu li a { font-size: 12px; padding: 5px 8px; }
}