/* ==========================================================================
   Tech4TIME — pages/home.css
   Styles for the homepage: hero, terminal, stats, services overview, CTA.
   Loaded only by index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) var(--section-padding);
}

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

@media (min-width: 64em) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

.hero__title {
  font-size: var(--text-4xl);
  margin-block-end: var(--space-md);
}

/* The one word carrying the metallic treatment. background-clip: text needs a
   transparent fill; the -webkit- prefix is still required in Safari. */
.hero__accent {
  background-image: var(--silver-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block: 0 var(--space-md);
  padding-block: 0 var(--space-md);
  list-style: none;
  border-block-end: var(--border-width) solid var(--border-subtle);
}

/* Capability badges read louder than the service tags below them. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
}

.hero__badge .icon {
  color: var(--accent-text);
}

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

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   2. Terminal
   A stylised SOC console. Decorative, but its content is real text in the DOM
   rather than an image, so it stays selectable and readable to assistive tech.
   The window is marked aria-hidden and paired with a visually-hidden summary,
   since reading out shell output line by line helps nobody.
   -------------------------------------------------------------------------- */

.terminal {
  overflow: hidden;
  background-color: #0b0b0c;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  background-color: #1d1d20;
  border-block-end: var(--border-width) solid #2a2a2d;
}

.terminal__dots {
  display: flex;
  gap: 0.375rem;
}

.terminal__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: #4a4a4e;
}

.terminal__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #8a8a8e;
}

.terminal__body {
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.66rem + 0.45vw, 0.875rem);
  line-height: 1.7;
  color: #f5f5f6;
  /* Long shell lines scroll inside the window rather than widening the page. */
  overflow-x: auto;
}

/* Every line starts hard against the left edge, and a line too long for the
   window wraps back to column 0 — which is what a real terminal does.
   pre-wrap is what preserves that, but it also renders the source indentation
   of the HTML, so the markup for these lines must carry no leading whitespace
   inside the element. */
.terminal__line {
  white-space: pre-wrap;
  word-break: break-word;
  text-indent: 0;

  /* The fallback sequence, for a visitor with no JavaScript: the lines arrive
     one after another as if the session were running. The real typing is done
     by terminal.js, which switches this off — see the data-typing rules at the
     end of this file. It has to be a script: typing in CSS means clipping the
     text to a width animated in steps, which holds only for one unwrapped line
     of monospace, and these wrap.

     The whole terminal is aria-hidden either way. It is a picture of a
     terminal, not something anyone is waiting to have read to them. */
  animation: terminal-line var(--duration) var(--ease-out) both;
  /* The base wait is what keeps terminal.js from having to fight this. Nothing
     has appeared yet when the deferred script runs, so it can take the session
     over without a line flickering half-faded and being reset. Without
     JavaScript the whole session simply starts four tenths of a second in. */
  animation-delay: calc(var(--terminal-start, 400ms) + var(--i, 0) * 160ms);
}

/* Nine lines, nine steps. Written out the way .soc-map__slot is, because a
   custom property cannot be derived from an element's position in CSS. */
.terminal__line:nth-child(1) { --i: 0; }
.terminal__line:nth-child(2) { --i: 1; }
.terminal__line:nth-child(3) { --i: 2; }
.terminal__line:nth-child(4) { --i: 3; }
.terminal__line:nth-child(5) { --i: 4; }
.terminal__line:nth-child(6) { --i: 5; }
.terminal__line:nth-child(7) { --i: 6; }
.terminal__line:nth-child(8) { --i: 7; }
.terminal__line:nth-child(9) { --i: 8; }

@keyframes terminal-line {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.terminal__prompt {
  margin-inline-end: 0.5em;
  color: #b8babe;
  font-weight: 600;
}

.terminal__command {
  color: #ffffff;
}

/* Command output is not indented — a shell prints it at column 0. The tree
   glyphs in the content carry the hierarchy. */
.terminal__output {
  color: #b4b4b8;
}

/* The palette carries no hue, so status is signalled by weight and a leading
   glyph (which is real text), not by colour — the source site used green/red. */
.terminal__output--success {
  color: #e8e9eb;
  font-weight: 600;
}

.terminal__output--alert {
  color: #ffffff;
  font-weight: 700;
}

/* The block cursor, waiting for the next command. It sits on the last line, so
   its blink starts once that line has arrived — otherwise it blinks away in an
   empty panel while the session is still printing. steps(1) because a cursor
   snaps on and off; fading one in and out reads as a glow, not a terminal. */
.terminal__cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  vertical-align: text-bottom;
  animation: terminal-blink 1.06s steps(1, end) infinite;
  /* When the ninth line has finished: the base wait, its own delay of 8 steps,
     and the time it takes to arrive. */
  animation-delay: calc(var(--terminal-start, 400ms) + 8 * 160ms + var(--duration));
  background-color: #e8e9eb;
}

@keyframes terminal-blink {
  50% {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   3. Capabilities
   Six capability statements. Unlike the metric cards they replaced, these are
   phrases rather than value + label pairs, so the card leads with the icon and
   sets the statement as the only text.
   -------------------------------------------------------------------------- */

/* Three rows of two. Fewer, wider cards give each statement more presence than
   a 3x2 grid did, and let the title sit beside its icon rather than under it. */
.capabilities__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 48em) {
  .capabilities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

.capability-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  min-height: 7.5rem;
  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);
}

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

.capability-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.875rem;
  color: var(--on-accent);
  background-image: var(--silver-gradient-fill);
  border-radius: var(--radius);
  transition: transform var(--duration) var(--ease-out);
}

.capability-card:hover .capability-card__icon {
  transform: scale(1.05);
}

.capability-card__title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

/* Mirror the columns so the icons face the centre of the grid, as in the
   reference layout. Only from the two-column band up — alternating sides in a
   single mobile column would just look unsettled. */
@media (min-width: 48em) {
  .capability-card:nth-child(odd) {
    flex-direction: row-reverse;
  }

  .capability-card:nth-child(odd) .capability-card__title {
    text-align: left;
  }

  .capability-card:nth-child(even) .capability-card__title {
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   4. Services overview
   -------------------------------------------------------------------------- */

.services-overview__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.service-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);
}

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

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

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

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

.service-card__text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.service-card__footer {
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-width) solid var(--border-subtle);
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--accent-text);
  text-decoration: none;
}

.service-card__link:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Nudge the arrow on hover; the whole card is the hover target. */
.service-card__link .icon {
  transition: transform var(--duration) var(--ease-out);
}

.service-card:hover .service-card__link .icon {
  transform: translateX(0.25rem);
}

/* --------------------------------------------------------------------------
   5. Destination cards
   Three routes into the site (About, Services, Company Profile), following the
   current live site's layout: line-art illustration above, a dark panel with
   title, subtitle and action below.

   The whole card is the click target via a stretched pseudo element on the
   link, so the tap area is the full card while the accessible name stays on a
   single real link — no nested-interactive markup, no duplicate tab stops.
   -------------------------------------------------------------------------- */

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

.destination-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  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);
}

.destination-card:hover,
.destination-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--silver-accent-mid);
  box-shadow: var(--shadow-lg);
}

/* The illustrations are black line art on white, so they need a light plate
   under them in both modes; the card body below carries the theme instead. */
.destination-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 800 / 658;
  object-fit: cover;
  background-color: var(--artwork-plate);
  border-block-end: var(--border-width) solid var(--border-subtle);
}

.destination-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  background-color: var(--bg-surface);
}

.destination-card__title {
  font-size: var(--text-xl);
}

.destination-card__text {
  margin-block-end: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.destination-card__action {
  margin-block-start: auto;
  /* .btn is position: relative with overflow: hidden (for the shine sweep),
     which would anchor the stretched pseudo element to the button's own box and
     then clip it. Reset both so it resolves against .destination-card instead. */
  position: static;
  overflow: visible;
}

/* Stretch the link's hit area over the whole card. */
.destination-card__action::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* --------------------------------------------------------------------------
   6. Closing CTA
   -------------------------------------------------------------------------- */

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

.home-cta__panel {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  overflow: hidden;
  text-align: center;
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* A single diagonal silver wash, kept faint so headline contrast is unaffected. */
.home-cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--silver-gradient);
  opacity: 0.07;
  pointer-events: none;
}

.home-cta__inner {
  position: relative;
  max-width: 50rem;
  margin-inline: auto;
}

.home-cta__icon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--space-lg);
  font-size: 2rem;
  color: var(--on-accent);
  background-image: var(--silver-gradient-fill);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.home-cta__title {
  margin-block-end: var(--space-sm);
  font-size: var(--text-3xl);
}

.home-cta__text {
  max-width: 38rem;
  margin: 0 auto var(--space-lg);
  font-size: var(--text-md);
}

/* --------------------------------------------------------------------------
   The typed session

   terminal.js sets data-typing on the panel and takes over: the CSS sequence
   above is switched off, and each line is shown as the script reaches it. A
   command is typed into an emptied element character by character; output
   lines are shown whole, because a shell prints its output, it does not type
   it.
   -------------------------------------------------------------------------- */

[data-typing] .terminal__line {
  animation: none;
  opacity: 0;
  transition: opacity 140ms var(--ease-out);
}

[data-typing] .terminal__line[data-typed="true"] {
  opacity: 1;
}

/* A caret is solid while you are typing with it and blinks when it is waiting,
   so the blink is held back until the session has finished. */
[data-typing] .terminal__cursor {
  animation: none;
}

[data-typing="done"] .terminal__cursor {
  animation: terminal-blink 1.06s steps(1, end) infinite;
  animation-delay: 0s;
}