/* Milestone 1 (Safety Baseline and CSS Isolation): every selector in
   this file is now scoped beneath .emt-journey-studio and every
   var() reference renamed to the --emt-js-* prefix (see
   styles/tokens.css) — no behavior/appearance change, only isolation
   from a host WordPress page's own styles. */

/* Reusable button system (Task 4). Applied via .btn + a modifier
   class alongside each button's existing structural/layout class —
   this file owns visual treatment only, not layout placement. */

.emt-journey-studio .btn[hidden] {
  display: none;
}

.emt-journey-studio .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--emt-js-space-1);
  min-height: 44px;
  padding: 0.9rem 1.5rem;
  border-radius: var(--emt-js-radius-md);
  font-family: var(--emt-js-font-body);
  font-size: var(--emt-js-text-button);
  font-weight: 400;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    border-color var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    color var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    transform var(--emt-js-motion-fast) var(--emt-js-ease-standard);
}

.emt-journey-studio .btn:active {
  transform: scale(0.985);
}

/* Primary — the one clear action on a screen */
.emt-journey-studio .btn--primary {
  background: var(--emt-js-color-terracotta-strong);
  border-color: var(--emt-js-color-terracotta-strong);
  color: #ffffff;
}

.emt-journey-studio .btn--primary:hover {
  background: var(--emt-js-color-terracotta-deep);
  border-color: var(--emt-js-color-terracotta-deep);
}

.emt-journey-studio .btn--primary:disabled {
  background: var(--emt-js-color-disabled-bg);
  border-color: var(--emt-js-color-disabled-bg);
  color: var(--emt-js-color-disabled-text);
  cursor: not-allowed;
  transform: none;
}

/* Secondary — almost disappears until touched; a border only appears
   on interaction, so it never competes with the primary action. */
.emt-journey-studio .btn--secondary {
  background: transparent;
  border-color: transparent;
  color: var(--emt-js-color-ink-muted);
}

.emt-journey-studio .btn--secondary:hover {
  background: var(--emt-js-color-bg-alt);
  border-color: var(--emt-js-color-border);
  color: var(--emt-js-color-ink);
}

.emt-journey-studio .btn--secondary:disabled {
  color: var(--emt-js-color-disabled-text);
  border-color: transparent;
  cursor: not-allowed;
}

/* Text — the lightest action available, for something like "Change";
   underline only appears on interaction, not at rest. */
.emt-journey-studio .btn--text {
  min-height: auto;
  padding: 0.3rem 0.2rem;
  background: transparent;
  border-color: transparent;
  color: var(--emt-js-color-terracotta-strong);
  text-decoration: none;
}

.emt-journey-studio .btn--text:hover {
  color: var(--emt-js-color-terracotta-deep);
  text-decoration: underline;
}

/* Phase 4.15C: the shortcode-rendered Journey Studio launcher CTA
   ([emt_journey_studio_cta]/[emt_journey_cta]) — deliberately its own
   selector, NOT ".emt-journey-studio .btn--primary" above. That real
   button system only ever matches an element *inside* the modal (this
   file's own scoping principle, see styles/base.css's header comment);
   the shortcode CTA renders into ordinary page content, as a sibling
   of the modal, not a descendant of it, which is exactly why it used
   to inherit whatever the active theme applied to a bare/misc-classed
   button instead of anything from this plugin. Both PHP renderers
   (helpers.php's emt_journey_studio_render_cta()/
   emt_journey_studio_render_contextual_cta()) put the bare
   "emt-journey-studio" class on the button itself alongside this one —
   that's what makes var(--emt-js-color-*) below resolve to something
   real (tokens.css declares every one of them on plain
   ".emt-journey-studio", not :root) and, as a bonus, means a saved
   Appearance Color override (also emitted against plain
   ".emt-journey-studio") applies here too, automatically, with no
   second override mechanism needed.

   Never applies to .emt-journey-studio-launcher — the unrelated
   GoodLayers class ADAPTER (journey-booklet.js), which exists
   specifically to preserve an existing, site-owner-styled GoodLayers
   button's own appearance untouched. That element carries no Journey-
   Studio-rendered class at all; this rule cannot reach it. */
.emt-journey-studio-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--emt-js-space-1);
  min-height: 44px;
  padding: 0.9rem 1.75rem;
  border-radius: var(--emt-js-radius-md);
  font-family: var(--emt-js-font-body);
  font-size: var(--emt-js-text-button);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--emt-js-color-terracotta-strong);
  background: var(--emt-js-color-terracotta-strong);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    border-color var(--emt-js-motion-standard) var(--emt-js-ease-standard),
    transform var(--emt-js-motion-fast) var(--emt-js-ease-standard);
}

.emt-journey-studio-cta:hover {
  background: var(--emt-js-color-terracotta-deep);
  border-color: var(--emt-js-color-terracotta-deep);
  color: #ffffff;
}

.emt-journey-studio-cta:active {
  transform: scale(0.985);
}

.emt-journey-studio-cta:focus-visible {
  outline: 3px solid var(--emt-js-color-focus);
  outline-offset: 2px;
}

.emt-journey-studio-cta[hidden] {
  display: none;
}

/* Phase 4.15C (visual refinement pass): the page-side "Builder Cover"
   — a tall editorial brochure-cover card (helpers.php's
   emt_journey_studio_render_cover(), [emt_journey_studio_cover])
   rendered directly into ordinary WordPress page content, BEFORE the
   Journey Studio modal opens. This is a completely different surface
   from the modal's own inspiration panel
   (styles/journey-booklet.css's .journey-booklet__image) — no rule
   here targets that element, and no rule there targets this one.

   A flex column that fills whatever container it's placed in (a
   GoodLayers column, typically) — no fixed page coordinates, no
   position:fixed/absolute relative to the page, no assumption about
   page width. Height is a clamp() of viewport height, not a fixed
   pixel value: it grows toward a tall, poster-like presence on a
   normal desktop viewport, but is bounded on both ends so it never
   becomes either a thin banner (min bound) or an absurdly tall column
   on a very tall viewport (max bound) — see the QA report for the
   1280/1440/narrower-desktop measurements this range was tuned
   against. The mobile media query below overrides it with a much
   smaller, mobile-appropriate clamp once the column stacks. */
.emt-journey-studio-cover {
  position: relative;
  display: flex;
  min-height: clamp(600px, 78vh, 820px);
  width: 100%;
  border-radius: var(--emt-js-radius-lg);
  overflow: hidden;
  box-shadow: var(--emt-js-shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: var(--emt-js-color-terracotta-deep);
  background-image: linear-gradient(180deg, var(--emt-js-color-terracotta-strong) 0%, var(--emt-js-color-terracotta-deep) 60%, #4a2416 100%);
  background-size: cover;
  background-position: 50% 50%;
  box-sizing: border-box;
}

/* An assigned cover image (Journey Studio -> Appearance -> Builder
   Covers) replaces the gradient background via this same
   background-image/-position pair, set inline per instance
   (helpers.php resolves the real URL/focal point server-side — no
   client JS is involved in choosing or loading it). The class is only
   a hook for the scrim strength below; the image itself is always an
   inline style, never a second stylesheet rule per builder. */

/* The scrim is two layers, deliberately: a flat, low, uniform wash
   (this rule) guarantees a contrast floor across the ENTIRE image —
   content is now spread top-to-bottom (see __content below), not
   parked over one dark corner — plus a directional gradient
   (--has-image below) that deepens toward the bottom for the CTA and
   lightens slightly through the middle so the photograph still reads
   as a photograph, not a flat dark rectangle. Restrained on purpose:
   "soft scrim," not a heavy vignette. */
.emt-journey-studio-cover__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 18, 14, 0.22);
  pointer-events: none;
}

.emt-journey-studio-cover--has-image .emt-journey-studio-cover__scrim {
  background-image: linear-gradient(
    180deg,
    rgba(26, 18, 14, 0.38) 0%,
    rgba(26, 18, 14, 0.18) 28%,
    rgba(26, 18, 14, 0.32) 60%,
    rgba(26, 18, 14, 0.74) 100%
  );
}

/* Fills the card and spreads its three groups — eyebrow, the middle
   heading+subtitle group, and the CTA — toward the top, middle, and
   bottom of the composition via justify-content:space-between, giving
   the intentional brochure-cover vertical rhythm the flat bottom-
   anchored stack (Phase 4.15C's first pass) didn't have. inset:0 on a
   single wrapper, not per-element positioning, so nothing inside it is
   individually absolutely placed — ordinary flex flow throughout. */
.emt-journey-studio-cover__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--emt-js-space-4);
  color: #ffffff;
  box-sizing: border-box;
}

.emt-journey-studio-cover__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--emt-js-text-eyebrow);
  font-weight: 600;
  color: #ffffff;
  opacity: 0.85;
  margin: 0;
}

.emt-journey-studio-cover__middle {
  margin: auto 0;
}

/* Qualified with the .emt-journey-studio-cover__content ancestor
   (0,2,0) rather than the bare .emt-journey-studio-cover__heading
   class alone (0,1,0): base.css's own `.emt-journey-studio h1, h2, h3
   { color: var(--emt-js-color-ink) }` foundation rule is (0,1,1) —
   more specific than a single class — so it was winning over this
   rule's own color and rendering the heading in the dark ink color
   used everywhere else in Journey Studio, even though its
   __eyebrow/__subtitle siblings (plain <p> tags, never targeted by
   that h1-h3 rule) already inherited white correctly from
   .emt-journey-studio-cover__content's own `color: #ffffff` above.
   `color: inherit` here (rather than a second hardcoded #ffffff)
   is the "simplify" — it just lets the heading pick up that same
   already-declared light color instead of restating it. */
.emt-journey-studio-cover__content .emt-journey-studio-cover__heading {
  font-family: var(--emt-js-font-display);
  font-size: var(--emt-js-text-display-md);
  line-height: 1.2;
  color: inherit;
  margin: 0 0 var(--emt-js-space-2);
  max-width: 16em;
}

.emt-journey-studio-cover__subtitle {
  font-family: var(--emt-js-font-body);
  font-size: var(--emt-js-text-support);
  line-height: 1.5;
  color: #ffffff;
  opacity: 0.92;
  margin: 0;
  max-width: 28em;
}

.emt-journey-studio-cover__foot {
  display: flex;
}

/* The CTA button inside the cover reuses .emt-journey-studio-cta as-is
   (rendered by the same emt_journey_studio_render_contextual_cta() the
   plain [emt_journey_cta] shortcode uses) — only its light-on-dark
   variant is scoped here, since it always sits over the cover's own
   scrim/image rather than ordinary page background. */
.emt-journey-studio-cover .emt-journey-studio-cta {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--emt-js-color-terracotta-deep);
}

.emt-journey-studio-cover .emt-journey-studio-cta:hover {
  background: var(--emt-js-color-bg);
  border-color: var(--emt-js-color-bg);
  color: var(--emt-js-color-terracotta-deep);
}

.emt-journey-studio-cover .emt-journey-studio-cta:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* Matches the codebase's one established mobile breakpoint (900px —
   scripts/context-selection.js's MOBILE_IMAGE_MAX_WIDTH, and every
   @media boundary in styles/journey-booklet.css). Once the cover's own
   WordPress/GoodLayers column stacks to full width on a small screen,
   it becomes a substantially shorter card — the desktop brochure
   height is a deliberate desktop-only presence, not something mobile
   should inherit — while eyebrow, heading, subtitle, and CTA all
   remain. This is the cover component's own responsive behavior; it
   has no effect on and shares no code with Journey Studio's separate,
   unrelated mobile modal sticky-media panel
   (styles/journey-booklet.css), which this phase leaves untouched. */
@media (max-width: 900px) {
  .emt-journey-studio-cover {
    min-height: clamp(360px, 52vh, 460px);
  }

  .emt-journey-studio-cover__content {
    padding: var(--emt-js-space-3);
  }

  .emt-journey-studio-cover__heading {
    font-size: var(--emt-js-text-display-sm);
  }

  .emt-journey-studio-cover__subtitle {
    font-size: var(--emt-js-text-card-copy);
  }
}