@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:    cocoon-master
Version:     1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ========================================================== */
/* 0. 【全体構造】カードコンテナとカード自体の基本的な修正 */

/* カード自体のスタイル: コンテンツ量で高さが変わらないようにFlex Columnを設定 */
.magazine-card {
    display: flex;
    flex-direction: column; 
    height: 100%; /* グリッドアイテムの高さを均一にするために重要 */
}

/* 画像エリアの縦横比と位置の制御 (★重要: 表示崩れ対策のコア★) */
.magazine-image {
    position: relative; /* 日付バッジ（絶対配置）の基点 */
    overflow: hidden; /* 画像がはみ出さないように */
    width: 100%;
    /* 縦横比を制御するハック: 雑誌の一般的な縦横比 (例: 1:1.35) */
    padding-top: 135%; 
    height: 0; 
}

/* 画像とプレースホルダーを親要素（padding-topでできた領域）に合わせる */
.magazine-image img,
.magazine-image .no-image-placeholder,
.magazine-image a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をはみ出さずに表示 */
}

/* カードボディが残りのスペースを埋めるようにする */
.magazine-card-body {
    flex: 1; /* 残りのスペースを埋めて、カードの高さを均一に保つ */
    display: flex;
    flex-direction: column;
    padding: 10px;
}

/* ========================================================== */
/* 1. 【画像リンク化】の必須CSS */
.magazine-image a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* ========================================================== */
/* 2. 【NO IMAGE】プレースホルダーのスタイル */
.magazine-image .no-image-placeholder {
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #999;
    border: 1px dashed #ccc;
    box-sizing: border-box;
    font-size: 0.9em;
}

/* ========================================================== */
/* 3. 【日付バッジ】の配置とスタイル */
.magazine-date-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10; /* 画像やNO IMAGEの上に表示 */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    line-height: 1;
}

/* ========================================================== */
/* 4. 【リンクボタンのパディング縮小】 */
.buy-links a.buy-link {
    padding: 4px 6px; 
    font-size: 0.75em; 
    margin: 2px; 
    border-radius: 3px;
}

/* ========================================================== */
/* 5. 【総雑誌数/表示中】の縦幅縮小 */
/* 統計情報セクション全体 (statsSection) の強制的なパディング調整 */
#statsSection {
    padding: 3px 0 !important; 
    gap: 8px !important; 
}

/* 個別の統計カード (.stat-card) の強制的なサイズ調整 */
.stat-card {
    padding: 3px 6px !important; 
    border-radius: 4px !important;
    font-size: 14px !important; 
    border: 1px solid #ddd !important; 
}

/* ラベル (総雑誌数、表示中) のフォントサイズを強制的に縮小 */
.stat-card .label {
    font-size: 0.7em !important; 
    line-height: 1 !important;
    margin-bottom: 1px !important; 
    color: #666 !important;
}

/* 数字 (件数) のフォントサイズを強制的に縮小 */
.stat-card .number {
    font-size: 1em !important; 
    line-height: 1 !important;
    font-weight: bold !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}