/* 
 * Custom Layout System for iPortfolio Theme
 * Provides flexible layout options for all sections
 */

/* =================
   TEXT ALIGNMENTS
   ================= */
.text-align-left { text-align: left !important; }
.text-align-center { text-align: center !important; }
.text-align-right { text-align: right !important; }
.text-align-justify { text-align: justify !important; }

/* =================
   HERO LAYOUTS
   ================= */
.hero-layout-center .hero-container {
    text-align: center;
    justify-content: center;
}

.hero-layout-left .hero-container {
    text-align: left;
    justify-content: flex-start;
}

.hero-layout-right .hero-container {
    text-align: right;
    justify-content: flex-end;
}

/* =================
   ABOUT LAYOUTS
   ================= */
.about-layout-default .about-content {
    display: block;
}

.about-layout-two-column .about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.about-layout-centered .about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* =================
   STATS LAYOUTS
   ================= */
.stats-layout-grid-2 .stats-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.stats-layout-grid-3 .stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.stats-layout-grid-4 .stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.stats-layout-horizontal .stats-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2rem;
}

/* =================
   SKILLS LAYOUTS
   ================= */
.skills-layout-default .skills-content {
    display: block;
}

.skills-layout-two-column .skills-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.skills-layout-grid .skills-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* =================
   PORTFOLIO LAYOUTS
   ================= */
.portfolio-layout-grid-2 .portfolio-isotope {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.portfolio-layout-grid-3 .portfolio-isotope {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.portfolio-layout-grid-4 .portfolio-isotope {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.portfolio-layout-masonry .portfolio-isotope {
    columns: 3;
    column-gap: 2rem;
}

.portfolio-layout-masonry .portfolio-item {
    break-inside: avoid;
    margin-bottom: 2rem;
}

/* =================
   SERVICES LAYOUTS
   ================= */
.services-layout-grid-2 .services-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.services-layout-grid-3 .services-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.services-layout-cards .services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.services-layout-cards .service-item {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    transition: transform 0.3s ease;
}

.services-layout-cards .service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.services-layout-list .services-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.services-layout-list .service-item {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border-left: 4px solid #149ddd;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
}

/* =================
   CONTACT LAYOUTS
   ================= */
.contact-layout-default .contact-content {
    display: block;
}

.contact-layout-two-column .contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.contact-layout-centered .contact-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* =================
   ITEM SPACING
   ================= */
.item-spacing-compact {
    --section-padding: 1rem 0;
    --item-gap: 1rem;
}

.item-spacing-normal {
    --section-padding: 2rem 0;
    --item-gap: 2rem;
}

.item-spacing-spacious {
    --section-padding: 4rem 0;
    --item-gap: 3rem;
}

/* Apply spacing variables */
.item-spacing-compact .section-title,
.item-spacing-normal .section-title,
.item-spacing-spacious .section-title {
    margin-bottom: var(--item-gap);
}

.item-spacing-compact [class*="-container"],
.item-spacing-normal [class*="-container"],
.item-spacing-spacious [class*="-container"] {
    gap: var(--item-gap);
    padding: var(--section-padding);
}

/* =================
   RESPONSIVE DESIGN
   ================= */
@media (max-width: 768px) {
    /* Stack columns on mobile */
    .about-layout-two-column .about-content,
    .contact-layout-two-column .contact-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Reduce grid columns on mobile */
    .stats-layout-grid-4 .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-layout-grid-3 .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .portfolio-layout-grid-4 .portfolio-isotope,
    .portfolio-layout-grid-3 .portfolio-isotope {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .services-layout-grid-3 .services-container {
        grid-template-columns: 1fr;
    }
    
    .services-layout-grid-2 .services-container {
        grid-template-columns: 1fr;
    }
    
    /* Masonry to single column on mobile */
    .portfolio-layout-masonry .portfolio-isotope {
        columns: 1;
    }
}

@media (max-width: 576px) {
    /* Single column on very small screens */
    .stats-layout-grid-2 .stats-container,
    .stats-layout-grid-3 .stats-container,
    .stats-layout-grid-4 .stats-container {
        grid-template-columns: 1fr;
    }
    
    .portfolio-layout-grid-2 .portfolio-isotope,
    .portfolio-layout-grid-3 .portfolio-isotope,
    .portfolio-layout-grid-4 .portfolio-isotope {
        grid-template-columns: 1fr;
    }
    
    .skills-layout-two-column .skills-content {
        grid-template-columns: 1fr;
    }
    
    /* List layout for services on mobile */
    .services-layout-list .service-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* =================
   ANIMATION ENHANCEMENTS
   ================= */
.portfolio-layout-masonry .portfolio-item,
.services-layout-cards .service-item,
.stats-layout-grid-2 .stat-item,
.stats-layout-grid-3 .stat-item,
.stats-layout-grid-4 .stat-item {
    transition: all 0.3s ease;
}

/* Hover effects for interactive layouts */
.portfolio-layout-grid-2 .portfolio-item:hover,
.portfolio-layout-grid-3 .portfolio-item:hover,
.portfolio-layout-grid-4 .portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* =================
   UTILITY CLASSES
   ================= */
.layout-full-width {
    width: 100%;
    max-width: none;
}

.layout-contained {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.layout-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Section background options */
.section-bg-light {
    background-color: #f8f9fa;
}

.section-bg-dark {
    background-color: #040b14;
    color: white;
}

.section-bg-primary {
    background-color: #149ddd;
    color: white;
}

/* Custom scrollbar for better UX */
.services-layout-list::-webkit-scrollbar {
    width: 8px;
}

.services-layout-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.services-layout-list::-webkit-scrollbar-thumb {
    background: #149ddd;
    border-radius: 10px;
}

.services-layout-list::-webkit-scrollbar-thumb:hover {
    background: #0d8abc;
}