/* =========================================================
   HORIZONTAL EXPANDING CARDS
   ========================================================= */

.hec-wrapper {
    display: flex;
    gap: 12px;
    width: 100%;
    height: 720px;
    align-items: stretch;
}


/* =========================================================
   CARD BASE
   ========================================================= */

.hec-card {
    position: relative;

    flex: 1 1 0%;
    min-width: 0;
    height: 100%;

    overflow: hidden;

    margin: 0;
    padding: 0;

    border: 1px solid #E9E4E6;
    border-radius: 24px;

    background-color: #FFFFFF;

    color: #252525;

    text-align: left;
    cursor: pointer;

    white-space: normal !important;

    appearance: none;
    -webkit-appearance: none;

    box-sizing: border-box;

    transition:
        flex 700ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 500ms ease,
        border-color 500ms ease,
        box-shadow 500ms ease;
}


/* =========================================================
   ACTIVE CARD
   ========================================================= */

.hec-card.is-active {
    flex: 3.5 1 0%;

    background-color: #75172E !important;
    border-color: #75172E !important;

    box-shadow: none;
}


/* =========================================================
   INACTIVE CARDS
   DO NOT CHANGE ON HOVER
   ========================================================= */

.hec-card:not(.is-active),
.hec-card:not(.is-active):hover,
.hec-card:not(.is-active):focus,
.hec-card:not(.is-active):focus-visible {
    background-color: #FFFFFF !important;
    border-color: #E9E4E6 !important;

    box-shadow: none !important;

    transform: none !important;

    color: #252525 !important;
    outline: none;
}


/* =========================================================
   INNER CARD
   Lovable desktop padding = 40px
   ========================================================= */

.hec-inner {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 120px;

    padding: 40px;

    box-sizing: border-box;
}


/* Active panel minimum inner width */
.hec-card.is-active .hec-inner {
    min-width: 420px;
}


/* =========================================================
   NUMBER
   ========================================================= */

.hec-number {
    position: relative;
    z-index: 3;

    display: block;

    margin: 0;
    padding: 0;

    font-family: serif;
    font-size: 50px;
    font-weight: 400;

    line-height: 1;
    letter-spacing: -0.02em;

    color: #75172E;

    transition: color 500ms ease;
}


/* Active number becomes white */
.hec-card.is-active .hec-number {
    color: #FFFFFF !important;
}


/* Inactive number always remains maroon */
.hec-card:not(.is-active) .hec-number,
.hec-card:not(.is-active):hover .hec-number,
.hec-card:not(.is-active):focus .hec-number {
    color: #75172E !important;
}


/* =========================================================
   EXPANDED CONTENT
   ========================================================= */

.hec-expanded-content {
    position: absolute;
    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    padding: 40px;

    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    overflow: hidden;

    transition:
        opacity 500ms ease,
        visibility 500ms ease;
}


/* Show expanded content only on active card */
.hec-card.is-active .hec-expanded-content {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   EXPANDED TITLE
   ========================================================= */

.hec-title-expanded {
    margin: 80px 0 0 0;
    padding: 0;

    width: 100%;
    max-width: 100%;

    font-family: serif;
    font-size: 36px;
    font-weight: 400;

    line-height: 1.1;
    letter-spacing: -0.02em;

    color: #FFFFFF;

    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.hec-description {
    display: block;

    width: 100%;
    max-width: 620px;

    margin: 20px 0 0 0;
    padding: 0;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.85);

    white-space: normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;

    box-sizing: border-box;
}


/* =========================================================
   COLLAPSED CONTENT
   ========================================================= */

.hec-collapsed-content {
    position: absolute;

    left: 0;
    top: 96px;

    z-index: 2;

    padding: 40px;

    box-sizing: border-box;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transition:
        opacity 500ms ease,
        visibility 500ms ease;
}


/* Hide collapsed title on active card */
.hec-card.is-active .hec-collapsed-content {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   COLLAPSED VERTICAL TITLE
   ========================================================= */

.hec-title-collapsed {
    margin: 0;
    padding: 0;

    font-family: serif;
    font-size: 28px;
    font-weight: 400;

    line-height: 1.1;
    letter-spacing: -0.01em;

    color: #252525;

    writing-mode: vertical-rl;
    text-orientation: mixed;

    white-space: nowrap;

    transition: color 500ms ease;
}


/* Inactive title does NOT change on hover */
.hec-card:not(.is-active) .hec-title-collapsed,
.hec-card:not(.is-active):hover .hec-title-collapsed,
.hec-card:not(.is-active):focus .hec-title-collapsed {
    color: #252525 !important;
}


/* =========================================================
   REMOVE DEFAULT BUTTON HOVER / FOCUS EFFECTS
   ========================================================= */

.hec-card:hover,
.hec-card:focus,
.hec-card:active {
    text-decoration: none !important;
}

.hec-card::before,
.hec-card::after {
    display: none !important;
}


/* =========================================================
   TABLET + MOBILE
   VERTICAL ACCORDION LAYOUT
   ========================================================= */

@media (max-width: 1024px) {

    /* Main wrapper */
    .hec-wrapper {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;

        gap: 12px;
    }


    /* -----------------------------------------
       ALL CARDS
       ----------------------------------------- */

    .hec-card,
    .hec-card.is-active {
        flex: none;

        width: 100%;
        height: auto;
        min-height: 0;

        border: 1px solid #E9E4E6;
        border-radius: 12px;

        box-shadow: none !important;
        transform: none !important;
    }


    /* Inactive card */
    .hec-card:not(.is-active),
    .hec-card:not(.is-active):hover,
    .hec-card:not(.is-active):focus {
        background-color: #FFFFFF !important;
        border-color: #E9E4E6 !important;
    }


    /* Active card */
    .hec-card.is-active {
        background-color: #75172E !important;
        border-color: #75172E !important;
    }


    /* -----------------------------------------
       INNER LAYOUT
       ----------------------------------------- */

    .hec-inner,
    .hec-card.is-active .hec-inner {
        display: grid;

        grid-template-columns: auto 1fr;
        align-items: center;

        column-gap: 12px;
        row-gap: 0;

        width: 100%;
        height: auto;

        min-width: 0;

        padding: 16px 18px;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       NUMBER
       ----------------------------------------- */

    .hec-number {
        grid-column: 1;
        grid-row: 1;

        font-size: 28px;
        line-height: 1;

        color: #75172E !important;
    }


    .hec-card.is-active .hec-number {
        color: #FFFFFF !important;
    }


    /* -----------------------------------------
       COLLAPSED TITLE
       ----------------------------------------- */

    .hec-collapsed-content {
        position: static;

        grid-column: 2;
        grid-row: 1;

        padding: 0;

        opacity: 1;
        visibility: visible;

        pointer-events: auto;
    }


    .hec-title-collapsed {
        margin: 0;

        font-size: 16px;
        line-height: 1.25;

        color: #252525 !important;

        /* Remove desktop vertical title */
        writing-mode: horizontal-tb;
        text-orientation: mixed;

        white-space: normal;
    }


    /* Hide collapsed title when active */
    .hec-card.is-active .hec-collapsed-content {
        display: none;
    }


    /* -----------------------------------------
       EXPANDED CONTENT
       DEFAULT = HIDDEN
       ----------------------------------------- */

    .hec-expanded-content {
        display: none;

        position: static;

        width: 100%;
        height: auto;

        padding: 0;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;
    }


    /* -----------------------------------------
       ACTIVE EXPANDED CONTENT
       ----------------------------------------- */

    .hec-card.is-active .hec-expanded-content {
        display: block;

        position: static;

        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;
        height: auto;

        margin-top: 16px;
        padding: 0;

        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        overflow: visible;
    }


    /* Expanded title */
    .hec-title-expanded {
        margin: 0 0 10px 0;

        font-size: clamp(1.25rem, 3vw, 1.6rem);
        line-height: 1.2;

        color: #FFFFFF;
    }


    /* Description */
    .hec-description {
        width: 100%;
        max-width: none;

        margin: 0;

        font-size: 15px;
        line-height: 1.6;

        color: rgba(255, 255, 255, 0.85);

        white-space: normal !important;
        overflow-wrap: break-word;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hec-wrapper {
        gap: 10px;
    }


    .hec-inner,
    .hec-card.is-active .hec-inner {
        padding: 14px 16px;

        column-gap: 10px;
    }


    .hec-number {
        font-size: 26px;
    }


    .hec-title-collapsed {
        font-size: 15px;
    }


    .hec-card.is-active .hec-expanded-content {
        margin-top: 14px;
    }


    .hec-title-expanded {
        font-size: 20px;
        margin-bottom: 8px;
    }


    .hec-description {
        font-size: 14px;
        line-height: 1.6;
    }
}