/* ==========================================================
   GET FADES — about-hero.css (v2: photo ang bida)
   Buong screen ang about.png. Isang malaking linya + isang
   maikling paragraph lang bilang caption. Walang box, walang
   mabigat na dilim sa gitna.
   Ilagay PAGKATAPOS ng style.css sa <head>.
   ========================================================== */

.section.about {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--nav-height) + 2rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  background: var(--color-black);
  color: var(--color-white);
  overflow: hidden;
}

/* Photo: buong section */
.about .about__banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  background: var(--color-black);
  overflow: hidden;
}
.about .about__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform-origin: 50% 60%;
  will-change: transform;
}

/* Gradient sa ILALIM lang, para mabasa ang caption. Malinaw ang taas at gitna. */
.section.about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.82) 0%,
    rgba(10, 10, 10, 0.45) 28%,
    rgba(10, 10, 10, 0) 58%
  );
}

/* Caption */
.about .about__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem var(--gutter);
  align-items: end;
}
.about .about__heading,
.about .about__body { grid-column: 1 / -1; }
.about .about__heading::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: 1.25rem;
  background: var(--color-white);
}
.about .eyebrow { color: var(--color-gray-300); margin-bottom: 1rem; }
.about .section-title {
  color: var(--color-white);
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  text-shadow: 0 2px 24px rgba(10, 10, 10, 0.55);
}
.about .about__body { padding-top: 0; }
.about .about__body p {
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 16px rgba(10, 10, 10, 0.6);
}

/* Desktop/tablet: caption sa KANAN-ibaba, para kita ang GET FADES logo sa bintana (kaliwa) */
@media (min-width: 861px) {
  .about .about__heading { grid-column: 7 / -1; }
  .about .about__body { grid-column: 7 / -1; }
}

/* Mobile */
@media (max-width: 860px) {
  .about .about__banner img { object-position: 50% 15%; }
  .section.about::after {
    background: linear-gradient(
      to top,
      rgba(10, 10, 10, 0.92) 0%,
      rgba(10, 10, 10, 0.6) 40%,
      rgba(10, 10, 10, 0) 75%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .about .about__banner img { transform: none !important; }
}