/* Topplista och affiliateupplysning.
 *
 * Inget av detta används än — sektionstyperna finns för att vara redo den dag ett
 * affiliateprogram är godkänt. Se brand/seo-architecture.md för inkopplingen.
 */

/* ---- Knapp ---- */
.vg-btn {
  display: inline-block;
  padding: 0.7em 1.4em;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: var(--wp--preset--font-size--small, 0.9rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  min-block-size: 44px;
  line-height: 1.6;
  transition: background-color 140ms ease, color 140ms ease;
}

.vg-btn--primary {
  background: var(--wp--preset--color--primary, currentColor);
  border-color: var(--wp--preset--color--primary, currentColor);
  color: var(--wp--preset--color--base, #fff);
}

.vg-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---- Affiliateupplysning + centrerad knapp ---- */
.vg-afflink {
  max-inline-size: var(--vg-measure, 46rem);
  margin-inline: auto;
  margin-block: var(--wp--preset--spacing--50, 2.5rem);
  padding-inline: var(--wp--style--root--padding-left, clamp(1.25rem, 4vw, 4rem));
  text-align: center;
}

.vg-afflink__note {
  font-size: var(--wp--preset--font-size--x-small, 0.8rem);
  opacity: 0.75;
  margin: 0 auto 0.9rem;
  max-inline-size: 52ch;
}

.vg-afflink__action { margin: 0; }

/* ---- Topplista ---- */
.vg-toplist {
  max-inline-size: var(--vg-data, 68rem);
  margin-inline: auto;
  margin-block: var(--wp--preset--spacing--60, 3.5rem);
  padding-inline: var(--wp--style--root--padding-left, clamp(1.25rem, 4vw, 4rem));
  scroll-margin-block-start: 7rem;
}

.vg-toplist__eyebrow {
  font-size: var(--wp--preset--font-size--x-small, 0.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-block-end: 0.4rem;
}

.vg-toplist__intro { max-inline-size: 60ch; }

.vg-toplist__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.vg-toplist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 18rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding-block: 1.25rem;
  border-block-start: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.vg-toplist__rank {
  font-variant-numeric: tabular-nums;
  font-size: var(--wp--preset--font-size--large, 1.4rem);
  opacity: 0.45;
  margin: 0;
  min-inline-size: 1.5em;
}

.vg-toplist__img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border-radius: 2px;
}

.vg-toplist__name { margin: 0 0 0.3rem; }

.vg-toplist__bestfor {
  margin: 0 0 0.6rem;
  font-size: var(--wp--preset--font-size--small, 0.9rem);
  opacity: 0.75;
}

.vg-toplist__verdict { margin: 0 0 0.9rem; max-inline-size: 60ch; }

/* Tomma fält renderas inte alls — ett tomt fält är tillåtet, ett påhittat är det inte. */
.vg-toplist__specs {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.4rem 1.25rem;
  font-size: var(--wp--preset--font-size--small, 0.9rem);
}

.vg-toplist__spec { display: flex; gap: 0.5rem; justify-content: space-between;
  border-block-end: 1px dotted color-mix(in srgb, currentColor 22%, transparent); padding-block-end: 0.25rem; }
.vg-toplist__spec dt { opacity: 0.7; }
.vg-toplist__spec dd { margin: 0; text-align: end; }

.vg-toplist__cta { margin: 0; }

.vg-toplist__nolink {
  margin: 0;
  font-size: var(--wp--preset--font-size--x-small, 0.8rem);
  opacity: 0.7;
}

.vg-toplist__source {
  margin-block-start: 1.25rem;
  font-size: var(--wp--preset--font-size--x-small, 0.8rem);
  opacity: 0.7;
  max-inline-size: 70ch;
}

@media (max-width: 48rem) {
  .vg-toplist__item { grid-template-columns: auto minmax(0, 1fr); }
  .vg-toplist__media { grid-column: 1 / -1; }
}