/* CSS Document */


/* ERROR MESSAGING */

.ca-usage-error {
    color: var(--ca-red);
}

.ca-embed-error-inline {
    background-color: var(--ca-red);
    padding: 4px 8px;
    border-radius: 20px;
    color: #FFFFFF;
    display: inline;
}

.ca-embed-error {
    background-color: var(--ca-red);
    padding: 4px 8px;
    border-radius: 20px;
    color: #FFFFFF;
}



/* GENERAL TYPOGRAPHY */

.ca-item-kicker {
    text-transform: uppercase;
    padding-bottom: 0;
    margin-bottom: 8px;
}



/* MOBILE / NON-MOBILE */

@media all and (max-width: 480px) {

    .ca-content-non-mobile-only {
        display: none;
    }

    .ca-content-mobile-only {
        display: inline;   
    }

}

@media all and (min-width: 481px) {

    .ca-content-non-mobile-only { 
        display: inline; 
    }

    .ca-content-mobile-only {
        display: none;   
    }

}



/* DISPLAY WRAPPER - GRID */

.ca-display-wrapper {
    width: 100%;
    margin-bottom: 30px;
}

.ca-display-wrapper h1,
.ca-display-wrapper h2,
.ca-display-wrapper h3 {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

.ca-grid-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 30px;
}

.ca-grid-item {
    padding: 20px; 
    box-sizing: border-box;
    background-color: var(--ca-white);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease-out;
}

.ca-grid-item:hover {
    transform: scale(1.03);
    transition: transform 0.25s ease-in;
}

.ca-grid-item.three-per-row {
    width: calc(33.3333% - 20px); /* Three columns (1/3 width) */
    max-width: calc(33.3333% - 20px); /* ensure column is not wider than 1/3 */
}

.ca-grid-item.four-per-row {
    width: calc(25% - 23px); /* Four columns (1/4 width) */
    max-width: calc(25% - 23px); /* ensure column is not wider than 1/4 */
}

.ca-grid-image {
    width: 100%; 
    overflow: hidden; 
    margin-bottom: 20px;
}

.ca-grid-image img {
    width: 100%; 
    height: auto;
    display: block;
}

@media all and (max-width: 480px) {   /* smartphone */

    .ca-grid-item.three-per-row,
    .ca-grid-item.four-per-row {
        width: 100%;
        max-width: 100%;
    }

}

@media (min-width: 481px) and (max-width: 768px) {

    .ca-grid-item.three-per-row,
    .ca-grid-item.four-per-row {
        width: calc(50% - 20px);
        max-width: calc(50% - 20px);
    }

}

@media (min-width: 769px) and (max-width: 1000px) {

    .ca-grid-item.three-per-row,
    .ca-grid-item.four-per-row {
    }

}

.ca-display-wrapper p.ca-kicker {
    padding: 0;
    margin-bottom: 5px;
}



/* TIMELINES */

.ca-timeline-types-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.ca-timeline-types-list .timeline-type-item {
    box-sizing: border-box;
    width: calc(25% - 23px); 
    max-width: calc(25% - 23px); 
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.ca-timeline-types-list .timeline-type-item a {
    text-align: center;
    display: inline-block;
    width: 100%;
    padding: 10px 20px;
    border-radius: 8px;
    background-color: var(--ca-black);
    color: var(--ca-white) !important;
}

@media all and (max-width: 480px) {   /* smartphone */

    .ca-timeline-types-list .timeline-type-item {
        width: 100%;
        max-width: 100%;
    }

}

@media (min-width: 481px) and (max-width: 768px) {

    .ca-timeline-types-list .timeline-type-item {
        width: calc(50% - 20px);
        max-width: calc(50% - 20px);
    }

}

@media (min-width: 769px) and (max-width: 1000px) {

    .ca-timeline-types-list .timeline-type-item {
        width: calc(50% - 20px);
        max-width: calc(50% - 20px);
    }

}



/* individual timeline items */

.ca-timeline-wrapper {
    width: 100%;
    margin-bottom: 30px;
}

.ca-timeline-item {
    width: 100%;
    padding: 20px; 
    box-sizing: border-box;
    background-color: var(--ca-white);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}



/* TRIVIA */

.ca-trivia-wrapper {
    width: 100%;
    margin-bottom: 30px;
}

.ca-trivia-item {
    width: 100%;
    padding: 20px; 
    box-sizing: border-box;
    background-color: var(--ca-white);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}



/* COLLECTION SUMMARY MODULE */

.ca-collection-summary-module {
    width: 100%;
    margin-bottom: 20px;
    background-color: var(--ca-light-gray);
    border-radius: 10px;
}

/* Ensure the title uses the module's padding and doesn't have extra self-imposed margins */
.ca-collection-summary-module h3.ca-collection-summary-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap; /* Allows text to wrap to the next line */
    margin-bottom: 15px; /* Add some space below the title */
    /* No margin-left/padding-left here; it should align with the module's padding. */
}

.ca-collection-summary-module .ca-collection-summary-count {
    font-size: 0.6em; /* Smaller text for the count */
    margin-left: 10px; /* Space between title and count */
    color: #666; /* A slightly lighter color for the count */
}

/* Forcefully remove default browser padding/margin from the unordered list itself. */
/* This is crucial to get the list items aligned with the module's padding. */
.ca-collection-summary-module ul {
    list-style: none; /* Removes bullet points */
    margin: 0 !important; /* Forces removal of any default margin */
    padding: 0 !important; /* Forces removal of any default padding-left */
}

.ca-collection-summary-module ul li.ca-collection-summary-item {
    display: flex; /* Use flexbox for layout */
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; /* Separator between items */
    /* No margin-left/padding-left here; list items align to the UL's edge, which is now at 0. */
}

.ca-collection-summary-module ul li.ca-collection-summary-item:last-child {
    border-bottom: none; /* No border for the last item */
    margin-bottom: 0;
    padding-bottom: 0;
}

.ca-collection-summary-module .ca-collection-summary-content {
    flex-grow: 1; /* Allows content to take up available space */
    padding-right: 15px; /* Space between content and image */
}

.ca-collection-summary-module .ca-collection-summary-content a {
    font-weight: bold;
    display: block; /* Make the title a block element */
    margin-bottom: 5px;
}

.ca-collection-summary-module .ca-collection-summary-content p {
    font-size: 0.9em;
    line-height: 1.4;
    color: #444;
    margin: 0;
}

.ca-collection-summary-module .ca-collection-summary-image {
    flex-shrink: 0; /* Prevents image from shrinking */
    width: 100px; /* Fixed width for the image */
    height: 100px; /* Fixed height to ensure square shape if desired, or remove to allow aspect ratio */
    overflow: hidden; /* Hide overflow if image is larger */
    display: flex; /* For centering the image if needed */
    justify-content: center;
    align-items: center;
}

.ca-collection-summary-module .ca-collection-summary-image img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block;
}

.ca-collection-summary-module .ca-button {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 15px;
    background-color: var(--ca-dark-gray);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Responsive adjustments */
@media all and (max-width: 480px) { /* smartphone */
    
    .ca-collection-summary-module {
        padding: 30px; /* This padding provides the internal space for text */
        /* If using Option A, adjust values for mobile too if needed */
        /* width: calc(100% + 60px); */ /* Example: if mobile padding is 30px on each side */
        /* margin-left: -30px; */
    }

    .ca-collection-summary-module h3.ca-collection-summary-title {
        flex-direction: column; /* Stack title and count vertically */
        align-items: flex-start; /* Align to the start of the column */
    }

    .ca-collection-summary-module .ca-collection-summary-count {
        margin-left: 0; /* Remove left margin */
        margin-top: 5px; /* Add some space above the count */
    }

    .ca-collection-summary-module ul li.ca-collection-summary-item {
        flex-direction: column-reverse; /* Stack content above image on small screens */
        align-items: center; /* Center items when stacked */
        text-align: left;
    }

    .ca-collection-summary-module .ca-collection-summary-content {
        padding-right: 0;
        margin-top: 10px; /* Space between image and content */
    }

    .ca-collection-summary-module .ca-collection-summary-image {
        width: 100%; /* Image takes full width */
        height: auto;
        margin-bottom: 10px;
    }

    .ca-collection-summary-module .ca-collection-summary-image img {
        width: 100px; /* Keep image at 100px width even if container is wider */
        height: 100px;
        object-fit: cover; /* Ensures image covers the area, cropping if necessary */
    }
    
}

@media (min-width: 481px) {
    
    .ca-collection-summary-module {
        padding: 20px; /* This padding provides the internal space for text */
    }
    
}


/* WIDGET MODULE */

.ca-widget-module {
    width: 100%;
    margin-bottom: 20px;
}

.ca-widget-title {
    background: #000000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.ca-widget-title h1,
.ca-widget-title h2,
.ca-widget-title h3,
.ca-widget-title h4,
.ca-widget-title h5,
.ca-widget-title h6 {
    color: #FFFFFF;
    padding-bottom: 0;
}

.ca-widget-content {
    background-color: var(--ca-light-gray);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.ca-widget-module ul.post-count-list,
.ca-widget-module ul.item-list {
    list-style-type: none; 
    padding-left: 0 !important; 
    margin-left: 0;
    margin-bottom: 0;
    padding-bottom: 0 !important;
}

/* used for Collection item counts */
.ca-widget-module ul.post-count-list li {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 8px; 
    padding: 3px 0 10px 0;
    font-weight: bold;
    border-bottom: 1px dotted #000000;
}

/* used for text-type lists */
.ca-widget-module ul.item-list li {
    margin-bottom: 8px; 
    padding: 3px 0 10px 0;
    font-weight: bold;
    border-bottom: 1px dotted #000000;
}

.ca-widget-module ul.post-count-list li:last-of-type,
.ca-widget-module ul.item-list li:last-of-type {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0; 
}

.ca-widget-module ul.item-list li .ca-widget-item-kicker {
    display: block;
    text-transform: uppercase;
    font-size: 0.8em;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ca-widget-module ul.post-count-list li span.post-count {
    background-color: black; 
    color: white; 
    border-radius: 5px; 
    padding: 4px 10px; 
    font-size: 0.9em; 
    margin-left: 10px; /* Added margin */ 
    white-space: nowrap; /* Prevent wrap */
}



@media all and (max-width: 480px) {   /* smartphone */

    .ca-widget-title {
        padding: 15px 30px;
    }

    .ca-widget-content {
        padding: 30px;
    }

}

@media (min-width: 481px) {

    .ca-widget-title {
        padding: 15px 20px;
    }

    .ca-widget-content {
        padding: 20px;
    }

}



/* COLLECTION / TYPE HEADER */

.ca-single-page-collection-wrapper {
    width: 100%;
    margin-bottom: 30px;
    background-color: var(--ca-light-gray);
    border-radius: 10px;
    padding: 20px;
}



/* SINGLE PAGE - CONTENT/PHOTO */

.ca-single-item-content-photo-wrapper {
    display: flex; /* Enable Flexbox */
    flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
    gap: 30px; /* Space between the text and the photo */
    align-items: flex-start; /* Align items to the top if they have different heights */
    margin-bottom: 30px; /* Add some space below the section */
    flex-direction: row; /* Default for desktop: row (image on left) */
}

.ca-single-item-photo-wrapper {
    flex: 0 0 35%; /* Don't grow, don't shrink, base width of 35% */
    max-width: 35%; /* Ensure it doesn't exceed 35% on larger screens */
    box-sizing: border-box; /* Include padding/border in width calculation */
}

.ca-single-item-photo-wrapper img {
    max-width: 100%; /* Ensure image is responsive within its wrapper */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
}

.ca-single-item-text-content {
    flex: 1; /* Allow text content to grow and shrink, taking up remaining space */
    min-width: 0; /* Important for flex items containing text to prevent overflow */
    box-sizing: border-box; /* Include padding/border in width calculation */
}

/* --- Mobile Styles (Photo ABOVE Text) --- */
@media (max-width: 768px) { /* Adjust breakpoint as needed for your design */

    .ca-single-item-content-photo-wrapper {
        flex-direction: column; /* Stack items vertically on mobile */
        gap: 15px; /* Slightly less gap on mobile */
    }

    .ca-single-item-photo-wrapper,
    .ca-single-item-text-content {
        flex: 0 0 100%; /* Each item takes full width on mobile */
        max-width: 100%; /* Ensure full width */
    }

    /* Optional: Center the image on mobile if it doesn't take full width */
    .ca-single-item-photo-wrapper {
        text-align: center;
    }
    .ca-single-item-photo-wrapper img {
        display: inline-block; /* Allow text-align to work */
        max-width: 100%; /* Adjust if you want image to be narrower on mobile */
    }
}

/* Optional: Even smaller screens, if needed */
@media (max-width: 480px) {

    .ca-single-item-photo-wrapper img {
        max-width: 100%; /* Go full width again on very small screens */
    }

}


/*
.ca-single-additional-info {
    background: var(--ca-light-gray);
    border-radius: 10px;
    padding: 20px;
}

.ca-single-additional-info .ca-additional-info-item {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dotted var(--ca-medium-gray);
}

.ca-single-additional-info .ca-additional-info-item:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

*/


/* ITEM LIST - for Audio, Documents, Publications, Online Media, Visual */

.ca-item-list-content-photo-wrapper {
    display: flex; 
    flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
    gap: 30px; 
    align-items: flex-start; /* Align items to the top if they have different heights */
    margin-bottom: 20px; 
    flex-direction: row; /* Default for desktop: row (image on left) */
    width: 100%;
    padding: 20px; 
    box-sizing: border-box;
    background-color: var(--ca-white);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.ca-item-list-photo-wrapper {
    flex: 0 0 15%; /* Don't grow, don't shrink, base width of 35% */
    max-width: 15%; /* Ensure it doesn't exceed 35% on larger screens */
    box-sizing: border-box; /* Include padding/border in width calculation */
}

.ca-item-list-photo-wrapper img {
    max-width: 100%; /* Ensure image is responsive within its wrapper */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
}

.ca-item-list-text-content {
    flex: 1; /* Allow text content to grow and shrink, taking up remaining space */
    min-width: 0; /* Important for flex items containing text to prevent overflow */
    box-sizing: border-box; /* Include padding/border in width calculation */
}

/* --- Mobile Styles (Photo ABOVE Text) --- */
@media (max-width: 768px) { /* Adjust breakpoint as needed for your design */

    .ca-list-content-photo-wrapper {
        flex-direction: column; /* Stack items vertically on mobile */
        gap: 15px; /* Slightly less gap on mobile */
    }

    .ca-item-list-photo-wrapper,
    .ca-item-list-text-content {
        flex: 0 0 100%; /* Each item takes full width on mobile */
        max-width: 100%; /* Ensure full width */
    }

    /* Optional: Center the image on mobile if it doesn't take full width */
    .ca-item-list-photo-wrapper {
        text-align: left;
    }
    .ca-item-list-photo-wrapper img {
        display: inline-block; /* Allow text-align to work */
        max-width: 100%; /* Adjust if you want image to be narrower on mobile */
    }
}

/* Optional: Even smaller screens, if needed */
@media (max-width: 480px) {

    .ca-item-list-photo-wrapper img {
        max-width: 100%; /* Go full width again on very small screens */
    }

}



/* PAGINATION */

.ca-pagination {
    width: 100%;
}

.ca-pagination .page-numbers {
    background-color: #666666;
    padding: 8px 12px;
    margin-right: 5px;
    color: #FFFFFF !important;
    border-radius: 3px;
    text-decoration: none;
}

.ca-pagination .page-numbers.current {
    background-color: #000000;
}

.ca-pagination a.page-numbers {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.ca-pagination a.page-numbers:hover {
    background-color: #000000;
    color: #FFFFFF !important;
}



/* PREV / NEXT BUTTONS */

.ca-prev-next-nav {
    width: 100%;
    margin-bottom: 40px;
}

.ca-prev-next-nav.below-item {
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid var(--ca-light-gray);
}

.ca-prev-next-nav.above-item {
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ca-light-gray);
}


.ca-prev-button {
    float: left;
    width: 50%;
}

.ca-next-button {
    float: right;
    width: 50%;
    text-align: right;
}



/* PHOTOS / IMGs */

.ca-visual-item.original {
    
}

.ca-visual-item figure {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
}

.ca-visual-item figure.original,
.ca-visual-item figure.full-width {
    flex-direction: column;
    align-items: center;
}

.ca-visual-item figure.side-by-side {
    flex-direction: row;
    gap: 30px;
}

@media screen and (max-width:768px) {

    .ca-visual-item figure.side-by-side {
        flex-direction: column;
        gap: 10px;
    }

}

.ca-visual-item figcaption {
    font-size: 0.9em;         /* Smaller font size for the caption */
}

.ca-visual-item figure.original figcaption,
.ca-visual-item figure.full-width figcaption {
    margin-top: 20px;
    text-align: center;
}

.ca-visual-item figure.side-by-side figcaption {
    margin-top: 0;
    text-align: left;
}


.ca-visual-item figcaption p {
    padding: 0;
    margin: 0 0 5px;
}

.ca-visual-item figure.original img,
.ca-visual-item figure.side-by-side img{
    height: 100%;
}

@media screen and (max-width:480px) {

    .ca-visual-item figure.original img,
    .ca-visual-item figure.side-by-side img {
        width: 100%;
    }
    
}

.ca-visual-item figure.full-width img {
    width: 100%;
    height: auto;
}



/* BUTTONS */

a.ca-button {
    background-color: #666666;
    padding: 8px 15px;
    border-radius: 100px;
    display: inline-block;
    text-decoration: none !important;
}

    a.ca-button span.ca-white-text {
        color: #FFFFFF !important;
    }

    a.ca-button:hover {
        background-color: #000000;
        color: #FFFFFF;
    }



/* SOCIAL ICONS */

a.ca-social-icon{
    text-decoration: none !important;
}

a.ca-social-icon:hover span::after {
    background-color: var(--ca-black);
    border-radius: 100px;
    color: #FFFFFF;
    text-decoration: none;
}

.ca-facebook-icon::after {
    width: 24px;
    height: 24px;
    content: "\e093";
    font-family: "ETmodules";
    background-color: var(--ca-dark-gray);
    border-radius: 100px;
    color: var(--ca-white);
    padding: 0.4em 0.4em;
    margin-right: 5px;
    text-decoration: none;
}

.ca-x-icon::after {
    width: 24px;
    height: 24px;
    content: "\e094";
    font-family: "ETmodules";
    background-color: var(--ca-dark-gray);
    border-radius: 100px;
    color: var(--ca-white);
    padding: 5px 6px;
    margin-right: 5px;
    text-decoration: none;
}

.ca-instagram-icon::after {
    width: 24px;
    height: 24px;
    content: "\e09a";
    font-family: "ETmodules";
    background-color: var(--ca-dark-gray);
    border-radius: 100px;
    color: var(--ca-white);
    padding: 5px 6px;
    margin-right: 5px;
    text-decoration: none;
}

.ca-tiktok-icon::after {
    width: 24px;
    height: 24px;
    content: "\e09a";
    font-family: "ETmodules";
    background-color: var(--ca-dark-gray);
    border-radius: 100px;
    color: var(--ca-white);
    padding: 5px 6px;
    margin-right: 5px;
    text-decoration: none;
}

.ca-youtube-icon::after {
    width: 24px;
    height: 24px;
    content: "TikTok";
    font-family: "ETmodules";
    background-color: var(--ca-dark-gray);
    border-radius: 100px;
    color: var(--ca-white);
    padding: 5px 6px;
    margin-right: 5px;
    text-decoration: none;
}



/* GOOGLE MAPS */
/* These classes used in ca-map-script.js */

#ca-google-map {
    margin-bottom: 30px;
    border-radius: 10px;
}

.ca-map-marker-dialog h4 {
    font-size: 1.2em;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ca-map-marker-dialog p {
    margin-bottom: 5px;
    padding-bottom: 0;
}

/* padding on the modal popup */
.gm-style .gm-style-iw-c {
    padding: 10px;
}

/* padding at the top of the modal */
.gm-style-iw-ch {
    padding-top: 10px !important;
}