/* ============================================================
   nextpad.org — BETA homepage redesign (app showcase hero)
   ------------------------------------------------------------
   ISOLATED styles for /beta/ only. Loaded AFTER the live
   /assets/css/style.css, so these rules win on the beta page
   without touching the production stylesheet.

   Sizing model:
   - Stage has a MAX width (px) and shrinks below it, but its
     HEIGHT is fixed and never changes on resize or app switch.
   - The pill is fit-content of FIXED-size buttons, so it never
     resizes on zoom/resize (it only wraps on small screens).
   ============================================================ */

/* ---- Switchable hero backgrounds --------------------------------
   Recolor the showcase here. Each app picks one of these via JS
   (redesign.js -> APPS[key].bg). Edit --bg-nextpad for the default.
------------------------------------------------------------------ */
:root {
  /* Per-app rectangle fills (light mode): noise texture over a subtle vertical
     gradient. Dark mode overrides below. */
  --bg-nextpad: url("/assets/images/noisy-texture.webp") repeat, linear-gradient(180deg, #e3f1ec 0%, #d4e9e2 100%);
  --bg-nextzip: url("/assets/images/noisy-texture.webp") repeat, linear-gradient(180deg, #ddf1f6 0%, #c8e2e9 100%);
  --bg-beads:   url("/assets/images/noisy-texture.webp") repeat, linear-gradient(180deg, #fcf6ea 0%, #f3ebd8 100%);
}

/* ---- Showcase wrapper (= the stage width) ----
   width fills the viewport UP TO the max, then caps (never larger). */
.showcase {
  position: relative;
  width: 95%;
  max-width: 1450px;                              /* hard cap: never wider than this */
  margin: calc(var(--nav-height) + 52px) auto 0;  /* clear the fixed nav + gap */
  padding: 0 0 56px;                              /* bottom room for the pill */
}

/* ---- Gradient stage (the rounded background rectangle) ----
   Height is fixed (fixed copy block + fixed screenshot height), so
   it never changes when switching apps OR resizing the window. */
.showcase-stage {
  position: relative;
  background: var(--hero-bg, var(--bg-nextpad));
  border-radius: 16px;           /* less round, matching Sardine's cards (rounded-2xl) */
  padding: 34px 40px 0;          /* no bottom pad: screenshot is clipped at the edge */
  text-align: center;
  overflow: hidden;              /* masks the bottom of the screenshot */
  transition: background 0.5s ease;
}

/* fixed-height copy block -> title/subtitle length can't change height */
.showcase-copy {
  min-height: 96px;     /* floor only (content sets the height) -> tight, consistent */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.showcase-stage h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 2.6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #1c1c1e;
}
.showcase-sub {
  margin: 0 auto;
  max-width: 900px;
  font-size: clamp(1rem, 1.3vw, 1.17rem);   /* ~1pt smaller */
  line-height: 1.35;                          /* tighter line spacing */
  color: #45474c;
}

/* ---- Dark mode: rectangle + pill use the standard dark surface; text goes light ---- */
[data-theme="dark"] .showcase-stage    { background: var(--color-surface); border: 1px solid #2e2e30; }
[data-theme="dark"] .showcase-pill     { background: var(--color-surface); box-shadow: 0 2px 22px rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .showcase-stage h1 { color: var(--color-text); }
[data-theme="dark"] .showcase-sub      { color: #c7c7cc; }
[data-theme="dark"] .pill-app .tile    { filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.45)); }   /* white shadow under icons */

/* Light mode: textured rectangles get a subtle 1px stroke (all apps) */
:root:not([data-theme="dark"]) .showcase-stage { border: 1px solid #edebe8; }

/* ---- Screenshots: a FIXED-height "window" that masks the bottom -----
   Fixed height -> stage height never changes on resize. object-fit:cover
   anchored top crops the bottom behind the stage edge. NO border-radius
   (rounding is baked into the images themselves). */
.showcase-shots {
  position: relative;
  width: min(88%, 1700px);       /* wider so the 2.4 window reaches ~500px tall at the max stage */
  aspect-ratio: 2.4;             /* max ~1200x500 at the stage cap; scales down proportionally; ~15% bottom mask */
  margin: 4px auto 0;
  overflow: hidden;
  /* no box-shadow / background: the screenshot images carry their own
     shadow + rounding (cleaned in the images themselves) */
}
.showcase-shots img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                   /* image shown as-is at full width, top-aligned */
  height: auto;                  /* natural height; the fixed-height container masks the bottom */
  opacity: 0;
  transition: opacity 0.5s ease;
}
.showcase-shots img.is-shown { opacity: 1; }

/* ---- Floating pill (straddles the stage's bottom edge) ----
   fit-content of FIXED-size buttons -> never resizes on zoom/resize.
   Wraps only when it can't fit (small screens). */
.showcase-pill {
  position: relative;
  z-index: 5;
  margin: -24px auto 0;          /* pull up so it sits on the stage border */
  width: 750px;                  /* FIXED -> identical width/height for every app */
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;               /* wrap (don't shrink) only if it truly can't fit */
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;            /* taller pill (content sizes unchanged) */
  background: var(--hero-bg, var(--bg-nextpad));   /* matches the current app's rectangle (light mode) */
  border: 1px solid var(--color-border);
  border-radius: 999px;          /* fully rounded ends at any height (capsule) */
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.36);   /* even, 50% darker shadow all around */
}

/* app-icon cluster (left side) */
.pill-apps {
  display: flex;
  align-items: center;
  gap: 14px;                     /* even spacing between the 3 icons */
  padding-right: 14px;
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
}
.pill-app {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition-fast);
}
.pill-app:hover { transform: translateY(-1px); }
.pill-app .tile {
  width: 32px;                   /* bigger */
  height: 32px;
  margin: -2px 0;                /* keep layout box ~28px so the pill isn't taller */
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));   /* small shadow (50% darker) */
  /* no border-radius: rounding is baked into the icon images */
}
/* show the light icon in light mode, the dark icon in dark mode */
.pill-app .tile-dark { display: none; }
[data-theme="dark"] .pill-app .tile-light { display: none; }
[data-theme="dark"] .pill-app .tile-dark { display: block; }
.pill-app .dot {
  position: absolute;            /* out of flow -> tile centers on the button line */
  top: calc(100% + 6px);         /* sits just below the tile */
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--transition-fast);
}
.pill-app.is-active .dot { background: #1c1c1e; }   /* active dot — light mode */
[data-theme="dark"] .pill-app.is-active .dot { background: #ffffff; }   /* active dot — dark mode */

/* action buttons — FIXED widths so changing labels never resize the pill */
.pill-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pill-actions .btn {
  box-sizing: border-box;
  flex: none;                /* never resize */
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 999px;
  padding: 9px 10px;
  font-size: 0.75rem;
}
.pill-actions .btn svg { width: 14px; height: 14px; }
.pill-actions .btn-primary { width: 260px; }   /* Download (fixed width) */
.pill-actions #btnNotes    { width: 185px; }   /* Release Notes (fixed width) */
.pill-actions #btnLearn    { width: 100px; }   /* Learn More (fixed width) */
.pill-actions .btn-outline { background: var(--color-surface); }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .showcase-copy { min-height: 80px; }
}
@media (max-width: 825px) {
  /* phone: stack the buttons AND drop the pill chrome entirely
     (fully transparent, no border, no shadow) */
  .showcase-pill {
    flex-direction: column;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  [data-theme="dark"] .showcase-pill { background: transparent; box-shadow: none; }   /* beat the dark-surface override */
  .pill-apps {
    border-right: none;
    border-bottom: none;
    padding: 0 0 4px;
    justify-content: center;
    width: 100%;
  }
  .pill-actions { flex-wrap: wrap; justify-content: center; width: 100%; }
}