/* ===========================================================
   Blog & Gallery (dynamic pages) — builds on style.css tokens
   =========================================================== */

.cms-hero{ padding-block: 3rem 2.2rem; }
.cms-hero .hero-copy{ max-width: 760px; }
.cms-section{ padding-block: 2.5rem 4.5rem; }
.back-link{ display:inline-block; font-weight:700; font-size:.88rem; color: var(--blue); margin-bottom:1rem; }
.back-link:hover{ color: var(--red); }

.preview-bar{ background:#FFF6D6; border-bottom:1px solid #F1DA8C; color:#5E4A00; font-size:.9rem; text-align:center; padding:.65rem 1rem; }
.preview-bar a{ color: var(--blue); font-weight:700; text-decoration:underline; margin-left:.4rem; }

/* filter chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2rem; }
.chip{ font-weight:600; font-size:.86rem; padding:.5rem 1.05rem; border-radius:999px; border:1.5px solid var(--line); background:#fff; color: var(--ink-soft); transition: all .15s ease; }
.chip:hover{ border-color: var(--blue); color: var(--blue); }
.chip.is-active{ background: var(--blue); border-color: var(--blue); color:#fff; }

/* empty state */
.cms-empty{ text-align:center; padding: 3.5rem 1.5rem; border:1.5px dashed var(--line); border-radius: var(--radius); background: var(--paper-soft); }
.cms-empty h3{ font-size:1.4rem; }
.cms-empty p{ color: var(--ink-soft); margin-top:.5rem; }

/* ---------- blog cards ---------- */
.post-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; transition: box-shadow .25s ease, transform .25s ease; }
.post-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.post-thumb{ display:block; aspect-ratio: 16 / 10; overflow:hidden; background: var(--blue-tint); }
.post-thumb > img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-out, ease); }
.post-card:hover .post-thumb > img{ transform: scale(1.05); }
.post-thumb-ph{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--blue-tint), var(--red-tint)); }
.post-thumb-ph img{ width:64px; opacity:.55; }
.post-body{ padding: 1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post-body h3{ font-size:1.2rem; line-height:1.3; }
.post-body h3 a:hover{ color: var(--blue); }
.post-body p{ color: var(--ink-soft); font-size:.93rem; flex:1; }
.post-body .link-arrow{ margin-top:.3rem; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; font-size:.8rem; color: var(--ink-faint); font-weight:600; }
.post-cat{ background: var(--red-tint); color: var(--red); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.28rem .6rem; border-radius:999px; }
a.post-cat:hover{ background: var(--red); color:#fff; }

.pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; margin-top:2.8rem; }
.pager a{ min-width:42px; height:42px; padding:0 .9rem; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1.5px solid var(--line); font-weight:700; font-size:.88rem; }
.pager a:hover{ border-color: var(--blue); color: var(--blue); }
.pager a.is-active{ background: var(--blue); border-color: var(--blue); color:#fff; }

/* ---------- single article ---------- */
.container.narrow{ max-width: 780px; }
.container.narrow-wide{ max-width: 1040px; }
.article-head{ background: linear-gradient(180deg, var(--paper-soft), #fff); padding-block: 3rem 2.2rem; }
.article-head h1{ font-size: clamp(2rem, 4vw, 3rem); margin-top:.9rem; }
.article-head .lede{ margin-top:1rem; font-size:1.12rem; color: var(--ink-soft); }
.article-head .byline{ margin-top:1rem; font-weight:700; font-size:.9rem; color: var(--blue); }
.article-cover{ width:100%; max-height:560px; object-fit:cover; border-radius: 22px; box-shadow: var(--shadow-md); }
.article-body{ padding-block: 2.5rem 1rem; font-size:1.06rem; line-height:1.8; color:#2B3042; overflow-wrap:anywhere; }
.article-body > * + *{ margin-top:1.15em; }
.article-body h2{ font-size:1.75rem; margin-top:1.8em; }
.article-body h3{ font-size:1.35rem; margin-top:1.6em; }
.article-body h4{ font-family: var(--sans); font-size:1.08rem; margin-top:1.4em; }
.article-body a{ color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover{ color: var(--red); }
.article-body ul, .article-body ol{ padding-left:1.4rem; }
.article-body ul{ list-style: disc; } .article-body ol{ list-style: decimal; }
.article-body li + li{ margin-top:.4em; }
.article-body li::marker{ color: var(--red); }
.article-body blockquote{ margin:1.6em 0; padding: 1rem 1.4rem; border-left:4px solid var(--red); background: var(--paper-soft); border-radius: 0 12px 12px 0; font-family: var(--serif); font-size:1.18rem; color: var(--ink); }
.article-body img{ border-radius: 14px; margin-inline:auto; height:auto; }
.article-body pre{ background: var(--navy-deep, #001A35); color:#E6F0FA; padding:1rem 1.2rem; border-radius:12px; overflow-x:auto; font-size:.9rem; }
.article-body code{ font-size:.92em; }
.article-body hr{ border:0; height:1px; background: var(--line); margin:2em 0; }
.article-body .ql-align-center{ text-align:center; } .article-body .ql-align-right{ text-align:right; } .article-body .ql-align-justify{ text-align:justify; }
.article-body .ql-indent-1{ padding-left:2em; } .article-body .ql-indent-2{ padding-left:4em; } .article-body .ql-indent-3{ padding-left:6em; }

.article-nav{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-block: 2.5rem 3.5rem; padding-top:2rem; border-top:1px solid var(--line); }
.article-nav a{ display:block; padding:1.1rem 1.3rem; border:1px solid var(--line); border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.article-nav a:hover{ border-color: var(--blue); box-shadow: var(--shadow-sm); }
.article-nav a.next{ text-align:right; grid-column:2; }
.article-nav small{ display:block; font-size:.75rem; font-weight:700; color: var(--red); text-transform:uppercase; letter-spacing:.06em; }
.article-nav b{ display:block; margin-top:.3rem; font-family: var(--serif); font-size:1.05rem; line-height:1.3; }
@media (max-width: 620px){ .article-nav{ grid-template-columns:1fr; } .article-nav a.next{ grid-column:auto; } }

/* ---------- gallery ---------- */
.album-card{ position:relative; display:block; border-radius: 20px; overflow:hidden; aspect-ratio: 4 / 3; background: var(--navy-deep, #001A35); box-shadow: 0 18px 40px -22px rgba(0,48,92,.5); isolation:isolate; transition: transform .5s var(--ease-out, ease), box-shadow .5s var(--ease-out, ease); }
.album-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(0,48,92,.6); }
.album-img, .album-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.album-img img{ transition: transform 1.1s var(--ease-out, ease); }
.album-card:hover .album-img img{ transform: scale(1.07); }
.album-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(0,26,53,.88) 100%); z-index:1; }
.album-count{ position:absolute; z-index:2; top:1rem; left:1rem; background: var(--red); color:#fff; font: 700 .66rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:.4rem .7rem; border-radius:99px; }
.album-body{ position:absolute; z-index:2; left:1.2rem; right:1.2rem; bottom:1.1rem; color:#fff; }
.album-body b{ display:block; font: 800 1.35rem/1.2 var(--serif); }
.album-body small{ display:block; margin-top:.35rem; font-size:.85rem; color: rgba(255,255,255,.82); }

.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; grid-auto-flow: dense; gap:14px; }
.gallery-grid .tile:first-child:not(:only-child){ grid-column: span 2; grid-row: span 2; }
.gallery-grid .tile:not(:has(figcaption))::before{ opacity:0; }
.gallery-grid .tile:hover::before{ opacity:.85; }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; } }
@media (max-width: 520px){ .gallery-grid{ grid-template-columns: 1fr; grid-auto-rows: 240px; } .gallery-grid .tile:first-child:not(:only-child){ grid-column: auto; grid-row: auto; } }