/**
 * Landing Page Styles
 * 
 * Styles for program and group landing pages.
 * Used by: bypass/html5/js/Modules/LandingPage/main.js
 * 
 * Uses global variables from 2022/global.css:
 *   --purple, --orange, --white, --black-light, --grey-outline-color
 *   --border, --border-radius, --border-radius-section
 *   --medium-weight, --bold-weight, --general-text-size
 *   --default-timing
 */

/* ==========================================================================
   Landing Page Custom Properties (only for values not in global.css)
   ========================================================================== */

:root {
    --lp-box-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --lp-gradient: linear-gradient(to right bottom in oklab, rgb(107, 47, 254) 0%, rgb(214, 54, 0) 100%);
}

/* ==========================================================================
   Accent Graphics
   ========================================================================== */

.landing-accent {
    position: fixed;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.landing-accent img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.landing-accent--top-right {
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    opacity: 0.3;
}

.landing-accent--top-right img {
    transform: translate(30%, -30%);
}

.landing-accent--bottom-left {
    bottom: 0;
    left: 0;
    width: 350px;
    height: 350px;
    opacity: 0.6;
}

.landing-accent--bottom-left img {
    transform: translate(-30%, 30%);
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.landing-page-header {
    margin-bottom: 30px;
    margin-top: 0;
    font-size: var(--heading-size);
    font-weight: var(--medium-weight);
}

/* ==========================================================================
   Back Button
   ========================================================================== */

.landing-back-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
    color: var(--orange);
    text-decoration: none;
    font-size: var(--general-text-size);
    font-weight: var(--bold-weight);
}

.landing-back-button .material-icons {
    font-size: var(--small-icon-size);
}

/* ==========================================================================
   Card Grid
   ========================================================================== */

.landing-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    opacity: 0;
    transition: opacity var(--default-timing) ease-out;
}

.landing-card-container.is-visible {
    opacity: 1;
}

/* ==========================================================================
   Card
   ========================================================================== */

.landing-card {
    background: var(--white);
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 30px;
    cursor: pointer;
    transition: box-shadow var(--default-timing) ease-out;
    flex: 1 1 200px;
    max-width: calc(33.333% - 10px);
    display: flex;
    flex-direction: column;
}

.landing-card:hover {
    box-shadow: var(--lp-box-shadow-hover);
}

.landing-card__title {
    margin: 0 0 15px 0;
    font-size: var(--general-text-size);
    font-weight: var(--bold-weight);
    color: var(--purple);
    line-height: 1.3;
    min-height: calc(2 * 1.3em);
}

.landing-card__description {
    margin: 0;
    font-size: var(--general-text-size);
    color: var(--black-light);
    line-height: 1.4;
    flex: 1;
}

.landing-card__picture-container {
    display: flex;
    margin-top: 15px;
    justify-content: center;
    align-items: flex-end;
}

.landing-card__picture {
    min-height: 40px;
    max-height: 50px;
    min-width: 40px;
    max-width: 50px;
    margin: 0 5px;
    border-radius: 50%;
    background-size: cover;
}

/* ==========================================================================
   Icon List
   ========================================================================== */

.landing-icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 700px;
    opacity: 0;
    transition: opacity var(--default-timing) ease-out;
}

.landing-icon-list.is-visible {
    opacity: 1;
}

/* ==========================================================================
   Icon List Item
   ========================================================================== */

.landing-icon-item {
    display: flex;
    align-items: center;
    background: var(--white);
    border: var(--border);
    border-radius: var(--border-radius-section);
    margin-bottom: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--default-timing) ease-out;
}

.landing-icon-item:hover {
    box-shadow: var(--lp-box-shadow-hover);
}

.landing-icon-item__icon-container {
    background: var(--lp-gradient);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    align-self: stretch;
    transition: transform var(--default-timing) ease-out;
}

.landing-icon-item:hover .landing-icon-item__icon-container {
    transform: scale(1.1);
}

.landing-icon-item__icon {
    color: var(--white);
    font-size: var(--icon-size);
}

.landing-icon-item__content {
    padding: 20px 25px;
    flex: 1;
}

.landing-icon-item__title {
    margin: 0 0 8px 0;
    font-size: var(--general-text-size);
    font-weight: var(--bold-weight);
    color: var(--purple);
}

.landing-icon-item__description {
    margin: 0;
    font-size: var(--general-text-size);
    color: var(--black-light);
    line-height: 1.4;
}

/* ==========================================================================
   Item List (Programs/Program Groups)
   ========================================================================== */

.landing-list__header {
    font-size: var(--general-text-size);
    font-weight: var(--bold-weight);
    color: var(--black-light);
    margin: 0 0 15px 0;
}

.landing-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.landing-list-item {
    background: var(--white);
    border: var(--border);
    padding: 30px;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    color: var(--purple);
    font-weight: var(--medium-weight);
    cursor: pointer;
    transition: box-shadow var(--default-timing) ease-out;
}

.landing-list-item:hover {
    box-shadow: var(--lp-box-shadow-hover);
}

/* ==========================================================================
   Announcement Banner
   ========================================================================== */

.landing-announcement__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

.landing-announcement {
    position: relative;
    background-color: var(--white);
    border-radius: var(--border-radius-section);
    padding: 30px;
    padding-right: 50px;
    margin-bottom: 30px;
    box-shadow: var(--box-shadow-default);
    z-index: 100;
}

.landing-announcement__close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.landing-announcement__close .material-icons {
    color: var(--pink);
    font-size: 20px;
}

.landing-announcement__close:hover .material-icons {
    color: var(--orange);
}

.landing-announcement__title {
    margin: 0 0 15px 0;
    font-size: var(--general-text-size);
    font-weight: var(--bold-weight);
    color: var(--purple);
}

.landing-announcement p {
    margin: 0 0 15px 0;
    line-height: 1.5;
    color: var(--black-light);
}

.landing-announcement__list-label {
    margin-bottom: 10px !important;
}

.landing-announcement__list {
    list-style-type: disc;
    padding-left: 25px;
    margin: 0 0 15px 0;
    color: var(--black-light);
}

.landing-announcement__list li {
    margin-bottom: 5px;
    line-height: 1.5;
}

.landing-announcement__list li:last-child {
    margin-bottom: 0;
}

.landing-announcement__outro {
    margin-bottom: 0 !important;
}