/* /public/css/theme/school/components/cards.css */


/* 1. The Main Box (Base State) */
.pastEventBox {
    position: relative; /* Crucial for absolutely positioning the background inside it */
    min-width: 80vw;
    min-height: 12vh; /* Small default height */
    margin: 1rem auto;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;

    background-color: var(--colorCream); /* Solid default color */
    box-shadow: 0.1rem 0.1rem 0.5rem 0.5rem var(--colorGrey);
    color: #ffffff; /* Ensure text stays readable */

    /* Smooth height animation */
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Open State (Expands height) */
.pastEventBox.is-open {
    height: 25vh;
    /* Smooth height animation */
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. The Background Image Layer (YOU MISSED THIS!) */
.pastEventBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Keep it in the back */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0; /* Invisible by default */
    transition: opacity 0.4s ease-in-out; /* Smooth fade in/out */
}

/* When box is open, fade the image in! */
.pastEventBox.is-open .pastEventBg {
    opacity: 1;
}

/* 3. The Content Layer */
.paginated-section {
    position: relative;
    z-index: 1; /* Keep it safely above the background image */
    height: 100%;
    padding: 1.5rem; /* Moved your padding here so the background layer isn't squeezed */
}


.event-button-block {
    display: flex;
    justify-content: end;
    opacity: 1; /* Button visible when closed */
    pointer-events: auto;
    transition: opacity 0.3s ease;
}
.paginated-section {
    position: relative;
    z-index: 1; /* Keep it safely above the background image */
    height: 100%;
    padding: 1.5rem;

    /* Ensure it acts as a flex container to override default utilities if needed */
    display: flex;
    align-items: center; /* Vertically center the text when the box is CLOSED (80px) */
    transition: opacity 0.3s ease;
    color: var(--colorBlack);
}
.pastEventBox.is-open .paginated-section {
    align-items: flex-start;
    transition: opacity 0.3s ease;
    color: var(--colorWhite);
}
/* Hide button when box is open */
.pastEventBox.is-open .event-button-block {
    opacity: 0;
    pointer-events: none;
}



.event-data, .event-button-block {
    flex-grow: 1;
}
.event-day {
    font-size: var(--doubleParagraph);
}
.event-button-block {
    display: flex;
    justify-content: end;
}

.gray-box {
    min-width: 20rem;
    min-height: 20rem;
    background-color: var(--colorGrey2);
}

.js-quiz-step-content {
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    flex-wrap: wrap;
}


.detailed-card {
    margin: 1rem;
    padding: 1rem;
    border-radius: 2rem;
    min-width: 31vw;
    box-shadow: 3px 3px 6px black;

    position: relative;
    overflow: hidden;
}

.detailed-card header, .detailed-card main {
    margin: 1rem;
}

.badge {
    border-bottom: 2px solid var(--colorDarkYellow);
    display: inline-flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;
}

.corner-ribbon {
    position: absolute;
    top: 3rem;
    right: -3rem;
    width: 15rem;
    background-color: var(--colorDarkYellow);
    color: white;
    text-align: center;
    padding: 0.5rem 0;
    font-weight: bold;
    text-transform: uppercase;

    /* Rotates the block 45 degrees to bridge the corner */
    transform: rotate(45deg);

    /* Adds depth */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 10;
}


.card-header-title {
    font-size: var(--doubleParagraph);
    font-weight: 800;
    justify-self: center;
}

.card-header-tag, .schedule-slot-item {
    justify-items: end;
    flex-grow: 1;
}
.schedule-slot-item-home-page {
    justify-items: center;
    flex-grow: 1;
    margin: .5rem 1rem;
}
.schedule-title-item-home-page {
    justify-items: start;
    flex-grow: 1;
    margin: .5rem 1rem;
}

.schedule-slot-block {
    margin: 1rem;
}
.schedule-slot-p {
    font-size: var(--doubleParagraph);
}

.small-box {
    margin: 1rem;
    padding: 1rem;
    color: black;
    background-color: var(--colorGrey2);
    border-radius: 2rem;
    min-width: 25vw;
    box-shadow: 3px 3px 6px black;
}
.box-header p {
    font-size: var(--doubleParagraph) !important;
    text-align: left;
    font-weight: 800;
}
.box-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*justify-content: center;*/
}
.box-body-left {
    flex-grow: 4;
    padding-left: 1rem !important;
}
.box-body-left p {
    text-align: left;
    margin: 1rem 0;
}
.box-body-right {
    flex-grow: 1;
    align-content: center;
}
.box-body-right p {
    font-size: var(--doubleParagraph) !important;
    align-content: center;
}
.small-box p {

}
.box header {
    font-size: var(--font-size-h1);
    font-weight: bold;
    margin: 0;
}
.box-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.box {
    margin: 1rem;
    padding: 2rem;
    border: 1px solid grey;
    flex-grow: 1;
    flex-basis: 30rem;
    border-radius: 1rem;
}
.pairing-type {
    text-align: right;
    margin-bottom: 1rem;
}
.pairing-type p {
    font-family: "Futura Book", "Futura Book Cyrillic", sans-serif;
}

.header {
    font-size: var(--font-size-h1);
    font-weight: bold;
    margin: 0;
}
.short-description {
    font-size: var(--doubleParagraph);
    margin: .5rem 0 0;
}
.full-description {
    margin: 0 0 .5rem 0;
}



@media screen and (min-width: 1500px) {
    .small-box {
        min-width: 8vw;
    }
    .small-box p {
        text-align: center;
        margin: .5rem .25rem;
    }
}


/* MOBILE LAYOUT (Screens smaller than 768px) */
@media (max-width: 768px) {
    .small-box {
        min-width: 25vw;
    }

    .detailed-card {
        min-width: 60vw;
    }
}