@charset "UTF-8";

/**************************************
 * file: index2.css
 * brief: index2.html 専用スタイル
 *
 * 数学総合若手研究集会 INDEX ページ専用のCSS。
 * common.css に含めた共通部分を除き，
 * サイドメニュー，2カラム配置，
 * 過去開催カードなど，INDEXページ固有の表示を管理する。
 **************************************/

/* =========================================================
   調整用変数
   PC表示・タブレット表示・スマホ表示の調整は主にここで行う
========================================================= */

.index-page {
    /* 共通色・影・transition */
    --index2-card-border-color: rgba(35, 101, 28, 0.16);
    --index2-card-border-hover-color: rgba(35, 101, 28, 0.34);
    --index2-side-menu-bg: rgba(255, 255, 255, 0.84);
    --index2-side-menu-shadow: 0 14px 34px rgba(35, 101, 28, 0.1);
    --index2-current-link-shadow: 0 10px 24px rgba(35, 101, 28, 0.22);
    --index2-past-events-shadow: 0 7px 18px rgba(35, 101, 28, 0.07);
    --index2-past-events-hover-shadow: 0 16px 34px rgba(35, 101, 28, 0.15);
    --index2-transition-card: 0.22s ease;

    /* PC表示：ページ全体 */
    --index2-page-line-height: 1.9;

    /* PC表示：ページレイアウト */
    --index2-page-layout-margin-bottom: 0rem;
    --index2-side-menu-width: 23rem;
    --index2-page-layout-column-gap: 2rem;

    /* PC表示：サイドメニュー */
    --index2-side-menu-top-position: 2.4rem;
    --index2-side-menu-padding-block: 2.4rem;
    --index2-side-menu-padding-inline: 2.2rem;
    --index2-side-menu-title-margin-bottom: 1.4rem;
    --index2-side-menu-title-padding-bottom: 1.2rem;
    --index2-side-menu-title-font-size: 1.7rem;
    --index2-side-menu-title-letter-spacing: 0.2em;
    --index2-side-menu-item-margin-bottom: 1rem;
    --index2-side-menu-link-min-width: 12rem;
    --index2-side-menu-link-padding-block: 0.4rem;
    --index2-side-menu-link-padding-inline: 1.6rem;
    --index2-side-menu-link-font-size: 1.5rem;
    --index2-side-menu-current-link-margin-bottom: 1rem;
    --index2-side-menu-current-link-padding-block: 1.2rem;
    --index2-side-menu-current-link-padding-inline: 2.8rem;

    /* PC表示：過去開催カード */
    --index2-past-events-gap: 0.2rem;
    --index2-past-events-item-line-width: 6px;
    --index2-past-events-link-padding-top: 1.2rem;
    --index2-past-events-link-padding-right: 2rem;
    --index2-past-events-link-padding-bottom: 1.2rem;
    --index2-past-events-link-padding-left: 2.5rem;
}

/* ==============================
   Layout
   サイドメニューと本文の2カラムレイアウト
============================== */

.index-page .page-layout {
    margin-bottom: var(--index2-page-layout-margin-bottom);
    font-size: var(--common-main-font-size);
    line-height: var(--index2-page-line-height);
}

.index-page .page-layout__inner {
    display: grid;
    grid-template-columns: var(--index2-side-menu-width) 1fr;
    gap: var(--index2-page-layout-column-gap);
}

/* ==============================
   Side menu
   左側のサイドメニュー
============================== */

.index-page :where(h2, h3, p, ul, li) {
    margin: 0;
}

/* 見出しの左余白は common.css の共通設定を維持する */
.index-page :where(ul) {
    padding: 0;
}

.index-page .side-menu {
    position: sticky;
    top: var(--index2-side-menu-top-position);
    align-self: start;
    padding:
        var(--index2-side-menu-padding-block) var(--index2-side-menu-padding-inline);
    --common-panel-bg: var(--index2-side-menu-bg);
    --common-panel-shadow: var(--index2-side-menu-shadow);

    text-align: center;
}

.index-page .side-menu__title {
    margin-bottom: var(--index2-side-menu-title-margin-bottom);
    padding-bottom: var(--index2-side-menu-title-padding-bottom);
    border-bottom: 1px solid var(--hokudai-border);
    color: var(--hokudai-green);
    font-size: var(--index2-side-menu-title-font-size);
    font-weight: 700;
    letter-spacing: var(--index2-side-menu-title-letter-spacing);
    text-transform: uppercase;
}

.index-page .side-menu__item {
    margin-bottom: var(--index2-side-menu-item-margin-bottom);
}

.index-page .side-menu__link {
    display: inline-block;
    min-width: var(--index2-side-menu-link-min-width);
    padding:
        var(--index2-side-menu-link-padding-block) var(--index2-side-menu-link-padding-inline);
    border-radius: var(--common-frame-radius-small);
    color: var(--hokudai-ink);
    font-size: var(--index2-side-menu-link-font-size);
    text-align: center;
}

.index-page .side-menu__link:hover,
.index-page .side-menu__link:focus {
    background-color: var(--hokudai-green-light);
    color: var(--hokudai-green);
}

.index-page .side-menu__link--current {
    margin-bottom: var(--index2-side-menu-current-link-margin-bottom);
    padding:
        var(--index2-side-menu-current-link-padding-block) var(--index2-side-menu-current-link-padding-inline);
    border-radius: var(--common-frame-radius-small);
    background: var(--hokudai-green-dark);
    box-shadow: var(--index2-current-link-shadow);
    color: var(--common-white);
    font-weight: 700;
}

.index-page .side-menu__link--current:hover,
.index-page .side-menu__link--current:focus {
    background: var(--hokudai-green-dark);
    color: var(--common-white);
}

/* ==============================
   Conference cards
   最新回・過去開催一覧のカード型リンク
============================== */

.index-page .past-events {
    /*
     * リスト自体を内容幅に縮め、各カードは同じ列幅に揃える。
     * 1件だけの最新回カードはその文字幅に、過去開催一覧は
     * 表示中のラベルで最も長いものの幅に合わせる。
     */
    display: inline-grid;
    width: fit-content;
    max-width: 100%;
    gap: var(--index2-past-events-gap);
    padding: 0;
    vertical-align: top;
}

.index-page .past-events__label--mobile {
    display: none;
}

.index-page .past-events__item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--index2-card-border-color);
    border-radius: var(--common-frame-radius-medium);
    background: var(--common-white);
    box-shadow: var(--index2-past-events-shadow);
    color: var(--hokudai-muted);
    font-size: var(--common-main-font-size);
    transition:
        transform var(--index2-transition-card),
        box-shadow var(--index2-transition-card),
        border-color var(--index2-transition-card),
        background var(--index2-transition-card);
}

.index-page .past-events__item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--index2-past-events-item-line-width);
    background: var(--hokudai-green);
}

.index-page .past-events__item:hover {
    border-color: var(--index2-card-border-hover-color);
    background: var(--hokudai-green-light);
    box-shadow: var(--index2-past-events-hover-shadow);
    transform: none;
}

.index-page .past-events__link {
    display: block;
    padding:
        var(--index2-past-events-link-padding-top) var(--index2-past-events-link-padding-right) var(--index2-past-events-link-padding-bottom) var(--index2-past-events-link-padding-left);
    color: var(--hokudai-ink);
    font-weight: 700;
}

.index-page .past-events__link:hover {
    color: var(--hokudai-ink);
}

.index-page .past-events__link:focus {
    color: var(--hokudai-green);
}

/* ==============================
   タブレット表示設定
   834px以下で上書きされる変数・表示調整
============================== */

@media screen and (max-width: 834px) {
    .index-page {
        /* ページ全体 */
        --index2-page-line-height: 1.8;

        /* サイドメニュー */
        --index2-side-menu-margin-bottom: 2rem;
        --index2-side-menu-title-font-size: 1.6rem;
        --index2-side-menu-link-font-size: 1.4rem;
    }

    .index-page .page-layout__inner {
        display: block;
    }

    .index-page .side-menu {
        position: static;
        margin-bottom: var(--index2-side-menu-margin-bottom);
    }
}

/* ==============================
   スマホ表示設定
   600px以下で上書きされる変数
============================== */

@media screen and (max-width: 600px) {
    .index-page {
        /* サイドメニュー */
        --index2-side-menu-padding-block: 1.8rem;
        --index2-side-menu-padding-inline: 1.4rem;
        --index2-side-menu-title-font-size: 1.4rem;
        --index2-side-menu-link-font-size: 1.3rem;
        --index2-side-menu-link-min-width: 10rem;
        --index2-side-menu-link-padding-block: 0.45rem;
        --index2-side-menu-link-padding-inline: 1.2rem;

        /* 現在ページリンク */
        --index2-side-menu-current-link-padding-block: 1rem;
        --index2-side-menu-current-link-padding-inline: 2rem;

        /* 過去開催カード */
        --index2-past-events-link-padding-top: 1.3rem;
        --index2-past-events-link-padding-right: 1.3rem;
        --index2-past-events-link-padding-bottom: 1.3rem;
        --index2-past-events-link-padding-left: 2.2rem;
    }

    /* スマホではカード一覧を1列のまま横幅いっぱいに広げる。 */
    .index-page .past-events {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .index-page .past-events__item,
    .index-page .past-events__link {
        width: 100%;
    }

    .index-page .past-events__label--desktop {
        display: none;
    }

    .index-page .past-events__label--mobile {
        display: inline;
    }
}