/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

/* フォント設定 */
nav, h1, h2, h3, h4, h5 .catch-copy, .page-title {
	font-family: "fot-tsukumin-pr6n", serif !important;
    font-weight: 300; 
    font-feature-settings: "palt"; 
    letter-spacing: 0.1em; 
    line-height: 1.6;
}

/* 予約メニュー（li.reserve）配下のリンクをボタン化 */
.reserve a {
    background-color: #3ba2b8; 
    color: #ffffff !important; 
    padding: 15px 30px !important;       
    border-radius: 5%;      
    text-decoration: none;
    transition: all 0.3s ease; /* ホバー時の変化を滑らかに */
    display: inline-block;     /* パディングを効かせるために必要 */
    line-height: 1.2;          /* 行間の調整 */
}

.gMenu>li.reserve:before {
	display: none !important;
}

/* 予約メニュー内の太字タグのリセット */
.reserve a strong.gMenu_name {
    font-weight: normal;       /* 必要に応じて bold のままも可 */
}

/* ホバー（マウスを乗せた）時の動き */
.reserve a:hover {
    background-color: #3192a6;
    opacity: 0.9;
    transform: translateY(-2px); /* 少し浮き上がる演出 */
}

/* SP（スマホ）メニューでの調整 ※必要に応じて */
@media (max-width: 768px) {
    .reserve a {
        background-color: transparent; /* スマホメニュー内では背景を消す場合 */
        color: #333 !important;
        padding: 0;
    }
}

.copySection p:nth-child(2) {
    display: none !important;
}

/* --- レイアウト：横並び（グリッド）設定 --- */

/* リスト全体をグリッド化 */
ul.wp-block-latest-posts {
    display: grid;
    /* 最小230px幅で、画面幅に合わせて自動で列数を調整（PCは3-4列、スマホは1-2列） */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 30px; /* カード同士の間隔 */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 各カード（記事）のスタイル */
ul.wp-block-latest-posts li {
    position: relative;
    margin-bottom: 0; /* グリッドのgapで調整するため不要 */
    display: flex;
    flex-direction: column; /* 画像とテキストを縦に積む */
}

/* --- デザイン：画像の装飾とホバーエフェクト --- */

/* 画像を囲む枠 */
.wp-block-latest-posts__featured-image {
    position: relative;
    overflow: hidden; /* 拡大時にはみ出させない */
    margin-bottom: 15px;
    border-radius: 8px; /* 角丸 */
    aspect-ratio: 16 / 9; /* 画像の縦横比を統一（不揃いを防ぐ） */
    background-color: #f0f0f0; /* 画像読み込み前の背景色 */
    width: 100%;
}

/* 画像本体 */
.wp-block-latest-posts__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせてトリミング（比率崩れ防止） */
    transition: transform 0.4s ease;
    display: block;
}

/* ▼ ホバー時：画像拡大 */
ul.wp-block-latest-posts li:hover .wp-block-latest-posts__featured-image img {
    transform: scale(1.1);
}

/* ▼ ホバー時：青色フィルター（オーバーレイ） */
.wp-block-latest-posts__featured-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ピリリコ様の雰囲気に合わせ、少し落ち着いた青（必要に応じて変更可） */
    background-color: rgba(135, 206, 235, 0.4); 
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

ul.wp-block-latest-posts li:hover .wp-block-latest-posts__featured-image::after {
    opacity: 1;
}

/* --- テキスト周りの調整 --- */

/* タイトルリンク */
ul.wp-block-latest-posts li a.wp-block-latest-posts__post-title {
    font-weight: bold;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

/* ホバー時にタイトルも青くする */
ul.wp-block-latest-posts li:hover a.wp-block-latest-posts__post-title {
    color: #0073aa;
}

/* 日付 */
.wp-block-latest-posts__post-date {
    font-size: 0.85rem;
    color: #888;
    margin-top: auto; /* 日付を常に一番下に配置 */
}