/*
 * sections.css — arcticcasino.vip
 * Reusable content components used inside .av-section blocks: data tables
 * (single <table>, CSS-only card transform on mobile — css-layout §5),
 * logo/media grids, FAQ accordion (JS click — css-layout §1), pros/cons.
 */

/* ---------------- data table -> cards on mobile, ONE table, no dup ------- */
.av-table-wrap {
  overflow-x: auto;
  min-width: 0;
  margin-block: var(--av-space-5);
  border-radius: var(--av-radius-md);
  border: 1px solid var(--av-border-soft);
}
.av-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  background: var(--av-surface);
}
.av-table th,
.av-table td {
  text-align: left;
  padding: var(--av-space-3) var(--av-space-4);
  border-bottom: 1px solid var(--av-border-soft);
  font-size: var(--av-fs-small);
  color: var(--av-text-muted);
}
.av-table thead th {
  color: var(--av-text);
  font-weight: 600;
  background: var(--av-surface-alt);
}
.av-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 640px) {
  .av-table { min-width: 0; }
  .av-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .av-table tr {
    display: block;
    margin: var(--av-space-3);
    border: 1px solid var(--av-border-soft);
    border-radius: var(--av-radius-md);
    background: var(--av-surface-alt);
  }
  .av-table td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--av-space-1) var(--av-space-4);
    padding-block: var(--av-space-3);
    border-bottom: 1px solid var(--av-border-soft);
    overflow-wrap: anywhere;
  }
  .av-table td:last-child { border-bottom: 0; }
  .av-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--av-text-faint);
    flex-shrink: 0;
    overflow-wrap: anywhere;
  }
}

/* ---------------- logo / media grid (providers, payments) --------------- */
.av-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--av-space-3);
  margin-block: var(--av-space-5);
}
@media (min-width: 640px) { .av-logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .av-logo-grid { grid-template-columns: repeat(6, 1fr); } }

.av-logo-tile {
  aspect-ratio: 3 / 2;
  border-radius: var(--av-radius-sm);
  border: 1px solid var(--av-border-soft);
  background: var(--av-surface);
  display: grid;
  place-items: center;
  padding: var(--av-space-3);
}
.av-logo-tile img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------- featured game callout (used once, in bonuser) ---------- */
.av-feature-tile {
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: var(--av-radius-lg);
  overflow: hidden;
  border: 1px solid var(--av-border-soft);
  margin-block: var(--av-space-5);
}
.av-feature-tile img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- feature/media split ------------------------------------ */
.av-media-split {
  display: grid;
  gap: var(--av-space-5);
  align-items: start;
  margin-top: var(--av-space-5);
}
@media (min-width: 768px) { .av-media-split { grid-template-columns: 1fr 1fr; } }

.av-media-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--av-radius-lg);
  overflow: hidden;
  border: 1px solid var(--av-border-soft);
  background: var(--av-surface);
}
.av-media-frame img { width: 100%; height: 100%; object-fit: cover; }
.av-media-frame--tall { aspect-ratio: 3 / 4; }

/* ---------------- steps list (registration flow) ------------------------- */
.av-steps {
  counter-reset: av-step;
  list-style: none;
  margin: var(--av-space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--av-space-3);
}
.av-steps li {
  counter-increment: av-step;
  position: relative;
  padding: var(--av-space-3) var(--av-space-4) var(--av-space-3) var(--av-space-8);
  background: var(--av-surface);
  border: 1px solid var(--av-border-soft);
  border-radius: var(--av-radius-md);
  color: var(--av-text-muted);
}
.av-steps li::before {
  content: counter(av-step);
  position: absolute;
  left: var(--av-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--av-aurora-gradient);
  color: var(--av-ink);
  font-weight: 700;
  font-size: 0.8125rem;
  display: grid;
  place-items: center;
}

/* ---------------- pros / cons -------------------------------------------- */
.av-proscons {
  display: grid;
  gap: var(--av-space-4);
  margin-top: var(--av-space-5);
}
@media (min-width: 768px) { .av-proscons { grid-template-columns: 1fr 1fr; } }

.av-proscons-col {
  border-radius: var(--av-radius-md);
  padding: var(--av-space-5);
  border: 1px solid var(--av-border-soft);
}
.av-proscons-col--pros { background: linear-gradient(180deg, rgba(74, 222, 128, 0.08), transparent 60%); }
.av-proscons-col--cons { background: linear-gradient(180deg, rgba(251, 113, 133, 0.08), transparent 60%); }
.av-proscons-col h3 { font-size: var(--av-fs-h4); margin-bottom: var(--av-space-3); }
.av-proscons-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--av-space-2); color: var(--av-text-muted); }
.av-proscons-col li { padding-left: var(--av-space-5); position: relative; }
.av-proscons-col--pros li::before { content: '+'; position: absolute; left: 0; color: var(--av-green); font-weight: 700; }
.av-proscons-col--cons li::before { content: '\2212'; position: absolute; left: 0; color: var(--av-danger); font-weight: 700; }

/* ---------------- review cards -------------------------------------------- */
.av-review-grid {
  display: grid;
  gap: var(--av-space-4);
  margin-top: var(--av-space-5);
}
@media (min-width: 768px) { .av-review-grid { grid-template-columns: repeat(3, 1fr); } }

.av-review-card {
  border: 1px solid var(--av-border-soft);
  border-radius: var(--av-radius-md);
  padding: var(--av-space-4);
  background: var(--av-surface);
  display: grid;
  gap: var(--av-space-3);
}
.av-review-head { display: flex; align-items: center; gap: var(--av-space-3); }
.av-review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--av-border-soft);
}
.av-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.av-review-name { font-weight: 600; font-size: var(--av-fs-small); }
.av-review-rating { color: var(--av-teal); font-size: var(--av-fs-small); }
.av-review-quote { font-size: var(--av-fs-small); color: var(--av-text-muted); margin: 0; }

/* ---------------- FAQ accordion (JS click, not :hover) -------------------- */
.av-faq-list { display: grid; gap: var(--av-space-3); margin-top: var(--av-space-5); }
.av-faq-item {
  border: 1px solid var(--av-border-soft);
  border-radius: var(--av-radius-md);
  background: var(--av-surface);
  overflow: hidden;
}
.av-faq-q {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-3);
  padding: var(--av-space-4);
  background: transparent;
  border: 0;
  color: var(--av-text);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.av-faq-q .av-faq-icon { flex-shrink: 0; transition: transform 0.15s ease; }
.av-faq-q[aria-expanded='true'] .av-faq-icon { transform: rotate(45deg); }
.av-faq-a { padding: 0 var(--av-space-4) var(--av-space-4); color: var(--av-text-muted); }
.av-faq-a[hidden] { display: none; }