/* Блог RE/MAX Луцьк - публічна частина (список + стаття). Стиль узгоджено з сайтом. */
.blog-hero{position:relative;overflow:hidden;padding:clamp(30px,5vw,58px) 0 clamp(18px,2.5vw,28px);
  background:linear-gradient(180deg,var(--blue-050) 0%,var(--bg-soft,#f5f8fd) 55%,#fff 100%)}
.blog-hero::before{content:"";position:absolute;top:-30%;right:-8%;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,61,165,.06),transparent 68%);pointer-events:none}
.blog-hero > .container{position:relative;z-index:1}
.blog-hero .eyebrow{margin-bottom:10px}
.blog-hero h1{margin:12px 0 0}
.blog-hero .sub{font-size:var(--fs-lead);color:var(--ink-70);max-width:620px;margin-top:12px}
.blog-crumbs{font-size:.82rem;color:var(--ink-50);margin-bottom:14px}
.blog-crumbs a{color:var(--blue);text-decoration:none}
.blog-crumbs a:hover{text-decoration:underline}

.blog-tags-bar{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.blog-tags-bar a{font-size:.85rem;background:#eef2fa;color:var(--blue);border-radius:999px;padding:5px 13px;text-decoration:none;transition:.15s}
.blog-tags-bar a:hover,.blog-tags-bar a.is-active{background:var(--blue);color:#fff}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin:22px 0 10px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:.18s;text-decoration:none;color:inherit}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#cdd9ec}
.post-card .thumb{aspect-ratio:16/9;background:var(--blue-050) center/cover no-repeat;display:block}
.post-card .pc-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.post-card .pc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.post-card .pc-tags span{font-size:.72rem;font-weight:700;color:var(--blue);background:#eef2fa;border-radius:999px;padding:2px 9px}
.post-card h3{font-size:1.08rem;line-height:1.3;margin:0 0 8px}
.post-card p{font-size:.9rem;color:var(--ink-70);margin:0 0 14px;flex:1}
.post-card .pc-date{font-size:.8rem;color:var(--ink-50)}

.blog-empty{padding:40px 0;text-align:center;color:var(--ink-50)}
.blog-pager{display:flex;gap:10px;justify-content:center;margin:26px 0 8px}

/* Стаття */
.article{padding:34px 0 10px}
.article-head{max-width:760px;margin:0 auto}
.article-head h1{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.15;margin:12px 0 12px}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:var(--ink-50);font-size:.88rem;margin-bottom:18px}
.article-meta .tags{display:flex;flex-wrap:wrap;gap:6px}
.article-meta .tags a{font-size:.8rem;background:#eef2fa;color:var(--blue);border-radius:999px;padding:2px 10px;text-decoration:none}
.article-cover{max-width:900px;margin:0 auto 26px;border-radius:var(--r-lg);overflow:hidden}
.article-cover img{width:100%;display:block}

.article-body{max-width:760px;margin:0 auto;font-size:1.06rem;line-height:1.72;color:var(--ink)}
.article-body h2{font-size:1.5rem;margin:1.4em 0 .5em;line-height:1.25}
.article-body h3{font-size:1.22rem;margin:1.3em 0 .4em}
.article-body h4{font-size:1.05rem;margin:1.2em 0 .4em}
.article-body p{margin:0 0 1.1em}
.article-body a{color:var(--blue);text-decoration:underline}
.article-body ul.post-list,.article-body ol.post-list{margin:0 0 1.1em;padding-left:1.3em}
.article-body ul.post-list li,.article-body ol.post-list li{margin:.35em 0}
.article-body blockquote.post-quote{margin:1.3em 0;padding:14px 20px;border-left:4px solid var(--red);background:var(--blue-050);border-radius:0 var(--r) var(--r) 0}
.article-body blockquote.post-quote p{margin:0 0 6px;font-size:1.12rem;font-style:italic}
.article-body blockquote.post-quote cite{font-style:normal;font-weight:700;color:var(--ink-70);font-size:.9rem}
.article-body figure.post-img{margin:1.4em 0}
.article-body figure.post-img img{width:100%;border-radius:var(--r);display:block}
.article-body figure.post-img.has-border img{border:1px solid var(--line)}
.article-body figure.post-img figcaption,.article-body .post-embed figcaption{text-align:center;font-size:.85rem;color:var(--ink-50);margin-top:8px}
.article-body hr.post-delim{border:none;text-align:center;margin:1.8em 0}
.article-body hr.post-delim::before{content:"* * *";color:var(--ink-50);letter-spacing:.4em}
.article-body .post-table-wrap{overflow-x:auto;margin:1.3em 0}
.article-body table.post-table{width:100%;border-collapse:collapse;font-size:.96rem}
.article-body table.post-table th,.article-body table.post-table td{border:1px solid var(--line);padding:10px 13px;text-align:left}
.article-body table.post-table th{background:var(--blue-050);font-weight:700}
.article-body .yt-frame{position:relative;padding-bottom:56.25%;height:0;margin:1.4em 0 0;border-radius:var(--r);overflow:hidden}
.article-body .yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.article-cta{max-width:760px;margin:30px auto 0}
.article-cta .card{background:linear-gradient(135deg,#003DA5,#0C1A2E);color:#fff;border-radius:var(--r-lg);padding:26px 24px;text-align:center}
.article-cta h3{color:#fff;margin:0 0 8px;font-size:1.3rem}
.article-cta p{color:#cdd9ec;margin:0 0 16px}
.article-back{max-width:760px;margin:22px auto 0}
.article-back a{color:var(--blue);text-decoration:none;font-weight:600}

/* Галерея-карусель у статті */
.article-body .post-gallery{position:relative;margin:1.5em 0}
.article-body .gal-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin}
.article-body .gal-slide{flex:0 0 88%;max-width:88%;margin:0;scroll-snap-align:center;border-radius:var(--r);overflow:hidden;background:var(--blue-050)}
.article-body .gal-slide img{width:100%;height:clamp(240px,52vw,460px);object-fit:cover;display:block}
@media(min-width:720px){.article-body .gal-slide{flex-basis:62%;max-width:62%}}
.article-body .gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;background:rgba(12,26,46,.62);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:.15s}
.article-body .gal-nav:hover{background:var(--blue)}
.article-body .gal-prev{left:8px}
.article-body .gal-next{right:8px}
@media(max-width:520px){.article-body .gal-slide{flex-basis:100%;max-width:100%}}

/* SEO-текст на сторінці тега */
.blog-seotext{max-width:820px;font-size:.98rem;line-height:1.7;color:var(--ink-70)}
.blog-seotext p{margin:0 0 1em}
.blog-seotext a{color:var(--blue)}