/* ============================================================
   Styles that are NOT part of the compiled Tailwind stylesheet.

   assets/css/theme.css is generated from src/input.css by build-css.mjs,
   which resolves postcss and @tailwindcss/postcss from the KTX Next.js repo's
   node_modules. That build cannot currently run here, so anything written
   straight into src/input.css would not reach the site. These rules are plain
   CSS with no Tailwind dependency and are enqueued after theme.css, which also
   means they survive a future rebuild untouched.

   Two things live here:
     1. the client-added picture slots (see ktx_extra_media_slots())
     2. one correction to the client logo row
   ============================================================ */

/* ------------------------------------------------------------
   Added picture slots.
   ------------------------------------------------------------ */
.ktx-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
}

.ktx-slot__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ktx-slot__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Size bands, capped on BOTH axes.

   Width-driven with a height ceiling rather than the other way round. The KTX
   logo can be pinned to a height because it is known artwork at a known ratio;
   an added logo is not, and a height cap punishes exactly the marks that can
   least afford it — a wide certification badge carrying three lines of type
   (ISO 9001 / BUREAU VERITAS / Certification) is 2.16:1, so a 44px height cap
   leaves it 95px wide and the type unreadable. Capping width instead lets such
   a mark reach a legible size, while max-height still stops a tall or square
   logo from towering over the row.

   Every value is a clamp(), so each band is a responsive range rather than a
   fixed size, and object-fit keeps any aspect ratio intact within it. */
.ktx-slot__item--small .ktx-slot__img {
  max-width: clamp(84px, 11vw, 116px);
  max-height: 44px;
}

.ktx-slot__item--medium .ktx-slot__img {
  max-width: clamp(120px, 17vw, 172px);
  max-height: 64px;
}

.ktx-slot__item--large .ktx-slot__img {
  max-width: clamp(168px, 25vw, 248px);
  max-height: 96px;
}

/* The plate, for artwork that needs a light ground to be legible on the
   footer's dark green. It changes what the picture sits ON; the picture's own
   colours are untouched.

   White is the one to reach for with a third-party mark: those are drawn for
   white and their brand guidelines generally require it. Cream is the KTX
   logo's own background — parts of that artwork are this colour, and on white
   they read as mismatched grey patches. */
.ktx-slot__plate {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 2px;
}

.ktx-slot__plate--white {
  background: #fff;
}

.ktx-slot__plate--cream {
  background: #fff2cd;
}

/* Header: the bar is a fixed 78px and the nav takes the rest of the width, so
   whatever band was chosen is clamped down here to fit the band. */
.ktx-slot--header-brand {
  gap: 14px;
}

/* As large as a 78px bar can take. The ceiling is the bar, not preference:
   at 52px tall this mark is 112px wide and its smallest line lands at roughly
   a 4.9px cap height, so it reads as a mark rather than as text. Nothing
   short of a taller bar changes that — see the note in the footer block. */
.ktx-slot--header-brand .ktx-slot__img {
  max-width: clamp(84px, 30vw, 130px);
  max-height: 52px;
}

/* Narrow phones. The bar has to hold the lockup (114px), this, and the 46px
   menu button inside a 20px gutter; at 320px that is 271px of the 280px
   available, so the cap comes down rather than pushing the button out. */
@media (max-width: 360px) {
  .ktx-slot--header-brand .ktx-slot__img {
    max-height: 44px;
  }
}

@media (min-width: 1280px) {
  .ktx-slot--header-brand .ktx-slot__img {
    max-width: 150px;
    max-height: 56px;
  }
}

.ktx-slot--header-brand .ktx-slot__plate {
  padding: 4px 7px;
}

/* Footer, on the lockup's own row.

   Height-bounded and width-elastic, which is the opposite of the other slots
   and is right here: the space beside the lockup is whatever the column has
   left over, and that differs between the 1.7fr desktop column and a phone.
   So the slot takes the remainder and the cap is on height, keeping the badge
   in proportion to the lockup it sits next to at every width.

   flex-basis is the wrap threshold, not a size: once the leftover space drops
   below it — around 330px of viewport, where the lockup alone is 152px of a
   280px column — the badge moves to its own line rather than shrinking into
   illegibility beside the logo. */
/* Centred in the leftover space rather than pushed up against the lockup.
   The column always has more width than the pair needs, so left-aligning put
   the badge 16px from the logo with all the slack stranded on the right;
   centring splits that slack and reads as a deliberate pairing. It also
   adapts, which a bigger fixed gap would not: the leftover differs between
   the 1.7fr desktop column and a phone. */
.ktx-slot--footer-logo {
  flex: 1 1 120px;
  min-width: 0;
  justify-content: center;
}

.ktx-slot--footer-logo .ktx-slot__item,
.ktx-slot--footer-logo .ktx-slot__plate {
  min-width: 0;
  max-width: 100%;
}

/* Matched to the lockup rather than to a band.

   footer.php wraps the logo in `px-4 py-3` around `h-[44px] w-auto sm:h-[50px]`,
   so the lockup's box is 44+24 = 68px tall, and 50+24 = 74px from Tailwind's
   sm breakpoint up. Those are the numbers below, and they are what the size
   bands would otherwise fight: this is the one slot where the right size is
   not a choice but a match, so the band is deliberately ignored here.

   Two cases, same outer height either way. Bare, the picture itself takes the
   full 68/74px. Plated, it carries the lockup's own padding and the picture
   drops to the lockup's 44/50px, so the two boxes still line up exactly. */
.ktx-slot--footer-logo .ktx-slot__img {
  max-width: 100%;
  max-height: 68px;
}

.ktx-slot--footer-logo .ktx-slot__plate {
  padding: 12px 16px;
}

.ktx-slot--footer-logo .ktx-slot__plate .ktx-slot__img {
  max-height: 44px;
}

@media (min-width: 640px) {
  .ktx-slot--footer-logo .ktx-slot__img {
    max-height: 74px;
  }

  .ktx-slot--footer-logo .ktx-slot__plate .ktx-slot__img {
    max-height: 50px;
  }
}

/* Footer, left column: sits under the tagline and social row. */
.ktx-slot--footer-brand {
  margin-top: 24px;
}

/* Footer, full-width band above the legal row. Centred, and carrying the same
   hairline rule the legal row uses so the two read as one stacked footer. */
.ktx-slot--footer-strip {
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(22px, 3vw, 32px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* The strip is a band of its own rather than a column, so it can carry more
   than the shared bands allow. These are the same three steps, widened. */
.ktx-slot--footer-strip .ktx-slot__item--small .ktx-slot__img {
  max-width: min(100%, 200px);
  max-height: 92px;
}

.ktx-slot--footer-strip .ktx-slot__item--medium .ktx-slot__img {
  max-width: min(100%, 260px);
  max-height: 120px;
}

.ktx-slot--footer-strip .ktx-slot__item--large .ktx-slot__img {
  max-width: min(100%, 340px);
  max-height: 158px;
}

/* On a phone a lone badge is the whole band, so let it take the full column
   width instead of floating small in the middle of it. Only when it IS alone:
   two or three logos keep their bands and wrap, which is the point of having
   bands at all. */
@media (max-width: 639px) {
  .ktx-slot--footer-strip .ktx-slot__item:only-child {
    width: 100%;
    justify-content: center;
  }

  /* 100% of the column on a phone, where that IS the band; the 390px ceiling
     catches the large-phone end of this range, where an unbounded 100% would
     resolve to a 575px badge taller than the contact block above it. */
  .ktx-slot--footer-strip .ktx-slot__item:only-child .ktx-slot__img,
  .ktx-slot--footer-strip .ktx-slot__item:only-child .ktx-slot__plate {
    max-width: min(100%, 390px);
    max-height: none;
  }
}

/* ------------------------------------------------------------
   Client logo row.

   .client-grid ships as flex-wrap:nowrap with flex:1 1 0 on the items, which
   makes the five logos share one line and compress each other rather than
   wrapping. That is fine at exactly five and degrades badly at six, which is
   now reachable. Equal flex-basis keeps the current five-abreast rendering
   identical while letting a longer row wrap instead of crushing.
   ------------------------------------------------------------ */
.client-grid {
  flex-wrap: wrap;
}

.client-item {
  flex: 1 1 140px;
}