/* =========================================================
   ED DentalDirectory — Option A (Cardify) CSS v1
   Scope: only our generated markup (.ed-dd-*)
   ========================================================= */

#subscribers-grid table.listing-table { width:100%; }

/* Turn tbody into a responsive grid of cards */
#subscribers-grid table.listing-table > tbody{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap:18px;
}

/* Each row becomes a card container */
#subscribers-grid table.listing-table > tbody > tr{
  display:block !important;
}

/* Hide header + legacy columns (we replace each row with one colspan cell) */
#subscribers-grid table.listing-table > thead{ display:none !important; }
#subscribers-grid table.listing-table > tbody > tr > td:not(.ed-dd-cardcell){ display:none !important; }

/* Card shell */
.ed-dd-card{
  background:#fff;
  border:1px solid #ececec;
  border-radius:14px;
  padding:18px 18px 16px 18px;
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:18px;
  min-height: 140px;
}

/* Photo circle: BIGGER than mockup (per your requirement) */
.ed-dd-photo{
  width:96px;
  height:96px;
  border-radius:50%;
  background:#f2f2f2;
  box-shadow:0 10px 18px rgba(0,0,0,0.08);
  overflow:hidden;
  position:relative;
}
.ed-dd-photo img{
  width:96px !important;
  height:96px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  display:block;
}

/* Text stack */
.ed-dd-name{
  font-weight:700;
  font-size:18px;
  line-height:1.2;
  margin:0 0 4px 0;
}
.ed-dd-spec{
  font-size:12px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  opacity:0.65;
  margin:0 0 6px 0;
}
.ed-dd-loc{
  font-size:14px;
  opacity:0.75;
  margin:0 0 10px 0;
}

/* Button MUST be at bottom under location */
.ed-dd-body{
  display:flex;
  flex-direction:column;
  min-height: 100px;
}
.ed-dd-btn{
  margin-top:auto;
  display:inline-block;
  padding:10px 16px;
  border:1px solid #d7c9f3;
  border-radius:12px;
  background:#f7f3ff;
  text-decoration:none !important;
  font-weight:600;
  color:#4b3b6a;
}

/* === ED PATCH: Restore Location rows on mobile (City/State/Zip) === */
@media (max-width: 860px){
  /* Ensure location columns are not hidden */
  #subscribers-grid.table-responsive > table.listing-table tbody tr td:nth-child(4),
  #subscribers-grid.table-responsive > table.listing-table tbody tr td:nth-child(5),
  #subscribers-grid.table-responsive > table.listing-table tbody tr td:nth-child(6){
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* === ED PATCH v2: Restore Location TDs on mobile (correct selector) === */
@media (max-width: 860px){
  #subscribers-grid table.listing-table > tbody > tr > td:nth-child(4),
  #subscribers-grid table.listing-table > tbody > tr > td:nth-child(5),
  #subscribers-grid table.listing-table > tbody > tr > td:nth-child(6){
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* === ED PATCH v2: Restore Location TDs on mobile (correct selector) === */
@media (max-width: 860px){
  #subscribers-grid table.listing-table > tbody > tr > td:nth-child(4),
  #subscribers-grid table.listing-table > tbody > tr > td:nth-child(5),
  #subscribers-grid table.listing-table > tbody > tr > td:nth-child(6){
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* === ED PATCH: keep white ring but prevent left-edge clipping on mobile === */
/* Legacy CSS adds border:3px solid #fff !important to td:first-child img.
   In cardified markup, that IMG lives inside .ed-dd-photo (overflow:hidden),
   so the IMG border gets cropped. We move the ring to the container. */
#subscribers-grid .ed-dd-photo{
  box-sizing:border-box;
  border:0;
  box-shadow: inset 0 0 0 3px #fff;
}
#subscribers-grid .ed-dd-photo img{
  border:0 !important;
  width:100% !important;
  height:100% !important;
  box-sizing:border-box;
  display:block;
}