/* /styles/bhero.css
   AFTERTOUGE — B-HERO (3 full + 30% peek) + taller portrait tiles + drag carousel + label under box
*/

.bhero{
  padding: 26px 0;
  background: #fff;

  /* tweak these if you want */
  --bhero-left: 20px;        /* gap from left side */
  --bhero-gap: 16px;         /* space between tiles */
  --bhero-peek: 0.30;        /* 30% of next tile (handled by 3.3 / 2.3 / 1.3) */
  --bhero-ratio: 3.5 / 4.5;  /* portrait: taller than wide */
}

/* Full width section, fixed left padding */
.bhero > .container{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: var(--bhero-left) !important;
  padding-right: 0 !important; /* lets the “peek” hit the right edge */
}

/* Horizontal “peek” row */
.bhero__grid{
  touch-action: pan-x pan-y;  /* ✅ FIX: allows swipe carousel + vertical scrolling */
  -webkit-overflow-scrolling: touch;

  display: flex;
  gap: var(--bhero-gap);

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;

  scrollbar-width: none;

  cursor: grab;
  user-select: none;
}
.bhero__grid::-webkit-scrollbar{ display: none; }


.bhero__grid.is-dragging{
  cursor: grabbing;
  scroll-snap-type: none; /* stop snapping while dragging */
}

/* Tile sizing:
   Desktop: show 3 full tiles + gaps + 30% of 4th
   Formula: W = 3.3*tile + 3*gap => tile = (W - 3*gap) / 3.3
*/
@media (min-width: 1024px){
  .bhero__tile{
    flex: 0 0 calc((100% - (var(--bhero-gap) * 3)) / 3.3);
  }
}

/* Tablet: 2 full + 30% of 3rd */
@media (min-width: 601px) and (max-width: 1023px){
  .bhero__tile{
    flex: 0 0 calc((100% - (var(--bhero-gap) * 2)) / 2.3);
  }
}

/* Phone: 1 full + 30% of 2nd */
@media (max-width: 600px){
  .bhero__tile{
    flex: 0 0 calc((100% - (var(--bhero-gap) * 1)) / 1.3);
  }
}

/* Tile becomes a vertical stack: [image box] + [label] */
.bhero__tile{
  position: relative;
  width: 100%;
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;

  /* reveal anim */
  transform: translateY(12px);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
}

.bhero__tile.is-inview{
  transform: translateY(0);
  opacity: 1;
}

/* The actual image “box” (keeps the visual size/ratio) */
.bhero__media{
  width: 100%;
  aspect-ratio: var(--bhero-ratio);
  overflow: hidden;
  border-radius: 0 !important;
  background: #f4f4f4;
  border: 1px solid rgba(0,0,0,.10);
}

/* Image fills box */
.bhero__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0 !important;
  transform: scale(1.01);
  transition: transform .45s ease;

  /* keep drag scrolling smooth */
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

@media (hover:hover){
  .bhero__tile:hover .bhero__media img{
    transform: scale(1.06);
  }
}

/* Label under the box */
.bhero__label{
  margin: 12px 0 0;     /* gap from box */
  padding-left: 10px;   /* not too far left */
  padding-right: 6px;

  text-align: left;
  color: #0a0a0a;

  font-family: "Karla","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size: 13px;
  font-weight: 400;     /* premium, not bold */
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.2;
  opacity: .88;

  pointer-events: none; /* drag works even over text */
}
@media (max-width: 600px){
  .bhero__grid{ scroll-snap-type: x proximity; } /* less “sticky” than mandatory */
}
/* ✅ Mobile: always show the 1st + 2nd tile (no hidden until swipe) */
@media (max-width: 600px){
  .bhero__tile:nth-child(-n+2){
    opacity: 1 !important;
    transform: none !important;
  }
}