/* Mobile and tablet fixes for the static deesigns.ca site (RCC Graphic Designs).
   Loaded after the theme's own stylesheets on every page. */

/* 1. Background: always fill the screen, any size or orientation.
      The theme's custom CSS used "contain" on phones/tablets, which left plain red
      bands at the sides in landscape. A fixed layer behind the page also works on
      iOS Safari, which ignores background-attachment: fixed. */
html { background: #CE1F26; }
#dsi-main, .responsive #dsi-main { background: transparent !important; }
#dsi-main::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: #CE1F26 url('images/page.jpeg') center top / cover no-repeat;
}

/* 2. Homepage category grid: labels under the photos, 3 across on tablets,
      2 across on phones. Tied to the theme's own phone/tablet modes (classes its
      script adds to <html>), with width media queries as a fallback for the
      moment before that script runs. */
html.responsive .dsi-content-layout-wrapper .dsi-layout-cell.layout-item-2 {
  display: block !important; width: 100% !important; float: none !important; box-sizing: border-box !important;
}
html.responsive table.dsi-article.home,
html.responsive table.dsi-article.home tbody {
  display: block !important; width: 100% !important; margin: 0 !important; box-sizing: border-box;
}
html.responsive table.dsi-article.home tbody {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px;
}
html.responsive table.dsi-article.home tr { display: contents !important; }
html.responsive table.dsi-article.home td {
  display: block !important; width: auto !important; min-width: 0; padding: 0 !important; text-align: center !important;
}
html.responsive table.dsi-article.home td:not(:has(img)) { display: none !important; }
html.responsive table.dsi-article.home a { display: block; }
html.responsive table.dsi-article.home img,
html.responsive .dsi-content-layout table.dsi-article.home img {
  width: 100% !important; min-width: 0 !important; max-width: 160px !important;
  height: auto !important; margin: 0 auto !important; display: block;
}
html.responsive table.dsi-article.home .dsi-galery-label {
  display: block !important; width: auto !important; margin-top: 4px; text-align: center;
}
html.responsive-phone table.dsi-article.home tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 899px) {
  .dsi-content-layout-wrapper .dsi-layout-cell.layout-item-2 {
    display: block !important; width: 100% !important; float: none !important; box-sizing: border-box !important;
  }
  table.dsi-article.home, table.dsi-article.home tbody { display: block !important; width: 100% !important; margin: 0 !important; }
  table.dsi-article.home tbody { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  table.dsi-article.home tr { display: contents !important; }
  table.dsi-article.home td { display: block !important; width: auto !important; min-width: 0; padding: 0 !important; text-align: center !important; }
  table.dsi-article.home td:not(:has(img)) { display: none !important; }
  table.dsi-article.home a { display: block; }
  table.dsi-article.home img { width: 100% !important; min-width: 0 !important; max-width: 160px !important; height: auto !important; margin: 0 auto !important; display: block; }
  table.dsi-article.home .dsi-galery-label { display: block !important; margin-top: 4px; }
}
@media (max-width: 599px) {
  table.dsi-article.home tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 3. Phone spacing: tighter gap between logo and menu, more room between the
      Contact button and the photo grid. */
html.responsive-phone .dsi-header {
  height: 104px !important; min-height: 0 !important;   /* was 150px; the header image is transparent below the logo */
}
html.responsive-phone .dsi-header .dsi-logo { top: 7.7px !important; }  /* keep the logo where it was; the theme script would move it */
html.responsive-phone table.dsi-article.home { margin-top: 56px !important; }