/* ============================================================
   Lisa Nail & Spa — Public site polish layer
   File: maunailchandep.com/assets/css/styles.css
   Override the inline <style> in index.html — appended AFTER
   it in <head> so cascade wins without !important.
   Brand palette:
     primary  #916339   secondary #FFEEDD   bg-cream #FAF3EB
     bg-white #FFFFFF   header-bg #FEFEFE   text-dark #2A1F18
     text-mute #6B5749
   ============================================================ */

/* ── A1. Service Cards ──────────────────────────────────────
   Fix: bàn tay không bị crop trên desktop. Aspect-ratio điều
   chỉnh theo viewport. Hover lift + zoom. */

.service-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px -6px rgba(42, 31, 24, 0.08);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -16px rgba(145, 99, 57, 0.28);
}

/* Existing wrapper class .service-card-img — also accept new
   .img-wrap to match spec selector. */
.service-card .service-card-img,
.service-card .img-wrap {
  aspect-ratio: 4 / 3;          /* mobile: gần vuông, đủ ảnh */
  height: auto;                 /* override fixed 260px */
  overflow: hidden;
  position: relative;
  background: #F5EBE0;
}
.service-card .service-card-img img,
.service-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;  /* dịch lên một chút giữ trọn bàn tay */
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-card-img img,
.service-card:hover .img-wrap img {
  transform: scale(1.06);
}

@media (min-width: 1024px) {
  .service-card .service-card-img,
  .service-card .img-wrap {
    aspect-ratio: 5 / 4;        /* desktop trung bình */
  }
}
@media (min-width: 1440px) {
  .service-card .service-card-img,
  .service-card .img-wrap {
    aspect-ratio: 16 / 11;      /* full-width desktop: cinematic */
  }
}

/* ── A2. About section — magazine layout ───────────────────
   Goal: 1 ảnh hero lớn span 2 rows + 2 ảnh phụ stack phải.
   Object-position: center top trên ảnh có chữ "LISA" (mặt
   tiền) để KHÔNG cắt logo trên đầu ảnh.
   Chấp nhận selector cũ (.about-gallery .about-img > img) và
   selector spec (.about-images > img) cùng lúc — back-compat. */

.about-section { padding: 80px 0; background: #FAF3EB; }

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 5fr 6fr;
    gap: 64px;
  }
}

/* .about-text h2 / .about-text p overrides removed — inline <style> in
   index.html already matches netlify demo 1:1:
     h2: Playfair Display, color #916339, clamp(1.5rem, 3.5vw, 2rem),
         margin-bottom 20px, line-height 1.4
     p:  color #6b5240, 0.92rem, line-height 1.9, margin-bottom 15px
   The previous override (color #2A1F18, font-size clamp(28-42px),
   letter-spacing -0.01em) shifted the title away from the brand brown
   and inflated the size. */

/* Cả 2 selector: spec mới (.about-images) + cấu trúc cũ (.about-gallery) */
.about-images,
.about-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 180px 180px;
  gap: 12px;
}
@media (min-width: 768px) {
  .about-images,
  .about-gallery {
    grid-template-rows: 220px 220px;
    gap: 16px;
  }
}
@media (min-width: 1024px) {
  .about-images,
  .about-gallery {
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 260px 260px;
    gap: 20px;
  }
}

/* Mỗi .about-img wrapper trở thành full grid cell */
.about-gallery .about-img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px -8px rgba(42, 31, 24, 0.14);
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}
.about-gallery .about-img:hover {
  transform: scale(1.025);
  box-shadow: 0 18px 38px -12px rgba(145, 99, 57, 0.32);
}

/* Ảnh 1 = hero, span 2 row → bên trái lớn, ưu tiên giữ chữ LISA trên đầu */
.about-images > img:nth-child(1),
.about-gallery > .about-img:nth-child(1) {
  grid-row: span 2;
}
.about-images > img:nth-child(1),
.about-gallery > .about-img:nth-child(1) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;     /* giữ chữ LISA ở đầu ảnh */
  border-radius: 14px;
  box-shadow: 0 14px 32px -10px rgba(42, 31, 24, 0.18);
}

/* 2 ảnh phụ */
.about-images > img:nth-child(2),
.about-images > img:nth-child(3),
.about-gallery > .about-img:nth-child(n+2) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
}

.about-images > img,
.about-gallery .about-img img {
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

/* Edge case — chỉ 1 ảnh thì hiển thị full-width (graceful fallback) */
.about-images:has(> img:only-child),
.about-gallery:has(> .about-img:only-child) {
  grid-template-columns: 1fr;
  grid-template-rows: 420px;
}
.about-images > img:only-child,
.about-gallery > .about-img:only-child {
  grid-row: span 1;
}

/* B5 header override removed — inline <style> in index.html already has
   `.header { background: #FEFEFE; box-shadow: 0 2px 20px rgba(145,99,57,0.08) }`
   identical to netlify demo. Backdrop blur was making header too soft. */

/* C1 padding rhythm removed — used to apply section { padding: 96px 0 }
   on desktop ≥1280px which made <section class="hero"> shorter than demo
   netlify (since box-sizing: border-box subtracts padding from height: 70vh).
   Inline <style> in index.html keeps the demo's `section { padding: 80px 0 }`
   baseline which is what netlify uses too — including for hero. */

/* Bỏ section-divider liền nhau giữa 2 section cùng tone */
.section-divider + section .section-divider { display: none; }

/* ═══ SECTION BACKGROUNDS — 1:1 with netlify demo (commit 1f0b81a) ═══
   Ground truth: inline <style> in 1f0b81a:maunailchandep.com/index.html.
   Sequence: services cream → about white → nail-art cream → son-gel white →
             pricing cream → pedicure white → commitment gradient → gallery white.
   Services has no class rule in original — inherits body #FAF3EB (cream),
   so we set it explicitly here for clarity. */

section[data-section="hero"]         { background: transparent; }
section[data-section="services"]     { background: #FAF3EB; }
section[data-section="about"]        { background: #fff; }
section[data-section="nail-art"]     { background: #FAF3EB; }
section[data-section="son-gel"]      { background: #fff; }
section[data-section="pricing"]      { background: #FAF3EB; }
section[data-section="pedicure"]     { background: #fff; }
section[data-section="commitment"] {
  background: linear-gradient(135deg, #FFEEDD 0%, #FAF3EB 100%);
}
section[data-section="gallery"]      { background: #fff; }
/* Footer & branches-block: không override — giữ inline CSS gốc (#916339).
   Note: branches-block không tồn tại trong commit 1f0b81a — bỏ qua. */

/* C3 section-title underline polish removed — inline <style> in index.html
   keeps the netlify demo .section-title definition 1:1:
     font-family: 'Playfair Display', serif
     color: #916339
     font-size: clamp(1.6rem, 4vw, 2.4rem)
     font-weight: 600
     text-align: center
     margin-bottom: 0.5em
   The previous override added display: inline-block + ::after underline
   which broke center alignment (inline-block shrinks to content width)
   and introduced a gradient bar not present in the demo. */

/* C4 CTA buttons polish removed — inline <style> in index.html keeps the
   demo netlify size:
     .btn-cta   { padding: 10px 24px; font-size: 0.82rem; border: 2px solid #916339 }
     .btn-outline { padding: 10px 28px; font-size: 0.82rem; border: 2px solid #916339 }
   Polish version (14px 36px / 15px font) made header CTA too large vs demo. */

/* C5 hero polish removed — restore original elegant typography
   from inline <style> in index.html (clamp 1.8-3.2rem h1, weight 500,
   letter-spacing 2px). Hero size stays 70vh per inline CSS. */

/* ── C6. Scroll-reveal classes ─────────────────────────────
   JS in cms-loader.js adds .reveal then toggles .reveal-in
   when element enters viewport. Stagger nhẹ cho card grid. */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

.service-card.reveal { transition-delay: 0ms; }
.service-card:nth-child(2).reveal { transition-delay: 120ms; }
.commit-card.reveal:nth-child(1),
.camket-card.reveal:nth-child(1) { transition-delay: 0ms; }
.commit-card.reveal:nth-child(2),
.camket-card.reveal:nth-child(2) { transition-delay: 80ms; }
.commit-card.reveal:nth-child(3),
.camket-card.reveal:nth-child(3) { transition-delay: 160ms; }
.commit-card.reveal:nth-child(4),
.camket-card.reveal:nth-child(4) { transition-delay: 240ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .service-card,
  .about-images img,
  .about-gallery .about-img { transition: none !important; }
}

/* ── C7. Cam Kết — beauty icon style ───────────────────────
   Force stroke variant for the new Lucide SVG icons we placed
   in .camket-icon. Keep circle bg #FFEEDD per spec. */

.camket-card .camket-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFEEDD;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #916339;
}
.camket-card .camket-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* HERO REFINE block removed — inline <style> in index.html already matches
   netlify demo 1:1 (h1 clamp(1.8rem, 5vw, 3.2rem) weight 500 letter-spacing 2px;
   p clamp(0.9rem, 2.5vw, 1.2rem) italic letter-spacing 1px). */

/* .footer .btn-cta reset removed — no longer needed since C4 polish .btn-cta
   override is gone. Inline CSS now applies cleanly to footer button. */

/* ═══ MOBILE POLISH (≤767px) ═══════════════════════════════════
   3 fixes phát hiện khi test 390×844 viewport. Chỉ apply mobile,
   desktop KHÔNG đổi. */

/* M1. Hero overlay nhạt hơn ở mobile — tagline đọc rõ hơn.
   Inline <style> dùng overlay 0.1 → 0.35 (đậm dưới). Mobile giảm
   xuống 0.08 → 0.22 để text trắng tagline không bị nuốt. */
@media (max-width: 767px) {
  .hero-section::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.18) 55%,
      rgba(0, 0, 0, 0.22) 100%
    ) !important;
  }
}

/* M2. About text mobile — line-height rộng hơn, font 15px cố định
   thay vì 0.92rem để dễ đọc trên màn hình nhỏ. */
@media (max-width: 767px) {
  .about-text p,
  section[data-section="about"] p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
}

/* M3. Footer hotline no-wrap — số "0777 776 922" không bị xuống
   dòng giữa nhóm số trên 6 chi nhánh ở mobile. */
.footer .branch-phone,
.footer a[href^="tel:"],
.footer-branch a[href^="tel:"] {
  white-space: nowrap !important;
}
