/* ================================================================
   TVC article.css — コラム記事・モーダル・記事ナビ
   ================================================================ */

/* ── ARTICLE MODAL ── */
.art-overlay{position:fixed;inset:0;background:rgba(13,31,53,0.85);z-index:500;display:none;align-items:flex-start;justify-content:center;padding:5rem 1.5rem 2rem;overflow-y:auto;backdrop-filter:blur(4px)}
.art-overlay.open{display:flex}
.art-box{background:#fff;max-width:800px;width:100%;position:relative;padding:3rem;animation:artIn 0.35s ease}
@keyframes artIn{0%{opacity:0;transform:translateY(24px)}100%{opacity:1;transform:translateY(0)}}
.art-close{position:absolute;top:1.2rem;right:1.2rem;width:2.2rem;height:2.2rem;border:1px solid rgba(13,31,53,0.15);background:none;cursor:pointer;font-size:1.1rem;color:rgba(13,31,53,0.4);display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.art-close:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.art-meta{display:flex;align-items:center;gap:0.8rem;margin-bottom:1.6rem}
.art-date{font-family:'Cormorant Garamond',serif;font-size:0.88rem;color:rgba(13,31,53,0.45)}
.art-cat{font-size:0.6rem;letter-spacing:0.12em;color:var(--accent);font-weight:700;border:1px solid rgba(196,123,43,0.3);padding:0.18rem 0.7rem}
.art-title{font-family:'Noto Serif JP',serif;font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:700;color:var(--navy);line-height:1.6;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid var(--navy)}
.art-body{font-size:1rem;line-height:2.0;color:#1a2a3a;text-wrap:pretty;line-break:strict;word-break:normal;overflow-wrap:normal}
.art-body h3{font-family:'Noto Sans JP',sans-serif;font-size:1.1rem;font-weight:700;color:var(--navy);margin:2rem 0 0.8rem;padding-left:0.9rem;border-left:3px solid var(--accent)}
.art-body h4{font-size:1rem;font-weight:700;color:var(--accent);margin:1.5rem 0 0.5rem}
.art-body p{margin-bottom:1rem}
.art-body ul,.art-body ol{margin:0.5rem 0 1.2rem 1.6rem}
.art-body li{margin-bottom:0.4rem}
.art-body strong{color:var(--navy);font-weight:700}
.art-footer{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(13,31,53,0.1);text-align:center}
@media(max-width:600px){.art-box{padding:2rem 1.2rem}.art-overlay{padding:4rem 0.8rem 1rem}}

/* ── ARTICLE NAV (prev/next) ── */
.art-nav{max-width:860px;margin:3rem auto 0;display:flex;justify-content:center;gap:1.2rem}
.art-nav-btn{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border:2px solid var(--navy);background:#fff;color:var(--navy);font-size:1.5rem;line-height:1;cursor:pointer;transition:background 0.2s,color 0.2s,opacity 0.2s;font-family:inherit}
@media(hover:hover){.art-nav-btn:hover:not(:disabled){background:var(--navy);color:#fff}}
.art-nav-btn:disabled{opacity:0.28;cursor:default}

/* ── NEWS ITEMS (column top) ── */
.news-item{display:grid;grid-template-columns:108px auto 1fr;gap:1.4rem;align-items:center;padding:1.5rem 0.8rem;border-bottom:1px solid rgba(13,31,53,0.08);cursor:pointer;transition:background 0.2s,padding-left 0.2s;text-decoration:none}
.news-item:hover{background:rgba(13,31,53,0.02);padding-left:1.5rem}
.news-date{font-family:'Cormorant Garamond',serif;font-size:0.88rem;color:#2e3d4f}
.news-cat{font-size:0.58rem;letter-spacing:0.1em;color:var(--accent);font-weight:700;border:1px solid rgba(196,123,43,0.3);padding:0.2rem 0.6rem;white-space:nowrap}
.news-title{font-size:1rem;line-height:1.7;color:var(--navy);font-weight:500}
@media(max-width:600px){.news-item{grid-template-columns:1fr;gap:0.4rem}}

/* ── COLUMN CARD GRID ── */
.col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.col-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);overflow:hidden;cursor:pointer;text-align:left;transition:transform 0.25s ease,box-shadow 0.25s ease;text-decoration:none}
.col-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(13,31,53,0.13)}
.col-thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#1c3454 0%,#0d1f35 100%);overflow:hidden}
.col-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease}
.col-card:hover .col-thumb img{transform:scale(1.05)}
.col-body{display:flex;flex-direction:column;gap:0.85rem;padding:1.4rem 1.4rem 1.6rem;flex:1}
.col-meta{display:flex;align-items:center;gap:0.8rem}
.col-title{font-size:1.02rem;line-height:1.65;color:var(--navy);font-weight:600}
@media(max-width:960px){.col-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(max-width:600px){.col-grid{grid-template-columns:1fr;gap:1.5rem}}

/* ── HERO BACKGROUNDS ── */
#page-column .page-hero{background:linear-gradient(rgba(13,31,53,0.82) 0%,rgba(13,31,53,0.70) 100%),url('/tvc/ciudad%20de%20mexico.jpg') center/cover no-repeat;background-color:#0d1f35}
#page-column-list .page-hero{background:linear-gradient(rgba(13,31,53,0.82) 0%,rgba(13,31,53,0.70) 100%),url('/tvc/uno.jpg') center/cover no-repeat;background-color:#0d1f35}
#page-article .page-hero{background:linear-gradient(rgba(13,31,53,0.82) 0%,rgba(13,31,53,0.70) 100%),url('/tvc/dos.jpg') center/cover no-repeat;background-color:#0d1f35}