/* ABOUTME: About (rólunk) section styles for the home page.
   ABOUTME: Two-row grid layout with text blocks and cross-shaped image cards. */

.about {
  padding: 0;
  overflow: hidden;
}

/* --- Text row --- */

.about__row-text {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  row-gap: 4rem;
  margin-bottom: 0;
}

.about__intro {
  grid-column: 2 / 5;
  grid-row: 1;
  padding: 0 1rem;
  font-family: 'Satoshi', var(--font-secondary);
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 0;
}

.about__mission {
  grid-column: 3 / 6;
  grid-row: 2;
  padding: 0 1rem;
  font-family: 'Satoshi', var(--font-secondary);
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: right;
  margin-bottom: 0;
}

/* --- Scroll reveal lines --- */

.reveal-line {
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-scroll-reveal="left"] .reveal-line {
  transform: translateX(-60px);
}

[data-scroll-reveal="right"] .reveal-line {
  transform: translateX(60px);
}

.reveal-line--left {
  transform: translateX(-60px);
}

.reveal-line--right {
  transform: translateX(60px);
}

.reveal-line.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Labels (black tag style) --- */

.about__label {
  background: var(--color-black);
  color: var(--color-bg);
  font-family: 'Satoshi', var(--font-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  line-height: 1.3;
  width: fit-content;
  height: fit-content;
}

.about__label--no-vpad {
  padding-top: 0;
  padding-bottom: 0;
}

.about__label--location {
  grid-column: 5 / 7;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  padding-right: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* --- Gallery section --- */

.gallery {
  overflow: hidden;
  padding: 2rem 0;
}

/* --- Images row --- */

.about__row-images {
  display: flex;
  justify-content: center;
  gap: 2rem;
  will-change: transform;
  position: relative;
  z-index: 1;
}

/* Pixel cross mask: stepped 1-2-3-4-3-2-1 diamond on a 45×45 viewBox.
   Sharp corners, no rounding. */

.about__card {
  flex: 0 0 auto;
  width: 35vw;
  height: 35vw;
}

.about__card-image {
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81 81'%3E%3Cpolygon points='72 36 72 27 63 27 63 18 54 18 54 9 45 9 45 0 36 0 36 9 27 9 27 18 18 18 18 27 9 27 9 36 0 36 0 45 9 45 9 54 18 54 18 63 27 63 27 72 36 72 36 81 45 81 45 72 54 72 54 63 63 63 63 54 72 54 72 45 81 45 81 36 72 36' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81 81'%3E%3Cpolygon points='72 36 72 27 63 27 63 18 54 18 54 9 45 9 45 0 36 0 36 9 27 9 27 18 18 18 18 27 9 27 9 36 0 36 0 45 9 45 9 54 18 54 18 63 27 63 27 72 36 72 36 81 45 81 45 72 54 72 54 63 63 63 63 54 72 54 72 45 81 45 81 36 72 36' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.about__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.4) saturate(0.8);
}

/* Card labels: stacked lines, positioned between images via negative margin */

.about__card-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  margin-inline: -2em;
  position: relative;
  z-index: 1;
}

.about__card-label:nth-child(4) {
  align-self: flex-end;
}

@media (max-width: 768px) {
  .about__row-text {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }

  .about__intro {
    grid-column: 1;
    grid-row: 1;
  }

  .about__mission {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }

  .about__label--location {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    padding-right: 0;
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .about__card {
    width: 55vw;
    height: 55vw;
  }

  .about__row-images {
    gap: 1rem;
  }

  .about__card-label {
    margin-inline: -1em;
  }
}

@media (max-width: 480px) {
  .about__card {
    width: 65vw;
    height: 65vw;
  }

  .about__intro,
  .about__mission {
    font-size: clamp(1rem, 5vw, 1.6rem);
  }
}