/* ============================================================
   Atheria Home — Bento Camera Zoom styles
   NOTE: display:grid !important required to override
   Elementor Flexbox Container's display:flex on .e-con.
   ============================================================ */

/* Zero out any Elementor spacing on the bento section wrapper —
   even 1px margin/padding creates a pin-spacer height mismatch → jump */
.ath-home-bento-gallery {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  isolation: isolate;
  padding: 0 !important;
  overflow-x: clip;
}

/* Parent-scoped so specificity beats Elementor's single-class rules */
.ath-home-bento-gallery .ath-home-bento-gallery__stage {
  position: relative;
  width: 100%;
  height: 100vh !important; /* must beat Elementor height:auto */
  overflow: hidden !important; /* CRITICAL: clips tiles that scale out */
}

.ath-home-bento-gallery__grid {
  display: grid !important; /* must beat .e-con { display:flex } */
  position: relative;
  width: 100%;
  height: 100% !important;
  padding: clamp(0.25rem, 0.125rem + 0.4vw, 0.5rem);
  box-sizing: border-box;
  gap: clamp(0.25rem, 0.125rem + 0.4vw, 0.5rem);
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "t1 t2   t3"
    "t1 hero t3"
    "t5 hero t6"
    "t7 t8   t6";
  justify-content: center;
  align-content: center;
}

/* Final layout captured by GSAP Flip — the hero column/rows blow up so the
   hero tile fills the viewport while the others are pushed out and clipped by
   the stage overflow. Flip animates each tile between this and the initial
   state, so every image re-crops (object-fit:cover) and reads as a per-tile
   zoom rather than a flat grid scale. */
.ath-home-bento-gallery__grid.is-final {
  grid-template-columns: 100vw 100vw 100vw;
  grid-template-rows: 50vh 50vh 50vh 50vh;
}

.ath-home-bento-gallery__tile {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem !important;
  background: transparent !important;
  min-width: 0; min-height: 0;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.ath-home-bento-gallery__grid > .ath-home-bento-gallery__tile:nth-child(1) { grid-area: t1; }
.ath-home-bento-gallery__grid > .ath-home-bento-gallery__tile:nth-child(2) { grid-area: t2; }
.ath-home-bento-gallery__grid > .ath-home-bento-gallery__tile:nth-child(3) { grid-area: t3; }
.ath-home-bento-gallery__grid > .ath-home-bento-gallery__tile:nth-child(4) { grid-area: hero; }
.ath-home-bento-gallery__grid > .ath-home-bento-gallery__tile:nth-child(5) { grid-area: t5; }
.ath-home-bento-gallery__grid > .ath-home-bento-gallery__tile:nth-child(6) { grid-area: t6; }
.ath-home-bento-gallery__grid > .ath-home-bento-gallery__tile:nth-child(7) { grid-area: t7; }
.ath-home-bento-gallery__grid > .ath-home-bento-gallery__tile:nth-child(8) { grid-area: t8; }

.ath-home-bento-gallery__grid > .ath-home-bento-gallery__tile[data-ath-hero="true"] { grid-area: hero; }

.ath-home-bento-gallery__tile .elementor-widget-image,
.ath-home-bento-gallery__tile .elementor-widget-image .elementor-widget-container,
.ath-home-bento-gallery__tile .elementor-widget-image figure,
.ath-home-bento-gallery__tile .elementor-widget-image a {
  width: 100%; height: 100%; display: block; margin: 0;
  padding: 0 !important;
  border-radius: 0.5rem !important;
}
.ath-home-bento-gallery__tile img {
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  max-width: none !important;
  margin: -1px 0 0 -1px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0.5rem !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ath-home-bento-gallery__grid { gap: 0.375rem; }
}

@media (max-width: 767px) {
  .ath-home-bento-gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
      "t1   t2"
      "t3   t5"
      "hero hero"
      "t6   t7"
      "t8   t8";
    gap: 0.25rem;
    padding: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ath-home-bento-gallery__grid,
  .ath-home-bento-gallery__grid.is-final {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr 1fr !important;
  }
  .ath-home-bento-gallery__tile { transform: none !important; }
}

/* ── Mobile/Tablet: static grid, no pin, no Flip ── */
@media (max-width: 1024px) {
  .ath-home-bento-gallery .ath-home-bento-gallery__stage {
    height: 100vh !important;
    overflow: hidden !important;
  }
  .ath-home-bento-gallery__grid {
    height: 100% !important;
    transform: none !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr 1fr !important;
    grid-template-areas:
      "t1 t2   t3"
      "t1 hero t3"
      "t5 hero t6"
      "t7 t8   t6" !important;
  }
  .ath-home-bento-gallery__tile {
    transform: none !important;
  }
}

body.elementor-editor-active .ath-home-bento-gallery__grid,
.elementor-editor-active .ath-home-bento-gallery__grid {
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr 1fr 1fr !important;
}
body.elementor-editor-active .ath-home-bento-gallery__tile,
.elementor-editor-active .ath-home-bento-gallery__tile {
  transform: none !important;
}
body.elementor-editor-active .ath-home-bento-gallery .ath-home-bento-gallery__stage,
.elementor-editor-active .ath-home-bento-gallery .ath-home-bento-gallery__stage {
  height: 80vh !important;
}
body.elementor-editor-active .ath-home-bento-gallery,
.elementor-editor-active .ath-home-bento-gallery {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}