/* ==========================================================================
   Bohol Ocean Premium Tour - Encounter Section
   Matches design spec from user uploaded media_1789004284718.jpg
   Aligned with site container (.shell)
   ========================================================================== */

.pp-about {
  position: relative !important;
  min-height: 840px !important;
  overflow: hidden !important;
  background-color: #031527 !important;
  background-image: url('/assets/img/experience-encounter-bg.jpg') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: right center !important;
  color: #f8fdff !important;
  padding: clamp(80px, 8vw, 130px) 0 !important;
  display: flex !important;
  align-items: center !important;
  isolation: isolate !important;
}

/* Deep ocean gradient overlay ensuring text & cards have optimal contrast while preserving shark & diver */
.pp-about::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  background:
    linear-gradient(90deg,
      rgba(2, 17, 34, 0.94) 0%,
      rgba(2, 21, 41, 0.88) 32%,
      rgba(3, 27, 52, 0.62) 54%,
      rgba(3, 27, 52, 0.22) 76%,
      rgba(3, 27, 52, 0) 100%
    ),
    linear-gradient(180deg,
      rgba(3, 18, 33, 0.45) 0%,
      transparent 20%,
      transparent 80%,
      rgba(3, 18, 33, 0.55) 100%
    ) !important;
  pointer-events: none !important;
}

.pp-about::after {
  display: none !important;
}

.pp-about__visual,
.pp-about__orbit {
  display: none !important;
}

/* Align container with other sections using .shell */
.pp-about__layout.shell,
.pp-about .shell {
  position: relative !important;
  z-index: 2 !important;
  width: var(--shell) !important;
  max-width: var(--shell) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
  align-items: center !important;
}

.pp-about__container {
  max-width: 580px !important;
  width: 100% !important;
}

/* Eyebrow: — BOHOL OCEAN PREMIUM TOUR */
.pp-about__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.pp-about__eyebrow-line {
  width: 28px;
  height: 2px;
  background-color: #48b8dc;
  border-radius: 2px;
  flex-shrink: 0;
}

.pp-about__eyebrow-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #5ec8eb;
  text-transform: uppercase;
  font-family: Arial, "Helvetica Neue", sans-serif;
}

/* Main Heading: 고요한 한순간, \n 바다보다 큰 기억. */
.pp-about__heading {
  margin: 0 0 24px 0 !important;
  font-size: clamp(38px, 4.3vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.035em !important;
  color: #ffffff !important;
  word-break: keep-all !important;
}

.pp-about__heading-line {
  display: block;
}

/* Description paragraph */
.pp-about__desc {
  margin: 0 0 40px 0 !important;
  max-width: 480px;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #b9daf0 !important;
  word-break: keep-all !important;
}

/* Stat Cards Grid */
.pp-about__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 480px;
  margin-bottom: 42px;
}

/* Frosted Glass Card */
.pp-about__card {
  position: relative;
  background: rgba(6, 32, 58, 0.46);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(80, 185, 225, 0.32);
  border-radius: 20px;
  padding: 24px 20px 22px;
  box-shadow:
    0 16px 36px -10px rgba(0, 15, 35, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.pp-about__card:hover {
  transform: translateY(-3px);
  border-color: rgba(110, 220, 255, 0.55);
  box-shadow:
    0 22px 42px -10px rgba(0, 25, 55, 0.65),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Card Circular Icon Container */
.pp-about__card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(110, 205, 240, 0.42);
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #72dbfc;
  margin-bottom: 16px;
  box-shadow: inset 0 0 8px rgba(90, 200, 240, 0.15);
}

.pp-about__card-icon svg {
  width: 26px;
  height: 26px;
}

/* Card Number with Ocean Sunbeam Gradient */
.pp-about__card-num {
  font-family: Arial, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: clamp(48px, 4.6vw, 62px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 16px;
  background: linear-gradient(175deg, #ffffff 0%, #b2f1ff 24%, #4eccf5 54%, #148ad6 86%, #0d6ab0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.35));
}

/* Card Description */
.pp-about__card-text {
  margin: 0;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #bcdbef !important;
  word-break: keep-all !important;
}

/* Bottom Tagline: — MORE THAN A TOUR \n A DEEPER TOMORROW */
.pp-about__bottom {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pp-about__bottom-line {
  width: 26px;
  height: 1.5px;
  background-color: #3884ab;
  margin-top: 7px;
  flex-shrink: 0;
}

.pp-about__bottom-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pp-about__bottom-copy span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #5593b4;
  text-transform: uppercase;
  font-family: Arial, "Helvetica Neue", sans-serif;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1100px) {
  .pp-about {
    min-height: 760px !important;
    background-position: 75% center !important;
    padding: 70px 0 !important;
  }

  .pp-about__layout.shell,
  .pp-about .shell {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
  }

  .pp-about::before {
    background:
      linear-gradient(90deg,
        rgba(2, 17, 34, 0.95) 0%,
        rgba(2, 21, 41, 0.9) 45%,
        rgba(3, 27, 52, 0.7) 70%,
        rgba(3, 27, 52, 0.35) 100%
      ) !important;
  }

  .pp-about__container {
    max-width: 520px !important;
  }
}

@media (max-width: 860px) {
  .pp-about {
    min-height: auto !important;
    background-position: 68% top !important;
    padding: 60px 0 70px !important;
  }

  .pp-about__layout.shell,
  .pp-about .shell {
    grid-template-columns: 1fr !important;
  }

  .pp-about::before {
    background:
      linear-gradient(180deg,
        rgba(2, 17, 34, 0.82) 0%,
        rgba(2, 19, 38, 0.94) 40%,
        rgba(2, 21, 41, 0.97) 100%
      ) !important;
  }

  .pp-about__container {
    max-width: 100% !important;
  }

  .pp-about__heading {
    font-size: clamp(32px, 8vw, 44px) !important;
    margin-bottom: 18px !important;
  }

  .pp-about__desc {
    max-width: 100%;
    margin-bottom: 30px !important;
    font-size: 15px !important;
  }

  .pp-about__cards {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 100%;
    margin-bottom: 34px;
  }

  .pp-about__card {
    padding: 18px 14px 16px;
    border-radius: 16px;
  }

  .pp-about__card-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
  }

  .pp-about__card-icon svg {
    width: 22px;
    height: 22px;
  }

  .pp-about__card-num {
    font-size: clamp(38px, 9vw, 48px) !important;
    margin-bottom: 10px;
  }

  .pp-about__card-text {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 480px) {
  .pp-about__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pp-about__card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 6px;
    padding: 16px 18px;
  }

  .pp-about__card-icon {
    grid-row: 1;
    grid-column: 1;
    margin-bottom: 0;
  }

  .pp-about__card-num {
    grid-row: 1;
    grid-column: 2;
    margin-bottom: 0;
    font-size: 42px !important;
  }

  .pp-about__card-text {
    grid-row: 2;
    grid-column: 1 / span 2;
  }
}