/* =============================================
   Showcase Components — Case Study Visual Blocks
   Mix-and-match includes for rich case study layouts.
   ============================================= */

/* === Shared === */
.showcase {
  padding: var(--space-48) 0;
}

.showcase__caption {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-12);
  font-style: italic;
  line-height: var(--leading-relaxed);
}

.showcase__annotation {
  font-size: var(--text-sm);
  color: var(--light-90);
  margin-top: var(--space-16);
  padding: var(--space-16) var(--space-24);
  background: var(--surface-85);
  border-left: 3px solid var(--primary-100);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: var(--leading-relaxed);
}

.showcase img,
.showcase video {
  display: block;
  border-radius: var(--radius-lg);
}

/* === ShowcaseHero — full-width image === */
.showcase-hero {
  padding: var(--space-48) 0;
}

.showcase-hero img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.showcase-hero--shadow img {
  box-shadow: var(--shadow-lg);
}

/* === ShowcaseDetail — centered ~800px image with annotation === */
.showcase-detail {
  padding: var(--space-48) 0;
}

.showcase-detail__inner {
  max-width: 800px;
  margin: 0 auto;
}

.showcase-detail img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.showcase-detail--shadow img {
  box-shadow: var(--shadow-md);
}

/* === ShowcaseSideBySide — two images with optional labels === */
.showcase-sbs {
  padding: var(--space-48) 0;
}

.showcase-sbs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}

.showcase-sbs__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.showcase-sbs__item img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.showcase-sbs__item .device-iphone {
  max-width: 260px;
}

/* Phone comparison — 3-column grid with hint between */
.phone-compare {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.phone-compare__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  letter-spacing: 0.05em;
  padding: 0 var(--space-8);
  height: 50%;
  align-self: center;
}

.phone-compare__arrow {
  writing-mode: horizontal-tb;
  flex-shrink: 0;
}

.phone-compare__arrow--left {
  align-self: flex-start;
}

.phone-compare__arrow--right {
  align-self: flex-end;
}

@media (max-width: 640px) {
  .phone-compare {
    grid-template-columns: 1fr;
  }
  .phone-compare__hint {
    writing-mode: horizontal-tb;
    flex-direction: column;
    text-align: center;
    padding: var(--space-8) 0;
    height: auto;
  }
  .phone-compare__arrow {
    writing-mode: horizontal-tb;
  }
  .phone-compare__arrow--right {
    /* points right on desktop → rotate to point up on mobile */
    transform: rotate(-90deg);
    align-self: center;
  }
  .phone-compare__arrow--left {
    /* points left on desktop → rotate to point down on mobile */
    transform: rotate(-90deg);
    align-self: center;
  }
}

.showcase-sbs__item .device-iphone__screen {
  aspect-ratio: 9 / 19;
  overflow: hidden;
}

.showcase-sbs__item .device-iphone__screen img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: top;
}

.showcase-sbs__label {
  display: inline-block;
  margin-top: var(--space-12);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--primary-100);
}

/* === ShowcaseTriple — three images in a row === */
.showcase-triple {
  padding: var(--space-48) 0;
}

.showcase-triple__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

.showcase-triple__item {
  text-align: center;
}

.showcase-triple__item img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.showcase-triple__item .device-iphone {
  max-width: 280px;
}

.showcase-triple__item .device-ipad {
  max-width: 100%;
}

/* === ShowcaseGrid — 2x2 image grid === */
.showcase-grid {
  padding: var(--space-48) 0;
}

.showcase-grid__wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
}

.showcase-grid__item img {
  width: 100%;
  border-radius: var(--radius-lg);
  cursor: zoom-in;
}

@media (max-width: 640px) {
  .showcase-grid__wrap {
    grid-template-columns: 1fr;
  }
}

/* === ShowcaseStrip — horizontal scrolling row === */
.showcase-strip {
  padding: var(--space-48) 0;
}

/* Wrap — non-scrolling container for gradients and buttons */
.showcase-strip__wrap {
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* Viewport — scrollable area */
.showcase-strip__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-70) transparent;
}

.showcase-strip__viewport::-webkit-scrollbar {
  height: 4px;
}

.showcase-strip__viewport::-webkit-scrollbar-track {
  background: transparent;
}

.showcase-strip__viewport::-webkit-scrollbar-thumb {
  background: var(--surface-70);
  border-radius: var(--radius-full);
}

/* Gradient fade overlays — on the non-scrolling wrapper */
.showcase-strip__wrap::before,
.showcase-strip__wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
}

.showcase-strip__wrap.has-overflow-left::before {
  opacity: 1;
}

.showcase-strip__wrap.has-overflow-right::after {
  opacity: 1;
}

.showcase-strip__wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--surface-95) 0%, transparent 100%);
}

.showcase-strip__wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--surface-95) 0%, transparent 100%);
}

.showcase-strip__track {
  display: flex;
  gap: var(--space-24);
  padding-bottom: var(--space-16);
}

.showcase-strip__item {
  flex: 0 0 auto;
  width: 420px;
  scroll-snap-align: start;
}


.showcase-strip__spacer {
  flex: 0 0 max(76px, calc(50vw - 724px));
  min-height: 1px;
  align-self: stretch;
  scroll-snap-align: start;
}

.showcase-strip__track::after {
  content: "";
  flex: 0 0 max(100px, calc(50vw - 700px));
  height: 1px;
}

.showcase-strip__item img {
  width: 100%;
  border-radius: var(--radius-lg);
  max-height: min(420px, 65vh);
  object-fit: cover;
  object-position: top;
  cursor: zoom-in;
}

/* Device variant — fixed-width iPhone frames with consistent height */
.showcase-strip--device .showcase-strip__item {
  width: 300px;
}

.showcase-strip--device .showcase-strip__item .device-iphone {
  width: 280px;
}

.showcase-strip--device .showcase-strip__item .device-iphone__screen {
  aspect-ratio: 9 / 19;
  overflow: hidden;
}

.showcase-strip--device .showcase-strip__item .device-iphone__screen img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: top;
}

.showcase-strip__number {
  display: block;
  margin-top: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: rgba(255, 255, 255, 0.5);
}

/* Nav buttons */
.showcase-strip__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-90);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--light-90);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              opacity var(--duration-fast) ease;
  opacity: 0;
  pointer-events: none;
}

.showcase-strip__wrap.has-overflow-left .showcase-strip__btn--prev,
.showcase-strip__wrap.has-overflow-right .showcase-strip__btn--next {
  opacity: 1;
  pointer-events: auto;
}

.showcase-strip__btn:hover {
  background: var(--surface-80);
  border-color: rgba(255,255,255,0.25);
  color: var(--light-100);
}

.showcase-strip__btn--prev { left: 80px; }
.showcase-strip__btn--next { right: 80px; }

.showcase-strip__btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* === ShowcaseTextImage — text/image two-column === */
.showcase-text-image {
  padding: var(--space-48) 0;
}

.showcase-text-image__grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: var(--space-48);
  align-items: center;
}

.showcase-text-image--flip .showcase-text-image__grid {
  grid-template-columns: 55fr 45fr;
}

.showcase-text-image--flip .showcase-text-image__image {
  order: -1;
}

.showcase-text-image__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-16);
  color: var(--light-100);
}

.showcase-text-image__body {
  font-size: var(--text-lg);
  color: var(--light-90);
  line-height: var(--leading-relaxed);
}

.showcase-text-image__body p {
  margin-bottom: var(--space-16);
}

.showcase-text-image__body p:last-child {
  margin-bottom: 0;
}

.showcase-text-image img {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* Constrain tall images in text-image layout */
.showcase-text-image__image {
  max-height: min(600px, 65vh);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.showcase-text-image__image img {
  object-fit: cover;
  object-position: top;
}

/* Device frames inside text-image and triple should not inherit border-radius */
.showcase-text-image__image .device-laptop img,
.showcase-text-image__image .device-iphone img,
.showcase-text-image__image .device-browser img,
.showcase-text-image__image .device-ipad img,
.showcase-triple__item .device-laptop img,
.showcase-triple__item .device-iphone img,
.showcase-triple__item .device-browser img,
.showcase-triple__item .device-ipad img {
  border-radius: 0;
}

/* === ShowcaseFullBleed — edge-to-edge image === */
.showcase-full-bleed {
  padding: var(--space-48) 0;
}

.showcase-full-bleed__wrap {
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  overflow: hidden;
}

.showcase-full-bleed img {
  width: 100%;
  display: block;
  border-radius: 0;
}

.showcase-full-bleed__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-48);
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
}

.showcase-full-bleed__overlay-text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--light-100);
  max-width: var(--width-content);
}

/* === ShowcaseContext — image on colored background === */
.showcase-context {
  padding: var(--space-48) 0;
}

.showcase-context__wrap {
  padding: var(--space-64);
  border-radius: var(--radius-lg);
  background: var(--surface-85);
}

.showcase-context--dark .showcase-context__wrap {
  background: var(--surface-100);
}

.showcase-context--brand .showcase-context__wrap {
  background: linear-gradient(135deg, var(--primary-100), var(--gradient-purple));
}

.showcase-context__inner {
  max-width: 100%;
  margin: 0 auto;
}

.showcase-context img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* === Device Containers === */

/* Browser frame */
.device-browser {
  background: var(--surface-90);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.device-browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  background: var(--surface-80);
}

.device-browser__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-60);
}

.device-browser__url {
  flex: 1;
  margin-left: var(--space-12);
  padding: var(--space-4) var(--space-12);
  background: var(--surface-90);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-browser__content img,
.device-browser__content video {
  width: 100%;
  display: block;
  border-radius: 0;
}

/* Ensure browser content has a reasonable min-height */
.device-browser__content {
  min-height: 280px;
}

/* Scrollable browser viewport for tall screencaps */
.device-browser--scroll .device-browser__content {
  max-height: min(480px, 50vh);
  min-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-60) transparent;
}

.device-browser--scroll .device-browser__content::-webkit-scrollbar {
  width: 6px;
}

.device-browser--scroll .device-browser__content::-webkit-scrollbar-track {
  background: transparent;
}

.device-browser--scroll .device-browser__content::-webkit-scrollbar-thumb {
  background: var(--surface-60);
  border-radius: var(--radius-full);
}

/* Laptop frame */
.device-laptop {
  position: relative;
  padding: 2.5% 11% 0;
  background: var(--surface-70);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid rgba(255,255,255,0.08);
}

.device-laptop__screen img,
.device-laptop__screen video {
  width: 100%;
  display: block;
  border-radius: 0;
}

.device-laptop__base {
  height: 12px;
  background: var(--surface-60);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin: 0 -4% 0;
}

/* iPhone frame */
.device-iphone {
  display: inline-block;
  padding: 14px;
  background: var(--surface-80);
  border-radius: 36px;
  border: 2px solid var(--surface-60);
}

.device-iphone__screen {
  border-radius: 24px;
  overflow: hidden;
}

.device-iphone__screen img,
.device-iphone__screen video {
  width: 100%;
  display: block;
  border-radius: 0;
}

/* Browser + Phone side-by-side layout — overlapping devices */
.device-pair {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 120px;
  padding-right: 20px;
}

.device-pair > div:first-child {
  max-width: 75%;
}

.device-pair__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  filter: drop-shadow(-4px 4px 12px rgba(0,0,0,0.4));
}

.device-pair__phone .device-iphone {
  width: 280px;
}

.device-pair .device-browser--scroll .device-browser__content {
  aspect-ratio: 16 / 12;
  max-height: none;
  min-height: auto;
  overflow-y: auto;
}

.device-pair .device-iphone--crop .device-iphone__screen {
  aspect-ratio: 8 / 16;
  max-height: none;
  overflow: hidden;
}

/* Mobile: stack devices vertically */
@media (max-width: 640px) {
  .device-pair {
    padding-bottom: 0;
    padding-right: 0;
  }
  .device-pair > div:first-child {
    max-width: 100%;
  }
  .device-pair__phone {
    position: static;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    filter: none;
  }
  .device-pair__phone .device-iphone {
    width: 240px;
  }
}

/* Cropped iPhone screen for long screencaps — matches browser scroll height */
.device-iphone--crop .device-iphone__screen {
  max-height: min(480px, 50vh);
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
}

.device-iphone--crop .device-iphone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* === Before/After Slider === */
.showcase-before-after {
  padding: var(--space-48) 0;
}

.ba-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.ba-slider__before {
  position: relative;
}

.ba-slider__before img {
  width: 100%;
  display: block;
  border-radius: 0;
}

.ba-slider__after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.ba-slider__after img {
  display: block;
  border-radius: 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Handle */
.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  z-index: 10;
  cursor: grab;
  transform: translateX(-50%);
}

.ba-slider__handle-line {
  position: absolute;
  inset: 0;
  background: var(--surface-100);
}

.ba-slider__handle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-90);
  border: 2px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light-100);
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

/* Labels */
.ba-slider__label {
  position: absolute;
  bottom: var(--space-24);
  padding: var(--space-4) var(--space-16);
  background: rgba(0,0,0,0.85);
  color: var(--light-100);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  z-index: 5;
  pointer-events: none;
}

.ba-slider__label--before { left: var(--space-24); }
.ba-slider__label--after  { right: var(--space-24); }

@media (prefers-reduced-motion: reduce) {
  .ba-slider__handle-icon { animation: none !important; }
}

/* === Panel Background — full-width recessed wrapper === */
.showcase-panel {
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: var(--surface-90);
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.35), inset 0 -1px 6px rgba(0,0,0,0.2);
  padding: var(--space-32) 0;
}

.showcase-panel__inner {
  max-width: var(--width-max);
  margin: 0 auto;
  padding: 0 5%;
}

/* === Annotation Callouts === */
.showcase-annotated {
  position: relative;
  display: block;
}

.showcase-annotated > img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
}

.showcase-callout {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Tooltip variant */
.showcase-callout--tooltip .showcase-callout__text {
  display: block;
  padding: var(--space-8) var(--space-16);
  background: var(--surface-90);
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-full);
  color: var(--light-100);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

/* Arrow — CSS triangle */
.showcase-callout--tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
}

.showcase-callout--arrow-bottom::after {
  top: 100%;
  border-top-color: var(--primary-100);
}

.showcase-callout--arrow-top::after {
  bottom: 100%;
  border-bottom-color: var(--primary-100);
}

.showcase-callout--arrow-left::after {
  top: 50%;
  left: auto;
  right: 100%;
  transform: translateY(-50%);
  border-right-color: var(--primary-100);
}

.showcase-callout--arrow-right::after {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-left-color: var(--primary-100);
}

/* Badge variant */
.showcase-callout--badge .showcase-callout__text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-8);
  background: var(--primary-100);
  color: var(--dark-100);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.showcase-callout--badge::after {
  display: none;
}

/* iPad frame */
.device-ipad {
  display: inline-block;
  padding: 16px;
  background: var(--surface-70);
  border-radius: 20px;
  border: 2px solid var(--surface-60);
}

.device-ipad__screen {
  border-radius: 8px;
  overflow: hidden;
}

.device-ipad__screen img,
.device-ipad__screen video {
  width: 100%;
  display: block;
  border-radius: 0;
}

/* =============================================
   Responsive — Showcase Components
   ============================================= */

/* === Tablet: 991px === */
@media (max-width: 991px) {
  .showcase-sbs__grid {
    gap: var(--space-16);
  }

  .showcase-triple__grid {
    gap: var(--space-16);
  }

  .showcase-text-image__grid,
  .showcase-text-image--flip .showcase-text-image__grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .showcase-text-image--flip .showcase-text-image__image {
    order: 0;
  }

  .showcase-strip__item {
    width: 360px;
  }

  .showcase-strip__viewport::before,
  .showcase-strip__viewport::after {
    width: 120px;
  }

  .showcase-strip__btn--prev { left: 24px; }
  .showcase-strip__btn--next { right: 24px; }

  .showcase-context__wrap {
    padding: var(--space-40);
  }

  .showcase-full-bleed__overlay {
    padding: var(--space-32);
  }
}

/* === Mobile: 767px === */
@media (max-width: 767px) {
  .showcase {
    padding: var(--space-32) 0;
  }

  .showcase-hero {
    padding: var(--space-32) 0;
  }

  .showcase-detail {
    padding: var(--space-32) 0;
  }

  .showcase-sbs {
    padding: var(--space-32) 0;
  }

  .showcase-sbs__grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .showcase-sbs__item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .showcase-triple {
    padding: var(--space-32) 0;
  }

  .showcase-triple__grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .showcase-strip {
    padding: var(--space-32) 0;
  }

  .showcase-strip__item {
    width: 260px;
  }

  .showcase-strip__viewport::before,
  .showcase-strip__viewport::after {
    width: 60px;
  }

  .showcase-strip__wrap::before,
  .showcase-strip__wrap::after {
    width: 50px;
  }

  .showcase-strip__spacer {
    flex: 0 0 0px;
  }

  .showcase-strip__track::after {
    flex: 0 0 5px;
  }

  .showcase-strip__btn {
    display: none;
  }

  .showcase-text-image {
    padding: var(--space-32) 0;
  }

  .showcase-full-bleed {
    padding: var(--space-32) 0;
  }

  .showcase-full-bleed__overlay {
    padding: var(--space-24);
  }

  .showcase-full-bleed__overlay-text {
    font-size: var(--text-xl);
  }

  .showcase-context {
    padding: var(--space-32) 0;
  }

  .showcase-context__wrap {
    padding: var(--space-16);
  }

  .showcase-text-image__image {
    text-align: center;
  }

  .showcase-text-image__image .device-iphone {
    max-width: 100%;
  }

  .device-iphone {
    padding: 10px;
    border-radius: 28px;
  }

  .device-iphone__screen {
    border-radius: 20px;
  }

  .device-ipad {
    padding: 12px;
    border-radius: 16px;
  }

  .device-ipad__screen {
    border-radius: 6px;
  }

  .showcase-callout {
    display: none;
  }

  .ba-slider__label {
    font-size: var(--text-xs);
    bottom: var(--space-16);
  }

  .ba-slider__label--before { left: var(--space-16); }
  .ba-slider__label--after  { right: var(--space-16); }
}

/* === Lightbox — click-to-expand for any showcase image === */
.showcase-triple__item img,
.showcase-detail__inner img,
.showcase-sbs__item img,
.showcase-text-image__image img,
.showcase-context__inner img,
.showcase-hero img {
  cursor: zoom-in;
}

.showcase-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-24);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.showcase-lightbox.is-active {
  opacity: 1;
  visibility: visible;
}

.showcase-lightbox img {
  max-width: min(95vw, 800px);
  width: auto;
  height: auto;
  border-radius: var(--radius-lg);
  margin: auto;
}

.showcase-lightbox__close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: var(--space-8);
}

/* === Image Cycling Animation === */
.cold-call-cycle {
  position: relative;
}

.cold-call-cycle__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.cold-call-cycle__img--active {
  position: relative;
  opacity: 1;
}

/* === Phone Slideshow — tap to advance with dots === */
.phone-slideshow {
  position: relative;
  cursor: pointer;
}

.phone-slideshow__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.phone-slideshow__img--active {
  position: relative;
  opacity: 1;
}

.phone-slideshow__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: var(--space-12);
}

.phone-slideshow__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-60);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

.phone-slideshow__dot--active {
  background: var(--accent);
}

/* === Showcase Demo — Device Grid === */
.showcase-demo-devices {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-32);
  align-items: start;
  margin-bottom: var(--space-48);
}