/*
 * Alf Theme — Home Page About Section
 * Figma node: 665:6646
 *
 * Two-column layout: heading + body + CTA on the left,
 * isometric illustration on the right.
 */

/* ═══════════════════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════════════════ */
.about {
  background-color: var(--color-white);
  padding: var(--section-pad-desktop) var(--section-pad-x);
}

/* ═══════════════════════════════════════════════════════════════════
   INNER WRAPPER  — two-column flex row
   ═══════════════════════════════════════════════════════════════════ */
.about__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--section-max-width);
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   LEFT COLUMN — text content
   ═══════════════════════════════════════════════════════════════════ */
.about__content {
  /* Let the text column grow to fill available space while
     keeping the visual a fixed-size column on the right. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Heading ─────────────────────────────────────────────────────── */
.about__heading {
  font-size: var(--font-size-h2);
  /* 36px */
  font-weight: var(--font-weight-semibold);
  /* 600  */
  line-height: 1.2;
  color: var(--color-black);
  margin: 0;
}

/* ── Body paragraphs ─────────────────────────────────────────────── */
.about__body {
  font-size: var(--font-size-body-md);
  /* 16px */
  font-weight: var(--font-weight-light);
  /* 300  */
  line-height: 1.6;
  color: var(--color-black);
  /* max-width: 726px; */
}

.about__body p {
  margin: 0;
}

.about__body p+p {
  margin-top: 1em;
}

/* ── CTA button ──────────────────────────────────────────────────── */
.about__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-primary);
  /* #CD261D */
  color: var(--color-bg);
  /* #F8FAF0 */
  font-size: var(--font-size-body-md);
  /* 16px */
  font-weight: var(--font-weight-regular);
  /* 400  */
  line-height: 1;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  /* 8px  */
  text-decoration: none;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
  align-self: flex-start;
}

.about__btn:hover,
.about__btn:focus-visible {
  background-color: var(--color-primary-dark);
  color: var(--color-bg);
  outline: none;
}

.about__btn-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   RIGHT COLUMN — illustration
   ═══════════════════════════════════════════════════════════════════ */
.about__visual {
  flex-shrink: 0;
  width: 436px;
  height: 398px;
}

.about__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .about__content {
    flex: 1 1 0;
  }

  .about__visual {
    width: 340px;
    height: 310px;
  }
}

@media (max-width: 900px) {
  .about {
    padding: var(--section-pad-tab-portrait) var(--section-pad-tab-portrait);
  }

  .about__inner {
    flex-direction: column;
    gap: 48px;
  }

  .about__content {
    flex: none;
    width: 100%;
  }

  .about__visual {
    width: 100%;
    max-width: 436px;
    height: auto;
    aspect-ratio: 436 / 398;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .about {
    padding: var(--section-pad-mobile) var(--section-pad-mobile);
  }

  .about__heading {
    font-size: var(--font-size-h2-mobile);
    /* 32px */
  }

  .about__content {
    gap: 24px;
  }
}