/* ==========================================================================
   Tech4TIME — pages/company-profile.css
   Section order follows the CURRENT LIVE SITE: milestones, then background
   (experience, clients, journey), then professional excellence (technology,
   principles). The NextJS build runs almost the reverse order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Timeline
   The live site's alternated timeline, not the NextJS one: a centre rail with
   entries zig-zagging either side of it, and each entry's year sitting opposite
   its box across the rail.

   The live rule set does this with flex plus order:-1 on even entries; the same
   arrangement is cleaner as a two-column grid, where an entry only has to name
   which column its year and its box belong to. Below the tablet band both
   collapse to the left of the rail, exactly as the live site does at 36rem.
   -------------------------------------------------------------------------- */

.timeline {
  --rail: 1.25rem;              /* where the rail sits, until it moves to 50% */
  --dot: 1.75rem;               /* the marker's distance below the box top    */

  position: relative;
  max-width: 60rem;
  padding: 0;
  margin-inline: auto;
  list-style: none;
}

/* One continuous rail for the whole list, rather than a segment per entry:
   consecutive segments have to meet exactly to look unbroken, and they do not
   once entries differ in height. */
.timeline::before {
  content: "";
  position: absolute;
  top: var(--dot);
  bottom: var(--dot);
  left: var(--rail);
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--border-strong);
}

.timeline__item {
  position: relative;
}

.timeline__item:not(:last-child) {
  margin-block-end: var(--space-lg);
}

.timeline__year {
  margin-block-end: var(--space-2xs);
  margin-inline-start: 3.5rem;
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-text);
}

.timeline__box {
  position: relative;
  margin-inline-start: 3.5rem;
  padding: var(--space-lg);
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.timeline__item:hover .timeline__box {
  border-color: var(--silver-accent-mid);
  box-shadow: var(--shadow-sm);
}

/* The marker, sitting on the rail. Drawn on the box so it tracks the box's
   edge when the entry flips sides.

   The border width in every offset below is not a fudge. An absolutely
   positioned element is laid out against its containing block's PADDING box,
   so an offset of -2.25rem here starts from inside the box's 1px border and
   lands the marker 1px past the rail — to the right on odd entries and,
   mirrored, to the left on even ones. Adding the border back cancels it. */
.timeline__box::after {
  content: "";
  position: absolute;
  top: var(--dot);
  left: calc(-2.25rem - var(--border-width));
  width: 1.1rem;
  height: 1.1rem;
  transform: translate(-50%, -50%);
  background-image: var(--silver-gradient-fill);
  border: 3px solid var(--bg-base);
  border-radius: 50%;
}

.timeline__title {
  margin-block-end: var(--space-3xs);
  font-size: var(--text-lg);
}

.timeline__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* --- alternated, once there is room for two columns ---------------------- */

@media (min-width: 48em) {
  .timeline {
    --rail: 50%;
    --gap: 5rem;                /* the rail runs down the middle of this gap */
  }

  .timeline__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
    align-items: start;
  }

  /* Odd entries: year on the left of the rail, box on the right. */
  .timeline__year,
  .timeline__box {
    grid-row: 1;
    margin-inline-start: 0;
  }

  .timeline__year {
    grid-column: 1;
    justify-self: end;
    /* Lines the year up with the marker rather than the top of the box. */
    padding-block-start: calc(var(--dot) - 0.5em);
    margin-block-end: 0;
    text-align: end;
    font-size: var(--text-xl);
  }

  .timeline__box {
    grid-column: 2;
  }

  .timeline__box::after {
    left: calc(var(--gap) / -2 - var(--border-width));
  }

  /* Even entries: the same row, mirrored. */
  .timeline__item:nth-child(even) .timeline__year {
    grid-column: 2;
    justify-self: start;
    text-align: start;
  }

  .timeline__item:nth-child(even) .timeline__box {
    grid-column: 1;
  }

  .timeline__item:nth-child(even) .timeline__box::after {
    left: auto;
    right: calc(var(--gap) / -2 - var(--border-width));
    transform: translate(50%, -50%);
  }
}

/* --------------------------------------------------------------------------
   2. Background: experience, clients, journey
   -------------------------------------------------------------------------- */

.background__block + .background__block,
.excellence__block + .excellence__block {
  margin-block-start: var(--space-2xl);
}

.background__title {
  margin-block-end: var(--space-md);
  font-size: var(--text-xl);
  text-align: center;
}

.background__lead {
  margin-block-start: calc(var(--space-md) * -1 + var(--space-2xs));
  margin-block-end: var(--space-lg);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--text-secondary);
}

.stats {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

.stat {
  padding: var(--space-lg);
  text-align: center;
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.stat__figure {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1;
  background-image: var(--silver-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.stat__label {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.clients {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

/* The plate is --artwork-plate, not --bg-elevated. Several of these marks are
   dark ink on transparency (Aitken Spence, MGC, CDBL are close to solid
   black), so on the dark theme's elevated surface they did not merely look
   wrong — they vanished into it at about 1.4:1. */
.client-card {
  display: grid;
  place-items: center;
  min-height: 7rem;
  padding: var(--space-md);
  background-color: var(--artwork-plate);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  transition:
    border-color var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}

.client-card:hover {
  transform: translateY(-3px);
  border-color: var(--silver-accent-mid);
}

/* Client marks are supplied in their own colours. Rather than force them to
   greyscale, which would misrepresent someone else's brand, they sit on the
   artwork plate so they read correctly in both themes. */
.client-card__logo {
  width: auto;
  max-width: 100%;
  max-height: 3.5rem;
  object-fit: contain;
}

/* The photographs are a slideshow, and deliberately not a full-width one. Run
   to the width of the band a single picture would be three times the size it
   was in the row, which is not what was asked for — the frame stays as it was
   and the slider is centred inside the band. One number to change if it should
   ever fill the width instead.

   --slider-columns is the layout it falls back to without JavaScript: the row
   it has always been. */
.journey__slider {
  --slider-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  max-width: 30rem;
  margin-inline: auto;
}

.journey__item {
  overflow: hidden;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.journey__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.journey__item:hover .journey__image {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   3. Technology sphere
   Ships as a plain grid. tech-sphere.js adds --on, which is what switches it
   into the 3D arrangement; without scripting, or under prefers-reduced-motion,
   the grid is what stays.
   -------------------------------------------------------------------------- */

.tech-sphere__list {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(6rem, 100%), 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

.tech-sphere__face {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: var(--space-sm);
  background-color: var(--artwork-plate);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: 50%;
}

/* Product marks are other companies' brands, so they keep their own colours;
   the white disc is what makes them legible against either theme. */
.tech-sphere__logo {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- the 3D arrangement, once the script has taken over ------------------ */

.tech-sphere--on {
  /* --sphere-size is measured and set by the script. */
  height: var(--sphere-size, 32rem);
  perspective: 1200px;
  /* Horizontal drags turn the sphere; vertical ones are left to the page, so a
     visitor who starts a scroll on top of the logos still scrolls. */
  touch-action: pan-y;
  /* It can be taken hold of and turned — say so. */
  cursor: grab;
  /* A drag across the logos would otherwise select their alt text, and the
     selection would follow the pointer instead of the sphere. */
  user-select: none;
  -webkit-user-select: none;
}

.tech-sphere--held {
  cursor: grabbing;
}

.tech-sphere--on .tech-sphere__list {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* --rot-x/--rot-y are written once per frame on this element; the items below
     read them through inheritance, so a frame is two property writes rather
     than one per logo. */
  transform: rotateX(var(--rot-x, 0deg)) rotateY(var(--rot-y, 0deg));
}

/* Laid out at twice the size it is shown at, then scaled back down.

   Inside a preserve-3d subtree the browser rasterises each tile once and reuses
   that texture as perspective scales it toward and away from the viewer, so a
   tile rasterised at its display size goes soft the moment it comes forward.
   Rasterising at 2x and scaling down gives it the pixels to stay sharp. The
   scale is last in the list, so it acts on the tile alone and leaves the
   translate3d that positions it on the sphere untouched. */
.tech-sphere--on .tech-sphere__item {
  --tile: 7rem;
  --shown: 0.5;

  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tile);
  height: var(--tile);
  margin: calc(var(--tile) / -2);
  transform-style: preserve-3d;
  /* Out to its point on the sphere, then the parent's rotation undone in
     reverse order so the logo keeps facing the viewer instead of turning
     edge-on as it orbits. */
  transform:
    translate3d(var(--x, 0), var(--y, 0), var(--z, 0))
    rotateY(calc(-1 * var(--rot-y, 0deg)))
    rotateX(calc(-1 * var(--rot-x, 0deg)))
    scale(var(--shown));
}

.tech-sphere--on .tech-sphere__face {
  width: 100%;
  height: 100%;
  padding: 1rem;
  /* Everything here is halved by the scale above, so the hairline is specified
     at 2px to land on one. */
  border-width: 2px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease-out);
}

.tech-sphere--on .tech-sphere__item:hover .tech-sphere__face {
  transform: scale(1.18);
}

/* --------------------------------------------------------------------------
   4. Principles
   -------------------------------------------------------------------------- */

.values {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.value-card {
  padding: var(--space-lg);
  text-align: center;
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition:
    transform var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--silver-accent-mid);
  box-shadow: var(--shadow);
}

.value-card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-inline: auto;
  margin-block-end: var(--space-sm);
  font-size: 1.5rem;
  color: var(--on-accent);
  background-image: var(--silver-gradient-fill);
  border-radius: 50%;
}

.value-card__title {
  margin-block-end: var(--space-3xs);
  font-size: var(--text-lg);
}

.value-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}