/* =========================================================
   Bluwin Infotech: mobile layout + photo overlay fixes
   Loaded last. Safe to replace on its own.
   ========================================================= */

/* ---------- 1. No dark overlay on the photo reel ---------- */
.reel__card::after { display: none; }
.reel__cols { opacity: 1; }
.reel__play { background: rgba(20,18,46,.55); }

/* Lighter overlays on other photos (text stays readable) */
.page-hero__media::after { background: linear-gradient(180deg, rgba(11,10,34,.25) 0%, transparent 35%, rgba(11,10,34,.7) 100%); }
.panel img { filter: none; }
.panel::after { background: linear-gradient(180deg, transparent 50%, rgba(11,10,34,.75)); }
.stat-band::after { background: rgba(11,10,34,.55); }
.quote-band::after { background: linear-gradient(90deg, rgba(11,10,34,.7), rgba(11,10,34,.1)); }
.next::after { background: linear-gradient(180deg, transparent 30%, rgba(11,10,34,.7)); }
.city::after { background: linear-gradient(180deg, transparent 55%, rgba(11,10,34,.75)); }

/* ---------- 2. Less empty space above the hero text ---------- */
.hero { min-height: min(100svh, 860px); justify-content: center; padding: 130px 0 70px; }
.page-hero--media { min-height: min(86svh, 760px); }

/* ---------- 3. Mobile: swipe rows instead of long stacks ---------- */
.m-swipe-hint { display: none; }

@media (max-width: 760px) {
  /* Hero: mark small at top right, text right under the header */
  .hero { min-height: 0; justify-content: flex-start; padding: 104px 0 48px; }
  .hero__mark { width: 74px; right: var(--gutter); top: 96px; left: auto; transform: none; opacity: .9; }
  .hero__copy { gap: 14px; padding-top: 70px; }
  .hero__copy h1[data-swap] { min-height: 0; }
  .scroll-cue { display: none; }
  .page-hero { padding: 112px 0 40px; }
  .page-hero--media { min-height: 74svh; }

  /* Generic horizontal scroller */
  .svc-cards, .cards, .post-grid, .steps, .every-grid, .cities, .work-intro, .stack,
  .panels, .story__steps, .stats, .board {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 14px !important; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 18px; scroll-padding-left: var(--gutter);
    scrollbar-width: none; height: auto !important;
  }
  .svc-cards::-webkit-scrollbar, .cards::-webkit-scrollbar, .post-grid::-webkit-scrollbar, .steps::-webkit-scrollbar,
  .every-grid::-webkit-scrollbar, .cities::-webkit-scrollbar, .work-intro::-webkit-scrollbar, .stack::-webkit-scrollbar,
  .panels::-webkit-scrollbar, .story__steps::-webkit-scrollbar, .stats::-webkit-scrollbar,
  .board::-webkit-scrollbar { display: none; }
  .svc-cards > *, .cards > *, .post-grid > *, .steps > *, .every-grid > *, .cities > *, .work-intro > *,
  .stack > *, .panels > *, .story__steps > *, .board > * {
    flex: 0 0 82vw !important; width: 82vw; scroll-snap-align: start;
  }
  .stats > * { flex: 0 0 58vw !important; scroll-snap-align: start; }

  /* Stacking work cards become swipe cards */
  .case { position: relative; top: auto; }
  .case__inner { transform: none !important; height: 100%; }
  .stack { align-items: stretch; }

  /* Expanding panels: plain photo cards */
  .panel, .panel.is-open { min-height: 380px; }
  .panel__body { opacity: 1; transform: none; }

  /* Sticky story: hide the big sticky photo, each step gets its own photo */
  .story__media { display: none; }
  .story__steps { align-items: stretch; }
  .story__step { min-height: 0 !important; opacity: 1 !important; align-content: start; background: var(--tile); border-radius: 20px; padding: 0 0 22px; overflow: hidden; }
  body[data-bg="dark"] .story__step { background: rgba(255,255,255,.06); }
  .story__step > *:not(.story__thumb) { margin-left: 20px; margin-right: 20px; }
  .story__thumb { display: block !important; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 6px; }
  .story__thumb img { width: 100%; height: 100%; object-fit: cover; }

  /* Steps & cards inside scrollers */
  .step { border-radius: 18px; background: var(--tile); color: var(--ink); padding: 20px; }
  .step h3 { color: var(--navy); }
  .board > * { grid-column: auto !important; grid-row: auto !important; }
  .board { background: transparent; box-shadow: none; padding-top: 4px; border-radius: 0; }
  .board > .board__chart, .board > .board__tile { background: #0f0d2b; color: #fff; }
  .board__note { flex-basis: 100% !important; }

  /* Client logos: 2-row swipe strip instead of a 9-row grid */
  .clients__grid, .clients__grid--wide {
    display: grid !important; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
    grid-template-columns: none !important; grid-auto-columns: 40vw;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px;
  }
  .clients__grid::-webkit-scrollbar { display: none; }
  .clients__grid .tile { scroll-snap-align: start; }

  /* Small "swipe" hint shown under scrollers */
  .m-swipe-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .55; margin: -4px 0 0; }
  .m-swipe-hint::after { content: "→"; animation: nudge 1.4s ease-in-out infinite; }
  @keyframes nudge { 50% { transform: translateX(6px); } }

  /* Tighter vertical rhythm */
  .section { padding-top: 64px; padding-bottom: 64px; }
  .mosaic { height: 70vh; }
}

@media (max-width: 760px) {
  /* Burst section: no long pinned scroll on phones */
  .burst { height: auto !important; }
  .burst__pin { position: relative; height: auto; padding: 56px 0 24px; }
  .burst__cloud { display: none; }
  .statement { padding: 64px 0 48px; }
  /* Services list: names only, shorter list */
  .svc__line { display: none; }
  .svc-list a { padding: 16px 4px; }
}