/**
 * Dream Card Components CSS
 * 
 * Specialized dream card layouts with float-based positioning
 * Extends base card system from cards.css
 * 
 * Contains:
 * - Dream cards with float layouts
 * - Responsive grid systems for dream cards
 * - Desktop-first responsive design
 * - Image sizing constraints
 */

/* ============================
   Dream Card
   ============================ */

/* Dream Card - MIGRATED FROM pages-special.css
 * Remains specialized due to unique horizontal layout with fixed image width
 * Visual consistency maintained with card system through shared variables
 */
body.theme-pt .finding-dreams .dream-card {
    margin-bottom: 35px;
    display: block;
    padding: var(--card-dream-padding) var(--card-dream-padding);
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow-sm);
    border-radius: var(--card-radius-xl);
    overflow: hidden;
    transition: var(--card-transition);
}


/* Float-based layout for dream card content */
body.theme-pt .finding-dreams .dream-card .dream-content-row {
    display: block;
    overflow: hidden; /* Clearfix for floated elements */
    margin-top: var(--space-md);
}

/* Base image sizing - 110x108px constraint with float layout */
body.theme-pt .finding-dreams .dream-card .img {
    float: left;
    margin-right: var(--space-md); /* 16px gap between image and text */
    margin-bottom: var(--space-sm); /* 8px gap below image for wrapped text */
    width: 110px;
    height: auto;
}

body.theme-pt .finding-dreams .dream-card .img img {
    max-width: 110px;
    max-height: 108px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
}

/* Text container - allows natural text flow around floated image */
body.theme-pt .finding-dreams .dream-card .text {
    display: block;
    /* No clear property - allows text to wrap around floated image */
    /* No explicit width - allows natural text flow */
}

body.theme-pt .finding-dreams .dream-card h3 {
    color: var(--color-text-secondary);
    font-size: var(--card-subtitle-size);
    font-weight: 700;
    line-height: 1.364em;
    margin-bottom: 8px;
}

body.theme-pt .finding-dreams .dream-card p {
    margin-bottom: 0px;
    color: var(--card-text-muted);
}

/* ============================
   Dream Card Grid System
   ============================ */

/* Finding Dreams Section - Desktop-First Responsive Layout
 * Optimized for larger screens with progressive enhancement approach
 */

/* Desktop-First Grid Layout for Dream Cards */
body.theme-pt .finding-dreams .dream-cards-grid {
    display: grid;
    gap: var(--space-xl);
    /* Base: Large Desktop (1200px+) - 3 columns, 2 rows (same as desktop) */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
}

/* Position cards strategically for best visual balance on large desktop */
body.theme-pt .finding-dreams .dream-card:nth-child(4) {
    grid-column: 1 / 2;
}

body.theme-pt .finding-dreams .dream-card:nth-child(5) {
    grid-column: 2 / 3;
}

body.theme-pt .finding-dreams .dream-card:nth-child(6) {
    grid-column: 3 / 4;
}

/* ============================
   Dream Card Responsive Design
   ============================ */

/* Standard Desktop (992px - 1199px) - 3 columns, 2 rows */
@media (max-width: 1199.98px) and (min-width: 992px) {
    body.theme-pt .finding-dreams .dream-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: var(--space-lg);
    }
}

/* Tablet Portrait (768px - 991px) - 2 columns, 3 rows for better balance */
@media (max-width: 991.98px) and (min-width: 768px) {
    body.theme-pt .finding-dreams .dream-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: var(--space-lg);
    }
    
    /* Reset child positioning for tablet */
    body.theme-pt .finding-dreams .dream-card:nth-child(4),
    body.theme-pt .finding-dreams .dream-card:nth-child(5),
    body.theme-pt .finding-dreams .dream-card:nth-child(6) {
        grid-column: auto;
    }
    
    /* Mobile Dream Card Spacing Fix - Reduce Excessive Padding */
    body.theme-pt .finding-dreams .dream-card {
        padding: var(--space-md) var(--space-lg);
        margin-bottom: var(--space-lg);
    }
}

/* Mobile (max-width: 767px) - Single column, 6 rows */
@media (max-width: 767.98px) {
    body.theme-pt .finding-dreams .dream-cards-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, auto);
        gap: var(--space-md);
    }
    
    /* Further reduce padding on small screens */
    body.theme-pt .finding-dreams .dream-card {
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-md);
    }
    
    /* Adjust image size for mobile */
    body.theme-pt .finding-dreams .dream-card .img {
        width: 90px;
        margin-right: var(--space-sm);
    }
    
    body.theme-pt .finding-dreams .dream-card .img img {
        max-width: 90px;
        max-height: 88px;
    }
}

/* Small Mobile (max-width: 575px) - Optimize for very small screens */
@media (max-width: 575.98px) {
    body.theme-pt .finding-dreams .dream-card {
        padding: var(--space-xs) var(--space-sm);
    }
    
    body.theme-pt .finding-dreams .dream-card h3 {
        font-size: var(--font-size-lg);
        margin-bottom: 6px;
    }
    
    body.theme-pt .finding-dreams .dream-card .img {
        width: 80px;
        margin-right: var(--space-xs);
    }
    
    body.theme-pt .finding-dreams .dream-card .img img {
        max-width: 80px;
        max-height: 78px;
    }
}