/**
 * Artistic Advisory Board Section Styles
 * 
 * Using site-grid-rails.css layout system for responsive design
 * Auto-moving slider layout for team member cards
 */

@layer components {

/* Main section - full width background */
.artistic-advisory {
    background-color: var(--ica-mint); /* Brand mint background */
    padding: clamp(40px, 8vw, 80px) 0; /* Responsive padding */
}

/* Inner container - constrained to content rails */
.artistic-advisory__inner {
    /* Uses rail--content class from site-grid-rails.css */
    max-width: var(--wp--style--global--wide-size, 1280px);
    margin: 0 auto;
    position: relative;
    padding: 0 clamp(1rem, 4vw, 2rem); /* Responsive horizontal padding */
    box-sizing: border-box;
}

/* Header with title and navigation controls */
.artistic-advisory__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(30px, 6vw, 60px); /* Responsive margin */
    gap: 20px; /* Prevent overlap on small screens */
}

.artistic-advisory__title {
    font-family: var(--font-heading); /* Brand heading font */
    color: var(--ica-green-deep); /* Brand deep green */
    font-size: clamp(1.75rem, 4vw, 2.5rem); /* Responsive font size */
    font-weight: 500 !important;
    line-height: 1.2;
    margin: 0;
    flex: 1; /* Allow title to take available space */
    min-width: 0; /* Allow text to shrink */
}

/* Navigation controls at top right */
.artistic-advisory__nav-controls {
    display: flex;
    gap: clamp(10px, 2vw, 15px); /* Responsive gap */
    align-items: center;
    flex-shrink: 0; /* Prevent controls from shrinking */
}

.artistic-advisory__nav-btn {
    background: var(--ica-green-deep);
    border: none;
    border-radius: 50%;
    width: clamp(40px, 8vw, 50px); /* Responsive button size */
    height: clamp(40px, 8vw, 50px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ease);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 40px; /* Ensure minimum touch target */
    min-height: 40px;
}

.artistic-advisory__nav-btn:hover {
    background: var(--ica-teal);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.artistic-advisory__nav-btn:active {
    transform: scale(0.95);
}

.artistic-advisory__nav-btn:focus {
    outline: 2px solid var(--ica-lime);
    outline-offset: 2px;
}

.artistic-advisory__nav-icon {
    width: clamp(18px, 4vw, 24px); /* Responsive icon size */
    height: clamp(18px, 4vw, 24px);
    filter: brightness(0) invert(1); /* Make icons white */
    transition: filter var(--ease);
}

.artistic-advisory__nav-btn:hover .artistic-advisory__nav-icon {
    filter: brightness(0) invert(1); /* Keep white on hover */
}

/* Slider container */
.artistic-advisory__slider {
    width: 100%;
    overflow: hidden;
}

.artistic-advisory__slider-track {
    display: flex;
    gap: clamp(15px, 3vw, 30px); /* Responsive gap */
    transition: transform 0.8s ease-in-out;
}

/* JavaScript handles all slide movements - no CSS animations */

/* Desktop: Show 4 slides at a time */
.artistic-advisory__member {
    background: #ffffff;
    border-radius: 0; /* 0px border radius as specified */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform var(--ease), box-shadow var(--ease);
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Prevent cards from shrinking */
    width: calc((100% - 90px) / 4); /* 4 slides with gaps (3 gaps of 30px each) */
}

.artistic-advisory__member:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Row 1: Image (1:1 aspect ratio) */
.artistic-advisory__member-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* 1:1 aspect ratio */
    overflow: hidden;
}

.artistic-advisory__member-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.artistic-advisory__member:hover .artistic-advisory__member-image {
    transform: scale(1.05);
}

.artistic-advisory__member-placeholder {
    width: 100%;
    height: 100%;
    background: var(--ica-teal); /* Brand teal background for placeholder */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.artistic-advisory__member-placeholder .dashicons {
    font-size: 4rem;
    width: 4rem;
    height: 4rem;
}

/* Row 2: Name and Designation (Deep Green Background) */
.artistic-advisory__member-info {
    padding: 0px clamp(12px, 3vw, 20px) clamp(8px, 2vw, 10px) clamp(12px, 3vw, 20px); /* Responsive padding */
    background: var(--ica-green-deep); /* Brand deep green */
    color: #ffffff;
    text-align: left; /* Left align as requested */
    flex-grow: 1;
}

.artistic-advisory__member-name {
    font-family: var(--font-ui); /* Brand UI font */
    color: #ffffff !important;
    font-size: clamp(16px, 3vw, 20px); /* Responsive font size */
    font-weight: 600;
    margin-bottom: clamp(4px, 1vw, 8px);
    text-transform: uppercase;
    margin-bottom: clamp(-8px, -1.5vw, -10px);
    white-space: nowrap; /* Force no line breaks */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ... for overflow */
    max-width: 100%; /* Allow full width on smaller screens */
    display: block; /* Ensure block display for proper truncation */
    word-break: keep-all; /* Prevent word breaking */
    line-height: 1.2; /* Control line height */
}

.artistic-advisory__member-designation {
    font-family: var(--font-body); /* Brand body font */
    color: #ffffff;
    font-size: clamp(0.8rem, 2vw, 0.95rem); /* Responsive font size */
    margin-bottom: 0;
    font-weight: 600;
    text-transform: uppercase;
}

.artistic-advisory__member-description {
    display: none; /* Hide description as per design */
}

/* Row 3: CTA (Lime Background) */
.artistic-advisory__member-actions {
    padding: clamp(10px, 2.5vw, 15px) clamp(12px, 3vw, 20px); /* Responsive padding */
    background: var(--ica-bg); /* Brand background */
    text-align: left; /* Left align as requested */
}

.artistic-advisory__view-profile {
    font-family: var(--font-ui); /* Brand UI font */
    color: var(--ica-green-deep) !important; /* Brand deep green */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between text and icon */
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.8rem, 2vw, 0.95rem); /* Responsive font size */
    transition: color var(--ease); /* Brand transition */
    text-transform: uppercase;
    width: 100%; /* Full width to allow space-between */
}

.artistic-advisory__view-profile:hover {
    color: var(--ica-teal); /* Brand teal on hover */
    text-decoration: none;
}

.artistic-advisory__arrow {
    width: clamp(18px, 4vw, 24px); /* Responsive arrow size */
    height: clamp(18px, 4vw, 24px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--ease); /* Brand transition */
}

.artistic-advisory__view-profile:hover .artistic-advisory__arrow {
    transform: translateX(3px);
}

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .artistic-advisory__inner {
        max-width: 1400px; /* Wider container for large screens */
    }
}

/* Tablet and below (768px and below) */
@media (max-width: 768px) {
    /* Tablet: Show 1 slide at a time */
    .artistic-advisory__member {
        width: 100%; /* 1 slide takes full width */
    }
    
    .artistic-advisory__slider-track {
        gap: clamp(15px, 4vw, 20px); /* Responsive gap */
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .artistic-advisory__header {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(15px, 4vw, 20px);
    }
    
    .artistic-advisory__nav-controls {
        align-self: flex-end;
    }
    
    .artistic-advisory__slider-track {
        gap: clamp(10px, 3vw, 15px); /* Smaller gap on mobile */
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .artistic-advisory__inner {
        padding: 0 0.75rem; /* Smaller padding on very small screens */
    }
    
    .artistic-advisory__header {
        gap: 12px;
    }
    
    .artistic-advisory__nav-controls {
        gap: 8px;
    }
    
    .artistic-advisory__nav-btn {
        min-width: 36px;
        min-height: 36px;
    }
}

} /* End @layer components */

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .artistic-advisory__member {
        transition: none;
    }
    
    .artistic-advisory__member-image {
        transition: none;
    }
    
    .artistic-advisory__view-profile .artistic-advisory__arrow {
        transition: none;
    }
    
    .artistic-advisory__slider-track {
        transition: none;
    }
}