/* The photograph that does not exist yet.
 *
 * Deliberately plain and deliberately labelled. It is a commissioning brief
 * sitting in the layout, and it holds the exact space the real photograph will
 * take — so nothing moves when the shot arrives.
 */

.pl-placeholder {
  background: var(--c-placeholder);
  border: var(--rule) solid var(--c-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
}

.pl-placeholder--4x3  { aspect-ratio: 4 / 3; }
.pl-placeholder--16x9 { aspect-ratio: 16 / 9; }
.pl-placeholder--3x2  { aspect-ratio: 3 / 2; }

/* Two more, both from the premium homepage: a portrait for the range cards,
 * where the mechanism is taller than it is wide, and the full-bleed band. */
.pl-placeholder--4x5  { aspect-ratio: 4 / 5; }
.pl-placeholder--21x9 { aspect-ratio: 21 / 9; min-height: 21rem; }

/* A head-and-shoulders portrait on the About page's team cards. */
.pl-placeholder--1x1  { aspect-ratio: 1 / 1; }

.pl-placeholder__caption {
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pl-slate);
}

/* On a dark section the block itself is slate, so the caption needs the
 * lighter ink to stay readable. */
[data-theme="dark"] .pl-placeholder__caption {
  color: var(--pl-paper);
}

/* On water the default slate caption is 3.26:1 against sky — a fail. Navy is
 * 7.82:1 and is what the rest of the type on that ground already uses. */
[data-theme="water"] .pl-placeholder__caption {
  color: var(--pl-navy);
}