/* =============================================================
   Trips — landing page
   Global resets + system type, ported from the Claude Design file.
   Layout/visuals live inline in index.html (matching the design);
   this file carries page-wide rules, hover/hit states, and the
   responsive breakpoints.
   ============================================================= */

:root {
  /* half-width to keep clear of the held phone, so the side captions
     center in the gap between the phone and the screen edge */
  --phone-clear: 23vh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #000;
}

::selection { background: rgba(47, 124, 246, 0.3); }

/* canvas inside the hero phone — keep the rounded screen crisp */
#phone-canvas { object-fit: cover; }

/* hero side captions: center their content in the side gap */
.step { align-items: center; text-align: center; }
.step > div, .step > p { max-width: 420px; }

/* ---- Share-videos card: copy left, phone mock on the right (wide screens) ---- */
.card-share {
  position: relative;
  overflow: hidden;                 /* clips the phone's lower half on narrow screens */
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 2px 30px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 64px 56px;
  text-align: left;
}
.card-share-copy { flex: 1 1 auto; max-width: 560px; }
.card-share-media {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-mock {
  position: relative;
  height: 520px;
  aspect-ratio: 1350 / 2760;
  filter: drop-shadow(0 28px 50px rgba(0,0,0,0.22));
}

/* progress dots: small round visual, with an invisible enlarged hit target
   (a transparent ::after) so we don't distort the dot itself with padding) */
.dot {
  position: relative;
  cursor: pointer;
}
.dot::after {
  content: "";
  position: absolute;
  inset: -13px -7px;
}

/* hover states (ported from the design's style-hover attributes) */
.nav-download { transition: filter .2s ease; }
.nav-download:hover { filter: brightness(1.08); }

/* feature section — stack the cards on small screens */
@media (max-width: 768px) {
  #features { padding: 56px 16px 64px !important; }
  .cards-row { grid-template-columns: 1fr !important; }
  .card-half { min-height: 0 !important; padding: 38px 28px 42px !important; }

  /* Share-videos card: copy on top, phone dropped to the bottom with its
     lower half clipped right at the card's bottom edge (no bottom padding). */
  .card-share { display: block; text-align: center; padding: 44px 24px 0; }
  .card-share-copy { max-width: 560px; margin: 0 auto; }
  .card-share-copy h2 { font-size: 28px !important; }
  .card-share-copy p { font-size: 17px !important; }
  .card-share-media {
    margin-top: 30px;
    height: 244px;                  /* ≈ half the phone height → bottom half is cut */
    overflow: hidden;
    align-items: flex-start;        /* show the TOP of the phone, not its middle */
  }
  .phone-mock {
    height: auto;
    width: 244px;
    margin: 0 auto;
    filter: drop-shadow(0 16px 28px rgba(0,0,0,0.16));
  }
}

/* respect reduced-motion: drop smooth-scroll (the scroll-jack still works) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}