/* ===================================
   grid-section スタイル
   =================================== */

/* 汎用カードボーダー・シャドウ */
.shadow-box {
    border: 1px solid rgb(255 255 255);
    box-shadow: var(--shadow-card);
    border-radius: 20px;
    transition: all 0.3s ease;
}

/* ===================================
   Grid Section 全幅背景（疑似要素で実装）
   =================================== */
.grid-section {
    position: relative;
    /* コンテンツはl-containerの制約を受ける（何も変更しない） */
}

/* 背景を全幅に広げる */
.grid-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    z-index: -1;

    /* 方眼パターン背景 */
    background-image:
        linear-gradient(0deg, transparent calc(100% - 2px), #f9f9f9 calc(100% - 2px)),
        linear-gradient(90deg, transparent calc(100% - 2px), #f9f9f9 calc(100% - 2px));
    background-size: 16px 16px;
    background-position: center center;
    background-color: #FFF;
}

/* ===================================
   Grid Section 内のコンテンツ調整
   =================================== */
/* 「研究・社会連携」のカラムを修正 */
.grid-section .wp-block-columns.is-not-stacked-on-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3カラムの場合 */
.grid-section .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
    flex: 0 0 calc((100% - 4rem) / 3);
    max-width: calc((100% - 4rem) / 3);
}

/* ===================================
   カードスタイル
   =================================== */
.grid-section .shadow-box,
.grid-section .c-row__col {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.grid-section .shadow-box:hover,
.grid-section .c-row__col:hover,
:not(.home) .shadow-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* ===================================
   パディング調整
   =================================== */
.wp-block-group.grid-section {
    padding-top: 3rem !important;
    padding-bottom: 6rem !important;
}

/* ===================================
   レスポンシブ対応
   =================================== */
@media (max-width: 1023px) {
    .grid-section .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
        flex: 0 0 calc((100% - 2rem) / 2);
        max-width: calc((100% - 2rem) / 2);
    }
}

@media (max-width: 768px) {
    .grid-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .grid-section .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
        flex: 0 0 100%;
        max-width: 100%;
    }
}