/* ==========================================================================
   Ishwar Jewellers — SECTION 10 · Visit Our Store  (Phase-02, keyframe 10)
   --------------------------------------------------------------------------
   Normal document flow (not a fixed-aspect canvas): the real storefront
   photo settles in first, four light information cards (address / call /
   WhatsApp / hours) follow underneath, then a real embedded Google Map and
   the GET DIRECTIONS CTA. Transforms/opacity only, graceful in reverse.
   ========================================================================== */

.gjv {
  --gjv-gold: #a9853c;
  --gjv-ink: #4a4438;
  position: relative;
  background: #f6f0e4;
  font-family: "Jost", "Segoe UI", system-ui, sans-serif;
}

.gjv::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 64px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(to bottom, #f6f0e4, rgba(246, 240, 228, 0));
}

.gjv__band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fdfaf2 0%, #faf4e8 55%, #f1e6d5 100%);
  padding: clamp(56px, 8vw, 88px) clamp(20px, 5vw, 64px) clamp(48px, 6vw, 72px);
}

.gjv__band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.gjv__band-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------ decorations */
.gjv__orn, .gjv__fol { position: absolute; pointer-events: none; }
.gjv__orn img, .gjv__fol img { width: 100%; height: auto; display: block; }

.gjv__orn--l { left: 0; top: 31.6%; width: 9.6%; }
.gjv__orn--r { left: 85.5%; top: 24.4%; width: 5.7%; }
.gjv__fol--r { right: 0; bottom: 0; width: 14.2%; }

.gjv__orn { opacity: 0.92; transition: opacity 1.4s ease 0.35s; }
.gjv__fol { transition: opacity 1.4s ease 0.5s; }
.js .gjv:not(.is-in) .gjv__orn, .js .gjv:not(.is-in) .gjv__fol { opacity: 0; }

/* ----------------------------------------------------------------- header */
.gjv__head {
  position: relative;
  max-width: 640px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;
  z-index: 3;
}

.gjv__lotus { margin: 0 0 8px; font-size: 20px; color: var(--gjv-gold); line-height: 1; }

.gjv__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #8a6f3a;
}

.gjv__kicker::before, .gjv__kicker::after { content: ""; width: 32px; height: 1px; background: rgba(169, 133, 60, 0.6); }

.gjv__h2 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.06;
  background: linear-gradient(165deg, #c09a48 15%, #9d7a30 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gjv__sub { margin: 0; font-size: clamp(14px, 1.3vw, 17px); color: #6f6046; }

.gjv__sub::after {
  content: "\2014\2009\25c8\2009\2014";
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: rgba(169, 133, 60, 0.7);
}

/* --------------------------------------------------------------- layout
   Three independent floating cards - map, storefront photo, store-detail
   panel - laid out as a staggered trio (photo as the taller centre hero,
   map and details leaning in on either side) rather than the old two-
   column split. Each card idles on its own slow vertical drift and lifts
   further on hover/focus. Collapses to a single stacked column, photo
   first, on tablet and below. */
.gjv__cards {
  position: relative;
  max-width: 1180px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.18fr) minmax(0, 0.84fr);
  align-items: center;
  gap: clamp(26px, 3.4vw, 44px);
  z-index: 2;
}

/* ------------------------------------------------------- floating cards */
.gjv__card {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(255, 253, 248, 0.95), rgba(250, 242, 226, 0.88));
  border: 1px solid rgba(169, 133, 60, 0.28);
  box-shadow: 0 22px 46px rgba(90, 65, 20, 0.14), 0 4px 14px rgba(90, 65, 20, 0.07);
  padding: clamp(20px, 2.2vw, 28px);
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.gjv__card-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gjv-gold);
}

.gjv__card-tag::before { content: "\25c6"; font-size: 9px; color: rgba(169, 133, 60, 0.6); }

/* idle float + lean, offset per card so the trio never moves in sync */
.gjv__card--map, .gjv__card--info {
  --rot: 0deg;
  will-change: transform;
  animation: gjvCardFloat 7.5s ease-in-out infinite;
  transform: translateY(0) rotate(var(--rot));
}

.gjv__card--map { --rot: -1.1deg; animation-delay: 0s; }
.gjv__card--info { --rot: 1.1deg; animation-delay: 1.1s; }

@keyframes gjvCardFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); }
  50% { transform: translateY(-12px) rotate(var(--rot)); }
}

.gjv__card--map:hover, .gjv__card--map:focus-within,
.gjv__card--info:hover, .gjv__card--info:focus-within {
  animation-play-state: paused;
  transform: translateY(-16px) rotate(0deg) scale(1.02);
  z-index: 3;
}

/* .gjv__card--info keeps the boxed .gjv__card background, so its own glow
   grows on hover; .gjv__card--map has no box of its own any more (see the
   map rules below) - the glow there grows on the map tile itself instead. */
.gjv__card--info:hover, .gjv__card--info:focus-within {
  box-shadow: 0 34px 62px rgba(90, 65, 20, 0.2), 0 6px 20px rgba(90, 65, 20, 0.1);
  border-color: rgba(212, 175, 55, 0.55);
}

/* ------------------------------------------------------------- storefront
   The hero card: no boxed frame of its own - the photo just carries its
   own layered drop-shadow + 3D float below - only lifted above the other
   two via margin so it reads as the centrepiece of the trio. Margin (not
   transform) because data-parallax writes a live inline transform onto
   this element every frame - a static transform here would fight it. */
.gjv__card--photo {
  position: relative;
  margin: 0;
  margin-top: clamp(-26px, -2vw, -8px);
  z-index: 2;
  will-change: transform;
}

.gjv__card--photo picture {
  display: block;
  perspective: 1300px;
  transition: opacity 1.3s ease 0.25s, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
  transform-origin: 50% 82%;
}

/* floating 3D photo: tilted on the X axis (~25deg) like it's hanging free
   of the page rather than lying flat against it, with a slow up/down drift
   and a slight in-plane sway so it never feels static. transform-style
   keeps it a real 3D object inside the picture's perspective above, and the
   two stacked drop-shadows (tight + a wide soft one) sell the lift. Lives
   on the img itself - .gjv__card--photo already gets a JS scroll-parallax
   transform written inline every frame, and picture already owns the
   reveal-in transition, so a third, independent transform-owner is needed
   to avoid the two fighting over the same property. */
.gjv__card--photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  filter: drop-shadow(0 20px 22px rgba(95, 66, 20, 0.26)) drop-shadow(0 56px 50px rgba(60, 40, 10, 0.22));
  transform-style: preserve-3d;
  transform-origin: 50% 60%;
  animation: gjvStoreFloat 6.5s ease-in-out infinite;
  transition: transform 0.6s ease;
}

.gjv__card--photo:hover img, .gjv__card--photo:focus-within img {
  animation-play-state: paused;
  transform: rotateX(10deg) rotateY(-4deg) translateY(-10px) scale(1.015);
}

@keyframes gjvStoreFloat {
  0%   { transform: rotateX(25deg) rotateY(-7deg) rotateZ(-1.1deg) translateY(0); }
  50%  { transform: rotateX(19deg) rotateY(-4deg) rotateZ(1.1deg) translateY(-16px); }
  100% { transform: rotateX(25deg) rotateY(-7deg) rotateZ(-1.1deg) translateY(0); }
}

.js .gjv:not(.is-in) .gjv__card--photo picture { opacity: 0; transform: scale(0.93) translateY(3.5%); }

/* ------------------------------------------------------------------- map
   No boxed card wrapper - the tile floats on its own border + shadow,
   directly under the "Find Us" tag, same as the storefront photo does. */
.gjv__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 22px 44px rgba(90, 65, 20, 0.16), 0 4px 14px rgba(90, 65, 20, 0.08);
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

.gjv__card--map:hover .gjv__map, .gjv__card--map:focus-within .gjv__map {
  box-shadow: 0 34px 62px rgba(90, 65, 20, 0.22), 0 6px 20px rgba(90, 65, 20, 0.1);
  border-color: rgba(212, 175, 55, 0.55);
}

.gjv__map iframe { width: 100%; height: 100%; display: block; }

/* -------------------------------------------------------- location pins
   A vertical directory list styled as map markers (teardrop pin shape,
   built from a square with three rounded corners rotated 45deg) rather
   than boxed cards, with a dashed route line threading them together. */
.gjv__pins {
  position: relative;
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
}

.gjv__pins::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 30px;
  bottom: 30px;
  border-left: 1.5px dashed rgba(169, 133, 60, 0.35);
}

.gjv__pin {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.gjv__pin-mark {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 3px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: radial-gradient(circle at 38% 30%, #d9b563, #a9853c);
  box-shadow: 0 8px 16px rgba(150, 110, 50, 0.25);
}

.gjv__pin-mark svg { width: 48%; height: 48%; transform: rotate(45deg); stroke: #2b2113; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.gjv__pin h3 {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gjv-gold);
}

.gjv__pin p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gjv-ink); }
.gjv__pin p a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.gjv__pin p a:hover, .gjv__pin p a:focus-visible { color: var(--gjv-gold); }

/* ---------------------------------------------------------------- direct */
.gjv__dir { position: relative; text-align: center; margin: 0; z-index: 2; }

/* matches the site's standard "Enquire Now" ghost-outline CTA
   (.gjn__cta / .gje__cta / .gjbn__cta / ...): thin gold border, translucent
   cream fill, uppercase wide-tracked label, solid gold fill on hover. */
.gjv__dirbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.8vw;
  padding: clamp(10px, 0.95vw, 16px) clamp(18px, 1.8vw, 30px);
  border: 1px solid rgba(169, 133, 60, 0.75);
  color: var(--gjv-ink);
  background: rgba(255, 252, 244, 0.4);
  text-decoration: none;
  font-size: clamp(10px, 0.82vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.gjv__dirbtn span { font-size: 1.3em; transition: transform 0.35s ease; }
.gjv__dirbtn:hover, .gjv__dirbtn:focus-visible { background: var(--gjv-gold); border-color: var(--gjv-gold); color: #fffcf4; }
.gjv__dirbtn:hover span { transform: translateX(5px); }

/* ------------------------------------------------------------ reveal system */
.js .gjv [data-rv] {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s ease var(--d, 0s), transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}

.js .gjv:not(.is-in) [data-rv] { opacity: 0; transform: translateY(16px); }

/* --------------------------------------------------------------- compact */
@media (max-width: 1023px) {
  .gjv__orn, .gjv__fol { display: none; }
  .gjv__band { padding: 50px clamp(20px, 6vw, 56px) 40px; }

  .gjv__lotus { font-size: 20px; margin-bottom: 8px; }
  .gjv__kicker { font-size: 11px; gap: 12px; margin-bottom: 10px; }
  .gjv__kicker::before, .gjv__kicker::after { width: 28px; }
  .gjv__h2 { font-size: clamp(32px, 8.6vw, 44px); margin-bottom: 8px; }
  .gjv__sub { font-size: clamp(13.5px, 3.7vw, 16px); }
  .gjv__sub::after { font-size: 10px; margin-top: 8px; }

  /* single stacked column, photo first as the hero, then map, then details -
     the idle float/lean reads as clutter once the cards are full-width, so
     it's dropped in favour of a plain hover lift. */
  .gjv__cards { grid-template-columns: 1fr; gap: 28px; }
  .gjv__card--photo { order: -1; margin-top: 0; }
  .gjv__card--map, .gjv__card--info {
    animation: none;
    transform: none;
    --rot: 0deg;
  }
  .gjv__card--map:hover, .gjv__card--map:focus-within,
  .gjv__card--info:hover, .gjv__card--info:focus-within {
    transform: translateY(-8px);
  }
  .gjv__map { aspect-ratio: 16 / 10; }
  .gjv__pin h3 { font-size: 11px; }
  .gjv__pin p { font-size: 13.5px; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .gjv [data-rv],
  .js .gjv .gjv__card--photo picture { transition: opacity 0.6s ease !important; transform: none !important; }
  .gjv__orn, .gjv__fol { transition: none; }
  .gjv__card--map, .gjv__card--info { animation: none !important; transform: none !important; }
  .gjv__card--photo img { animation: none !important; }
}