/* =============================================================================
   PHOTOGRAPHY COMPOSITIONS

   Editorial placements for the approved photography set. The photograph is a
   ground, never a container for text: prices, specifications and calls to
   action stay in live HTML beside it. Compositions alternate deliberately so
   that no page repeats one section shape.
   ============================================================================= */

.ph { display: block; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Photographic hero ──────────────────────────────────────────────────
   Wide crop with a soft feathered edge into the page ground on the copy
   side, so the headline never sits on top of a busy part of the picture. */

.phw {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--warm-sub);
  box-shadow: var(--lift-3);
  aspect-ratio: 3 / 2;
}

.phw__img,
.phw__img img { width: 100%; height: 100%; }

/* One grade for the whole set: a slight settle at the foot so the image sits
   on the page. Nothing heavy enough to obscure the subject, and no colour
   painted across the photograph. */
.phw::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(16, 13, 36, .10) 0%, rgba(16, 13, 36, 0) 26%);
}

/* Ellistone is the one darker grade, and it gets there with a little more
   shadow rather than with a different colour. */
.phw--tech::after {
  background: linear-gradient(0deg, rgba(7, 6, 15, .18) 0%, rgba(7, 6, 15, 0) 30%);
}


/* ── Photograph and copy band ───────────────────────────────────────────
   Asymmetric by design: the picture takes more of the grid than the column
   of text, and the two swap sides down the page. */

.band { padding-block: var(--section); }

.band__wrap {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.band--right .band__fig  { order: 2; }
.band--right .band__copy { order: 1; }

.band--nopic .band__wrap { grid-template-columns: minmax(0, 1fr); max-width: 78ch; }

.band__fig {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--warm-sub);
  box-shadow: var(--lift-2);
}

.band__img,
.band__img img { width: 100%; height: auto; }

.band__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 var(--s4);
}

.band__p    { margin: 0 0 var(--s4); color: var(--on-warm-2); max-width: 62ch; }
.band__note { margin: var(--s4) 0 0; font-size: var(--t-small); color: var(--on-warm-3); }

.band__list {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.band__list li { display: flex; gap: var(--s3); align-items: flex-start; }
.band__list svg { flex: none; margin-top: .25em; color: var(--purple); }
.band__list span { color: var(--on-warm); }

.band__cta { margin: var(--s5) 0 0; }

/* Tonal variants. Lavender for the reassuring middle of a page, aubergine
   for the one technical section that earns a dark ground. */

.band--lilac { background: var(--lilac); }
.band--lilac .band__note { color: var(--text-on-lavender); }

.band--ink { background: var(--ink); color: var(--on-ink); }
.band--ink .band__title { color: var(--on-ink); }
.band--ink .band__p     { color: var(--on-ink-2); }
.band--ink .band__note  { color: var(--on-ink-3); }
.band--ink .band__list span { color: var(--on-ink); }
.band--ink .band__list svg  { color: var(--lavender); }
.band--ink .eyebrow--dark   { color: var(--lavender); }
.band--ink .band__fig       { box-shadow: var(--lift-dark); }
.band--ink .arrow           { color: var(--lavender); }

/* ── Full-bleed photographic rule ───────────────────────────────────────
   One per page at most. Breaks the vertical rhythm and gives a long page
   somewhere to breathe. */

.prule { padding-block: var(--section); }

.prule__fig {
  margin: 0;
  position: relative;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prule__img {
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--lift-2);
}

.prule__img img { width: 100%; height: auto; max-height: 46vh; object-fit: cover; }

.prule__cap {
  margin: var(--s4) auto 0;
  max-width: 70ch;
  text-align: center;
  font-size: var(--t-small);
  color: var(--on-warm-3);
}

/* ── Catalogue photography ──────────────────────────────────────────────
   Homepage product cards. The principal three carry a photograph; the
   supporting three are deliberately tighter and text-led, so the catalogue
   reads as a hierarchy rather than six identical tiles. */

.pcard__fig {
  margin: 0;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--warm-sub);
  aspect-ratio: 16 / 10;
}

.pcard__fig .ph,
.pcard__fig .ph img { width: 100%; height: 100%; }

.pcard__fig::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 13, 36, .30) 0%, rgba(16, 13, 36, 0) 42%);
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .band__wrap { grid-template-columns: minmax(0, 1fr); }
  .band--right .band__fig,
  .band--right .band__copy { order: initial; }
  .band__p { max-width: none; }
}

@media (max-width: 760px) {
  .phw { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
  .prule__img img { max-height: 58vh; }
}

@media (prefers-reduced-motion: reduce) {
  .ph, .ph img { transition: none !important; }
}

/* ── Homepage catalogue ─────────────────────────────────────────────────
   Principal three: a photograph carrying the card. Supporting three: a
   narrow photographic strip beside text, so the two rows read as different
   levels of the range rather than six of the same tile. */

.prod__art { aspect-ratio: 16 / 10; background: var(--warm-sub); }
.prod__img,
.prod__img img { width: 100%; height: 100%; }

.mini { grid-template-columns: 148px minmax(0, 1fr); gap: 1.1rem; align-items: start; }

.mini__art {
  width: 148px;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--warm-sub);
}

.mini__img,
.mini__img img { width: 100%; height: 100%; }

@media (max-width: 520px) {
  .mini { grid-template-columns: 104px minmax(0, 1fr); }
  .mini__art { width: 104px; aspect-ratio: 4 / 3; }
}



/* ── Photographic family hero ───────────────────────────────────────────
   The photograph runs full height and bleeds off the right edge of the
   page. The copy column keeps the left. The join is feathered into the
   dark ground so the headline never fights the picture for attention. */

.fhero:has(.phw) { overflow: hidden; }

.fhero:has(.phw) .fhero__wrap {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-right: 0;
  align-items: stretch;
  max-width: none;
  padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}

.fhero:has(.phw) .fhero__copy {
  align-self: center;
  padding-block: clamp(1rem, 2vw, 2rem);
  max-width: 40rem;
}

.fhero__art:has(.phw) {
  position: relative;
  min-height: clamp(22rem, 40vw, 34rem);
  margin-block: calc(clamp(2.25rem, 4vw, 3.5rem) * -1) calc(clamp(2.75rem, 4.5vw, 4rem) * -1);
}

/* The photograph fills the column and carries on past the viewport edge. */
.fhero__art .phw {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

.fhero__art .phw__img,
.fhero__art .phw__img img { width: 100%; height: 100%; object-fit: cover; }

/* Feather the left edge into the hero ground rather than cutting it. */
.fhero__art .phw::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--ink) 0%,
    rgba(16, 13, 36, .55) 5%,
    rgba(16, 13, 36, .10) 15%,
    rgba(16, 13, 36, 0) 26%);
}

.fhero--tech .fhero__art .phw::before {
  background: linear-gradient(90deg,
    var(--black) 0%,
    rgba(7, 6, 15, .60) 5%,
    rgba(7, 6, 15, .14) 16%,
    rgba(7, 6, 15, 0) 28%);
}


@media (max-width: 1100px) {
  .fhero:has(.phw) .fhero__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
}

@media (max-width: 900px) {
  /* Copy first, then the photograph as a full-width band beneath it. */
  .fhero:has(.phw) .fhero__wrap {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--gutter);
    padding-bottom: 0;
  }
  .fhero:has(.phw) .fhero__copy { max-width: none; }
  .fhero__art:has(.phw) {
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: var(--s5) calc(var(--gutter) * -1) 0;
  }
  .fhero__art .phw::before {
    background: linear-gradient(0deg, rgba(16, 13, 36, .5) 0%, rgba(16, 13, 36, 0) 40%),
                linear-gradient(180deg, var(--ink) 0%, rgba(16, 13, 36, 0) 22%);
  }
  .fhero--tech .fhero__art .phw::before {
    background: linear-gradient(0deg, rgba(7, 6, 15, .55) 0%, rgba(7, 6, 15, 0) 42%),
                linear-gradient(180deg, var(--black) 0%, rgba(7, 6, 15, 0) 22%);
  }
}

/* ── Migration process ──────────────────────────────────────────────────
   Six stages read better as two rows of three than as one long strip. */

.page-doc .journey__steps,
.journey__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .journey__steps { grid-template-columns: minmax(0, 1fr); }
}

/* ── Small photographic detail beside a note ────────────────────────────
   Used where a section wants a texture rather than a second scene. */

.note__art { margin: 0; }

.note__pic {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--lift-2);
}

.note__pic img { width: 100%; height: auto; }

/* ── Photographic hero on a light page ──────────────────────────────────
   Domains and Migrations sit on the warm ground rather than the dark one,
   so they take a wide photographic plate instead of the full-bleed
   treatment. No panel is tucked into these: both pages carry their own
   live interface immediately below the hero, and repeating it inside the
   photograph would be the same information shown twice. */



/* An enquiry-led service states how it is priced rather than showing a
   figure it does not have. */
.mini__quote {
  font-style: normal;
  font-weight: 600;
  color: var(--on-warm);
}

/* ── Specification block ────────────────────────────────────────────────
   The replacement for the panels that used to float over the photography.
   Ordinary page furniture: the site's type, the site's border, the site's
   spacing. It never sits on top of an image. */

.spec {
  border: 1px solid var(--warm-line);
  border-radius: var(--r-md);
  background: var(--warm-lift);
  padding: 1.15rem 1.35rem 1.25rem;
}

.spec__title {
  margin: 0 0 .35rem;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple);
}

.spec__list { margin: 0; }

.spec__row {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  justify-content: space-between;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid var(--warm-line);
}

.spec__row:last-child { border-bottom: 0; padding-bottom: 0; }

.spec__row dt { font-size: var(--t-small); color: var(--on-warm-3); }
.spec__row dd { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--on-warm); text-align: right; }

/* On the dark sections the block keeps the same shape and inverts. */
.spec--ink {
  background: rgba(201, 190, 255, .07);
  border-color: var(--ink-line);
}

.spec--ink .spec__title { color: var(--lavender); }
.spec--ink .spec__row   { border-bottom-color: var(--ink-line); }
.spec--ink .spec__row dt { color: var(--on-ink-3); }
.spec--ink .spec__row dd { color: var(--on-ink); }

@media (max-width: 420px) {
  .spec__row { flex-direction: column; gap: .1rem; }
  .spec__row dd { text-align: left; }
}