/* ========= Versa Account Hub – Chat & Manage Addon (FULL CSS) ========= */

/* Base variables (buttons/colors) */
:root{
  --vahcma-manage-bg:#000;
  --vahcma-manage-text:#fff;
  --vahcma-chat-bg:#0a84ff;
  --vahcma-chat-text:#fff;
  --vahcma-preview-bg:#000;
  --vahcma-preview-text:#fff;
  --vahcma-bell-bg:#ff3b30;
  --vahcma-bell-text:#fff;
  --vahcma-border:#fff;
}

/* Buttons */
.vahcma-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .75rem;
  border:1px solid var(--vahcma-border);
  border-radius:.75rem;
  background:#000;
  color:#fff;
  text-decoration:none;
  font-size:.9rem;
  line-height:1;
  font-weight:600;
  cursor:pointer;
  transition:transform .1s ease, opacity .1s ease;
}
.vahcma-btn:hover{ transform:translateY(-1px); opacity:.95; }
.vahcma-btn--manage{ background:var(--vahcma-manage-bg); color:var(--vahcma-manage-text); }
.vahcma-btn--chat{ background:var(--vahcma-chat-bg); color:var(--vahcma-chat-text); }
.vahcma-btn--preview{ background:var(--vahcma-preview-bg); color:var(--vahcma-preview-text); }

/* Button rows inside cards */
.vahcma-card-actions{
  display:flex;
  gap:.5rem;
  margin-top:.5rem;
  flex-wrap:wrap;
}

/* Overlay buttons / badges placed on the card */
.vahcma-preview-overlay{
  position:absolute;
  right:.5rem;
  bottom:.5rem;
  z-index:5;
}
.vahcma-preview-overlay .vahcma-btn{ opacity:1; }

.vahcma-bell{
  position:absolute;
  left:.5rem;
  top:.5rem;
  z-index:6;
  background:var(--vahcma-bell-bg);
  color:var(--vahcma-bell-text);
  border-radius:999px;
  padding:.2rem .5rem;
  font-size:.75rem;
  font-weight:700;
  display:none;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.vahcma-bell.is-visible{ display:inline-block; }

/* Inline button rows (outside cards) */
.vahcma-inline-actions{ display:flex; gap:.5rem; }

/* Unread chat bounce */
@keyframes vahcma-bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}
.vahcma-btn--chat.is-unread{
  animation: vahcma-bounce .8s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(10,132,255,.6);
}

/* ========= Projects grid: hard min width + real breakpoints ========= */
/* Tunables for card sizing */
:root{
  --vcp-gap: 20px;   /* space between cards */
  --vcp-min: 300px;  /* cards never get narrower than this */
  --vcp-max: 400px;  /* max card width on large screens */
}

/* Grid containers (covers common wrappers used by the projects plugin) */
#versa-client-projects .projects-list,
.versa-client-projects .projects-list,
#versa-client-projects .vcp-grid,
.versa-client-projects .vcp-grid{
  display:grid !important;
  gap:var(--vcp-gap) !important;
  grid-template-columns:repeat(auto-fill, minmax(var(--vcp-min), 1fr)) !important;
  justify-content:center !important;
  align-content:start !important;
  width:100% !important;
}

/* Each direct child acts like a responsive card with a hard floor */
#versa-client-projects .projects-list > *,
.versa-client-projects .projects-list > *,
#versa-client-projects .vcp-grid > *,
.versa-client-projects .vcp-grid > *{
  position:relative !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-width:var(--vcp-min) !important;   /* prevent “hotdog” cards */
  max-width:var(--vcp-max) !important;   /* keep comfy on big screens */
  margin:0 auto !important;
  float:none !important;
}

/* Keep the image area tidy when a .thumb wrapper exists */
#versa-client-projects .projects-list > * .thumb,
.versa-client-projects .projects-list > * .thumb,
#versa-client-projects .vcp-grid > * .thumb,
.versa-client-projects .vcp-grid > * .thumb{
  position:relative !important;
  aspect-ratio:16/9 !important;
  overflow:hidden !important;
  border-radius:10px !important;
}
#versa-client-projects .projects-list > * .thumb img,
.versa-client-projects .projects-list > * .thumb img,
#versa-client-projects .vcp-grid > * .thumb img,
.versa-client-projects .vcp-grid > * .thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Actions row: wrap cleanly; never overlap */
#versa-client-projects .projects-list > * .actions,
.versa-client-projects .projects-list > * .actions,
#versa-client-projects .vcp-grid > * .actions,
.versa-client-projects .vcp-grid > * .actions,
.vahcma-card-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:center !important;
  margin-top:.5rem !important;
}
#versa-client-projects .projects-list > * .actions > *,
.versa-client-projects .projects-list > * .actions > *,
#versa-client-projects .vcp-grid > * .actions > *,
.versa-client-projects .vcp-grid > * .actions > *,
.vahcma-card-actions > *{
  flex:0 1 auto !important;
  white-space:nowrap !important;
}

/* Breakpoints */
/* 2 columns when there’s room for 2x min width + gaps */
@media (max-width:1100px){
  #versa-client-projects .projects-list,
  .versa-client-projects .projects-list,
  #versa-client-projects .vcp-grid,
  .versa-client-projects .vcp-grid{
    grid-template-columns:repeat(2, minmax(var(--vcp-min), 1fr)) !important;
  }
}

/* 1 column on phones – force stack instead of shrinking */
@media (max-width:700px){
  #versa-client-projects .projects-list,
  .versa-client-projects .projects-list,
  #versa-client-projects .vcp-grid,
  .versa-client-projects .vcp-grid{
    grid-template-columns:minmax(0, 1fr) !important;
    padding-inline:8px !important;
  }
  .vahcma-card-actions > *{ flex:1 1 48% !important; }
}

/* Ultrawide small bump, still capped */
@media (min-width:1440px){
  :root{ --vcp-max: 420px; }
}


/* === VCP DIRECT SELECTORS PATCH (2025-09-08T17:37:10): hard floor + proper wrapping === */
:root{
  --vcp-gap: 20px;
  --vcp-min: 300px;   /* cards never narrower than this */
  --vcp-max: 400px;   /* cap on really large screens */
}
/* Grid wrapper emitted by [versa_projects] */
.vcp-grid{
  display: grid !important;
  gap: var(--vcp-gap) !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--vcp-min), 1fr)) !important;
  justify-content: center !important;
  align-content: start !important;
  width: 100% !important;
}

/* Card wrappers inside the grid */
.vcp-grid > .vcp-card-wrap{
  width: 100% !important;
  min-width: var(--vcp-min) !important;
  max-width: var(--vcp-max) !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  position: relative !important;
}

/* Keep media area tidy */
.vcp-card .vcp-card-media{
  position: relative !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}
.vcp-card .vcp-card-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Button rows from both plugins */
.vcp-card .vcp-card-actions,
.vcp-card .vahcma-card-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: .5rem !important;
}
.vcp-card .vcp-card-actions > *,
.vcp-card .vahcma-card-actions > *{
  flex: 0 1 auto !important;
  white-space: nowrap !important;
}

/* Phones: single column and 2-up buttons if tight */
@media (max-width: 700px){
  .vcp-grid{ grid-template-columns: minmax(0, 1fr) !important; padding-inline: 8px !important; }
  .vcp-card .vcp-card-actions > *,
  .vcp-card .vahcma-card-actions > *{ flex: 1 1 48% !important; }
}

/* Ultra-wide slight bump */
@media (min-width: 1440px){ :root{ --vcp-max: 420px; } }
/* === end VCP direct selectors patch === */


/* === MOBILE FORCED SINGLE-COLUMN + ANTI-HOTDOG RULES (v2) === */

/* If the viewport is narrower than 820px, force exactly 1 column */
@media (max-width: 820px){
  .vcp-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: center !important;
    align-content: start !important;
    padding-inline: 10px !important;
    gap: 18px !important;
  }
  .vcp-grid > .vcp-card-wrap{
    width: min(92vw, 420px) !important;
    max-width: min(92vw, 420px) !important;
    min-width: min(92vw, 360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* As a safety, if some style still tries to create multiple narrow columns,
   collapse to block flow on very narrow screens */
@media (max-width: 560px){
  .vcp-grid{ display: block !important; }
  .vcp-grid > .vcp-card-wrap{
    display: block !important;
    width: min(92vw, 420px) !important;
    max-width: min(92vw, 420px) !important;
    min-width: min(92vw, 360px) !important;
  }
}

/* Optional: make the media region inside the card square on phones
   (comment out if you prefer 16:9) */
@media (max-width: 560px){
  .vcp-card .vcp-card-media{
    aspect-ratio: 1 / 1 !important;   /* square image area */
  }
}


/* === V3: Auto-detect parent of .vah-card and enforce responsive grid === */

/* Base sizing dials */
:root{
  --vah-card-gap: 20px;
  --vah-card-min: 300px;   /* hard floor to avoid hotdog cards */
  --vah-card-max: 410px;   /* comfy max on desktops */
}

/* 0) Make .vah-card itself resilient */
.vah-card{
  width: 100% !important;
  min-width: var(--vah-card-min) !important;
  max-width: var(--vah-card-max) !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;     /* don't let flexbox squeeze it */
  margin: 0 auto !important;
}

/* 1) AUTO-DETECT any container that directly holds .vah-card children */
div:has(> .vah-card){
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--vah-card-min), 1fr)) !important;
  gap: var(--vah-card-gap) !important;
  justify-content: center !important;
  align-content: start !important;
}

/* 2) Fallback to known wrappers, in case :has() is blocked somewhere */
.vcp-grid,
.projects-list,
.vlp-wrap,
.vah-grid,
.projects-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--vah-card-min), 1fr)) !important;
  gap: var(--vah-card-gap) !important;
  justify-content: center !important;
  align-content: start !important;
}
.vcp-grid > .vah-card,
.projects-list > .vah-card,
.vlp-wrap > .vah-card,
.vah-grid > .vah-card,
.projects-grid > .vah-card{
  width: 100% !important;
  min-width: var(--vah-card-min) !important;
  max-width: var(--vah-card-max) !important;
  margin: 0 auto !important;
}

/* 3) Keep the media square on phones as requested */
@media (max-width: 700px){
  div:has(> .vah-card){
    grid-template-columns: 1fr !important;
    padding-inline: 10px !important;
  }
  .vcp-grid,
  .projects-list,
  .vlp-wrap,
  .vah-grid,
  .projects-grid{
    grid-template-columns: 1fr !important;
    padding-inline: 10px !important;
  }
  .vah-card__thumb{ aspect-ratio: 1 / 1 !important; }
}

/* 4) Button rows: wrap; no overlaps */
.vahcma-card-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: .5rem !important;
}
.vahcma-card-actions > *{ flex: 0 1 auto !important; white-space: nowrap !important; }

/* 5) Titles should wrap words but not break every letter */
.vah-card__title{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 6) Safety: if some theme still compresses cards at very small widths,
   collapse to block flow as a final backstop */
@media (max-width: 560px){
  div:has(> .vah-card){ display: block !important; }
  div:has(> .vah-card) > .vah-card{
    display: block !important;
    width: min(92vw, var(--vah-card-max)) !important;
    min-width: auto !important;
  }
}