/* =========================================================
   ALCOTEXA — Dispute Resolution & Membership page
   Page markup uses Tailwind (tw- prefixed) utility classes directly in
   dispute_resolution_page.xml. Only what can't be expressed that way stays
   here: the page's color/font tokens (referenced from the markup via
   tw-*-[var(--dr-*)]), the layered background-image/mask hero and mediation
   media (multiple mask layers + mask-composite aren't reachable through
   Tailwind's arbitrary-value syntax), and the shared scroll-reveal
   animation — see member.css's identical note for why `.reveal` stays a
   plain class (it's also used by the shared footer partial).
   Scoped under .dispute-resolution-page so these tokens/class names never
   leak into the shared navbar/footer or other website pages — see
   about_us.css's note on the shared style.css :root collision.
   ========================================================= */

.dispute-resolution-page{
  --dr-navy:        #0f3055;
  --dr-navy-deep:   #0b2745;
  --dr-green:       #1f4a2c;
  --dr-green-deep:  #1b3f26;
  --dr-gold:        #c09a3e;
  --dr-gold-soft:   #d8b45c;
  --dr-cream:       #f8f5ef;
  --dr-sage:        #e8ede8;
  --dr-card:        #fbfaf6;
  --dr-ink:         #1b2a3a;
  --dr-muted:       #55677a;
  --dr-line:        #e2e0d8;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--dr-ink);
  background: var(--dr-cream);
  font-size: 1rem;
  line-height: 1.7;
}

/* Toggled via html[data-theme="dark"] (navbar button). */
html[data-theme="dark"] .dispute-resolution-page{
  --dr-cream: #0b1220;
  --dr-sage:  #101a2e;
  --dr-card:  #131f38;
  --dr-ink:   #eef2fb;
  --dr-muted: #9aa8bd;
  --dr-line:  rgba(255,255,255,.1);
}

/* ---------- Hero media ---------- */
.dispute-resolution-page .dr-hero__media{
  position:absolute;
  inset: 0 -2% 0% 0%;
  background-color: #efe9df;
  background-image:
    linear-gradient(120deg, rgba(248,245,239,.35), rgba(248,245,239,0) 45%),
    url("../../img/hero-img-light-mode.png");
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 34%),
                      linear-gradient(to top, transparent 0%, #000 16%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(100deg, transparent 0%, #000 34%),
                      linear-gradient(to top, transparent 0%, #000 16%);
          mask-composite: intersect;
}

html[data-theme="dark"] .dispute-resolution-page .dr-hero__media{
  background-color: #0b1220;
  background-image:
    linear-gradient(120deg, rgba(11,18,32,.35), rgba(11,18,32,0) 45%),
    url("../../img/hero-img-dark-mode.png");
}

@media (max-width: 767.98px){
  .dispute-resolution-page .dr-hero__media{
    position: relative;
    inset:auto;
    height: 230px;
    margin: 0 0 1.5rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
}

/* ---------- Mediation media ---------- */
.dispute-resolution-page .dr-mediation__media{
  background-color: #6f7d8c;
  background-image: url("../../img/hero_section.jpg");
  background-size: cover;
  background-position: center;
  z-index: 1;
}

@media (min-width: 992px){
  .dispute-resolution-page .dr-mediation__media{
    position:absolute;
    top:0; right:0; bottom:0;
    width: 52%;
    clip-path: polygon(37% 0, 100% 0, 100% 100%, 0 100%);
  }
}

@media (max-width: 991.98px){
  .dispute-resolution-page .dr-mediation__media{
    position: relative;
    height: clamp(220px, 45vw, 340px);
    margin-top: 2.5rem;
    width: auto;
  }
}

/* ============ SCROLL REVEAL ============
   dispute_resolution.js toggles `.in` via IntersectionObserver as each
   `.reveal` block enters/leaves the viewport, so it re-triggers on scroll
   up and down. Scoped (and overriding `animation`) so it wins over the
   unrelated load-time `.reveal { animation: fadeUp ... }` rule in the
   shared style.css, which would otherwise reveal everything on page load
   regardless of scroll position. */
@media (prefers-reduced-motion: no-preference){
  .dispute-resolution-page .reveal{
    opacity: 0;
    transform: translateY(28px);
    animation: none;
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .dispute-resolution-page .reveal.in{
    opacity: 1;
    transform: translateY(0);
  }

  /* Join cards reveal one at a time instead of all at once. */
  .dispute-resolution-page .dr-join__grid .col:nth-child(1).reveal{ transition-delay: .05s; }
  .dispute-resolution-page .dr-join__grid .col:nth-child(2).reveal{ transition-delay: .17s; }
  .dispute-resolution-page .dr-join__grid .col:nth-child(3).reveal{ transition-delay: .29s; }
  .dispute-resolution-page .dr-join__grid .col:nth-child(4).reveal{ transition-delay: .41s; }
  .dispute-resolution-page .dr-join__grid .col:nth-child(5).reveal{ transition-delay: .53s; }
}