/*
|--------------------------------------------------------------------------
| Celebrity Intro Tables Frontend CSS
|--------------------------------------------------------------------------
| Fully Responsive
| Dark/Light Mode Compatible
| No Theme Conflict
| Mobile Optimized
|--------------------------------------------------------------------------
*/

:root {

    --cit-bg-color: #f3f3f3;
    --cit-label-bg: #8f8f8f;
    --cit-value-bg: #b5b5b5;

    --cit-text-color: #111111;
    --cit-label-text: #ffffff;
    --cit-value-text: #ffffff;

    --cit-border-color: #111111;

    --cit-border-radius: 0px;

    --cit-max-width: 1000px;

    --cit-label-width: 280px;

    --cit-row-gap: 16px;

    --cit-padding: 18px;

    --cit-font-size: 18px;

    --cit-line-height: 1.7;

    --cit-image-size: 180px;
}

/*
|--------------------------------------------------------------------------
| Main Wrapper
|--------------------------------------------------------------------------
*/

.cit-wrapper,
.cit-wrapper *,
.cit-wrapper *::before,
.cit-wrapper *::after {
    box-sizing: border-box;
}

.cit-wrapper {

    position: relative;

    width: 100%;
    max-width: var(--cit-max-width);

    margin: 130px auto 50px;

    padding:
        calc(var(--cit-image-size) / 2 + 40px)
        24px
        40px;

    background: var(--cit-bg-color);

    border: 4px solid var(--cit-border-color);

    border-radius: var(--cit-border-radius);

    overflow: hidden;

    isolation: isolate;

    color: var(--cit-text-color);

    font-size: var(--cit-font-size);

    line-height: var(--cit-line-height);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        sans-serif;
}

/*
|--------------------------------------------------------------------------
| Image
|--------------------------------------------------------------------------
*/

.cit-image-wrapper {

    position: absolute;

    top: calc(var(--cit-image-size) / -2);

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;
}

.cit-image {

    display: block;

    width: var(--cit-image-size);

    height: var(--cit-image-size);

    object-fit: cover;

    border-radius: 50%;

    border: 6px solid #ffffff;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18);
}

/*
|--------------------------------------------------------------------------
| Table
|--------------------------------------------------------------------------
*/

.cit-table {

    display: flex;

    flex-direction: column;

    gap: var(--cit-row-gap);

    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Row
|--------------------------------------------------------------------------
*/

.cit-row {

    display: grid;

    grid-template-columns:
        minmax(var(--cit-label-width), var(--cit-label-width))
        minmax(0, 1fr);

    align-items: stretch;

    gap: 16px;

    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Label & Value
|--------------------------------------------------------------------------
*/

.cit-label,
.cit-value {

    position: relative;

    width: 100%;

    padding: var(--cit-padding);

    overflow-wrap: anywhere;

    word-break: break-word;

    white-space: normal;

    line-height: var(--cit-line-height);

    font-size: var(--cit-font-size);

    min-width: 0;
}

/*
|--------------------------------------------------------------------------
| Left Label
|--------------------------------------------------------------------------
*/

.cit-label {

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-weight: 700;

    background: var(--cit-label-bg);

    color: var(--cit-label-text);

    user-select: none;
}

/*
|--------------------------------------------------------------------------
| Right Value
|--------------------------------------------------------------------------
*/

.cit-value {

    display: flex;

    align-items: center;

    background: var(--cit-value-bg);

    color: var(--cit-value-text);

    font-weight: 500;
}

/*
|--------------------------------------------------------------------------
| Large Desktop
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1800px) {

    :root {

        --cit-max-width: 1500px;

        --cit-font-size: 22px;

        --cit-label-width: 360px;

        --cit-image-size: 240px;

        --cit-padding: 24px;
    }
}

/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
*/

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

    :root {

        --cit-max-width: 1000px;

        --cit-label-width: 260px;

        --cit-font-size: 17px;
    }
}

/*
|--------------------------------------------------------------------------
| Laptop
|--------------------------------------------------------------------------
*/

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

    :root {

        --cit-max-width: 900px;

        --cit-label-width: 230px;

        --cit-font-size: 16px;

        --cit-image-size: 170px;
    }
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

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

    :root {

        --cit-label-width: 100%;

        --cit-font-size: 15px;

        --cit-padding: 16px;

        --cit-image-size: 150px;
    }

    .cit-wrapper {

        margin-top: 110px;

        padding:
            calc(var(--cit-image-size) / 2 + 30px)
            14px
            30px;
    }

    .cit-row {

        grid-template-columns: 1fr;

        gap: 10px;
    }

    .cit-label {

        justify-content: flex-start;

        text-align: left;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile Landscape
|--------------------------------------------------------------------------
*/

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

    :root {

        --cit-font-size: 14px;

        --cit-padding: 14px;

        --cit-image-size: 130px;
    }

    .cit-wrapper {

        margin-top: 100px;

        border-width: 2px;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile Portrait
|--------------------------------------------------------------------------
*/

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

    :root {

        --cit-font-size: 13px;

        --cit-padding: 12px;

        --cit-image-size: 115px;

        --cit-row-gap: 12px;
    }

    .cit-wrapper {

        margin-top: 90px;

        padding:
            calc(var(--cit-image-size) / 2 + 24px)
            10px
            24px;
    }

    .cit-image {

        border-width: 4px;
    }
}

/*
|--------------------------------------------------------------------------
| Very Small Devices
|--------------------------------------------------------------------------
*/

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

    :root {

        --cit-font-size: 12px;

        --cit-padding: 10px;
    }
}

/*
|--------------------------------------------------------------------------
| Dark Mode
|--------------------------------------------------------------------------
*/

@media (prefers-color-scheme: dark) {

    :root {

        --cit-bg-color: #1b1b1b;

        --cit-label-bg: #343434;

        --cit-value-bg: #4b4b4b;

        --cit-text-color: #f1f1f1;

        --cit-label-text: #ffffff;

        --cit-value-text: #ffffff;

        --cit-border-color: #f1f1f1;
    }

    .cit-image {

        border-color: #2d2d2d;

        background: #2d2d2d;
    }
}

/*
|--------------------------------------------------------------------------
| Light Mode
|--------------------------------------------------------------------------
*/

@media (prefers-color-scheme: light) {

    :root {

        --cit-bg-color: #f3f3f3;

        --cit-label-bg: #8f8f8f;

        --cit-value-bg: #b5b5b5;

        --cit-text-color: #111111;

        --cit-border-color: #111111;
    }
}

/*
|--------------------------------------------------------------------------
| Accessibility
|--------------------------------------------------------------------------
*/

.cit-wrapper:focus-within {

    outline: 2px solid #2271b1;

    outline-offset: 4px;
}

/*
|--------------------------------------------------------------------------
| Prevent Theme Overrides
|--------------------------------------------------------------------------
*/

.cit-wrapper img {
    max-width: none;
}

.cit-wrapper p,
.cit-wrapper div,
.cit-wrapper span {
    margin: 0;
}