/* ===============================
   BLOG — FREE PAGE SCROLLING
   =============================== */

html,
body.blog-body {
  scroll-snap-type: none !important;
}

body.blog-body .site-header,
body.blog-body .site-footer {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

.blog-body {
  min-height: 100%;
  background: #262626;
}

.blog-body .site-header {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}



/* ===============================
   BLOG SECTION
   =============================== */

.blog-section {
  min-height: calc(100vh - var(--header-h));

  background: #262626;

  padding:
    40px
    34px
    80px;
}



/* ===============================
   BLOG TITLE
   =============================== */

.blog-title {
  width: fit-content;

  margin:
    0
    auto;

  position: relative;

  padding-bottom: 10px;

  text-align: center;

  font-family:
    'Noto Sans Georgian',
    sans-serif;

  font-size: 38px;
  font-weight: 700;

  letter-spacing: 0.08em;

  color:
    rgba(255, 255, 255, 0.96);
}


.blog-title::after {
  content: '';

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 2px;

  background: #598560;

  border-radius: 999px;

  box-shadow:
    0 0 10px
    rgba(89, 133, 96, 0.22);
}



/* ===============================
   BLOG CATEGORIES
   =============================== */

.blog-categories {
  width: fit-content;

  margin:
    34px
    auto
    46px;

  display: flex;

  align-items: center;

  gap: 8px;
}


.blog-category {
  position: relative;

  padding:
    10px
    18px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.025);

  color:
    rgba(255, 255, 255, 0.58);

  font-family:
    'Noto Sans Georgian',
    sans-serif;

  font-size: 14px;
  font-weight: 500;

  cursor: pointer;

  transition:
    color 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
}


.blog-category:hover {
  color:
    rgba(255, 255, 255, 0.92);

  border-color:
    rgba(89, 133, 96, 0.42);

  background:
    rgba(89, 133, 96, 0.08);
}


.blog-category.is-active {
  color:
    rgba(255, 255, 255, 0.96);

  border-color:
    rgba(89, 133, 96, 0.58);

  background:
    rgba(89, 133, 96, 0.13);
}



/* ===============================
   BLOG FEED
   =============================== */

.blog-feed {
  width: min(
    1320px,
    100%
  );

  margin:
    0
    auto;

  display: flex;

  flex-direction: column;

  gap: 28px;
}



/* ===============================
   BLOG CARD
   =============================== */

.blog-card {
  min-height: 300px;

  display: grid;

  grid-template-columns:
    42%
    58%;

  overflow: hidden;

  position: relative;

  background: #2d2d2d;

  border:
    1px solid
    rgba(255, 255, 255, 0.075);

  border-radius: 18px;

  box-shadow:
    0 24px 42px -24px
    rgba(0, 0, 0, 0.48);

  transition:
    transform 320ms
    cubic-bezier(0.22, 1, 0.36, 1),

    border-color 320ms ease,

    box-shadow 320ms ease;
}


.blog-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(89, 133, 96, 0.26);

  box-shadow:
    0 30px 48px -24px
    rgba(0, 0, 0, 0.58);
}



/* ===============================
   BLOG MEDIA
   =============================== */

.blog-card-media {
  position: relative;

  min-height: 300px;

  margin: 24px;

  margin-right: 0;

  overflow: hidden;

  background: #202020;

  border-radius: 14px;

  box-shadow:
    0 15px 30px -20px
    rgba(0, 0, 0, 0.7);
}


.blog-card-media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform 600ms
    cubic-bezier(0.22, 1, 0.36, 1),

    filter 400ms ease;
}


.blog-card:hover
.blog-card-media img {
  transform:
    scale(1.035);
}



/* ===============================
   BLOG CONTENT
   =============================== */

.blog-card-content {
  min-width: 0;

  padding:
    40px
    46px
    38px
    44px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;
}



/* Category */

.blog-card-category {
  display: inline-flex;

  align-items: center;

  margin-bottom: 16px;

  padding:
    6px
    11px;

  border:
    1px solid
    rgba(89, 133, 96, 0.28);

  border-radius: 999px;

  background:
    rgba(89, 133, 96, 0.10);

  color: #7da184;

  font-family:
    'Noto Sans Georgian',
    sans-serif;

  font-size: 12px;
  font-weight: 600;

  letter-spacing: 0.025em;
}



/* Article title */

.blog-card-title {
  max-width: 720px;

  margin:
    0
    0
    15px;

  color:
    rgba(255, 255, 255, 0.94);

  font-family:
    'Noto Sans Georgian',
    sans-serif;

  font-size: 28px;
  font-weight: 600;

  line-height: 1.35;

  letter-spacing: -0.015em;
}



/* Article excerpt */

.blog-card-excerpt {
  max-width: 690px;

  margin:
    0
    0
    26px;

  color:
    rgba(255, 255, 255, 0.52);

  font-family:
    'Noto Sans Georgian',
    sans-serif;

  font-size: 15px;
  font-weight: 400;

  line-height: 1.75;
}



/* ===============================
   BLOG META
   =============================== */

.blog-card-meta {
  display: flex;

  align-items: center;

  gap: 18px;

  color:
    rgba(255, 255, 255, 0.38);

  font-family:
    'Noto Sans Georgian',
    sans-serif;

  font-size: 12px;
  font-weight: 500;
}


.blog-card-meta span + span {
  position: relative;
}


.blog-card-meta span + span::before {
  content: '';

  position: absolute;

  left: -10px;
  top: 50%;

  width: 3px;
  height: 3px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background: #598560;
}



.blog-card.is-filtered-out {
  display: none;
}



.blog-card {
  cursor: pointer;
}

.blog-card:focus-visible {
  outline:
    2px solid #598560;

  outline-offset: 4px;
}


/* ===============================
   ENGLISH BLOG TYPOGRAPHY
   =============================== */

html[lang="en"] .blog-title {
  font-family: 'Nunito Sans', sans-serif;
}

html[lang="en"] .blog-category,
html[lang="en"] .blog-card-category,
html[lang="en"] .blog-card-title,
html[lang="en"] .blog-card-excerpt,
html[lang="en"] .blog-card-meta {
  font-family: 'Inter', sans-serif;
}


/* Smaller desktop — Blog ~16% reduction */
@media (min-width: 1230px) and (max-width: 1500px) {

  .blog-section {
    padding:
      34px
      29px
      67px;
  }

  .blog-title {
    font-size: 32px;       /* 38px → ~16% smaller */
    padding-bottom: 8px;
  }

  .blog-categories {
    margin:
      29px
      auto
      39px;

    gap: 7px;
  }

  .blog-category {
    padding:
      8px
      15px;

    font-size: 12px;
  }

  .blog-feed {
    gap: 24px;
  }

  .blog-card {
    min-height: 252px;     /* 300px → ~16% smaller */
  }

  .blog-card-media {
    min-height: 252px;

    margin: 20px;
    margin-right: 0;
  }

  .blog-card-content {
    padding:
      34px
      39px
      32px
      37px;
  }

  .blog-card-category {
    margin-bottom: 13px;

    padding:
      5px
      9px;

    font-size: 10px;
  }

  .blog-card-title {
    margin-bottom: 13px;
    font-size: 23.5px;     /* 28px → ~16% smaller */
  }

  .blog-card-excerpt {
    margin-bottom: 22px;
    font-size: 12.5px;     /* 15px → ~16% smaller */
  }

  .blog-card-meta {
    gap: 15px;
    font-size: 10px;
  }
}

/* 1024 tablet — Blog title */
@media (max-width: 1024px) {

  .blog-title {
    font-size: 27px;
    padding-bottom: 7px;
  }

}

/* 769–900 — compact Blog cards */
@media (min-width: 769px) and (max-width: 900px) {

  .blog-card {
    min-height: 240px;
  }

  .blog-card-media {
    min-height: 240px;

    margin: 18px;
    margin-right: 0;
  }

  .blog-card-content {
    padding:
      28px
      32px
      26px
      30px;
  }

}

/* 768 portrait tablet — preserve original Blog card proportions */
/* 768 portrait tablet — Blog cards */
@media (min-width: 700px) and (max-width: 768px) {

  .blog-card {
    min-height: 0;

    /* original shape, about 30% taller */
    aspect-ratio: 1320 / 390;

    grid-template-columns:
      42%
      58%;
  }

  .blog-card-media {
    min-height: 0;

    margin: 12px;
    margin-right: 0;
  }

  .blog-card-content {
    padding:
      16px
      20px
      15px
      18px;
  }

  .blog-card-category {
    margin-bottom: 7px;
    padding: 4px 7px;
    font-size: 8px;
  }

  .blog-card-title {
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.28;
  }

  .blog-card-excerpt {
    margin-bottom: 10px;
    font-size: 9px;
    line-height: 1.45;
  }

  .blog-card-meta {
    gap: 10px;
    font-size: 8px;
  }
}


/* 800 portrait tablet — Blog cards */
@media (min-width: 769px) and (max-width: 820px) {

  .blog-card {
    min-height: 0;

    aspect-ratio: 1320 / 390;

    grid-template-columns:
      42%
      58%;
  }

  .blog-card-media {
    min-height: 0;

    margin: 12px;
    margin-right: 0;
  }

  .blog-card-content {
    padding:
      16px
      20px
      15px
      18px;
  }

  .blog-card-category {
    margin-bottom: 7px;
    padding: 4px 7px;
    font-size: 8px;
  }

  .blog-card-title {
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.28;
  }

  .blog-card-excerpt {
    margin-bottom: 10px;
    font-size: 9px;
    line-height: 1.45;
  }

  .blog-card-meta {
    gap: 10px;
    font-size: 8px;
  }
}

/* ===============================
   430 MOBILE — BLOG
   =============================== */

@media (max-width: 430.99px) {

  .blog-section {
    padding:
      28px
      18px
      60px;
  }


  /* Title */

  .blog-title {
    font-size: 26px;
    padding-bottom: 7px;
  }


  /* Categories */

  .blog-categories {
    width: 100%;

    margin:
      26px
      auto
      34px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 8px;
  }

  .blog-category {
    padding: 7px 11px;

    font-size: 10px;
  }


  /* Feed */

  .blog-feed {
    width: 100%;
    gap: 20px;
  }


  /* Card */

  .blog-card {
    width: 100%;

    min-height: 0;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;

    border-radius: 14px;
  }


  /* Image */

  .blog-card-media {
    width: auto;
    height: 190px;
    min-height: 0;

    margin:
      12px
      12px
      0;

    border-radius: 11px;
  }


  /* Content */

  .blog-card-content {
    padding:
      18px
      16px
      18px;

    justify-content: flex-start;
  }


  /* Category */

  .blog-card-category {
    margin-bottom: 9px;

    padding: 4px 7px;

    font-size: 9px;
  }


  /* Article title */

  .blog-card-title {
    margin-bottom: 9px;

    font-size: 17px;
    line-height: 1.3;
  }


  /* Excerpt */

  .blog-card-excerpt {
    margin-bottom: 14px;

    font-size: 11px;
    line-height: 1.55;
  }


  /* Meta */

  .blog-card-meta {
    gap: 12px;

    font-size: 9px;
  }
}

/* ===============================
   360 SHORT MOBILE — BLOG
   Galaxy S22
   =============================== */

@media (min-width: 350px) and (max-width: 364px) and (max-height: 700px) {

  .blog-section {
    padding:
      24px
      14px
      44px;
  }

  .blog-categories {
    margin:
      20px
      auto
      26px;

    gap: 6px;
  }

  .blog-category {
    padding: 6px 9px;
    font-size: 9px;
  }

  .blog-feed {
    gap: 14px;
  }

  .blog-card {
    min-height: 0;
    border-radius: 12px;
  }

  .blog-card-media {
    height: 140px;
    min-height: 0;

    margin:
      10px
      10px
      0;

    border-radius: 9px;
  }

  .blog-card-content {
    padding:
      12px
      13px
      14px;
  }

  .blog-card-category {
    margin-bottom: 7px;

    padding: 3px 6px;

    font-size: 8px;
  }

  .blog-card-title {
    margin-bottom: 7px;

    font-size: 14px;
    line-height: 1.28;
  }

  .blog-card-excerpt {
    margin-bottom: 10px;

    font-size: 9px;
    line-height: 1.45;
  }

  .blog-card-meta {
    gap: 9px;
    font-size: 8px;
  }

}
/* ===============================
   375 SHORT MOBILE — BLOG
   =============================== */

@media (min-width: 365px) and (max-width: 380px) and (max-height: 700px) {

  .blog-section {
    padding:
      24px
      14px
      44px;
  }

  .blog-categories {
    margin:
      20px
      auto
      26px;

    gap: 6px;
  }

  .blog-category {
    padding: 6px 9px;
    font-size: 9px;
  }

  .blog-feed {
    gap: 14px;
  }

  .blog-card {
    min-height: 0;
    border-radius: 12px;
  }

  .blog-card-media {
    height: 140px;
    min-height: 0;

    margin:
      10px
      10px
      0;

    border-radius: 9px;
  }

  .blog-card-content {
    padding:
      12px
      13px
      14px;
  }

  .blog-card-category {
    margin-bottom: 7px;

    padding: 3px 6px;

    font-size: 8px;
  }

  .blog-card-title {
    margin-bottom: 7px;

    font-size: 14px;
    line-height: 1.28;
  }

  .blog-card-excerpt {
    margin-bottom: 10px;

    font-size: 9px;
    line-height: 1.45;
  }

  .blog-card-meta {
    gap: 9px;
    font-size: 8px;
  }

}

/* ===============================
   384 / 390 SHORT MOBILE — BLOG
   =============================== */

@media (min-width: 381px) and (max-width: 400px) and (max-height: 700px) {

  .blog-section {
    padding:
      24px
      14px
      44px;
  }

  .blog-categories {
    margin:
      20px
      auto
      26px;

    gap: 6px;
  }

  .blog-category {
    padding: 6px 9px;
    font-size: 9px;
  }

  .blog-feed {
    gap: 14px;
  }

  .blog-card {
    min-height: 0;
    border-radius: 12px;
  }

  .blog-card-media {
    height: 140px;
    min-height: 0;

    margin:
      10px
      10px
      0;

    border-radius: 9px;
  }

  .blog-card-content {
    padding:
      12px
      13px
      14px;
  }

  .blog-card-category {
    margin-bottom: 7px;

    padding: 3px 6px;

    font-size: 8px;
  }

  .blog-card-title {
    margin-bottom: 7px;

    font-size: 14px;
    line-height: 1.28;
  }

  .blog-card-excerpt {
    margin-bottom: 10px;

    font-size: 9px;
    line-height: 1.45;
  }

  .blog-card-meta {
    gap: 9px;
    font-size: 8px;
  }

}