/* Brand block (#brand): larger framed photo + refined matte print look */

.minimal-about-teaser .max-w-6xl {
  max-width: 80rem; /* roomier than 6xl (72rem) */
}

/* Two-column grid: give the photo more weight */
.minimal-about-teaser .max-w-6xl > div > .grid {
  align-items: start;
}

@media (min-width: 768px) {
  .minimal-about-teaser .max-w-6xl > div > .grid {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
    column-gap: 3.5rem;
    row-gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .minimal-about-teaser .max-w-6xl > div > .grid {
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
    column-gap: 4.5rem;
  }
}

@media (min-width: 1280px) {
  .minimal-about-teaser .max-w-6xl > div > .grid {
    grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr);
    column-gap: 5rem;
  }
}

/* Photo frame wrapper — larger on mobile, full column on desktop */
.minimal-about-teaser .group.relative.mx-auto {
  max-width: 30rem; /* was max-w-sm (24rem) */
  width: 100%;
  padding: 0.85rem; /* room for outer terracotta rule */
  box-sizing: border-box;
  transform: none;
}

@media (min-width: 768px) {
  .minimal-about-teaser .group.relative.mx-auto {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 1rem;
  }
}

@media (min-width: 1024px) {
  .minimal-about-teaser .group.relative.mx-auto {
    padding: 1.15rem;
  }
}

/* Sage offset block → thin terracotta outer frame (reference look) */
.minimal-about-teaser .group > .pointer-events-none.absolute {
  inset: 0 !important;
  transform: none !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--salon-accent, #9a3412) 72%, transparent);
  box-shadow: none;
}

/* White matte — slightly deeper, softer presence */
.minimal-about-teaser .group > .relative.bg-white {
  padding: 0.85rem !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 22px 56px rgba(15, 23, 42, 0.1);
}

@media (min-width: 768px) {
  .minimal-about-teaser .group > .relative.bg-white {
    padding: 1.05rem !important;
  }
}

@media (min-width: 1024px) {
  .minimal-about-teaser .group > .relative.bg-white {
    padding: 1.2rem !important;
  }
}

/* Keep 4:5 print; let wider column drive a larger image */
.minimal-about-teaser .group [class*="aspect-"] {
  width: 100%;
}

/*
 * SmartImage variant="fill" used to keep max-h 480/520px. After enlarging the
 * matte, the frame exceeds that cap so object-cover no longer matches the admin
 * 4:5 crop guide. Parent aspect box owns height — remove the cap here.
 */
.minimal-about-teaser .group [class*="aspect-"] img {
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Inner rule slightly softer so it doesn’t compete with the photo */
.minimal-about-teaser .group [class*="inset-"][class*="border"] {
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* Text column sits comfortably beside the taller print */
@media (min-width: 768px) {
  .minimal-about-teaser .max-w-6xl > div > .grid > div:last-child {
    padding-top: 0.35rem;
  }
}