/* ==========================================================================
   UYANA Skin Academy — 2 sections
   All values traced to docs/DESIGN-SYSTEM.md + live theme computed styles.

   SCOPING NOTE:
   Every rule below is scoped under .uyana-academy. Nothing here touches
   .lqd-highlight-inner or any other shared theme class, so "REAL SKIN
   JOURNEYS" and other existing eyebrows are unaffected. The highlight
   animation is a like-for-like copy of the theme's .lqd-highlight-grow-left
   behaviour (from hub-elementor-addons/assets/css/theme-elementor.min.css)
   under our own uya- prefixed class names.
   ========================================================================== */

.uyana-academy {
  /* Ink — DESIGN-SYSTEM.md §2 */
  --uya-ink: rgb(40, 39, 38);
  --uya-muted: rgba(40, 39, 38, 0.66);
  /* Resolved from the live theme:
     .lqd-highlight-inner { background-color: var(--color-primary) }
     --color-primary: var(--e-global-color-primary, #184341)
     --e-global-color-primary: #B3842E   <- live kit value */
  --uya-primary: var(--e-global-color-primary, #b3842e);
  --uya-container: 1340px;
  --uya-gutter: 24px;

  color: var(--uya-ink);
  font-family: "Lato", -apple-system, "Segoe UI", sans-serif;
  box-sizing: border-box;
}

.uyana-academy *,
.uyana-academy *::before,
.uyana-academy *::after {
  box-sizing: inherit;
}

.uyana-academy__inner {
  width: 100%;
  max-width: var(--uya-container);
  margin-inline: auto;
  padding-inline: var(--uya-gutter);
}

/* --------------------------------------------------------------------------
   Eyebrow — DESIGN-SYSTEM.md §4
   Lato 14 / 600 / uppercase / ink, over an animated grow-left colour box.
   No backdrop-filter here on purpose — this label is NOT glass.
   -------------------------------------------------------------------------- */

/* The pale box + side hairlines come from the widget container on the live
   "REAL SKIN JOURNEYS" eyebrow (Elementor element 18d2e58):
     background-color: #B3842E0D;  padding: 0 20px;
     border-width: 0 1px;          border-color: #BFBFBF;
   The label itself still carries no backdrop-filter — this is not glass.
   The hairlines live here, on the static box, so they never get squashed by
   the reveal transform below. */
.uya-eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 18px;
  padding: 10px 20px;
  font-family: "Lato", -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2; /* 16.8px */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--uya-ink);
  border-style: solid;
  border-width: 0 1px;
  border-color: #bfbfbf;
  backdrop-filter: none;
  overflow: hidden;
  z-index: 0;
}

.uya-highlight {
  position: static;
}

/* Keeps the theme's grow-left reveal (.lqd-highlight-grow-left: scaleX from
   transform-origin 0, .85s cubic-bezier(.3,.8,.35,1)) but reveals the pale
   #B3842E0D box itself rather than a gold underline bar. */
.uya-highlight-inner {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #b3842e0d;
  transform: scaleX(0);
  transform-origin: 0;
  transition: transform 0.85s cubic-bezier(0.3, 0.8, 0.35, 1);
  pointer-events: none;
}

.uya-highlight.is-in-view .uya-highlight-inner {
  transform: scaleX(1);
}

.uya-highlight-text {
  position: relative;
  z-index: 1;
}

/* Reduced motion: land straight on the revealed state, keep the label. */
@media (prefers-reduced-motion: reduce) {
  .uya-highlight-inner {
    transform: scaleX(1);
    transition: none;
  }
}

/* No-JS safety net — never leave the label unhighlighted. */
.uyana-academy.no-js .uya-highlight-inner {
  transform: scaleX(1);
  transition: none;
}

/* --------------------------------------------------------------------------
   Type — DESIGN-SYSTEM.md §3
   -------------------------------------------------------------------------- */

/* 25px at every breakpoint, per Nik. Note this is the live site's *tablet*
   H2 size — the live desktop H2 ("Why Uyana") is 40px, so this section runs a
   smaller heading than the rest of the site by choice, not by accident. */
.uya-h2 {
  margin: 0 0 16px;
  font-family: "Marcellus", Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--uya-ink);
}

.uya-subhead {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--uya-ink);
  max-width: 60ch;
}

.uya-body {
  margin: 0 0 32px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7; /* 27.2px */
  color: var(--uya-muted);
  max-width: 68ch;
}

@media (max-width: 767px) {
  .uya-subhead {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   Button — DESIGN-SYSTEM.md §6, inverted for a light background.
   §6 specifies a white border/white text, which only works over the dark hero
   image. Section 1 sits on white, so the same outline is drawn in ink.
   -------------------------------------------------------------------------- */

.uya-btn {
  display: inline-block;
  padding: 8px 30px;
  font-family: "Lato", -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7; /* 25.5px */
  color: var(--uya-ink);
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid var(--uya-ink);
  border-radius: 0;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.uya-btn:hover,
.uya-btn:focus-visible {
  background-color: var(--uya-ink);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .uya-btn {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Section 1 — Intro / positioning (text only, white background)
   -------------------------------------------------------------------------- */

.uya-intro {
  background-color: rgb(255, 255, 255);
  padding-block: 96px;
}

.uya-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: start;
}

/* The text column pins to the top of the viewport while the taller image
   column scrolls past it. align-self:start is what gives the sticky item a
   grid area taller than itself to travel within. */
.uya-intro__text {
  position: sticky;
  top: 40px;
  align-self: start;
}

/* Falls back to a single text column when the shortcode runs without an image. */
.uya-intro__layout--no-media {
  grid-template-columns: minmax(0, 1fr);
}

.uya-intro__text > *:last-child {
  margin-bottom: 0;
}

.uya-intro__media {
  margin: 0;
  /* Back to a normal frame height. It still sits taller than the text column,
     so the sticky column keeps a bit of travel — just far less than before. */
  height: 560px;
  perspective: 1000px;
}

/* The frame tilts; the image inside shifts the opposite way for a little
   depth. Both are transform-only, so nothing here can shift page layout.
   The resting state lives here; JS writes the whole transform string on
   pointermove. Deliberately no var() inside transform — support for that is
   patchy and it silently falls back to the default angle when unsupported. */
.uya-intro__frame {
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.5s cubic-bezier(0.3, 0.8, 0.35, 1);
  will-change: transform;
}

.uya-intro__frame.is-tracking {
  /* Follow the pointer closely while it is over the image, then ease back
     out when it leaves (the slower transition above takes over again). */
  transition: transform 0.12s linear;
}

.uya-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight overscale gives the counter-shift room to move without exposing
     an edge inside the frame. */
  transform: scale(1.06) translate3d(0px, 0px, 0);
  transition: transform 0.5s cubic-bezier(0.3, 0.8, 0.35, 1);
  will-change: transform;
}

.uya-intro__frame.is-tracking img {
  transition: transform 0.12s linear;
}

/* Coarse pointers have no hover, and reduced motion means no tilt at all. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .uya-intro__frame,
  .uya-intro__frame img {
    transform: none;
    transition: none;
  }

  .uya-intro__media img {
    transform: none;
  }
}

@media (max-width: 1024px) {
  .uya-intro {
    padding-block: 64px;
  }

  .uya-intro__layout {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .uya-intro {
    padding-block: 48px;
  }

  .uya-intro__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  /* Single column — nothing to stick against. */
  .uya-intro__text {
    position: static;
  }

  .uya-intro__media {
    order: -1;
    height: 380px;
  }
}

/* --------------------------------------------------------------------------
   Section 2 — Curriculum. Real glass, over a real background image.
   -------------------------------------------------------------------------- */

.uya-curriculum {
  position: relative;
  padding-block: 96px;
  background-color: rgb(240, 238, 235); /* fallback if the image fails */
  /* A white veil is layered over the texture to knock the grain back. Both
     layers are backgrounds of this same section, so they stay part of the
     cards' backdrop and the blur still reads — just more quietly.
     Raise --uya-bg-veil towards 1 for a fainter texture, lower it for more. */
  --uya-bg-veil: 0.82;
  background-image: linear-gradient(
      rgba(255, 255, 255, var(--uya-bg-veil)),
      rgba(255, 255, 255, var(--uya-bg-veil))
    ),
    var(--uya-bg-image);
  /* The image holds still while the section scrolls over it. Only the photo
     layer is fixed; the veil is a gradient and has nothing to parallax. */
  background-attachment: fixed, fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* iOS Safari does not honour background-attachment: fixed — it renders the
   image at the wrong scale or drops it entirely. Fall back to a normal
   scrolling background on touch devices and narrow screens. */
@media (max-width: 1024px), (hover: none) {
  .uya-curriculum {
    background-attachment: scroll, scroll;
  }
}

@media (max-width: 1024px) {
  .uya-curriculum {
    padding-block: 64px;
  }
}

@media (max-width: 767px) {
  .uya-curriculum {
    padding-block: 48px;
  }
}

.uya-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 1200px) {
  .uya-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .uya-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Exact values from DESIGN-SYSTEM.md §5b (live location cards). */
.uya-card {
  background-color: rgba(237, 237, 237, 0.5);
  border: 1px solid rgba(198, 198, 198, 0.45);
  border-radius: 8px;
  backdrop-filter: brightness(1) contrast(1) saturate(1) blur(10px)
    hue-rotate(0deg);
  -webkit-backdrop-filter: brightness(1) contrast(1) saturate(1) blur(10px)
    hue-rotate(0deg);
  padding: 28px 24px;
  /* Colour-only transition — nothing here can shift layout. */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.uya-card:hover {
  background-color: rgba(237, 237, 237, 0.72);
  border-color: rgba(198, 198, 198, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .uya-card {
    transition: none;
  }
}

.uya-card__num {
  display: block;
  margin-bottom: 14px;
  font-family: "Lato", -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--uya-primary);
}

.uya-card__name {
  margin: 0 0 10px;
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--uya-ink);
}

.uya-card__desc {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--uya-muted);
}