/* 
 * Mosaic Grantees Block Styles
 * 
 * This file contains the main styles for the Mosaic Grantees block.
 */

.mosaic-grantees-block { 
    /* padding: 20px; */
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mosaic-grantees-content {
    text-align: left;
}

.mosaic-grantees-title {
    margin: 0 0 20px 0;
    font-size: 24px;
    color: #333;
    font-weight: 600;
    text-align: center;
}

.mosaic-grantees-placeholder {
    margin: 0;
    font-size: 16px;
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Table Styles */
.mosaic-grantees-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed; /* Enable fixed table layout for consistent column widths */
}

/* Column width specifications */
.mosaic-grantees-table th:nth-child(1),
.mosaic-grantees-table td:nth-child(1) {
    width: 25%; /* Project Name */
    font-weight: bold; /* Bold project names */
}

.mosaic-grantees-table th:nth-child(2),
.mosaic-grantees-table td:nth-child(2) {
    width: 25%; /* Lead Organization */
}

.mosaic-grantees-table th:nth-child(3),
.mosaic-grantees-table td:nth-child(3) {
    width: 25%; /* Collaborating Partners */
}

.mosaic-grantees-table th:nth-child(4),
.mosaic-grantees-table td:nth-child(4) {
    width: 15%; /* Initial Grant Year */
    text-align: center; /* Center align Grant Year column */
}

.mosaic-grantees-table th:nth-child(5),
.mosaic-grantees-table td:nth-child(5) {
    width: 10%; /* Actions */
    text-align: center; /* Center align Actions column */
}

.mosaic-grantees-table thead {
    background-color: #557160;
    color: white;
}

.mosaic-grantees-table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid #445a4f;
    color: white;
    vertical-align: middle;
}

.mosaic-grantees-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    vertical-align: middle;
}

/* Row alternating colors */
.mosaic-grantees-row.even {
    background-color: transparent;
}

.mosaic-grantees-row.odd {
    background-color: #D6F9E4;
}

/* Hover effect commented out - uncomment if needed later
.mosaic-grantees-row:hover {
    background-color: #c8f5d4 !important;
}
*/

.mosaic-grantees-actions {
    text-align: center;
    white-space: nowrap;
}

/* Expand button in table */
.mosaic-grantees-expand-btn {
    background: #557160;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

/* Button hover effect commented out - uncomment if needed later
.mosaic-grantees-expand-btn:hover {
    background: #445a4f;
}
*/

/* Ensure no hover effects on rows */
.mosaic-grantees-row.even:hover,
.mosaic-grantees-row.even:hover td {
    background-color: transparent !important;
}

.mosaic-grantees-row.odd:hover,
.mosaic-grantees-row.odd:hover td {
    background-color: #D6F9E4 !important;
}

.expand-icon {
    font-size: 14px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.mosaic-grantees-expand-btn[aria-expanded="true"] .expand-icon {
    transform: rotate(45deg);
}

.mosaic-grantees-expand-btn[aria-expanded="true"] .expand-text {
    content: "Hide";
}

/* Details row styles */
.mosaic-grantees-details-row {
    background-color: transparent !important; /* Default for even rows */
}

/* Details row background for odd rows */
.mosaic-grantees-row.odd + .mosaic-grantees-details-row {
    background-color: #D6F9E4 !important;
}

/* Details content background for odd rows (lighter green) */
.mosaic-grantees-row.odd + .mosaic-grantees-details-row .mosaic-grantees-details-content {
    background-color: #e8fcee; /* Lighter version of #D6F9E4 */
}

/* Prevent hover effects on details rows */
.mosaic-grantees-details-row:hover,
.mosaic-grantees-details-row:hover td {
    background-color: inherit !important;
}

.mosaic-grantees-details-cell {
    border-top: 2px solid #557160;
}

.mosaic-grantees-details-content {
    padding: 15px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background-color: #f8f9fa; /* Light gray background for even rows */
}

.mosaic-grantees-photo {
    flex-shrink: 0;
}

.mosaic-grantees-photo h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #557160;
    font-weight: 600;
}

.mosaic-grantees-logo {
    max-width: 250px;
    max-height: 175px;
    width: auto;
    height: auto;
    border-radius: 4px;
    object-fit: contain;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mosaic-grantees-overview {
    flex: 1;
    font-weight:normal
}

.mosaic-grantees-overview h4 {
    margin: 0 0 10px 0 !important;
    padding: 0 !important; /* Override theme padding with !important */
    padding-left: 0 !important; /* Specifically override left padding */
    max-width: none !important; /* Override theme max-width constraint */
    font-size: 14px;
    color: #557160;
    font-weight: 600;
}

.mosaic-grantees-overview .mosaic-grantees-content {
    line-height: 1.6;
    font-size: 14px;
    color: #333;
    text-align: left; /* Ensure left alignment with the label */
}

/* Block alignment styles */
.mosaic-grantees-block.alignleft {
    text-align: left;
}

.mosaic-grantees-block.aligncenter {
    text-align: center;
}

.mosaic-grantees-block.alignright {
    text-align: right;
}

.mosaic-grantees-block.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.mosaic-grantees-block.alignfull {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Responsive styles */
@media (max-width: 768px) {
    .mosaic-grantees-block {
        padding: 15px;
        margin: 15px 0;
    }
    
    .mosaic-grantees-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .mosaic-grantees-table {
        font-size: 13px;
    }
    
    .mosaic-grantees-table th,
    .mosaic-grantees-table td {
        padding: 8px 10px;
    }
    
    .mosaic-grantees-details-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .mosaic-grantees-logo {
        max-width: 80px;
        max-height: 80px;
    }
    
    .mosaic-grantees-expand-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .mosaic-grantees-table {
        font-size: 12px;
    }
    
    .mosaic-grantees-table th,
    .mosaic-grantees-table td {
        padding: 6px 8px;
    }
    
    .mosaic-grantees-logo {
        max-width: 60px;
        max-height: 60px;
    }
    
    .mosaic-grantees-expand-btn {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    .mosaic-grantees-details-content {
        padding: 10px;
    }
}

/* Mobile-specific styles for phone layout */
@media (max-width: 768px) {
    /* Hide table header on mobile */
    .mosaic-grantees-table thead {
        display: none;
    }
    
    /* Reset table layout for mobile */
    .mosaic-grantees-table,
    .mosaic-grantees-table tbody,
    .mosaic-grantees-table tr,
    .mosaic-grantees-table td {
        display: block;
        width: 100%;
    }
    
    /* Each row becomes a card-like block */
    .mosaic-grantees-row {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 15px;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* Override alternating colors for mobile cards */
    .mosaic-grantees-row.even,
    .mosaic-grantees-row.odd {
        background-color: white;
    }
    
    /* Mobile cell styling with labels */
    .mosaic-grantees-cell {
        display: block;
        padding: 8px 0;
        border: none;
        position: relative;
        padding-left: 0;
        width: 100% !important; /* Override fixed table widths */
    }
    
    /* Override all column width constraints on mobile */
    .mosaic-grantees-table th:nth-child(1),
    .mosaic-grantees-table td:nth-child(1),
    .mosaic-grantees-table th:nth-child(2),
    .mosaic-grantees-table td:nth-child(2),
    .mosaic-grantees-table th:nth-child(3),
    .mosaic-grantees-table td:nth-child(3),
    .mosaic-grantees-table th:nth-child(4),
    .mosaic-grantees-table td:nth-child(4),
    .mosaic-grantees-table th:nth-child(5),
    .mosaic-grantees-table td:nth-child(5) {
        width: 100% !important;
        text-align: left !important; /* Also reset text alignment */
    }
    
    /* Add labels before content on mobile */
    .mosaic-grantees-cell:nth-child(1):before {
        content: "Project Name: ";
        font-weight: bold;
        color: #557160;
    }
    
    .mosaic-grantees-cell:nth-child(2):before {
        content: "Lead Organization: ";
        font-weight: bold;
        color: #557160;
    }
    
    .mosaic-grantees-cell:nth-child(3):before {
        content: "Collaborating Partners: ";
        font-weight: bold;
        color: #557160;
    }
    
    .mosaic-grantees-cell:nth-child(4):before {
        content: "Initial Grant Year: ";
        font-weight: bold;
        color: #557160;
    }
    
    /* Actions column on mobile */
    .mosaic-grantees-actions {
        display: block;
        text-align: center;
        padding: 15px 0 0 0;
        border-top: 1px solid #e0e0e0;
        margin-top: 10px;
    }
    
    /* Details row styling for mobile */
    .mosaic-grantees-details-row {
        border: none;
        margin: 0;
        padding: 0;
        margin-top: -15px; /* Remove gap by pulling up to connect with parent row */
    }
    
    /* Only show details content when explicitly expanded */
    .mosaic-grantees-details-row[style*="block"] {
        display: block !important;
        margin-top: -15px; /* Keep negative margin when expanded to maintain connection */
    }
    
    .mosaic-grantees-details-cell {
        display: block;
        padding: 0;
        border: none;
        margin: 0; /* Remove any cell margins */
    }
    
    /* Adjust details content on mobile to connect seamlessly */
    .mosaic-grantees-details-content {
        margin: 0 !important;
        padding: 15px;
        margin-top: 0 !important; /* No additional top margin */
        background-color: #f8f9fa; /* Light gray background for even rows */
    }
    
    /* Details content background for odd rows on mobile */
    .mosaic-grantees-row.odd + .mosaic-grantees-details-row .mosaic-grantees-details-content {
        background-color: #e8fcee !important; /* Lighter version of green for odd rows */
    }
}