/* Vida Stellaris — landing page stylesheet */

/* Base */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}
body {
  margin: 0;
  background: #fbf8f2;
  color: #2c3018;
  font-family: "Glacial Indifference", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
}

/* Amenity lightbox captions should stay compact and easy to scan. */
.glightbox-container .gslide-description {
  padding: 0 !important;
}
.glightbox-container .gslide-description .gdesc-inner {
  padding: 12px 24px !important;
  text-align: center;
}
.glightbox-container .gslide-title {
  margin: 0 !important;
  font-weight: 700 !important;
  text-align: center;
  /* Same casing as the amenity card titles. */
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
/* On phones GLightbox pins the caption to the bottom of the screen, away from
   the image. Put it back in the flow, directly under the image, styled as on
   desktop (white bar, dark title). */
.glightbox-mobile .glightbox-container .gslide-description {
  position: relative !important;
  flex: 0 0 auto !important;
  max-height: none !important;
  background: #fff !important;
}
.glightbox-mobile .glightbox-container .gslide-title {
  color: #000 !important;
  /* Same size as the amenity card titles. */
  font-size: 12px !important;
}
.glightbox-mobile .glightbox-container .gslide-image img {
  max-height: 80vh;
}
/* Enlarged amenity images carry the same tag as their card; app.js copies the
   text into data-image-tag. */
.glightbox-container .gslide-media[data-image-tag] {
  position: relative;
}
.glightbox-container .gslide-media[data-image-tag]::after {
  content: attr(data-image-tag);
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* "Click to enlarge" hint that fades in over an amenity image on hover. */
.amenity-lightbox {
  position: relative;
}
.amenity-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(44, 48, 24, 0.38);
  color: #f4efe5;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.amenity-lightbox:hover .amenity-zoom,
.amenity-lightbox:focus-visible .amenity-zoom {
  opacity: 1;
}
@media (hover: none) {
  .amenity-zoom {
    display: none;
  }
}

/* The overlays (mobile nav, enquiry modal, lightbox) carry an inline
   display:flex, which outranks the user-agent's [hidden]{display:none}. Without
   !important here they are all visible on page load. */
[hidden] {
  display: none !important;
}
a {
  color: #8a6f3f;
  text-decoration: none;
  transition: color 0.3s;
}
a:hover {
  color: #c0a172;
}
::selection {
  background: rgba(192, 161, 114, 0.32);
}
:focus-visible {
  outline: 2px solid #c0a172;
  outline-offset: 3px;
}

/* Header: at the top of the page it sits in the flow as a beige bar with dark
   text; once scrolled past, app.js sets data-hdr-fixed and it pins to the top
   as the dark olive bar with light text. */
[data-hdr] {
  position: relative;
  padding: 10px clamp(20px, 6vw, 96px);
  background: #ece3d1;
  border-bottom: 1px solid rgba(192, 161, 114, 0.35);
}
[data-hdr] [data-navlink] {
  color: #3d4222;
}
[data-hdr] [data-burger] {
  background: #3d4222;
}
/* The logo artwork is cream; darken it for the beige bar. */
[data-hdr] [data-brand] {
  filter: brightness(0.3);
}
[data-hdr][data-hdr-fixed] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 6px clamp(20px, 6vw, 96px);
  background: rgba(44, 48, 24, 0.95);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(192, 161, 114, 0.28);
  animation: hdrSlideIn 0.35s ease-out;
}
[data-hdr][data-hdr-fixed] [data-navlink] {
  color: #f4efe5;
}
[data-hdr][data-hdr-fixed] [data-burger] {
  background: #f4efe5;
}
[data-hdr][data-hdr-fixed] [data-brand] {
  filter: none;
}
@keyframes hdrSlideIn {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-hdr][data-hdr-fixed] {
    animation: none;
  }
}

/* Responsive helpers */
[data-desk] {
  display: flex;
}
[data-mob] {
  display: none;
}
@media (max-width: 1000px) {
  [data-desk] {
    display: none !important;
  }
  [data-mob] {
    display: flex !important;
  }
}
@media (max-width: 1200px) {
  [data-conn-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  [data-conn-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 700px) {
  [data-sticky-cta] {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    text-align: center;
    padding: 17px 20px !important;
    box-shadow: 0 -6px 22px rgba(20, 23, 12, 0.28) !important;
  }
  /* The bar above is ~50px tall and pinned to the bottom, so it sat on top of
     the copyright line. Pad the last strip by the bar's height so the page can
     scroll the line clear of it (plus the iPhone home-indicator inset). */
  [data-copyright] {
    padding-bottom: calc(22px + 52px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Mobile: lift the banner above the sticky "Enquire Now" bar (z-index 9) so the bar
   stays hidden behind the hero image and only appears once the banner scrolls away. */
@media (max-width: 700px) {
  [data-hero] {
    z-index: 10;
  }
}

/* Swiper — arrows. The box and icon both follow --swiper-navigation-size, so a
   carousel (or breakpoint) resizes its arrows by setting that one variable. */
.swiper {
  --swiper-navigation-size: 54px;
}
.swiper-button-next,
.swiper-button-prev {
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  border: 1px solid rgba(244, 239, 229, 0.45);
  color: #f4efe5;
  background: rgba(44, 48, 24, 0.22);
  backdrop-filter: blur(6px);
  transition:
    background 0.35s,
    color 0.35s,
    border-color 0.35s;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: clamp(10px, calc(var(--swiper-navigation-size) * 0.25), 14px);
  font-weight: 700;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #c0a172;
  border-color: #c0a172;
  color: #2c3018;
}
[data-nav-dark] .swiper-button-next,
[data-nav-dark] .swiper-button-prev {
  color: #3d4222;
  border-color: rgba(61, 66, 34, 0.28);
  background: rgba(251, 248, 242, 0.6);
}
[data-nav-dark] .swiper-button-next:hover,
[data-nav-dark] .swiper-button-prev:hover {
  background: #3d4222;
  color: #f4efe5;
  border-color: #3d4222;
}

/* Swiper — pagination */
.swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(244, 239, 229, 0.42);
  opacity: 1;
  margin: 0 6px !important;
  transition:
    background 0.4s,
    transform 0.4s,
    box-shadow 0.4s;
}
.swiper-pagination-bullet-active {
  background: #c0a172;
  transform: scale(1.25);
  box-shadow: 0 0 0 1px rgba(192, 161, 114, 0.45);
}
[data-hero] .swiper-pagination {
  text-align: center;
  bottom: 38px !important;
  padding: 0 clamp(20px, 6vw, 96px);
}

/* Slide animations */
@keyframes vsRise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes vsZoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}
.swiper-slide-active [data-anim] {
  animation: vsRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.swiper-slide-active [data-anim="2"] {
  animation-delay: 0.14s;
}
.swiper-slide-active [data-anim="3"] {
  animation-delay: 0.28s;
}
.swiper-slide-active [data-anim="4"] {
  animation-delay: 0.42s;
}

/* Banner ken-burns (slow zoom) TEMPORARILY DISABLED — uncomment the rule below to
   restore it. The vsZoom keyframes above are kept so this is a one-line change. */
/* .swiper-slide-active [data-kenburns]{animation:vsZoom 9s ease-out both} */

/* MahaRERA strip — stack the QR above the text on small screens. */
@media (max-width: 640px) {
  [data-rera] {
    flex-direction: column !important;
    text-align: center;
    gap: 14px !important;
  }
}
@media (max-width: 760px) {
  [data-disc] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Connectivity image strip — auto-fit drops to a single column below ~400px (two
   160px tracks plus the gap no longer fit), so pin it to two across on mobile. */
@media (max-width: 700px) {
  [data-conn-imgs] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Connectivity — the two columns stack below 762px (two 320px tracks plus the gap
   stop fitting). Once stacked, lead with the map: it orients the reader before
   the drive-time lists, and it is the shorter of the two to scroll past. */
@media (max-width: 761px) {
  [data-conn-map] {
    order: -1;
    position: static !important;
  }
}

/* Key Highlights — cards. Everything sits on one row: the icon, a hairline
   divider and the highlight text, all vertically centred. The ::after wedge is
   the folded page corner from the reference layout, faint so it reads as paper. */
.hl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
/* Nine cards read as a 3 x 3 block on desktop; step down to two across on
   tablets and one on phones, where three would squeeze the text. */
@media (max-width: 991px) {
  .hl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .hl-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hl-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.5vw, 18px);
  background: #fbf8f2;
  border: 1px solid rgba(192, 161, 114, 0.24);
  border-radius: 14px;
  padding: clamp(20px, 2.2vw, 26px);
  box-shadow: 0 12px 30px rgba(61, 66, 34, 0.07);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s,
    border-color 0.4s;
}
.hl-card:hover {
  transform: translateY(-6px);
  border-color: rgba(192, 161, 114, 0.6);
  box-shadow: 0 18px 40px rgba(61, 66, 34, 0.13);
}
.hl-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46px;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(61, 66, 34, 0) 0 50%,
    rgba(61, 66, 34, 0.09) 50%
  );
}
/* The icon art already carries its own round tinted disc, so the card just
   sizes it - no badge background here. */
.hl-icon {
  flex: none;
  display: block;
  width: clamp(42px, 4.2vw, 52px);
  height: auto;
}
.hl-rule {
  flex: none;
  align-self: stretch;
  width: 1px;
  min-height: 46px;
  background: rgba(192, 161, 114, 0.55);
}
/* The card text is set in caps, so a plural "s" would come out as "BHKS".
   This keeps that one letter lowercase. */
.hl-lc {
  text-transform: lowercase;
}
.hl-text {
  margin: 0;
  font-size: 13.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.75;
  color: #3d4222;
}

/* Overview — 40/60 split (copy left, master plan right). The fixed tracks have
   to be unwound by hand on narrow screens, where auto-fit used to stack them. */
@media (max-width: 860px) {
  [data-ov-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 0 !important;
  }
  /* Once stacked, the image goes between the heading and the body copy.
     The text column dissolves (display:contents) so its heading and paragraph
     become grid items of their own and the image can be ordered in between.
     The heading keeps its own margins, hence the zero row gap above. */
  [data-ov-text] {
    display: contents;
  }
  [data-ov-media] {
    order: 1;
    margin-bottom: 28px;
  }
  [data-ov-para] {
    order: 2;
  }
}

/* Amenities and Overview — these images are renders, so each carries an
   "Representational Image*" tag. It sits on the image frame (not the <img>), so it
   stays put while the image zooms on hover. */
#amenities .swiper-slide figure > div,
[data-ov-media] > div {
  position: relative;
}
#amenities .swiper-slide figure > div::after,
[data-ov-media] > div::after {
  content: "Representational Image*";
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 1;
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
/* The Elevation tab shows the building itself, which is labelled differently. */
#am-panel-1 .swiper-slide figure > div::after {
  content: "Artist\2019s Impression*";
}
/* Connectivity locality map — same styling, flagging that it isn't to scale. */
[data-conn-map] > div {
  position: relative;
}
[data-conn-map] > div::after {
  content: "Map not to scale*";
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 1;
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  /* Dark brown, not white: the map artwork is light beige. */
  color: #5a3524;
  pointer-events: none;
}
/* Hero banners get no tag: the artwork prints its own "Representative Image". */

/* Smaller prev/next arrows for the amenity carousels. Swiper sizes the button
   box and its icon from this one variable (default 44px). */
#amenities .swiper {
  --swiper-navigation-size: 42px;
}
/* Mobile: smaller arrows on every carousel that has them (amenities, gallery). */
@media (max-width: 700px) {
  .swiper,
  #amenities .swiper {
    --swiper-navigation-size: 34px;
  }
}