/* ==========================================================================
   Tech4TIME — pages/about.css
   Styles for /pages/about/. Mirrors the NextJS about route's structure:
   a hero banner, five alternating image/text sections, the specialties grid,
   the "Why Us?" grid and a closing CTA.
   ========================================================================== */

/* The `.page-hero` banner this page opens with is shared by every inner page,
   so it lives in layout.css rather than here. */

/* --------------------------------------------------------------------------
   1. Section header with the silver rule
   The NextJS source sets an 80x4px accent bar under each heading; here it is
   the silver gradient rather than a flat colour.
   -------------------------------------------------------------------------- */

.about-section__header {
  margin-block-end: var(--space-lg);
}

.about-section__title {
  margin-block-end: var(--space-xs);
  font-size: var(--text-2xl);
}

.about-section__rule {
  width: 5rem;
  height: 4px;
  background-image: var(--silver-gradient-fill);
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   2. Image + text sections
   -------------------------------------------------------------------------- */

.about-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 56.25em) {
  .about-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  /* Alternate which side the artwork sits on. The NextJS source names two
     classes for this but applies its `order` rule to a non-grid child, so the
     alternation never takes effect there; it is implemented properly here. */
  .about-split--reverse .about-split__media {
    order: 2;
  }
}

.about-split__media {
  overflow: hidden;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* The live site's illustrations are square black-and-white line art. They are
   contained rather than cropped — cover would slice the top and bottom off a
   square drawing — inside a 4:3 box so the rows do not become excessively tall.
   The plate stays white in both modes, since the art is dark line work. */
.about-split__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  padding: var(--space-sm);
  background-color: var(--artwork-plate);
}

/* A row whose dark half has been uploaded through the admin gets --dark on
   that half only, which swaps the white plate for a dark one. The pair itself
   is shown and hidden by .theme-swap--light / --dark in layout.css. A row with
   no dark half emits ONE picture with neither class, so nothing here applies to
   it and the rendered result is what it has always been. */
.about-split__image--dark {
  background-color: var(--artwork-plate-dark);
}

/* The Company section shows the wordmark rather than an illustration, so it
   sits on the themed surface instead of a white plate. */
.about-split__image--contain {
  padding: var(--space-xl);
  background-color: var(--bg-surface);
}

.about-split__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.about-split__text > * + * {
  margin-block-start: var(--space-sm);
}

/* --------------------------------------------------------------------------
   3. Specialties
   -------------------------------------------------------------------------- */

/* The no-JavaScript fallback layout for the slideshow: the grid this section
   used to be. slider.js switches the track to a sliding row once it is ready;
   see section 11 of components.css. */
.specialties__slider {
  --slider-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

/* One specialty now has the whole width, which is more width than a paragraph
   should be given: past about 62 characters a line is hard to track back from.
   So the card is two columns — what it is on the left, what it means on the
   right — rather than one column of text with half the card left empty.

   min-height: 100% because every slide is as tall as the tallest, and a card
   that does not fill its slide leaves a gap under it. */
.specialties__slider .specialty-card {
  min-height: 100%;
  padding: var(--space-xl);
}

@media (min-width: 52em) {
  .specialties__slider .specialty-card {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-2xl);
    align-items: start;
  }

  .specialties__slider .specialty-card__icon {
    grid-column: 1;
    grid-row: 1;
  }

  .specialties__slider .specialty-card__title {
    grid-column: 1;
    grid-row: 2;
  }

  .specialties__slider .specialty-card__text {
    grid-column: 2;
    grid-row: 1 / -1;
    max-width: 62ch;
  }
}

.specialty-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  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);
}

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

.specialty-card__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-block-end: var(--space-2xs);
  font-size: 1.5rem;
  color: var(--accent-text);
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  transition:
    color var(--duration) var(--ease-out),
    background-color var(--duration) var(--ease-out);
}

.specialty-card:hover .specialty-card__icon {
  color: var(--on-accent);
  background-image: var(--silver-gradient-fill);
  border-color: transparent;
}

.specialty-card__title {
  font-size: var(--text-lg);
}

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

/* --------------------------------------------------------------------------
   4. Why Us
   -------------------------------------------------------------------------- */

.why-us__grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.why-us-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  transition:
    transform var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.why-us-card:hover {
  transform: translateY(-3px);
  border-color: var(--silver-accent-mid);
  box-shadow: var(--shadow-sm);
}

.why-us-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.125rem;
  color: var(--accent-text);
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.why-us-card__title {
  margin-block-end: var(--space-3xs);
  font-size: var(--text-base);
  font-weight: 650;
}

.why-us-card__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   5. Accreditations
   The wall of certification badges, above the closing CTA. Same shape as the
   client logos on the company profile page — an auto-fit grid of marks on the
   artwork plate — with one difference: the name of the standard can be printed
   under the badge, because "ISO/IEC 27001" is not something a reader
   recognises from a logo the way they recognise a company's.
   -------------------------------------------------------------------------- */

/* FOUR ACROSS A DESKTOP, NOT SEVEN, AND COUNTED RATHER THAN FITTED.

   .clients uses auto-fit with a 10rem minimum and lands six or seven across,
   which is right for a wall of thirty company logos and wrong here: there are
   rarely more than a handful of certifications and each one is meant to be
   read, not scanned past.

   auto-fit cannot express that. The track MINIMUM is the only thing that
   decides the column count, so raising it to get four on a desktop also drags
   the mid-range down to one column -- measured, a 16rem minimum left a single
   tile with 233px of empty row beside it at 580px wide.

   Counting the columns instead fixes both, and a third thing for free: an
   explicit repeat(N, 1fr) creates all N tracks whether or not there are badges
   to fill them, so ONE badge is one track wide rather than the whole row. That
   is what auto-fit's collapsing could not do, and it is why no tile needs a
   max-width any more -- the ceiling this used to carry is gone. */
.accreditations__grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .accreditations__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 64em) {
  .accreditations__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* The plate, then the caption. align-content is START so neither row stretches:
   the outer grid makes every tile in a row the same height, and without this
   the plate would absorb that slack and stop being square the moment one
   caption wrapped to two lines. */
.accreditation {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--space-2xs);
}

/* The plate is --artwork-plate, for the reason .client-card's is: a
   certification mark is somebody else's artwork, usually dark ink on
   transparency, and on the dark theme's elevated surface it would disappear
   rather than merely look wrong. That token is the same value in both themes
   deliberately — see its note in theme.css. */
.accreditation__plate {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  /* A GRID ITEM'S AUTOMATIC MINIMUM SIZE DEFEATS aspect-ratio, and a portrait
     badge is how you find that out. min-height resolves to `auto`, which on a
     grid item means min-content -- so a 120x600 mark made the plate 225x925
     while every square and landscape one stayed 225x225, and the wall grew one
     tile four times the height of its neighbours. Measured, not reasoned:
     tools/check_accreditations.py uploads a portrait badge on purpose.

     With the minimum at 0 the aspect ratio wins, the height is definite, and
     `max-height: 100%` on the mark below finally has something to resolve
     against -- it was indeterminate before, which is why the mark rendered at
     its natural height and pushed the plate open. */
  min-height: 0;
  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);
}

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

/* The mark fills the plate rather than sitting in the middle of it at a fixed
   56px. A certification mark IS the content of this tile -- unlike a client
   logo, which is one of thirty on a wall -- so it gets the whole square minus
   its padding, whatever shape it arrived in. */
.accreditation__logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  /* THE SAME TRAP AS THE PLATE ABOVE, one level down. The mark is itself a grid
     item -- place-items: center makes it one -- so its automatic minimum size is
     its own min-content, which for a replaced element is its intrinsic size. A
     120x600 badge therefore rendered 830px tall INSIDE a 216px plate and spilled
     straight over the caption below it, with max-height: 100% sitting there
     doing nothing. Both minimums have to be released, not just the plate's. */
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

/* The caption sits OUTSIDE the plate, on the page's own ground. On the plate
   it would need ink that reads against #ffffff in both themes — a permanent
   contrast exception for one line of text. Out here it is ordinary themed
   prose and follows the theme like everything else. */
.accreditation__name {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  text-align: center;
}

/* The closing CTA band is the shared `.cta-band` component. */