/**
 * Experience Card Components CSS
 * 
 * Experience/testimonial card styling for seller/buyer sections
 * Extends base card system from cards.css
 * 
 * Contains:
 * - Experience cards (.card-experience)
 * - Experience section layout optimizations
 * - Card link wrappers
 * - Responsive design for experience cards
 */

/* ============================
   Experience Card Link Wrapper
   ============================ */

/* Experience Card Link Wrapper */
body.theme-pt .card-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    height: 100%;
}

/* Experience Card Link Wrapper - Specific to experiences section */
body.theme-pt .experiences .card-link {
    padding-bottom: var(--space-lg);
}

body.theme-pt .card-link:hover,
body.theme-pt .card-link:focus {
    color: inherit;
    text-decoration: none;
}

/* ============================
   Experience Card
   ============================ */

/* Experience Card Variant - For Seller/Buyer Experience sections */
body.theme-pt .card.card-experience {
    box-shadow: rgba(0, 0, 0, 0.08) 4px 4px 10px 0px;
}


/* Experience Card Header Title */
body.theme-pt .card.card-experience .card-header-title {
    padding: var(--card-padding-lg) var(--card-padding-lg) 0;
    background: var(--card-bg);
}

/* Experience Card Image */
body.theme-pt .card.card-experience .card-image {
    height: 300px;
    flex-shrink: 0;
}

body.theme-pt .card.card-experience .card-image img {
    object-fit: contain;
}

/* Experience Card Body */
body.theme-pt .card.card-experience .card-body {
    padding: var(--card-padding-lg);
}

/* Experience Card Title */
body.theme-pt .card.card-experience .card-title,
body.theme-pt .card.card-experience h3.card-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--heading-color-primary);
    margin-bottom: var(--space-sm);
    line-height: var(--heading-line-height-tight);
    text-align: center;
}

/* Experience Card Subtitle */
body.theme-pt .card.card-experience .card-subtitle,
body.theme-pt .card.card-experience h4.card-subtitle {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    line-height: var(--line-height-normal);
    text-align: left;
}

/* Experience Card Content */
body.theme-pt .card.card-experience .card-content {
    color: var(--color-text-primary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-md);
    flex-grow: 1;
    text-align: left;
}

body.theme-pt .card.card-experience .card-content p {
    margin-bottom: var(--space-md);
}

body.theme-pt .card.card-experience .card-content p:last-child {
    margin-bottom: 0;
}

/* Experience Card Button */
body.theme-pt .card.card-experience .btn {
    margin-top: auto;
    align-self: center;
}

/* ============================
   Experience Section Layout
   ============================ */

/* Experiences Section - 2-Column Layout Optimization */

/* Fix for .experiences section card width and mobile spacing issues
 * Desktop: Experience cards should fully utilize their 2-column layout (50% width each)
 * Mobile: Cards should have equal spacing to screen edges like property cards
 */

/* Desktop: Ensure proper 2-column layout with normal Bootstrap spacing */
@media (min-width: 992px) {
    body.theme-pt .experiences .col-lg-6 {
        padding-left: var(--bs-gutter-x, 0.75rem);
        padding-right: var(--bs-gutter-x, 0.75rem);
    }
    
    body.theme-pt .experiences .card.card-experience {
        width: 100%;
        max-width: none;
    }
}

/* Mobile: Match property card spacing behavior for consistent edge spacing */
@media (max-width: 767.98px) {
    /* Fix missing container padding to match properties and reviews sections */
    body.theme-pt .experiences .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* Ensure proper spacing between cards in 2-column layout */
body.theme-pt .experiences .card-link {
    display: block;
    height: 100%;
    width: 100%;
}

/* ============================
   Experience Card Responsive Design
   ============================ */

/* Responsive adjustments for tablets */
@media (max-width: 991.98px) {
    body.theme-pt .card.card-experience .card-image {
        height: 250px;
    }
    
    body.theme-pt .card.card-experience .card-body {
        padding: var(--card-padding);
    }
    
    body.theme-pt .card.card-experience .card-title,
    body.theme-pt .card.card-experience h3.card-title {
        font-size: var(--font-size-xl);
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 575.98px) {
    body.theme-pt .card.card-experience .card-image {
        height: 200px;
    }
    
    body.theme-pt .card.card-experience .card-body {
        padding: var(--card-padding-sm);
    }
    
    body.theme-pt .card.card-experience .card-title,
    body.theme-pt .card.card-experience h3.card-title {
        font-size: var(--font-size-lg);
    }
    
    body.theme-pt .card.card-experience .card-subtitle,
    body.theme-pt .card.card-experience h4.card-subtitle {
        font-size: var(--font-size-md);
    }
    
    body.theme-pt .card.card-experience .card-content {
        font-size: var(--font-size-sm);
    }
}