/*
 * P01 — Prompt Studio Working Entry
 * Reference: navy header ~23%, cream surface ~42%, carousel+footer ~35%.
 * The cream card is nearly full editorial width.
 */

/* P01 masthead: slightly larger than global default */
.p01-work-zone .studio-header__title {
  font-size: clamp(3.8rem, 9vw, 7rem);
}

/* Work zone: navy */
.p01-work-zone {
  background: var(--c-navy);
  padding-bottom: 0;
}

/* Section label centered above the cream surface */
.p01-label-row {
  text-align: center;
  padding: var(--space-10) var(--content-pad) var(--space-5);
  max-width: var(--content-width);
  margin: 0 auto;
}

.p01-label-rule {
  margin: var(--space-4) auto 0;
}

/* Prop wrapper — sits around the cream surface */
.p01-surface-wrap {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

/* Prop zones — botanical left, pen right — assets not supplied */
.p01-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.p01-prop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 220px;
}
.p01-prop--left  { left: -16px; }
.p01-prop--right { right: -16px; }

/* ── The cream drafting surface ─────────────────────────────── */

.p01-surface {
  position: relative;
  z-index: 1;
  background: var(--c-cream);
  /* Full editorial width, generous vertical padding */
  padding: var(--space-12) var(--space-14) var(--space-10);
}

.p01-surface__label {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: italic;
  color: var(--c-text-dark);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  cursor: text;
}

.p01-surface__sublabel {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--c-text-mid);
  margin-bottom: var(--space-8);
}

/* Textarea: large, open, bottom-bordered only */
.p01-surface__textarea {
  width: 100%;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-loose);
  color: var(--c-text-dark);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-amber-dark);
  resize: none;
  outline: none;
  padding: var(--space-4) 0 var(--space-8);
  margin-bottom: var(--space-8);
  appearance: none;
}
.p01-surface__textarea::placeholder {
  color: var(--c-text-mid);
  opacity: 0.45;
}

/* Two-column explanation */
.p01-surface__explain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(169,116,57,0.18);
  margin-bottom: var(--space-8);
}

.p01-surface__explain-head {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-text-dark);
  margin-bottom: var(--space-3);
}

.p01-surface__explain-body {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--c-text-mid);
}
.p01-surface__explain-body strong {
  display: block;
  color: var(--c-text-dark);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

/* Source material insertion — strengthened for legibility, restrained in scale */
.p01-surface__source-example {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: rgba(169,116,57,0.09);
  border-left: 2px solid var(--c-amber-dark);
}
.p01-source__glyph {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--c-amber-dark);
  line-height: 1.9;
  font-weight: 500;
}
.p01-source__text {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-style: italic;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-dark);
  opacity: 0.7;
  padding: var(--space-2) 0;
}
.p01-source__note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--c-text-mid);
}

/* Actions */
.p01-surface__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(169,116,57,0.15);
}


/* ── Carousel section ────────────────────────────────────────── */

.p01-carousel-section {
  background: var(--c-navy);
  padding-bottom: var(--space-14);
}

.p01-carousel-header {
  padding-top: var(--space-10);
  padding-bottom: var(--space-5);
}

/* Strip: overflows to show partial 4th card */
.p01-carousel {
  display: flex;
  gap: var(--space-4);
  overflow: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.p01-carousel::-webkit-scrollbar { display: none; }

/* Carousel child sizing is handled by .starter-card directly */

/* Carousel footer controls */
.p01-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-5);
}

.p01-carousel-dots {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.p01-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-text-navy);
  opacity: 0.2;
  transition: opacity var(--ease-default);
  border: none;
  padding: 0;
  cursor: pointer;
}
.p01-carousel-dot.is-active {
  opacity: 1;
  background: var(--c-amber);
}

.p01-view-all {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-text-navy);
  opacity: 0.78;
  transition: opacity var(--ease-default);
}
.p01-view-all:hover { opacity: 1; }

/* Old footer arrow buttons — kept for any lingering references */
.p01-next-btn,
.p01-prev-btn {
  display: none; /* replaced by edge-overlay arrows */
}

/* Edge-overlay arrow buttons — float at left/right of carousel wrap */
.p01-arrow-btn {
  position: absolute;
  top: 0;
  bottom: 2.5rem; /* stop above the dots footer */
  width: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  /* Large invisible hit area, delicate visible glyph */
  color: var(--c-amber);
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  opacity: 0;                              /* hidden until hover */
  transition: opacity 0.25s ease;
  padding: 0;
  user-select: none;
  pointer-events: auto;
  text-shadow: 0 1px 8px rgba(1,18,41,0.4);
}

.p01-arrow-btn--prev { left:  0; }
.p01-arrow-btn--next { right: 0; }

/* Show on section hover — quiet presence, not a call to action */
.p01-carousel-section:hover .p01-arrow-btn,
.p01-arrow-btn:focus-visible {
  opacity: 0.72;
}
.p01-arrow-btn:hover { opacity: 1; }


/* ── Starter card (P01 carousel) ─────────────────────────────
 *
 * Integration pass 2026-08-31:
 * Image fills the entire card. Title, rule, and descriptor
 * are overlaid as live HTML on the natural pale upper zone.
 * A subtle cream-to-transparent gradient provides legibility.
 * No separate cream header zone.
 */

.starter-card {
  flex: 0 0 calc((100% - 3 * var(--space-4)) / 3.3);
  display: flex;
  flex-direction: column;
  background: var(--c-navy);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--ease-default);
  flex-shrink: 0;
  min-width: 0;
}
.starter-card:hover { box-shadow: 0 4px 24px rgba(1,18,41,0.35); }

/* Image wrap: fills full card, holds both image and text overlay */
.starter-card__image-wrap {
  position: relative;
  width: 100%;
  /* Portrait aspect: tall enough for text zone + subject */
  aspect-ratio: 3 / 4.2;
  overflow: hidden;
}

.starter-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default: show from top so pale zone is visible for text overlay.
     Per-image focal overrides in p01.css below via [data-path-id]. */
  object-position: center top;
  display: block;
}

/* Text overlay: sits above the natural pale zone of the image.
   Cream gradient from top fades into transparency ~55% down. */
.starter-card__text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--space-4) var(--space-10);
  background: linear-gradient(
    to bottom,
    rgba(237, 224, 208, 0.82) 0%,
    rgba(237, 224, 208, 0.55) 45%,
    rgba(237, 224, 208, 0.0) 100%
  );
}

.starter-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-text-dark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

.starter-card__rule {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: var(--c-amber-dark);
  margin-bottom: var(--space-2);
}

.starter-card__descriptor {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--c-text-mid);
  line-height: var(--leading-snug);
  display: block;
}

/* ── Per-image focal position (P01 carousel) ─────────────────
 *
 * All new images have generous pale upper negative space.
 * Default object-position: center top — shows pale zone first,
 * subject enters from below. Per-card adjustments only where needed.
 *
 * PATH_13 (unsure) — landscape/gateway: sky fills upper zone naturally,
 * shift slightly to show gateway framing.
 */

[data-path-id="unsure"]  .starter-card__img { object-position: center 20%; }
[data-path-id="learn"]   .starter-card__img { object-position: center 15%; }
[data-path-id="build"]   .starter-card__img { object-position: center 10%; }
[data-path-id="refine"]  .starter-card__img { object-position: center 15%; }
[data-path-id="create"]  .starter-card__img { object-position: center 10%; }


/* ── Path card (P02 grid) — integrated image treatment ──────────
 *
 * Integration pass 2026-08-31:
 * Same approach as starter-card: image fills card, text overlaid.
 * Consistent visual treatment across P01 and P02.
 */

.path-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--ease-default);
  flex-shrink: 0;
}
.path-card:hover { box-shadow: 0 4px 24px rgba(1,18,41,0.25); }

/* Image wrap: fills card */
.path-card__image-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 160px;
  overflow: hidden;
}

.path-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Text overlay: cream-to-transparent, matches starter-card treatment */
.path-card__text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--space-4) var(--space-10);
  background: linear-gradient(
    to bottom,
    rgba(237, 224, 208, 0.85) 0%,
    rgba(237, 224, 208, 0.58) 42%,
    rgba(237, 224, 208, 0.0) 100%
  );
}

.path-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-text-dark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.path-card__rule {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: var(--c-amber-dark);
  margin-bottom: var(--space-2);
}

.path-card__descriptor {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--c-text-mid);
}