/* Phone and tablet fixes — jaypagare.in
   Loaded last on every page. Everything here sits inside a phone/tablet or touch-screen rule,
   so the desktop design (wider than 1024px, with a mouse) is untouched.
   Sizes used across the site:  phone ≤ 600px · tablet 601–1024px · desktop above. */

/* ========== TOUCH SCREENS (phones and tablets, any width) ========== */
@media (hover:none){
  /* gallery: titles were mouse-hover only; show them as a caption */
  .item .ov{opacity:1;transform:none;padding:28px 12px 10px}
  .item .ov b{font-size:13px;line-height:1.3}
  .item .ov small{font-size:11px}
  /* home "tools" card and plugin cards: demo plays when the card is in the middle of the screen, so the hover hint goes */
  .tk-card .hov,.tcard .gif .lbl{display:none}
  .tcard.play .gif .fill{filter:none;transform:scale(1.05)}
  .tcard.play .gif .anim2{opacity:1}
  .tcard.play .ui-mock .wave b{animation:wv 1s ease-in-out infinite alternate}
  /* keyboard shortcut badge in the gallery search makes no sense without a keyboard */
  .search .kbd{display:none}
  /* the PRIVATE badge moves up so it doesn't sit on the caption */
  .item .pvt{bottom:auto;top:38px;left:8px}
  /* testimonials: "drag" hint becomes "swipe" (text swapped in mobile.js) */
}

/* ========== TABLET AND PHONE (up to 1024px) ========== */
@media (max-width:1024px){
  /* footer: links big enough for a finger, and the showreel row lines up */
  .fcols a,.fcols button{min-height:44px;padding:0;text-align:left}
  .logo{display:inline-flex;align-items:center;min-height:44px}
  /* case study page: swipe the hero instead of arrows that cover the play button */
  .slider .arr{display:none}
  .slider .th button{flex-basis:104px}
  .slider .th button span.t{font-size:11px}
  /* the All / Videos / Reels / Images style switches never run off the screen */
  .seg{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .seg::-webkit-scrollbar{display:none}
  .seg button{white-space:nowrap;flex:none}
}
@media (max-width:600px){.seg button{padding:0 12px}}

/* ========== TABLET (601–1024px) ========== */
@media (min-width:601px) and (max-width:1024px){
  /* home: selected work and tools in two columns instead of one giant column */
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tcard.feat .media{min-height:300px}
  /* free plugins: two cards per row */
  .tk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .tk-card .body{padding:22px 22px 24px}
  .tk-card h3{font-size:22px}
  /* about: portrait no longer fills the whole screen */
  .ab-portrait{max-width:520px}
}

/* ========== PHONE (up to 600px) ========== */
@media (max-width:600px){
  /* less empty black between sections */
  :root{--sec:72px;--gap:32px}
  .clients{padding:44px 0}
  .fcols{margin-top:0;padding-top:28px;gap:28px 20px}
  .foot .ctas{margin-top:28px}

  /* page tops: a little less air above the big titles */
  .whero{padding:calc(76px + 40px) 0 28px}
  .whero .wrap{gap:24px}
  .chero{padding:calc(76px + 32px) 0 24px}

  /* "I'm looking for…" and "Show me…" chips: one row you swipe sideways */
  .lenses{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:clamp(20px,4vw,48px);
    margin:0 calc(-1 * clamp(20px,4vw,48px));padding:2px clamp(20px,4vw,48px) 6px;
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .lenses::-webkit-scrollbar{display:none}
  .lens{flex:none;scroll-snap-align:start;min-height:46px;font-size:14px}
  .lens .li{width:32px;height:32px}
  .lensbar{margin-bottom:12px}
  .lenshint{font-size:13px}

  /* the filter box folds away behind a "Filters" button (added by mobile.js) */
  .ftog{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #2A2A2E;background:#0B0B0D;font-size:14px;font-weight:600;color:var(--fg);margin-top:16px}
  .ftog b{min-width:20px;height:20px;border-radius:99px;background:var(--blue);color:#000;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
  .ftog svg{transition:transform .35s var(--ease)}
  .ftog[aria-expanded="true"] svg{transform:rotate(180deg)}
  .refine.fold{display:none}
  .refine.fold.open{display:flex;margin-top:12px}
  .refine .l{width:100%}
  .short div{flex-wrap:nowrap}
  .short .btn-sm{padding:0 14px;font-size:13px}

  /* case studies grid: cards a bit tighter */
  .pgrid{gap:36px}

  /* gallery: two columns of tiles */
  .mas{column-gap:12px}
  .mas .mcol{gap:12px}
  .item{border-radius:14px;margin:0 0 12px}
  .item .badge{top:8px;left:8px;font-size:10px;padding:4px 7px}
  .item .star{top:8px;right:8px;width:22px;height:22px;font-size:11px}
  .item .pvt{font-size:0;gap:0;padding:5px;top:8px;bottom:auto;left:auto;right:36px}   /* just the lock icon on small tiles */
  .agrid{gap:28px}
  .meta{padding:20px 0 16px}

  /* gallery viewer: bigger picture, swipe hint, thumbnails easier to hit */
  .lb .lbstage{padding:0 8px}
  .lb .thumbs button{flex-basis:56px;height:40px}
  .lb .bot{padding:14px 16px 20px}
  .lb .swipe-hint{display:block}

  /* album page: share buttons stay on one row */
  .ahead .bar{flex-wrap:wrap;gap:10px}

  /* free plugins */
  .tkp-shots .media span.n{font-size:10px;letter-spacing:.04em}
  .tk-card .body{padding:22px 20px 24px}
  .tk-card h3{font-size:24px}

  /* about: app names don't break mid-name */

  /* home */
  .tst .q{padding:0 2px}
  .hero-right{gap:12px}
}
.lb .swipe-hint{display:none;text-align:center;font-size:12px;letter-spacing:.12em;color:var(--dim);padding:6px 0 0}

/* gallery masonry columns (built by gallery.js so tiles read left-to-right in order) */
.mas.cols{columns:auto;display:flex;align-items:flex-start;gap:20px}
.mas .mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.mas .mcol .item{margin:0 0 20px}
@media (max-width:600px){.mas.cols{gap:12px}.mas .mcol .item{margin:0 0 12px}}

/* ---------- phone gallery: photo-app grid ---------- */
@media (max-width:600px){
  .mas.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;columns:auto;margin-inline:-6px}
  .mas.pgrid .item{aspect-ratio:1/1!important;margin:0;border-radius:6px;transform:none}
  .mas.pgrid .item .ov{display:none}
  .mas.pgrid .item .badge{top:auto;bottom:5px;left:5px;padding:2px 6px;font-size:9.5px;gap:4px;letter-spacing:.02em;background:rgba(0,0,0,.55)}
  .mas.pgrid .item:not(.vid) .badge{display:none}
  .mas.pgrid .item .star{top:5px;right:5px;width:16px;height:16px;font-size:9px}
  .mas.pgrid .item .pvt{top:5px;left:5px}
}

/* ---------- phone proportions: About and Contact ---------- */
@media (max-width:600px){
  /* About: calmer text sizes, buttons side by side, a portrait that doesn't take the whole screen */
  .ab-lead{font-size:18px;line-height:1.5}
  .ab-p{font-size:15px}
  .ab-now{padding:9px 14px 9px 12px}
  .ab-now p{font-size:13px;line-height:1.4}
  .ab-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .ab-ctas .btn{min-height:48px;font-size:14px;padding:0 6px 0 16px;justify-content:space-between}
  .ab-ctas .btn-s{justify-content:center;padding:0 12px}
  .ab-ctas .btn-p .bi{width:36px;height:36px}
  .ab-portrait .media{aspect-ratio:1/1;border-radius:24px}
  .xp{padding:22px;border-radius:24px}
  .xp h3{font-size:26px}
  .ab-clip{height:56px}
  .ab-step p{font-size:15px}
  .lc{padding:20px;border-radius:20px}

  /* Contact: reasons two to a row, a roomier form, quick actions in one row */
  .ct-hero{padding-top:calc(76px + 36px)}
  .ct-hero h1{font-size:44px}
  .ct-lead{font-size:16px}
  .ct-formcard{padding:20px 16px;border-radius:24px}
  .ct-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ct-opts .lens{min-height:44px;padding:0 10px 0 5px;font-size:13.5px;gap:8px;width:100%;box-sizing:border-box}
  .ct-opts .lens .li{width:32px;height:32px}
  .ct-opts .lens:last-child:nth-child(odd){grid-column:1 / -1}
  .ct-f input,.ct-f textarea{padding:14px 16px;border-radius:14px}
  .ct-send{flex-direction:column;align-items:stretch}
  .ct-send .btn{justify-content:space-between}
  .ct-note{justify-content:center}
  .ct-quick{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
  .ct-q{padding:14px 10px;align-items:center;text-align:center;border-radius:18px}
  .ct-q .ic{margin-bottom:6px}
  .ct-q b{font-size:14px}
  .ct-q span:last-child{font-size:12px}
  .ct-mail{padding:18px}
  .ct-clock b{font-size:40px}
}