/* ==========================================================================
   iVendNext Help Portal - home page category tiles
   --------------------------------------------------------------------------
   The two custom tiles ("iVendNext Documentation" and "Support Tickets") live
   in a custom widget (.widget-row) that Zoho renders as its own widget row
   underneath the native Knowledge Base category widget. The rules below let
   that custom row flow into the native grid, so the home page reads as one
   single grid: 3 x 2 on desktop, 2 x 3 on tablet, 1 column on mobile.

   Every size below is copied from Zoho's own .TitleContainer__container
   rules (widgets.css) so the custom tiles stay pixel identical to the
   native ones and follow the same breakpoints:
     >= 992px    width 31.5%   gutter 2.75%   bottom 2.75%   -> 3 per row
     620-991px   width 49%     gutter 2%      bottom 2%      -> 2 per row
     <  620px    width 100%    gutter 0                      -> 1 per row
     <  450px                                 bottom 5%
   ========================================================================== */

/* --- 1. Make the custom row behave exactly like the native grid ---------- */

.widget-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0;
}

/* Drop the 1.6rem gap Zoho puts between stacked widgets, so the space above
   the custom tiles comes from the tile margins alone and matches the space
   between the native rows. */
li.WidgetsContainer__lftWd:has(.widget-row) {
  margin-top: 0;
}

/* --- 2. Desktop: 3 columns ----------------------------------------------- */

.widget-row > .TitleContainer__container {
  width: 31.5%;
  margin: 0 0 2.75% 2.75%;
}

.widget-row > .TitleContainer__container:first-child {
  margin-left: 0;
}

/* --- 3. Lift the custom row into the native grid's last row -------------- */

/* 16.25rem is Zoho's own .TitleContainer__container min-height and 2.75% its
   margin-bottom, so the offset is exactly one tile row high. The first custom
   tile is then indented by one whole column (31.5% + 2.75% gutter = 34.25%)
   so it lands next to "Support Knowledge Base".

   The :has() guard keeps this safe: it only applies while
     a) the widget directly above really is the category GRID view, so the
        layout falls back to a normal row when a visitor switches to list
        view, and
     b) that grid holds exactly 4 tiles, i.e. the last row genuinely has two
        empty columns. Add or remove a knowledge base category and these two
        rules simply stop applying instead of overlapping anything. */

@media (min-width: 992px) {
  li.WidgetsContainer__lftWd:has(> .ModuleCategoryContainer__gridView > .TitleContainer__container:nth-child(4):last-child) + li.WidgetsContainer__lftWd:has(.widget-row) {
    margin-top: calc(-16.25rem - 2.75%);
  }

  li.WidgetsContainer__lftWd:has(> .ModuleCategoryContainer__gridView > .TitleContainer__container:nth-child(4):last-child) + li.WidgetsContainer__lftWd .widget-row > .TitleContainer__container:first-child {
    margin-left: 34.25%;
  }
}

/* --- 4. Mobile: 1 column -------------------------------------------------- */

/* Declared before the tablet block, mirroring the order of Zoho's own
   stylesheet, so the tablet rule below wins between 620px and 768px. */

@media (max-width: 768px) {
  .widget-row > .TitleContainer__container {
    width: 100%;
    margin-left: 0;
  }
}

/* --- 5. Tablet: 2 columns ------------------------------------------------- */

@media (max-width: 991px) and (min-width: 620px) {
  .widget-row > .TitleContainer__container {
    width: 49%;
    margin-bottom: 2%;
  }

  .widget-row > .TitleContainer__container + .TitleContainer__container {
    margin-left: 2%;
  }

  .widget-row > .TitleContainer__container:first-child {
    margin-left: 0;
  }

  /* Zoho bug fix: their base rule ".TitleContainer__container:nth-child(3n) +
     .TitleContainer__container { margin-left: 0 }" is more specific than the
     2 column gutter rule inside their own tablet media query, so the 4th
     native tile loses its left gutter and touches the 3rd one. The two rules
     below restore correct 2 column gutters for any number of tiles. */

  .ModuleCategoryContainer__gridView > .TitleContainer__container:nth-child(3n) + .TitleContainer__container {
    margin-left: 2%;
  }

  .ModuleCategoryContainer__gridView > .TitleContainer__container:nth-child(2n) + .TitleContainer__container {
    margin-left: 0;
  }
}

/* --- 6. Small phones ------------------------------------------------------ */

@media (max-width: 450px) {
  .widget-row > .TitleContainer__container {
    margin-bottom: 5%;
  }
}