/* Extensions for the Sikhi work pages. Loaded after inner-pages.css by
   /about/sikhi/translations/ and /about/sikhi/apps/ only.

   The app band deliberately leaves the studio palette and uses Tabla Mridang
   Sagar's own colours, sampled from its icon and interface, so the product
   reads as itself inside the studio's dark theme. */

:root {
  --tms-paper: #f9f4e6;
  --tms-ink: #2a251d;
  --tms-red: #b5392e;
  --tms-muted: #978679;
  --tms-line: rgba(42, 37, 29, 0.16);
}
.gurmukhi {
  font-family: "Noto Sans Gurmukhi", "Hanken Grotesk", sans-serif;
}

/* ── Bani cards ────────────────────────────────────────────────── */
.bani-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(46px, 7vh, 74px);
}
.bani-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(244, 243, 240, 0.025);
  transition:
    border-color 0.3s,
    background 0.3s;
}
.bani-card:hover {
  border-color: rgba(126, 150, 194, 0.55);
  background: rgba(126, 150, 194, 0.06);
}
.bani-card .bani-index {
  color: var(--blue);
  font:
    11px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.bani-card h3 {
  margin: 0 0 10px;
  font:
    400 clamp(24px, 2.4vw, 30px) / 1.15 "Newsreader",
    Georgia,
    serif;
}
.bani-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
}
.bani-card .bani-source {
  margin-top: auto;
  padding-top: 24px;
  color: #c9c5ba;
  font:
    10px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── Channel panel ─────────────────────────────────────────────── */
.channel-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 60px);
  margin-top: clamp(44px, 7vh, 70px);
  padding: clamp(30px, 4vw, 54px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 12%, rgba(126, 150, 194, 0.16), transparent 42%),
    rgba(244, 243, 240, 0.025);
}
.channel-panel h3 {
  margin: 16px 0 14px;
  font:
    400 clamp(30px, 3.6vw, 46px) / 1.05 "Newsreader",
    Georgia,
    serif;
}
.channel-panel p {
  max-width: 54ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

/* ── App band: Tabla Mridang Sagar's own palette ───────────────── */
.app-band {
  background: var(--tms-paper);
  color: var(--tms-ink);
  border-top: 1px solid var(--tms-line);
  border-bottom: 1px solid var(--tms-line);
}
.app-band .eyebrow {
  color: var(--tms-red);
}
.app-band h2 {
  color: var(--tms-ink);
}
.app-band .lede {
  color: #4a443a;
}
.app-band-head {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
}
.app-band-head img.app-mark {
  width: 108px;
  height: 108px;
  border-radius: 24px;
  border: 1px solid var(--tms-line);
  display: block;
}
.app-band-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.app-band-meta li {
  padding: 7px 14px;
  border: 1px solid var(--tms-line);
  border-radius: 999px;
  color: #6a6255;
  font:
    11px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.app-band-body {
  max-width: 66ch;
  margin-top: 26px;
  color: #4a443a;
  font-size: 16px;
  line-height: 1.75;
}
.app-band-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(40px, 6vh, 64px);
}
.app-band-shots img {
  width: 100%;
  height: auto;
  aspect-ratio: 1242 / 2688;
  display: block;
  border: 1px solid var(--tms-line);
  border-radius: 14px;
  background: var(--tms-paper);
}
.app-band-shots figure {
  margin: 0;
}
.app-band-shots figcaption {
  margin-top: 13px;
  color: #7a7266;
  font:
    10px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pill-app {
  background: var(--tms-red);
  color: var(--tms-paper);
}
.pill-app:hover {
  background: var(--tms-ink);
  color: var(--tms-paper);
}
.app-band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}
.text-link-app {
  width: max-content;
  color: #8a5148;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-bottom: 1px solid rgba(181, 57, 46, 0.4);
  padding-bottom: 5px;
}
.text-link-app:hover {
  color: var(--tms-ink);
  border-color: var(--tms-ink);
}

/* ── Quiet "more later" note ───────────────────────────────────── */
.later-note {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  max-width: 78ch;
  margin-top: clamp(40px, 6vh, 60px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.later-note span {
  color: var(--blue);
  font:
    11px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 4px;
}
.later-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

@media (max-width: 900px) {
  .bani-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .channel-panel {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .app-band-head {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .bani-grid {
    grid-template-columns: 1fr;
  }
  .app-band-shots {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 68vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 16px;
  }
  .app-band-shots::-webkit-scrollbar {
    display: none;
  }
  .app-band-shots figure {
    scroll-snap-align: start;
  }
  .app-band-head img.app-mark {
    width: 84px;
    height: 84px;
    border-radius: 19px;
  }
  .later-note {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}