/* resourceInfoPanel widget — companion to availability-calendar.css.
   Class prefix: rip-  (resource info panel). */

.rip-mount {
  --rip-bg: #ffffff;
  --rip-fg: #1f2937;
  --rip-muted: #6b7280;
  --rip-border: #e5e7eb;
  --rip-accent: #2563eb;
  --rip-radius: 8px;
  --rip-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--rip-fg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  /* Neutralise the host theme at the widget boundary.
     SurveyJS's defaultV2.css sets `white-space: nowrap` on `.sd-row__question`,
     an ancestor of every custom component, and white-space INHERITS. Left
     alone it lays long values out on a single line, which the card then clips —
     silently, with no ellipsis (see docs/testing/resource-info-panel-overflow.test.html).
     SurveyJS hits the same trap internally and opts back out on eight of its own
     descendants (.sd-title, .sd-description, .sd-html, .sd-item__control-label, ...);
     this is the widget doing the same thing, once, at its root so every
     descendant inherits a sane value.
     Do NOT delete as redundant — it is load-bearing against the host stylesheet. */
  white-space: normal;
}

.rip-empty,
.rip-loading,
.rip-error {
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--rip-border);
  border-radius: var(--rip-radius);
  color: var(--rip-muted);
  font-size: 0.9rem;
  background: #fafafa;
}

.rip-error {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
  border-style: solid;
}

.rip-card {
  border: 1px solid var(--rip-border);
  border-radius: var(--rip-radius);
  background: var(--rip-bg);
  box-shadow: var(--rip-shadow);
  /* Deliberately NOT `overflow: hidden`. It was only ever here to keep the
     title's background inside the rounded corners (the title now rounds its own
     corners instead), but it doubled as a silent content clipper: it is what
     turned the inherited `nowrap` above into invisible truncation rather than a
     visible overspill. If content ever overflows this card again we want to see
     it, not have it swallowed. */
}

.rip-card-title {
  font-weight: 600;
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--rip-border);
  background: #f9fafb;
  /* Round with the card's inner edge (outer radius minus the 1px border), so
     the grey fill stays inside the corners without `overflow: hidden`. */
  border-radius: calc(var(--rip-radius) - 1px) calc(var(--rip-radius) - 1px) 0 0;
}

.rip-card-body {
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rip-field {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.4;
}

.rip-label {
  flex: 0 0 9rem;
  color: var(--rip-muted);
  font-weight: 500;
}

.rip-value {
  flex: 1 1 auto;
  min-width: 0;
  /* Values are operator-entered free text and can contain an unbroken run with
     no spaces (a long URL, a reserve reference). Break aggressively on
     characters so such a run still wraps instead of widening the row.
     Matches the idiom in availability-calendar.css (.acw-lane-fee-label). */
  word-break: break-word;
  overflow-wrap: anywhere;
}

.rip-link {
  color: var(--rip-accent);
  text-decoration: none;
}

.rip-link:hover {
  text-decoration: underline;
}

.rip-field-images {
  flex-direction: column;
}

.rip-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* These are site plans, not decorative thumbnails: aerial photos with lettered
   areas marked on them, whose whole purpose is to show WHERE on the site an
   activity may take place. A 120x90 `object-fit: cover` crop cut the markers
   off and made the rest unreadable. Show the whole image, at a size someone can
   actually read, and never crop it. */
.rip-photo {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--rip-border);
  background: #f3f4f6;
}

@media (max-width: 640px) {
  .rip-field {
    flex-direction: column;
    gap: 0.15rem;
  }
  .rip-label {
    flex-basis: auto;
  }
  /* `.rip-photo` no longer needs a mobile override — the base rule is already
     `width: 100%; height: auto`, capped by max-width on wider screens. */
}