/* Mali Makeup Studio — demo theme.
   Loads after demo-booking.css: this file sets the tokens and styles the page sections,
   the booking module itself is inherited. Fonts: Playfair Display + IBM Plex Sans Thai. */

:root{
  --paper:#fffdfb;
  --surface:#f6efe9;
  --ink:#241c17;
  --ink-soft:#7b6a5d;
  --line:#e8dbd0;
  --accent:#3a2a20;
  --accent-ink:#fdf8f3;
  --blush:#c8a28a;
}

body.makeup-demo{background:var(--paper)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,253,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.wordmark{display:inline-flex;align-items:baseline;gap:2px;text-decoration:none;color:var(--ink);font-family:var(--font-display);font-size:1.9rem;font-weight:600;letter-spacing:-.02em}
.wordmark span{color:var(--blush)}
.wordmark small{margin-left:9px;font-family:var(--font-body);font-size:.52rem;font-weight:600;letter-spacing:.26em;color:var(--ink-soft)}
.site-header nav{display:flex;gap:30px}
.site-header nav a{color:var(--ink-soft);text-decoration:none;font-size:.92rem;font-weight:500;transition:color .2s ease}
.site-header nav a:hover{color:var(--ink)}
.header-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-size:.88rem;font-weight:600}

/* ---------- Hero ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:min(86vh,680px);overflow:hidden;background:var(--surface)}
.hero-image{position:absolute;inset:0 0 0 30%;background:url("assets/makeup-hero.webp") center center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--surface) 0%,var(--surface) 30%,rgba(246,239,233,.9) 46%,rgba(246,239,233,.15) 70%,transparent)}
.hero-inner{position:relative;z-index:2;padding:clamp(56px,7vw,96px) 0}
.hero-copy{max-width:640px}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);margin-bottom:22px;text-wrap:balance}
.hero h1 em{color:var(--blush)}
.hero-lead{font-size:1.06rem;color:var(--ink-soft);max-width:430px;margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero-facts{display:flex;flex-wrap:wrap;gap:34px;margin:46px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.hero-facts dt{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.hero-facts dd{margin:0;font-family:var(--font-display);font-size:1.18rem;font-weight:600}

/* ---------- Intro ---------- */
.intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(60px,7vw,104px) 0}
.intro-portrait{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.intro h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.intro p{color:var(--ink-soft);font-size:1.03rem;margin-top:16px}
.intro h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
@media (max-width:760px){.intro{grid-template-columns:1fr;gap:22px}.intro-portrait{max-height:340px}}

/* ---------- Services ---------- */
.services-section{background:var(--surface)}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
@media (max-width:860px){.service-grid{grid-template-columns:1fr}}
.service-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,2.8vw,36px);transition:transform .25s ease,box-shadow .25s ease}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service-card{padding:0;overflow:hidden}
.service-photo{margin:0 0 22px}
.service-photo img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block}
.service-card>:not(.service-photo){padding-inline:clamp(26px,2.8vw,36px)}
.service-card>a{padding-bottom:clamp(26px,2.8vw,36px)}
.service-card h3{font-size:1.4rem;margin-bottom:10px}
.service-card>p{color:var(--ink-soft);font-size:.95rem;margin-bottom:18px}
.service-card ul{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:8px}
.service-card li{position:relative;padding-left:20px;font-size:.89rem;color:var(--ink-soft)}
.service-card li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--blush)}
.service-card a{margin-top:auto;color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem;display:inline-flex;gap:7px;align-items:center}
.service-card a:hover{color:var(--blush)}

/* ---------- Portfolio ---------- */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);align-items:start}
.portfolio-grid figure:nth-child(2){margin-top:clamp(26px,5vw,62px)}
.portfolio-grid figure{margin:0}
.portfolio-photo{height:clamp(260px,34vw,410px);border-radius:var(--radius);background-image:url("assets/makeup-portfolio.webp");background-repeat:no-repeat;background-size:300% 100%}
.photo-one{background-position:left center}
.photo-two{background-position:center center}
.photo-three{background-position:right center}
.portfolio-grid figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.86rem}
.portfolio-grid figcaption b{font-family:var(--font-display);font-size:1.05rem;font-weight:600}
.portfolio-grid figcaption span{color:var(--ink-soft);letter-spacing:.1em;font-size:.74rem}
@media (max-width:620px){
  .portfolio-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px}
  .portfolio-grid figure{flex:0 0 78%;scroll-snap-align:start}
}

/* ---------- Reviews ---------- */
.reviews-section{position:relative;background:var(--paper);isolation:isolate}
.reviews-section::before{content:"";position:absolute;inset:0;z-index:-1;background:url("assets/makeup-review-bg.webp") center/cover no-repeat;opacity:.42}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
@media (max-width:860px){.review-grid{grid-template-columns:1fr}}
.review-grid blockquote{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,2.6vw,32px)}
.review-grid blockquote::before{content:"\201C";display:block;font-family:var(--font-display);font-size:2.6rem;line-height:.6;color:var(--blush);margin-bottom:16px}
.review-grid p{font-size:.98rem;margin-bottom:18px}
.review-grid cite{font-style:normal;font-size:.84rem;color:var(--ink-soft);font-weight:600}
.review-note{margin-top:26px;font-size:.78rem;color:var(--ink-soft)}

/* ---------- Footer ---------- */
.footer{background:var(--paper);border-top:1px solid var(--line);padding:clamp(44px,5vw,66px) 0}
.footer-inner{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center}
.footer-inner>div p{color:var(--ink-soft);font-size:.9rem;margin-top:8px}
.footer nav{display:flex;flex-wrap:wrap;gap:22px}
.footer nav a{color:var(--ink-soft);text-decoration:none;font-size:.9rem}
.footer nav a:hover{color:var(--ink)}
.footer small{flex-basis:100%;color:var(--ink-soft);font-size:.78rem;padding-top:22px;border-top:1px solid var(--line)}
.footer small a{color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero-image{inset:0 0 0 24%}
  .hero::before{background:linear-gradient(90deg,var(--surface) 0%,var(--surface) 24%,rgba(246,239,233,.9) 42%,rgba(246,239,233,.2) 68%,transparent)}
}
@media (max-width:760px){
  .site-header nav{display:flex;gap:16px}
  .site-header nav a{font-size:.82rem}
  .header-inner{min-height:66px}
  .wordmark{font-size:1.6rem}
  /* .hero is a flex row on desktop; stacking it here stops the image collapsing to zero width. */
  .hero{display:block;min-height:0}
  .hero-image{position:relative;inset:auto;width:100%;height:320px;background-image:url("assets/makeup-hero-mobile.webp");background-position:center 30%}
  .hero::before{display:none}
  .hero-inner{padding:44px 0 32px}
  .hero-copy{max-width:100%}
  .hero-facts{gap:22px;margin-top:34px}
  .booking-heading{display:block}
  .booking-hours{margin-top:14px;max-width:100%}
}
@media (max-width:390px){.wordmark small{display:none}.site-header nav{gap:12px}}