/* ============================================
   INFUSE Wellness — page-specific styles
   Loaded only by /wellness and /wellness/hire, AFTER style.css.

   Deliberately does NOT redeclare fonts, the palette, the reset, base
   typography, buttons, nav or footer — style.css owns all of those, and the
   whole point of this file is that the wellness pages inherit them unchanged.
   Everything below is either a layout helper or a component that exists
   nowhere else on the site.
   ============================================ */

/* --- Section shells --- */
.wl-wrap { max-width: var(--max-width); margin: 0 auto; padding: 72px 24px; }
.wl-tint { background: var(--green-light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wl-white { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wl-dark { background: var(--green-primary); color: var(--warm-white); }
.wl-dark h2, .wl-dark h3 { color: var(--warm-white); }
.wl-dark p { color: var(--green-light); }
.wl-dark .wl-eyebrow { color: var(--green-mid); }
.wl-section { scroll-margin-top: calc(var(--nav-height) + 10px); }

/* --- Small type --- */
.wl-eyebrow { font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--green-secondary); margin-bottom: 12px; }
.wl-lead { font-size: 1.0625rem; line-height: 1.7; color: var(--mid-text); max-width: 58ch; margin-top: 16px; }
.wl-hero-lead { font-size: clamp(1.0625rem, 2.4vw, 1.25rem); line-height: 1.6; color: var(--mid-text); max-width: 52ch; margin-top: 22px; }
.wl-note { margin-top: 20px; font-size: 0.9375rem; line-height: 1.7; }

/* --- Button rows (buttons themselves are the site's .btn) --- */
.wl-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* --- Grids + cards --- */
.wl-grid { display: grid; gap: 28px; margin-top: 40px; }
.wl-g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wl-g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: start; }
.wl-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.wl-card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.wl-card h3 { font-size: 1.5rem; }
.wl-card p { font-size: 1rem; line-height: 1.65; color: var(--mid-text); }
.wl-card .wl-btns { margin-top: auto; padding-top: 16px; }
.wl-role { font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-secondary); }
.wl-card-alt { background: var(--green-mid); border-color: var(--green-mid); padding: 32px 28px; gap: 14px; justify-content: center; }
.wl-card-alt p { color: #40484a; }
.wl-card-alt .wl-eyebrow { color: #4a5450; margin: 0; }

/* --- Card imagery ---
   height:auto is required — the width/height HTML attributes are presentational
   hints that otherwise beat aspect-ratio and stretch the image. */
.wl-pimg { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; border-bottom: 1px solid var(--border); background: var(--green-light); }
.wl-rimg { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; border-bottom: 1px solid var(--border); background: var(--green-light); }

/* Practitioner image doubles as a link to their site. tabindex="-1" keeps it out
   of the tab order so keyboard users hit the button once, not the same target twice. */
.wl-cardlink { display: block; position: relative; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; }
.wl-cardlink .wl-pimg, .wl-cardlink .wl-brandpanel { transition: transform 0.35s ease, filter 0.35s ease; }
.wl-cardlink:hover .wl-pimg, .wl-cardlink:focus-visible .wl-pimg { transform: scale(1.03); filter: brightness(1.04); }
.wl-cardlink:hover .wl-brandpanel, .wl-cardlink:focus-visible .wl-brandpanel { filter: brightness(1.03); }
.wl-cardlink:focus-visible { outline: 3px solid var(--green-primary); outline-offset: -3px; }

/* --- Brand panel — stands in for a portrait we don't have yet.
   Uses Spray Tan by Lou's own palette and wordmark font, not ours, so the card
   reads as her brand rather than a gap in ours. Oswald is hers, not a site font,
   which is why it is declared here and not in style.css. --- */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/oswald-600.woff2') format('woff2'); }
.wl-brandpanel {
  --lou-dark: #1A0A04; --lou-gold: #C9973A; --lou-cream: #FDF8F0; --lou-sand: #EDE0CB;
  width: 100%; aspect-ratio: 1/1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
  background: linear-gradient(160deg, var(--lou-cream), var(--lou-sand));
  border-bottom: 1px solid var(--border);
}
.wl-brandpanel .wl-wm { font-family: 'Oswald', var(--font-main); font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lou-dark); }
.wl-brandpanel .wl-rule { width: 44px; height: 2px; background: var(--lou-gold); }
.wl-brandpanel .wl-sb { font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lou-gold); font-weight: 600; }

/* --- Floor plan — stands in for the studio photo while the room is a building site --- */
.wl-plan { width: 100%; aspect-ratio: 3/2; display: block; background: var(--green-light); border-bottom: 1px solid var(--border); }
.wl-plan text { font-family: var(--font-main); fill: var(--mid-text); }
.wl-plan .dim { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.wl-plan .area { font-size: 15px; font-weight: 600; fill: var(--dark-text); letter-spacing: 0.04em; }
.wl-plan .cap { font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--green-secondary); }

/* --- Spec lists --- */
.wl-spec { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.wl-spec li { display: flex; gap: 10px; font-size: 0.9375rem; color: var(--mid-text); }
.wl-spec li::before { content: "—"; color: var(--green-secondary); }

/* --- Rates table --- */
.wl-rates { margin-top: 36px; background: var(--warm-white); color: var(--dark-text); border-radius: var(--radius); overflow: hidden; }
.wl-rates .rh, .wl-rates .rr { display: grid; grid-template-columns: 1fr 130px; align-items: baseline; }
.wl-rates .rh { padding: 14px 20px; background: var(--dark-text); color: var(--warm-white); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; }
.wl-rates .rr { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.wl-rates .rr:last-child { border-bottom: 0; }
.wl-rates .lbl { font-size: 0.9375rem; line-height: 1.45; padding-right: 12px; }
.wl-rates .basis { display: block; font-size: 0.8125rem; color: var(--green-secondary); }
.wl-rates .amt { text-align: right; font-size: 1.0625rem; font-weight: 600; color: var(--dark-text); }
.wl-rates .quote { text-align: right; font-size: 0.875rem; font-weight: 600; color: var(--green-primary); }

/* --- Contact pairs --- */
.wl-contact { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.wl-contact dt { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-secondary); }
.wl-contact dd { margin-top: 4px; font-size: 1.0625rem; }

@media (max-width: 700px) {
  .wl-wrap { padding: 48px 20px; }
  .wl-rates .rh, .wl-rates .rr { grid-template-columns: 1fr 100px; }
}