/* ==========================================================================
   components.css — buttons, split sections, capability and task lists,
                    cards, chips, specs and the booking calendar
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons — white pill with black label (measured 175 x 47 on the original)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9375rem;
  padding: 0.5rem 1.5625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.03em;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  background: var(--c-brand);
  color: var(--c-inverse);
}

.btn--dark {
  background: var(--c-brand);
  color: var(--c-inverse);
}

.btn--dark:hover,
.btn--dark:focus-visible {
  background: var(--c-accent-text);
  color: var(--c-inverse);
}

/* --------------------------------------------------------------------------
   Media + copy split — a photo beside a block of text
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--block);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 4vw, 5.5rem);
  }

  /* Copy first in the source; this flips the photo to the left visually
     without disturbing reading order. */
  .split--flip .split__media {
    order: -1;
  }
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}

.split__media--tall img {
  aspect-ratio: 3 / 4;
}

/* Lets an image keep its own proportions instead of being cropped to a ratio. */
.split__media--free img {
  aspect-ratio: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Capability grid — the "Everything your agency needs" checklist
   -------------------------------------------------------------------------- */
.capability-grid {
  display: grid;
  gap: 0.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.capability {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-body);
  line-height: 1.4;
}

.section--media .capability {
  border-top-color: var(--c-line-inverse);
}

.capability__check {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.3rem;
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Highlight panels — the two flagship agent capabilities, called out above the
   full task list so they are not lost inside it. Designed for a media section.
   -------------------------------------------------------------------------- */
.highlight-grid {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
  margin-block: var(--block);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.highlight {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.35rem, 1rem + 1.1vw, 2rem);
  border: 1px solid var(--c-line-inverse);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
}

.highlight::before {
  content: '';
  width: 2.25rem;
  height: 2px;
  background: var(--c-accent);
}

.highlight__body {
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.highlight .chip-row {
  margin-top: 0.35rem;
}

/* --------------------------------------------------------------------------
   Task list — what the AI agents do
   -------------------------------------------------------------------------- */
.task-list {
  display: grid;
  gap: 0.65rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.task {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: var(--fs-body);
  line-height: 1.45;
}

.task__marker {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.15rem;
  fill: currentColor;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Benefit cards
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 3px;
}

.card__title {
  text-wrap: balance;
}

/* A cyan rule at the top of each card ties the grid back to the mark. */
.card::before {
  content: '';
  width: 2.25rem;
  height: 2px;
  margin-bottom: 0.35rem;
  background: var(--c-accent);
}

.card__body {
  color: var(--c-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.card__body p + p {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Chips — the industries the platform serves
   -------------------------------------------------------------------------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip {
  padding: 0.45rem 1rem;
  border: 1px solid var(--c-line-inverse);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Spec list — the enterprise platform facts
   -------------------------------------------------------------------------- */
.spec-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 2px solid var(--c-accent);
}

.spec {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-body);
}

@media (min-width: 48rem) {
  .spec-grid {
    column-gap: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Pull quote — a single emphatic line
   -------------------------------------------------------------------------- */
.pull {
  margin-top: var(--block);
  padding-left: clamp(1rem, 0.5rem + 1.2vw, 1.75rem);
  border-left: 2px solid currentColor;
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.3;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Post cards — the blog index grid

   Structure follows the Netcoder blog: a two-up grid of white, rounded,
   shadowed cards that lift on hover, with a fixed-height cover image and
   accent-coloured uppercase meta. Colours come from the Rekruti palette.
   -------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  gap: clamp(1.25rem, 0.75rem + 1.4vw, 1.875rem);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-surface);
  box-shadow: 0 4px 16px rgba(20, 16, 86, 0.08);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(20, 16, 86, 0.16);
}

.post-card__media {
  display: block;
  overflow: hidden;
}

.post-card__media img {
  width: 100%;
  height: 13.125rem;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.post-card:hover .post-card__media img {
  transform: scale(1.04);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.375rem 1.5rem 1.625rem;
}

.post-card__meta {
  margin-bottom: 0.5rem;
  color: var(--c-accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.125em;
  text-transform: uppercase;
}

.post-card__title {
  margin-bottom: 0.625rem;
  font-size: 1.3125rem;
  line-height: 1.3;
  text-wrap: balance;
}

.post-card__title a {
  color: var(--c-heading);
  transition: color 0.2s var(--ease);
}

.post-card:hover .post-card__title a {
  color: var(--c-accent-text);
}

/* The whole card is clickable, but only the title carries the link — so the
   accessible name stays the headline rather than everything inside. */
.post-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.post-card__excerpt {
  margin-bottom: 1.125rem;
  color: var(--c-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: var(--c-accent-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-card__more svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  transition: transform 0.25s var(--ease);
}

.post-card:hover .post-card__more svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Empty state — shown on an index with nothing in it yet
   -------------------------------------------------------------------------- */
.empty-state {
  max-width: 36rem;
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  border: 1px dashed var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
}

.empty-state > * + * {
  margin-top: 0.75rem;
}

/* Scoped to plain paragraphs so it cannot override a heading inside the box. */
.empty-state p {
  color: var(--c-muted);
  font-size: var(--fs-small);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Booking calendar — the Cal.com inline embed on request-a-demo.html
   -------------------------------------------------------------------------- */
.booking__mount {
  width: 100%;
  min-height: 46rem;
  overflow: auto;
}

@media (min-width: 48rem) {
  .booking__mount {
    min-height: 50rem;
    /* Cal.com pads the top of its own iframe, which reads as a gap under the
       intro. Same correction the Netcoder page uses. */
    margin-top: -2.5rem;
  }
}

/* Cal injects its own iframe and sets a min-width on it, which would otherwise
   push the page sideways on narrow screens. */
.booking__mount iframe {
  width: 100% !important;
  max-width: 100%;
  min-width: 0 !important;
  border: 0;
}

/* Shown until the calendar is actually running — see booking.js. */
.booking__placeholder {
  max-width: 34rem;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  border: 1px solid var(--c-line);
  border-radius: 3px;
  background: var(--c-surface-alt);
}

.booking__placeholder > * + * {
  margin-top: 0.75rem;
}

.booking__placeholder a {
  color: var(--c-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.booking__mount[data-cal-state='ready'] .booking__placeholder {
  display: none;
}

/* --------------------------------------------------------------------------
   Chat widget launcher icon

   The widget draws its icon as <i class="fa fa-commenting-o">, a Font Awesome 4
   glyph. This site does not load Font Awesome, so the element collapsed to 0x0
   and the launcher showed as an empty circle. Rather than pull in an entire
   icon font for one glyph, the shape is masked in here — it costs no extra
   request. Drawn to match the fa-commenting-o glyph the Netcoder site
   renders: an oval bubble with a pointed tail and three solid dots.

   `currentColor` means it follows the button's own text colour, so it stays
   correct if data-accent-text-color changes.
   -------------------------------------------------------------------------- */
#nc-chat-button .fa-commenting-o {
  width: 1.75rem;
  height: 1.75rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%203.9c-4.7%200-8.6%202.85-8.6%206.4%200%202%201.2%203.8%203.1%205l-1.9%204.5%205.6-3.25c.6.1%201.2.15%201.8.15%204.7%200%208.6-2.85%208.6-6.4S16.7%203.9%2012%203.9Z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='8.35' cy='10.3' r='1.15'/%3E%3Ccircle cx='12' cy='10.3' r='1.15'/%3E%3Ccircle cx='15.65' cy='10.3' r='1.15'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%203.9c-4.7%200-8.6%202.85-8.6%206.4%200%202%201.2%203.8%203.1%205l-1.9%204.5%205.6-3.25c.6.1%201.2.15%201.8.15%204.7%200%208.6-2.85%208.6-6.4S16.7%203.9%2012%203.9Z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='8.35' cy='10.3' r='1.15'/%3E%3Ccircle cx='12' cy='10.3' r='1.15'/%3E%3Ccircle cx='15.65' cy='10.3' r='1.15'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Chat widget window frame

   data-accent-color drives three things at once in the widget: the launcher
   circle, the window header and the send button. We want the launcher cyan
   (it often sits on a navy section, where navy-on-navy disappears) but the
   window header matching the site menu bar, so the header is pinned back to
   the brand navy here.

   The widget injects its own <style> at runtime, after these files in the
   <head>, so a bare `#nc-chat-header` would lose the document-order tie on
   equal specificity. The `body` prefix wins it.
   -------------------------------------------------------------------------- */
body #nc-chat-header {
  background: var(--c-brand);
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll

   The hidden starting state is applied ONLY when the boot script has confirmed
   that reveal.js is going to run (see the inline <script> in each page head).
   Content must never depend on JavaScript to become visible: if the module
   fails to load — opened over file://, a blocked script — the `js-on` flag
   is never set or is withdrawn, and everything renders normally.
   -------------------------------------------------------------------------- */
.js-on .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js-on .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-on .reveal {
    opacity: 1;
    transform: none;
  }
}