/* =====================================================================
   コベドー塾 コラム専用CSS（column/index.html と column/_article-template.html が読む）
   記事一覧の枠・準備中の「noteで読む」・記事ページの本文と関連動画
   色は common.css のトークンだけを使う
   ===================================================================== */

/* ---------- 記事一覧（.articles）：白いカード（.card）を縦に並べる。JSが順に浮かび上がらせる ---------- */
.articles{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:16px}
.articles .card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding:18px 22px}
.articles .card > *{min-width:0}
.articles time{display:block;font-size:14px;color:var(--ink-2);font-weight:700;letter-spacing:.04em}
.articles h3{margin-top:2px;font-size:22px}
.articles .sum{margin-top:6px;font-size:16px;color:var(--ink-2);max-width:40em}
.articles .read{grid-column:2;grid-row:1 / span 3;align-self:center}
/* 「noteで読む」：記事が出るまでは押せない印（リンクではない） */
.read-wait{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 20px;border:2px dashed var(--grid);border-radius:10px;color:var(--ink-2);font-weight:700;font-size:16px;white-space:nowrap;background:var(--paper)}
.read .btn{min-height:48px;padding:8px 22px;font-size:16px;white-space:nowrap}
/* noteのマーク（note は外部サービス。藍1色の小さなピクト） */
.ext-note{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:17px;font-weight:700}
.ext-note .pict{width:40px;flex:none}

/* ---------- どこで読めるか（黒板の区画）：2つの箱 ---------- */
.where{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.where > div{border:2px solid var(--chalk);border-radius:12px;padding:18px 20px 20px;color:var(--chalk);display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 18px;align-items:center}
.where .pict{width:96px;color:var(--chalk);grid-row:1 / span 2}
.where h3{margin:0;padding:0;border:0;font-size:22px;color:var(--chalk)}
.where p{font-size:16px;color:#D9E6EF}

/* ---------- 記事ページ（_article-template.html） ---------- */
.article-head .lead{margin-top:14px}
.article-meta{margin-top:10px;font-size:14px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 18px}
.article{max-width:40em;font-size:17px;line-height:1.9}
.article h2{font-size:24px;color:var(--ai);margin-top:40px;padding-bottom:6px;border-bottom:3px solid var(--yellow)}
.article h2:first-child{margin-top:0}
.article h3{font-size:20px;margin-top:28px;padding-bottom:4px;border-bottom:2px solid var(--ai)}
.article p{margin-top:14px}
.article ul,.article ol{margin-top:12px;padding-left:1.4em}
.article li + li{margin-top:4px}
.article img{margin-top:18px;border:1px solid var(--grid);border-radius:8px}
.article figure{margin:18px 0 0}
.article figcaption{font-size:14px;color:var(--ink-2);margin-top:6px}
/* 関連する授業動画：画像＋再生マーク＋別タブ（本番は YouTube 埋め込みに差し替え） */
.rel-video{margin-top:26px;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:12px 24px;align-items:center}
.rel-video .frame{position:relative;display:block;text-decoration:none;border:1px solid var(--grid);border-radius:8px;overflow:hidden;background:var(--paper-2)}
.rel-video .frame img{width:100%;aspect-ratio:16/9;object-fit:cover}
.rel-video .frame .play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--pen);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(255,255,255,.8)}
.rel-video .frame .play svg{width:22px;height:22px;margin-left:3px}
.rel-video .frame:hover .play{background:var(--ai)}
.rel-video .cap{font-size:18px;font-weight:700}
.rel-video .cap small{display:block;font-size:14px;font-weight:400;color:var(--ink-2);margin-top:4px}
.back-link{margin-top:34px}

/* ---------- 画面幅 ---------- */
@media (max-width:900px){
  .where{grid-template-columns:1fr}
}
@media (max-width:640px){
  .articles .card{grid-template-columns:1fr;padding:16px 16px 18px}
  .articles .read{grid-column:auto;grid-row:auto;justify-self:stretch;margin-top:8px}
  .read-wait,.read .btn{width:100%}
  .articles h3{font-size:20px}
  .where > div{grid-template-columns:72px minmax(0,1fr);gap:2px 14px;padding:16px}
  .where .pict{width:72px}
  .where h3{font-size:20px}
  .rel-video{grid-template-columns:1fr}
  .article{font-size:16px}
}