@charset "UTF-8";

/* ============================================================
   Group Card System (団体一覧 - 「彩」デザインシステム・疑似要素全体リンク版)
   ============================================================ */

/* 画面幅に合わせて自動で列数を調整し、中央に整列させるグリッドコンテナ */
.gakusai-group-list-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    margin: 40px auto !important;
    width: 95% !important;
    max-width: 1200px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* 「彩」のデザインを継承したカード基盤 */
.gakusai-group-card {
    /* 内部の絶対配置リンクをカード内に収めるための基準点 */
    position: relative !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    
    border: 3px solid transparent !important; 
    border-radius: 16px !important; 
    background-image: 
        linear-gradient(#ffffff, #ffffff), 
        linear-gradient(135deg, #1f80c9, #1af1b1, #ffd000, #e1306c) !important; 
    background-origin: padding-box, border-box !important;
    background-clip: padding-box, border-box !important;
    
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
}

/* カード全体のどこに触れてもホバー効果を発動 */
.gakusai-group-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(31, 128, 201, 0.12), 
                0 8px 16px rgba(225, 48, 108, 0.08) !important; 
    cursor: pointer !important;
}

/* 団体ポスター画像（4:3の統一比率） */
.gakusai-group-card .poster {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    display: block !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
}

/* カードホバー時にポスターが美しくズームアップ */
.gakusai-group-card:hover .poster {
    transform: scale(1.04) !important; 
}

/* コンテンツ配置エリア */
.gakusai-group-card .group-info {
    padding: 20px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* 団体名タイトル（2行固定・三点リーダー処理） */
.gakusai-group-card .group-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1a3b5c !important; 
    margin: 0 !important;
    font-family: var(--font-mincho), "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    line-height: 1.4 !important;
    transition: color 0.3s ease !important;
    
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 2.8em !important;
}

/* カードホバー時にタイトルカラーが連動 */
.gakusai-group-card:hover .group-title {
    color: #1f80c9 !important;
}

/* ボタンラッパーを最下部に固定 */
.gakusai-group-card .buttons-wrapper {
    margin-top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 詳細ページ表示ボタン */
.gakusai-group-card .purpleBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 16px !important;
    background: #f4f8fc !important;
    color: #1f80c9 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    font-family: var(--font-mincho), serif !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* 重要：ボタンのリンク範囲をカード全体に100%引き伸ばすマジック */
.gakusai-group-card .purpleBtn::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important; /* カード全体の最前面に透明な膜として配置 */
}

/* カードホバー時にボタンデザインも「彩」のプライマリグラデーションへ完全連動 */
.gakusai-group-card:hover .purpleBtn {
    background: linear-gradient(135deg, #1f80c9, #1560a8) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(31, 128, 201, 0.15) !important;
}

/* 矢印アイコンのアニメーション */
.gakusai-group-card .purpleBtn .arrow-icon {
    transition: transform 0.3s ease !important;
    display: inline-block !important;
}

.gakusai-group-card:hover .purpleBtn .arrow-icon {
    transform: translateX(3px) !important;
}

/* =============================================
   スマートフォン・タブレット表示用
   ============================================= */
@media screen and (max-width: 600px) {
    .gakusai-group-list-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
        gap: 16px !important;
        width: 90% !important;
        padding: 0 !important;
    }
    .gakusai-group-card {
        max-width: 100% !important;
    }
}