/* ==========================================================================
   Grand Harmoni Residence — microsite.css
   Microsite-specific components: stats bar, overview gallery, unit type,
   why-love cards, included/payment, unit availability map, booking.
   Extends the root css/style.css + components.css.
   ========================================================================== */

/* Microsite header: tighter nav gap to fit 7 items + CTA */
.site-header .nav-links { gap: 1.6rem; }

/* Microsite hero */
.gh-hero { position: relative; padding-top: var(--nav-h); background: linear-gradient(160deg, var(--cream) 0%, var(--warm-white) 60%); overflow: hidden; }
.gh-hero .hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; align-items: center; min-height: 62vh; }
.gh-hero-text { padding: 2.4rem 0 3rem; max-width: 540px; }
.gh-hero .kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; display: block; }
.gh-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 1.4rem; }
.gh-hero .lead { max-width: 440px; margin-bottom: 2rem; }
.gh-hero-media { position: relative; height: clamp(360px, 46vw, 540px); border-radius: var(--radius-lg) 0 0 var(--radius-lg); overflow: hidden; margin-right: calc(-1 * var(--gutter)); }
.gh-hero-media img { width: 100%; height: 112%; object-fit: cover; }

/* Stats bar */
.stats-bar { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(6, 1fr); position: relative; z-index: 5; margin-top: -44px; }
.stat-cell { display: flex; align-items: center; gap: 0.8rem; padding: 1.3rem 1.2rem; border-right: 1px solid var(--line); }
.stat-cell:last-child { border-right: none; }
.stat-cell i { font-size: 1.5rem; color: var(--olive); }
.stat-cell strong { font-family: var(--font-serif); font-size: 1.15rem; display: block; }
.stat-cell span { font-size: 0.76rem; color: var(--gray); }

/* Overview gallery */
.overview-gallery { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 0.9rem; }
.overview-gallery .og-main { grid-row: 1 / 3; border-radius: var(--radius); overflow: hidden; }
.overview-gallery .og-item { border-radius: var(--radius-sm); overflow: hidden; }
.overview-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.overview-gallery a:hover img { transform: scale(1.06); }
.overview-gallery .og-strip { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.overview-gallery .og-strip .og-item { aspect-ratio: 16/7; }

.gh-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.6rem; margin-top: 1.6rem; }
.gh-feature { display: flex; gap: 0.7rem; align-items: flex-start; }
.gh-feature i { font-size: 1.2rem; color: var(--olive); margin-top: 2px; }
.gh-feature h5 { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700; }
.gh-feature span { font-size: 0.78rem; color: var(--gray); }

/* Unit type */
.unit-type { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.4rem; align-items: center; }
.unit-type-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3.4; }
.unit-type-media img { width: 100%; height: 100%; object-fit: cover; }
.unit-type h2 { font-size: clamp(2rem, 4vw, 3rem); }
.unit-specs { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.4rem 0; }
.unit-specs .us { display: flex; gap: 0.5rem; align-items: center; }
.unit-specs .us i { font-size: 1.2rem; color: var(--olive); }
.unit-specs .us strong { font-size: 0.95rem; display: block; }
.unit-specs .us span { font-size: 0.74rem; color: var(--gray); }
.unit-size-row { display: flex; gap: 2.4rem; padding: 1.2rem 0; border-block: 1px solid var(--line); margin-bottom: 1.4rem; }
.unit-size-row div span { font-size: 0.76rem; color: var(--gray); display: block; }
.unit-size-row div strong { font-family: var(--font-serif); font-size: 1.3rem; }
.unit-price-label { font-size: 0.78rem; color: var(--gray); }
.unit-price { font-family: var(--font-serif); font-size: 2rem; margin: 0.2rem 0 1.4rem; }
.floorplan-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1.6rem; }
.floorplan-thumbs .fp { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.floorplan-thumbs .fp img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.floorplan-thumbs .fp span { display: block; padding: 0.6rem; text-align: center; font-size: 0.78rem; font-weight: 600; }

/* Why you'll love / feature cards */
.love-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.love-card { background: var(--off-white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.4rem 1rem; text-align: center; transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.love-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); background: var(--white); }
.love-card i { font-size: 1.6rem; color: var(--olive); }
.love-card h5 { font-family: var(--font-sans); font-size: 0.88rem; font-weight: 700; margin: 0.8rem 0 0.35rem; }
.love-card p { font-size: 0.76rem; color: var(--gray); line-height: 1.45; }

/* Included / Optional / Payment */
.included-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1.8rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; }
.included-col h5 { font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 1.1rem; }
.included-col ul li { display: flex; gap: 0.6rem; align-items: center; font-size: 0.86rem; margin-bottom: 0.7rem; }
.included-col.included li i { color: var(--status-available); }
.included-col.optional li i { color: var(--gold); }
.included-col.full-width {
    grid-column: 1 / -1;
    width: 100%;
}
.payment-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin: 1rem 0; }
.pay-method { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.2rem 0.8rem; text-align: center; transition: all 0.35s var(--ease); }
.pay-method:hover { border-color: var(--olive); background: var(--off-white); }
.pay-method i { font-size: 1.4rem; color: var(--olive); }
.pay-method strong { display: block; font-size: 0.85rem; margin: 0.6rem 0 0.2rem; }
.pay-method span { font-size: 0.74rem; color: var(--gray); }
.pay-note { display: flex; gap: 0.6rem; align-items: center; font-size: 0.8rem; color: var(--gray); background: var(--cream); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; }
.pay-note i { color: var(--gold); }

/* Unit availability map */
.unit-avail { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: start; }
.avail-legend { display: flex; gap: 1.4rem; margin-bottom: 1.2rem; }
.avail-legend span { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--gray); }
.avail-legend .dot { width: 14px; height: 14px; border-radius: 4px; }
.dot.available { background: var(--status-available); }
.dot.reserved { background: var(--status-reserved); }
.dot.sold { background: var(--status-sold); }
.site-map { background: #dfe4d4; border-radius: var(--radius); padding: 1.6rem; position: relative; }
.site-map::before { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); height: 26px; background: #cbd0be; border-radius: 8px; }
.unit-rows { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3rem; }
.unit-row { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 6px; }
.unit-plot { aspect-ratio: 1/1.3; border-radius: 5px; display: grid; place-items: center; font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.95); cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s; border: 2px solid transparent; }
.unit-plot.available { background: var(--status-available); }
.unit-plot.reserved { background: var(--status-reserved); color: var(--ink); }
.unit-plot.sold { background: var(--status-sold); cursor: not-allowed; opacity: 0.85; }
.unit-plot:not(.sold):hover { transform: translateY(-3px) scale(1.08); box-shadow: var(--shadow-sm); }
.unit-plot.selected { border-color: var(--ink); transform: translateY(-3px) scale(1.1); }

.unit-detail-card { background: var(--off-white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.unit-status-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.04em; }
.unit-status-pill.available { background: rgba(111,143,78,0.18); color: var(--status-available); }
.unit-status-pill.reserved { background: rgba(214,178,74,0.2); color: #a07d1c; }
.unit-status-pill.sold { background: rgba(180,87,63,0.18); color: var(--status-sold); }
.unit-detail-card h3 { font-family: var(--font-serif); font-size: 2rem; margin: 0.8rem 0 0.2rem; }
.unit-detail-card .ud-type { font-size: 0.85rem; color: var(--gray); margin-bottom: 1.2rem; }
.unit-detail-card .ud-specs { display: flex; gap: 2rem; margin-bottom: 1.4rem; }
.unit-detail-card .ud-specs span { font-size: 0.74rem; color: var(--gray); display: block; }
.unit-detail-card .ud-specs strong { font-size: 1rem; }

/* Booking */
.booking-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
.booking-card { border-radius: var(--radius-lg); overflow: hidden; position: relative; padding: 2rem; color: var(--off-white); }
.booking-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(44,46,24,0.9), rgba(44,46,24,0.92)), url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=900&q=80'); background-size: cover; background-position: center; z-index: 0; }
.booking-card > * { position: relative; z-index: 1; }
.booking-card h3 { color: var(--off-white); font-size: 1.5rem; margin-bottom: 0.5rem; }
.booking-card > p { color: rgba(250,248,243,0.8); font-size: 0.86rem; margin-bottom: 1.6rem; }
.booking-card .form-field label { color: rgba(250,248,243,0.9); }
.booking-card .form-field input, .booking-card .form-field select, .booking-card .form-field textarea { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: var(--off-white); }
.booking-card .form-field input::placeholder, .booking-card .form-field textarea::placeholder { color: rgba(250,248,243,0.55); }
.booking-card .form-field select option { color: var(--ink); }
.info-card { background: var(--off-white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; }
.info-card h4 { font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 1.2rem; }
.info-contact li { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 1rem; font-size: 0.88rem; }
.info-contact li i { color: var(--olive); font-size: 1.1rem; margin-top: 2px; }
.info-contact li span { display: block; font-size: 0.74rem; color: var(--gray); }

/* Responsive for microsite */
@media (max-width: 992px) {
  .gh-hero .hero-grid { grid-template-columns: 1fr; }
  .gh-hero-media { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; height: 44vh; order: -1; }
  .stats-bar { grid-template-columns: repeat(3, 1fr); }
  .stat-cell:nth-child(3n) { border-right: none; }
  .unit-type, .unit-avail, .booking-grid, .included-grid { grid-template-columns: 1fr; }
  .love-grid { grid-template-columns: repeat(3, 1fr); }
  .payment-methods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .stat-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .gh-features { grid-template-columns: 1fr; }
  .love-grid { grid-template-columns: 1fr 1fr; }
  .site-map { padding: 0.7rem; }
  .unit-row { gap: 3px; }
  .unit-plot { font-size: 0.5rem; border-width: 1px; }
  .overview-gallery { grid-template-columns: 1fr; }
  .overview-gallery .og-main { grid-row: auto; aspect-ratio: 16/10; }
}