/* =====================================================================
   MOBILE OPTIMIZATION v1 — Swipe Cards & Touch Interactions
   ===================================================================== */

/* ---- Universal Horizontal Scroll Container ---- */
.pp-swipe-x{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;padding-bottom:8px;cursor:grab;-webkit-user-select:none;user-select:none}
.pp-swipe-x::-webkit-scrollbar{display:none}
.pp-swipe-x:active{cursor:grabbing}
.pp-swipe-x > *{flex:0 0 auto;scroll-snap-align:start;min-width:260px;max-width:280px}

/* ---- Mobile: Contact Cards → Swipe ---- */
@media(max-width:768px){
  .pp-contact-grid{display:flex!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;padding:4px 20px 16px;-webkit-user-select:none;user-select:none}
  .pp-contact-grid::-webkit-scrollbar{display:none}
  .pp-contact-grid > *{flex:0 0 auto;width:260px;min-width:260px;max-width:260px;scroll-snap-align:start}
  
  /* Swipe hint arrow */
  .pp-contact-grid::after{content:"\2192";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--clay);opacity:.35;pointer-events:none;animation:swipeHint 1.5s ease-in-out infinite}
}

/* ---- Mobile: About Stats → Swipe ---- */
@media(max-width:768px){
  .pp-abt-hero-stats{display:flex!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:28px;padding:20px 20px 8px;justify-content:flex-start}
  .pp-abt-hero-stats::-webkit-scrollbar{display:none}
  .pp-abt-stat{flex:0 0 auto;min-width:90px;text-align:center}
}

/* ---- Mobile: Values Cards → Swipe ---- */
@media(max-width:768px){
  .pp-abt-values-grid{display:flex!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:16px;padding:8px 20px 20px}
  .pp-abt-values-grid::-webkit-scrollbar{display:none}
  .pp-abt-values-grid > *{flex:0 0 auto;width:260px;min-width:260px;max-width:260px;scroll-snap-align:start}
}

/* ---- Mobile: Location Cards → Swipe ---- */
@media(max-width:768px){
  .pp-abt-loc-grid{display:flex!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:16px;padding:8px 20px 20px}
  .pp-abt-loc-grid::-webkit-scrollbar{display:none}
  .pp-abt-loc-grid > *{flex:0 0 auto;width:280px;min-width:280px;max-width:280px;scroll-snap-align:start}
}

/* ---- Mobile: Related Posts → Swipe ---- */
@media(max-width:768px){
  .pp-related-grid{display:flex!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;padding:8px 20px 16px}
  .pp-related-grid::-webkit-scrollbar{display:none}
  .pp-related-grid > *{flex:0 0 auto;width:220px;min-width:220px;max-width:220px;scroll-snap-align:start}
  .pp-related-card-body h4{font-size:.84rem!important}
  .pp-related-card-body p{display:none}
}

/* ---- Mobile: Share Buttons → Compact ---- */
@media(max-width:480px){
  .pp-share-row{gap:8px;padding:14px 16px}
  .pp-share-btn{width:34px;height:34px;font-size:.78rem}
}

/* ---- Touch Feedback: Card Press Effect ---- */
@media(hover:none) and (pointer:coarse){
  .pp-contact-card,.pp-abt-value-card,.pp-abt-loc-card,.pp-related-card,.pp-post{
    transition:transform .15s ease,box-shadow .15s ease
  }
  .pp-contact-card:active,.pp-abt-value-card:active,.pp-abt-loc-card:active,.pp-related-card:active{
    transform:scale(.97)!important;box-shadow:none!important
  }
  .pp-btn:active{transform:scale(.96)!important}
  .pp-share-btn:active{transform:scale(.9)!important;background:var(--clay)!important;color:#fff!important;border-color:var(--clay)!important}
}

/* ---- Mobile: Founder Badge Center & Smaller ---- */
@media(max-width:768px){
  .pp-abt-badge-img{width:110px!important}
  .pp-abt-founder-card{padding:24px 18px!important;gap:20px}
}

/* ---- Mobile: Mission Quote Smaller ---- */
@media(max-width:768px){
  .pp-abt-mission-inner{padding:0 16px}
  .pp-abt-quote-lite{font-size:.9rem!important;line-height:1.65!important}
}

/* ---- Mobile: CTA Full Width ---- */
@media(max-width:768px){
  .pp-contact-cta{margin:0 16px;border-radius:var(--radius)}
  .pp-abt-cta .pp-contact-cta{margin:0 16px}
}

/* Swipe hint animation */
@keyframes swipeHint{
  0%,100%{opacity:.2;transform:translateY(-50%) translateX(0)}
  50%{opacity:.5;transform:translateY(-50%) translateX(6px)}
}

/* Swipe dot indicators */
.pp-swipe-dots{display:flex;justify-content:center;gap:8px;padding:14px 0 4px}
.pp-swipe-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:all .3s var(--ease);cursor:pointer}
.pp-swipe-dot.active{background:var(--clay);width:20px;border-radius:4px}

/* Edge fade for scrollable containers */
[data-swipe]{position:relative}
[data-swipe]::before,[data-swipe]::after{content:"";position:absolute;top:0;bottom:0;width:24px;z-index:2;pointer-events:none;transition:opacity .3s}
[data-swipe]::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
[data-swipe]::after{right:0;background:linear-gradient(270deg,#fff,transparent)}

/* Hide left fade at start */
.swipe-at-start::before{opacity:0}
.swipe-at-end::after{opacity:0}

/* For ivory/cream backgrounds - use matching gradient */
.pp-abt-values [data-swipe]::before,
.pp-abt-values [data-swipe]::after,
.pp-abt-locations [data-swipe]::before,
.pp-abt-locations [data-swipe]::after{background:linear-gradient(90deg,var(--ivory-2),transparent)}
.pp-abt-values [data-swipe]::after,
.pp-abt-locations [data-swipe]::after{background:linear-gradient(270deg,var(--ivory-2),transparent)}