/* ============================================================
   WATZSEE — iOS app showcase
   Layered on watzsee.css; uses the same tokens throughout.
   ============================================================ */

.iosHero{ padding:70px 0 34px; }
.iosHero h1{
  margin:0;
  font-size:clamp(2.7rem,5.4vw,4.8rem);
  line-height:.98; letter-spacing:-.05em;
}
.iosHero .lead{ margin-top:20px; max-width:56ch; }
.iosHero__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:18px;
  margin-top:26px;
}
.iosHero__count{
  margin:0; padding:7px 13px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--muted); font-size:.82rem; font-weight:700;
}
.iosHero__dev{ color:var(--accent2); font-size:.88rem; font-weight:700; text-decoration:none; }
.iosHero__dev:hover{ text-decoration:underline; }
.iosHero__dev[hidden]{ display:none; }

/* ---------- category pills ----------------------------------- */

.filter{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-block:6px 30px;
}
.filter[hidden]{ display:none; }
.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-family:var(--font); font-size:.88rem; font-weight:700;
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.pill:hover{ border-color:var(--line-2); color:var(--text); }
.pill__n{ color:var(--dim); font-size:.76rem; font-weight:700; }
.pill[aria-current="true"]{
  border-color:transparent;
  background:linear-gradient(135deg,#8fd8ff,#4bb3ff 55%,#3b87ff);
  color:var(--on-accent);
}
.pill[aria-current="true"] .pill__n{ color:rgba(6,20,33,.62); }

/* ---------- app cards ---------------------------------------- */

.appgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:20px;
  padding-bottom:20px;
}
@media (max-width: 860px){ .appgrid{ grid-template-columns:1fr; } }

/* grid and flex children default to min-width:auto, which lets the
   screenshot strip push the card wider than a phone screen */
.appgrid > *,.appcard,.appcard__head{ min-width:0; }

.appcard{
  display:flex; flex-direction:column;
  padding:26px;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--surface);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.appcard:hover{
  transform:translateY(-4px);
  border-color:rgba(89,184,255,.3);
  box-shadow:0 22px 50px rgba(0,0,0,.4);
}

.appcard__head{ display:flex; gap:18px; align-items:flex-start; }

.appcard__iconwrap{ position:relative; flex:0 0 auto; }
.appcard__icon{
  width:76px; height:76px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:#16283e;
  object-fit:cover;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.appcard__badge{
  position:absolute; top:-8px; right:-10px;
  padding:4px 9px; border-radius:999px;
  background:linear-gradient(135deg,#8fd8ff,#4bb3ff);
  color:var(--on-accent);
  font-size:.64rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 6px 18px rgba(49,146,255,.4);
}

.appcard__title{ min-width:0; padding-top:2px; }
/* a long unbroken name must wrap rather than widen the card */
.appcard__title h2{
  margin:0;
  font-size:1.32rem; font-weight:800; letter-spacing:-.03em; line-height:1.2;
  overflow-wrap:break-word;
}
.appcard__tagline{ margin:5px 0 0; color:var(--muted); font-size:.95rem; line-height:1.5; overflow-wrap:break-word; }
.appcard__status{
  display:flex; align-items:center; gap:8px;
  margin:10px 0 0;
  font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim);
}
.appcard__status .dot{
  width:7px; height:7px; border-radius:50%;
  background:currentColor;
}
.appcard.is-live .appcard__status{ color:var(--green); }
.appcard.is-beta .appcard__status{ color:var(--accent2); }
.appcard.is-soon .appcard__status{ color:var(--dim); }

.appcard__desc{
  margin:20px 0 0;
  color:var(--muted); font-size:.96rem; line-height:1.7;
  overflow-wrap:break-word;
}

.appcard__meta{
  display:flex; flex-wrap:wrap; gap:7px;
  margin:18px 0 0;
}
.appcard__meta span{
  padding:5px 11px;
  border:1px solid var(--line); border-radius:999px;
  color:#adbdcc; font-size:.74rem; font-weight:650;
}

/* screenshot strip */
.shots{
  display:flex; gap:12px; min-width:0; max-width:100%;
  margin:22px 0 0; padding-bottom:6px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.shots::-webkit-scrollbar{ height:6px; }
.shots::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:999px; }
.shots img{
  flex:0 0 auto;
  width:132px; height:auto;
  scroll-snap-align:start;
  border:1px solid var(--line); border-radius:14px;
  background:#0b1a2c;
}

.appcard__foot{ display:flex; margin-top:auto; padding-top:22px; }
.btn--wide{ width:100%; }
.is-disabled{ opacity:.55; cursor:default; pointer-events:none; }

/* ---------- empty state --------------------------------------- */

.empty{
  margin:6px 0 40px;
  padding:clamp(30px,6vw,64px);
  border:1px dashed var(--line-2); border-radius:var(--r);
  background:rgba(255,255,255,.015);
}
.empty__kicker{ margin:0 0 12px; color:var(--accent); font-size:.72rem; font-weight:900; letter-spacing:.2em; }
.empty__title{ margin:0 0 16px; font-size:clamp(2rem,3.6vw,3.2rem); line-height:1.05; letter-spacing:-.045em; }
.empty__body{ margin:0 0 24px; max-width:62ch; color:var(--muted); font-size:1.02rem; }
.empty__steps{ margin:0 0 26px; padding:0; list-style:none; display:grid; gap:12px; max-width:74ch; }
.empty__steps li{
  display:flex; gap:16px; align-items:baseline;
  padding-top:12px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.94rem;
}
.empty__steps b{ flex:0 0 auto; color:var(--accent); font-size:.7rem; font-weight:900; letter-spacing:.12em; }
.empty code{
  padding:2px 7px; border-radius:6px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--accent2); font-size:.85em;
}

/* ---------- responsive ---------------------------------------- */

/* touch: pills need to clear the 44px tap target */
@media (hover: none) and (pointer: coarse){
  .pill{ min-height:44px; }
}

@media (max-width: 620px){
  .iosHero{ padding:56px 0 26px; }
  .appcard{ padding:20px; }
  .appcard__head{ gap:14px; }
  .appcard__icon{ width:64px; height:64px; border-radius:15px; }
  .appcard__title h2{ font-size:1.16rem; }
  .shots img{ width:116px; }
}