/* Heritage Story Cards - Plugin CSS */

/* All styling for the heritage cards */



/* Container */

.heritage-cards-container {

    background-color: transparent;

    padding: 40px 20px;

}



/* Grid Layout - 2x2 on desktop */

.heritage-cards-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

    max-width: 1200px;

    margin: 0 auto;

    align-items: start;

}



/* Individual Card - With box shadow and padding */

.heritage-card {

    background: #F5EEE9;

    box-shadow: 0px 2px 2px 0px #0000004D;

    padding: 24px;

    position: relative;

    transition: all 0.4s ease;

}



/* Border Image at Top */

.card-border-top {

    width: 100%;

    height: auto;

    margin-bottom: 24px;

    /* 24px gap between border and title/description */

    display: block;

}



/* Header Section (Title + Short Description) - Above Image */

.card-header-section {

    display: flex;

    flex-direction: row;

    gap: 44px;

    /* Gap between title and short description */

    margin-bottom: 48px;

    /* Gap between title/description and image */

}



/* Title Wrapper - Horizontal flex layout */

.card-title-wrapper {

    display: flex;

    align-items: baseline;

    gap: 8px;

    flex-shrink: 0;

}



/* Card Number (01, 02, etc) */

.card-number {

    font-family: "Ivory Trial", Georgia, serif;

    font-weight: 300;

    font-size: 15.5px;

    line-height: 110%;

    color: #181111;

}



/* Card Title - Larger font */

.card-title {

    font-family: "Ivory Trial", Georgia, serif;

    font-weight: 300;

    font-size: 28px;

    line-height: 110%;

    color: #181111;

}



/* Short Description - Always Visible, in flex with title */

.card-description {

    font-family: "Ivory Trial", Georgia, serif;

    font-weight: 300;

    font-size: 15.5px;

    line-height: 110%;

    text-align: justify;

    color: #181111;

    flex: 1;

}



/* Main Image - Below title/description */

.card-main-image {

    width: 100%;

    height: auto;

    object-fit: cover;

    margin-bottom: 16px;

    /* Gap between image and read more button */

    display: block;

}



/* Full Description - Hidden by Default */

.card-full-description {

    font-family: "Ivory Trial", Georgia, serif;

    font-weight: 300;

    font-size: 15.5px;

    line-height: 110%;

    text-align: justify;

    color: #181111;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition: all 0.4s ease;

}



/* Full Description When Card is Expanded - Below card, half width, right-aligned */

.heritage-card.expanded .card-full-description {

    max-height: none;

    opacity: 1;

    margin-top: 0;

    width: 100%;

    margin-left: 0;

    position: absolute;

    top: 100%;

    right: 0;

    z-index: 100;

    background: #F5EEE9;

    padding: 24px;

    padding-left: 50%;

    /* Keep text on the right side */

    box-sizing: border-box;

    box-shadow: 0px 2px 2px 0px #0000004D;

}



/* Buttons Wrapper - Centered */

.card-buttons-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    margin-top: 0;

}



/* Read More Button - No background, no border, NO HOVER EFFECT */

.card-readmore,

.card-readless {

    font-family: 'PPEditorialSans';

    font-weight: 800;

    font-size: 12px;

    line-height: 124%;

    letter-spacing: 0.02em;

    text-align: center;

    text-transform: uppercase;

    color: #AE2219;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 8px 16px;

}



/* NO HOVER EFFECT - Keep same appearance */

.card-readmore:hover,

.card-readless:hover {

    color: #AE2219;

    /* Same color, no change */

    opacity: 1;

    background: transparent;

}



/* Read More Icon - Below button */

.card-readmore-icon {

    width: 16px;

    height: 16px;

    display: block;

    margin: 0 auto;

}



/* Hide Read More when expanded, show Read Less */

.heritage-card.expanded .card-buttons-wrapper {

    display: none;

}



.heritage-card.expanded .card-readless {

    display: block !important;

}



/* Mobile - 1x1 Grid */

@media (max-width: 768px) {

    .heritage-cards-grid {

        grid-template-columns: 1fr;

    }



    .card-header-section {

        flex-direction: column;

        gap: 12px;

        margin-bottom: 24px;

    }



    .heritage-card.expanded .card-full-description {

        width: 100%;

        margin-left: 0;

        padding-left: 24px;

        /* Reset padding for mobile */

    }

}



/* Small Mobile Adjustments */

@media (max-width: 480px) {

    .heritage-cards-container {

        padding: 20px 10px;

    }



    .heritage-card {

        padding: 16px;

    }



    .card-number {

        font-size: 14px;

    }



    .card-title {

        font-size: 24px;

    }



    .card-description,

    .card-full-description {

        font-size: 14px;

    }



    .card-readmore,

    .card-readless {

        font-size: 11px;

    }

}