/* transparency/index.css — Transparency Report page composition. Mobile-first.
   Layout: hero-grid (hero-cms --left-768 LEFT + aleko-card 384w RIGHT) + inquiry-box (768w) +
           3× request-list (announcements 1 item, registrar 4 items, legal 6 items).
   Hero pt 88. page-glow bottom at Figma frame 2733 → 2635. */

/* ─── Atoms ────────────────────────────────────────────────────────── */

/* ─── Molecules ────────────────────────────────────────────────────── */
@import url('../../_components/molecules/hero-cms/hero-cms.css');
@import url('../../_components/molecules/request-item/request-item.css');

/* ─── Sections ─────────────────────────────────────────────────────── */
@import url('../../_components/sections/header-full/header-full.css');
@import url('../../_components/sections/footer-full/footer-full.css');
@import url('../../_components/sections/mobile-menu/mobile-menu.css');
@import url('../../_components/sections/age-gate-modal/age-gate-modal.css');
@import url('../../_components/sections/page-glow/page-glow.css');
@import url('../../_components/sections/request-list/request-list.css');

/* ─── Page-scoped overrides ─────────────────────────────────────────── */

.page-transparency [data-wins-counter] { display: none !important; }

.page-transparency .transparency-main {
  position: relative;
  overflow: hidden;
}

.page-transparency .transparency-container {
  position: relative;
  z-index: 1;
  padding: 88px 16px 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero grid: stack on mobile, 768 + 384 grid on ≥1024 */
.page-transparency .transparency-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.page-transparency .transparency-hero-grid .hero-cms {
  margin: 0;
  padding: 0;
}

/* Aleko / paste preview card — inline pattern (RIGHT col 384w on desktop).
   Figma 843:2 — soft-bg card, padding 24, 8br, 1px line. Pin icon + tag + meta + stats + chips + body. */
.page-transparency .aleko-card {
  width: 100%;
  max-width: 384px;
  padding: 24px;
  background-color: rgb(var(--color-soft));
  border: 1px solid rgb(var(--color-line));
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
.page-transparency .aleko-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgb(var(--color-text));
}
.page-transparency .aleko-card__tag-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
}
.page-transparency .aleko-card__name {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: rgb(var(--color-lead));
  margin: 0;
}
.page-transparency .aleko-card__meta {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  margin: 0;
}
.page-transparency .aleko-card__stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
}
.page-transparency .aleko-card__chips {
  display: flex;
  gap: 8px;
}
.page-transparency .aleko-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background-color: rgb(var(--color-body));
  border: 1px solid rgb(var(--color-line));
  border-radius: 8px;
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
}
.page-transparency .aleko-card__body {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: rgb(var(--color-text));
  margin: 0;
}

/* Inquiry box — soft bg 768w, padding 24, 8br, 1px line.
   Figma 843:92 — y=392 w=768 h=336 in Figma. Heading + paragraph + bullet list + footer text. */
.page-transparency .inquiry-box {
  width: 100%;
  max-width: 768px;
  margin: 32px 0 0;
  padding: 24px;
  background-color: rgb(var(--color-soft));
  border: 1px solid rgb(var(--color-line));
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}
.page-transparency .inquiry-box__intro {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  margin: 0;
}
.page-transparency .inquiry-box__heading {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: rgb(var(--color-lead));
  margin: 0;
}
.page-transparency .inquiry-box__list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-transparency .inquiry-box__list li {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: rgb(var(--color-text));
}
.page-transparency .inquiry-box__note {
  font-family: 'Nationale', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--color-text));
  margin: 0;
}

/* Request list sections — pt between */
.page-transparency .transparency-sections {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 56px;
  padding-bottom: 96px;
}

/* Wave 7c fix — request-list page-scoped overrides.
   Component default has `margin: 0 auto` (center) + `padding: 0 16px` (mobile).
   On this page sections must be LEFT-aligned at container left + use NO extra padding
   (transparency-container already provides the edge padding). */
.page-transparency .request-list {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  max-width: 768px;
}

/* ─── Desktop (≥1024) ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .page-transparency .transparency-container {
    /* Figma content at x=120 directly → 1200 max-width centered = 120 each side, no inner padding */
    /* Figma eyebrow y=136, header y=0-96 → 40px gap between header bottom and content */
    padding-top: 40px;
    padding-left: 0;
    padding-right: 0;
  }
  .page-transparency .transparency-hero-grid {
    grid-template-columns: 768px 384px;
    gap: 48px;
  }
  .page-transparency .transparency-sections {
    margin-top: 80px;
    padding-bottom: 192px;
  }
}