/**
 * Pattern Layout Styles
 */
.pattern-section {
    height: 700px;                /* Reduced height from 600px to 400px */
    position: relative;
    z-index: 1;                   /* Lower z-index to stay behind other content */
    
    /* Base styling */
    background-color: var(--color-white);
    background-repeat: repeat;
    
    /* Container styling */
    .container {
        height: 100%;
        position: relative;
        z-index: 2;
    }
    
    /* Preview mode styling */
    .layout-preview-notice {
        padding: 2rem;
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px dashed #dee2e6;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 500px;
        
        p {
            margin: 0.5rem 0;
            font-size: 1.4rem;
            color: #6c757d;
        }
    }
}

/* Pattern variations with responsive sizing */
.pattern-palmetto {
    background-image: url('/wp-content/themes/uscaa/assets/img/patterns/bg-tile-palmetto.svg');
    background-size: 3%;  /* Reduced from 5% to 3% */
}

.pattern-palmetto-alt {
    background-image: url('/wp-content/themes/uscaa/assets/img/patterns/bg-tile-palmetto_alt.svg');
    background-size: 3%;  /* Reduced from 5% to 3% */
}

/* New Circles pattern from child theme */
.pattern-circles {
    background-image: url('/wp-content/themes/uscaa-child/assets/img/patterns/circles.png');
    background-size: 5%;  /* Reduced from 8% to 5% */
    background-repeat: repeat;
}

/* Responsive pattern sizing */
@media (max-width: 1600px) {
    .pattern-palmetto,
    .pattern-palmetto-alt {
        background-size: 4%;  /* Reduced from 6% to 4% */
    }
    
    .pattern-circles {
        background-size: 6%;  /* Reduced from 10% to 6% */
    }
}

@media (max-width: 1200px) {
    .pattern-palmetto,
    .pattern-palmetto-alt {
        background-size: 5%;  /* Reduced from 8% to 5% */
    }
    
    .pattern-circles {
        background-size: 8%;  /* Reduced from 12% to 8% */
    }
}

@media (max-width: 992px) {
    .pattern-palmetto,
    .pattern-palmetto-alt {
        background-size: 7%;  /* Reduced from 10% to 7% */
    }
    
    .pattern-circles {
        background-size: 10%;  /* Reduced from 15% to 10% */
    }
}

@media (max-width: 768px) {
    .pattern-palmetto,
    .pattern-palmetto-alt {
        background-size: 9%;  /* Reduced from 12% to 9% */
    }
    
    .pattern-circles {
        background-size: 12%;  /* Reduced from 18% to 12% */
    }
}

@media (max-width: 576px) {
    .pattern-palmetto,
    .pattern-palmetto-alt {
        background-size: 12%;  /* Reduced from 15% to 12% */
    }
    
    .pattern-circles {
        background-size: 15%;  /* Reduced from 22% to 15% */
    }
}