/* Blog-specific styles. Loaded AFTER /styles.css, which provides the
   CSS variables, header, footer, drawer and button styles. */

.blog-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}
@media (max-width: 980px) {
  .blog-main { padding: 96px 20px 56px; }
}
/* Index page shows a card grid, which reads better wide; articles keep the
   narrow reading width above. Pages with a photo hero (see
   .article-hero-banner below) handle the fixed-header clearance on the
   banner itself, so they need less top padding here. */
.blog-main--wide { max-width: 1180px; }
.blog-main--banner { padding-top: 48px; }
@media (max-width: 980px) {
  .blog-main--banner { padding-top: 36px; }
}

/* Full-bleed tinted-photo hero for an article - same duotone-over-photo
   technique as the homepage .hero and the /uslugi/ service pages, just
   sized for the blog's narrower reading column. The site's CSP is
   `style-src 'self'` (no 'unsafe-inline'), so the photo CANNOT be set via an
   inline style="" attribute - it silently does nothing and the banner shows
   no photo at all with white-on-white text. Every article gets its own
   modifier class below instead, each naming its own photo. */
.article-hero-banner {
  position: relative;
  margin: 0 calc(50% - 50vw);
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  padding-top: 120px;
}
.article-hero-banner--priyomka { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/guide-cover.jpg'); }
.article-hero-banner--klass-remonta { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/portfolio/project-14.webp'); }
.article-hero-banner--nuzhen-li-dizayn { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/portfolio/project-13.webp'); }
.article-hero-banner--remont-cena { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/portfolio/project-17.webp'); }
.article-hero-banner--skolko-stoit { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/portfolio/project-15.webp'); }
.article-hero-banner--pochemu-my { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/portfolio/project-14.webp'); }
.article-hero-banner--istorii-obmana { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/portfolio/project-08.webp'); }
.article-hero-banner--odin-podryadchik { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/portfolio/project-12.webp'); }
.article-hero-banner--aich-construction { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/guide-bg.jpg'); }
.article-hero-banner--mebel-na-zakaz { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/portfolio/project-07.webp'); }
.article-hero-banner--dizayn-vs-neyroset { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/portfolio/project-19.webp'); }
.article-hero-banner--mebel-obman { background-image: linear-gradient(180deg, rgba(42,54,63,0.35) 0%, rgba(42,54,63,0.82) 100%), url('/assets/portfolio/project-16.webp'); }
.article-hero-banner--petrogradka { background-image: linear-gradient(180deg, rgba(42,54,63,0.3) 0%, rgba(42,54,63,0.78) 100%), url('/assets/portfolio/project-02.webp'); }
.article-hero-banner--primorskiy { background-image: linear-gradient(180deg, rgba(30,45,55,0.32) 0%, rgba(30,45,55,0.8) 100%), url('/assets/portfolio/project-09.webp'); }
.article-hero-banner--centralnyy { background-image: linear-gradient(180deg, rgba(50,40,30,0.32) 0%, rgba(50,40,30,0.8) 100%), url('/assets/portfolio/project-01.webp'); }
.article-hero-banner--sestroretsk { background-image: linear-gradient(180deg, rgba(40,55,50,0.3) 0%, rgba(40,55,50,0.78) 100%), url('/assets/portfolio/project-06.webp'); }
.article-hero-banner-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px 36px;
  width: 100%;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.article-hero-banner .breadcrumbs { color: rgba(251,247,242,0.7); margin-bottom: 16px; }
.article-hero-banner .breadcrumbs a { color: rgba(251,247,242,0.7); }
.article-hero-banner .breadcrumbs a:hover { color: #fff; }
.article-hero-banner .breadcrumbs span[aria-current] { color: #fff; }
.article-hero-banner h1 { color: #fff; }
.article-hero-banner .article-meta { color: rgba(251,247,242,0.75); }
@media (max-width: 760px) {
  .article-hero-banner { min-height: 240px; padding-top: 96px; }
}

.breadcrumbs {
  font-size: 0.85rem;
  color: var(--muted, #6b7178);
  margin-bottom: 28px;
}
.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: var(--navy-800, #313f4a); }
.breadcrumbs span[aria-current] { color: var(--navy-800, #313f4a); }

/* --- Blog index --- */
.blog-index-head { margin-bottom: 48px; }
.blog-index-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 500;
  color: var(--navy-800, #313f4a);
  letter-spacing: 0.01em;
}
.blog-index-head p {
  margin-top: 14px;
  color: var(--muted, #6b7178);
  max-width: 60ch;
}

.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px 28px;
}
.blog-card { display: block; color: inherit; }
.blog-card-img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius, 14px);
  overflow: hidden;
  margin-bottom: 14px;
}
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card:hover .blog-card-title { color: #b06a5e; }
.blog-card-date { display: block; font-size: 0.78rem; color: var(--muted, #6b7178); }
.blog-card-title {
  display: block;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--navy-800, #313f4a);
  margin: 6px 0 6px;
  line-height: 1.3;
  transition: color 0.2s ease;
}
.blog-card-excerpt { display: block; color: var(--muted, #6b7178); font-size: 0.9rem; line-height: 1.5; }

.blog-empty {
  padding: 40px 0;
  color: var(--muted, #6b7178);
  border-top: 1px solid rgba(43,58,69,0.12);
}

/* --- Article --- */
.article h1 {
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--navy-800, #313f4a);
  letter-spacing: 0.01em;
}
.article-meta {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--muted, #6b7178);
}

.answer-box {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--cream-100, #f6f0e9);
  border-radius: 8px;
}
.answer-box::before {
  content: "Коротко";
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b06a5e;
  margin-bottom: 8px;
}
.answer-box p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--navy-800, #313f4a); }
.answer-box p + p { margin-top: 10px; }

.article-body { font-size: 1.05rem; line-height: 1.7; color: #2b2f34; }
.article-body h2 {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--navy-800, #313f4a);
  margin: 44px 0 14px;
}
.article-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-800, #313f4a);
  margin: 28px 0 10px;
}
.article-body p { margin: 14px 0; }
.article-body ul, .article-body ol { margin: 14px 0; padding-left: 24px; }
.article-body li { margin: 7px 0; }
.article-body a { color: #b06a5e; text-decoration: underline; text-underline-offset: 2px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.96rem; }
.article-body th, .article-body td { border: 1px solid rgba(43,58,69,0.15); padding: 10px 12px; text-align: left; vertical-align: top; }
.article-body th { background: var(--cream-100, #f6f0e9); font-weight: 600; }
.article-body img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius, 14px);
  margin: 28px 0;
}

.article-cta {
  margin: 48px 0 0;
  padding: 28px;
  background: var(--navy-800, #313f4a);
  color: var(--cream-050, #fbf7f2);
  border-radius: var(--radius, 14px);
}
.article-cta h2 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 500; color: var(--blush-500, #e0c1bc); }
.article-cta p { margin: 0 0 18px; color: var(--blush-300, #ecd6d1); font-size: 0.98rem; }
.article-cta .btn { margin-right: 10px; }

.article-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(43,58,69,0.12); }
.article-related h2 { font-size: 1.1rem; font-weight: 600; color: var(--navy-800, #313f4a); margin: 0 0 12px; }
.article-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.article-related a { color: #b06a5e; }