/* ============================================================
   components/magazine.css
   Landscape cover + prose. The PDF is free, no registration; one
   endpoint per issue, the download count shown as social proof.
   No outer margin on the root.
   ============================================================ */
.rfi-magazine { background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow); padding: 24px; display: flex; gap: 26px; align-items: flex-start; }
.rfi-magazine__cover { width: 296px; flex: none; aspect-ratio: 297 / 210; border-radius: var(--rfi-radius-sm); background: var(--rfi-border-soft); box-shadow: var(--rfi-shadow-up); overflow: hidden; }
.rfi-magazine__cover img { width: 100%; height: 100%; object-fit: cover; }
.rfi-magazine__body { flex: 1; min-width: 0; }
.rfi-magazine__title { font-family: var(--rfi-font-ui); font-size: 23px; font-weight: 600; }
.rfi-magazine__issue { font-family: var(--rfi-font-ui); font-size: 13px; font-weight: 500; color: var(--rfi-teal-dark); margin-top: 5px; }
.rfi-magazine__lede { font-size: 15px; line-height: 1.65; color: var(--rfi-text); margin-top: 14px; }
.rfi-magazine__text { font-size: 14px; line-height: 1.65; color: var(--rfi-text-2); margin-top: 10px; }
.rfi-magazine__cta { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.rfi-magazine__count { font-size: 12.5px; color: var(--rfi-text-3); }

/* ---- the archive grid on /magazine/ ------------------------
   Every issue is one cover (linking to the issue page) plus one Download line. */
.rfi-magarch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 20px; }
@media (max-width: 900px) { .rfi-magarch { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rfi-magarch { grid-template-columns: 1fr; } }

.rfi-magarch__cover { display: block; position: relative; aspect-ratio: 297 / 210; border-radius: var(--rfi-radius-sm); background: var(--rfi-border-soft); box-shadow: var(--rfi-shadow); overflow: hidden; transition: box-shadow .16s, transform .16s; }
.rfi-magarch__item:hover .rfi-magarch__cover { box-shadow: var(--rfi-shadow-up); transform: var(--rfi-lift); }
.rfi-magarch__cover img { width: 100%; height: 100%; object-fit: cover; }
.rfi-magarch__title { font-family: var(--rfi-font-ui); font-size: 15px; font-weight: 600; line-height: 1.25; margin-top: 11px; }
.rfi-magarch__title a { color: var(--rfi-text); }
.rfi-magarch__item:hover .rfi-magarch__title a { color: var(--rfi-teal); }
.rfi-magarch__issue { font-size: var(--rfi-meta); color: var(--rfi-text-3); margin-top: 4px; }
.rfi-magarch__dl { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-family: var(--rfi-font-ui); font-size: 12.5px; font-weight: 600; color: var(--rfi-navy); }
.rfi-magarch__dl svg { width: 13px; height: 13px; fill: currentColor; }
.rfi-magarch__item:hover .rfi-magarch__dl { color: var(--rfi-teal); }
.rfi-magarch__cnt { font-weight: 400; color: var(--rfi-text-3); }

@media (max-width: 700px) { .rfi-magazine { flex-direction: column; } .rfi-magazine__cover { width: 100%; } }

/* ---- the single issue page (/magazine/{slug}/) -------------
   ONE grid drives the layout so the order can differ desktop vs mobile from one markup.
   Desktop: H1 and metadata full width, then a left column (cover + Download + count) beside the
   description, then Featured companies full width. The left column is ONE grid item (the aside),
   aligned to the top and never stretched, so the button and count stay directly under the cover
   however long the description is. Mobile: the aside unwraps (display:contents) into the single
   column cover, title, metadata, button, count, description, companies. Tokens only, no hardcoded
   colours. */
.rfi-magissue {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-areas:
    "title    title"
    "meta     meta"
    "aside    desc"
    "featured featured";
  column-gap: 34px; align-items: start;
}
.rfi-magissue__title { grid-area: title; margin: 0; }
.rfi-magissue__meta {
  grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; font-size: 13px; color: var(--rfi-text-3);
}
.rfi-magissue__issue { font-family: var(--rfi-font-ui); font-weight: 500; color: var(--rfi-text-2); }

/* The left column: cover, then the Download button, then the download count, stacked and held at
   the top of the row (the row grows with the description, the aside does not). */
.rfi-magissue__aside { grid-area: aside; margin-top: 22px; display: flex; flex-direction: column; align-items: stretch; }
/* The cover keeps its own proportions: full width of its 320px column, natural height, no crop
   and no fixed height. */
.rfi-magissue__coverwrap { border-radius: var(--rfi-radius-sm); overflow: hidden; box-shadow: var(--rfi-shadow-up); background: var(--rfi-border-soft); }
.rfi-magissue__cover { display: block; width: 100%; height: auto; }
.rfi-magissue__dl { display: flex; width: 100%; margin-top: 16px; }
.rfi-magissue__downloads { margin-top: 8px; text-align: center; font-size: 13px; color: var(--rfi-text-3); }
.rfi-magissue__desc { grid-area: desc; min-width: 0; margin-top: 22px; }
.rfi-magissue-featured { grid-area: featured; margin-top: 34px; }

@media (max-width: 700px) {
  .rfi-magissue {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cover"
      "title"
      "meta"
      "download"
      "count"
      "desc"
      "featured";
    grid-template-rows: none;
  }
  /* Unwrap the aside so its children take their own places in the single-column order. */
  .rfi-magissue__aside { display: contents; }
  .rfi-magissue__coverwrap { grid-area: cover; max-width: 320px; }
  .rfi-magissue__dl { grid-area: download; margin-top: 18px; }
  .rfi-magissue__downloads { grid-area: count; margin-top: 8px; text-align: left; }
  .rfi-magissue__title { margin-top: 18px; }
  .rfi-magissue__desc { margin-top: 18px; }
}