/* ==========================================================================
   Sample blueprint drawer
   ========================================================================== */

.showcase-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.9rem 0 0;
  padding: 0.55rem 0;
  background: none;
  border: none;
  color: var(--accent-indigo, #4f46e5);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  /* Underlined rather than colour-only: colour alone is not a reliable
     affordance for people who cannot distinguish it. */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.showcase-trigger:hover {
  color: var(--accent-purple, #7c3aed);
}

.showcase-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: rgba(15, 23, 42, 0.72);
  padding: 0;
}

/* A drawer rather than a centred dialog: the mockups are wide, and anchoring
   to one edge keeps the page visible behind for context. */
.showcase-drawer {
  display: flex;
  flex-direction: column;
  /* Full-screen: the samples are layouts, and a narrow column would make a
     desktop layout unreadable at the very moment it is being demonstrated. */
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  background: var(--bg-card, #ffffff);
  box-shadow: none;
}

.showcase-head {
  position: relative;
  flex: 0 0 auto;
  padding: 1.5rem clamp(1.1rem, 4vw, 3rem) 1rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.showcase-head h2 {
  margin: 0 0 0.5rem;
  padding-right: 3rem;
  font-size: 1.3rem;
  color: var(--text-main, #0f172a);
}

.showcase-blurb {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted, #475569);
  max-width: 60ch;
}

.showcase-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, #475569);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.showcase-tracks,
.showcase-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.showcase-chip {
  min-height: 40px;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 999px;
  background: transparent;
  color: var(--text-main, #0f172a);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.showcase-chip[aria-pressed="true"] {
  background: var(--accent-indigo, #4f46e5);
  border-color: var(--accent-indigo, #4f46e5);
  color: #ffffff;
  font-weight: 700;
}

.showcase-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem clamp(1.1rem, 4vw, 3rem) 2rem;
  background: var(--bg-primary, #f8fafc);
}

.showcase-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  /* Sticky: the CTA has to stay reachable while a long sample is scrolled. */
  position: sticky;
  bottom: 0;
  padding: 1rem clamp(1.1rem, 4vw, 3rem) 1.25rem;
  border-top: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-card, #ffffff);
}

.showcase-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted, #475569);
  max-width: 38ch;
}

.showcase-foot .btn-primary {
  padding: 0.8rem 1.4rem;
}

/* --- Feature checklist --- */

.showcase-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  max-width: 62ch;
}

.showcase-features li {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: 0.65rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-main, #0f172a);
}

.showcase-features li span {
  color: var(--success, #047857);
  font-weight: 700;
}

/* --- Mockups --- */

.mk-frame {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-card, #ffffff);
}

.mk-mobile {
  max-width: 320px;
  margin: 0 auto;
}

.mk-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #475569);
}

.mk-hero {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem;
  border-radius: 8px;
  background: var(--bg-primary, #f8fafc);
}

.mk-hero strong { font-size: 1.05rem; color: var(--text-main, #0f172a); }
.mk-hero span { font-size: 0.82rem; color: var(--text-muted, #475569); }

.mk-btn {
  justify-self: start;
  margin-top: 0.35rem;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  background: var(--accent-indigo, #4f46e5);
  color: #ffffff !important;
  font-size: 0.76rem;
  font-weight: 700;
}

.mk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0.5rem; }
.mk-card {
  padding: 0.75rem 0.6rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  font-size: 0.78rem;
  text-align: center;
  color: var(--text-main, #0f172a);
}

.mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0.5rem; }
.mk-stat {
  display: grid; gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
}
.mk-stat span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #475569); }
.mk-stat strong { font-size: 1rem; color: var(--text-main, #0f172a); }

.mk-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.mk-table th, .mk-table td {
  padding: 0.42rem 0.55rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  text-align: left;
  color: var(--text-main, #0f172a);
}
.mk-table th { color: var(--text-muted, #475569); font-weight: 700; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.05em; }

.mk-roles, .mk-tenants { display: grid; gap: 0.4rem; }
.mk-role, .mk-tenant {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  font-size: 0.8rem;
}
.mk-role strong, .mk-tenant strong { color: var(--text-main, #0f172a); }
.mk-role span, .mk-tenant span { color: var(--text-muted, #475569); }

.mk-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.mk-status li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  font-size: 0.8rem;
}
.mk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success, #047857); }
.mk-muted .mk-dot { background: var(--text-muted, #475569); }
.mk-k { color: var(--text-main, #0f172a); }
.mk-v { color: var(--text-muted, #475569); font-weight: 600; }

.mk-form { display: grid; gap: 0.45rem; padding: 0.9rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; }
.mk-form strong { font-size: 0.88rem; color: var(--text-main, #0f172a); }
.mk-field {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  font-size: 0.76rem;
  color: var(--text-muted, #475569);
  background: var(--bg-primary, #f8fafc);
}

@media (max-width: 640px) {
  .showcase-head, .showcase-stage, .showcase-foot { padding-left: 1.1rem; padding-right: 1.1rem; }
  .showcase-foot { flex-direction: column; align-items: stretch; }
  .showcase-foot .btn-primary { width: 100%; }
  .showcase-note { max-width: none; }
}

/* --- Sample header extras --- */

.showcase-track {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-purple, #7c3aed);
}

.showcase-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.showcase-bar .showcase-tracks,
.showcase-bar .showcase-views { margin-bottom: 0; }

/* Constrain a desktop sample so it reads as a page, not a stretched band. */
.stage-desktop .mk-frame { max-width: 1040px; margin: 0 auto; }
.stage-capabilities { display: block; }

/* --- System capabilities --- */

.showcase-stack {
  margin: 0 auto;
  max-width: 720px;
  display: grid;
  gap: 0.6rem;
}

.stack-row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-card, #ffffff);
}

.stack-row dt { font-weight: 700; color: var(--text-main, #0f172a); font-size: 0.92rem; }
.stack-row dd { margin: 0; color: var(--text-muted, #475569); font-size: 0.9rem; line-height: 1.6; }

/* --- Additional sample components --- */

.mk-panel {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
}

.mk-panel-head {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #475569);
}

.mk-chiprow { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.mk-chip {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--text-main, #0f172a);
}

.mk-chip-on {
  background: var(--accent-indigo, #4f46e5);
  border-color: var(--accent-indigo, #4f46e5);
  color: #ffffff;
  font-weight: 700;
}

.mk-note { margin: 0; font-size: 0.74rem; line-height: 1.5; color: var(--text-muted, #475569); }

.mk-rolebar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.mk-badge {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--accent-purple, #7c3aed);
  color: var(--accent-purple, #7c3aed);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.mk-assets { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.mk-asset {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  font-size: 0.74rem;
  color: var(--text-main, #0f172a);
}

.mk-gbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.mk-g {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  color: #4285f4;
  font-weight: 800;
  font-size: 0.72rem;
  border: 1px solid #dadce0;
}

/* --- Dark sample (STRUCTiO) ---
   Scoped to the frame so the surrounding drawer stays in the page theme. */
.mk-dark {
  background: #0b1020;
  border-color: #1e293b;
  color: #e2e8f0;
}

.mk-dark .mk-panel,
.mk-dark .mk-status li,
.mk-dark .mk-chip,
.mk-dark .mk-asset,
.mk-dark .mk-gbtn { border-color: #1e293b; background: #0f172a; }

.mk-dark .mk-nav,
.mk-dark .mk-panel-head,
.mk-dark .mk-note,
.mk-dark .mk-v { color: #94a3b8; }

.mk-dark .mk-k,
.mk-dark .mk-table td,
.mk-dark strong { color: #f1f5f9; }

.mk-dark .mk-table th { color: #94a3b8; }
.mk-dark .mk-table th,
.mk-dark .mk-table td { border-bottom-color: #1e293b; }


/* --- Showcase card media, CTAs and outbound links ----------------------- *
 * The facade is a real <button>, so it is focusable, announced, and operable
 * with Enter or Space without any extra scripting. The 16:9 box is reserved up
 * front with aspect-ratio, so swapping the iframe in on click moves nothing
 * below it -- the layout shift would otherwise land exactly when the visitor is
 * looking at it.
 * ---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
 * Two columns on desktop: the video beside the card, not above it.
 *
 * The facade, the feature bullets and the outbound CTA all used to live in
 * .project-media, stacked, so a card was one tall column and the CTA sat below
 * a full-width video. The bullets and the CTA now belong to .project-info and
 * .project-media holds the facade alone, which is what makes a side-by-side
 * split possible at all.
 *
 * :has() rather than a modifier class, so the layout follows the content: a row
 * with a facade gets two columns, a row without one -- #project-reliableliving,
 * #project-hollend-web and the rest -- keeps the single column it already had,
 * with no class to remember to add. Where :has() is unsupported the row simply
 * stays single-column, which is the previous behaviour rather than a broken one.
 *
 * The video is the SECOND column, and second in the DOM. Putting it first
 * visually would mean either reading the play button before the card's own <h3>
 * -- so a heading arrives after content it is supposed to introduce -- or
 * leaving the DOM alone and letting focus jump right-to-left. Keeping document,
 * visual and focus order identical avoids both.
 * ---------------------------------------------------------------------- */
@media (min-width: 900px) {
  .project-row:has(.project-media) {
    display: grid;
    /* minmax(0, …) on both tracks: a grid item's default min-width is auto, so a
       long unbroken string in the description would otherwise widen the text
       column and push the video past the card's edge. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    align-items: start;
    column-gap: 2.25rem;
  }

  .project-row:has(.project-media) > .project-media {
    margin-top: 0;
  }
}

.project-media {
  margin-top: 1.1rem;
}

.project-video {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* WHERE THE BLACK BARS CAME FROM
     max-height: 340px used to sit here, next to aspect-ratio: 16 / 9. On a wide
     card the box was around 1100px across, so 16:9 asked for ~619px of height and
     the max-height clamped it to 340 -- which does not narrow the box, it just
     makes it shorter. The result was a container around 3.2:1 holding a 16:9
     video, and YouTube fills that by pillarboxing: black bars down both sides.
     The cap is now on width instead. At 480px wide the box is 270px tall by
     arithmetic, nothing is clamped, the ratio is exactly 16:9, and the video
     fills it edge to edge. */
  max-width: 480px;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 42%, rgba(99, 102, 241, 0.18), transparent 62%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.02));
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.project-video:hover { border-color: var(--accent-primary, #6366f1); }
.project-video:focus-visible {
  outline: 3px solid var(--accent-primary, #6366f1);
  outline-offset: 2px;
}

/* Once the iframe is in, the button styling must not paint over it. */
.project-video.is-playing {
  padding: 0;
  cursor: default;
  background: #000;
}
.project-video.is-playing > :not(iframe) { display: none; }

.project-video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-primary, #6366f1);
  color: #fff;
}

.project-video-label { font-weight: 700; font-size: 0.95rem; text-align: center; }
.project-video-note {
  font-size: 0.72rem;
  opacity: 0.75;
  text-align: center;
  max-width: 26rem;
}

.project-cta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.55;
}

.project-cta-list li {
  padding-left: 1.1rem;
  position: relative;
}

.project-cta-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan, #06b6d4);
}

.project-outbound {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.project-outbound:hover { border-color: var(--accent-primary, #6366f1); }
.project-outbound:focus-visible {
  outline: 3px solid var(--accent-primary, #6366f1);
  outline-offset: 2px;
}

.project-outbound--primary {
  background: var(--accent-primary, #6366f1);
  border-color: var(--accent-primary, #6366f1);
  color: #fff;
}

/* Available to screen readers, off-screen for everyone else. Used to say that a
   link opens in a new tab, which is otherwise a surprise announced to nobody. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .project-video, .project-outbound { transition: none; }
}