/* =====================================================================
   TABLET LAYER - iPad and the like, 768px to 1199.98px wide
   =====================================================================

   Loaded after mobile.css, and every rule below sits inside a media query
   that stops at 1199.98px and starts at 768px. Below 768px the phone layer
   is what draws the page; from 1200px up the desktop stylesheets do. Neither
   of them computes any differently for this file being here.

   What the range needs is not a third design but the desktop layout kept
   where it still fits and folded where it does not: the product photos next
   to the buying column instead of stacked into a page four screens long, a
   filter column wide enough to read, two product cards a row instead of
   three crushed ones.
   ===================================================================== */

/* ---- The whole range ---------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Product detail: tighter tiles, so two of anything fit beside each other. */
  .detail-page .detail-media,
  .detail-page .detail-info { gap: 20px; }
  .detail-page.product-configurator .detail-gallery { gap: 16px; }
  .detail-main-media,
  .detail-page.product-configurator .detail-gallery .detail-thumb {
    padding: 16px;
    border-radius: 20px;
  }
  /* One field a row: the column the configurator gets here is half a page. */
  .detail-configurator-fields { grid-template-columns: minmax(0, 1fr); }

  /* The "Společnost DVERKO" band: the photo tile need not be a screen tall. */
  .about-bento-cell--story { min-height: 380px; }
}

/* ---- Landscape tablets and the 12.9" iPad upright: 992-1199 ------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Photos beside the buying column, as on the desktop, only closer. */
  .detail-product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }

  /*
    Listing: the filter column is a quarter of the page on the desktop, which
    at 1024px is 210px - the colour tiles wrapped one to a line and the labels
    broke mid-word. A third of the page reads; the cards take the rest two
    a row, which is what their buttons need to stay on one line.
  */
  .mobile-filter-sidebar-column { flex: 0 0 auto; width: 33.333333%; }
  .row > .col-lg-9 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 .listing-card-col { flex: 0 0 auto; width: 50%; }

  /*
    The listing hero is three columns on the desktop - copy, mascot, tips -
    with the outer two at fixed widths that add up to more than this page is
    wide. The middle column went to nothing and the mascot stood on the
    intro. Two columns here, the mascot at a size that fits, and the tips
    (where a category has any) on a row of their own beneath.
  */
  .listing-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
    padding: 40px 48px;
  }
  /* The mascot is taken out of the flow and pinned to the panel's right
     end; the copy keeps that end clear so the two never meet. */
  .listing-hero > .listing-hero-visual { width: 0; height: 0; }
  .listing-hero > .listing-hero-visual img {
    position: absolute;
    inset: auto 24px 0 auto;
    left: auto;
    top: auto;
    height: 260px;
    width: auto;
    transform: scaleX(-1);
  }
  .listing-hero-copy,
  .listing-hero-tips { padding-right: 240px; }
}

/* ---- Upright tablets: 768-991 -------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  /*
    Product detail. The desktop stacks the photo column over the buying column
    at this width, which is right - but the photo column then draws the main
    photo the full width of the page and the thumbnails at half of it, four
    tiles each a screen tall. Main photo and thumbnails side by side instead,
    the thumbnails two a row at a quarter of the width.
  */
  .detail-page .detail-media {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: 16px;
  }
  .detail-page.product-configurator .detail-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The bento band: the tiles pair up in rows rather than each taking a line. */
  .about-bento-row { flex-direction: row; }
  .about-bento-row > .about-bento-cell { flex: 1 1 0; }
}