/*
 * blocks/about-collage/style.css
 * Scoped to .wp-block-neirotti-about-collage
 */


/* ─── Section ────────────────────────────────────────────────────────────── */

.about-collage {
  background-color: var(--color-beige);
  padding:          clamp(4rem, 6vw, 5.5rem) 0;
}


/* ─── Grid ───────────────────────────────────────────────────────────────── */

.about-collage__grid {
  display:             grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap:                 clamp(2rem, 4vw, 4rem);
  align-items:         start;
}


/* ─── Text column ────────────────────────────────────────────────────────── */

.about-collage__text {
  padding-top: 0.4rem;
  min-width:   0; /* prevent grid item from refusing to shrink below content width */
}

.about-collage__eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(139, 38, 53, 0.84);
}

/*
 * Two-class specificity beats .h2 from typography.css —
 * title uses primary (warm dark) instead of the default near-black.
 */
.about-collage .about-collage__title {
  max-width:     19ch;
  color:         var(--color-primary);
  margin-bottom: 1.15rem;
  line-height:   1;
  letter-spacing: -0.04em;
}

/* Body paragraphs — generated by wpautop() */
.about-collage__body {
  max-width: 32rem;
}

.about-collage__body p {
  font-family:   var(--font-sans);
  font-size:     var(--text-base);
  font-weight:   300;
  line-height:   var(--leading-loose);
  color:         var(--color-text);
  text-align:    left;
  margin-bottom: var(--space-md);
}

.about-collage__body p:last-child {
  margin-bottom: 0;
}

/* Keep the long-form philosophy copy comfortably readable on desktop. */
@media (min-width: 769px) {
  .about-collage__body p {
    font-size: 1.125rem;
  }
}


/* ─── Images column ──────────────────────────────────────────────────────── */

.about-collage__images {
  position:     relative;
  min-width:    0;
  aspect-ratio: 4 / 5; /* fixed-height container so images don't overflow the section */
}

/* Shared image base — absolute so we control exact placement */
.about-collage__images .image {
  position:            absolute;
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  background-color:    var(--color-border);
  border-radius:       22px;
}

/* Top image — portrait, anchored to top-right */
.about-collage__images .image--top {
  top:    0;
  right:  0;
  width:  86%;
  height: 62%;
  box-shadow: 0 24px 40px rgba(26, 10, 0, 0.08);
}

/* Bottom image — landscape, anchored to bottom-left, overlaps top image */
.about-collage__images .image--bottom {
  bottom:     0.75rem;
  left:       1.5rem;
  width:      64%;
  height:     38%;
  z-index:    2;
  border-radius: 18px;
  box-shadow: -6px 8px 32px rgba(26, 10, 0, 0.14);
}


/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .about-collage__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-lg);
  }

  /* Images below text on tablet/mobile */
  .about-collage__images {
    order: 1;
  }

  .about-collage__text {
    order: 0;
  }

  /* Tighten the collage on smaller screens */
  .about-collage__images .image--top {
    width:  82%;
    height: 58%;
  }

  .about-collage__images .image--bottom {
    left:   0.8rem;
    width:  64%;
    height: 42%;
  }
}

@media (max-width: 480px) {
  .about-collage {
    padding: var(--space-lg) 0;
  }

  .about-collage__images {
    aspect-ratio: 5 / 4; /* wider than tall on phones since column is full-width */
  }

  .about-collage__images .image--top {
    width:  80%;
    height: 60%;
  }

  .about-collage__images .image--bottom {
    width:  72%;
    height: 52%;
  }
}