/*
 Theme Name: edupark
 Version: 1.0.0
 Author: Edupark Team
 Description: Edupark用クラシックテーマ（Twenty Twenty-One子テーマ）
*/

/* ========================
   基本レイアウト共通
   ======================== */

/* 幅ユーティリティ */
.alignwide { max-width: min(1200px, 92vw); margin-inline: auto; }

/* 背景ユーティリティ（FSE互換） */
.has-base-background-color { background: var(--wp--preset--color--base, #fff); }

/* 画像のはみ出し防止 */
.entry-content img,
.wp-block-image img { max-width:100%; height:auto; }

/* ========================
   Header
   ======================== */

.site-header { padding: 20px 0; }
.header-inner{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap: var(--wp--style--block-gap, 1rem);
}

/* Branding */
.site-branding{ display:flex; align-items:center; gap: var(--wp--preset--spacing--20, 1.25rem); }
.custom-logo-link img{ width:60px; height:auto; display:block; }
.site-title{ margin:0; font-weight:700; font-size:1.125rem; line-height:1.2; }
.site-text-logo{ font-weight:700; font-size:1.125rem; text-decoration:none; }

/* Menu（重複を集約） */
.site-header .primary-menu { display:flex; gap: var(--wp--preset--spacing--20, 1.25rem); }
.site-header .menu a { text-decoration:none; }

/* ========================
   Footer
   ======================== */

.site-footer { background:#f8f8f8; color:#333; padding:40px 0; font-size:.9rem; }
.footer-inner{
  max-width:min(1200px,92vw); margin-inline:auto;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem;
}
.footer-menu .menu{ display:flex; flex-wrap:wrap; gap:1rem; list-style:none; margin:0; padding:0; }
.footer-menu a{ text-decoration:none; color:inherit; }
.footer-copy{ text-align:right; flex:1 1 100%; margin-top:10px; }

/* ========================
   ページ見出し
   ======================== */

.page-header.alignwide{ margin: 24px auto 20px; }
.page-header .page-title{ font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; }

/* =========================
   一覧カード（ブログ／イベント）
   ========================= */

/* グリッド（.alignwide と併用） */
.cards{ --gap:24px; --cols:3; display:grid; gap:var(--gap); grid-template-columns:repeat(var(--cols), minmax(0,1fr)); margin:24px auto 48px; }
@media (max-width:1024px){ .cards{ --cols:2; } }
@media (max-width:640px){  .cards{ --cols:1; --gap:16px; } }

/* カード本体 */
.card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.card__link{ color:inherit; text-decoration:none; display:block; height:100%; }

/* サムネイル（3:2 推奨。16/9にしたい場合は 16/9 に変更） */
.card__thumb{ aspect-ratio: 3 / 2; overflow:hidden; background:#f5f5f5; margin:0; }
.card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 本文 */
.card__body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; }
.card__title{ font-size: clamp(16px, 1.2vw, 18px); line-height:1.5; margin:0; font-weight:700; }

/* メタ情報（イベント日付・会場など／ブログ日付） */
.card__meta{ list-style:none; padding:0; margin:0; color:#666; font-size:.9rem; display:flex; flex-wrap:wrap; gap:8px 14px; }
.card__meta .ico{ opacity:.8; margin-right:.25em; }
.card__date{ color:#777; font-size:.9rem; }
.card__place{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* 抜粋 */
.card__excerpt{ color:#444; font-size:14px; line-height:1.7; }

/* タグ／カテゴリ */
.card__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.tag{
  display:inline-block; padding:.25em .6em; border-radius:999px;
  background:#fff3ec; color:#f45d48; border:1px solid #ffd8cc; font-size:.8rem; line-height:1;
}

/* バリエーション（必要なら微調整） */
.card--event .card__title{ color:#333; }
.card--blog  .card__title{ color:#222; }