/* public/assets/css/promo-slider.css */

/* Container */

.promo-section {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    padding: 60px 0;
    overflow: hidden;
}
.promo-container { max-width: 1200px; margin: 0 auto; }

/* Promo box */
.myPromoBox {
  background: linear-gradient(180deg, rgba(12,38,70,0.04), rgba(12,38,70,0.02));
  padding: 26px;
  border-radius: 14px;
}

/* Header */
.myPromoHeader h2 {
  font-size: 26px;
  margin: 0 0 6px;
  color: #143a63;
}
.myPromoHeader p {
  margin: 0 0 18px;
  color: #5d758a;
}

/* Slider viewport */
.myPromoSlider { position: relative; overflow: hidden; }
.myPromoViewport { overflow: hidden; margin: 0 -8px; } /* negative to show partial edges */
.myPromoTrack {
  display: flex;
  transition: transform 0.55s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

/* Each slide wrapper */
.myPromoSlide {
  flex: 0 0 auto;
  width: calc(33.333% - 16px); /* default 3 items */
  padding: 0 8px;
  box-sizing: border-box;
}

/* Card */
.myPromoCard {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(15, 35, 70, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  cursor: zoom-in;
  position: relative;
}
.myPromoCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transition: transform .45s ease;
}
.myPromoCard:hover img { transform: scale(1.03); }

/* --- New: centered eye overlay (trigger) --- */
.myPromoCard .promo-eye {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* default not clickable until visible */
}
.myPromoCard .promo-eye .eye-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 28px rgba(0,0,0,0.2);
  transform: scale(0.85);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  pointer-events: auto; /* clickable */
  cursor: zoom-in;
}

/* eye icon (SVG path color) */
.myPromoCard .promo-eye .eye-btn svg { width:24px; height:24px; display:block; }

/* show on hover or focus-within */
.myPromoCard:hover .promo-eye .eye-btn,
.myPromoCard:focus-within .promo-eye .eye-btn {
  opacity: 1;
  transform: scale(1);
}

/* Nav */
.myPromoNav {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  gap: 8px;
  z-index: 20;
}
.promo-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(20,58,99,0.95);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(20,58,99,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.promo-nav-btn:hover { transform: scale(1.04); }

/* small screens: 2 items */
@media (max-width: 768px) {
  .myPromoSlide { width: calc(50% - 16px); }
  .myPromoCard { height: 180px; }
  .myPromoNav { right: 8px; }
}

/* extra small: 1 item */
@media (max-width: 480px) {
  .myPromoSlide { width: calc(100% - 16px); padding: 0 8px; }
  .myPromoCard { height: 200px; }
  .myPromoNav { display: none; } /* hide arrows on tiny screens (touch users) */
}

/* Lightbox (modal) - caption removed */
.promo-lightbox {
  position: fixed;
  inset: 0;
  display: none; /* toggled via JS */
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.85);
  z-index: 9999;
  padding: 28px;
}
.promo-lightbox[aria-hidden="false"] { display: flex; }

.promo-lightbox-inner {
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.promo-lightbox-inner img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display:block;
}

/* close / prev / next buttons */
.promo-lightbox-close,
.promo-lightbox-prev,
.promo-lightbox-next {
  position: absolute;
  border: none;
  background: rgba(255,255,255,0.06);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
.promo-lightbox-close { top: 18px; right: 18px; }
.promo-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.promo-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

.promo-lightbox-close:hover,
.promo-lightbox-prev:hover,
.promo-lightbox-next:hover { transform: scale(1.05); }

/* small screen adjustments */
@media (max-width: 768px) {
  .promo-lightbox-prev, .promo-lightbox-next { display: none; }
  .promo-lightbox-close { top: 12px; right: 12px; width:40px; height:40px; font-size:20px; }
}

/* Full-width section trick */
.fullwidth-map-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 30px;
}

/* Wrapper styling */
.fullwidth-map-wrapper {
    width: 100%;
    height: 520px;
    overflow: hidden;
}

/* Responsive Google Map */
.fullwidth-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0; /* change if you want rounded corners */
}