/* ==========================================================================
   e-tza.gr custom CSS  (auto-loaded by Journal3 via document.php)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Uniform category banner / description images
   Forces every image inside a category description to the same display height,
   regardless of the original file size. The whole image stays visible
   (no cropping) and is centered. Wide banners and tall photos all line up.
   -------------------------------------------------------------------------- */
#content .category-text img {
  display: block;
  height: 300px;          /* same height everywhere */
  width: auto;            /* keep aspect ratio */
  max-width: 100%;        /* never overflow the content column */
  object-fit: contain;    /* show the full image, no cropping */
  margin: 0 auto 15px;    /* center + spacing below */
}

/* Tablet */
@media (max-width: 991px) {
  #content .category-text img {
    height: 220px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  #content .category-text img {
    height: 150px;
  }
}

/* --------------------------------------------------------------------------
   Desktop main-menu dropdowns: wrap subcategory columns to the next ROW
   instead of scrolling horizontally.

   Why: Journal's JS lays the dropdown out with CSS multi-column and a FIXED
   height (inline style: column-count:4; height:<px>; column-fill:auto). That
   algorithm is height-driven, so when a single subcategory list is taller than
   the computed column height (e.g. a category with many children), the column
   widens / spills sideways and the panel (overflow-x:auto) gets a horizontal
   scrollbar plus a stray "headerless" overflow column.

   Fix: override that inline multi-column with a fixed-width GRID whose columns
   wrap downward, and force the panel to scroll vertically only. Each top-level
   subcategory stays whole (break-inside:avoid) under its own header.
   Width-independent: more columns fit on wide menus, fewer on narrow ones.
   Pure CSS — no OCMOD / no JS changes.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  /* Panel: never sideways, only vertical scroll, capped to the viewport */
  .desktop-main-menu-wrapper .main-menu > .j-menu > .menu-item.dropdown > .j-dropdown {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 160px);
  }

  /* Replace the JS multi-column with a wrapping grid of 220px columns */
  .desktop-main-menu-wrapper .main-menu > .j-menu > .menu-item.dropdown > .j-dropdown > .j-menu {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 220px) !important;
    align-content: flex-start !important;
    align-items: start !important;
    column-count: auto !important;   /* kill JS column-count */
    column-fill: auto !important;
    height: auto !important;          /* kill JS fixed height */
    width: auto !important;
    column-gap: 0 !important;
  }

  /* Each top-level subcategory = one whole column, never split across columns */
  .desktop-main-menu-wrapper .main-menu > .j-menu > .menu-item.dropdown > .j-dropdown > .j-menu > li {
    width: 220px !important;
    break-inside: avoid !important;
  }
}