/* ===== Section layout ===== */
.gx-tools-res-outer{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-color: var(--section-bg, #F5F5F5); /* default bg, editable */
  padding:50px 0;
}
.page-center{ position:relative; }

/* Two-column shell */
.gx-tools-res-inner{
  display:flex;
  gap:24px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.gx-tools-res-left{ flex:0 25%; min-width:260px; }
.resource-filter-data{ flex:1 1 0; min-width:320px; }

/* ===== Headings/Text ===== */
.gx-tools-res-left-heading h3{
  margin:0 0 10px 0;
  font-size:26px; 
  line-height:32px; 
  font-weight:400; 
  color: var(--heading-color, #00263E);
}
.gx-tools-res-left-sub-heading{
  color: var(--body-color, rgba(0,38,62,0.8));
}
.gx-tools-res-left-sub-heading p{ margin:0; }

/* ===== Right panel (white box) ===== */
.resource-filter-data{
  background: var(--panel-bg, #FFFFFF);
  border-radius:10px;
  padding:20px;
  box-sizing:border-box;
}

/* Tool well */
.tool-well{
  width:100%;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:10px;
  background:#fafafa;
  padding:12px;
  box-sizing:border-box;
}

/* Placeholder image */
.tool-placeholder{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;    /* default desktop shape */
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  display:flex; 
  align-items:center; 
  justify-content:center;
}
.tool-placeholder img{
  width:100%; 
  height:100%; 
  object-fit:contain;
}

/* Embeds */
.tool-embed{
  position:relative; 
  width:100%; 
  aspect-ratio: 16 / 9;
  background:#fff; 
  border-radius:8px; 
  overflow:hidden;
}
.tool-embed iframe,
.tool-embed model-viewer,
.tool-embed video{
  width:100%; 
  height:100%; 
  display:block; 
  border:0;
}

/* Empty state */
.tool-empty{
  padding:24px; 
  text-align:center; 
  color:#666;
}

/* ===== GX vector logo ===== */
.gx-vector{
  position:absolute;
  left:0;
  bottom:20px;      /* align with panel bottom on desktop */
  width:140px;      /* ~original size */
  pointer-events:none;
}
.gx-vector img{
  width:100%;
  height:auto;
  opacity:1;
}

/* ===== Responsive ===== */

/* Tablet */
/* Tablet: drop the logo below the panel too (no overlap) */
@media (max-width: 1024px){
  .gx-tools-res-left,
  .resource-filter-data{ position: relative; z-index: 1; }

  .gx-vector{
    position: static;   /* not absolute on tablet */
    width: 110px;       /* a touch smaller than desktop */
    margin-top: 12px;   /* space under the white panel */
    z-index: 0;
  }

  /* no need for extra bottom padding on the panel now */
}

}

/* Mobile */
@media (max-width: 767px){
  /* Content above logo */
  .gx-tools-res-left,
  .resource-filter-data{ position: relative; z-index: 1; }

  /* Logo drops below panel */
  .gx-vector{
    position: static;
    width:100px;
    margin-top:12px;
    z-index:0;
  }

  /* Panel padding tighter on phones */
  .resource-filter-data{
    padding:16px;
  }

  /* Tool area bigger + full width */
  .tool-placeholder,
  .tool-embed{
    aspect-ratio: auto;   /* not locked to 16:9 */
    min-height: 360px;    /* taller for usability */
    width: 100%;
  }
  .tool-placeholder img,
  .tool-embed iframe,
  .tool-embed model-viewer,
  .tool-embed video{
    width:100%;
    height:auto;
  }
}