/* ============================================================
   page-homepage.css — Wave 0 Homepage
   Port từ Wave 2 demo — Phase E Step Wave0 — 17/05/2026
   ============================================================ */

/* ============ ANIMATION ============ */
.btm-fade-in { animation: btmFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes btmFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ CHAPTER LABELS ============ */
.chapter-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--terracotta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.chapter-heading {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

/* ============ STAT NUMBERS ============ */
.stat-number {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.01em;
}

.stat-divider {
  width: 1px;
  background: var(--terracotta);
  opacity: 0.3;
}

/* ============ DIVIDER ============ */
.hr-soft {
  border: none;
  border-top: 1px solid rgba(26, 35, 50, 0.08);
  margin: 0;
}

/* ============ ICON CIRCLE ============ */
.icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cream-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  flex-shrink: 0;
}

/* ============ PRODUCT CARD ============ */
.btm-product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btm-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(26, 35, 50, 0.08);
}

/* ============ TIER CARD ============ */
.tier-card {
  background: var(--white, #fff);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(26, 35, 50, 0.08);
  box-shadow: 0 4px 16px rgba(26, 35, 50, 0.06);
}

/* ============ BRAND CARD ============ */
.brand-card {
  transition: all 0.3s ease;
  background: var(--cream-darker);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  color: var(--navy);
}
.brand-card:hover {
  background: var(--white, #fff);
  box-shadow: 0 8px 24px rgba(26, 35, 50, 0.08);
  transform: translateY(-3px);
}

/* ============ SHOWROOM CARD ============ */
.showroom-card {
  background: var(--white, #fff);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(26, 35, 50, 0.08);
  box-shadow: 0 4px 16px rgba(26, 35, 50, 0.06);
  transition: all 0.3s ease;
}
.showroom-card:hover {
  box-shadow: 0 8px 24px rgba(26, 35, 50, 0.08);
  transform: translateY(-3px);
}

/* ============ TESTIMONIAL CARD ============ */
.testimonial-card {
  background: var(--white, #fff);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 4px 16px rgba(26, 35, 50, 0.06);
  border: 1px solid rgba(26, 35, 50, 0.08);
}

/* ============ USP REASON LIST ============ */
.reason-list-item {
  background: var(--white, #fff);
  border-radius: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(26, 35, 50, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}
.reason-list-item:hover {
  border-color: var(--terracotta);
  transform: translateX(4px);
}

.reason-num {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--white, #fff);
  background: var(--terracotta);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============ HERO GRID ============ */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============ TAILWIND UTILITY REPLICAS ============ */
/* Container widths */
.max-w-7xl { max-width: 80rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-md  { max-width: 28rem; }

/* Margin/padding */
.mx-auto   { margin-left: auto; margin-right: auto; }
.px-4      { padding-left: 1rem; padding-right: 1rem; }
.pt-6      { padding-top: 1.5rem; }
.pt-8      { padding-top: 2rem; }
.mb-10     { margin-bottom: 2.5rem; }
.mb-12     { margin-bottom: 3rem; }
.mb-16     { margin-bottom: 4rem; }
.p-2       { padding: .5rem; }

/* Display */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.block       { display: block; }
.hidden      { display: none; }
.absolute    { position: absolute; }
.sticky      { position: sticky; }
.top-0       { top: 0; }
.z-50        { z-index: 50; }
.w-full      { width: 100%; }

/* Flex helpers */
.flex-1         { flex: 1 1 0%; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.flex-shrink-0  { flex-shrink: 0; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center    { text-align: center; }

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* Gap */
.gap-0  { gap: 0; }
.gap-1  { gap: .25rem; }
.gap-2  { gap: .5rem; }
.gap-3  { gap: .75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-7  { gap: 1.75rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* Responsive breakpoints */
@media (min-width: 640px) {
  .sm\:px-6      { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:flex-row  { flex-direction: row; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm\:inline-flex { display: inline-flex; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .md\:flex-row    { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:block { display: block; }
}

@media (min-width: 1024px) {
  .lg\:px-10       { padding-left: 2.5rem; padding-right: 2.5rem; }
  .lg\:flex        { display: flex !important; }
  .lg\:hidden      { display: none !important; }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .lg\:col-span-3  { grid-column: span 3 / span 3; }
  .lg\:col-span-5  { grid-column: span 5 / span 5; }
  .lg\:col-span-7  { grid-column: span 7 / span 7; }
  .lg\:col-span-9  { grid-column: span 9 / span 9; }
  .lg\:gap-10      { gap: 2.5rem; }
  .lg\:gap-12      { gap: 3rem; }
}

/* ============ RESPONSIVE FALLBACK — MOBILE FIRST ============ */
@media (max-width: 767px) {
  .md\:grid-cols-2 { grid-template-columns: 1fr; }
  .md\:grid-cols-3 { grid-template-columns: 1fr; }
}

/* ============ FRONT PAGE OVERRIDES ============ */
/* Remove Kadence default page padding that may bleed into sections */
.front-page-wave0 {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* Ensure hero image fills wrapper */
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   FIX: Missing CSS variables từ Wave 2 demo
   --gray-300 và --gray-400 không có trong global.css → unresolved
   Port nguyên si từ Wave 2 demo :root (L12-L18)
   17/05/2026
   ============================================================ */
:root {
  --gray-300: #CBD5E0;
  --gray-400: #A0AEC0;
  --white: #FFFFFF;
}

/* ============================================================
   FIX: Card VĂN PHÒNG + EMAIL — override Kadence text color
   Demo Wave 2 L1566-L1579: card dùng color: var(--white/gray-300/gray-400)
   Kadence p/h3/div rules đè cascade → cần !important
   ============================================================ */
.showroom-card[style*="background: var(--navy)"] h3,
.showroom-card[style*="background: var(--navy)"] p,
.showroom-card[style*="background: var(--navy)"] div {
  color: var(--gray-300) !important;
}

.showroom-card[style*="background: var(--navy)"] h3.font-serif {
  color: var(--white) !important;
}

.showroom-card[style*="background: var(--navy)"] .font-sans[style*="terracotta-light"] {
  color: var(--terracotta-light) !important;
}