/* Blogs Preview Plugin Styles
 * Colors driven by CSS custom properties (overridable via plugin settings).
 * Defaults match the Counseling Lone Tree reference design.
 */

/* ── CSS Variable Defaults ── */
:root {
    /* [blogs_preview] colors */
    --bp-title: #2b2926;             /* foreground: hsl(30,5%,16%) */
    --bp-title-hover: #5f7a6a;       /* primary: hsl(150,12%,42%) sage green */
    --bp-text: #6b6764;              /* muted-foreground: hsl(30,5%,42%) */
    --bp-date: #6b6764;              /* muted-foreground */
    --bp-separator: #e4dfd8;         /* border: hsl(35,18%,88%) */

    /* [blogs_grid] colors */
    --bp-accent: #b47a4e;            /* secondary-ish warm accent */
    --bp-card-bg: #fffbf7;
    --bp-card-border: #e4dfd8;
    --bp-load-more: #b47a4e;
    --bp-load-more-border: #c9a882;
}

/* Reset */
.bp-wrapper,
.bp-wrapper *,
.bp-card-wrapper,
.bp-card-wrapper * {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════
   [blogs_preview] - Compact List with Thumbnail
   Matches: HomePage.tsx blog section
   ═══════════════════════════════════════════════ */

/* Single Column Layout (default) */
.bp-wrapper.bp-columns-1 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.bp-wrapper.bp-columns-1 .bp-item {
    display: flex;
    gap: 20px;                       /* gap-5 = 20px */
    padding: 24px 0;                 /* py-6 = 24px */
    text-decoration: none !important;
    border-bottom: 1px solid var(--bp-separator);
    transition: color 0.2s ease;
}

.bp-wrapper.bp-columns-1 .bp-item:first-child {
    padding-top: 0;                  /* first:pt-0 */
}

.bp-wrapper.bp-columns-1 .bp-item:last-child {
    border-bottom: none;
}

/* Multi-Column Grid Layout */
.bp-wrapper:not(.bp-columns-1) .bp-grid {
    display: grid;
    gap: 24px;
}

.bp-wrapper.bp-columns-2 .bp-grid {
    grid-template-columns: repeat(2, 1fr);
}

.bp-wrapper.bp-columns-3 .bp-grid {
    grid-template-columns: repeat(3, 1fr);
}

.bp-wrapper.bp-columns-4 .bp-grid {
    grid-template-columns: repeat(4, 1fr);
}

.bp-wrapper:not(.bp-columns-1) .bp-item {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    text-decoration: none !important;
    border-bottom: 1px solid var(--bp-separator);
    transition: color 0.2s ease;
}

.bp-wrapper:not(.bp-columns-1) .bp-item:last-child {
    border-bottom: none;
}

/* Thumbnail */
.bp-thumbnail {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 0;
}

.bp-no-image {
    background-color: #e4dfd8;
    display: block;
}

/* Content column */
.bp-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Date */
.bp-date {
    font-size: var(--bp-preview-date-size, 16px) !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--bp-preview-date-color, #000000) !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-family: var(--bp-preview-date-font, 'Raleway', sans-serif);
    font-weight: 300;
    line-height: 1.4;
}

/* Title */
.bp-title {
    font-size: var(--bp-preview-title-size, 16px) !important;
    color: var(--bp-preview-title-color, #2b2926) !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.375 !important;
    font-weight: 400 !important;
    font-family: var(--bp-preview-title-font, 'Bodoni Moda', serif);
    letter-spacing: 0.54px;
    transition: color 0.2s ease;
}

.bp-item:hover .bp-title {
    color: var(--bp-title-hover) !important;  /* primary = sage green */
}

/* Excerpt */
.bp-excerpt {
    font-size: var(--bp-preview-excerpt-size, 16px) !important;
    color: var(--bp-preview-excerpt-color, #000000) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.625 !important;
    font-family: var(--bp-preview-excerpt-font, 'Raleway', sans-serif);
    font-weight: 300;
}

/* Read More */
.bp-read-more {
    display: inline-block;
    margin-top: 8px;
    font-size: var(--bp-preview-readmore-size, 16px);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--bp-preview-readmore-color, #000000);
    opacity: 0.6;
    font-family: var(--bp-preview-readmore-font, 'Raleway', sans-serif);
    font-weight: 300;
    transition: opacity 0.2s ease;
}

.bp-item:hover .bp-read-more {
    opacity: 1;                      /* group-hover:text-foreground */
}

/* No Posts */
.bp-no-posts {
    text-align: center;
    color: var(--bp-text);
    padding: 20px;
}

/* View All Blogs Button — btn-outline style from reference */
.bp-view-all-wrap {
    margin-top: 32px;                /* mt-8 */
}

.bp-view-all-btn {
    display: inline-block;
    border: 1px solid var(--bp-title);
    color: var(--bp-title) !important;
    padding: 10px 32px;              /* reduced vertical padding */
    font-weight: 500;               /* font-medium */
    font-size: 12px;                 /* text-xs */
    text-transform: uppercase;
    letter-spacing: 0.15em;          /* tracking-[0.15em] */
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-decoration: none !important;
    transition: all 0.3s ease;       /* duration-300 */
}

.bp-view-all-btn:hover {
    background: var(--bp-title);
    color: #f8f6f2 !important;       /* hover:text-background */
}

/* Preview Responsive */
@media (max-width: 768px) {
    .bp-wrapper.bp-columns-2 .bp-grid,
    .bp-wrapper.bp-columns-3 .bp-grid,
    .bp-wrapper.bp-columns-4 .bp-grid {
        grid-template-columns: 1fr;
    }

    .bp-thumbnail {
        width: 80px;
        min-width: 80px;
    }

    .bp-title {
        font-size: 14px !important;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .bp-wrapper.bp-columns-3 .bp-grid,
    .bp-wrapper.bp-columns-4 .bp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════
   [blogs_grid] - Card Grid with Sidebar Filter
   Matches: TherapistsPage.tsx filter + BlogPage.tsx grid
   ═══════════════════════════════════════════════ */

/* Layout — flex flex-col lg:flex-row gap-10 */
.bp-layout {
    display: flex;
    flex-direction: column;
}

.bp-layout-with-sidebar {
    gap: 40px;                       /* gap-10 = 40px */
}

.bp-grid-area {
    flex: 1;
    min-width: 0;
}

/* ── Sidebar — lg:w-60 flex-shrink-0 ── */
.bp-sidebar {
    flex-shrink: 0;
}

/* Filter Section */
.bp-filter-section {
    margin-bottom: 32px;             /* mb-8 */
}

/* Toggle Button — flex items-center justify-between w-full border-b border-border pb-2 mb-3 */
.bp-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--bp-separator);
    background: none;
    padding: 0 0 8px 0;             /* pb-2 */
    margin-bottom: 12px;            /* mb-3 */
    cursor: pointer;
}

/* Label — text-xs font-semibold uppercase tracking-widest text-muted-foreground */
.bp-filter-label {
    font-size: 12px;                 /* text-xs */
    font-weight: 600;               /* font-semibold */
    text-transform: uppercase;
    letter-spacing: 0.1em;          /* tracking-widest */
    color: var(--bp-text);
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bp-filter-active-label {
    font-weight: 600;
    color: var(--bp-title);
}

/* Chevron */
.bp-chevron {
    width: 16px;                     /* w-4 h-4 */
    height: 16px;
    color: var(--bp-text);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.bp-toggle-open .bp-chevron {
    transform: rotate(180deg);
}

/* Filter Options List — flex flex-col gap-1 max-h-52 overflow-y-auto pr-1 */
.bp-filter-list {
    display: none;
    flex-direction: column;
    gap: 4px;                        /* gap-1 */
    max-height: 260px;               /* slightly more than max-h-52 for more items */
    overflow-y: auto;
    padding-right: 4px;             /* pr-1 */
}

.bp-filter-list-open {
    display: flex;
}

/* Individual Option — matches .jv-team-filter-item */
.bp-filter-option {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;                 /* 0.875rem */
    padding: 6px 10px;              /* 0.375rem 0.625rem */
    border-radius: 6px;             /* 0.375rem */
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 300;
    color: var(--bp-text);
    transition: background 0.2s ease, color 0.2s ease;
}

.bp-filter-option:hover {
    background: #edf2ee;            /* sage-tint hover */
}

/* Active: green bg + white text — matches .jv-team-filter-item.active */
.bp-filter-option.bp-filter-active {
    background: #5f7a6a;            /* primary sage green */
    color: #ffffff;
    font-weight: 500;
}

/* Loading state */
.bp-loading {
    text-align: center;
    color: var(--bp-text);
    padding: 40px 20px;
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
}

/* Sidebar responsive */
@media (min-width: 1024px) {
    .bp-layout-with-sidebar {
        flex-direction: row;         /* lg:flex-row */
    }

    .bp-sidebar {
        width: 240px;               /* lg:w-60 */
    }

    /* Auto-open the list on desktop */
    .bp-filter-list {
        display: flex;
    }
}

/* Grid — grid md:grid-cols-2 lg:grid-cols-3 gap-8 */
.bp-card-grid {
    display: grid;
    gap: 32px;                       /* gap-8 = 32px */
}

.bp-card-cols-1 {
    grid-template-columns: 1fr;
}

.bp-card-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.bp-card-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.bp-card-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Card — card-lift rounded-xl overflow-hidden border border-border bg-card */
.bp-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;             /* rounded-xl */
    overflow: hidden;
    border: 1px solid var(--bp-card-border);
    background: var(--bp-card-bg);
    text-decoration: none !important;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;  /* duration-300 */
    cursor: pointer;
}

.bp-card:hover {
    transform: translateY(-4px);     /* -translate-y-1 = 4px */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);  /* shadow-lg */
}

/* Card Image — fill width, crop from top */
.bp-card-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

.bp-card-no-image {
    background-color: #e4dfd8;
    aspect-ratio: 3 / 2;
}

/* Card Body — p-5 = 20px */
.bp-card-body {
    padding: 20px;
}

/* Meta Row — flex items-center gap-2 mb-2 */
.bp-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;                        /* gap-2 = 8px */
    margin-bottom: 8px;              /* mb-2 = 8px */
}

/* Category */
.bp-card-category {
    font-size: var(--bp-grid-category-size, 10px) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bp-grid-category-color, #b47a4e) !important;
    font-weight: 600 !important;
    font-family: var(--bp-grid-category-font, 'Raleway', sans-serif);
}

/* Card Date */
.bp-card-date {
    font-size: var(--bp-grid-date-size, 10px) !important;
    color: var(--bp-grid-date-color, #6b6764) !important;
    font-family: var(--bp-grid-date-font, 'Raleway', sans-serif);
    font-weight: 300;
}

/* Card Title */
.bp-card-title {
    font-family: var(--bp-grid-title-font, 'Bodoni Moda', serif) !important;
    font-size: var(--bp-grid-title-size, 18px) !important;
    font-weight: 600 !important;
    color: var(--bp-grid-title-color, #2b2926) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.54px;
}

/* Card Excerpt */
.bp-card-excerpt {
    font-size: var(--bp-grid-excerpt-size, 14px) !important;
    color: var(--bp-grid-excerpt-color, #6b6764) !important;
    line-height: 1.625 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--bp-grid-excerpt-font, 'Raleway', sans-serif);
    font-weight: 300;
}

/* Card Read More */
.bp-card-read-more {
    display: inline-block;
    margin-top: 12px;
    font-size: var(--bp-grid-readmore-size, 14px) !important;
    font-weight: 500 !important;
    color: var(--bp-grid-readmore-color, #b47a4e) !important;
    font-family: var(--bp-grid-readmore-font, 'Raleway', sans-serif);
    text-decoration: none !important;
    transition: text-decoration 0.2s ease;
}

.bp-card:hover .bp-card-read-more {
    text-decoration: underline !important;  /* group-hover:underline */
}

/* Load More Button */
.bp-load-more-wrap {
    text-align: center;
    margin-top: 32px;
}

.bp-load-more {
    background: none;
    border: 1px solid var(--bp-load-more-border);
    color: var(--bp-load-more);
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: 6px;
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: background 0.2s ease, color 0.2s ease;
}

.bp-load-more:hover {
    background: var(--bp-load-more);
    color: #fff;
}

.bp-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Card Grid Responsive */
@media (max-width: 768px) {
    .bp-card-grid {
        grid-template-columns: 1fr !important;
    }

    .bp-card-image {
        aspect-ratio: 3 / 2;
    }

    .bp-card-title {
        font-size: 16px !important;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .bp-card-cols-3,
    .bp-card-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}