/* ═══════════════════════════════════════════════════════════════════
   About — Vision, Mission & Core Values (Figma 652:971 / 658:1998)

   Vertical padding here is intentionally NOT .alf-section's rhythm
   (58px desktop / 40px mobile vs. the usual 160/120/80) — only
   .alf-container's horizontal gutter is reused.
   ═══════════════════════════════════════════════════════════════════ */

.about-values {
  background-color: var(--color-dark);
  padding-block: 58px;
}

.about-values__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 53px;
}

/* ── Vision / Mission ────────────────────────────────────────────── */

.about-values__intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  width: 100%;
}

.about-values__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 288px;
  min-width: 288px;
}

.about-values__label {
  font-size: var(--font-size-body-md);
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
  line-height: normal;
}

.about-values__body p {
  color: var(--color-white);
  font-size: var(--font-size-body-md);
  font-weight: 400;
  line-height: normal;
  margin: 0 0 16px;
}

.about-values__body p:last-child {
  margin-bottom: 0;
}

/* ── Background photo + gradient overlay ────────────────────────── */

.about-values__photo {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.about-values__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Set by the ABOUT VALUES ACCORDION script (main.js) to the collapsed
     (no card expanded/hovered) height of .about-values__photo. Without
     this, height: 100% tracks that box's live height — which grows
     whenever a card expands — forcing object-fit: cover to rescale the
     same photo to fill the taller box (visible as the photo "zooming in"
     as the accordion opens). Falls back to 100% before JS measures it. */
  height: var(--about-values-photo-h, 100%);
  object-fit: cover;
  pointer-events: none;
}

.about-values__overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  min-height: 324px;
  padding: 24px 16px;
  background: linear-gradient(0deg, #252525 0%, rgba(37, 37, 37, 0.45) 100%);
}

.about-values__heading {
  font-size: var(--font-size-h4);
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  margin: 0;
  line-height: normal;
}

/* ── Value cards ─────────────────────────────────────────────────── */

.about-values__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Fixed height behavior: align items to top so expanding a card does NOT push/resize the overlay */
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.about-values__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 210px;
  min-width: 210px;
  padding: 16px;
  background-color: var(--color-dark);
  border: 1.271px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.about-values__card:hover,
.about-values__card:focus-within,
.about-values__card.is-expanded {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ── Card Header ─────────────────────────────────────────────────── */

.about-values__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.about-values__card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  /* Allows title to take remaining space without pushing SVG out */
  min-width: 0;
  /* Prevents long text from pushing SVG overflow */
}

.about-values__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Icon SVGs use stroke="currentColor" so this element's `color` recolors them */
.about-values__card-icon-svg {
  display: block;
  width: 20px;
  height: 20px;
}

.about-values__card-title {
  font-size: var(--font-size-body-md);
  font-weight: 600;
  color: var(--color-bg);
  margin: 0;
  line-height: normal;
}

/* ================================================================
   ABOUT VALUES ACCORDION STYLES
   ================================================================ */

/* ── Chevron rotation when card is expanded ──────────────────── */
.about-values__card-chevron {
  display: block;
  flex-shrink: 0;
  color: var(--color-bg);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-values__card.is-expanded .about-values__card-chevron {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .about-values__card:hover .about-values__card-chevron {
    transform: rotate(180deg);
  }
}

/* ── Collapsible Body (Fixes Card Collapse Animation) ───────── */
.about-values__card-body {
  display: block;
  max-height: 0;
  width: 100%;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 0;
}

.about-values__card-desc {
  font-size: var(--font-size-body-md);
  font-weight: 300;
  color: var(--color-bg);
  margin: 0;
  line-height: 1.4;
  padding-top: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: padding-top 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
}

/* Expanded via .is-expanded, which main.js toggles on click/tap and on
   Enter/Space (keyboard) — the single source of truth for all input
   types. Hover is layered on top only for real pointer devices below;
   deliberately NOT :focus-within, since on touch a tap both focuses the
   card and (with no mouseleave to clear it) leaves :hover "stuck" —
   either would fight the JS toggle and make a second tap look like it
   does nothing. */
.about-values__card.is-expanded .about-values__card-body {
  max-height: 240px;
  opacity: 1;
}

.about-values__card.is-expanded .about-values__card-desc {
  padding-top: 12px;
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .about-values__card:hover .about-values__card-body {
    max-height: 240px;
    opacity: 1;
  }

  .about-values__card:hover .about-values__card-desc {
    padding-top: 12px;
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Mobile ──────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .about-values {
    padding-block: 40px;
  }

  .about-values__card {
    flex: 1 1 100%;
  }
}