/* ═══════════════════════════════════════════════════
   YAVAPAI-APACHE NATION — Component Library: Marks
   Inline SVG mark presentation (index.html) and the full
   marks.html gallery scaffold (page header, session
   header, mark grid/cell, gallery closing). Both pages
   share .mark-label / .mark-rationale, which is why this
   is one file rather than two.
   Requires: variables.css, base.css
   Split from the original css/components.css (573 ln)
   on 2026-09-01 — see lessons.md "File Size Doctrine".
   Original preserved at docs/archives/components.css.
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   MARK FEATURES — Inline SVG marks within sections
═══════════════════════════════════════════════════ */

/* Single mark, centered */
.mark-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 64px 0;
}

.mark-feature svg {
  width: 240px;
  height: 240px;
  display: block;
  flex-shrink: 0;
}

/* Map variant — larger render for geographic legibility */
.mark-feature--map svg {
  width: 480px;
  height: 480px;
}

.mark-label {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: var(--white-eagle);
  margin-top: 24px;
  opacity: 0.55;
}

.mark-rationale {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15.5px;
  color: var(--canyon-sand);
  line-height: 1.82;
  max-width: 480px;
  margin-top: 12px;
  opacity: 0.72;
}

/* Two marks side by side */
.mark-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 64px 0;
  background: rgba(212, 184, 150, 0.05);
  border: 1px solid rgba(212, 184, 150, 0.05);
}

.mark-pair .mark-feature {
  margin: 0;
  padding: 52px 32px 48px;
  background: #060208;
}

.mark-pair .mark-feature svg {
  width: 200px;
  height: 200px;
}

/* ═══════════════════════════════════════════════════
   MARKS GALLERY — marks.html styles
═══════════════════════════════════════════════════ */

.page-header {
  text-align: center;
  padding: 120px 40px 96px;
  border-bottom: 1px solid rgba(212, 184, 150, 0.06);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(200, 144, 10, 0.07) 0%, transparent 65%);
  pointer-events: none;
}

.page-eyebrow {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--ember-glow);
  opacity: 0.80;                 /* was 0.55; WCAG: 2.65:1→5.8:1 AA at 9px */
  margin-bottom: 30px;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 62px);
  font-weight: 700;
  color: var(--white-eagle);
  letter-spacing: 0.06em;
  line-height: 1.1;
  margin-bottom: 22px;
}

.page-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(15px, 2vw, 19px);
  color: var(--canyon-sand);
  opacity: 0.72;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.72;
}

.header-rule {
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, var(--turquoise-sky), var(--sunray-gold));
  margin: 38px auto 0;
}

/* Session header within gallery */
.session-header {
  max-width: 860px;
  margin: 0 auto;
  padding: 80px 40px 0;
}

.session-eyebrow {
  font-family: var(--font-label);
  font-size: 8.5px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--mesa-dusk);       /* was --sacred-red; WCAG: mesa-dusk at 0.80 → 4.6:1 AA */
  opacity: 0.80;                 /* was 0.55 */
  margin-bottom: 16px;
}

.session-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 600;
  color: var(--white-eagle);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.session-intro {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--canyon-sand);
  line-height: 1.85;
  max-width: 600px;
  opacity: 0.78;
  margin-bottom: 48px;
}

/* Mark cells in gallery grid */
.marks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(212, 184, 150, 0.04);
  border: 1px solid rgba(212, 184, 150, 0.04);
  max-width: 980px;
  margin: 0 auto;
}

.mark-cell {
  background: var(--night-sky);
  padding: 64px 36px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mark-num {
  font-family: var(--font-label);
  font-size: 8px;
  letter-spacing: 0.50em;
  text-transform: uppercase;
  color: var(--sacred-red);
  margin-bottom: 40px;
  opacity: 0.42;
}

.mark-cell .mark-svg-wrap {
  width: 240px;
  height: 240px;
  margin-bottom: 36px;
  flex-shrink: 0;
}

.mark-cell .mark-svg-wrap svg {
  width: 240px;
  height: 240px;
  display: block;
}

/* Gallery section wrapper — marks.html three-council structure */
.gallery-section {
  padding-bottom: 48px;
}

/* Gallery closing block */
.gallery-closing {
  text-align: center;
  padding: 80px 40px;
  border-top: 1px solid rgba(212, 184, 150, 0.06);
}

.gallery-closing-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 22px);
  color: var(--parchment);
  line-height: 1.88;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.88;
}

.gallery-closing-tag {
  margin-top: 32px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ember-glow);
  opacity: 0.80;                 /* was 0.45; WCAG: 2.08:1→5.8:1 AA at 9px */
}

/* ── RESPONSIVE ─────────────────────────────────── */

@media (max-width: 720px) {
  .mark-pair,
  .marks-grid { grid-template-columns: 1fr; }

  .mark-cell { padding: 52px 24px 44px; }
  .mark-cell .mark-svg-wrap,
  .mark-cell .mark-svg-wrap svg { width: 200px; height: 200px; }

  .mark-feature--map svg { width: 100%; height: auto; }

  .session-header { padding: 64px 24px 0; }
}