/**
 * Student Interns Section Styles
 * 
 * Lavender background with grid layout for team member cards
 * Following site-grid-rails.css layout system
 */

@layer components {

.student-interns {
    background-color: var(--ica-lavender); /* Brand lavender background */
    padding: 80px 0;
    grid-column: full-start / full-end; /* Full width using site-grid-rails */
    width: 100%;
    max-width: none;
}

.student-interns__container {
    grid-column: content-start / content-end; /* Content constrained to rails */
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1280px);
    margin: 0 auto;
    padding: 0 var(--wp--style--root--padding-left, 1rem) 
             var(--wp--style--root--padding-right, 1rem);
    box-sizing: border-box;
}

.student-interns__title {
    font-family: var(--font-heading); /* Brand heading font */
    color: var(--ica-green-deep); /* Brand deep green */
    font-size: 2.5rem;
    font-weight: 500 !important;
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.2;
}

.student-interns__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.student-interns__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;
}

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

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

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

.student-interns__member:hover .student-interns__member-image {
    transform: scale(1.05);
}

.student-interns__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;
}

.student-interns__member-placeholder .dashicons {
    font-size: 4rem;
    width: 4rem;
    height: 4rem;
}

/* Row 2: Name and Designation (Deep Green Background) */
.student-interns__member-info {
    padding: 0px 20px 10px 20px; /* Top: 10px, Right: 20px, Bottom: 20px, Left: 20px */
    background: var(--ica-green-deep); /* Brand deep green */
    color: #ffffff;
    text-align: left; /* Left align as requested */
    flex-grow: 1;
}

.student-interns__member-name {
    font-family: var(--font-ui); /* Brand UI font */
    color: #ffffff !important;
    font-size: 20px; /* 20px font size as requested */
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    margin-bottom: -10px;
    white-space: nowrap; /* Force no line breaks */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ... for overflow */
    max-width: 260px; /* Width for approximately 15 characters at 20px font */
    display: block; /* Ensure block display for proper truncation */
    word-break: keep-all; /* Prevent word breaking */
    line-height: 1.2; /* Control line height */
}

.student-interns__member-designation {
    font-family: var(--font-body); /* Brand body font */
    color: #ffffff;
    font-size: 0.95rem;
    margin-bottom: 0;
    font-weight: 600;
    text-transform: uppercase;
}

.student-interns__member-description {
    display: none; /* Hide description as per design */
}

/* Row 3: CTA (Lime Background) */
.student-interns__member-actions {
    padding: 15px 20px;
    background: var(--ica-bg); /* Brand lime background */
    text-align: left; /* Left align as requested */
}

.student-interns__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: 0.95rem;
    transition: color var(--ease); /* Brand transition */
    text-transform: uppercase;
    width: 100%; /* Full width to allow space-between */
}

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

.student-interns__arrow {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--ease); /* Brand transition */
}

.student-interns__view-profile:hover .student-interns__arrow {
    transform: translateX(3px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .student-interns {
        padding: 60px 0;
    }
    
    .student-interns__title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    
    .student-interns__grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    
    .student-interns__member-info {
        padding: 15px;
    }
    
    .student-interns__member-actions {
        padding: 12px 15px;
    }
}

@media (max-width: 480px) {
    .student-interns {
        padding: 40px 0;
    }
    
    .student-interns__title {
        font-size: 1.75rem;
        margin-bottom: 30px;
    }
    
    .student-interns__grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .student-interns__member-info {
        padding: 12px;
    }
    
    .student-interns__member-actions {
        padding: 10px 12px;
    }
    
    .student-interns__member-name {
        font-size: 1.1rem;
    }
    
    .student-interns__member-designation {
        font-size: 0.85rem;
    }
    
    .student-interns__view-profile {
        font-size: 0.85rem;
    }
}

} /* End @layer components */

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .student-interns__member {
        transition: none;
    }
    
    .student-interns__member-image {
        transition: none;
    }
    
    .student-interns__view-profile .student-interns__arrow {
        transition: none;
    }
}