/* ==========================================================================
   Yazmin's Hair Salon — app.css (v2). Warm rose-gold / copper / cream.
   Loaded after the critical inline CSS in head.php. Editorial, alive, mobile.
   ========================================================================== */

/* ---- Buttons: variants ---- */
.btn--lg{padding:1.05rem 1.8rem;min-height:3.4rem;font-size:1.05rem}
.btn--ghost{background:transparent;color:var(--text);border:1.5px solid var(--border-strong)}
.btn--ghost:hover{background:var(--primary-tint);border-color:var(--primary);color:var(--copper-700);box-shadow:none;transform:translateY(-2px)}
[data-theme="dark"] .btn--ghost:hover{color:var(--text)}

.hl{color:var(--copper-600);font-style:italic}

/* ---- Mobile menu ---- */
.mobile-menu{position:fixed;inset:0 0 auto 0;top:var(--header-h);z-index:99;background:color-mix(in oklch,var(--bg) 97%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;gap:.35rem;padding:1.2rem var(--gutter) 1.8rem;border-block-end:1px solid var(--border);
  transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
.mobile-menu[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a{padding:.9rem .4rem;font-size:1.12rem;font-weight:600;text-decoration:none;border-block-end:1px solid var(--border)}
.mobile-menu a.btn{justify-content:center;border:none;margin-top:.8rem;color:var(--primary-contrast)}

/* ---- Section scaffolding ---- */
.section{padding-block:clamp(3.4rem,7vw,6rem)}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem 2.5rem;align-items:end;margin-block-end:2.6rem}
.sec-title{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.1rem);line-height:1.04}
.sec-lead{color:var(--text-muted);font-size:1.08rem;max-width:44ch}
@media (max-width:48rem){.sec-head{grid-template-columns:1fr;align-items:start}}

/* ============================ HERO — one screen ============================ */
.hero{position:relative;min-height:calc(100svh - var(--header-h));display:grid;align-items:center;
  padding-block:clamp(1rem,3svh,2.4rem);overflow:clip}
.hero__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 55% at 82% 18%, color-mix(in oklch,var(--rose-400) 30%,transparent), transparent 70%),
    radial-gradient(55% 50% at 12% 88%, color-mix(in oklch,var(--copper-500) 20%,transparent), transparent 72%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  transform:scale(var(--hero-scale,1));transform-origin:center top}
.hero__eyebrow{margin-block-end:1rem}
.hero__title{font-size:clamp(2rem,1.2rem + 3.1vw + 1.2svh,3.6rem);letter-spacing:-.015em;margin-block-end:1.1rem}
.hero__title em{color:var(--copper-600);font-style:italic}
.hero__lead{color:var(--text-muted);font-size:clamp(1.02rem,.98rem + .4vw,1.2rem);max-width:40ch;margin-block-end:1.7rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-block-end:1.6rem}
.hero__meta{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding:0}
.hero__meta li{display:inline-flex;align-items:center;gap:.5ch;font-size:.92rem;font-weight:600;color:var(--text-muted)}
.hero__meta svg{color:var(--copper-600)}
.hero__media{position:relative;margin:0}
.hero__media img{width:100%;max-height:calc(100svh - var(--header-h) - 4rem);object-fit:cover;border-radius:1.4rem;
  box-shadow:0 30px 60px -30px color-mix(in oklch,var(--copper-800) 60%,transparent)}
.hero__badge{position:absolute;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5ch;
  padding:.5rem .95rem;border-radius:var(--radius-pill);font-size:.8rem;font-weight:600;
  background:color-mix(in oklch,var(--bg) 82%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border)}
.hero__badge svg{color:var(--copper-600)}
/* Mobile portrait: text first (headline + call immediately above the fold), bounded image below */
@media (max-width:52rem){
  .hero{min-height:calc(100svh - var(--header-h));padding-block:1rem 1.3rem}
  .hero-grid{grid-template-columns:1fr;gap:1rem;align-content:center}
  .hero__media{order:2}
  .hero__media img{max-height:30svh}
  .hero__lead{margin-block-end:1.1rem}
  .hero__meta{display:none}
}
@media (max-width:52rem) and (max-height:700px){.hero__lead{display:none}.hero__media img{max-height:32svh}}
/* Landscape phone / very short + narrow: keep it two-column and compact */
@media (max-width:52rem) and (max-height:560px) and (orientation:landscape){
  .hero{padding-block:.6rem}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:1rem;align-items:center}
  .hero__media{order:0}
  .hero__media img{max-height:calc(100svh - var(--header-h) - 1.6rem)}
  .hero__title{font-size:clamp(1.5rem,4.4vw,2rem);margin-block-end:.5rem}
  .hero__eyebrow{margin-block-end:.4rem}
  .hero__lead{display:none}.hero__meta{display:none}
  .hero__ctas{margin-block-end:0}
  .btn--lg{min-height:2.7rem;padding:.7rem 1.2rem;font-size:.95rem}
}
/* Wide-but-short desktop tiers */
@media (min-width:52rem) and (max-height:820px){.hero__title{font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem)}.hero__lead{margin-block-end:1.2rem}}
@media (min-width:52rem) and (max-height:660px){.hero__lead{font-size:1rem;margin-block-end:1rem}.hero__meta{display:none}.btn--lg{min-height:3rem;padding:.85rem 1.5rem}}
@media (min-width:52rem) and (max-height:560px){.hero__title{font-size:2.2rem}.hero__eyebrow{margin-block-end:.5rem}}

/* ============================ SERVICES ============================ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1.1rem}
.svc{position:relative;background:var(--bg-elevated);border:1px solid var(--border);border-radius:1.1rem;padding:1.7rem 1.5rem 1.5rem;
  overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.svc::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--copper-500),var(--rose-400));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.svc:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px color-mix(in oklch,var(--copper-800) 65%,transparent);border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc__n{font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--copper-500);font-weight:600}
.svc__ic{display:grid;place-items:center;width:3rem;height:3rem;border-radius:.9rem;margin:.7rem 0 1rem;
  background:var(--primary-tint);color:var(--copper-700)}
[data-theme="dark"] .svc__ic{color:var(--primary)}
.svc__title{font-size:1.32rem;margin-block-end:.5rem}
.svc__desc{color:var(--text-muted);font-size:.98rem;margin-block-end:1.1rem}
.svc__price{display:inline-flex;align-items:center;gap:.5ch;font-size:.85rem;font-weight:600;color:var(--copper-700);
  background:var(--primary-tint);padding:.4rem .8rem;border-radius:var(--radius-pill)}
[data-theme="dark"] .svc__price{color:var(--primary)}
.svc-note{margin-block-start:1.6rem;text-align:center;color:var(--text-muted);font-style:italic;font-family:var(--font-display);font-size:1.15rem}

/* ============================ LOOK BOOK (star) ============================ */
.lookbook{background:var(--bg-sunken)}
.lookbook__head{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem 2.5rem;align-items:end;margin-block-end:1.8rem}
@media (max-width:48rem){.lookbook__head{grid-template-columns:1fr}}
.lookfilter{display:flex;flex-wrap:wrap;gap:.55rem;margin-block-end:1rem}
.lookfilter__btn{font:inherit;font-size:.9rem;font-weight:600;letter-spacing:.01em;cursor:pointer;
  padding:.6rem 1.15rem;border-radius:var(--radius-pill);border:1.5px solid var(--border-strong);
  background:var(--bg-elevated);color:var(--text);transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease}
.lookfilter__btn:hover{border-color:var(--copper-500);transform:translateY(-1px)}
.lookfilter__btn[aria-pressed="true"]{background:var(--primary);color:var(--primary-contrast);border-color:var(--primary)}
.lookbook__count{font-size:.9rem;color:var(--text-muted);margin-block-end:1.5rem;font-weight:500}
.lookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1.1rem}
.lookcard{display:flex;flex-direction:column;background:var(--bg-elevated);border:1px solid var(--border);border-radius:1.1rem;overflow:hidden;
  transition:opacity .45s ease,transform .45s ease,box-shadow .3s ease}
.lookcard.is-hidden{display:none}
.lookcard:hover{box-shadow:0 22px 46px -30px color-mix(in oklch,var(--copper-800) 70%,transparent)}
.lookcard__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.lookcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.lookcard:hover .lookcard__media img{transform:scale(1.06)}
.lookcard__tag{position:absolute;left:.7rem;top:.7rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.32rem .7rem;border-radius:var(--radius-pill);background:color-mix(in oklch,var(--bg) 84%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--copper-700);border:1px solid var(--border)}
[data-theme="dark"] .lookcard__tag{color:var(--primary)}
.lookcard__body{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.95rem 1rem 1.05rem}
.lookcard__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.lookcard__txt b{font-family:var(--font-display);font-size:1.12rem;font-weight:600}
.lookcard__txt span{font-size:.82rem;color:var(--text-muted)}
.lookcard__book{flex-shrink:0;display:inline-flex;align-items:center;gap:.45ch;font-size:.8rem;font-weight:700;text-decoration:none;
  padding:.55rem .85rem;border-radius:var(--radius-pill);background:var(--primary-tint);color:var(--copper-700);
  border:1px solid transparent;transition:background .2s ease,color .2s ease,transform .15s ease}
[data-theme="dark"] .lookcard__book{color:var(--primary)}
.lookcard__book:hover{background:var(--primary);color:var(--primary-contrast);transform:translateY(-1px)}
.lookbook__foot{margin-block-start:1.6rem;color:var(--text-muted);font-size:.9rem;max-width:60ch}

/* ============================ WHY ============================ */
.why__head{margin-block-end:2.4rem;max-width:32ch}
.why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem 2rem}
.why__item{padding-inline-start:0}
.why__ic{display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:.85rem;margin-block-end:.9rem;
  background:var(--primary-tint);color:var(--copper-700);border:1px solid var(--border)}
[data-theme="dark"] .why__ic{color:var(--primary)}
.why__item h3{font-size:1.22rem;margin-block-end:.4rem}
.why__item p{color:var(--text-muted);font-size:.98rem}

/* ============================ THE SALON (split) ============================ */
.studio__split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
@media (max-width:52rem){.studio__split{grid-template-columns:1fr}}
.studio__media{position:relative}
.studio__media>img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:1.3rem;
  box-shadow:0 30px 60px -34px color-mix(in oklch,var(--copper-800) 60%,transparent)}
.studio__inset{position:absolute;right:-.6rem;bottom:-1.4rem;width:44%;border-radius:1rem;overflow:hidden;
  border:5px solid var(--bg);box-shadow:0 20px 40px -22px color-mix(in oklch,var(--copper-800) 60%,transparent)}
.studio__inset img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.studio__body .sec-title{margin-block:.5rem .9rem}
.studio__lead{color:var(--text-muted);font-size:1.08rem;margin-block-end:1.5rem;max-width:42ch}
@media (max-width:52rem){.studio__inset{width:38%;bottom:-1rem}}

/* ============================ VISIT ============================ */
.visit__card{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:1.4rem;padding:clamp(1.6rem,4vw,3rem)}
@media (max-width:52rem){.visit__card{grid-template-columns:1fr}}
.visit__title{font-size:clamp(1.8rem,1.2rem + 2.2vw,2.8rem);margin-block:.4rem .8rem}
.visit__title em{color:var(--copper-600);font-style:italic}
.visit__lead{color:var(--text-muted);font-size:1.05rem;margin-block-end:1.5rem;max-width:44ch}
.visit__ctas{display:flex;flex-wrap:wrap;gap:.8rem}
.visit__facts{list-style:none;padding:0;display:flex;flex-direction:column;gap:1rem;align-self:center}
.visit__facts li{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem;border-radius:.9rem;
  background:var(--bg-sunken);border:1px solid var(--border)}
.visit__k{display:inline-flex;align-items:center;gap:.5ch;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--copper-600)}
.visit__v{font-weight:600;line-height:1.35}

/* ============================ FAQ ============================ */
.faq{max-width:52rem}
.faq__item{border-block-end:1px solid var(--border)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.25rem .2rem;background:none;border:none;cursor:pointer;text-align:left;color:inherit;
  font-family:var(--font-display);font-size:1.2rem;font-weight:600}
.faq__chev{display:grid;place-items:center;color:var(--copper-600);transition:transform .3s ease;flex-shrink:0}
.faq__item[data-open="true"] .faq__chev{transform:rotate(180deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.faq__item[data-open="true"] .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 .2rem 1.3rem;color:var(--text-muted);max-width:60ch}

/* ============================ FOOTER ============================ */
.foot{background:var(--bg-sunken);border-block-start:1px solid var(--border)}
.callband{background:linear-gradient(120deg,var(--copper-700),var(--copper-600) 55%,var(--rose-400));color:#fff}
.callband__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem 2rem;
  padding-block:clamp(2rem,4vw,3rem)}
.callband__eyebrow{color:color-mix(in oklch,#fff 82%,transparent)}
.callband__h{font-family:var(--font-display);font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem);font-weight:600;line-height:1.05;margin-block-start:.5rem}
.callband__h em{font-style:italic;color:color-mix(in oklch,#fff 90%,var(--nude-300))}
.callband__act{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.callband__phone{display:inline-flex;align-items:center;gap:.6ch;font-size:clamp(1.3rem,1rem + 1.4vw,1.8rem);font-weight:700;
  text-decoration:none;color:#fff;padding:.7rem 1.3rem;border-radius:var(--radius-pill);
  background:color-mix(in oklch,#000 16%,transparent);border:1.5px solid color-mix(in oklch,#fff 45%,transparent);transition:background .2s ease,transform .2s ease}
.callband__phone:hover{background:color-mix(in oklch,#000 26%,transparent);transform:translateY(-2px)}
.callband__sub{font-size:.9rem;color:color-mix(in oklch,#fff 86%,transparent);max-width:34ch}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1.1fr;gap:2rem;padding-block:clamp(2.4rem,4vw,3.4rem) 2rem}
@media (max-width:60rem){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:34rem){.foot__grid{grid-template-columns:1fr}}
.foot__brand .brand{margin-block-end:1rem}
.foot__tag{color:var(--text-muted);font-size:.95rem;max-width:38ch}
.foot__col h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--copper-600);margin-block-end:1rem}
.foot__hours{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem}
.foot__hours li{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;border-block-end:1px dashed var(--border);padding-block-end:.45rem}
.foot__hours b{font-weight:600}
.foot__note{margin-block-start:.8rem;font-size:.85rem;color:var(--text-muted)}
.foot__nap{font-style:normal;line-height:1.6;font-size:.95rem;margin-block-end:1rem}
.foot__nap a{color:var(--copper-700);font-weight:600;text-decoration:none}
[data-theme="dark"] .foot__nap a{color:var(--primary)}
.foot__links{display:flex;flex-direction:column;gap:.5rem}
.foot__links a{font-size:.92rem;text-decoration:none;color:var(--text-muted)}
.foot__links a:hover{color:var(--copper-700)}
[data-theme="dark"] .foot__links a:hover{color:var(--primary)}
.foot__social{display:flex;gap:.8rem;margin-block-start:.9rem}
.foot__social a{font-size:.9rem;color:var(--copper-700);text-decoration:none;font-weight:600}
/* Map facade */
.mapfacade{position:relative;width:100%;min-height:12rem;height:100%;border:1px solid var(--border);border-radius:1rem;overflow:hidden;cursor:pointer;
  background:var(--bg-elevated);display:grid;place-items:center;gap:.4rem;color:var(--text)}
.mapfacade__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:22px 22px}
.mapfacade__pin{position:relative;color:var(--copper-600)}
.mapfacade__label{position:relative;display:inline-flex;align-items:center;gap:.4ch;font-size:.82rem;font-weight:600}
.mapfacade__label svg{color:var(--copper-600)}
.mapfacade__cta{position:relative;font-size:.78rem;font-weight:700;color:var(--primary-contrast);background:var(--primary);padding:.4rem .85rem;border-radius:var(--radius-pill)}
.foot__map iframe{width:100%;min-height:12rem;height:100%;border:0;border-radius:1rem}
.foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;
  padding-block:1.3rem 1.6rem;border-block-start:1px solid var(--border);font-size:.85rem;color:var(--text-muted)}
.studio-credit{font-size:.85rem;color:var(--text-muted)}
.studio-credit__link{color:var(--copper-700);text-decoration:none;font-weight:600}
[data-theme="dark"] .studio-credit__link{color:var(--primary)}

/* ============================ STICKY CALL (mobile) ============================ */
.stickycall{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:90;display:none;
  align-items:center;gap:.6ch;padding:.85rem 1.5rem;border-radius:var(--radius-pill);text-decoration:none;font-weight:700;
  background:var(--primary);color:var(--primary-contrast);
  box-shadow:0 14px 32px -12px color-mix(in oklch,var(--copper-800) 80%,transparent)}
@media (max-width:52rem){.stickycall{display:inline-flex}}

/* ============================ REVEAL / MOTION ============================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .hero-grid{transform:none !important}
  .lookcard:hover .lookcard__media img,.svc:hover,.btn:hover,.lookfilter__btn:hover{transform:none}
}