/**
 * Components — Pool Type & Series Cards
 * Selectable pool-type / series cards: sizing, hover/selected, card image
 * wrapper, body/title/text, form-check controls, the description scroll area,
 * and the progressive --wppb-card-scale responsive system.
 * Migrated from pb-sections.css (scope-first decomposition).
 */

#wppb_wrapper .pool-type-card {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 0;
}

/* ===================================================================
   STANDARDIZED POOL TYPE & SERIES CARD STYLING
   =================================================================== */

/* ===================================================================
   SERIES / TYPE CARD GRID — CONTAINER-AWARE, THEME-PROOF LAYOUT
   ===================================================================
   
   Cards lay out with a CSS Grid keyed to the real container width (below),
   so they never overlap on themes that clamp the builder's width. The
   per-viewport @media blocks only tune card height/image/typography.
   
   =================================================================== */

/* Container grid: fit as many cards as the ACTUAL container allows, with even
   gaps, independent of the viewport-based Bootstrap breakpoints. min-width:0 on
   the card drops the old 290px floor that overflowed narrow columns and made
   neighbours overlap; the grid's minmax is now the only minimum card width. */
#wppb_wrapper #wppb_type_container .row.g-2,
#wppb_wrapper #wppb_series_container .row.g-2 {
    display: grid;

    /* auto-fit's column COUNT uses the track's MAX when that max is definite, so a
       fixed max (e.g. 360px) collapses to a single column whenever 2*max+gap exceeds
       the container. Use a flexible 1fr max so the count is driven by the 260px MIN
       instead; the card's own max-width (below) caps how wide a card actually gets.
       The min must be a fixed length — a percentage here voids the declaration. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--wppb-spacing-lg);
    justify-content: center;
    margin: 0;

    /* Side gutter so cards never butt against the viewport edge when the grid
       fills the container (e.g. full-bleed breakout, or 1-column on phones). */
    padding-inline: var(--wppb-spacing-md);
}

/* Phones: one full-width column (matches the prior col-sm-12 behavior and
   prevents the 260px track minimum from overflowing very narrow containers). */
@media (max-width: 575.98px) {
    #wppb_wrapper #wppb_type_container .row.g-2,
    #wppb_wrapper #wppb_series_container .row.g-2 {
        grid-template-columns: 1fr;
    }
}

#wppb_wrapper #wppb_type_container .row.g-2 > [class*="col-"],
#wppb_wrapper #wppb_series_container .row.g-2 > [class*="col-"] {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

#wppb_wrapper #wppb_type_container .row.g-2 .pool-type-card,
#wppb_wrapper #wppb_series_container .row.g-2 .series-card {
    min-width: 0 !important;     /* drop the 290px floor that overflowed columns */
    max-width: 360px !important; /* cap card width; tracks flex (1fr) and fill the row */
    margin: 0 auto !important;   /* gap handles spacing; auto centers card in a wide track */
}

/* Per-viewport card-internal tuning (height / image / typography). */
@media (min-width: 1920px) {
    /* Target series cards using Bootstrap column classes for precision */
    #wppb_wrapper .col-xxl-3.series-card,
    #wppb_wrapper .series-card {
        /* Bootstrap's col-xxl-3 handles the basic grid, we enhance with optimal spacing */
        max-width: none; /* Let Bootstrap handle the width */
    }
    
    /* Ensure container properly distributes 4 columns */
    #wppb_wrapper .series-card .card,
    #wppb_wrapper .col-xxl-3 .card.series-card {
        height: 100%;
        min-height: 300px; /* Consistent height for professional look */
    }
    
    /* Optimize image display for 4-column layout */
    #wppb_wrapper .series-card .card-img-top-wrapper,
    #wppb_wrapper .col-xxl-3 .series-card .card-img-top-wrapper {
        height: 180px; /* Slightly smaller for 4-column layout */
    }
    
    /* Adjust text sizing for 4-column layout */
    #wppb_wrapper .series-card .card-title,
    #wppb_wrapper .col-xxl-3 .series-card .card-title {
        font-size: 1.1rem; /* Slightly smaller for better fit */
    }
    
    #wppb_wrapper .series-card .card-text,
    #wppb_wrapper .col-xxl-3 .series-card .card-text {
        font-size: 0.9rem; /* Compact text for 4 columns */
    }
    
    /* Ensure the row container has proper spacing for 4 columns */
    #wppb_wrapper .row.g-2 .col-xxl-3 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Additional responsive improvements for series cards across all screen sizes */
@media (min-width: 1400px) and (max-width: 1919px) {
    /* Bootstrap XXL screens but below 1920px - maintain 3 columns with better spacing */
    #wppb_wrapper .series-card .card {
        min-height: 320px;
    }
    
    #wppb_wrapper .series-card .card-img-top-wrapper {
        height: 200px;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    /* Bootstrap LG screens - 3 columns with comfortable spacing */
    #wppb_wrapper .series-card .card {
        min-height: 320px;
    }
    
    #wppb_wrapper .series-card .card-img-top-wrapper {
        height: 320px;
    }
}



/* Unified card styling for both pool type and series cards */
#wppb_wrapper .pool-type-card,
#wppb_wrapper .series-card {
    min-width: calc(var(--wppb-card-min-width) * var(--wppb-card-scale)) !important;
    min-height: calc(var(--wppb-card-min-height) * var(--wppb-card-scale)) !important;
    max-width: calc(var(--wppb-card-max-width) * var(--wppb-card-scale)) !important;
    max-height: calc(var(--wppb-card-max-height) * var(--wppb-card-scale)) !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 2px solid var(--wppb-border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;

}

#wppb_wrapper .card-img-top-wrapper {
    padding: 0 !important;
    width: 100% !important;
    height: calc(var(--wppb-card-image-height) * var(--wppb-card-scale)) !important;
    max-height: calc(var(--wppb-card-image-height) * var(--wppb-card-scale)) !important;
    min-height: calc(var(--wppb-card-image-height) * var(--wppb-card-scale)) !important;
    position: relative;
    overflow: hidden; /* Prevent content overflow */
    background: var(--wppb-gray-light); /* Light background in case image fails */
}

/* Series cards now use simple images - carousel functionality removed */

/* Card image styling */
#wppb_wrapper .card-img-top {
    width: 100% !important;
    height: calc(var(--wppb-card-image-height) * var(--wppb-card-scale)) !important;
    object-fit: cover !important;
    overflow: hidden !important;
}

#wppb_wrapper .pool-type-card:hover,
#wppb_wrapper .series-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--wppb-primary);
}

#wppb_wrapper .pool-type-card.selected,
#wppb_wrapper .series-card.selected {
    border: 3px solid var(--wppb-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
    transform: translateY(-2px);
}

/* Standardized image container */
#wppb_wrapper .pool-type-card .card-img-top-wrapper,
#wppb_wrapper .series-card .card-img-top-wrapper {
    overflow: hidden;
    background: var(--wppb-gray-light);
}

/* Ensure series cards maintain consistent height in Bootstrap grid */
#wppb_wrapper .series-card {
    min-height: 320px; /* Minimum card height to prevent stacking */
    display: flex;
    flex-direction: column;
}

#wppb_wrapper .series-card .card-body {
    flex-grow: 1; /* Allow card body to expand */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Standardized card body */
#wppb_wrapper .pool-type-card .card-body,
#wppb_wrapper .series-card .card-body {
    padding: calc(var(--wppb-card-padding) * var(--wppb-card-scale));
    display: flex;
    flex-direction: column;
}

/* Standardized card titles */
#wppb_wrapper .pool-type-card .card-title,
#wppb_wrapper .series-card .card-title {
    font-size: calc(var(--wppb-card-title-size) * var(--wppb-card-scale));
    font-weight: 700;
    color: var(--wppb-text-dark);
    margin-bottom: calc(0.75rem * var(--wppb-card-scale));
    flex: 0 0 auto;
}

/* Description container with scroll */
#wppb_wrapper .pool-type-card .description-container,
#wppb_wrapper .series-card .description-container {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 0.75rem;
    padding-right: 0.5rem;
}

/* Standardized card text */
#wppb_wrapper .pool-type-card .card-text,
#wppb_wrapper .series-card .card-text {
    font-size: calc(var(--wppb-card-text-size) * var(--wppb-card-scale));
    color: var(--wppb-muted);
    line-height: 1.4;
    line-clamp: 3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0;
}

/* Custom scrollbar for description */
#wppb_wrapper .description-container::-webkit-scrollbar {
    width: 4px;
}

#wppb_wrapper .description-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

#wppb_wrapper .description-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

#wppb_wrapper .description-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Standardized form check styling */
#wppb_wrapper .pool-type-card .form-check,
#wppb_wrapper .series-card .form-check {
    margin-bottom: 0;
    padding: 0.5rem 0;
}

#wppb_wrapper .pool-type-card .form-check-input,
#wppb_wrapper .series-card .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--wppb-border);
    background-color: var(--wppb-white);
}

#wppb_wrapper .pool-type-card .form-check-input:checked,
#wppb_wrapper .series-card .form-check-input:checked {
    background-color: var(--wppb-primary);
    border-color: var(--wppb-primary);
}

#wppb_wrapper .pool-type-card .form-check-input:focus,
#wppb_wrapper .series-card .form-check-input:focus {
    border-color: var(--wppb-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#wppb_wrapper .pool-type-card .form-check-label,
#wppb_wrapper .series-card .form-check-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wppb-gray-dark);
    cursor: pointer;
    line-height: 1.25rem;
}

/* Equal height cards - disabled since we use fixed heights */
#wppb_wrapper .pool-type-card.h-100,
#wppb_wrapper .series-card.h-100 {
    height: 100%;
}

@media (max-width: 768px) {
    #wppb_wrapper .pool-type-card .card-body,
    #wppb_wrapper .series-card .card-body {
        padding: 1rem !important;
    }
    
    #wppb_wrapper .pool-type-card .card-title,
    #wppb_wrapper .series-card .card-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    #wppb_wrapper .pool-type-card .form-check-input,
    #wppb_wrapper .series-card .form-check-input {
        width: 1.1rem;
        height: 1.1rem;
    }
    
    #wppb_wrapper .pool-type-card .form-check-label,
    #wppb_wrapper .series-card .form-check-label {
        font-size: 0.875rem;
    }
}

/* ===================================================================
   PROGRESSIVE CARD SCALING - RESPONSIVE BREAKPOINTS
   ===================================================================
   
   Cards scale intelligently across different screen sizes while 
   maintaining proportions and usability
   
   =================================================================== */

/* Large tablets and small desktops (960px - 1199px): Scale to 90% */
@media (max-width: 1199px) and (min-width: 960px) {
    #wppb_wrapper {
        --wppb-card-scale: 0.9;
    }
}

/* Tablets (768px - 959px): Scale to 85% */
@media (max-width: 959px) and (min-width: 768px) {
    #wppb_wrapper {
        --wppb-card-scale: 0.85;
    }
}

/* Small tablets (640px - 767px): Scale to 80% */
@media (max-width: 767px) and (min-width: 640px) {
    #wppb_wrapper {
        --wppb-card-scale: 0.8;
    }
    
    /* Additional adjustments for better spacing */
    #wppb_wrapper .pool-type-card,
    #wppb_wrapper .series-card {
        margin: 0.5rem !important;
        margin: 0.25rem auto !important;
    }
    
}

/* Large mobile devices (480px - 639px): Scale to 75% */
@media (max-width: 639px) and (min-width: 480px) {
    #wppb_wrapper {
        --wppb-card-scale: 0.75;
    }
    
    /* Slightly reduce border radius for smaller cards */
    #wppb_wrapper .pool-type-card,
    #wppb_wrapper .series-card {
        border-radius: 0.5rem !important;
        margin: 0.25rem auto !important;
    }
    
}

/* Small mobile devices (320px - 479px): Scale to 70% */
@media (max-width: 479px) {
    #wppb_wrapper {
        --wppb-card-scale: 0.7;
    }
    
    /* Minimal margins for very small screens */
    #wppb_wrapper .pool-type-card,
    #wppb_wrapper .series-card {
        border-radius: 0.375rem !important;
        margin: 0.25rem auto !important;
    }
    
    /* Adjust form elements for better touch targets */
    #wppb_wrapper .pool-type-card .form-check-input,
    #wppb_wrapper .series-card .form-check-input {
        width: calc(1.1rem * var(--wppb-card-scale));
        height: calc(1.1rem * var(--wppb-card-scale));
    }
    
    /* Ensure text remains readable */
    #wppb_wrapper .pool-type-card .card-title,
    #wppb_wrapper .series-card .card-title {
        font-size: clamp(0.9rem, calc(var(--wppb-card-title-size) * var(--wppb-card-scale)), 1.1rem);
    }
    
    #wppb_wrapper .pool-type-card .card-text,
    #wppb_wrapper .series-card .card-text {
        font-size: clamp(0.75rem, calc(var(--wppb-card-text-size) * var(--wppb-card-scale)), 0.825rem);
    }
}