/**
 * ColorCoded Board Grid Custom Styles
 * Only custom styles not available in Tailwind CSS
 */

/* =============================================================================
   LAKIT CONFLICT RESOLUTION - EXTERNAL STYLESHEET LAYER
   This provides cached, high-specificity overrides for Lakit interference
   ============================================================================= */

/* Primary Lakit override with maximum specificity */
.cc-board-grid-wrapper .lakit-team-member__item,
.cc-board-grid-wrapper .lakit-team-member__item.lakit-team-member__item,
.lakit-team-member__item.cc-board-card,
.lakit-team-member__item.cc-board-card.cc-board-card {
    all: unset;
    display: block;
    position: relative;
    box-sizing: border-box;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    opacity: inherit;
    visibility: visible;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
}

/* Force grid layout to work correctly */
.cc-board-grid-wrapper .cc-board-layout.ccgrid,
.cc-board-grid-wrapper .cc-board-layout.grid.cc-board-layout {
    display: grid;
    grid-template-columns: repeat(var(--tw-grid-cols), minmax(0, 1fr));
    gap: 1.5rem;
}

/* Tailwind grid column overrides */
.cc-board-grid-wrapper .grid-cols-1 { --tw-grid-cols: 1}
.cc-board-grid-wrapper .grid-cols-2 { --tw-grid-cols: 2}
.cc-board-grid-wrapper .grid-cols-3 { --tw-grid-cols: 3}
.cc-board-grid-wrapper .grid-cols-4 { --tw-grid-cols: 4}
.cc-board-grid-wrapper .grid-cols-5 { --tw-grid-cols: 5}
.cc-board-grid-wrapper .grid-cols-6 { --tw-grid-cols: 6}

/* Responsive grid overrides */
@media (min-width: 640px) {
    .cc-board-grid-wrapper .sm\:grid-cols-2 { --tw-grid-cols: 2}
    .cc-board-grid-wrapper .sm\:grid-cols-3 { --tw-grid-cols: 3}
}

@media (min-width: 768px) {
    .cc-board-grid-wrapper .md\:grid-cols-3 { --tw-grid-cols: 3}
    .cc-board-grid-wrapper .md\:grid-cols-4 { --tw-grid-cols: 4}
}

@media (min-width: 1024px) {
    .cc-board-grid-wrapper .lg\:grid-cols-4 { --tw-grid-cols: 4}
    .cc-board-grid-wrapper .lg\:grid-cols-5 { --tw-grid-cols: 5}
    .cc-board-grid-wrapper .lg\:grid-cols-6 { --tw-grid-cols: 6}
}

/* Prevent any Lakit data attributes from affecting our elements */
.cc-board-grid-wrapper[data-item_selector],
.cc-board-grid-wrapper .cc-board-layout[data-item_selector] {
    /* These selectors ensure our grids are protected from Lakit's data attribute system */
    position: relative;
}

/* Additional protection for board cards inside Lakit-affected containers */
.lakit-posts .cc-board-card,
.lakit-team-member .cc-board-card,
.col-row .cc-board-card {
    all: revert;
    display: block;
}

/* =============================================================================
   END LAKIT CONFLICT RESOLUTION
   ============================================================================= */

.cc-board-grid-wrapper {
    padding: 1.5em;
}

.cc-profile-photo {
    margin-bottom: 1em;
}
.cc-person-name {
    margin-bottom: 5px;
}

/* Custom 328x347 aspect ratio for profile photos */
.cc-photo-aspect {
    padding-bottom: 105.79%; /* 347/328 = 1.0579 aspect ratio */
}

/* Custom animation delays for staggered grid effect */
.cc-animate-delay-0 { transition-delay: 0ms; }
.cc-animate-delay-100 { transition-delay: 100ms; }
.cc-animate-delay-200 { transition-delay: 200ms; }
.cc-animate-delay-300 { transition-delay: 300ms; }
.cc-animate-delay-400 { transition-delay: 400ms; }
.cc-animate-delay-500 { transition-delay: 500ms; }
.cc-animate-delay-600 { transition-delay: 600ms; }
.cc-animate-delay-700 { transition-delay: 700ms; }
.cc-animate-delay-800 { transition-delay: 800ms; }
.cc-animate-delay-900 { transition-delay: 900ms; }