/* Blog. Sits on top of topics.css and only adds what an article listing needs:
   the card grid, the banner, the meta line and the fade of a teaser. Colours are
   the ones topics.css already uses (#7d0845 burgundy, #2e1a4a ink, #ffb000
   amber, #ead8d6 line, #fdf5f3 tint), no new values. */

.blog-grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 20px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ead8d6;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(46, 26, 74, .10);
}

.blog-card-figure {
  position: relative;
  display: block;
}

/* The thumbnail carries the ratio the covers are cut to, 1200 / 630, and not a
   fixed height. A fixed 168px was a different ratio at every breakpoint: about
   1.7 in the three-column grid, 2.2 at two columns, 2.6 at one, and `cover`
   made up the difference by cutting the picture top and bottom. That took a
   sixth of the height off a phone-width card, half of it off the top, which is
   where faces are, so heads lost their crowns on exactly the narrow screens
   most people read on (owner, 09.08.2026). With the ratio fixed, the crop is
   the one chosen when the cover was cut, and nothing is taken twice.
   `object-position` keeps that promise for a picture that ever arrives in a
   different ratio: it then loses ground at the bottom, not over the faces. */
.blog-card-img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
  background: #fdf5f3;
}

/* The AI picture credit for the listing: one quiet legend under the grid, not a
   chip on every thumbnail (owner, 06.08.2026: six white badges over six warm
   photos read as an alarm, and the page is about the texts, not about how the
   pictures were made). It sits on the page that shows the images, in reading
   flow, and it speaks for all of them at once, which is what Art. 50(4) of
   Regulation (EU) 2024/1689 asks for: clear, visible, no interaction needed. */
.blog-grid-note {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 72px;
  font-size: 12px;
  color: #8a8085;
  text-align: right;
}

.blog-card-text {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.blog-card-text h2 {
  font-family: "Bauhaus Bugler", "Lexend", system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #7d0845;
  line-height: 1.25;
  margin: 0;
}

.blog-card-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #3a2f33;
}

.blog-card-meta {
  margin-top: auto !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  color: #6b6266 !important;
}

.blog-card-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdf5f3;
  border: 1px solid #ead8d6;
  color: #7d0845;
  font-size: 12px;
  font-weight: 600;
}

/* ---- article ---- */

/* The covers are cut to 1200 x 630, so this box shows them whole. `cover` and
   `object-position` are the safety net for a picture in another ratio, and they
   take the difference off the bottom rather than off the top. */
.blog-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 18px;
  display: block;
  background: #fdf5f3;
}

/* The summary box under the headline: the takeaways plus who wrote it and
   when. Set on the warm surface the topic pages use for their "at a glance"
   block, so the two read as the same kind of element. */
.blog-summary {
  background: #fdf5f3;
  border: 1px solid #f2e3de;
  border-radius: 18px;
  padding: 22px 24px 18px;
  margin: 0 0 22px;
}

.blog-summary .blog-takeaways {
  margin: 0;
}

.blog-summary-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0ddd7;
}

.blog-summary-foot .blog-byline {
  margin: 0;
}

.blog-summary-foot .blog-meta {
  margin: 0;
}

@media (max-width: 600px) {
  .blog-summary {
    padding: 18px 18px 16px;
    border-radius: 14px;
  }
}

/* Author row: avatar + name, links to the team on the about page. */
.blog-byline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  text-decoration: none;
  color: inherit;
}

.blog-byline-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #fdf5f3;
  flex-shrink: 0;
}

.blog-byline-name {
  font-size: 15px;
  font-weight: 500;
  color: #4b4b55;
  transition: color .15s;
}

.blog-byline:hover .blog-byline-name {
  color: #7d0845;
}

/* The takeaway list under the headline: the same role the "Auf einen Blick"
   block has on a topic page, and what blog_posts.excerpt_* actually holds. */
.blog-takeaways {
  margin: 0 0 4px;
  padding-left: 1.1em;
  color: #4a4045;
  font-size: 17px;
  line-height: 1.6;
}

.blog-takeaways li {
  margin-bottom: 6px;
}

.blog-cover-figure {
  margin: 0;
  position: relative;
}

/* The picture credit, the AI disclosure or the name a photo licence wants, sits
   IN the picture, bottom right (owner, 10.08.2026). Outside the frame it was a
   grey line under a warm cover and read as part of the article; inside it stays
   with the picture it speaks about, which is what both Art. 50(4) of Regulation
   (EU) 2024/1689 and the Vecteezy Free License actually ask for: near the image,
   visible, no interaction needed.
   The brief was "as discreet as the law still allows", so: small, white, a
   little transparent. The two shadows are not decoration, they are the reason
   the line survives a bright sky or a white wall behind it; without them white
   on light is exactly the "not clearly legible" that the discretion may never
   cost. Legibility is the floor here, and the corner never goes under it. */
.blog-cover-credit {
  position: absolute;
  right: 14px;
  bottom: 12px;
  max-width: calc(100% - 28px);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  text-align: right;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 0 10px rgba(0, 0, 0, .45);
  pointer-events: auto;
}

.blog-cover-credit a {
  color: inherit;
  text-decoration: none;
}

.blog-cover-credit a:hover,
.blog-cover-credit a:focus {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .blog-cover-credit {
    right: 10px;
    bottom: 8px;
    font-size: 10px;
  }
}

.blog-meta {
  font-size: 14px;
  color: #6b6266;
  margin: 0;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: #fdf5f3;
  border: 1px solid #ead8d6;
  color: #7d0845;
  font-size: 13px;
  font-weight: 500;
}

.blog-hero .seo-definition {
  font-size: 19px;
  line-height: 1.6;
}

.seo-body blockquote {
  margin: 20px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid #ffb000;
  color: #2e1a4a;
  font-size: 18px;
}

.seo-body img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  margin: 20px 0;
}

/* A teaser stops mid thought on purpose. The fade says so before the reader
   hits the end of the text and wonders whether something failed to load. */
.blog-body--teaser {
  position: relative;
  max-height: 34em;
  overflow: hidden;
}

.blog-body--teaser::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9em;
  background: linear-gradient(to bottom, rgba(250, 250, 248, 0), #fafaf8 85%);
  pointer-events: none;
}

.blog-cta {
  margin-top: 4px;
}

.blog-cta .bn-floatnav-cta {
  display: inline-block;
}

@media (max-width: 640px) {
  .blog-grid { padding: 4px 16px 56px; gap: 18px; }
  .blog-body--teaser { max-height: 40em; }
}