/* v10.24.10 Frontpage Repair
   ------------------------------------------------------------
   What this file does (CSS-only, safe):
   1) Sidebar width forced to 240px (from 320px)
   2) Listings grid forced to 4 columns w/ responsive breakpoints
   3) Hover overlay restored via pseudo-elements (no injected markup)

   IMPORTANT:
   - Class names vary across themes/plugins. The selectors below include a few common variants.
   - If your site uses different selectors, add them to the selector lists (comma-separated).
*/

:root{
  --rm-sidebar-width: 240px;
  --rm-grid-gap: 16px;

  /* Hover overlay */
  --rm-overlay-bg: rgba(0,0,0,.38);
  --rm-overlay-icon: "View";
  --rm-overlay-radius: 10px;
}

/* ------------------------------------------------------------
   1) Sidebar width: force 240px
   ------------------------------------------------------------ */

.rm-sidebar,
.rm__sidebar,
.rm-side-panel,
.listings-sidebar,
.sidebar--listings,
.sidebar.sidebar--listings{
  width: var(--rm-sidebar-width) !important;
  flex: 0 0 var(--rm-sidebar-width) !important;
  max-width: var(--rm-sidebar-width) !important;
}

/* If the layout uses CSS grid for the main shell, this helps too. */
.rm-layout,
.rm__layout,
.listings-layout,
.frontpage-layout{
  /* No-op unless the container is a grid; harmless otherwise. */
  grid-template-columns: var(--rm-sidebar-width) 1fr !important;
}

/* ------------------------------------------------------------
   2) Listings grid: 4 columns + clean responsive breakpoints
   ------------------------------------------------------------ */

.rm-listings-grid,
.rm__listings-grid,
.listings-grid,
.frontpage-listings-grid,
.archive .listings-grid,
.page .listings-grid{
  display: grid !important;
  gap: var(--rm-grid-gap) !important;
  align-items: stretch;
}

/* Desktop: 4 columns */
@media (min-width: 1200px){
  .rm-listings-grid,
  .rm__listings-grid,
  .listings-grid,
  .frontpage-listings-grid,
  .archive .listings-grid,
  .page .listings-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Large tablets: 3 columns */
@media (min-width: 992px) and (max-width: 1199.98px){
  .rm-listings-grid,
  .rm__listings-grid,
  .listings-grid,
  .frontpage-listings-grid,
  .archive .listings-grid,
  .page .listings-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Small tablets: 2 columns */
@media (min-width: 768px) and (max-width: 991.98px){
  .rm-listings-grid,
  .rm__listings-grid,
  .listings-grid,
  .frontpage-listings-grid,
  .archive .listings-grid,
  .page .listings-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phones: 1 column */
@media (max-width: 767.98px){
  .rm-listings-grid,
  .rm__listings-grid,
  .listings-grid,
  .frontpage-listings-grid,
  .archive .listings-grid,
  .page .listings-grid{
    grid-template-columns: 1fr !important;
  }

  /* On narrow screens, let the sidebar breathe (many themes already stack it). */
  .rm-sidebar,
  .rm__sidebar,
  .rm-side-panel,
  .listings-sidebar,
  .sidebar--listings,
  .sidebar.sidebar--listings{
    width: 100% !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------
   3) Hover overlay: CSS-only, layout-safe
   ------------------------------------------------------------
   Targets common card/image wrappers; if your markup differs,
   add your selectors to these blocks.
*/

/* Make the card media area a positioning context */
.rm-listing-card,
.rm__listing-card,
.listing-card,
.listings-grid .card,
.listings-grid article{
  position: relative;
}

/* Ensure images behave */
.rm-listing-card img,
.rm__listing-card img,
.listing-card img,
.listings-grid .card img,
.listings-grid article img{
  display: block;
  width: 100%;
  height: auto;
}

/* Apply overlay on hover to links/media wrappers */
.rm-listing-card a,
.rm__listing-card a,
.listing-card a,
.listings-grid .card a,
.listings-grid article a{
  position: relative;
  display: block;
  border-radius: var(--rm-overlay-radius);
  overflow: hidden; /* keeps overlay clipped */
}

/* The overlay layer */
.rm-listing-card a::after,
.rm__listing-card a::after,
.listing-card a::after,
.listings-grid .card a::after,
.listings-grid article a::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rm-overlay-bg);
  opacity: 0;
  transition: opacity 160ms ease-in-out;
  pointer-events: none;
}

/* Optional centered label */
.rm-listing-card a::before,
.rm__listing-card a::before,
.listing-card a::before,
.listings-grid .card a::before,
.listings-grid article a::before{
  content: var(--rm-overlay-icon);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity 160ms ease-in-out;
  pointer-events: none;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: rgba(0,0,0,.86);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Trigger */
.rm-listing-card a:hover::after,
.rm__listing-card a:hover::after,
.listing-card a:hover::after,
.listings-grid .card a:hover::after,
.listings-grid article a:hover::after{
  opacity: 1;
}

.rm-listing-card a:hover::before,
.rm__listing-card a:hover::before,
.listing-card a:hover::before,
.listings-grid .card a:hover::before,
.listings-grid article a:hover::before{
  opacity: 1;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .rm-listing-card a::after,
  .rm__listing-card a::after,
  .listing-card a::after,
  .listings-grid .card a::after,
  .listings-grid article a::after,
  .rm-listing-card a::before,
  .rm__listing-card a::before,
  .listing-card a::before,
  .listings-grid .card a::before,
  .listings-grid article a::before{
    transition: none !important;
  }
}