/* components.css — reusable UI atoms: buttons, badges, chips, table→card,
   definition list, accordion (native <details>), pros/cons, rating dots. */

/* ---------------- type-scale utilities used inline in markup ---------------- */
.ae-fs-h4 { font-size: var(--ae-fs-h4); }
.ae-fs-xs { font-size: var(--ae-fs-xs); }

/* ---------------- buttons / CTA ---------------- */
.ae-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ae-sp-2);
  min-height: var(--ae-touch-min);
  padding-inline: var(--ae-sp-5);
  border-radius: var(--ae-r-sm);
  font-weight: var(--ae-fw-bold);
  font-size: var(--ae-fs-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--ae-dur-fast) var(--ae-ease-out), box-shadow var(--ae-dur) var(--ae-ease-out), background var(--ae-dur) var(--ae-ease-out);
}
.ae-btn:active { transform: translateY(1px); }
.ae-cta {
  background: var(--ae-cta-bg);
  color: var(--ae-cta-fg);
  box-shadow: var(--ae-glow-cta);
}
.ae-cta:hover, .ae-cta:focus-visible { background: var(--ae-cta-bg-hover); color: var(--ae-cta-fg); }
.ae-btn--ghost {
  background: transparent;
  color: var(--ae-ink-1);
  border-color: var(--ae-line-strong);
}
.ae-btn--ghost:hover { border-color: var(--ae-accent); color: var(--ae-accent); }
.ae-btn--sm { min-height: var(--ae-btn-h-sm); padding-inline: var(--ae-sp-4); }
.ae-btn--block { width: 100%; }

/* ---------------- badges / chips ---------------- */
.ae-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ae-sp-1);
  padding: var(--ae-sp-1) var(--ae-sp-3);
  border-radius: var(--ae-r-xs);
  font-size: var(--ae-fs-xs);
  font-weight: var(--ae-fw-bold);
  letter-spacing: var(--ae-ls-caps);
  text-transform: uppercase;
}
.ae-badge--accent { background: var(--ae-accent-soft); color: var(--ae-accent); }
.ae-badge--info { background: var(--ae-accent-2-soft); color: var(--ae-accent-2); }
.ae-badge--outline { border: 1px solid var(--ae-line-strong); color: var(--ae-ink-2); }

/* ---------------- cards ---------------- */
.ae-card {
  background: var(--ae-card-bg);
  border: 1px solid var(--ae-card-border);
  border-radius: var(--ae-r-md);
  box-shadow: var(--ae-shadow-card);
  padding: var(--ae-sp-5);
}
.ae-card__media {
  aspect-ratio: var(--ae-ar-card);
  border-radius: var(--ae-r-sm);
  overflow: hidden;
  background: var(--ae-surface-2);
  margin-bottom: var(--ae-sp-3);
}
.ae-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Mobile-screenshot frame: source asset is portrait (360x640, 9:16), not
   the default 4:3 card ratio — mismatched frame/asset ratio under
   object-fit:cover crops the subject (see responsive-design skill's
   cropPct detector). Keep this frame's own ratio matched to what
   asset-manager is expected to deliver for data-asset="mobil-skjerm". */
.ae-card__media--portrait { aspect-ratio: 9 / 16; max-width: 320px; margin-inline: auto; }
/* Game-tile source assets (Gates of Olympus / Sweet Bonanza / Big Bass
   Bonanza) ship square (800x800 / 400x400) — forcing the default 4:3 card
   ratio onto a 1:1 asset crops ~33% under object-fit:cover (see
   responsive-design skill's cropPct detector). Match the frame to the
   asset instead of cropping it. */
.ae-card__media--square { aspect-ratio: 1 / 1; }

/* ---------------- logo-type images (providers, payment icons) ----------
   object-fit:contain, never :cover — these assets carry their own
   whitespace/aspect and a crop would cut text off a wordmark. Using
   `contain` sidesteps the cropPct check entirely (it only flags `cover`). */
.ae-logo-chip {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Game-tile screenshots sit inside .ae-card__media(--square), which
   already sets width/height/object-fit:cover generically — no extra
   class needed on those <img> tags. */

/* ---------------- provider list (games/live use lists here, not tables) */
.ae-provider-list { display: grid; gap: var(--ae-sp-3); grid-template-columns: 1fr; list-style: none; }
@media (min-width: 640px) { .ae-provider-list { grid-template-columns: repeat(2, 1fr); } }
.ae-provider-item {
  display: flex;
  gap: var(--ae-sp-3);
  align-items: flex-start;
  padding: var(--ae-sp-3) var(--ae-sp-4);
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-md);
  background: var(--ae-surface);
}
.ae-provider-item__logo {
  flex: none;
  width: 84px;
  aspect-ratio: 300 / 140;
  background: var(--ae-surface-2);
  border-radius: var(--ae-r-xs);
  padding: var(--ae-sp-1);
}
.ae-provider-item__body { display: grid; gap: 2px; }
.ae-provider-item__name { font-weight: var(--ae-fw-bold); }
.ae-provider-item__text { font-size: var(--ae-fs-sm); color: var(--ae-ink-2); }

/* ---------------- live-studio provider strip (id="live") ---------------- */
.ae-logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ae-sp-5);
  align-items: center;
  justify-content: center;
  padding: var(--ae-sp-6);
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-md);
  background: var(--ae-surface);
}
.ae-logo-strip__item { width: 120px; aspect-ratio: 300 / 140; }
.ae-logo-strip__caption { margin-top: var(--ae-sp-3); font-size: var(--ae-fs-xs); color: var(--ae-ink-3); text-align: center; }

/* ---------------- payment dt icon (definition list, id="betaling") ------ */
.ae-dl__term-inner { display: flex; align-items: center; gap: var(--ae-sp-2); }
.ae-dl__icon { width: 32px; aspect-ratio: 300 / 140; flex: none; background: var(--ae-surface-2); border-radius: var(--ae-r-xs); padding: 2px; }

/* ---------------- table -> card on mobile (single <table>, data-label) --- */
.ae-table-wrap { overflow-x: auto; min-width: 0; }
.ae-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--ae-surface);
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-md);
  overflow: hidden;
}
.ae-table th, .ae-table td {
  text-align: left;
  padding: var(--ae-sp-3) var(--ae-sp-4);
  border-bottom: 1px solid var(--ae-line);
  font-size: var(--ae-fs-sm);
}
.ae-table thead th {
  background: var(--ae-surface-2);
  font-size: var(--ae-fs-xs);
  letter-spacing: var(--ae-ls-caps);
  text-transform: uppercase;
  color: var(--ae-ink-2);
}
.ae-table tbody tr:last-child td { border-bottom: none; }
.ae-table tbody tr:nth-child(even) { background: var(--ae-surface-2); }

@media (max-width: 640px) {
  .ae-table-wrap { overflow-x: visible; }
  .ae-table { min-width: 0; }
  .ae-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ae-table, .ae-table tbody, .ae-table tr, .ae-table td { display: block; width: 100%; }
  .ae-table tr {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-r-md);
    margin-bottom: var(--ae-sp-3);
    padding: var(--ae-sp-2) var(--ae-sp-4);
    background: var(--ae-surface);
  }
  .ae-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ae-sp-3);
    border-bottom: 1px dashed var(--ae-line);
    padding: var(--ae-sp-2) 0;
  }
  .ae-table td:last-child { border-bottom: none; }
  .ae-table td::before {
    content: attr(data-label);
    font-weight: var(--ae-fw-bold);
    color: var(--ae-ink-2);
    font-size: var(--ae-fs-xs);
    letter-spacing: var(--ae-ls-wide);
    text-transform: uppercase;
    flex: 0 0 auto;
  }
}

/* ---------------- definition list (payment methods) ---------------- */
.ae-dl {
  display: grid;
  gap: 0;
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-md);
  overflow: hidden;
  background: var(--ae-surface);
}
.ae-dl__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ae-sp-1);
  padding: var(--ae-sp-4);
  border-bottom: 1px solid var(--ae-line);
}
.ae-dl__row:nth-child(even) { background: var(--ae-surface-2); }
.ae-dl__row:last-child { border-bottom: none; }
@media (min-width: 640px) {
  .ae-dl__row { grid-template-columns: minmax(160px, 240px) 1fr; align-items: baseline; gap: var(--ae-sp-4); }
}
.ae-dl__term { font-weight: var(--ae-fw-bold); color: var(--ae-ink-1); }
.ae-dl__desc { color: var(--ae-ink-2); font-size: var(--ae-fs-sm); }

/* ---------------- pros / cons ---------------- */
.ae-splitlist { display: grid; gap: var(--ae-sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ae-splitlist { grid-template-columns: 1fr 1fr; } }
.ae-splitlist__col {
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-md);
  padding: var(--ae-sp-5);
  background: var(--ae-surface);
}
.ae-splitlist__col--pro { border-top: 3px solid var(--ae-success); }
.ae-splitlist__col--con { border-top: 3px solid var(--ae-danger); }
.ae-splitlist__col ul { list-style: none; display: grid; gap: var(--ae-sp-2); margin-top: var(--ae-sp-3); }
.ae-splitlist__col li { display: flex; gap: var(--ae-sp-2); font-size: var(--ae-fs-sm); color: var(--ae-ink-2); }

/* ---------------- accordion (FAQ), native <details> ---------------- */
.ae-accordion { display: grid; gap: var(--ae-sp-3); }
.ae-accordion__item {
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-md);
  background: var(--ae-surface);
  overflow: hidden;
}
.ae-accordion__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ae-sp-3);
  padding: var(--ae-sp-4) var(--ae-sp-5);
  min-height: var(--ae-touch-min);
  font-weight: var(--ae-fw-bold);
}
.ae-accordion__item summary::-webkit-details-marker { display: none; }
.ae-accordion__item summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--ae-accent);
  flex: none;
}
.ae-accordion__item[open] summary::after { content: "\2212"; }
.ae-accordion__body { padding: 0 var(--ae-sp-5) var(--ae-sp-5); color: var(--ae-ink-2); font-size: var(--ae-fs-sm); }

/* ---------------- rating dots (visual only, no invented numeric claim) --- */
.ae-rating { display: inline-flex; gap: 4px; align-items: center; }
.ae-rating__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ae-line-strong); }
.ae-rating__dot.is-on { background: var(--ae-accent-2); }

/* ---------------- info grid (icon + text tiles) ---------------- */
.ae-infogrid { display: grid; gap: var(--ae-sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .ae-infogrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ae-infogrid { grid-template-columns: repeat(3, 1fr); } }
.ae-infogrid__item {
  display: flex;
  gap: var(--ae-sp-3);
  padding: var(--ae-sp-4);
  border: 1px solid var(--ae-line);
  border-radius: var(--ae-r-md);
  background: var(--ae-surface);
}
.ae-infogrid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--ae-r-sm);
  background: var(--ae-accent-soft);
  overflow: hidden;
}
/* Scoped empty-src handling (not the generic .ae-asset-slot, which is sized
   for card/hero media frames, not a 40px icon tile) — the accent-soft tile
   above IS the placeholder until asset-manager fills data-asset. */
.ae-infogrid__icon img[src=""] { display: none; }
.ae-infogrid__icon img:not([src=""]) { width: 100%; height: 100%; object-fit: cover; }
.ae-infogrid__title { font-weight: var(--ae-fw-bold); margin-bottom: var(--ae-sp-1); }
.ae-infogrid__text { color: var(--ae-ink-2); font-size: var(--ae-fs-sm); }