/* =============== Dev updates (no overflow + fixed layout zones) =============== */
:root{
    --devUpdatesImgHeight: 80px;
}
.dev-updates,
.dev-updates * {
  box-sizing: border-box;
}

.dev-updates {
  position: relative;
  width: 85%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
/* Card: 2 rows + 2 columns
   Row 1: meta (left) + nav (right)
   Row 2: body (spans both)
*/
.dev-updates__card {
  position: relative;
  display: grid;

  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "meta nav"
    "body body";

  width: 100%;
  height: 100%;
  min-height: var(--devUpdatesImgHeight);
  min-width: 0;
  overflow: hidden;

  /* no need for extra bottom padding now */
  padding: 14px;

  border: 1px solid #09203f;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}

/* Top-left */
.dev-updates__meta {
  grid-area: meta;
  justify-self: start;
  align-self: start;

  display: flex;
  gap: 10px;
  align-items: baseline;

  min-width: 0;
  color: #6b7280;
  font-size: 12px;
  margin: 0;
}

.dev-updates__count {
  font-variant-numeric: tabular-nums;
}

.dev-updates__bloglabel {
  font-variant-numeric: tabular-nums;
}

/* Body goes under the header row */
.dev-updates__body {
  grid-area: body;

  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding-right: 6px;
}

/* Core grid: image left, title+summary right */
.dev-updates__core {
  display: grid;
  grid-template-columns: var(--devUpdatesImgHeight) minmax(0, 1fr);
  /* gap: 12px; */

  /* IMPORTANT: let both columns stretch to the same row height */
  align-items: stretch;

  min-width: 0;
}

.dev-updates__image {
  grid-column: 1;

  justify-self: center;
  align-self: center;
  /* width: 100%; */

  /* IMPORTANT: make it fill the left column height (== the row height) */
  height: var(--devUpdatesImgHeight);

  /* pick one:
     - cover: fills the box, may crop
     - contain: no crop, may letterbox
  */
  object-fit: cover; /* or: contain */

  /* remove the cap that prevents it matching the text height */
  max-height: none;

  border-radius: 10px;
  display: block;
}


/* Right side */
.dev-updates__content {
  grid-column: 2;
  min-width: 0;               /* enables ellipsis */
  display: flex;
  flex-direction: column;
  /* gap: 8px; */
}

/* Title: clamp + ellipsis */
.dev-updates__title {

  margin: 0;
  min-width: 0;

  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  color: #111827;

  overflow: hidden;
  text-overflow: ellipsis;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Summary: clamp to 4 lines total */
.dev-updates__summary {
  margin: 0;
  min-width: 0;

  color: #111827;
  font-size: 14px;
  line-height: 1.5;

  overflow: hidden;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* optional: newer syntax (harmless if unsupported) */
  line-clamp: 2;
}

/* If your injected summary contains lists, make them not break clamping */
.dev-updates__summary ul,
.dev-updates__summary ol {
  margin: 0;
  padding-left: 1.1em; /* keep bullets aligned */
}

/* IMPORTANT: allow wrapping (remove the "1-line per li" behavior) */
.dev-updates__summary li {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Remove this if you want 4 LINES, not "max 3 list items" */
/* .dev-updates__summary li:nth-child(n + 4) { display: none; } */


/* Top-right nav (no absolute positioning) */
.dev-updates__nav {
  grid-area: nav;
  justify-self: end;
  align-self: start;

  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0px;
}

/* Keep button behavior intact */
.dev-updates__btn {
  width: 38px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #111827;
  font-size: 16px;
  cursor: pointer;
}

.dev-updates__btn:hover {
  background: #f3f4f6;
}

.dev-updates__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* .dev-updates__more {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #09203f;

  font-size: 14px;
  text-decoration: none;
  transition: background 0.12s ease;

  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dev-updates__more:hover,
.dev-updates__more:focus {
  background: #f3f4f6;
  outline: none;
  text-decoration: none;
}

.dev-updates__more[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
} */

/* Hint unchanged */
.dev-updates__hint {
  margin: 10px 0 0 0;
  color: #6b7280;
  font-size: 12px;
}

.dev-updates__link {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
}
.dev-updates__link:hover{
  background: #f7f7f9;
}

/* Ensure the anchor does not introduce focus outline surprises but remains keyboard accessible */
/* .dev-updates__link:focus {
  outline: 3px solid rgba(9, 32, 63, 0.12);
  outline-offset: 4px;
  border-radius: 10px;
} */

/* Responsive: stack image on top on small screens */
/* @media (max-width: 650px) {
  .dev-updates__core {
    grid-template-columns: 1fr;
  }

  .dev-updates__image {
    max-height: 200px;
  }

  .dev-updates__content {
    grid-column: 1;
  }
} */