/* Member Feed Shortcode Styles (Version 1.4.14 - Responsive Grid + Flex Card Interior) */

/* Overall container */
.member-feed-container {
    max-width: 1000px ; /* Can adjust or remove if grid handles width */
    margin: 2em auto;
    padding: 1em; /* Provides padding around grid if max-width active */
    box-sizing: border-box;
}

/* Filter Tabs Container - Restored Styles */
.member-feed-filters {
    max-width: 900px; /* Default max-width */
    margin: 0 auto; /* T/B=0, R/L=auto */
    padding: 0.4em 1em; /* T/B=0.4em, R/L=1em */
    display: flex;
    gap: 0.8em; /* Adjust gap */
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px; /* Space for scrollbar (Overrides padding-bottom above for now) */
    justify-content: center; /* Center horizontally */
    background-color: #f8f9fa; /* Original background */
    border: none;
    border-radius: 0.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.member-feed-filters::-webkit-scrollbar {
    display: none;
}


/* Individual Filter Button Styling */
.member-feed-filters .filter-tab {
    text-decoration: none;
    color: #495057;
    padding: 0.3em 0.8em;
    border-radius: 0.25rem;
    border: none;
    background-color: #ffffff; /* Original background */
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    line-height: 1.4;
    font-size: 1.0em; /* Increased from 0.9em */
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.member-feed-filters .filter-tab:hover {
    color: #000;
    background-color: #ced4da;
    transform: translateY(-2px);
}

.member-feed-filters .filter-tab.active {
    color: #fff !important;
    background-color: #e20101 !important;
    border: none;
    box-shadow: none;
    transform: translateY(0);
}

/* Grid Layout for Posts - Responsive */
.member-feed-grid {
    /* Desktop is Grid */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5em;
    width: auto; /* Base */
    margin: 0; /* Base */
    padding: 0; /* Base */
    box-sizing: border-box;
    justify-items: stretch; /* Base */
}

/* Individual Post Item Card Styling - Flexbox for internal layout */
.member-feed-item {
    /* Base border/radius/shadow applied unless overridden */
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

    /* Base layout */
    overflow: hidden;
    background-color: #fff; /* Original background */
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Use stretch for base to match overrides */
    box-sizing: border-box; /* Base box-sizing */
    width: auto; /* Base */
    max-width: none; /* Base */
    margin: 0; /* Base */
    padding: 0; /* Base */
    position: static; /* Base */
    left: auto; /* Base */
}

/* Image Container - Using explicit width */
.member-feed-item .feed-item-image {
    width: 40%; /* Base width */
    flex-shrink: 0;
    position: relative;
    background-color: #f0f0f0; /* Base background */
    padding-top: 0.5em; /* Base padding */
    box-sizing: border-box;
    align-self: stretch; /* Default alignment in base */
    /* Base height control */
    max-height: 250px;
    height: auto;
    /* Base flex centering for content */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image & Placeholder Styling */
.member-feed-item .feed-item-image img,
.member-feed-item .no-image-placeholder {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 9 / 16; /* Keep 9:16 ratio */
    object-fit: contain; /* Keep contain */
    box-sizing: border-box;
}

.member-feed-item .no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 0.8em;
    text-align: center;
    padding: 0.5em;
    background-color: #f0f0f0; /* Original Placeholder background */
    /* Use max-width/max-height from rule above */
    /* Use aspect-ratio from rule above */
}

/* Content Container - Takes remaining space */
.member-feed-item .feed-item-content {
    padding: 1.2em 0.6em 1.2em 0; /* Base padding with reduced right */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    min-width: 0;
    text-align: center;
    box-sizing: border-box;
    align-self: stretch; /* Match image container stretch */
}

/* Title - Compacted */
/* Scoped selector: Only affects .feed-item-title INSIDE .member-feed-item */
.member-feed-item .feed-item-title {
    /* Base Title Size */
    font-size: 1.05em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #212529;
    line-height: 1.25;
}

/* Excerpt */
.member-feed-item .feed-item-excerpt {
    font-size: 0.9em;
    color: #495057;
    margin-bottom: 1em;
	padding-left: 0.5em;
    flex-grow: 1;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    max-height: calc(1.5em * 4);
    word-break: break-word;
    text-align: center;
}

/* Learn More Link */
.member-feed-item .learn-more-link {
    text-decoration: none;
    color: #e20101;
    font-weight: 700;
    font-size: 0.9em;
    margin-top: auto;
    padding-top: 0.75em;
    align-self: center;
    display: inline-block;
    visibility: visible;
    white-space: nowrap;
}

.member-feed-item .learn-more-link:hover {
    text-decoration: underline;
}

/* No Posts Message */
.member-feed-container .no-posts-found {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2em;
    color: #777;
    font-size: 0.9em;
}

/* ====================================================== */
/* ============ MOBILE STYLES (767px Max) ============= */
/* ====================================================== */
@media (max-width: 767px) {

    /* Force centering and padding on the main container */
    .member-feed-container {
        /* --- MODIFIED: Add small horizontal padding back --- */
        padding-left: 0.5em !important;
        padding-right: 0.5em !important;
        margin: 1em auto !important; /* Keep vertical margin */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
     .member-feed-container * {
         box-sizing: border-box !important;
     }

    /* Adjust filter container */
     .member-feed-filters {
         padding: 0.4em 1em; /* T/B=0.4em, R/L=1em */
         padding-bottom: 10px; /* Ensure space for scrollbar (Overrides padding-bottom above for now) */
         gap: 0.8em;
         margin: 0 auto 1.5em auto; /* Keep bottom margin */
         max-width: 100%;
         justify-content: flex-start;
         border-radius: 0.25rem; /* Restore default radius */
     }

    /* Filter buttons mobile */
     .member-feed-filters .filter-tab {
         /* Inherits font-size: 1.0em from base rule */
         padding: 0.5em 1em;
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
     }

    /* Simplify Grid container */
    .member-feed-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5em;
        justify-items: stretch; /* Item fills cell */
        width: 100% !important; /* Already full width */
        margin: 0 !important;
        padding: 0 !important; /* Ensure grid itself has no padding */
    }

    /* --- Base Font Sizes & Mobile Excerpt Clamp --- */
     /* Scoped selector: Only affects .feed-item-title INSIDE .member-feed-item on mobile */
     .member-feed-item .feed-item-title {
         font-size: 0.75em; /* Reduced mobile size */
     }
     .member-feed-item .feed-item-excerpt {
         font-size: 0.85em;
         line-height: 1.45;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         overflow: hidden;
         -webkit-line-clamp: 4;
         max-height: calc(1.45em * 4);
         word-break: break-word;
         text-align: center;
         margin-bottom: 1em;
     }
     .member-feed-item .learn-more-link { font-size: 0.85em; }
     .member-feed-item .no-image-placeholder { font-size: 0.8em; /* Base font size */ }
     .member-feed-container .no-posts-found { font-size: 0.85em; padding: 1.5em; }


     /* --- OVERRIDE SECTION MOBILE STYLES --- */

    /* Constrain Item Width and Center It Manually with Final Adjusted % Margins */
    .member-feed-item {
       flex-direction: column; /* Keep stacked on mobile */
       align-items: stretch;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
       overflow: hidden;
       border: 1px solid #eee;
       border-radius: 0.25rem;
       min-height: unset;
       height: auto;
       display: flex;
       width: 100% !important; /* Should allow stretching by grid */
       /* --- MODIFIED: Revert to 90% max-width and auto margins for centering --- */
       max-width: 90% !important;
       margin-top: 0 !important;
       margin-bottom: 0 !important;
       margin-left: auto !important;  /* Center within grid cell */
       margin-right: auto !important; /* Center within grid cell */
       padding: 0 !important;
       box-sizing: border-box !important;
       position: static !important;
       left: auto !important;
     }
    /* Apply needed padding WITHIN children */
     .member-feed-item .feed-item-image {
       width: 100%;
       aspect-ratio: unset;
       max-height: 250px;
       height: auto;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 0.25rem 0.25rem 0 0;
       border-bottom-left-radius: 0;
       padding: 12px 0 10px 12px !important; /* Keep T R B L padding */
       background-color: #ffffff; /* Original background */
       box-sizing: border-box !important;
       overflow: hidden;
       flex-shrink: 0;
       margin: 0 !important;
       max-width: 100% !important;
       position: relative;
     }
     .member-feed-item .feed-item-image img {
       /* Inherit aspect-ratio: 9 / 16 from base */
       /* Inherit object-fit: contain from base */
       display: block;
       border-radius: 0.15rem;
       object-position: initial;
       /* Inherit sizing props from base */
     }
     .member-feed-item .no-image-placeholder {
         /* Inherit aspect-ratio: 9 / 16 from base */
         /* Inherit object-fit: contain from base */
         border-radius: 0.15rem;
         padding: 0.5em !important; /* Keep placeholder padding */
         box-sizing: border-box !important;
         flex-shrink: 0;
         margin: 0 !important;
         color: #aaa;
         background-color: #f0f0f0; /* Original background */
         /* Inherit sizing props from base */
     }
     .member-feed-item .feed-item-content {
         width: 100% !important;
         padding: 1.2em 0.6em 1.2em 0 !important; /* Keep T R B L with reduced R */
         text-align: center;
         display: flex;
         flex-direction: column;
         flex-grow: 1;
         justify-content: space-between;
         overflow: hidden;
         min-height: 0;
         margin: 0 !important;
         box-sizing: border-box !important;
     }
      .member-feed-item .learn-more-link {
          align-self: center;
          margin-top: auto;
          padding-top: 0.75em;
          flex-shrink: 0;
      }
}


@media (max-width: 600px) {
    /* Apply similar logic */
     .member-feed-grid {
         /* Keep simplified styles */
     }
     .member-feed-item {
         width: 100% !important; /* Should allow stretching by grid */
         /* --- MODIFIED: Revert to 90% max-width and auto margins for centering --- */
         max-width: 90% !important;
         margin-left: auto !important;  /* Center within grid cell */
         margin-right: auto !important; /* Center within grid cell */
         margin-top: 0 !important;
         margin-bottom: 0 !important;
         padding: 0 !important;
         min-height: unset;
     }
     .member-feed-item .feed-item-image {
        aspect-ratio: unset;
        max-height: 220px; /* Keep smaller max-height */
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 0 10px 12px !important; /* Keep T R B L padding */
     }
     .member-feed-item .feed-item-image img {
        object-position: initial;
        /* Inherit aspect-ratio: 9 / 16 from base */
        /* Inherit object-fit: contain from base */
     }
     .member-feed-item .no-image-placeholder {
        /* Inherit aspect-ratio: 9 / 16 from base */
        /* Inherit object-fit: contain from base */
     }

      .member-feed-item .feed-item-content {
           padding: 1em 0.6em 1em 0 !important; /* Keep T R B L with reduced R */
      }
      /* ... other 600px font styles ... */
}

/* --- ADDED: Desktop spacing above grid --- */
@media (min-width: 768px) {
  .member-feed-grid {
    margin-top: 2em; /* Adjust this value as needed */
  }
}

/* ==========================================================================
   OVERRIDES TO MATCH “Brick Progress” LAYOUT (with 4‑line clamp)
   ========================================================================== */

/* 1) Two‑column grid + wider gap */
.member-feed-grid {
  /* Desktop styles */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 2em;
  justify-items: stretch;
  width: auto;
  /* Use margin-top from media query above */
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  box-sizing: border-box; /* Reset */
}

/* 2) Card look—stronger shadow, remove thin border */
.member-feed-item {
  /* Desktop styles */
  background-color: #fff; /* Original background */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  border: none;
  align-items: stretch; /* Stretch children by default */
  overflow: visible;
  aspect-ratio: unset;
  min-height: unset;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  position: static;
  left: auto;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

/* 3) Enforce image/content split */
.member-feed-item .feed-item-image {
   /* Desktop styles */
   width: 45% !important; /* Reduced from 55% */
   margin-left: 0 !important; /* Keep left margin removed */
   overflow: hidden;
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
   position: relative;
   background-color: #ffffff; /* Original background */
   padding: 3.25% 3.25% 3.25% !important; /* Keep T R B L padding */
   box-sizing: border-box !important;
   aspect-ratio: unset;
   max-height: 250px;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: none !important;
   flex-shrink: 0;
   align-self: center; /* Keep centered */
}
.member-feed-item .feed-item-image img {
   /* Desktop styles */
   /* Inherit aspect-ratio: 9 / 16 from base */
   /* Inherit object-fit: contain from base */
   display: block;
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
   border-radius: 0.15rem;
   box-sizing: border-box !important;
   object-position: initial;
}
.member-feed-item .no-image-placeholder {
    /* Desktop styles */
    /* Inherit aspect-ratio: 9 / 16 from base */
    /* Inherit object-fit: contain from base */
    height: auto;
    width: auto;
    max-width: 90%;
    max-height: 90%;
    border-radius: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    padding: 0.5em !important; /* Keep placeholder padding */
    box-sizing: border-box !important;
    margin: 0 !important;
    position: static !important;
    background-color: #f0f0f0; /* Original background */
    /* align-self: center; Already set for container */
}

/* 4) Increase padding & typographic scale in content */
.member-feed-item .feed-item-content {
  /* Desktop styles */
  padding: 1.5em 0.6em 1.5em 0 !important; /* Keep T R B L with reduced R */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  flex-grow: 1;
  min-height: 0;
  overflow: visible;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  position: static !important;
  box-sizing: border-box !important;
  align-self: stretch; /* Keep content stretched */
}
/* Scoped selector: Only affects .feed-item-title INSIDE .member-feed-item */
.member-feed-item .feed-item-title {
   /* Desktop styles */
  font-size: 0.9em; /* Reduced desktop size */
  font-weight: 700;
  margin-bottom: 0.75em; /* Increased from 0.5em base */
}
.member-feed-item .feed-item-excerpt {
   /* Desktop styles */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin-bottom: 1.5em;
  color: #555;
  line-height: 1.5;
  font-size: 0.9em;
  max-height: calc(1.5em * 4);
  flex-grow: 1;
  text-align: center;
}

/* 5) “Learn More” text style unchanged */
.member-feed-item .learn-more-link {
   /* Desktop styles */
  text-transform: none;
  align-self: center;
  font-size: 0.9em;
  color: #e20101;
  margin-top: auto;
  flex-shrink: 0;
  position: static !important;
  padding-top: 0.75em;
}

/* 6) Mobile: stack image over content */
/* This block is now handled within the main responsive block above */

/* ================================================ */
/* === ADDED: Custom File Input Button Style (Label Method) === */
/* ================================================ */

/* 1. Style the Label as the Button */
.bua-upload-button {
    display: inline-block; /* Or block, depending on desired layout */
    padding: 0.6em 1.2em;  /* Adjust padding for size */
    margin-bottom: 0.5em; /* Space below button */
    background-color: #e20101; /* Your desired button color */
    color: #fff;             /* Text color */
    font-size: 0.9em;        /* Adjust font size */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 0.25rem;   /* Rounded corners */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    line-height: normal; /* Ensure consistent line height */
    vertical-align: middle; /* Align if next to other inline elements */
}

/* 2. Hover State for the Button */
.bua-upload-button:hover {
    background-color: #c00000; /* Darker color on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-1px); /* Slight lift effect */
}

/* 3. Active State for the Button */
.bua-upload-button:active {
    background-color: #a00000; /* Even darker when clicked */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transform: translateY(0);
}

/* 4. Visually Hide the Actual File Input */
/* Relies on WordPress core .screen-reader-text class */
/* If this class isn't available or styled correctly in your theme, */
/* uncomment and use the styles below: */
.basic-user-avatar-input.screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute !important; /* Important to override other styles */
   width: 1px;
   word-wrap: normal !important;
}

/*
.basic-user-avatar-input {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
*/


/* 5. Focus Styling for Accessibility (Using :focus-within on container) */
/* This styles the button when the hidden input inside the container receives focus */
.basic-user-avatar-upload-container:focus-within .bua-upload-button {
    outline: 2px solid #005fcc; /* Standard focus blue */
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(226, 1, 1, 0.3); /* Red glow to match button */
}

/* Optional: Add some spacing if needed */
.basic-user-avatar-shortcode-container .current-avatar {
    margin-bottom: 1em;
}
.basic-user-avatar-shortcode-container .basic-user-avatar-upload-container {
    margin-bottom: 0.5em;
}
.basic-user-avatar-shortcode-container .delete-avatar-option {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.basic-user-avatar-shortcode-container .description {
     margin-top: 0.2em;
     margin-bottom: 1em;
     font-size: 0.9em;
     color: #555;
}
.basic-user-avatar-shortcode-container .submit-button-container {
    margin-top: 1em;
}

/* --- End of Custom File Input Button Style --- */
/* ====================================================== */
/* ============ END OF MEMBER FEED STYLES ============= */
/* ====================================================== */


/* ================================================ */
/* === ADDED: Logo Carousel Caption Styles === */
/* ================================================ */

/* Selector targets captions within the specified logo carousel block */
.wp-block-lcb-logo-carousel .alcb__logo-caption {
    font-size: 17px;
    line-height: 2;
    padding: 0 10px;
    text-align: center;
    width: 100%;
    /* --- Overrides using !important to ensure they apply --- */
    position: static !important;  /* Force position back to normal flow */
    bottom: auto !important;     /* Override conflicting bottom positioning */
    left: auto !important;       /* Override conflicting left positioning */
    font-weight: bold !important; /* Force bold text */
    margin-top: 0.5em !important; /* Keep margin-top at 0.5em */
}

/* --- ADDED: Logo Carousel Image Styles --- */
/* Force 3:4 Aspect Ratio for Logo Carousel Images */
.wp-block-lcb-logo-carousel .alcb__logo-image img {
    max-width: 100% !important; /* Keep max-width */
    width: 100% !important;     /* Force width to fill container */
    height: auto !important;     /* Allow height to adjust based on aspect ratio */
    aspect-ratio: 3 / 4 !important; /* Set the aspect ratio */
    object-fit: cover !important; /* Change from contain to cover */
    transition: .2s ease-in-out; /* Keep original transition */
}


/* ====================================================== */
/* ============ DIAGNOSTIC BACKGROUND STYLES ============ */
/* ====================================================== */
/* --- Add this section at the VERY END of your CSS --- */
/* --- Remove this entire section when finished debugging --- */