/**
 * @author: Procurios
 * @about:  mmt-mdp-schedule.css
 *          Additional layout settings for the "schedule"-page of the meeting detail page
 */

/**
 * Schedule layout
 */

.mmt-mdp-section-schedule .mmt-mdp-section-inner {
    display: flex;
    flex-direction: column-reverse;
}

/** Table that acts as menu */
.mmt-mdp-section-schedule table {
    margin-bottom: 2em;
    border-collapse: inherit;
    border-spacing: 0px 1.25rem;
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-title {
    padding-top: var(--innerPaddingSmall);
    padding-bottom: .25rem;
}

.mmt-mdp-section-schedule table tr:not(.mmt-mdp-schedule-separator):not(.mmt-mdp-schedule-row-multiple) {
    transition: all var(--transitionTime) ease-in-out;
    box-shadow: var(--shadow-subtle);
    transform: scale(1); /** Creates a new stacking context for image animation */
}

.mmt-mdp-section-schedule table tr:not(.mmt-mdp-schedule-separator):not(.mmt-mdp-schedule-row-multiple):hover {
    box-shadow: var(--shadow-hover);
    transform: scale(1.01);
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-time {
    transition: all var(--transitionTime) ease-in-out;
    width: 100%;
    max-width: 75px;
    white-space: normal;
    padding-block: var(--innerPaddingX-md);
    padding-inline: var(--innerPaddingSmall);
    font-weight: bold;
    text-align: center;
    background-color: var(--primaryColor450);
    background: linear-gradient(135deg, var(--primaryColor450) 0%, var(--primaryColor600) 100%);
    color: var(--baseLight100);
    border-top-left-radius: var(--borderRadius);
    border-bottom-left-radius: var(--borderRadius);
}

@media screen and (min-width: 460px) {
    .mmt-mdp-section-schedule .mmt-mdp-schedule-time {
        width: 160px;
        max-width: inherit;
        white-space: nowrap;
    }
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-time span::before {
    background-image: url(/ui/kortom/images/time--white.svg);
    content: "";
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    position: relative;
    top: 0;
    display: block;
    margin: 0 auto .5rem;
}

@media screen and (min-width: 460px) {
    .mmt-mdp-section-schedule .mmt-mdp-schedule-time span::before {
        top: 2px;
        display: inline-block;
        margin: 0 .5rem 0 0;
    }
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-row-multiple {
    transition: transform var(--transitionTime) ease-in-out;
    transform: scale(1); /** Creates a new stacking context for image animation */
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-row-multiple:hover {
    transform: scale(1.01);
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-time-multiple {
    transition: all var(--transitionTime) ease-in-out;
    border-radius: var(--borderRadius);
    box-shadow: var(--shadow-subtle);
}

.mmt-mdp-section-schedule table tr:hover .mmt-mdp-schedule-time-multiple {
    box-shadow: var(--shadow-hover);
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-activity {
    transition: all var(--transitionTime) ease-in-out;
    background-color: var(--baseLight150);
    border-top-right-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    border: 1px solid var(--clr-brdr-light);
    border-left: 0;
    position: relative;
    overflow: hidden;
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-activity:not(.mmt-mdp-schedule-activity-multiple) {
    padding: var(--innerPaddingX-md);
    padding-left: var(--columnGutterSmall);
}

/** hover effect */
.mmt-mdp-section-schedule tr:hover .mmt-mdp-schedule-activity:not(.mmt-mdp-schedule-activity-multiple) {
    background-color: var(--lightBlue);
}

.mmt-mdp-section-schedule tr:hover .mmt-mdp-schedule-time {
    background-color: var(--primaryColor500);
}


.mmt-mdp-section-schedule .mmt-mdp-schedule-activity-title {
    transition: color var(--transitionTime) ease-in-out;
    font-family: var(--specialFont);
    font-size: var(--h6Size);
    display: block;
}

.mmt-mdp-section-schedule a .mmt-mdp-schedule-activity-title::after {
    transition: all var(--transitionTime) ease-in-out;
    transition-delay: var(--transitionTime--slow);
    background-image: url(/ui/kortom/images/icon--info--dark.svg);
    content: "";
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: .4rem;
    position: relative;
    opacity: 0;
}

/** Multiple activity */
.mmt-mdp-section-schedule .mmt-mdp-schedule-activity-multiple {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-grid-xs);
    background-color: transparent;
    padding: 0 0 0 var(--innerPaddingSmall);
    border: none;
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-activity-multiple::after {
    display: none;
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-activity-gridItem {
    transition: all var(--transitionTime) ease-in-out;
    background-color: var(--baseLight100);
    padding: var(--innerPaddingX);
    padding-bottom: var(--innerPaddingX-md);
    border-radius: var(--borderRadius);
    border: 1px dotted var(--clr-brdr-medium);
    position: relative;
    overflow: hidden;
    width: 100%;
    box-shadow: var(--shadow-subtle);
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-activity-gridItem::after {
    transition: all var(--transitionTime) ease-in-out;
    background: var(--baseLight200);
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 2;
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-activity-gridItem:hover {
    background-color: var(--lightBlue);
    box-shadow: var(--shadow-hover);
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-activity-number {
    display: block;
    text-align: center;
    background-color: rgba(0, 0, 0, .025);
    padding: .5rem;
    position: relative;
    margin: calc(var(--innerPaddingX) * -1) calc(var(--innerPaddingX) * -1) var(--innerPaddingSmall);
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-activity-number strong {
    width: 24px;
    height: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: var(--primaryColor450);
    background-color: var(--baseLight100);

}

.mmt-mdp-section-schedule tr:hover td:not(.mmt-mdp-schedule-activity-multiple) a .mmt-mdp-schedule-activity-title,
.mmt-mdp-section-schedule .mmt-mdp-schedule-activity-gridItem:hover a .mmt-mdp-schedule-activity-title {
    color: var(--primaryColor900);
}

.mmt-mdp-section-schedule a:hover .mmt-mdp-schedule-activity-title::after {
    transform: translateY(-.1rem);
    opacity: 1;
}

.mmt-mdp-schedule-activity-gridItem:hover::after {
    background-color: var(--primaryColor100);
}


@media screen and (min-width: 720px) {
    .mmt-mdp-section-schedule .mmt-mdp-schedule-activity-multiple {
        display: grid;
        grid-template-columns: var(--tileGrid-fit);
        grid-gap: var(--gap-grid-xs);
    }
}


/** Speakers shouldn't be primary info */
.mmt-mdp-section-schedule .mmt-mdp-schedule-speakers {
    display: block;
    margin-top: .35rem;
    font-size: var(--labelSize);
    color: var(--baseDark100);
}

/** Images from speakers */
.mmt-mdp-section-schedule .mmt-mdp-schedule-speakers-photos {
    display: flex;
    margin-top: .5rem;
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-speakers-photos__imageWrapper {
    margin: 0 .25rem .25rem 0;
    width: 32px;
    height: 32px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    position: relative;
    vertical-align: middle;
    background: var(--baseLight150);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.mmt-mdp-section-schedule .mmt-mdp-schedule-speakers-photos__imageWrapper img {
    transition: all var(--transitionTime--slow) ease-in-out;
    transform: scale(1.01);
    opacity: 0.95;
    width: 100%;
    object-fit: cover;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

.mmt-mdp-section-schedule table tr:not(.mmt-mdp-schedule-separator):not(.mmt-mdp-schedule-row-multiple):hover .mmt-mdp-schedule-speakers-photos__imageWrapper img,
.mmt-mdp-section-schedule .mmt-mdp-schedule-activity-gridItem:hover .mmt-mdp-schedule-speakers-photos__imageWrapper img {
    transform: scale(1.1);
    opacity: 1;
}


/** Don't underline schedule items */
.mmt-mdp-section-schedule td a {
    text-decoration: none;
}

/** List with schedule items */
.mmt-mdp-schedule-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}

.mmt-meeting-detail-page .mmt-mdp-time-multiple {
    border-bottom-color: var(--baseLight100);
}

.mmt-mdp-schedule-items li {
    margin-bottom: var(--gap-vert);
    border-bottom: 1px solid var(--clr-brdr-medium);
    padding-bottom: var(--gap-vert);
}

.mmt-mdp-item-title p,
.mmt-mdp-item-title h4 {
    margin: 0;
}

.mmt-mdp-item-title p {
    font-size: var(--labelSize);
    display: block;
    margin-bottom: .5rem;
}

.mmt-mdp-item-title p::before {
    background-image: url(/ui/kortom/images/time.svg);
    content: "";
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: .5rem;
    position: relative;
    top: 2px;
}

.mmt-mdp-item-title span {
    font-size: var(--labelSize);
}

.mmt-mdp-item-title h4 {
    font-size: var(--h3Size);
    margin-bottom: .25rem;
}

.mmt-mdp-item-speakers-photos {
    display: flex;
    margin-top: 0.25rem;
}

.mmt-mdp-schedule-items h5 {
    margin-bottom: 3px;
}

.mmt-mdp-schedule-items li li {
    margin: 0;
    border: 0;
}

/** Title part of activity */
.mmt-mdp-item-title {
    margin-bottom: .75rem;
}

/** Activity with linked documents */
.mmt-activity-has-documents a .mmt-mdp-schedule-activity-title::before {
    background-image: url(/ui/kortom/images/file.svg);
    content: "";
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: .5rem;
    position: relative;
    top: 2px;
}

/** modal */
.modal .modal-title {
    display: flex;
    font-family: var(--specialFont);
    align-items: flex-start;
    flex-direction: column;
}

.modal .modal-title .mmt-mdp-item-time {
    font-weight: 400;
    font-size: var(--labelSize);
    font-family: var(--baseFont);
    display: block;
    margin-block: .25rem;
    color: var(--baseDark500);
}

.modal .modal-title .mmt-mdp-item-time::before {
    background-image: url(/ui/kortom/images/time.svg);
    content: "";
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: .5rem;
    position: relative;
    top: 2px;
}

/** Images from speakers */
.modal .modal-body .mmt-mdp-item-speakers-photos {
    display: flex;
    margin-top: .5rem;
    margin-bottom: var(--innerPaddingSmall);
}

.modal .modal-body .mmt-mdp-schedule-speakers-photos__imageWrapper {
    margin: 0 .25rem .25rem 0;
    width: 32px;
    height: 32px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    position: relative;
    vertical-align: middle;
    background: var(--baseLight150);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.modal .modal-body .mmt-mdp-schedule-speakers-photos__imageWrapper img {
    transition: all var(--transitionTime--slow) ease-in-out;
    transform: scale(1.01);
    opacity: 0.95;
    width: 100%;
    object-fit: cover;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

.modal .modal-body .mmt-mdp-item-speakers-photos a:hover .mmt-mdp-schedule-speakers-photos__imageWrapper img {
    transform: scale(1.1);
    opacity: 1;
}


@media screen and (min-width: 720px) {
    .modal-body .mmt-mdp-item-desc {
        font-size: var(--bodySize-optimized-for-reading);
        line-height: var(--lnHeight-md);
    }
}