/* Public Blog listing: balanced editorial rows on desktop, clean cards on mobile. */
#content > .grid { display:grid;grid-template-columns:1fr;gap:22px }
#content > .grid .card {
  display:grid;grid-template-columns:clamp(280px,36%,410px) minmax(0,1fr);
  min-height:270px;overflow:hidden;border-color:#d5e1d9;border-radius:20px;
  box-shadow:0 12px 34px rgba(18,63,52,.07);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#content > .grid .card:hover {
  transform:translateY(-2px);border-color:#b9cec0;
  box-shadow:0 17px 42px rgba(18,63,52,.11);
}
#content > .grid .card > a {
  display:block;min-width:0;height:100%;overflow:hidden;background:#e9f0eb;
}
#content > .grid .card > a img {
  display:block;width:100%;height:100%;min-height:270px;aspect-ratio:auto;
  object-fit:cover;object-position:center;transition:transform .35s ease;
}
#content > .grid .card:hover > a img { transform:scale(1.025) }
#content > .grid .card .content {
  min-width:0;padding:30px clamp(26px,4vw,46px);display:flex;
  flex-direction:column;justify-content:center;align-items:flex-start;
}
#content > .grid .card .date {
  order:0;margin:0 0 8px;color:#6b7b74;font-size:.78rem;font-weight:700;
  letter-spacing:.055em;
}
#content > .grid .card h2 {
  order:1;margin:0;font-size:clamp(1.55rem,2.5vw,2rem);line-height:1.18;
  overflow-wrap:anywhere;
}
#content > .grid .card h2 a {
  color:var(--ink);text-decoration-thickness:1px;text-decoration-color:transparent;
  transition:color .18s ease,text-decoration-color .18s ease;
}
#content > .grid .card h2 a:hover {
  color:var(--green);text-decoration-color:currentColor;
}
#content > .grid .card p {
  order:2;margin:14px 0 18px;max-width:68ch;display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
#content > .grid .card .content > a {
  order:3;font-weight:800;text-decoration-thickness:1px;
}
@media (max-width:760px) {
  #content > .grid { gap:18px }
  #content > .grid .card { grid-template-columns:1fr;min-height:0;border-radius:17px }
  #content > .grid .card > a { height:auto;aspect-ratio:16/9 }
  #content > .grid .card > a img { height:100%;min-height:0;aspect-ratio:auto }
  #content > .grid .card .content { padding:21px 20px 23px }
  #content > .grid .card h2 { font-size:1.55rem }
  #content > .grid .card p { margin:12px 0 16px;-webkit-line-clamp:4 }
}
@media (prefers-reduced-motion:reduce) {
  #content > .grid .card,#content > .grid .card > a img { transition:none }
  #content > .grid .card:hover,#content > .grid .card:hover > a img { transform:none }
}