/* tiledListings.css
 * Shared tile listing + search UI for Buyers Guides
 */

.tile-layout{
    /* Layout */
    --tile-gap: 20px;
    --tile-radius: 12px;

    /* Base tiles */
    --tile-bg: #ffffff;
    --tile-border-color: #e3e6eb;
    --tile-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
    --tile-shadow-hover: 0 10px 30px rgba(15, 23, 42, 0.18);
    --tile-transition-duration: 0.2s;

    /* Logos / badges inside tiles */
    --tile-logo-bg: transparent;
    --tile-badge-height: 44px;

    /* Priority listings */
    --tile-priority-bg: #fff7e0;
    --tile-priority-border: #f1c24c;
    --tile-priority-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
    --tile-priority-accent: #b38704;
    --tile-priority-link: #1f2937;
}

.tile-layout div#pgCont{
    max-width: 1200px;
}

.tile-layout /* Ensure "company all listings/spotlights banner is correctly placed */
h4.body_header.cat_header.listings_header{
    order: -5;
}

.tile-layout /* --- mobile first: stacked --- */
.listings-list{
    display: block;
}

/* --- tablet/desktop: tiling and ordering --- */
@media (min-width: 700px){
    /* outer layout: flex rows with gaps */
    .tile-layout .listings-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tile-gap);
        align-items: flex-start; /* prevent equal-height stretching */
        justify-content: center;
    }

    .tile-layout .listing-item:not(.Basic, .priority) {
        aspect-ratio: 5/4 !important;
        margin-bottom: unset;
    }
    
    /* tiles: give them a real width so we get multiple columns */
    .tile-layout .listings-list .listing-item {
        flex: 1 1 calc(49% - var(--tile-gap));
        max-width: calc(49% - var(--tile-gap));
        aspect-ratio: 4/3; /* optional: give them a uniform height */
        min-width: 283px;
        /* internal 2x2 grid */
        display: grid;
        grid-template-columns: 120px 1fr;
        grid-template-areas:
            "listing-logo-area listing-logos-area"
            "listing-details-area listing-details-area";
        gap: 10px;

        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: var(--tile-radius);
        padding: 12px;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        overflow: hidden;

        min-height: 0;
    }

    /* Tile layout may hide the root (modal-style) */
    .tile-layout .multi-listing.expanded .listing-item.multi-root {
        display: none !important;
    }
    
    .tile-layout .multi-listing.expanded .listing-item.multi-child {
        max-width: min-content;
        margin: 0;
    }

    .tile-layout .multi-children-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        justify-items: center;
    }

    .tile-layout .multi-listing.collapsed {
        margin: unset;
        padding: unset;
        cursor: pointer;

        transition: 
            box-shadow var(--tile-transition-duration) ease, 
            transform var(--tile-transition-duration) ease, 
            background-color var(--tile-transition-duration) ease;
    }

    /* internals */
    .tile-layout .listings-list .listing-logo {
        grid-area: listing-logo-area;
        margin: 0;
    }
    .tile-layout .listings-list .listing-logo img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .tile-layout .listings-list .listing-logos {
        grid-area: listing-logos-area;
        margin: 0;
        justify-self: end;
        align-self: start;
    }

    /* title (h3) can stay default; this just tightens spacing */
    .tile-layout.listings-list .listing-details > h3 {
        margin: 0;
        max-width: 238px;
    }

    /* the description body — fill remaining height, clip overflow */
    .tile-layout .listings-list .listing-details > ul {
        min-height: 0; /* CRITICAL inside grid/flex containers */
        overflow: hidden; /* hide excess text */
        margin: 0; /* optional: keep bullets without extra top gap */
        padding-left: 1.2em; /* keep bullet indent */
        word-break: break-word;
    }

    /* “View More…” pinned to the bottom row */
    .tile-layout .listings-list .listing-details > h4 {
        margin: 0.25rem 0 0; /* small spacing from text */
        align-self: end; /* right-align if the tile text is RTL/varied */
    }

    /* parent column that allows its middle to shrink/clip */
    .tile-layout .listings-list .listing-details {
        grid-area: listing-details-area;
        display: flex;
        flex-direction: column;
        min-height: 0; /* CRITICAL so children can shrink */
        padding: 0 10px;
    }

    /* make the body area flexible + clipped
   - cover common bodies (.descr, p blocks, company-contact, etc.)
   - and a safe fallback for any element that isn't the title or the h4 link */
    .tile-layout .listings-list .listing-details > .descr,
    .tile-layout .listings-list .listing-details > .company-contact,
    .tile-layout .listings-list .listing-details > .company-desc,
    .tile-layout .listings-list .listing-details > p,
    .tile-layout .listings-list .listing-details > div:not(:has(h4)):not(:has(h3)),
    .tile-layout .listings-list .listing-details > :not(h3):not(h4) {
        flex: 1 1 auto;
        min-height: 0; /* let it shrink inside the tile */
        overflow: hidden; /* clip overflow */
        word-break: break-word;
    }

    /* pin “View More…” (h4) at the bottom */
    .tile-layout .listings-list .listing-details > h4:last-child {
        margin-top: auto;
        flex: 0 0 auto;
    }

        /* Keep clipping for normal tiles */
    .tile-layout .listings-list > .listing-item {
        overflow: hidden;
    }

    /* …but NOT for multi-listing tiles that need the stack to spill out */
    .tile-layout .listings-list > .listing-item.multi-listing {
        overflow: visible;
    }

    /* Dim the background when a tile multi is open */
    /* Modal layer 'band' is 5000+ */
    .tile-layout .multi-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        cursor: pointer;
        
        opacity: 0;
        visibility: hidden;
        transition: opacity 160ms ease, visibility 0s linear 160ms;
        
        z-index: 5000;
    }

    .tile-layout .multi-overlay.visible {
        opacity: 1;
        visibility: visible;
        transition: opacity 160ms ease;
    }

    /* make sure open tiles are above the overlay */
    .tile-layout .multi-listing {
        position: relative;
        overflow: visible;
        max-width: min-content;
        min-width: calc(49% - var(--tile-gap));
        border-radius: var(--multi-radius);
        /* z-index -- don't have it */
    }
    
    /* Also the 'top card' in the 'stack' visual effect  */
    .tile-layout .multi-listing.collapsed .multi-root {
        position: relative;
        max-width: 100%;
        z-index: 1;
    }

    /* Placeholder always occupies the tile slot */
    .tile-layout .multi-listing .multi-placeholder {
        position: relative;
        aspect-ratio: 4/3;
        display: block;
        grid-column: 1 / -1;
    }
    
    .tile-layout .multi-listing.expanded {
        margin: unset;
    }

    /* -------- Pop out panel for multiple listings ----------- */
    .tile-layout .multi-listing .multi-panel {
        position: fixed;
        top: 50%;
        left: 41%;
        
        max-height: 95vh;
        max-width: min(90vw, 700px);
        overflow: auto;
        
        padding: 1.5rem;
        border-radius: var(--multi-radius);
        background: var(--multi-bg);
        box-shadow: var(--multi-shadow);
        
        z-index: 5001;
    }

    /* Panel is hidden when collapsed */
    .tile-layout .multi-listing.collapsed .multi-panel { 
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.98);
        transition: 
            visibility 0s linear 180ms,
            transform 180ms ease, 
            opacity 180ms ease;
    }
    
    /* When expanded, panel becomes modal */
    .tile-layout .multi-listing.expanded .multi-panel {
        
        
        /* transform: translate(-50%, -50%) scale(1) rotateX(0deg); */
        transform: translate(-80%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transition:
            transform 180ms ease,
            opacity 180ms ease;
    }
    
    /* Keep the in-flow tile visible but visually “inactive” when expanded */
    .tile-layout .multi-listing.expanded .multi-root {
        visibility: hidden;
        /* keeps size, prevents reflow */
        pointer-events: none;
    }
    /* "View All..." text on collapsed multi-listing tiles - Make multi's obvious */
    .tile-layout .listing-item.associate.member.multi-root:after {
        content: "View All...";
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translate(-50%, 0);
        text-align: center;
        text-shadow: 1px 1px 2px gray;   
    }

    /* Stacked card illusion behind the main tile */
    .tile-layout .multi-listing.collapsed .multi-placeholder::before,
    .tile-layout .multi-listing.collapsed .multi-placeholder::after {
        content: "";
        position: absolute;
        inset: 0;  /* same size as the wrapper */
        border-radius: var(--tile-radius, 18px);
        pointer-events: none;  /* do NOT block clicks */
        border: 1px solid #ccc;
    }

    /* middle card */
    .tile-layout .multi-listing.collapsed .multi-placeholder::before {
        transform: translate(6px, 6px);
        background: #f0f3f7;
        box-shadow: 0 2px 6px rgba(0,0,0,0.10);
        z-index: 1;
    }

    /* bottom card */
    .tile-layout .multi-listing.collapsed .multi-placeholder::after {
        transform: translate(12px, 12px);
        background: #e4e9f0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
        z-index: 0;
    } 

    
}

/* ===== Search page layout only ===== */
@media (min-width: 700px){
  /* Make the list a row of tiles */
  .tile-layout .search-listings .listings-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tile-gap);
    align-items: flex-start; /* don't stretch tiles to equal height */
    justify-content: center;
  }

  /* Header first, pagination last (full-width rows) */
  .tile-layout .search-listings .listings-list > .panel-heading, .tile-layout .search-listings .listings-list > .panel-heading.featured_title { flex: 0 0 100%; order: -10; }
  .tile-layout .search-listings .listings-list > .pagination,
  .tile-layout .search-listings .listings-list > .zoom-pagination,
  .tile-layout .search-listings .listings-list > .pagination.zoom-pagination { flex: 0 0 100%; order: 10; margin-top: 12px; max-width: 100%;}

  /* Tiles: 2 columns, no forced square ratio */
  .tile-layout .search-listings .listings-list > .listing-item {
    flex: 1 1 calc(50% - var(--tile-gap));
    max-width: calc(50% - var(--tile-gap));
    aspect-ratio: auto !important;  /* kill any square tile rule */
    overflow: hidden;                /* keep overflow inside the tile */
  }
}

.tile-layout /* ===== Pin “View More…” to the bottom of the details column ===== */
.listings-list .listing-details{
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 10px; /* keep, or remove if you don't want side padding */
}

.tile-layout /* Middle content (descr, paragraphs, etc.) fills and clips */
.listings-list .listing-details > :not(h3):not(h4){
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  word-break: break-word;
}

.tile-layout /* Bottom link stays at the bottom */
.listings-list .listing-details > h4:last-child{
  margin-top: auto;
  flex: 0 0 auto;
}

/* ---------- SEARCH RESULTS LAYOUT (safe scope) ---------- */
@media (min-width: 700px){
    .tile-layout .search-listings .listings-list{
    display:flex;
    flex-wrap:wrap;
    gap:var(--tile-gap);
    align-items:flex-start;
  }

  /* headers, summaries as full-width rows, first. Pagination is specified to be last elsewhere. */
  .tile-layout .search-listings .listings-list > :not(.listing-item){
    flex:0 0 100%;
    order:-100;
  }

  /* tiles */
  .tile-layout .search-listings .listings-list > .listing-item{
    /* choose your column count by breakpoint */
    flex:1 1 calc(50% - var(--tile-gap));         /* 2-up by default */
    max-width:calc(50% - var(--tile-gap));
    display:grid;
    grid-template-columns:140px 1fr;   /* logo | content */
    grid-template-areas:
      "logo badge"
      "details details";
    gap:10px;

    box-sizing:border-box;
    border-radius: var(--tile-radius);
    border:1px solid var(--tile-border-color);
    padding:12px;
    background:var(--tile-bg);
    box-shadow:0 2px 4px var(--tile-shadow);
    overflow:hidden;

    transition: 
        box-shadow var(--tile-transition-duration) ease,
        transform var(--tile-transition-duration) ease,
        background-color var(--tile-transition-duration) ease;
  }
}
@media (min-width: 1000px){
    .tile-layout /* 3 cols on wider screens */
  .search-listings .listings-list > .listing-item{
    flex-basis:calc(33.333% - var(--tile-gap));
    max-width:calc(33.333% - var(--tile-gap));
  }
}

.tile-layout /* Subtle hover lift */
.search-listings .listings-list > .listing-item:hover{
    transform: translateY(-2px);
    box-shadow: var(--tile-shadow-hover);
}

.tile-layout /* internal grid areas */
.search-listings .listing-logo{ grid-area:logo; margin:0; background: var(--tile-logo-bg); }

.tile-layout .search-listings .listing-logo img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;          /* tidy logo box; remove if you prefer */
  object-fit:contain;
  display: block; /* |X| */
}
.tile-layout .search-listings .listing-logos{
  grid-area:badge;
  margin:0;
  justify-self:end;
  align-self:start;
}
.tile-layout .search-listings .listing-logos img{ height:var(--tile-badge-height); width:auto; }

.tile-layout /* details column: title | flexible body | footer */
.search-listings .listing-details{
  grid-area:details;
  display:flex;
  flex-direction:column;
  min-height:0;               /* lets middle content shrink */
  padding:0 10px;
}
.tile-layout .search-listings .listing-details .company-name{ margin:0 0 6px; }
.tile-layout .search-listings .listing-details .company-name a{ font-weight:600; }

.tile-layout /* body text area fills remaining height and clips overflow */
.search-listings .listing-details  > :not(h3):not(h4){ /* or '.descr'  |X| */
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  word-break:break-word;
}

.tile-layout /* pin “View More…” even when it is inside <b> within .descr */
.search-listings .listing-details .descr b:last-child{
  display:block;
  margin-top:auto;
}
.tile-layout .search-listings .listing-details .descr b:last-child a{
  display:inline-block;
}

.tile-layout /* fallback: if some results render “View More…” as an h4 sibling */
.search-listings .listing-details > h4{
  margin-top:auto;
}

.tile-layout /* Priority listings have a soft golden background
golden left border, .tile-layout floating shadow, .tile-layout and a bit of
hovering flair */
.result_block.listing-item.priority, .tile-layout .listing-item.priority{
  background-color: var(--tile-priority-bg);  /* #f9f1e2; */
  border-left: 6px solid var(--tile-priority-border); /* #d4af37; */
  box-shadow: 0 8px 24px var(--tile-priority-shadow); /* rgba(0, 0, 0, 0.4); */
  position: relative;
  order: -1; /* float priority tiles to the top of the tile list; shouldn't be needed? |X| */ 
  
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* |X| ? */
}

.tile-layout .result_block.listing-item.priority:hover, .tile-layout .listing-item.priority:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--tile-priority-shadow); /* rgba(0, 0, 0, 0.5); */
}
.tile-layout .result_block.listing-item.priority:hover a.listing-click.ga4click, .tile-layout .listing-item.priority:hover a.listing-click.ga4click{
  animation: pulse-once 0.7s ease-out;
  transform-origin: center;
}

.tile-layout .result_block.listing-item{
    min-height: 240px; /* Fallback for older browsers or simple use cases */
    min-height: -webkit-fill-available; /* For WebKit-based browsers like Chrome and Safari */
    min-height: stretch; /* The modern, standard keyword */
}

.tile-layout .result_block .descr-text{
    display: none;
}

.tile-layout a.listing-click.ga4click{
  transition: transform 0.3s ease, color 0.3s ease;
}

.tile-layout /* A 'feathering' gradient blending for logos and 'member' badges */
.spot-prod.case-item .listing-logo img, .tile-layout .priority .listing-logo img, .tile-layout .priority .member-logo img{
  background: white;
  border-radius: 4px;
  box-shadow: 0 0 var(--tile-gap) 6px white, 0 0 12px 8px var(--tile-priority-bg) inset; /* #f9f1e2 */
}

@keyframes pulse-once{
    0%   { transform: scale(1);  }
    50%  { transform: scale(1.1);}
    100% { transform: scale(1);  }
}

.tile-layout .multi-listing.collapsed .multi-placeholder::before, .tile-layout .multi-listing.collapsed .multi-placeholder::after{
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

@media (hover:hover) and (pointer:fine){
    .tile-layout .multi-listing.collapsed:hover .multi-placeholder::before{
        transform: translate(4px, 4px);
    }

    .tile-layout .multi-listing.collapsed:hover .multi-placeholder::after{
        transform: translate(8px, 8px);
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }
}


@media (prefers-reduced-motion: reduce){
    .tile-layout *{
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}

.tile-layout /* Disable the non-tile layout toggle row */
.multi-toggle-row{
    display: none;
}

/* DEBUG STACKS */
/* 
.tile-layout .multi-listing.collapsed .multi-placeholder::before{
    border: 2px solid red;
}

.tile-layout .multi-listing.collapsed .multi-placeholder{
    border: 2px solid blue;
}

.tile-layout .multi-listing.collapsed .multi-placeholder::after{
    border: 2px solid orange;
} */