/* ==========================================================================
   ZOOM説明会 アーカイブ 一覧ページ（zoom-archive-top）専用スタイル
   配置先: /ast/css/14/zoom-archive-top.css
   共通スタイル（zoom-archive-common.css）の後に読み込みます。
   ページTOP画像・ログイン画面のスタイルは共通ファイル側にあります。
   ========================================================================== */

/* live_seminar.css の .article-list-item { display:flex; } が [hidden] より優先されてしまい、
   JSでページ切り替え時に hidden にしたカードが非表示にならない不具合の修正 */
.article-list-item[hidden] {
    display: none;
}

/* 「アーカイブ一覧」見出しのフォントサイズ */
.section-heading {
    font-size: 16px;
}

/* 一覧を囲む枠の白い背景をなくし、ページ全体の背景色（動画ページと同じ）にそろえる。
   白いままだと、カードの周りだけ白い帯になって見えるため */
.article-container {
    background-color: transparent;
}

/* --- アーカイブ一覧：記事カード3カラム目（視聴ボタン） --- */
.article-list-item.is-3col a {
    align-items: stretch;
}
/* 2カラム目の中身（開催日→タイトル→区切り線→タグ）は
   スマホ・タブレット・PC共通の並びにする */
.list-divider {
    border-top: 1px solid rgba(26, 42, 64, 0.1);
    margin: 2px 0;
}
/* スマホ(〜767px)：3カラム目は非表示。代わりにサムネイルへ再生ボタンを重ねる */
.list-watch-col {
    display: none;
}
.list-thumb {
    position: relative;
    padding: 0;
    background: none;
}
.list-thumb img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.play-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%);
}
.play-overlay .circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #1a2a40;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s;
}
.article-list-item a:hover .play-overlay .circle {
    transform: scale(1.06);
}

.icon-play {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid currentColor;
    margin-right: 2px;
}
.play-overlay .icon-play {
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 11px;
    margin-right: -2px;
}

/* タブレット・PC(768px以上)：従来通り3カラム＋右端にグラデーションの長方形ボタン */
.watch-btn {
    display: none;
}
@media (min-width: 768px) {
    .list-watch-col {
        display: flex;
        flex-shrink: 0;
        width: 150px;
        align-items: center;
        justify-content: center;
        padding: 16px 20px 16px 0;
    }
    .list-thumb {
        padding: 8px;
        background: rgba(26, 42, 64, 0.04);
    }
    .list-thumb img {
        width: auto;
        height: auto;
        max-width: 108px;
        object-fit: initial;
    }
    .play-overlay {
        display: none;
    }
    .watch-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 10px;
        background: linear-gradient(135deg, #2d4060 0%, #1a2a40 55%, #0e1826 100%);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.05em;
        border-radius: 6px;
        text-decoration: none;
        transition: transform 0.3s, filter 0.3s;
    }
    .watch-btn:hover {
        background: linear-gradient(135deg, #d94f4f 0%, #cc3333 55%, #7a1a1a 100%);
        transform: translateY(-2px);
    }
}