.blog-archive { padding: var(--section-space-top) 24px calc(var(--section-space-bottom) - 9px); background: #d9d9d2; color: #fff; }
.blog-archive__inner { max-width: var(--container-max); margin: 0 auto; }
.blog-archive .section-eyebrow__en { color: #286f57; }
.blog-archive__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.blog-pickup { margin-top: var(--section-title-gap); overflow: hidden; background: #222; }
.blog-pickup a, .blog-card a { position: relative; display: block; overflow: hidden; color: #fff; }
.blog-pickup a { aspect-ratio: 16 / 8.6; }
.blog-pickup img, .blog-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.blog-pickup a::after, .blog-card a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12) 20%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.blog-pickup:hover img, .blog-card:hover img { transform: scale(1.025); }
.blog-pickup time, .blog-card time { position: absolute; z-index: 2; top: 0; left: 0; padding: 6px 14px; border-radius: 0 0 13px 0; background: #2f765e; font-family: "Inter", sans-serif; font-size: 12px; line-height: 1.4; text-align: center; }
.blog-pickup time { min-width: 96px; }
.blog-card time { width: 33%; min-width: 112px; }
.blog-pickup__overlay { position: absolute; z-index: 2; left: 50px; bottom: 62px; }.blog-pickup__overlay strong { display: block; font-family: "Inter", sans-serif; font-size: clamp(32px, 4.3vw, 42px); line-height: 1; }.blog-pickup__overlay h2 { margin: 14px 0 0; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.5; }
.blog-card__link { position: absolute; z-index: 2; right: 12px; bottom: 11px; display: flex; align-items: center; gap: 9px; font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: .08em; }.blog-pickup .blog-card__link { right: 48px; bottom: 66px; font-size: 11px; }.blog-card__link svg { transition: transform .2s ease; }.blog-pickup:hover .blog-card__link svg, .blog-card:hover .blog-card__link svg { transform: translateX(3px); }
.blog-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; scroll-margin-top: 150px; }
.blog-card[hidden] { display: none; }.blog-card a { aspect-ratio: 4 / 3; }.blog-card__overlay { position: absolute; z-index: 2; left: 26px; right: 22px; bottom: 52px; }.blog-card__overlay small { font-family: "Inter", sans-serif; font-size: 15px; font-weight: 700; }.blog-card__overlay h2 { margin: 5px 0 0; font-size: 21px; line-height: 1.65; }
.blog-pagination { min-height: 44px; margin-top: 58px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }.blog-pagination button { width: 42px; height: 42px; border-radius: 7px; background: #fff; color: #444; }.blog-pagination button[aria-current="page"] { background: #2f765e; color: #fff; }.blog-pagination button:disabled { cursor: default; opacity: .4; }.blog-pagination__ellipsis { width: 24px; color: #555; line-height: 42px; text-align: center; }
@media (max-width: 767px) {
  .blog-archive { padding: 50px 0 calc(var(--section-space-bottom) + 187px); }
  .blog-archive .section-eyebrow { margin-inline: 28px; }
  .blog-pickup { margin-top: 32px; }
  .blog-pickup a { aspect-ratio: 4 / 3; }
  .blog-pickup__overlay { left: 20px; bottom: 54px; }
  .blog-pickup .blog-card__link { right: 14px; bottom: 14px; font-size: 12px; }
  .blog-grid { grid-template-columns: 1fr; padding-inline: 18px; }
  .blog-card a { aspect-ratio: 16 / 9; }
  .blog-card time { min-width: 98px; padding: 4px 12px; font-size: 11px; }
  .blog-card__overlay { left: 18px; right: 18px; bottom: 42px; }
  .blog-card__overlay small { font-size: 12px; }
  .blog-card__overlay h2 { margin-top: 3px; font-size: 16px; line-height: 1.55; }
  .blog-card__link { right: 12px; bottom: 10px; font-size: 10px; }
  .blog-pagination { gap: 6px; margin-top: 50px; padding-inline: 8px; }
  .blog-pagination button { width: 38px; height: 38px; }
  .blog-pagination__ellipsis { width: 14px; line-height: 38px; }
}
@media (min-width: 768px) and (max-width: 900px) { .blog-archive { padding-inline: 8px; }.blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .blog-pickup img, .blog-card img, .blog-card__link svg { transition: none; } }