/* RDA "Connected Advice" design system — base reset & shared primitives. */

.redesign * { box-sizing: border-box; }

.redesign {
  font-family: var(--font-sans);
  color: var(--text-heading);
  background: var(--surface-page);
}

.redesign a { color: var(--text-heading); text-decoration: none; }
.redesign a:hover { color: var(--rda-amber); }

.redesign h1, .redesign h2, .redesign h3, .redesign h4, .redesign p {
  margin: 0;
  text-wrap: pretty;
}

.redesign .page {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
}

/* Image placeholders — every image slot until real photography lands. */
.redesign .ph {
  position: relative;
  overflow: hidden;
  background: var(--rda-navy) repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 30px);
}
.redesign .ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  text-align: center;
  padding: 20px;
}

/* Real photography dropped into a slot that used to be a .ph placeholder —
   fills the same box the placeholder div did (sizing/radius come from
   whatever layout class travels alongside this one), without the
   placeholder texture or label.

   Deliberately NOT setting `height` here. The box height must come from
   whichever component-specific class travels alongside this one (a fixed
   px height, or `position:absolute; inset:0` on a positioned ancestor) —
   this class only sets width. Height:100% here would out-specificity a
   plain `.foo { height: 340px }` scoped component rule (this selector has
   an extra type+class, e.g. 0-2-1 vs 0-2-0), and on a non-absolutely-
   positioned img whose parent's height is auto, height:100% resolves to
   `auto` per spec, so the browser falls back to sizing the image from its
   own intrinsic aspect ratio — silently ballooning it (confirmed: this
   broke both TeamCard photos, 340px intended -> 823px rendered, pushing
   the card's name/bio text far below the fold, and the split-hero photos,
   420px intended -> 623px rendered). Don't reintroduce `height: 100%` (or
   `height: auto`, same trap) here — fix box sizing in the component's own
   scoped class instead. */
.redesign img.photo-fill {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* Square avatar-style headshots (pre-composed with their own circular matte)
   dropped into a wider box — cover would crop straight into the face, so
   these letterbox instead, with the card's own background showing through.
   See photo-fill's comment above — no `height` here either, same reason. */
.redesign img.photo-contain {
  display: block;
  width: 100%;
  object-fit: contain;
  background: var(--rda-white);
}

@media (max-width: 760px) {
  .redesign img { max-width: 100%; }
  .redesign iframe { max-width: 100%; }
}