/*
Theme Name: Ruki - Child Theme
Theme URI: http://www.3forty.media/ruki
Author: 3FortyMedia
Author URI: http://www.3forty.media
Description: Ruki Child theme
Version: 1.0
Text Domain: ruki
Template: ruki
*/

/* Start Custom CSS */

.museum-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.gallery-item {
    flex: 0 0 calc(25% - 10px);
}

.gallery-item img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s;
}

.gallery-item img:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .gallery-item {
        flex: 0 0 calc(50% - 10px);
    }
}

h4.museum-title a {
color: #1a1b1e !important;
text-decoration: none;
}

h4.museum-title a:hover {
color: #15d6a6;
text-decoration: none;
}

/* Hide grid when in table view */
.table-view .items-grid {
    display: none;
}

/* General table wrapper (yours + Gutenberg reset) */
.table-view .items-table,
.wp-block-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 0; /* reset Gutenberg margin */
}

.wp-block-table th {
    border-bottom: 0 !important;
}

.wp-block-table thead,
.wp-block-table thead tr {
    border-bottom: 0 !important;
}

/* Core table styles (apply to both .items-table and .wp-block-table) */
.items-table table,
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    border: none; /* reset WP borders */
    background-color: #fcfcfc; /* subtle whole-table background */
    border-left: 1px solid #ddd; /* balance right/bottom borders */
    border-right: 1px solid #ddd;
}

/* Shared cell styles */
.items-table th, 
.items-table td,
.wp-block-table th,
.wp-block-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    border-right: 0;
}

/* Header row styling (more prominent Kelly green gradient) */
.items-table thead tr,
.wp-block-table thead tr {
    background-color: #4CBB17; /* brighter & darker green */
    color: #fff; /* white text for contrast */
}

/* Remove default strong borders on header cells */
.items-table th,
.wp-block-table th {
    border-bottom: none !important;
    font-weight: 600;
}

/* Row hover effect (lighter peach) */
.items-table tr:hover,
.wp-block-table tr:hover {
    background-color: #f4e6fa;
}

/* Reset Gutenberg extras (striped style, borders, etc.) */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: none;
}
.wp-block-table td,
.wp-block-table th {
    border: none;
}

/* end table */

.entry-header .category-list {
    list-style-type: none !important;
}

.page-breadcrumbs, .page-breadcrumbs a {
    font-size: 14px;
    margin-bottom: 20px;
}

/* Custom grid */

/* Browse Section */
.custom-browse-grid .masonry-container {
    column-gap: 20px;
    column-count: 1; /* 1 column on all screens */
}

.custom-browse-grid .flex-box {
    break-inside: avoid;
    margin: 0 0 20px 0;
    width: calc(100%);
    height: 500px; /* Fixed height, as originally intended */
}

/* Restore original styling for Browse section */
.custom-browse-grid .entry-description {
    margin-top: 10px;
    font-size: 1em;
    color: inherit; /* Inherits color from parent theme's overlay styling */
}

/* Alphabetical Database Section */
.custom-lists-grid .masonry-container {
    column-gap: 20px;
    column-count: 2; /* 2 columns on desktop */
    width: 100%; /* Ensure container takes full width */
    -webkit-column-fill: balance; /* Improve column distribution */
    column-fill: balance; /* Ensure even distribution of items */
}

.custom-lists-grid .flex-box {
    break-inside: avoid;
    margin: 0 0 20px 0 !important;
    height: 300px; /* Fixed height, adjust as needed */
    width: 100%; /* Full width of each column */
    box-sizing: border-box; /* Include padding/borders in width */
}

/* Mobile responsiveness for Alphabetical Database */
@media screen and (max-width: 768px) {
    .custom-lists-grid .masonry-container {
        column-count: 1; /* 1 column on mobile */
    }
}

/* Two-column hero section styles */
.custom-browse-grid.cols-2 .masonry-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    column-count: unset; /* Override the original column-count */
}

.custom-browse-grid.cols-2 .hero-card {
    flex: 1 1 calc(50% - 10px); /* Two columns on desktop/tablet */
    min-width: 0; /* Prevent flex items from overflowing */
    break-inside: unset; /* Override masonry behavior */
}

/* Mobile responsiveness - single column */
@media screen and (max-width: 768px) {
    .custom-browse-grid.cols-2 .hero-card {
        flex: 1 1 100%; /* Single column on mobile */
    }
}