/* ============================================
   SCREENSHOT WINDOW — macOS chrome wrapper
   Shared by hero image and carousel slides.
   ============================================ */
.screenshot-window {
  border-radius: 8px;
  overflow: hidden;
  line-height: 0; /* eliminate gap beneath inline img */
}

.screenshot-window__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: #EBEBEB;
  line-height: 1;
}

.screenshot-window__dot {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.screenshot-window__dot--close { background: #FF5F57; }
.screenshot-window__dot--min   { background: #FEBC2E; }
.screenshot-window__dot--max   { background: #28C840; }

.screenshot-window img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   SCREENSHOT — contextual modifiers
   ============================================ */

/* Inside a white panel (homepage featured block) */
.featured__screenshot {
  box-shadow:
    0 2px 8px  rgba(17,17,17,0.06),
    0 10px 28px rgba(17,17,17,0.08);
  transition: box-shadow 550ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Give the image a smooth transition base —
   overflow:hidden on .screenshot-window clips the zoom cleanly */
.featured__screenshot img {
  transition: transform 550ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover effects only on pointer devices (not touch) */
@media (hover: hover) {
  .featured__screenshot:hover img {
    transform: scale(1.025);
  }

  .featured__screenshot:hover {
    box-shadow:
      0 4px 14px rgba(17,17,17,0.09),
      0 18px 44px rgba(17,17,17,0.12);
  }
}

/* ── Homepage FLO — featured screenshot sizing & placement ─────────────
   Goal: screenshot fills the right visual area as if it were intentionally
   placed inside the blue reference frame — larger, centred, slightly high.
   No bleed technique; the nudge is done with explicit margins.
   ──────────────────────────────────────────────────────────────────────── */

/* Wider visual column; minmax(0,…) prevents grid blowout */
#flo .featured__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 48px;
}

/* Flex-start so the screenshot anchors to the left edge of its column,
   then the negative margin pulls it further left into the gap */
#flo .featured__visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Overhang the column to the right so the screenshot is larger without
   moving the left edge back toward the text column.
   overflow: hidden on the panel clips it cleanly at the border-radius. */
#flo .panel {
  overflow: hidden;
}

#flo .featured__screenshot {
  width: 115%;
  max-width: none;
  margin-left: -18px;
  margin-top: -8px;
}

#flo .featured__screenshot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Stronger hover zoom — JS sets transform-origin live (cursor-aware) */
@media (hover: hover) {
  #flo .featured__screenshot:hover img {
    transform: scale(1.05);
  }
}

/* Mobile: restore clean stacked layout, undo all nudges */
@media (max-width: 900px) {
  #flo .panel {
    overflow: visible;
  }
  #flo .featured__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
  }
  #flo .featured__visual {
    justify-content: flex-start;
  }
  #flo .featured__screenshot {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }
}

/* ============================================
   SCREENSHOT HERO — featured dashboard image
   ============================================ */
.screenshot-hero {
  margin-top: 2rem;
  border-radius: 8px;
  box-shadow:
    0 4px 16px rgba(17,17,17,0.08),
    0 24px 56px rgba(17,17,17,0.10),
    0 48px 96px rgba(17,17,17,0.06);
}

/* ============================================
   CAROUSEL — screenshot gallery
   ============================================ */
.carousel {
  position: relative;
  margin-top: 2.5rem;
  touch-action: pan-y;
  outline: none;
}

.carousel__track-wrap {
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 2px 8px  rgba(17,17,17,0.06),
    0 12px 32px rgba(17,17,17,0.08);
  background: #EBEBEB; /* shows chrome colour while images load */
}

.carousel__track {
  display: flex;
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.carousel__slide img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

/* ── Navigation arrows ─────────────────────── */
.carousel__btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity var(--t, 200ms ease), background var(--t, 200ms ease);
  padding: 0;
}

.carousel__btn--prev { left:  0; border-radius: 8px 0 0 8px; }
.carousel__btn--next { right: 0; border-radius: 0 8px 8px 0; }

/* Show on hover / focus anywhere in carousel */
.carousel:hover       .carousel__btn,
.carousel:focus-within .carousel__btn { opacity: 1; }

.carousel__btn:hover { background: rgba(0, 0, 0, 0.18); }

.carousel__btn svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

/* ── Dot indicators ────────────────────────── */
.carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 1rem;
}

.carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0;
  transition: background var(--t, 200ms ease), transform var(--t, 200ms ease);
}

.carousel__dot.is-active {
  background: var(--c-accent, #1F6EDB);
  transform: scale(1.3);
}

/* ── Caption ───────────────────────────────── */
.carousel__caption {
  font-size: 0.8125rem;
  color: var(--c-text-3, #8A8A8A);
  text-align: center;
  margin-top: 0.625rem;
  min-height: 1.3em;
  transition: opacity 200ms ease;
}

/* ── Mobile adjustments ────────────────────── */
@media (max-width: 640px) {
  /* Always show arrows on touch devices — no hover state */
  .carousel__btn {
    opacity: 1;
    width: 40px;
  }

  .carousel__btn svg {
    width: 18px;
    height: 18px;
  }
}