/* ==========================================================================
   WILDAPRICOT MEMBER DIRECTORY: CARDS GRID OVERRIDE
   Target: .WaGadgetMemberDirectory
   ========================================================================== */

/* 1. Reset Table Structure to Flexbox Container */
.WaGadgetMemberDirectory table.membersTable,
.WaGadgetMemberDirectory table.membersTable > tbody {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Hide Table Header Row Completely */
.WaGadgetMemberDirectory table.membersTable > tbody > tr:first-child:not([class*="member"]),
.WaGadgetMemberDirectory table.membersTable th,
.WaGadgetMemberDirectory .membersTableHeading {
  display: none !important;
}

/* 2. Transform Each Row into a Card Item */
.WaGadgetMemberDirectory table.membersTable > tbody > tr {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  
  /* Desktop: 3 Columns minus gap space */
  flex: 0 0 calc(33.333% - (40px / 3)) !important;
  box-sizing: border-box !important;
  
  /* Modern Card Styling */
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 24px 20px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Card Hover Effect */
.WaGadgetMemberDirectory table.membersTable > tbody > tr:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* 3. Style Inner Table Cells (Card Content) */
.WaGadgetMemberDirectory table.membersTable td {
  display: block !important;
  padding: 4px 0 !important;
  border: none !important;
  width: 100% !important;
  background: transparent !important;
}

/* Profile Picture Styling (If Enabled in Directory Settings) */
.WaGadgetMemberDirectory table.membersTable td img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 auto 12px auto !important;
  display: block !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Member Name Styling (Usually the primary link) */
.WaGadgetMemberDirectory table.membersTable td a {
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  color: #1f2937 !important;
  text-decoration: none !important;
}

.WaGadgetMemberDirectory table.membersTable td a:hover {
  color: #2563eb !important;
  text-decoration: underline !important;
}

/* Alternate Row Background Reset */
.WaGadgetMemberDirectory table.membersTable tr.evenRow,
.WaGadgetMemberDirectory table.membersTable tr.oddRow {
  background-color: #ffffff !important;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet View (2 Columns) */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .WaGadgetMemberDirectory table.membersTable > tbody > tr {
    flex: 0 0 calc(50% - 10px) !important;
  }
}

/* Mobile View (1 Column Stacking) */
@media screen and (max-width: 768px) {
  .WaGadgetMemberDirectory table.membersTable > tbody > tr {
    flex: 0 0 100% !important;
  }
}

/* Replace the breadcrumb separator indicator */
.breadcrumbsLi:before,
.breadcrumbsLi + .breadcrumbsLi:before,
.WaGadgetBreadcrumbs li + li:before {
  content: " ▼ " !important; /* Use " ▼ " for a solid downward triangle */
}


/* Container layout to order Title first, Date second */
.WaGadgetBlogPostState .blogPostHeader,
.WaGadgetBlog .blogPostHeader,
.blogPostContainer {
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure the title stays at the top */
.WaGadgetBlogPostState .blogPostTitle,
.WaGadgetBlog .blogPostTitle,
.blogPostContainer .title {
  order: 1 !important;
  margin-bottom: 6px !important;
}

/* Position date/time under the title, style as small bold heading */
.WaGadgetBlogPostState .pageState,
.WaGadgetBlog .pageState,
.blogPostContainer .postedOn,
.WaGadgetBlogPostState .date,
.WaGadgetBlog .date {
  order: 2 !important;
  font-size: 1rem !important;      /* Smaller than the title */
  font-weight: 700 !important;    /* Bold */
  color: #333333 !important;      /* Dark heading-like text color */
  margin-top: 4px !important;
  margin-bottom: 16px !important;
}


/* === Blog grid formatting === */
/* 1. Turn the blog post list into a 2-column CSS Grid */
ul.boxesList {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Reset list item layout constraints */
ul.boxesList > li.boxesListItem {
  float: none !important;
  clear: none !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 3. Add a clean 1px border around every individual blog post card */
ul.boxesList > li.boxesListItem > .boxOuterContainer {
  border: 1px solid #dcdcdc !important; /* Change #dcdcdc to your preferred border color */
  border-radius: 8px !important;       /* Optional: slightly rounds the card corners */
  overflow: hidden !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* 4. Hide WildApricot's legacy rounded corner graphics and grey decorative lines */
ul.boxesList .cornersContainer,
ul.boxesList .clearEndContainer {
  display: none !important;
}

/* 5. Add a bit of internal breathing room (padding) inside the new card box */
ul.boxesList > li.boxesListItem .boxContainer > .d1 > .d2 > .d3 > .d4 > .d5 > .d6 > .d7 > .d8 > .d9 > .inner {
  padding: 15px !important;
}

/* 6. Mobile fallback: Collapse back to a single column on smaller screens */
@media screen and (max-width: 768px) {
  ul.boxesList {
    grid-template-columns: 1fr !important;
  }
}

/* 7. Remove the bar between blog posts */
.WaGadgetBlogStateList ul.boxesList li.boxesListItem+li.boxesListItem {
    margin-top: 30px;
    padding-top:0px;
    border-top:0px solid #edf2f4;
}