/* =============================================================
   Hotel The Black Gold — page-index.css
   Production. Homepage-only styles. global.css must load first.
   ============================================================= */

/* ── Hero CTA card ──────────────────────────────────────────── */
.hero-cta-card {
  margin-top: 28px;
  background: rgba(22,22,22,.86);
  border: 1px solid #646464; border-radius: 18px;
  padding: 20px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 1rem;
}
.hero-ctas      { display: flex; flex-direction: column; gap: .75rem }
.hero-ctas-row  { display: flex; gap: .75rem }
.hero-ctas-row .btn-primary-1,
.hero-ctas-row .btn-cta-wa { flex: 1; justify-content: center }
.btn-cta-full   { width: 100%; justify-content: center }

a.btn-cta-inquiry {
  display: inline-flex; justify-content: center; align-items: center; gap: .5rem;
  font-size: 18px; font-weight: 800; font-family: Montserrat, sans-serif;
  background: var(--gold); color: #000;
  padding: 14px 22px; border-radius: 99px;
  border: none; text-decoration: none; flex: 1;
}
a.btn-cta-inquiry:hover { filter: brightness(1.08); color: #000 }

/* a.btn-cta-call and a.btn-cta-wa promoted to global.css — now shared
   by index.html, contact.html, and faqs.html hero/CTA rows */

/* button.btn-cta-submit — promoted to global.css in v2.6 (now used on contact.html too) */

button.btn-primary-1 {
  background: var(--gold); color: #111;
  padding: 17px 15px; border-radius: 59px;
  font-weight: 800; font-size: 16px;
  border: none; cursor: pointer;
}
button.btn-primary-1:hover { filter: brightness(1.08) }

a.btn.btn-primary i { font-size: 17px }

/* ── Inquiry form ───────────────────────────────────────────────
   All inquiry-form classes promoted to global.css in v2.6
   (.inquiry-form, .inquiry-row, .inquiry-field, .req, .opt,
    .inquiry-success, .honeypot, button.btn-cta-submit)
   because the contact page now uses the same form pattern.
   See global.css → "Inquiry form" section.
   ─────────────────────────────────────────────────────────────── */

/* ── Ideal-for guest type strip ─────────────────────────────── */
.ideal-for-strip { padding: 32px 0 0 }
.ideal-for-grid  { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px }
.ideal-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 18px 10px;
  background: var(--card); border: 1px solid #646464; border-radius: 16px;
  text-align: center; transition: border-color .2s, transform .2s;
}
.ideal-tile:hover  { border-color: var(--gold); transform: translateY(-2px) }
.ideal-tile i      { font-size: 1.5rem; color: var(--gold) }
.ideal-tile span   { font-size: .8rem; font-weight: 700; font-family: var(--font-heading); color: var(--muted); letter-spacing: .3px }

@media (max-width: 900px) { .ideal-for-grid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 480px) { .ideal-for-grid { grid-template-columns: repeat(2, 1fr) } }

/* ── AI Summary block — moved to global.css (shared component, v2.4) ── */

/* ── About stat strip ───────────────────────────────────────── */
.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin: 28px 0;
}
.about-stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 16px;
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.about-stat-num {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--gold); line-height: 1;
}
.about-stat-label {
  font-size: .8rem; color: #9a9a9a;
  text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
}
@media (max-width: 600px) {
  .about-stats { grid-template-columns: repeat(2, 1fr) }
}

/* ── Why Us card grid ───────────────────────────────────────── */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 24px;
}
.why-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px 20px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: border-color .2s, transform .2s;
}
.why-card:hover {
  border-color: rgba(212,175,55,.35);
  transform: translateY(-2px);
}
.why-card > i {
  font-size: 1.4rem; color: var(--gold);
  flex-shrink: 0; margin-top: 2px;
}
.why-card h3 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: .95rem; margin: 0 0 6px; color: var(--text);
}
.why-card p {
  margin: 0; font-size: .9rem;
  color: #c0c0c0; line-height: 1.55;
}
.why-card p a { color: var(--gold) }
.why-card p a:hover { text-decoration: underline }
@media (max-width: 900px) {
  .why-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 540px) {
  .why-grid { grid-template-columns: 1fr }
  .why-card { padding: 18px 16px }
}

/* ── Card fade-in (homepage room cards) ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .card { opacity: 0; transform: translateY(8px); animation: fadeUp .6s ease .15s forwards }
}