/* ============================================================
   GLOBAL GRID + TILE BASE
   ============================================================ */

.rg-wrapper {
  width: 100%;
}

.rg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.32rem;
  transition: all 0.3s ease;
}

/* Tiles */
.rg-tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 0.3rem;
  box-shadow: none !important;
  transition:
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 480ms ease;
}

/* Images */
.rg-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
  border-radius: 0.3rem;
  position: relative;
  transition:
      transform 350ms ease,
      opacity 350ms ease;
}

/* Darken overlay */
.rg-image-darken {
  position: absolute;
  inset: 0;
  background: rgba(70,70,70,0.24);
  pointer-events: none;
}

/* ============================================================
   BLUR-UP
   ============================================================ */

.rg-blur-up {
  filter: blur(18px);
  transform: scale(1.04);
  opacity: 0.65;
}

.rg-blur-up-loaded {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  transition:
      filter 350ms ease,
      opacity 350ms ease,
      transform 350ms ease;
}

/* ============================================================
   IMAGE SLIDE TRANSITIONS
   ============================================================ */

.rg-image.slide-out-left {
  opacity: 0;
  transform: translateX(-18px);
}
.rg-image.slide-out-right {
  opacity: 0;
  transform: translateX(18px);
}
.rg-image.slide-in {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   HOVER ZOOM (desktop only)
   ============================================================ */

@media (hover:hover) and (min-width: 761px) {
  .rg-tile:not(.expanded):not(.no-hover-zoom):hover .rg-image {
    transform: scale(1.025);
    transition: transform 350ms ease;
  }
}

/* ============================================================
   TEXT OVERLAY
   ============================================================ */

.rg-overlay {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.8rem !important;
  z-index: 4;
  pointer-events: none;
}

.rg-title,
.rg-subtitle {
  text-shadow: 0 2px 4px rgba(0,0,0,0.32); /* readability */
}

.rg-title {
  font-family: "Tan Pearl", serif;
  font-size: 2.0rem;
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 0.8rem 0 !important;
  line-height: 1;
}

.rg-subtitle {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1.0rem;
  color: #ffffff;
}

/* ============================================================
   SELECTED TILE OVERLAY SPACING
   ============================================================ */

.rg-tile.expanded .rg-overlay {
  bottom: 3.8rem !important; /* moved higher */
}

/* ============================================================
   GOLD BAR
   ============================================================ */

.rg-gold-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #c0ae74;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.9rem 1.2rem;
  z-index: 5;
  box-sizing: border-box;

  opacity: 0;
  transform: translateY(8px);
  transition:
      opacity 520ms ease,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rg-gold-bar.visible {
  opacity: 1;
  transform: translateY(0);
}

.rg-gold-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rg-gold-title {
  font-family: "Tan Pearl", serif;
  font-size: 1.6rem;
}

.rg-gold-subtitle {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1.0rem;
}

.rg-gold-right {
  display: flex;
  align-items: center;
  gap: 2.2rem; /* NEW */
}

.rg-fact {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem; /* NEW */
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 1.0rem;

  opacity: 0;
  transform: translateY(4px);
  transition:
      opacity 300ms ease,
      transform 300ms ease;
}

.rg-fact.visible {
  opacity: 1;
  transform: translateY(0);
}

.rg-fact img {
  width: 1.6rem;   /* NEW */
  height: 1.6rem;  /* NEW */
}

/* ============================================================
   ARROWS
   ============================================================ */

.rg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  z-index: 6;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.rg-arrow:hover {
  opacity: 1;
}

.rg-arrow-left { left: 0.4rem; }
.rg-arrow-right { right: 0.4rem; }

/* ============================================================
   EXPANDED STATE
   ============================================================ */

.rg-tile.expanded {
  grid-column: span 2;
  grid-row: span 2;
  z-index: 12;
  transform: none !important; /* NO ZOOM */
  transition: all 640ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: rg-lift 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rg-lift {
  0%   { transform: translateY(6px) scale(0.99); opacity: 0.85; }
  45%  { transform: translateY(-2px) scale(1.005); opacity: 1; }
  100% { transform: translateY(0px) scale(1); }
}

.rg-tile.expanded .rg-overlay .rg-subtitle {
  display: none;
}

.rg-tile.no-hover-zoom:hover .rg-image {
  transform: none !important;
}

/* Desktop layout positioning */
.rg-tile.expanded.start-col-1 { grid-column: 1 / span 2; }
.rg-tile.expanded.start-col-2 { grid-column: 2 / span 2; }
.rg-tile.expanded.start-col-3 { grid-column: 2 / span 2; }

/* ============================================================
   GRID REFLOW FADE
   ============================================================ */

.rg-tile.reflow-fade {
  opacity: 0.35;
  transition: opacity 420ms ease;
}

.rg-tile.reflow-fade-done {
  opacity: 1;
  transition: opacity 480ms ease;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {
  .rg-grid {
    grid-template-columns: 1fr;
  }

  .rg-title {
  font-size: 1.6rem !important;
  }

  .rg-tile.expanded {
    grid-column: 1 / -1;
    grid-row: auto;
    transform: none !important;
  }

  .rg-gold-bar {
    position: relative;
    flex-wrap: wrap;
    gap: 1.8rem;
    margin-top: -0.6rem;
  }

  .rg-gold-title {
    font-family: "Tan Pearl", serif;
    font-size: 1.6rem;
    margin-top: 0.8rem;
    margin-bottom: 0.4rem;
  }

  .rg-gold-left,
  .rg-gold-right {
    width: 100%;
  }

  .rg-gold-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
  }

  .rg-overlay {
    bottom: 2.8rem;
  }

  /* place arrows inside the image instead of tile */
  .rg-arrow {
    top: calc(50% - 6rem); /* adjust upward so they sit centered on IMAGE */
    z-index: 20; /* ensure above gold bar */
  }

  .rg-arrow-left { left: 0.6rem; }
  .rg-arrow-right { right: 0.6rem; }

}