/**
 * DWiA About Section - Eccentric Circles Design
 * Extracted from dwi_a_about_page_mockup.html
 *
 * This file adds ONLY the eccentric circles and timeline year labels
 * to the About section, with text shifted to the right.
 *
 * @package DWiA Theme
 * @version 1.0.0
 */

/* =========================================
   ABOUT SECTION - HEADER (CENTERED)
========================================== */
.about-header-centered {
  text-align: center;
  margin-bottom: 2rem;
}

/* =========================================
   ABOUT SECTION - CONTENT WRAPPER WITH CIRCLES
========================================== */
.about-content-wrapper {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 40px 72px;
  min-height: 400px;
}

/* =========================================
   ECCENTRIC DOTTED CIRCLES
========================================== */
.dwia-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px dotted #333333;
  pointer-events: none;
  z-index: 1;
}

.dwia-circle-big {
  width: 620px;
  height: 620px;
  left: -200px;
  top: -20px;
}

.dwia-circle-mid {
  width: 360px;
  height: 360px;
  left: -70px;
  top: 110px;
}

.dwia-circle-inner {
  width: 170px;
  height: 170px;
  left: -50px;
  top: 180px;
}

.dwia-circle-left {
  width: 108px;
  height: 108px;
  left: -190px;
  top: 260px;
}

.dwia-circle-tiny {
  width: 108px;
  height: 108px;
  left: -190px;
  top: 260px;
}


/* =========================================
   YEAR LABELS (TIMELINE)
========================================== */
.dwia-year {
  position: absolute;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  z-index: 2;
  pointer-events: none;
}

.dwia-year-2023 {
  left: -160px;
  top: 306px;
}

.dwia-year-2023-24 {
  left: -40px;
  top: 250px;
}

.dwia-year-2025 {
  left: 150px;
  top: 150px;
}

.dwia-year-2027 {
  left: 280px;
  top: 360px;
}

.dwia-year-2030 {
  left: 320px;
  top: 420px;
}

/* =========================================
   ABOUT TEXT (SHIFTED RIGHT)
========================================== */
.about-text-right {
  max-width: 600px;
  margin-left: auto;
  margin-right: 0;
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-size: 10pt !important;
  text-align: left;
}

.dwia-about .about-text-right p {
  margin-bottom: 0.8rem;
  line-height: 1.5;
  text-align: left;
  font-size: 10pt !important;
}

/* =========================================
   RESPONSIVE BEHAVIOR
========================================== */
@media (max-width: 900px) {
  .about-content-wrapper {
    min-height: auto; /* Allow natural height */
    padding: 40px 24px; /* Add top/bottom padding */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .about-text-right {
    max-width: none;
    margin-left: 0;
    margin-top: 0; /* Remove excessive margin */
    padding-top: 280px; /* Increased from 200px to create more space */
  }

  /* Scale down circles - EXACT desktop design, centered and scaled by 0.387 */
  .dwia-circle-big {
    width: 240px;
    height: 240px;
    left: calc(50% - 120px);
    top: -8px;
  }

  .dwia-circle-mid {
    width: 139px;
    height: 139px;
    left: calc(50% - 70px);
    top: 43px;
  }

  .dwia-circle-inner {
    width: 66px;
    height: 66px;
    left: calc(50% - 62px);
    top: 70px;
  }

  .dwia-circle-left {
    width: 42px;
    height: 42px;
    left: calc(50% - 116px);
    top: 101px;
  }

  /* Year labels - EXACT desktop positions, centered and scaled by 0.387 */
  .dwia-year {
    font-size: 12px;
  }

  .dwia-year-2023 {
    left: calc(50% - 105px);
    top: 118px;
  }

  .dwia-year-2023-24 {
    left: calc(50% - 58px);
    top: 97px;
  }

  .dwia-year-2025 {
    left: calc(50% + 15px);
    top: 58px;
  }

  .dwia-year-2027 {
    left: calc(50% + 65px);
    top: 139px;
  }

  .dwia-year-2030 {
    left: calc(50% + 81px);
    top: 163px;
  }
}

@media (max-width: 600px) {
  .about-content-wrapper {
    padding: 30px 16px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .about-text-right {
    margin-top: 0;
    padding-top: 240px; /* Increased from 180px for better spacing */
  }

  /* Scale down circles - EXACT desktop design, centered and scaled by 0.290 */
  .dwia-circle-big {
    width: 180px;
    height: 180px;
    left: calc(50% - 90px);
    top: -6px;
  }

  .dwia-circle-mid {
    width: 104px;
    height: 104px;
    left: calc(50% - 52px);
    top: 32px;
  }

  .dwia-circle-inner {
    width: 49px;
    height: 49px;
    left: calc(50% - 46px);
    top: 52px;
  }

  .dwia-circle-left {
    width: 31px;
    height: 31px;
    left: calc(50% - 87px);
    top: 75px;
  }

  .dwia-year {
    font-size: 10px;
  }

  .dwia-year-2023 {
    left: calc(50% - 78px);
    top: 89px;
  }

  .dwia-year-2023-24 {
    left: calc(50% - 44px);
    top: 73px;
  }

  .dwia-year-2025 {
    left: calc(50% + 12px);
    top: 44px;
  }

  .dwia-year-2027 {
    left: calc(50% + 49px);
    top: 104px;
  }

  .dwia-year-2030 {
    left: calc(50% + 61px);
    top: 122px;
  }
}