/*
Theme Name: MONTY
Theme URI: https://monty1000.com/
Description: イヤーエステサロンMONTY（茨城県石岡市）専用のオリジナルテーマ。トップから下層まで全ページを収録し、「耳よりコラム」はWordPressのブログ機能で運用します。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: 制作者と依頼主のみ使用可
Text Domain: monty
*/

/* デザインの本体は assets/css/front.css（トップ）と assets/css/sub.css（下層）です。
   ここには WordPress 側で必要になる調整だけを書いています。 */

/* --- 記事カード（耳よりコラム） --- */
.col-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.col-cards.is-related { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; }
.col-card {
  background: #fff; border: 1px solid var(--line, rgba(46,39,35,.14)); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 2px 12px rgba(46,39,35,.05); transition: transform .2s;
}
.col-card:hover { transform: translateY(-4px); }
.col-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.col-card__body { padding: 20px 22px 24px; }
.col-card__meta { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.col-card__date { font-size: 12px; color: var(--coral-deep); font-weight: 700; }
.col-card__cat { font-size: 11.5px; border: 1px solid var(--line, rgba(46,39,35,.14)); border-radius: 999px; padding: 1px 10px; color: var(--ink-soft); }
.col-card__title { font-size: 15px; font-weight: 700; line-height: 1.7; }

/* --- カテゴリの絞り込み --- */
.cat-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.cat-chips a { background: #fff; border: 1px solid var(--line, rgba(46,39,35,.14)); border-radius: 999px; padding: 7px 20px; font-size: 12.5px; }
.cat-chips a.on { background: var(--ink); color: #fff; font-weight: 700; border-color: var(--ink); }

/* --- ページ送り --- */
.monty-pager { margin-top: 48px; }
.monty-pager .nav-links { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.monty-pager .page-numbers {
  width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--line, rgba(46,39,35,.14));
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.monty-pager .page-numbers.current { background: var(--ink); color: #fff; font-weight: 700; border-color: var(--ink); }
.monty-pager .page-numbers.dots { border: none; background: none; }
.monty-pager .screen-reader-text { display: none; }

/* --- 記事本文 --- */
.article .monty-eyecatch { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 14px; display: block; margin-bottom: 40px; }
.article img { max-width: 100%; height: auto; border-radius: 14px; }
.article .wp-block-image { margin: 32px 0; }
.article .wp-block-image img { border-radius: 14px; }

/* --- 記事がないとき・404 --- */
.monty-empty { max-width: 44em; margin: 0 auto; text-align: center; }
.monty-empty p { color: var(--ink-soft); font-size: 15px; margin-bottom: 24px; }

/* --- WordPressの標準クラス --- */
body.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar header { top: 46px; } }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-top: 8px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* --- 地図まわりの調整 ---
   店舗情報は「表 ＋ 地図」の2列組み。1fr だけだと表の最小幅に押されて
   地図側が細く潰れるため、minmax(0,1fr) で必ず半分ずつにする。 */
.info-cols, .info-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 800px) { .info-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .info-cols { grid-template-columns: 1fr; } }
.info-cols > *, .info-grid > * { min-width: 0; }
iframe[title="MONTYの地図"] { width: 100%; max-width: 100%; border-radius: 14px; }