/* =====================================================================
   T6: Editor's Picks widget.
   Desktop: left rail markup (page wiring is T8). Mobile/tablet: inline block
   after the 4th paragraph on article pages. Same markup, same classes; the
   media query below is what hides the inline variant on desktop — there is
   no device sniffing anywhere in the component.
   All sizes are rem. Scoped under .coi-v2 so this is a no-op with the switch off.
   ===================================================================== */

.coi-v2 .coi-picks {
  border: var(--coi-box-rule-w) solid var(--coi-border);
  border-top: var(--coi-box-rule-w) solid var(--coi-box-rule);
  border-radius: var(--coi-radius);
  padding: 1rem;
  background: var(--coi-bg);
}

.coi-v2 .coi-picks h2 {
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--coi-label);
  margin: 0 0 0.7rem;
}

.coi-v2 .coi-picks ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.coi-v2 .coi-pick {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-top: var(--coi-box-rule-w) solid var(--coi-border);
  text-decoration: none;
  color: var(--coi-primary);
}

/* A story with no featured image renders no <img>, so the text is the only child: let it span both columns. */
.coi-v2 .coi-pick > span:first-child {
  grid-column: 1 / -1;
}

.coi-v2 .coi-picks li:first-child .coi-pick {
  border-top: 0;
  padding-top: 0;
}

.coi-v2 .coi-pick img {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: cover;
  border-radius: 0.3rem;
}

.coi-v2 .coi-pick strong {
  display: block;
  font-size: 0.86rem;
  line-height: 1.25;
  font-weight: 600;
}

.coi-v2 .coi-pick small {
  color: var(--coi-muted);
  font-size: 0.72rem;
}

.coi-v2 .coi-pick:hover strong {
  color: var(--coi-accent);
  text-decoration: underline;
}

/* ---------- Inline variant (mobile and tablet only; desktop uses the left rail) ----------
   Designed so it does not read like the end of the story: it sits in the text column, has
   an accent bar and a tinted background instead of a full-width break, and ends with a
   "story continues" cue. */
.coi-v2 .coi-picks--inline {
  margin: 1.6rem 0 1.4rem;
  border: 0;
  border-left: 0.3rem solid var(--coi-rule);
  background: var(--coi-surface);
  border-radius: 0 var(--coi-radius) var(--coi-radius) 0;
  padding: 0.9rem 1rem 0.7rem;
}

.coi-v2 .coi-picks--inline .coi-pick {
  padding: 0.6rem 0;
}

.coi-v2 .coi-continue {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coi-muted);
}

.coi-v2 .coi-continue::before,
.coi-v2 .coi-continue::after {
  content: "";
  flex: 1;
  height: var(--coi-box-rule-w);
  background: var(--coi-border);
}

.coi-v2 .coi-continue span::after {
  content: " \2193";
}

/* stylelint-disable-next-line unit-disallowed-list -- breakpoint px to match Astra's own 921px/922px breakpoint, not a design size */
@media (min-width: 922px) {
  .coi-v2 .coi-picks--inline {
    display: none;
  }
}