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

/* Main section - full width background */
.artistic-advisory {
    background-color: var(--ica-green-deep); 
    padding: var(--global-padding-desktop) 0 !important;
}

/* 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: grid;
    grid-template-columns: 3fr 1fr; /* 75% title, 25% controls */
    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-ui, "Termina", sans-serif) !important; /* Brand heading font */
	color: var(--ica-lime) !important; /* Brand lime */
	font-size: clamp(1.75rem, 4vw, 2.5rem); /* Responsive font size */
	text-transform: uppercase !important;
	font-weight: 600 !important;
	line-height: 1.2;
	margin: 0;
	min-width: 0; /* Allow text to shrink */
    justify-self: start;
}

/* Navigation controls at top right */
.artistic-advisory__nav-controls {
    display: flex;
    gap: clamp(10px, 2vw, 15px); /* Responsive gap */
    align-items: center;
    justify-self: end;
}

.artistic-advisory__nav-btn {
    background: var(--ica-lime) !important;
    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 0.3s 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-lavender) !important;
    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);
    height: clamp(18px, 4vw, 24px);
    filter: brightness(0);
    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;
    padding: 10px 0; /* Add padding for hover effect */
}

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

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

.artistic-advisory__member:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px 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);
}


/* Row 2: Name and Designation */
.artistic-advisory__member-info {
	padding: 20px; /* 10px top/bottom, 20px left/right */
	text-align: left; /* Left align as requested */
	flex-grow: 1;
}

.artistic-advisory__member-name {
	font-family: var(--font-ui, "Termina", "Arial Black", sans-serif) !important; /* Brand UI font */
	color: var(--ica-green-deep) !important;
	font-size: clamp(19px, 3vw, 21px); /* Responsive font size */
	font-weight: 400;
	letter-spacing: 1px;
	margin: 0;
	text-transform: uppercase;
	/* Multi-line clamp for long names */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
	line-height: 1.2; /* Control line height */
}

.artistic-advisory__member-designation {
    font-family: var(--font-body); /* Brand body font */
    color: var(--ica-green-deep) !important;
    letter-spacing: 1px;
    font-size: clamp(15px, 2vw, 16px); /* Responsive font size */
    margin: 0;
    font-weight: 300;
    text-transform: uppercase;
}

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

/* Tablet (521px - 1024px) - 2 columns */
@media (max-width: 1024px) and (min-width: 521px) {
    .artistic-advisory__member {
        width: calc((100% - 30px) / 2); /* 2 slides with gaps (1 gap of 30px) */
    }
}

/* Mobile (520px and below) - 1 column */
@media (max-width: 520px) {
    .artistic-advisory__member {
        width: 100%; /* 1 slide takes full width */
    }
    
    .artistic-advisory__slider-track {
        gap: clamp(15px, 4vw, 20px); /* Responsive gap */
    }
    
    /* Make image container 30vh on small screens */
    .artistic-advisory__member-image-container{
        aspect-ratio: auto;
        height: 40vh;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .artistic-advisory__header {
        grid-template-columns: 3fr 1fr; /* Keep row layout on small screens */
        gap: clamp(12px, 4vw, 16px);
    }
    .artistic-advisory__title{
        font-size: 24px !important;
    }
    .artistic-advisory__nav-controls {
        justify-self: 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;
    }
}

/* Generic ICA Team Slider Classes - for JavaScript functionality */
.ica-team-slider-visible {
    /* Class added by JavaScript when slider is visible */
    opacity: 1;
    transform: translateY(0);
}

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