/* Gulfalts blog listing cards v2 (/blogs "Latest articles" grid). v2: the arrow button is the mobile tab bar's liquid
   glass (its light option, as the cards sit on the off-white page): translucent off-white with the glass edge shadows,
   blur, and the SVG refraction filter in Chromium (the filter comes from ga-liquid-glass-v6.js).
   Photo with rounded corners and a round notch in its bottom-right corner holding an arrow button; title, excerpt,
   topic pills and date / read time below. The photo keeps the existing hover: greyscale until hovered, then colour
   and a slight zoom. The notch is a clip-path drawn by ga-blog-cards-v1.js at the photo's size. */
html .blog-index .blog-grid { column-gap: clamp(24px, 2.8vw, 44px); row-gap: clamp(48px, 5vw, 72px); }
html .blog-index .blog-card { display: flex; flex-direction: column; gap: 0; height: 100%; color: #101010; }

/* Photo + notch */
html .blog-index .ga-bc-frame { position: relative; --ga-bc-btn: clamp(52px, 4.6vw, 64px); }
html .blog-index .ga-bc-frame .blog-card_media { aspect-ratio: 61 / 43; border-radius: 0; overflow: hidden; }
html .blog-index .ga-bc-frame .blog-card_media.ga-bc-fallback { border-radius: 26px; }
html .blog-index .blog-card .blog-card_tag { display: none; }
/* The tab bar's light glass: translucent off-white, the LiquidButton edge shadows, blur + saturate. */
html .blog-index .ga-bc-go {
  position: absolute; right: 0; bottom: 0; width: var(--ga-bc-btn); height: var(--ga-bc-btn);
  display: grid; place-items: center; border-radius: 50%; color: #101010;
  background: rgba(250, 249, 246, .5);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: 0 0 6px rgba(0, 0, 0, .03), 0 2px 6px rgba(0, 0, 0, .08), inset 3px 3px .5px -3px rgba(0, 0, 0, .9), inset -3px -3px .5px -3px rgba(0, 0, 0, .85), inset 1px 1px 1px -.5px rgba(0, 0, 0, .6), inset -1px -1px 1px -.5px rgba(0, 0, 0, .6), inset 0 0 6px 6px rgba(0, 0, 0, .12), inset 0 0 2px 2px rgba(0, 0, 0, .06), 0 0 12px rgba(255, 255, 255, .15),
    0 10px 30px -12px rgba(16, 16, 16, .35);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), background-color .3s ease, box-shadow .3s ease;
}
html.lg-svg .blog-index .ga-bc-go { -webkit-backdrop-filter: url(#container-glass) saturate(170%); backdrop-filter: url(#container-glass) saturate(170%); }
html .blog-index .ga-bc-go svg { width: 38%; height: 38%; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
html .blog-index .blog-card:is(:hover, :focus-visible) .ga-bc-go {
  transform: scale(1.06); background: rgba(255, 255, 255, .62);
  box-shadow: 0 0 6px rgba(0, 0, 0, .03), 0 2px 6px rgba(0, 0, 0, .08), inset 3px 3px .5px -3px rgba(0, 0, 0, .9), inset -3px -3px .5px -3px rgba(0, 0, 0, .85), inset 1px 1px 1px -.5px rgba(0, 0, 0, .6), inset -1px -1px 1px -.5px rgba(0, 0, 0, .6), inset 0 0 6px 6px rgba(0, 0, 0, .12), inset 0 0 2px 2px rgba(0, 0, 0, .06), 0 0 12px rgba(255, 255, 255, .15),
    0 0 0 4px rgba(16, 16, 16, .07), 0 10px 30px -12px rgba(16, 16, 16, .35);
}
html .blog-index .blog-card:is(:hover, :focus-visible) .ga-bc-go svg { transform: translate(2px, -2px); }

/* Text */
html .blog-index .blog-card .blog-card_body { display: flex; flex-direction: column; flex: 1; gap: 0; padding: 22px 2px 0; }
html .blog-index .blog-card .blog-card_title {
  margin: 0; font-family: var(--body-font); font-weight: 600; font-size: clamp(1.25rem, .9rem + .8vw, 1.625rem);
  line-height: 1.18; letter-spacing: -.015em; color: #101010;
}
html .blog-index .blog-card .blog-card_excerpt {
  margin: 12px 0 0; font-family: var(--body-font); font-weight: 300; font-size: 1rem; line-height: 1.55;
  color: rgba(16, 16, 16, .58); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
html .blog-index .ga-bc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
html .blog-index .ga-bc-tag {
  padding: 7px 12px 6px; border-radius: 8px; background: #efeeea; color: #2a2724;
  font-family: var(--body-font); font-size: .6875rem; font-weight: 500; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
}
html .blog-index .blog-card .blog-card_meta {
  display: flex; align-items: center; gap: 6px; margin-top: 18px; padding: 0; border: 0;
  font-family: var(--body-font); font-size: .9375rem; font-weight: 300; color: rgba(16, 16, 16, .5);
}
html .blog-index .blog-card .blog-card_meta > svg { display: none; }
html .blog-index .blog-card .blog-card_dot { width: 4px; height: 4px; margin: 0 8px; border-radius: 50%; background: currentColor; opacity: .8; }

@media (max-width: 991px) {
  html .blog-index .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  html .blog-index .blog-grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  html .blog-index .ga-bc-frame { --ga-bc-btn: 54px; }
  html .blog-index .blog-card .blog-card_body { padding-top: 18px; }
}