/* =========================================================
   BLOG PAGE — fluid scaling 1200 → 1920+ using clamp()
   Same pattern as o-nas (about), prodat (sell), kupit (buy).
   Reference design: Figma 1920.
   ========================================================= */

.big_block_home--blog {
  background: #FFFFFF;
  height: auto;
  min-height: 0;
  position: relative;
}
.big_block_home--blog > .container {
  padding: 0 clamp(50px, 5vw, 96px);
  max-width: 1920px;
  height: auto;
  margin: 0 auto;
}
/* Mega-menu logo override */
.big_block_home--blog header .mega-menu .logo img { filter: none; }

/* ----- Kill the bothersome vertical rails (per client request).
   These are inherited from style.css's global rails for the blog page,
   plus the local blog_feed rails. Both gone. Also remove the horizontal
   divider lines under the hero and between sidebar/main. ----- */
.big_block_home--blog::before,
.big_block_home--blog::after,
.blog_feed::before,
.blog_feed::after {
  content: none !important;
  display: none !important;
}
.big_block_home--blog header .about_block .top_header_group { border-bottom-color: #010101; }
.big_block_home--blog header .about_block .top_header_group::after { display: none !important; content: none !important; }

/* =========================================================
   HERO — breadcrumbs + title + tabs
   ========================================================= */
.blog_hero {
  padding: clamp(40px, 4vw, 85px) 0 clamp(40px, 4vw, 80px);
  text-align: center;
  background: #FFFFFF;
  /* Removed the border-bottom that the client found bothersome */
  border-bottom: 0;
}
.blog_hero__breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.4vw, 8px);
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
  color: #C4C4C4;
  margin-bottom: clamp(20px, 2vw, 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: clamp(50px, 2vw + 26px, 80px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  text-transform: uppercase;
  margin: 0 auto clamp(48px, 6vw, 96px);
  max-width: 1482px;
}
.blog_hero__title .brk-mob { display: none; }

/* Tabs */
.blog_hero__tabs {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(28px, 1.1vw + 14.8px, 44px);
  line-height: 110%;
  letter-spacing: 0.02em;
}
.blog_hero__tab {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1vw, 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: clamp(8px, 0.6vw, 11px);
  height: clamp(8px, 0.6vw, 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)
   Centered max-width: 1920 above large viewports.
   ========================================================= */
.blog_feed {
  background: #FFFFFF;
  position: relative;
  display: grid;
  grid-template-columns: clamp(280px, 22vw, 420px) minmax(0, 1fr);
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(50px, 5vw, 96px);
  /* No divider between sidebar and main — per client request */
}

.blog_feed__sidebar {
  position: relative;
  padding: clamp(28px, 3vw, 54px) clamp(20px, 2vw, 32px) clamp(48px, 6vw, 96px) 0;
  /* Sticky so it stays visible while scrolling through posts */
  align-self: start;
  position: sticky;
  top: 0;
  /* Removed the right divider line */
  border-right: 0;
}
.blog_feed__cats {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
}
.blog_feed__cat {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.6vw, 8px);
  padding: clamp(8px, 0.8vw, 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: clamp(8px, 0.6vw, 11px);
  height: clamp(8px, 0.6vw, 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: clamp(28px, 3vw, 32px) 0 clamp(48px, 6vw, 96px) clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.5vw, 64px);
  min-width: 0;
}

.blog_post {
  display: flex;
  flex-direction: column;
}
.blog_post__photo {
  display: block;
  width: 100%;
  margin-bottom: clamp(20px, 2vw, 32px);
}
.blog_post__photo img {
  width: 100%;
  height: clamp(360px, 36vw, 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: clamp(28px, 1.1vw + 14.8px, 44px);
  line-height: 110%;
  letter-spacing: 0.02em;
  color: #010101;
  margin: 0 0 clamp(16px, 1.5vw, 24px);
  max-width: 1141px;
}
.blog_post__title a {
  color: inherit;
  text-decoration: none;
}
.blog_post__title a:hover {
  color: inherit;
}
.blog_post__date {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 0.85vw + 7px, 32px);
  line-height: 120%;
  color: #C2C2C2;
  margin-bottom: clamp(14px, 1.3vw, 20px);
}
.blog_post__excerpt {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 0.75vw + 7px, 25px);
  line-height: 130%;
  color: #3C3C3B;
  margin: 0 0 clamp(20px, 2vw, 32px);
  max-width: 1141px;
}
.blog_post__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(50px, 4vw, 80px);
  background: transparent;
  color: #232323;
  border: 1.6px solid #232323;
  font-family: "Felidae", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(16px, 0.7vw + 7px, 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; }

/* =========================================================
   TABLET — 1024px and below: tighten layout
   ========================================================= */
@media (max-width: 1024px) {
  .blog_feed { grid-template-columns: 240px minmax(0, 1fr); }
}

/* =========================================================
   MOBILE — 768px and below: stack sidebar above feed
   ========================================================= */
@media (max-width: 768px) {
  .big_block_home--blog > .container { padding: 0 30px; }
  .blog_hero { padding: 40px 0 32px; }
  .blog_hero__title { font-size: 35px; margin-bottom: 32px; }
  .blog_hero__breadcrumbs { font-size: 12px; margin-bottom: 16px; }
  .blog_hero__tabs { font-size: 20px; gap: 10px; }
  .blog_hero__tab { gap: 8px; }
  .blog_hero__tab-bullet { width: 7px; height: 7px; }

  .blog_feed { grid-template-columns: 1fr; padding: 0 30px; }
  .blog_feed__sidebar { position: static; padding: 24px 0; border-right: 0; }
  .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 0; gap: 32px; }
  .blog_post__photo img { height: 320px; }
  .blog_post__photo { margin-bottom: 16px; }
  .blog_post__title { font-size: 20px; margin-bottom: 12px; }
  .blog_post__date { font-size: 14px; margin-bottom: 12px; }
  .blog_post__excerpt { font-size: 14px; margin-bottom: 16px; }
  .blog_post__btn { font-size: 12px; height: 44px; }
}

/* =========================================================
   SMALL MOBILE — 360px
   ========================================================= */
@media (max-width: 360px) {
  .big_block_home--blog > .container { padding: 0 16px; }
  .blog_hero { padding: 32px 0 24px; }
  .blog_hero__title { font-size: 30px; 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; }
  .blog_feed { padding: 0 16px; }
  .blog_feed__cats { font-size: 14px; gap: 6px 12px; }
  .blog_feed__main { 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: 12px; height: 44px; }
}