/*
 Theme Name: Nephilim
 Theme URI: https://example.com/nephilim
 Author: （あなたの名前）
 Author URI: https://example.com
 Description: フルスクラッチで構築する WordPress テーマ「Nephilim」。
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: nephilim
 Tags: custom-theme, full-scratch, blog, minimal, responsive
*/

/* =========================================
   記事一覧カードレイアウト
   ====================================== */

/* 記事カード本体 */
.nephilim-post-item {
    display: flex;
    flex-direction: column;
    height: 100%;

    /* 木目が薄く透ける白 */
    background: rgba(255, 255, 255, 0.65);
    border-radius: 18px;

    /* 柔らかい影 */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.10),
        0 10px 28px rgba(0, 0, 0, 0.12);

    overflow: hidden;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* ホバー時の軽いアニメーション */
.nephilim-post-item:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.14),
        0 16px 32px rgba(0, 0, 0, 0.18);
}

/* カード全体をクリック可能にし、内側の幅を統一 */
.nephilim-post-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}

/* テキスト部分（余計なインセットはここでは付けない） */
.nephilim-post-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0;
}

/* サムネイル・タイトル・抜粋の横幅を完全一致させる */
.nephilim-post-thumb,
.nephilim-post-title,
.nephilim-post-excerpt {
    width: 100%;
    box-sizing: border-box;
}

/* サムネイル */
.nephilim-post-thumb {
    position: relative;      /* hover オーバーレイの基準 */
    overflow: hidden;
    margin: 0 0 2px 0;       /* 画像 → タイトルの隙間をごくわずかに */
}

.nephilim-post-thumb img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: filter 0.2s ease;
}

/* =========================================
   ホーム：サムネイル hover 演出
   ・ホバー時にサムネイルを少し暗くする
   ・「この記事を読む」の白文字を中央に表示
   ====================================== */

/* 暗幕＋「この記事を読む」テキスト */
.nephilim-post-thumb::after {
    content: "この記事を読む";

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.45);  /* 画像を少し暗くする */
    color: #fff;                       /* 文字色は白 */

    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;

    opacity: 0;                        /* 通常時は非表示 */
    transition: opacity 0.2s ease;
}

/* カード全体を hover したときだけ表示 */
.nephilim-post-item:hover .nephilim-post-thumb::after {
    opacity: 1;
}

/* 画像自体もほんのり暗くする */
.nephilim-post-item:hover .nephilim-post-thumb img {
    filter: brightness(0.75);
}

/* =========================================
   タイトル・抜粋
   ====================================== */

/* タイトル：黒背景＋白文字、左揃え */
.nephilim-post-title {
    margin: 0 0 6px 0;              /* h2 デフォルト margin-top を潰す & 抜粋との間だけ少し空ける */
    padding: 8px 12px;

    color: #fff;
    background: rgba(20, 20, 20, 0.75);

    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;

    text-align: left;
    border-radius: 8px;
}

/* 抜粋：白背景＋黒文字、2行まで表示、左揃え */
.nephilim-post-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;

    color: #111;
    background: rgba(255, 255, 255, 0.85);

    padding: 8px 12px;
    margin: 0 0 10px 0;

    text-align: left;
    border-radius: 8px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   日付＋Nephilimロゴ
   ====================================== */

/* 日付＋Nephilimロゴ：カード下部・左右に配置 */
.nephilim-post-meta {
    margin-top: auto; /* カード下部に寄せる */
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: rgba(60, 60, 60, 0.75);
}

.nephilim-post-date {
    font-weight: 400;
}

/* 通常時：金が「ぼんやり浮いている」状態 */
.nephilim-post-brand {
    font-weight: 600;
    letter-spacing: 0.08em;

    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.55),
        rgba(245, 227, 138, 0.55),
        rgba(191, 162, 51, 0.55)
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 発光の“広がり”だけを抑制 */
    text-shadow:
        0 0 2px rgba(212, 175, 55, 0.35),
        0 0 6px rgba(212, 175, 55, 0.20);

    filter: blur(0.10px); /* わずかなにじみ */
    opacity: 0.70;

    transition:
        opacity 0.25s ease,
        filter 0.25s ease,
        text-shadow 0.25s ease,
        color 0.25s ease;
}

/* hover時：金が消えて通常文字に戻る */
.nephilim-post-item:hover .nephilim-post-brand {
    background: none;
    -webkit-text-fill-color: initial;

    color: rgba(60, 60, 60, 0.85);
    text-shadow: none;
    filter: none;
    opacity: 1;
}


.nephilim-post-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.nephilim-post-badges .badge{
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;

  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);

  text-decoration: none;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
}

.nephilim-post-badges .badge-type{
  border-color: rgba(210,170,90,0.28);
}

.nephilim-post-badges .badge:hover{
  border-color: rgba(0,0,0,0.18);
}






/* =========================================
   Responsive (SP) - Post list (hard override)
   - “スマホでは別レイアウト”をCSSだけで実現
   - サムネ左 / 右にタイトル・抜粋・メタ
   ====================================== */
@media (max-width: 768px){

  /* 1記事 = 1行（左サムネ / 右本文） */
  .nephilim-post-item{
    display: grid;
    grid-template-columns: 92px 1fr;
    column-gap: 12px;

    /* 余白はカードに持たせる */
    padding: 10px;

    /* SPは軽めのカード感（好みで完全フラットでもOK） */
    background: rgba(255,255,255,0.62);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

    /* 記事間隔：詰める */
    margin-bottom: 8px;
  }

  /* aがブロックで全体クリックできる前提を維持 */
  .nephilim-post-link{
    display: contents; /* ← レイアウトは親grid、クリック領域は子を保持 */
  }

  /* 左：サムネ */
  .nephilim-post-thumb{
    grid-column: 1;
    grid-row: 1 / span 4;
    margin: 0;
    border-radius: 0; /* 四角 */
    overflow: hidden;
  }

  .nephilim-post-thumb img{
    width: 100%;
    height: 92px;
    object-fit: cover;
    display: block;
  }

  /* hoverオーバーレイはSP不要 */
  .nephilim-post-thumb::after{ content: none; }

  /* 右：本文一式（post-bodyがあっても無くても右に寄せる） */
  .nephilim-post-body,
  .nephilim-post-title,
  .nephilim-post-excerpt,
  .nephilim-post-meta,
  .nephilim-post-badges{
    grid-column: 2;
    min-width: 0;
  }

  /* タイトル：帯を外して一覧向けに */
  .nephilim-post-title{
    margin: 0 0 2px 0;
    padding: 0;
    background: transparent;
    color: rgba(15,15,15,0.92);
    font-size: 1.0rem;
    line-height: 1.4;
    border-radius: 0;
  }

  /* 抜粋：2行 */
  .nephilim-post-excerpt{
    background: transparent;
    padding: 0;
    margin: 2px 0 0 0;
    -webkit-line-clamp: 2;
  }

  /* メタ：小さめ */
  .nephilim-post-meta{
    margin-top: 6px;
    font-size: 0.8rem;
  }
}