/* The two case-results pages.
   Boards: "Personal Injury Results", "Immigration Results" and their mobile
   twins. */

.phero--results { background: var(--oxblood-deep); }
.phero--results .phero__photo { opacity: .2; }
.phero--results .phero__wash {
  background: linear-gradient(90deg, rgba(42, 8, 9, .66) 0%, rgba(42, 8, 9, .93) 46%, rgba(42, 8, 9, 1) 64%);
}
.phero--results .phero__mark { left: auto; right: -40px; top: auto; bottom: -40px; width: 380px; height: 380px; opacity: .25; }

/* ---------------------------------------------------------------------------
   The reporting policy, beside the hero copy. The boards put it first on
   purpose: it is the rule the page is published under.
   --------------------------------------------------------------------------- */
.policy {
  background: var(--cream);
  border-radius: 8px;
  padding: clamp(22px, 2.2vw, 30px);
  color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  scroll-margin-top: 110px;
}
.policy__k {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.policy__h {
  margin: 0 0 14px;
  font-family: var(--cond);
  font-size: clamp(26px, 2.08vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.policy dl { margin: 0; display: flex; flex-direction: column; }
.policy dt {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.policy dd { margin: 4px 0 12px; font-size: 15px; line-height: 1.55; color: var(--body); }

/* ---------------------------------------------------------------------------
   The practice tabs over the grid
   --------------------------------------------------------------------------- */
.restabs { display: flex; gap: 10px; flex-wrap: wrap; }
.restabs a {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid var(--border-2);
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}
.restabs a:hover { border-color: var(--red); color: var(--red); }
.restabs a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------------------------------------------------------------------------
   The grid of published results, and the state before any are published
   --------------------------------------------------------------------------- */
.resgrid {
  margin-top: clamp(28px, 3.1vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 24px);
}
.rescard2 {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px, 2.08vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rescard2__type { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.rescard2__amt { margin: 0; font-family: var(--cond); font-size: clamp(34px, 2.8vw, 42px); font-weight: 700; line-height: 1; }
.rescard2__kind { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
/* :where() drops this to (0,0,1) so the amount and kind classes keep their
   own sizes. As a bare descendant it was (0,1,1) and rendered the figure
   at body size - invisible until the grid first had entries to render. */
:where(.rescard2) p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.rescard2__link { margin-top: auto; }

.noresults {
  margin-top: clamp(28px, 3.1vw, 44px);
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: clamp(24px, 2.8vw, 40px);
  max-width: 820px;
}
.noresults__h {
  margin: 0 0 10px;
  font-family: var(--cond);
  font-size: clamp(26px, 2.22vw, 32px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
/* :where() drops this to (0,0,1). As a bare descendant selector it was
   (0,1,1) and out-ranked the component classes below, which sit on <p>
   elements too. */
:where(.noresults) p { margin: 0; font-size: clamp(16px, 1.32vw, 18px); line-height: 1.7; color: var(--body); }
.noresults__acts { margin-top: clamp(20px, 2.1vw, 28px); display: flex; gap: 14px; flex-wrap: wrap; }
.btn--ink {
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn--ink:hover { background: var(--ink-deep); color: #fff; }

/* ---------------------------------------------------------------------------
   The tool or USCIS band, with the service list beside it
   --------------------------------------------------------------------------- */
/* The board puts this band on cream. The tool is a dark card; the service
   links are a two-column grid of cards on the light background, the last one
   inked. */
.restools__in {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(28px, 4.17vw, 60px);
  align-items: start;
}
.restools__tool {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  padding: clamp(26px, 2.8vw, 38px);
}
.restools__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover; opacity: .5;
}
.restools__toolin { position: relative; }
.restools__tool .h-display { color: #fff; }
.restools__p { margin: 16px 0 0; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.7; color: var(--on-dark-3); }
.restools__acts { margin-top: clamp(20px, 2vw, 28px); display: flex; gap: 14px; flex-wrap: wrap; }
.restools__foot {
  margin: clamp(18px, 1.8vw, 24px) 0 0;
  padding-top: clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--line-dark-2);
  font-size: 14px; line-height: 1.6; color: var(--on-dark-2);
}
.restools__foot strong { color: #fff; }
.restools__foot a { color: var(--pink); }
.restools__findp { margin: 14px 0 0; max-width: 560px; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.7; color: var(--body); }
.toolinks {
  margin-top: clamp(20px, 2.1vw, 28px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.toolink {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-weight: 600; font-size: 15px; line-height: 1.35;
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.toolink svg { flex: none; }
.toolink:hover { border-color: var(--red); transform: translateY(-1px); }
.toolink--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.toolink--ink:hover { background: #000; border-color: #000; }
.relinks--dark .is-plain { color: var(--on-dark-2); }

@media (max-width: 1180px) {
  .resgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .restools__in { grid-template-columns: minmax(0, 1fr); }
  .toolinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .resgrid { grid-template-columns: minmax(0, 1fr); }
  .phero--results .phero__photo { height: 300px; opacity: .3; }
  .phero--results .phero__wash {
    background: linear-gradient(180deg, rgba(42, 8, 9, .4) 0%, rgba(42, 8, 9, .92) 60%, rgba(42, 8, 9, 1) 100%);
  }
  .noresults__acts { flex-direction: column; align-items: stretch; }
  .noresults__acts .btn { justify-content: center; }
  .restools__acts { flex-direction: column; align-items: stretch; }
  .restools__acts .btn { justify-content: center; }
  .toolinks { grid-template-columns: minmax(0, 1fr); }
}

/* Case-type filter -------------------------------------------------------- */
.resfilter {
  margin: clamp(22px, 2.4vw, 32px) 0 clamp(18px, 1.9vw, 26px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.resfilter__l {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.resfilter__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.reschip {
  /* 44px tall so the chip is a real tap target on a phone. */
  min-height: 44px;
  padding: 8px 18px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.reschip:hover { border-color: var(--red); }
.reschip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.resfoot {
  margin-top: clamp(14px, 1.5vw, 20px);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.resfoot .disclaimer { margin: 0; }
.resfoot__count { margin: 0; font-size: 13px; color: var(--muted); }
.noresults__none { margin: clamp(18px, 2vw, 26px) 0 0; font-size: 16px; color: var(--muted); }

/* The reviews row had no rule at all, so the cards stacked full width.
   The board runs them three across with the first one inked. */
.revrow {
  margin-top: clamp(22px, 2.4vw, 32px);
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
  align-items: stretch;
}
.revrow .gcard:first-child {
  background: var(--ink);
  border-color: var(--ink);
}
/* :where() keeps these at (0,1,0) so the card class still decides the rest. */
.revrow .gcard:first-child :where(.gcard__name, .gcard__q) { color: #fff; }
.revrow .gcard:first-child :where(.gcard__src) { color: var(--on-dark-2); }

@media (max-width: 1024px) {
  .revrow { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .revrow { grid-template-columns: minmax(0, 1fr); }
  .resfoot { flex-direction: column; align-items: flex-start; gap: 8px; }
}