/*
 * siteapps / Public weekly program
 * Planet Fitness Chania website skin
 *
 * Background: #18191b
 * Main text:  #d2d7db
 * Accent:     #ec3642
 * Font:       ABeeZee
 */

.siteapps-programs {
    --sap-bg: #18191b;
    --sap-text: #d2d7db;
    --sap-heading: #ec3642;
    --sap-strong: #ffffff;
    --sap-border: rgba(255,255,255,.13);
    --sap-row: rgba(255,255,255,.025);
    --sap-row-alt: rgba(255,255,255,.045);
    --sap-head-bg: #34373a;

    box-sizing: border-box;
    width: 100%;
    padding: 34px 30px;

    background-color: var(--sap-bg);
    background-image: url("/images/2019/11/19/service-bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;

    color: var(--sap-text);
    font-family: 'ABeeZee', sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

.siteapps-programs *,
.siteapps-programs *::before,
.siteapps-programs *::after {
    box-sizing: border-box;
}


/* Περίοδος */

.siteapps-programs-period {
    margin: 0 0 30px 10px;
    color: #d2d7db;
    font-size: 16px;
    font-weight: 400;
}


/* Αίθουσες */

.siteapps-program-room {
    margin: 0 0 50px;
}

.siteapps-program-room:last-of-type {
    margin-bottom: 0;
}

.siteapps-program-room-title {
    margin: 0 0 18px;
    color: var(--sap-heading);
    font-family: 'ABeeZee', sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.25;
}


/* Desktop / Tablet */

.siteapps-program-week {
    display: grid;
    grid-template-columns: repeat(var(--siteapps-day-count), minmax(0, 1fr));
    width: 100%;
    overflow: hidden;
    border-top: 1px solid var(--sap-border);
    border-left: 1px solid var(--sap-border);
    background: transparent;
}


/* Επικεφαλίδες ημερών */

.siteapps-program-day-head {
    padding: 14px 10px;
    background: #34373a;
    color: #d2d7db;
    border-right: 1px solid var(--sap-border);
    border-bottom: 1px solid rgba(255,255,255,.18);
    font-family: 'ABeeZee', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}


/* Κελιά */

.siteapps-program-cell {
    min-width: 0;
    min-height: 108px;
    padding: 17px 12px;
    border-right: 1px solid var(--sap-border);
    border-bottom: 1px solid var(--sap-border);
    background: var(--sap-row);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.siteapps-program-cell:nth-child(10n+6),
.siteapps-program-cell:nth-child(10n+7),
.siteapps-program-cell:nth-child(10n+8),
.siteapps-program-cell:nth-child(10n+9),
.siteapps-program-cell:nth-child(10n+10) {
    background: var(--sap-row-alt);
}

.siteapps-program-cell.is-empty {
    background: transparent;
}


/* Hover μαθήματος */

.siteapps-program-cell:not(.is-empty) {
    transition: background-color .20s ease, box-shadow .20s ease;
}

.siteapps-program-cell:not(.is-empty):hover {
    background-color: rgba(236, 54, 66, 0.10);
    box-shadow: inset 0 0 0 1px rgba(236, 54, 66, 0.28);
}

.siteapps-program-cell:not(.is-empty):hover .siteapps-program-name {
    color: #ffffff;
}


/* Περιεχόμενο κελιών */

.siteapps-program-time {
    display: block;
    color: #d2d7db;
    font-family: 'ABeeZee', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    white-space: nowrap;
}

.siteapps-program-time span {
    color: #d2d7db;
    font-weight: 400;
}

.siteapps-program-name {
    display: block;
    color: #d2d7db;
    font-family: 'ABeeZee', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    transition: color .20s ease;
}

.siteapps-program-instructor {
    display: block;
    margin-top: 3px;
    color: rgba(210, 215, 219, 0.62);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.siteapps-program-note {
    display: block;
    margin-top: 2px;
    color: #d2d7db;
    font-size: 11px;
    font-style: italic;
    line-height: 1.35;
}


/* Empty message */

.siteapps-programs-empty {
    padding: 22px;
    border: 1px solid var(--sap-border);
    background: var(--sap-row);
    color: #d2d7db;
    font-family: 'ABeeZee', sans-serif;
}


/* Φάσα Εκτύπωση / PDF */

.siteapps-program-pdfbar {
    margin-top: 30px;
    padding: 16px 18px;
    border-top: 1px solid var(--sap-border);
    border-bottom: 1px solid var(--sap-border);
    background: #242629;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.siteapps-program-pdfbar-text {
    color: #d2d7db;
    font-size: 14px;
    line-height: 1.45;
}

.siteapps-program-pdfbar-link {
    display: inline-block;
    flex: 0 0 auto;
    padding: 9px 15px;
    border: 1px solid #ec3642;
    color: #ffffff;
    background: #ec3642;
    font-family: 'ABeeZee', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .20s ease, color .20s ease, border-color .20s ease;
}

.siteapps-program-pdfbar-link:hover,
.siteapps-program-pdfbar-link:focus {
    color: #ffffff;
    background: transparent;
    border-color: #ec3642;
    text-decoration: none;
}


/* Mobile */

.siteapps-program-mobile {
    display: none;
}

@media (max-width: 767px) {
    .siteapps-programs {
        padding: 28px 18px;
    }

    .siteapps-program-week {
        display: none;
    }

    .siteapps-program-mobile {
        display: block;
    }

    .siteapps-program-room {
        margin-bottom: 42px;
    }

    .siteapps-program-room-title {
        margin-bottom: 16px;
        font-size: 23px;
    }

    .siteapps-program-mobile-day {
        margin: 0 0 20px;
        border-top: 1px solid var(--sap-border);
        border-left: 1px solid var(--sap-border);
        border-right: 1px solid var(--sap-border);
        background: transparent;
    }

    .siteapps-program-mobile-day h4 {
        margin: 0;
        padding: 12px 15px;
        border-bottom: 1px solid rgba(255,255,255,.18);
        background: #34373a;
        color: #d2d7db;
        font-family: 'ABeeZee', sans-serif;
        font-size: 16px;
        font-weight: 500;
    }

    .siteapps-program-mobile-class {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        column-gap: 15px;
        row-gap: 3px;
        align-items: start;
        padding: 14px 15px;
        border-bottom: 1px solid var(--sap-border);
        background: var(--sap-row);
        transition: background-color .20s ease, box-shadow .20s ease;
    }

    .siteapps-program-mobile-class:nth-child(odd) {
        background: var(--sap-row-alt);
    }

    .siteapps-program-mobile-class:hover {
        background-color: rgba(236, 54, 66, 0.10);
        box-shadow: inset 0 0 0 1px rgba(236, 54, 66, 0.28);
    }

    .siteapps-program-mobile-class:hover .siteapps-program-name {
        color: #ffffff;
    }

    .siteapps-program-mobile-class .siteapps-program-time {
        grid-row: 1 / span 3;
        text-align: left;
    }

    .siteapps-program-mobile-class .siteapps-program-name,
    .siteapps-program-mobile-class .siteapps-program-instructor,
    .siteapps-program-mobile-class .siteapps-program-note {
        grid-column: 2;
        text-align: left;
    }

    .siteapps-program-pdfbar {
        margin-top: 24px;
        padding: 15px;
        flex-direction: column;
        align-items: stretch;
    }

    .siteapps-program-pdfbar-link {
        width: 100%;
        padding: 11px 15px;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .siteapps-program-mobile-class {
        grid-template-columns: 1fr;
    }

    .siteapps-program-mobile-class .siteapps-program-time,
    .siteapps-program-mobile-class .siteapps-program-name,
    .siteapps-program-mobile-class .siteapps-program-instructor,
    .siteapps-program-mobile-class .siteapps-program-note {
        grid-column: 1;
        grid-row: auto;
    }
}