/* Sysman About page: hero, "Meet our team" cards and the FAQ accordion, plus the few places where the
   About frames draw a shared component differently. Loaded after css/styles.css.
   Media queries match styles.css: <=1180, <=960, 641-960 (tablet) and <=640 (the 389px phone frame). */

/* ---------- Hero ---------- */

.about-hero {
  padding-block: 64px 40px;
  overflow: hidden;
  background: var(--white);
}

/* 504px text column and 592px photo at 1440 (1216 content = 504 + 120 + 592); both shrink in proportion below that */
.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 504fr) minmax(0, 592fr);
  align-items: center;
  column-gap: 120px;
}

/* The extra 64px at the bottom lifts the text block 32px above the photo's centre line, as in the frame */
.about-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: 64px;
}

.about-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-hero__lead {
  color: var(--grey);
}

.about-hero__media {
  aspect-ratio: 592 / 568.889;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #0d1a1c;
}

.about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Meet our team ---------- */

.team {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-bottom: 40px;
  background: var(--white);
}

.team__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 32px;
}

/* 2px inside stroke in Figma, so the content sits 24px from the outer edge */
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 22px;
  border: 2px solid var(--light-grey);
  border-radius: var(--radius-card);
  background: var(--white);
  text-align: center;
}

.team-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 5/500 */
.team-card__name {
  color: var(--black);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.017em;
}

.team-card__role {
  color: var(--grey);
}

/* Only Amar Anand has a profile link (the user, 2026-09-23). It sits where the design puts each card's icon row,
   centred 24px below the role (the user, 2026-09-24). grid-auto-rows on .team__list gives every card the height of
   his (the design's 164px), so the cards match and the names and roles line up in every row at every width. */
.team-card__social {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 32px icons; the hit area grows to 44px into the 12px gap without overlapping the neighbour */
.team-card__social a {
  position: relative;
  display: block;
  border-radius: 50%;
  transition: opacity 0.15s ease;
}

.team-card__social a::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.team-card__social a:hover {
  opacity: 0.75;
}

.team-card__social img {
  width: 32px;
  height: 32px;
}

/* ---------- FAQs ---------- */

.faq {
  padding-block: 40px;
  background: var(--white);
}

.faq__inner {
  --faq-gap: 48px;
  display: flex;
  flex-direction: column;
  gap: var(--faq-gap);
  max-width: 800px;
  margin-inline: auto;
  padding-block: 64px;
}

.faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 768px;
  margin-inline: auto;
  text-align: center;
}

.faq__header p {
  color: var(--grey);
  text-wrap: balance;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--faq-gap);
}

/* Divider: Figma draws the 2px rule 2px above the midpoint of the gap (46 above, 48 below on desktop) */
.faq__item:not(:last-child) {
  padding-bottom: calc(var(--faq-gap) - 2px);
  border-bottom: 2px solid var(--light-grey);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question-text {
  min-width: 0;
  color: var(--black);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.017em;
}

/* 24px icon centred on the first 28px line */
.faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.faq__item[open] .faq__icon--plus,
.faq__item:not([open]) .faq__icon--minus {
  display: none;
}

.faq__answer {
  margin-top: 24px;
  color: var(--grey);
  /* Google Fonts' Inter sets ~0.3% wider than Figma's; this keeps the frame's line breaks */
  letter-spacing: -0.015em;
}

/* ---------- Shared components as the About desktop frame draws them ---------- */

@media (min-width: 641px) {
  /* Service-card badges have the light fill only, no accent ring */
  .services-grid .badge {
    border-color: transparent;
  }

  /* The CTA description and button label are black here (grey on the homepage and on About mobile). About has no CTA
     since 2026-09-23 (removed at the user's request); kept for when one comes back. */
  .cta__desc,
  .cta .button--light {
    color: var(--black);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .about-hero__inner {
    column-gap: 64px;
  }

  .about-hero__title {
    font-size: 40px;
    line-height: 46px;
  }

  .team__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stacked: the photo comes first and carries the title; the lead and link follow */
@media (max-width: 960px) {
  .about-hero {
    padding-block: 32px;
  }

  .about-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "lead"
      "link";
    align-items: start;
    column-gap: 0;
  }

  .about-hero__text,
  .about-hero__intro {
    display: contents;
  }

  .about-hero__media {
    grid-area: media;
    aspect-ratio: auto;
    height: 480px;
  }

  /* Wraps like the phone title ("Delivering exceptional / solutions to business / worldwide") */
  .about-hero__title {
    position: relative;
    z-index: 1;
    grid-area: media;
    max-width: 440px;
    margin: 32px 32px 0;
    color: var(--white);
    text-wrap: wrap;
  }

  .about-hero__lead {
    grid-area: lead;
    max-width: 640px;
    margin-top: 32px;
  }

  .about-hero__link {
    grid-area: link;
    justify-self: start;
    margin-top: 16px;
  }
}

/* ---------- Phone: the 389px About frame ---------- */

@media (max-width: 640px) {
  /* Hero: a 400px photo card with the 30/36 title inset 21 / 20.75 */
  .about-hero__media {
    height: 400px;
  }

  .about-hero__title {
    max-width: none;
    margin: 20.75px 17px 0 20.5px;
    font-size: 30px;
    line-height: 36px;
  }

  /* Team: 32/54 title; the intro runs 325px wide (inset 32 from the screen edge, not from the gutter) */
  .team {
    gap: 40px;
  }

  .team .section-heading {
    padding-inline: 14px;
  }

  /* Figma sets these titles 32/54. Keep the normal 38px leading and add
     (54 - 38) / 2 = 8px above and below instead: a single line gets the same
     54px box with the glyphs in the same place, and a title that wraps
     (longer copy, narrow phones) keeps tight 38px line spacing. */
  .team .text-title,
  .faq .text-title {
    line-height: 38px;
    padding-block: 8px;
  }

  .team__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* FAQs: full 353px column, 32px rhythm */
  .faq__inner {
    --faq-gap: 32px;
    padding-block: 0;
  }
}