/* /css/showcase.css */
/* ==========================================================================
   INSTALL SHOWCASE — Horizontal, responsive, production-ready
   Works with the markup in index.html (#installShowcase & #installShowcaseRail)
   ========================================================================== */

   :root {
    /* Theme-aware tokens (fall back to your site's variables where available) */
    --showcase-border: var(--clr-border, #e5e7eb);
    --showcase-surface: var(--clr-bg, #ffffff);
    --showcase-radius: var(--radius-lg, 14px);
    --showcase-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.06));
    --showcase-gap: 0.75rem;
    --showcase-rail-pad: .25rem;
    --tile-width: clamp(160px, 22vw, 260px);
  }
  
  /* Section spacing */
  .install-showcase__header { margin-bottom: .5rem; }
  
  /* Viewport containing the horizontal rail & arrows */
  .install-showcase__viewport {
    position: relative;
    isolation: isolate;
    padding-inline: 0; /* arrows hug the edges */
    overflow: hidden;  /* hide vertical overflow and edge-fade overlays */
  }
  
  /* Subtle edge fades to indicate more content */
  .install-showcase__viewport::before,
  .install-showcase__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to right, var(--showcase-surface), transparent);
    opacity: .9;
  }
  .install-showcase__viewport::before { left: 0; }
  .install-showcase__viewport::after  {
    right: 0;
    transform: scaleX(-1);
  }
  
  /* Horizontal rail */
  .install-showcase__rail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;             /* single horizontal line */
    align-items: stretch;
    gap: var(--showcase-gap);
    overflow-x: auto;              /* scroll horizontally */
    overflow-y: hidden;            /* prevent vertical stacking */
    padding: var(--showcase-rail-pad);
    margin: 0;
    scroll-snap-type: x proximity; /* snap near tiles */
    scroll-padding-inline: var(--showcase-rail-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    white-space: normal;           /* ensure flex wins even if overridden elsewhere */
  }
  
  /* Safety: force children to be horizontal items even if other CSS leaks in */
  .install-showcase__rail > * {
    flex: 0 0 auto;
  }
  
  /* Optional prettier scrollbar (WebKit) */
  .install-showcase__rail::-webkit-scrollbar { height: 8px; }
  .install-showcase__rail::-webkit-scrollbar-track { background: transparent; }
  .install-showcase__rail::-webkit-scrollbar-thumb {
    background: rgba(125,125,125,.35);
    border-radius: 999px;
  }
  
  /* Tiles */
  .install-showcase__item {
    position: relative;
    flex: 0 0 var(--tile-width);
    inline-size: var(--tile-width);
    aspect-ratio: 3 / 2;
    border: 1px solid var(--showcase-border);
    border-radius: var(--showcase-radius);
    background: var(--showcase-surface);
    box-shadow: var(--showcase-shadow);
    overflow: hidden;
    scroll-snap-align: start;
    will-change: transform;
  }
  @media (hover:hover) {
    .install-showcase__item:hover { transform: translateY(-1px); }
  }
  
  /* Images */
  .install-showcase__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: opacity .35s ease;
    user-select: none;
    -webkit-user-drag: none;
  }
  
  /* Fade during swaps */
  .install-showcase__item.is-fading .install-showcase__img { opacity: .15; }
  
  /* Caption chip */
  .install-showcase__cap {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    padding: .2rem .55rem;
    font-size: .75rem;
    line-height: 1.1;
    border-radius: 999px;
    background: rgba(255,255,255,.65);
    background: color-mix(in oklab, var(--showcase-surface), transparent 45%);
    border: 1px solid var(--showcase-border);
    backdrop-filter: blur(4px);
    pointer-events: none;
  }
  
  /* Nav buttons — compact, low-ink */
  .rail-nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--showcase-border);
    background: rgba(255,255,255,.7);
    background: color-mix(in oklab, var(--showcase-surface), transparent 15%);
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.06));
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2; /* above fades */
  }
  .rail-nav i { font-size: .9rem; opacity: .85; }
  .rail-nav--prev { left: 2px; }
  .rail-nav--next { right: 2px; }
  
  @media (hover:hover) {
    .rail-nav:hover {
      background: color-mix(in oklab, var(--showcase-surface), transparent 5%);
    }
  }
  .rail-nav[disabled] {
    opacity: .35;
    cursor: default;
  }
  
  /* Drag-to-scroll cursor hint (JS toggles .is-dragging) */
  .install-showcase__rail.is-dragging { cursor: grabbing; }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .install-showcase__img { transition: none; }
  }
  
  /* Compact on very small screens */
  @media (max-width: 480px) {
    :root { --tile-width: clamp(140px, 48vw, 220px); }
  }
  

  /* ==========================================================================
   BRAND INTRO — Text-only band
   Clean, theme-aware, full-width with safe edge padding.
   ========================================================================== */

.brand-intro {
  /* use site tokens; stay subtle */
  --bi-bg: var(--clr-bg, #ffffff);
  --bi-fg: var(--clr-fg, #111827);
  --bi-border: var(--clr-border, #e5e7eb);
  --bi-surface: var(--clr-surface, #ffffff);
  --bi-radius: var(--radius-lg, 16px);

  position: relative;
  width: 100%;
  color: var(--bi-fg);
  background: var(--bi-bg);
  padding-block: clamp(1.75rem, 0.5vw, 3rem);
  /* soft separators so it feels integrated */
  border-top: 1px solid color-mix(in oklab, var(--bi-border), transparent 20%);
  border-bottom: 1px solid color-mix(in oklab, var(--bi-border), transparent 20%);
}

.brand-intro__wrap {
  /* container sizing without depending on .container */
  max-width: min(1200px, 94vw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.5vw, 1.5rem);
}

.brand-intro__text {
  /* quiet card-like surface with accent rail for hierarchy */
  background: color-mix(in oklab, var(--bi-surface), transparent 0%);
  border: 1px solid color-mix(in oklab, var(--bi-border), transparent 0%);
  border-radius: var(--bi-radius);
  padding: clamp(1rem, 3vw, 1.25rem) clamp(1rem, 3.2vw, 1.4rem);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.045));
  position: relative;
}

.brand-intro__text::before {
  /* slim accent stripe */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-top-left-radius: var(--bi-radius);
  border-bottom-left-radius: var(--bi-radius);
  background: color-mix(in oklab, #2563eb, var(--bi-fg) 70%);
  opacity: .28; /* subtle */
}

.brand-intro__title {
  font: 800 clamp(1.25rem, 2.1vw, 1.85rem)/1.2 Inter, system-ui, sans-serif;
  margin: 0 0 .4rem;
  letter-spacing: .005em;
  font-weight: 800;
  font-size: 2.25rem;
}

.brand-intro__lede {
  margin: 0 0 .75rem;
  font-size: clamp(1rem, 1.08rem + .2vw, 1.15rem);
  line-height: 1.6;
  opacity: .95;
}

.brand-intro p {
  margin: 0 0 .85rem;
  line-height: 1.68;
}

@media (max-width: 720px) {
  .brand-intro__text {
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.04));
  }
}

/* Make ONLY the showcase container wider while keeping page gutters */
.container.install-showcase {
  max-width: min(1440px, 98vw); /* was likely ~1200px */
  width: max-content;
}


/* ==============================================================
   Lightbox — premium, responsive, accessible
   ============================================================== */
   .lb[hidden] { display: none !important; }

   .lb {
     position: fixed;
     inset: 0;
     z-index: 9999;
     display: grid;
     place-items: center;
     background: color-mix(in oklab, #000, transparent 20%);
     backdrop-filter: blur(2px);
   }
   
   .lb__scrim {
     position: absolute;
     inset: 0;
     background: color-mix(in oklab, #000, transparent 35%);
     border: 0;
     margin: 0;
     padding: 0;
   }
   
   .lb__frame {
     position: relative;
     width: min(96vw, 1400px);
     height: min(92vh, 92svh);
     margin: 0;
     background: var(--showcase-surface, #fff);
     border-radius: clamp(12px, 1.6vw, 16px);
     box-shadow: 0 20px 60px rgba(0,0,0,.28);
     overflow: hidden;
   }
   
   .lb__stage {
     position: absolute;
     inset: 0 0 48px 0; /* leave room for chrome */
     background: color-mix(in oklab, var(--showcase-surface, #fff), #000 3%);
     overflow: hidden;
     touch-action: none;           /* enables pinch/drag */
     cursor: grab;
   }
   .lb__stage:active { cursor: grabbing; }
   
   .lb__img {
     position: absolute;
     top: 50%; left: 50%;
     max-width: none;              /* we manage sizing with transforms */
     will-change: transform;
     transform: translate(-50%, -50%) scale(1);
     transform-origin: 50% 50%;
     user-select: none;
     -webkit-user-drag: none;
   }
   
   .lb__cap {
     position: absolute;
     left: 0; right: 0; bottom: 0;
     min-height: 48px;
     padding: .6rem .9rem;
     font-size: .925rem;
     line-height: 1.35;
     color: color-mix(in oklab, #000, var(--showcase-surface, #fff) 20%);
     background: linear-gradient(to top,
       color-mix(in oklab, var(--showcase-surface, #fff), #000 6%) 0%,
       color-mix(in oklab, var(--showcase-surface, #fff), transparent 100%) 100%);
     border-top: 1px solid color-mix(in oklab, var(--showcase-border, #e5e7eb), transparent 20%);
   }
   
   .lb__chrome {
     position: absolute;
     left: .5rem; right: .5rem;
     top: .5rem;
     display: flex;
     gap: .35rem;
     align-items: center;
     pointer-events: auto;
   }
   
   .lb__btn {
     appearance: none;
     border: 1px solid color-mix(in oklab, var(--showcase-border, #e5e7eb), transparent 10%);
     background: color-mix(in oklab, var(--showcase-surface, #fff), transparent 10%);
     box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.08));
     color: inherit;
     height: 36px;
     padding: 0 .7rem;
     border-radius: 999px;
     display: grid;
     place-items: center;
     cursor: pointer;
   }
   .lb__btn--icon { width: 36px; padding: 0; }
   .lb__btn:focus-visible { outline: 2px solid color-mix(in oklab, #2563eb, #000 40%); outline-offset: 2px; }
   
   .lb__spacer { flex: 1 1 auto; }
   
   @media (max-width: 600px) {
     .lb__frame { width: 100vw; height: 100svh; border-radius: 0; }
     .lb__chrome { left: .35rem; right: .35rem; }
   }
   
   /* Make tiles feel clickable for enlargement */
   .install-showcase__item { cursor: zoom-in; }
   .install-showcase__item[role="button"]:focus-visible {
     outline: 2px solid color-mix(in oklab, #2563eb, #000 40%);
     outline-offset: 2px;
   }