/* ── About Me ─────────────────────────────────────────────── */
.aboutme-section {
  /* === Typography defaults — overridden by ACF per-instance === */
  --atg-eyebrow-size: 12px;
  --atg-eyebrow-color: var(--primary, #00c3d0);
  --atg-section-title-size: clamp(48px, 7vw, 88px);
  --atg-section-title-plain-color: var(--text-white, #ffffff);
  --atg-subtitle-size: 17px;
  --atg-subtitle-color: var(--text-muted, #8b949e);
  /* (--atg-section-title-accent-color intentionally undeclared —
      accent uses a vertical gradient by default; PHP emits an inline
      override that swaps to solid color when user sets the accent.) */

  position: relative;
  overflow: hidden;
  padding: 120px 0;
}

/* Soft cyan radial glow on the left side of the section */
.aboutme-section.aboutme--glow::before {
  content: "";
  position: absolute;
  width: 661px;
  height: 361px;
  background: #278fb999;
  border-radius: 50%;
  bottom: -10%;
  left: -220px;
  transform: translateY(-50%);
  filter: blur(100px);
  opacity: 0.5;
  pointer-events: none;
}

.aboutme__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}

/* ── Left column ──────────────────────────────────────────── */
.aboutme__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.aboutme__badge {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid rgba(0, 195, 208, 0.35);
  background: rgba(0, 195, 208, 0.06);
  color: var(--atg-eyebrow-color);
  font-family: var(--font-heading, "Inter", system-ui, sans-serif);
  font-size: var(--atg-eyebrow-size);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 28px;
}

/* Headline — vertical white→cyan gradient on the parent */
.aboutme__title {
  margin: 0 0 24px;
  font-family: var(--font-heading, "Inter", system-ui, sans-serif);
  font-size: var(--atg-section-title-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 20.17%, #278fb9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Children inherit the parent's gradient — each needs its own clip */
.aboutme__title-plain,
.aboutme__title-accent {
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aboutme__title-plain {
  color: var(--atg-section-title-plain-color);
}

.aboutme__subtitle {
  margin: 0 0 36px;
  max-width: 480px;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: var(--atg-subtitle-size);
  line-height: 1.65;
  color: var(--atg-subtitle-color);
}

.aboutme__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Scoped button override — dark fill + soft cyan glow */
.aboutme__buttons .wby-btn--outline {
  background: rgba(10, 20, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 10px !important;
  font-weight: 500;
  box-shadow:
    0 0 0 1px rgba(0, 195, 208, 0.08),
    0 8px 32px rgba(0, 195, 208, 0.12);
  transition: all 0.25s ease;
}
.aboutme__buttons .wby-btn--outline:hover {
  background: rgba(0, 195, 208, 0.08);
  border-color: rgba(0, 195, 208, 0.4);
  box-shadow:
    0 0 0 1px rgba(0, 195, 208, 0.2),
    0 8px 40px rgba(0, 195, 208, 0.25);
}

/* ── Right column ─────────────────────────────────────────── */
.aboutme__media {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutme__img-wrap {
  position: relative;
  overflow: visible;
  width: 100%;
  max-width: 520px;
}

.aboutme__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: none;
  border-radius: 0;
  object-fit: cover;
}

.aboutme__img-placeholder {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 480px;
  background: rgba(0, 195, 208, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 80px;
  opacity: 0.5;
}

/* Soft cyan halo behind the photo */
.aboutme__glow {
  content: "";
  position: absolute;
  width: 661px;
  height: 361px;
  background: #278fb999;
  border-radius: 50%;
  bottom: -10%;
  left: 0;
  transform: translateY(-50%);
  filter: blur(100px);
  opacity: 0.5;
  pointer-events: none;
}

/* Grid lines — design shows one cross at bottom-left of the image */
.aboutme__img-wrap .grid-line {
  position: absolute;
  background: linear-gradient(
    90deg,
    #00c3d0 0%,
    #ffffff 16.5%,
    #eaeaea 86.5%,
    #00c3d0 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Vertical arm — sits inside lower portion of image, extends below */
.aboutme__img-wrap .line-v-1 {
  width: 1px;
  left: 0%;
  top: unset;
  bottom: -66px;
  height: 200px;
}

/* Horizontal arm — at image bottom edge, extends past both sides */
.aboutme__img-wrap .line-h-1 {
  height: 1px;
  top: unset;
  left: -50px;
  bottom: -18px;
  width: 300px;
}

/* Hide the other two — design only shows one cross */
.aboutme__img-wrap .line-v-2,
.aboutme__img-wrap .line-h-2 {
  display: none;
}

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .aboutme-section {
    padding: 80px 0;
  }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .aboutme-section {
    --atg-section-title-size: clamp(40px, 6vw, 64px);
  }
  .aboutme__inner {
    gap: 40px;
  }
  .aboutme__img-wrap {
    max-width: 420px;
  }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .aboutme-section {
    --atg-section-title-size: clamp(36px, 9vw, 56px);
    --atg-subtitle-size: 16px;
    padding: 60px 0;
  }
  .aboutme__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .aboutme__subtitle {
    max-width: 100%;
  }
  .aboutme__img-wrap {
    max-width: 100%;
  }
  .aboutme__img-placeholder {
    min-height: 360px;
  }
  .aboutme__img-wrap .line-v-1 {
    bottom: -42px;
  }
  .aboutme__img-wrap .line-h-1 {
    left: -19px;
    right: -40px;
  }
  .aboutme-section.aboutme--glow::before {
    width: 380px;
    height: 380px;
    transform: translate(-40%, -50%);
  }
}