/* ==========================================================
   Sawangan Permai - Corporate Theme
   Colorway: Forest Green + Warm Gold (enterprise / township)
   ========================================================== */

:root{
  /* Brand */
  --corp-green:   #0F3D2E;   /* Forest Green (primary) */
  --corp-green-2: #0B2F23;   /* Darker green */
  --corp-gold:    #C4A24C;   /* Warm Gold (accent) */
  --corp-gold-2:  #B08E3F;   /* Darker gold */

  /* Neutrals */
  --corp-ink:     #0F172A;
  --corp-muted:   #64748B;
  --corp-bg:      #F6F8F7;
  --corp-card:    #FFFFFF;
  --corp-line:    #E6EAE8;
}

/* Base */
body{
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--corp-ink);
  background: #fff;
}

a{ color: var(--corp-green); }
a:hover{ color: var(--corp-green-2); }

/* ===================== NAVBAR ===================== */
/* ✅ Never overlap hero/banner: keep navbar in flow, stick on scroll */
#mainNav{
  position: sticky;
  top: 0;
  z-index: 1020;

  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(230,234,232,.95);
}

#mainNav.navbar-shrink{
  background: rgba(255,255,255,.98) !important;
}

#mainNav .navbar-brand{
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--corp-green) !important;
}

#mainNav .nav-link{
  color: rgba(15,61,46,.82) !important;
  font-weight: 800;
}

#mainNav .nav-link:hover{
  color: var(--corp-green) !important;
}

/* Perfect logo (never squished) */
.img-logo{
  height: 42px;      /* adjust as needed */
  width: auto;       /* key: prevents squish */
  max-width: 200px;  /* safety cap */
  object-fit: contain;
  display: block;
}

/* ===================== HERO / MASTHEAD ===================== */
.masthead{
  position: relative;
  overflow: hidden;

  /* ✅ no navbar compensation needed (navbar is not fixed) */
  padding-top: 0;

  background:
    url("../assets/img/Sawangan-Permai.png") center/cover no-repeat;
}

/* Full-hero blur + vignette overlay (covers entire background) */
.masthead::before{
  content: "";
  position: absolute;
  inset: 0;

  /* blur the background behind the overlay */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  /* vignette + tint */
  background:
    radial-gradient(
      ellipse at center,
      rgba(15,61,46,.12) 0%,
      rgba(15,61,46,.18) 55%,
      rgba(15,61,46,.45) 75%,
      rgba(15,61,46,.85) 100%
    );

  z-index: 1;
}

/* Ensure hero content sits above the overlay */
.masthead .container{
  position: relative;
  z-index: 2;
}

/* Remove full-width blur panel behavior */
.hero-inner{
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;

  background: transparent;
  backdrop-filter: none;
  padding: 4rem 0;
}

.hero-content{
  max-width: 980px;
  margin: 0 auto;
}

/* HERO TITLE — housing developer grade */
.masthead h1{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;        /* was 900 → too heavy */
  letter-spacing: .10em;
  text-transform: uppercase;
}

.masthead p{
  color: rgba(255,255,255,.90);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* HERO DESCRIPTION — calm corporate */
.masthead .lead{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .015em;
  font-size: 1.05rem;
  line-height: 1.85;
}

.masthead .text-white-50{
  color: rgba(255,255,255,.80) !important;
}

.badge-soft{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}

/* NAV BRAND — professional housing developer */
#mainNav .navbar-brand span{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ===================== BUTTONS ===================== */
.btn-primary{
  background: var(--corp-gold) !important;
  border-color: var(--corp-gold) !important;
  color: #0B2F23 !important;
  font-weight: 900;
}

.btn-primary:hover{
  background: var(--corp-gold-2) !important;
  border-color: var(--corp-gold-2) !important;
}

.btn-outline-light{
  border-width: 2px;
  font-weight: 900;
}

.btn-outline-primary{
  border-color: var(--corp-green) !important;
  color: var(--corp-green) !important;
  font-weight: 900;
}

.btn-outline-primary:hover{
  background: var(--corp-green) !important;
  color: #fff !important;
}

/* ===================== SECTIONS ===================== */
.bg-light{
  background: var(--corp-bg) !important;
}

.about-section{
  background: var(--corp-green) !important;
}

.section-title{
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .85rem;
}

/* ===================== CARDS ===================== */
.card{
  border: 1px solid var(--corp-line);
  border-radius: 16px;
}

.card-shadow{
  box-shadow: 0 16px 40px rgba(15,61,46,.10);
  border: 1px solid var(--corp-line) !important;
}

.card .card-title{
  font-weight: 900;
  color: var(--corp-green);
}

/* Icon color alignment (bootstrap "text-primary") */
.text-primary{
  color: var(--corp-gold) !important;
}

/* ===================== FEATURED TEXT ===================== */
.featured-text h4{
  font-weight: 900;
  color: var(--corp-green);
}

/* Replace black panels with corporate green */
.bg-black{
  background: var(--corp-green) !important;
}

/* ===================== FOOTER ===================== */
.footer{
  background: #082218 !important;
}

/* Social icons */
.social a{
  color: rgba(255,255,255,.86);
}
.social a:hover{
  color: var(--corp-gold);
}

/* Optional: smoother card images */
.card-img-top{
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* ===================== AMENITIES PHOTO GRID ===================== */
/* Amenity cards */
.amenity-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
}

.amenity-card h6 { font-weight: 900; }
.amenity-card p { color: rgba(255,255,255,.6); }

.amenity-icon {
  font-size: 1.2rem;
  color: #fff;
}

/* Ensure both columns match height */
#amenities .row {
  align-items: stretch;
}

#amenities .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Photos */
.amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;   /* 🔑 makes both images equal height */
  gap: 20px;

  flex: 1;
  min-height: 0;
}

.amenity-photo {
  overflow: hidden;
  border-radius: 20px;
  min-height: 0;
}

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

/* Mobile */
@media (max-width: 991px) {
  .amenities-grid {
    flex: unset;     /* ✅ stop stretching on mobile */
    height: auto;
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .amenity-photo {
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 992px) {
  /* Make both main columns behave like stretchable flex containers */
  #amenities .row.align-items-stretch > .col-lg-6 {
    display: flex;
    flex-direction: column;
  }

  /* Force the LEFT amenities grid (your inner .row) to fill the column height */
  #amenities .col-lg-6 .row.g-3.measure {
    flex: 1;                /* 🔑 this makes boxes column match image column height */
    align-content: stretch; /* allows wrapping rows to distribute properly */
  }

  /* Make every card fill its grid cell height */
  #amenities .amenity-card {
    height: 100%;
  }
}

/* ===================== MOBILE: true vertical + horizontal centering ===================== */
@media (max-width: 575.98px){

  /* Make sure hero content never exceeds screen width */
  .masthead {
    /* ✅ no subtraction / padding-top needed (navbar is not fixed) */
    min-height: 100svh;
    padding-top: 0;
    padding-bottom: 1rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-position: center;
    background-size: cover;
  }

  .hero-inner{
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* If you're using Bootstrap containers in the hero, clamp padding */
  .masthead .container,
  .masthead .container-fluid{
    width: 100%;
    max-width: 100%;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box;
  }

  /* Ensure text wraps instead of overflowing */
  .masthead h1,
  .masthead .lead{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  /* Hero title */
  .masthead h1{
    letter-spacing: .03em; /* was .06em */
    text-align: center;
    white-space: normal;
    hyphens: none;         /* key: stops CATA-LOG */
    word-break: normal;    /* override the break-word above for the title */
    overflow-wrap: normal; /* override the anywhere above for the title */
  }

  /* ===== PILLS: always fit the screen ===== */
  .masthead .badge-row,
  .masthead .badges,
  .masthead .pill-group{
    width: 100%;
    max-width: 100%;
    padding-left: .25rem;
    padding-right: .25rem;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
  }

  .masthead .badge-soft{
    max-width: 100%;
    white-space: normal;        /* allow wrap inside pill */
    overflow-wrap: anywhere;    /* break long words */
    word-break: break-word;

    font-size: .76rem;          /* tiny reduction helps */
    padding: .32rem .55rem !important;
    line-height: 1.2;
  }

  /* Optional: if pills still feel too wide on very small phones */
  @media (max-width: 360px){
    .masthead .badge-soft{
      font-size: .72rem;
      padding: .28rem .5rem !important;
    }
  }

  .navbar {
    padding-top: .35rem;
    padding-bottom: .35rem;
  }

  .navbar-brand {
    font-size: 1rem;       /* smaller logo text */
    padding: 0;
    margin-right: .5rem;  /* tighter spacing */
  }
}