/* QDX Category Grid — Mobile Responsive (v1.0.2) */
/* Scope to prevent conflicts */
.qdx-section{max-width:1200px;margin:0 auto;padding:0 14px 90px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
/* extra bottom padding so floating chat bubbles/buttons don't overlap last cards */
.qdx-spacer{height:16px}

/* ===== Category Grid ===== */
.qdx-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  max-width:1200px;
  margin:12px auto 24px;
}

/* Reduce the min column width on narrower screens for better fit */
@media (max-width: 820px){
  .qdx-grid{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; }
}
@media (max-width: 680px){
  .qdx-grid{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
}
@media (max-width: 420px){
  .qdx-grid{ grid-template-columns:1fr; gap:14px; }
}

.qdx-card{
  display:flex; flex-direction:column;
  background:linear-gradient(135deg,#6a11cb 0%,#2575fc 100%);
  border-radius:16px; box-shadow:0 6px 16px rgba(0,0,0,.10);
  overflow:hidden; text-decoration:none !important; color:#fff; min-height:48px;
  transition:transform .2s ease, box-shadow .2s ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.qdx-card:focus-visible{ outline:3px solid #ff7a18; outline-offset:2px; }
.qdx-card:active{ transform:translateY(1px) }

.qdx-media{
  position:relative;
  aspect-ratio:16/12;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
}
/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 16/12){
  .qdx-media::before{ content:""; display:block; padding-top:75%; }
  .qdx-media{ height:0; }
}
.qdx-media img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  padding:12px; /* slightly tighter on mobile */
  transition:transform .25s ease;
  display:block; /* remove baseline gap */
}

/* Cap image visual height on very small screens so the caption stays visible without giant scroll */
@media (max-width: 420px){
  .qdx-media{ aspect-ratio: 16/11; }
  .qdx-media img{ padding:10px; }
}

/* Hover effects only on devices that support hover */
@media (hover:hover){
  .qdx-card:hover .qdx-media img{ transform:scale(1.05) }
  .qdx-card:hover{ box-shadow:0 10px 22px rgba(0,0,0,.16) }
  .qdx-card:hover .qdx-arrow{ transform:translateX(3px) }
}

.qdx-caption{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px 14px 14px;
  font-weight:800; font-size:clamp(15px,3.6vw,17px); line-height:1.25;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.qdx-title{
  flex:1; overflow-wrap:anywhere;
  text-decoration:none !important; /* beat theme link underlines */
}
.qdx-arrow{
  display:inline-grid; place-items:center;
  width:clamp(28px,7vw,32px); height:clamp(28px,7vw,32px);
  border-radius:50%;
  background:#2f80ff; color:#fff; font-weight:800;
  box-shadow:0 4px 12px rgba(37,117,252,.18);
  transition:transform .2s ease;
  flex:0 0 auto;
}

/* Make image clicks always go to the card link (prevents lightbox hijack) */
.qdx-card .qdx-media a{ pointer-events:none !important; }

/* ===== Minimal Chat Panel Styling (optional when show_chat="yes") ===== */
.qdx-prochat{ background:#fff; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.10); overflow:hidden }
.qdx-prochat-head{ padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.06) }
.qdx-prochat-title{ font-size:18px; font-weight:800; color:#0b1324 }
.qdx-prochat-sub{ font-size:14px; color:#56607a }
.qdx-prochat-body{ padding:14px 16px }
@media (max-width:680px){
  .qdx-prochat{ border-radius:14px }
  .qdx-prochat-head{ padding:10px 12px }
  .qdx-prochat-body{ padding:10px }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .qdx-card, .qdx-prochat{ transition:none }
  .qdx-card:hover .qdx-arrow{ transform:none }
  .qdx-card:hover .qdx-media img{ transform:none }
}


/* === v1.0.2 tweaks === */
/* 1) Cap visual height of media/images on very small screens so captions stay visible */
/* 2) Pin the arrow inside the caption for consistency across themes */
.qdx-caption{ position:relative; padding-right:56px; } /* reserve space for pinned arrow */
.qdx-arrow{
  position:absolute; right:12px; top:50%;
  transform:translateY(-50%);
  flex: initial;
}

@media (max-width: 420px){
  .qdx-media{
    aspect-ratio: 16/12;
    max-height: 48vw;           /* cap the visible box based on viewport width */
    overflow: hidden;
  }
  .qdx-media img{
    max-height: calc(48vw - 20px); /* subtract typical padding */
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}