/* Cocoon Lux preview: the wellness hub (wp/src/pages/wellness.html), shared by the aesthetics and packages hubs, which
   are built on the same classes. Editorial pass, 13 Oct 2026 (design/editorial/SPEC.md 9): the hero, the index of
   group names, the groups (an H2, one paragraph, one photograph, rows of name + line) and the close (the book label as
   the heading, a photograph, two buttons). No eyebrows, no counts, no icons: every row ends in a CSS chevron. Mobile
   first: phones below 768px, a tablet layout from 768 (the hero as on desktop, the groups stacked), the two-column
   groups from 1024. Every rule is scoped under .lux-wellness. No text under 16px, body 17px (18px from 768). */

.lux-wellness main{color:var(--espresso)}
.lux-wellness .lux-wh-h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.12;color:var(--espresso);text-wrap:balance}
/* the hub's own buttons never fall under the 16px floor (base.css sets 15px) */
.lux-wellness .lux-wh-hero__actions .lux-pill,.lux-wellness .lux-wh-closing__actions .lux-pill{font-size:16px}
/* one chevron for every row that leads on (CSS only, no icons), as the treatment template's name rows */
.lux-wellness :is(.lux-wh-idx,.lux-wh-row)::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;margin-top:-6px;border-top:1px solid var(--gold-text);border-right:1px solid var(--gold-text);transform:rotate(45deg);transition:transform .3s var(--ease)}
.lux-wellness :is(.lux-wh-idx,.lux-wh-row):hover::after{transform:translateX(4px) rotate(45deg)}

/* ---------- hero: the photo on top on phones, filling the hero with the words bottom left from 768 ---------- */
.lux-wellness .lux-wh-hero{position:relative;overflow:hidden;background:var(--espresso);color:var(--ivory)}
.lux-wellness .lux-wh-hero__media{position:absolute;top:0;left:0;width:100%;height:500px}
.lux-wellness .lux-wh-hero__media img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.lux-wellness .lux-wh-hero__scrim{position:absolute;top:0;left:0;right:0;height:501px;background:linear-gradient(to bottom,rgba(42,33,27,.55) 0%,rgba(42,33,27,.3) 24%,rgba(42,33,27,.76) 52%,rgba(42,33,27,.92) 76%,#2A211B 100%)}
.lux-wellness .lux-wh-hero__content{position:relative;padding:calc(var(--h) + 96px) var(--gutter) 52px}
.lux-wellness .lux-wh-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0 0 8px;padding:0;list-style:none;font-size:16px;line-height:1.5;color:rgba(251,248,242,.86)}
.lux-wellness .lux-wh-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:rgba(251,248,242,.86)}
.lux-wellness .lux-wh-crumbs a:hover{color:var(--gold-pale)}
.lux-wellness .lux-wh-crumbs [aria-current]{color:var(--ivory)}
.lux-wellness .lux-wh-hero__title{font-family:var(--serif);font-weight:400;font-size:46px;line-height:1.06;letter-spacing:-.01em;color:var(--ivory);text-wrap:balance}
.lux-wellness .lux-wh-hero__lead{margin:20px 0 0;color:var(--lead-dark)}
.lux-wellness .lux-wh-hero__actions{margin-top:28px}
/* the phone layout shows the Book button only */
.lux-wellness .lux-wh-hero__explore{display:none}
.lux-wellness .lux-wh-rating{margin:18px 0 0;font-size:16px;line-height:1.5;color:rgba(251,248,242,.88)}
.lux-wellness .lux-wh-rating__n{font-weight:500;color:var(--gold-pale)}

/* ---------- the index: the groups as a hairline list of names ---------- */
.lux-wellness .lux-wh-index{padding:56px 0;border-bottom:1px solid var(--line-soft);scroll-margin-top:0}
.lux-wellness .lux-wh-index__title{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.12;color:var(--espresso)}
.lux-wellness .lux-wh-index__lead{margin:16px 0 28px;font-size:17px;line-height:1.7;color:var(--umber)}
.lux-wellness .lux-wh-index__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.lux-wellness .lux-wh-index__list li{border-bottom:1px solid var(--line)}
.lux-wellness .lux-wh-idx{position:relative;display:flex;align-items:center;min-height:64px;padding:14px 40px 14px 0;font-family:var(--serif);font-size:23px;line-height:1.25;color:var(--espresso);transition:color .3s}
.lux-wellness .lux-wh-idx:hover{color:var(--gold-text)}

/* ---------- the groups: the words and the photograph, then the rows ---------- */
.lux-wellness .lux-wh-groups{padding-inline:0}
.lux-wellness .lux-wh-group{padding:56px var(--gutter);scroll-margin-top:0}
.lux-wellness .lux-wh-group .lux-wh-h2{margin-bottom:14px}
.lux-wellness .lux-wh-group__desc{font-size:17px;line-height:1.7;color:var(--umber)}
.lux-wellness .lux-wh-group__photo{margin:28px 0 0}
.lux-wellness .lux-wh-group__photo .lux-frame{aspect-ratio:3/2}
.lux-wellness .lux-wh-group--massage .lux-wh-group__photo img{object-position:70% 50%}
.lux-wellness .lux-wh-group--vitamin-iv .lux-wh-group__photo img{object-position:35% 50%}
.lux-wellness .lux-wh-group--technology .lux-wh-group__photo img{object-position:50% 55%}
.lux-wellness .lux-wh-list{margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.lux-wellness .lux-wh-list li{border-bottom:1px solid var(--line)}
/* a row is one link: the name, then the line from the data file */
.lux-wellness .lux-wh-row{position:relative;display:block;padding:22px 40px 22px 0;color:var(--espresso)}
.lux-wellness .lux-wh-row__name{display:block;font-family:var(--serif);font-size:23px;line-height:1.25;transition:color .3s}
.lux-wellness .lux-wh-row__desc{display:block;margin-top:6px;font-size:17px;line-height:1.6;color:var(--umber)}
.lux-wellness .lux-wh-row:hover .lux-wh-row__name{color:var(--gold-text)}

/* ---------- the close: the book label as the heading, the two buttons, a photograph ---------- */
.lux-wellness .lux-wh-closing{padding:56px 0;background:var(--espresso);color:var(--ivory)}
.lux-wellness .lux-wh-closing__grid{display:flex;flex-direction:column;gap:36px}
.lux-wellness .lux-wh-closing__title{margin:0 0 24px;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.12;color:var(--ivory);text-wrap:balance}
.lux-wellness .lux-wh-closing__actions{display:flex;flex-direction:column;gap:12px}
/* the square 800px interiors are never drawn wider than their file (wpcheck) */
.lux-wellness .lux-wh-closing__photo{margin:0;max-width:800px}
.lux-wellness .lux-wh-closing__photo .lux-frame{aspect-ratio:4/3}

/* 600 to 767: the phone layout in the centred column */
@media (min-width:600px) and (max-width:767.98px){
  .lux-wellness .lux-wh-hero__inner,.lux-wellness .lux-wh-group{max-width:592px;margin-inline:auto}
}

/* ---------- 768 and up ---------- */
@media (min-width:768px){
  .lux-wellness .lux-wh-h2{font-size:40px;line-height:1.1}

  .lux-wellness .lux-wh-hero{display:flex;align-items:flex-end;min-height:680px;min-height:max(680px,min(100vh,860px));min-height:max(680px,min(100svh,860px))}
  .lux-wellness .lux-wh-hero__media{height:100%}
  .lux-wellness .lux-wh-hero__media img{object-position:50% 60%}
  .lux-wellness .lux-wh-hero__scrim{height:auto;bottom:0;background:linear-gradient(to top,rgba(28,20,14,.5) 0%,rgba(28,20,14,0) 45%),linear-gradient(90deg,rgba(28,20,14,.88) 0%,rgba(28,20,14,.74) 42%,rgba(28,20,14,.34) 78%,rgba(28,20,14,.24) 100%)}
  .lux-wellness .lux-wh-hero__content{width:100%;padding:calc(var(--h) + 108px) var(--gutter) 104px}
  .lux-wellness .lux-wh-hero__inner{max-width:820px}
  .lux-wellness .lux-wh-crumbs ol{gap:12px;margin-bottom:28px;letter-spacing:.06em}
  .lux-wellness .lux-wh-crumbs a{min-height:0;margin:-10px 0;padding:10px 0}
  .lux-wellness .lux-wh-hero__title{font-size:clamp(52px,5.6vw,80px);line-height:1.04}
  .lux-wellness .lux-wh-hero__lead{max-width:620px;margin-top:30px;font-size:20px;line-height:1.7;text-wrap:pretty}
  .lux-wellness .lux-wh-hero__actions{flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:44px}
  .lux-wellness .lux-wh-hero__actions .lux-pill{width:auto;min-height:56px;padding:0 34px}
  .lux-wellness .lux-wh-hero__explore{display:inline-flex}
  .lux-wellness .lux-wh-rating{margin-top:22px}

  .lux-wellness .lux-wh-index{padding:var(--sec) 0}
  .lux-wellness .lux-wh-index__title{font-size:44px;line-height:1.1}
  .lux-wellness .lux-wh-index__lead{max-width:480px;margin:24px 0 36px;font-size:18px}
  .lux-wellness .lux-wh-idx{min-height:72px;padding:16px 48px 16px 0;font-size:26px}

  .lux-wellness .lux-wh-group{padding:var(--sec) var(--gutter)}
  .lux-wellness .lux-wh-group+.lux-wh-group{border-top:1px solid var(--line-soft)}
  .lux-wellness .lux-wh-group .lux-wh-h2{margin-bottom:20px}
  .lux-wellness .lux-wh-group__desc{font-size:18px}
  .lux-wellness .lux-wh-group__photo{margin-top:36px}
  .lux-wellness .lux-wh-list{margin-top:40px}
  .lux-wellness .lux-wh-row{padding:30px 48px 30px 0}
  .lux-wellness .lux-wh-row__name{font-size:28px;line-height:1.22}
  .lux-wellness .lux-wh-row__desc{max-width:580px;margin-top:8px;font-size:18px;line-height:1.7}

  .lux-wellness .lux-wh-closing{padding:var(--sec) 0}
  .lux-wellness .lux-wh-closing__grid{gap:48px}
  .lux-wellness .lux-wh-closing__title{margin-bottom:32px;font-size:clamp(42px,4.2vw,54px);line-height:1.1}
  .lux-wellness .lux-wh-closing__actions{flex-direction:row;flex-wrap:wrap;gap:14px}
  .lux-wellness .lux-wh-closing__actions .lux-pill{width:auto;min-height:56px;padding:0 34px}
  .lux-wellness .lux-wh-closing__actions .lux-pill--wa{padding:0 32px}
}

/* ---------- 1024 and up: the two-column sections ---------- */
@media (min-width:1024px){
  .lux-wellness .lux-wh-hero__content{padding:calc(var(--h) + 108px) var(--gutter) 104px}
  .lux-wellness .lux-wh-index__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:96px;align-items:center}
  .lux-wellness .lux-wh-index__title{font-size:52px}
  .lux-wellness .lux-wh-index__lead{margin:28px 0 0}
  .lux-wellness .lux-wh-groups{padding-inline:var(--gutter)}
  .lux-wellness .lux-wh-group{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start;padding:120px 0;scroll-margin-top:24px}
  /* the words and the photograph are held while the rows scroll */
  .lux-wellness .lux-wh-group__aside{position:sticky;top:calc(var(--hc) + 48px);display:flex;flex-direction:column;gap:20px}
  .lux-wellness .lux-wh-group .lux-wh-h2{margin:0}
  .lux-wellness .lux-wh-h2{font-size:48px}
  .lux-wellness .lux-wh-group__photo{margin:16px 0 0}
  .lux-wellness .lux-wh-group__photo .lux-frame{aspect-ratio:4/3}
  .lux-wellness .lux-wh-list{margin:0}
  .lux-wellness .lux-wh-closing{padding:120px 0}
  .lux-wellness .lux-wh-closing__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:96px;align-items:center}
}

/* phones held sideways (768 or wider, 500 or less tall): a hero that fits one screen, nothing sticks */
@media (min-width:768px) and (max-height:500px){
  .lux-wellness .lux-wh-hero{min-height:0}
  .lux-wellness .lux-wh-hero__content{padding:calc(var(--h) + 8px) var(--gutter) 20px}
  .lux-wellness .lux-wh-crumbs{display:none}
  .lux-wellness .lux-wh-hero__title{font-size:36px}
  .lux-wellness .lux-wh-hero__lead{margin-top:12px;font-size:17px}
  .lux-wellness .lux-wh-hero__actions{margin-top:18px}
  .lux-wellness .lux-wh-group__aside{position:static}
}