/* About section wrapper */
.about-section {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("../assets/logos/2 Pink/3x/Pink _ Ball@3x.png"),
    url("../assets/logos/2 Pink/3x/Pink _ Coconut@3x.png"),
    url("../assets/logos/2 Pink/3x/Pink _ Disco@3x.png"),
    url("../assets/logos/2 Pink/3x/Pink _ Guitar@3x.png");
  background-repeat: no-repeat;
  background-size: 170px, 190px, 220px, 170px;
  background-position:
    6% 10%,
    86% 16%,
    52% 90%,
    14% 64%;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

.about-section > * {
  position: relative;
  z-index: 1;
}


/* Logo column */
.about-logo-column {
  display: none;
}

/* The vertical logo itself */
.about-logo-column::before {
  content: "";
  position: sticky;
  top: 1200px; /* stays aligned as user scrolls */
  display: block;
  width: 900px;
  height: 850px;
  background: url("../assets/logos/Horizontal/GLOBELANE_horizontal_red_WEB-1000px.png")
    no-repeat center;
  background-size: contain;
  z-index: -2;
  transform: translateX(-380px) rotate(90deg);
  opacity: 0.7;
  pointer-events: none;
}

/* Main about content grid */
.about-page {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Text wrapper */
.about-wrapper {
  position: relative;
  z-index: 1;
}

.about-images {
  display: grid;
  gap: 16px;
  padding-top: 96px;
}

/* Links */
.about-page a {
  color: var(--globe-charcoal);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.about-page a:hover {
  color: var(--globe-red);
  text-decoration-color: var(--globe-red);
}

.about-images .placeholder {
  min-height: 140px;
}

.about-images-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-images-row .placeholder {
  min-height: 220px;
}

/* Map */
.about-map {
  min-height: 280px;
  height: 300px;
}

.about-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-tile);
  display: block;
}

.about-bottom {
  min-height: 320px;
}

/* Tablet */
@media (width <= 1024px) {
  .about-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-logo-column {
    display: none;
  }

  .about-page {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Mobile */
@media (width <= 640px) {
  .about-page {
    gap: 16px;
  }

  .about-section::before {
    background-size: 130px, 150px, 180px, 130px;
    background-position:
      6% 12%,
      88% 18%,
      50% 92%,
      12% 66%;
    opacity: 0.16;
  }

  .about-images {
    gap: 12px;
    padding-top: 32px;
  }

  .about-images-row {
    grid-template-columns: 1fr;
  }

  .about-images-row .placeholder {
    min-height: 200px;
  }

  .about-map {
    min-height: 220px;
    height: 240px;
  }

  .about-bottom {
    min-height: 220px;
  }
}