/* =========================================================
   BLOG PAGE — pixel-perfect to Figma 1920
   ========================================================= */

.big_block_home--blog {
  background: #FFFFFF;
  height: auto;
  min-height: 0;
  position: relative;
}
.big_block_home--blog > .container {
  padding: 0;
  height: auto;
}
/* Mega-menu logo override */
.big_block_home--blog header .mega-menu .logo img { filter: none; }

/* Vertical rails — Figma Lines 64 (x=1824) & 100 (x=96) */
.big_block_home--blog::before,
.big_block_home--blog::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.6px;
  background: #E1E1E1;
  z-index: 200;
  pointer-events: none;
}
.big_block_home--blog::before { left: 96px; }
.big_block_home--blog::after  { right: 96px; }

/* Hide rails when the mega-menu overlay is open so they don't cross over its content */
body:has(.mega-menu.active) .big_block_home--blog::before,
body:has(.mega-menu.active) .big_block_home--blog::after,
body:has(.mega-menu.active) .blog_feed::before,
body:has(.mega-menu.active) .blog_feed::after {
  display: none;
}

/* Crop the header's full-width horizontal divider so it doesn't cross the rails */
.big_block_home--blog header .about_block .top_header_group {
  border-bottom: 0;
  position: relative;
}
.big_block_home--blog header .about_block .top_header_group::after {
  content: "";
  position: absolute;
  left: 96px;
  right: 96px;
  bottom: 0;
  height: 1px;
  background: #010101;
  pointer-events: none;
}

/* ----- HERO: breadcrumbs + title + tabs (Figma: title h=176, divider at y=653) ----- */
.blog_hero {
  padding: 85px 0 80px;
  text-align: center;
  background: #FFFFFF;
  border-bottom: 1.6px solid #E1E1E1;
}
.blog_hero__breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 130%;
  color: #C4C4C4;
  margin-bottom: 32px;
}
.blog_hero__breadcrumbs a,
.blog_hero__breadcrumbs span {
  color: #C4C4C4;
  text-decoration: none;
  transition: color .2s;
}
.blog_hero__breadcrumbs a:hover { color: #010101; }
.blog_hero__sep { display: inline-block; }

.blog_hero__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 80px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  text-transform: uppercase;
  margin: 0 auto 96px;
  max-width: 1482px;
}
/* mobile-only break inside the H1 — desktop hides it; mobile shows it
   to force the Figma 360 3-line layout: «Последние новости / о недвижимости / в Испании» */
.blog_hero__title .brk-mob { display: none; }

/* Tabs (Felidae 44px, active = bullet + dark, inactive = light gray) */
.blog_hero__tabs {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: 0.02em;
}
.blog_hero__tab {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #C4C4C4;
  text-decoration: none;
  transition: color .2s;
}
.blog_hero__tab:hover { color: #010101; }
.blog_hero__tab.is-active { color: #010101; }
.blog_hero__tab-bullet {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #232323;
  flex-shrink: 0;
}
.blog_hero__tab:not(.is-active) .blog_hero__tab-bullet { display: none; }
.blog_hero__tab-sep { color: #C4C4C4; user-select: none; }

/* =========================================================
   FEED — sidebar (categories) + main (post cards)
   Figma: sidebar 573 wide, divider at x=669, posts photo 1091×766
   ========================================================= */
.blog_feed {
  background: #FFFFFF;
  position: relative;
  display: grid;
  grid-template-columns: 573fr 1251fr;
  /* Side rails extend through this section too */
}
.blog_feed::before,
.blog_feed::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.6px;
  background: #E1E1E1;
  z-index: 200;
  pointer-events: none;
}
.blog_feed::before { left: 96px; }
.blog_feed::after  { right: 96px; }

.blog_feed__sidebar {
  position: relative;
  padding: 54px 32px 96px 128px;
  border-right: 1.6px solid #E1E1E1;
  /* Sticky so it stays visible while scrolling through posts */
  align-self: start;
  position: sticky;
  top: 0;
}
.blog_feed__cats {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 130%;
}
.blog_feed__cat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  color: #C2C2C2;
  cursor: pointer;
  transition: color .2s;
}
.blog_feed__cat a {
  color: inherit;
  text-decoration: none;
}
.blog_feed__cat:hover { color: #010101; }
.blog_feed__cat.is-active { color: #010101; }
.blog_feed__cat-bullet {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #232323;
  flex-shrink: 0;
}
.blog_feed__cat:not(.is-active) .blog_feed__cat-bullet { display: none; }

.blog_feed__main {
  padding: 32px 96px 96px 32px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.blog_post {
  display: flex;
  flex-direction: column;
}
.blog_post__photo {
  display: block;
  width: 100%;
  margin-bottom: 32px;
}
.blog_post__photo img {
  width: 100%;
  height: 766px;
  object-fit: cover;
  display: block;
  transition: opacity .2s;
}
.blog_post__photo:hover img { opacity: 0.92; }
.blog_post__title {
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 24px;
  max-width: 1141px;
}
.blog_post__date {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 120%;
  color: #C2C2C2;
  margin-bottom: 20px;
}
.blog_post__excerpt {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 130%;
  color: #3C3C3B;
  margin: 0 0 32px;
  max-width: 1141px;
}
.blog_post__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  background: transparent;
  color: #232323;
  border: 1.6px solid #232323;
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 150%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, color .25s;
  box-sizing: border-box;
}
.blog_post__btn:hover { background: #010101; color: #FFFFFF; border-color: #010101; }

/* =========================================================
   ADAPTIVE — 1200px (Figma 1200_blog: 1200x3276)
   Title 50px Felidae uppercase, tabs 28px Felidae, sidebar 16px Inter
   ========================================================= */
@media (max-width: 1200px) {
  .blog_hero { padding: 60px 60px 60px; }
  .blog_hero__title { font-size: 50px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 48px; max-width: 926px; }
  .blog_hero__breadcrumbs { font-size: 16px; margin-bottom: 24px; gap: 6px; }
  .blog_hero__tabs { font-size: 28px; gap: 12px; }
  .blog_hero__tab-bullet { width: 9px; height: 9px; }
  /* Rails stay at 96px — paddings below are aligned to keep content inside them */
  .blog_feed { grid-template-columns: 320px 1fr; }
  .blog_feed__sidebar { padding: 32px 24px 64px 120px; }
  .blog_feed__main { padding: 32px 96px 64px 24px; gap: 48px; }
  .blog_feed__cats { font-size: 16px; }
  .blog_post__photo img { height: 540px; }
  .blog_post__title { font-size: 28px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 16px; }
  .blog_post__date { font-size: 20px; margin-bottom: 16px; }
  .blog_post__excerpt { font-size: 16px; line-height: 130%; margin-bottom: 24px; }
  .blog_post__btn { font-size: 16px; height: 50px; line-height: 150%; }
}

/* Intermediate range — at ~860px the 320px sidebar leaves the main column too narrow.
   Tighten the sidebar so the post column has breathing room. */
@media (max-width: 1024px) {
  .blog_feed { grid-template-columns: 280px 1fr; }
  .blog_feed__sidebar { padding: 32px 24px 64px 116px; }
}

/* =========================================================
   ADAPTIVE — 768px (Figma 768_blog: 768x2147)
   Title 35px Felidae, tabs 20px Felidae
   ========================================================= */
@media (max-width: 768px) {
  .blog_hero { padding: 40px 30px 40px; }
  .blog_hero__title { font-size: 35px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 32px; }
  .blog_hero__breadcrumbs { font-size: 12px; margin-bottom: 16px; gap: 6px; }
  .blog_hero__tabs { font-size: 20px; gap: 10px; }
  .blog_hero__tab { gap: 8px; }
  .blog_hero__tab-bullet { width: 7px; height: 7px; }
  /* Single-column tablet/mobile layout — pull rails in to 30px so they
     align with the new horizontal gutter instead of crossing text. */
  .big_block_home--blog::before, .blog_feed::before { left: 30px; }
  .big_block_home--blog::after,  .blog_feed::after  { right: 30px; }
  .big_block_home--blog header .about_block .top_header_group::after { left: 30px; right: 30px; }
  .blog_feed { grid-template-columns: 1fr; }
  .blog_feed__sidebar { position: static; padding: 24px 30px; border-right: 0; border-bottom: 1.6px solid #E1E1E1; }
  .blog_feed__cats { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
  .blog_feed__cat { padding: 4px 0; }
  .blog_feed__main { padding: 24px 30px; gap: 32px; }
  .blog_post__photo img { height: 320px; }
  .blog_post__photo { margin-bottom: 16px; }
  .blog_post__title { font-size: 20px; line-height: 110%; margin-bottom: 12px; }
  .blog_post__date { font-size: 14px; margin-bottom: 12px; }
  .blog_post__excerpt { font-size: 14px; line-height: 130%; margin-bottom: 16px; }
  .blog_post__btn { font-size: 10px; height: 30px; line-height: 130%; letter-spacing: 0.05em; }
}

/* =========================================================
   ADAPTIVE — 360px (Figma 1923: 360x2481)
   Title 30px Felidae, tabs 20px Felidae
   ========================================================= */
@media (max-width: 360px) {
  .blog_hero { padding: 32px 16px 32px; }
  .blog_hero__title { font-size: 30px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 24px; }
  .blog_hero__title .brk-mob { display: inline; }
  .blog_hero__breadcrumbs { font-size: 12px; margin-bottom: 16px; gap: 4px; }
  .blog_hero__tabs { font-size: 20px; gap: 8px; }
  /* 16px gutter — match rails to the gutter so they don't slice through copy. */
  .big_block_home--blog::before, .blog_feed::before { left: 16px; }
  .big_block_home--blog::after,  .blog_feed::after  { right: 16px; }
  .big_block_home--blog header .about_block .top_header_group::after { left: 16px; right: 16px; }
  .blog_feed__sidebar { padding: 16px; }
  .blog_feed__cats { font-size: 14px; gap: 6px 12px; }
  .blog_feed__main { padding: 16px; gap: 24px; }
  .blog_post__photo img { height: 200px; }
  .blog_post__title { font-size: 20px; margin-bottom: 8px; }
  .blog_post__date { font-size: 12px; margin-bottom: 8px; }
  .blog_post__excerpt { font-size: 14px; margin-bottom: 12px; }
  .blog_post__btn { font-size: 14px; height: 50px; line-height: 150%; letter-spacing: 0.05em; }
}