/* ============================================================================
   Partner libraries: the row of library tiles above the kinds, the branded
   band that opens each partner's section of the list, and the partner
   preview (features/partner-preview.js) shown only in pitch meetings.

   Reads app.css custom properties only, so it follows light and dark. Loaded
   by library.html and every language page, whose shells differ, so nothing
   here is scoped to a body class.

     <button class="fchip partner-tile partner-tile--sky" aria-pressed="false">
       <span class="partner-mark">DBS</span><span class="partner-name">…</span>
       <span class="partner-n">2,113 items</span></button>
     <header class="partner-head partner-head--sky">…</header>

   Tones: sky (DBS), gold, green, purple, plain (VillageServer's own files).
   ========================================================================= */

.partner-tile, .partner-head {
  --p-face: var(--purple); --p-wash: var(--purple-wash); --p-on: var(--on-face);
}
.partner-tile--sky,    .partner-head--sky    { --p-face: var(--sky-face);   --p-wash: var(--sky-wash); }
.partner-tile--green,  .partner-head--green  { --p-face: var(--green-face); --p-wash: var(--green-wash); }
.partner-tile--gold,   .partner-head--gold   { --p-face: var(--gold);       --p-wash: var(--gold-wash); --p-on: var(--on-gold); }
.partner-tile--plain,  .partner-head--plain  { --p-face: var(--ink-soft);   --p-wash: var(--sunk); }

.partner-mark {
  flex: none;
  display: grid; place-items: center;
  min-width: 3rem; height: 3rem; padding: 0 .45rem;
  border-radius: 1rem;
  background: var(--p-face); color: var(--p-on);
  font-weight: 900; font-size: 1rem; letter-spacing: .02em; line-height: 1;
}
.partner-mark--logo { width: 3rem; background: #fff; padding: .2rem; border: 2px solid var(--p-face); overflow: hidden; }
.partner-mark--logo img { width: 100%; height: 100%; object-fit: contain; border-radius: .7rem; }
.partner-head .partner-mark.partner-mark--logo { min-width: 4.2rem; width: 4.2rem; height: 4.2rem; }

/* ------------------------------------------------------------- tile row */
.partner-tiles {
  flex-wrap: nowrap; overflow-x: auto; gap: .65rem;
  padding: .15rem 0 calc(var(--press) + .35rem);
  scrollbar-width: none;
}
.partner-tiles::-webkit-scrollbar { display: none; }
.fchip.partner-tile {
  flex: none;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: .65rem; row-gap: .1rem; align-items: center; justify-items: start;
  min-width: 11.5rem; max-width: 16rem;
  padding: .65rem .9rem .65rem .65rem;
  border-radius: var(--r-lg);
  border: 2px solid transparent;
  background: var(--p-wash); color: var(--ink);
  box-shadow: 0 var(--press) 0 var(--line-strong);
  text-align: start;
  transition: transform .09s ease-out, box-shadow .09s ease-out;
}
.fchip.partner-tile .partner-mark { grid-row: 1 / 3; }
.fchip.partner-tile:active { transform: translateY(var(--press)); box-shadow: none; }
.fchip.partner-tile[aria-pressed="true"] {
  background: var(--p-wash); color: var(--ink);
  border-color: var(--p-face); box-shadow: 0 var(--press) 0 var(--p-face);
}
/* DBS leads: the first tile is the widest. */
.fchip.partner-tile[data-partner="dbs"] { min-width: 14rem; }
.partner-name { font-weight: 800; font-size: .98rem; line-height: 1.2; overflow-wrap: anywhere; }
.partner-n { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }

/* ------------------------------------------------------- section bands */
.partner-section { display: grid; gap: .7rem; }
.partner-section + .partner-section { margin-top: 1.4rem; }
.partner-head {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1rem;
  border-radius: var(--r-lg);
  background: var(--p-wash);
  border: 2px solid var(--p-face);
  color: var(--ink);
}
.partner-head .partner-mark { min-width: 3.4rem; height: 3.4rem; font-size: 1.1rem; }
.partner-head__text { display: grid; gap: .1rem; min-width: 0; }
.partner-head h2, .partner-head .pp-name { margin: 0; font-size: 1.25rem; line-height: 1.2; font-weight: 900; }
.partner-soon {
  font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
html[dir="rtl"] .partner-soon { text-transform: none; letter-spacing: 0; }
.partner-tag { font-size: .92rem; color: var(--ink-soft); }
.partner-tag a { color: inherit; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; }

/* ------------------------------------------- partner preview (pitch only) */
/* An empty shelf waiting for a partner: dashed, in the partner's colour. */
.partner-empty {
  display: grid; gap: .5rem; justify-items: start;
  padding: 1.1rem 1.1rem 1.2rem;
  border: 3px dashed var(--p-face, var(--line-strong));
  border-radius: var(--r-lg);
  background: var(--surface);
}
.partner-section:has(.partner-head--gold)   .partner-empty { --p-face: var(--gold); }
.partner-section:has(.partner-head--sky)    .partner-empty { --p-face: var(--sky-face); }
.partner-section:has(.partner-head--green)  .partner-empty { --p-face: var(--green-face); }
.partner-section:has(.partner-head--purple) .partner-empty { --p-face: var(--purple); }
.partner-empty__title { margin: 0; font-weight: 900; font-size: 1.1rem; }
.partner-empty__text { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.partner-empty__go { margin-top: .3rem; }

.pp-bar {
  display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap;
  padding: .4rem 1rem;
  background: var(--gold); color: var(--on-gold);
  font-size: .88rem; font-weight: 700; text-align: center;
}
.pp-bar a { color: inherit; text-decoration: underline; font-weight: 900; }

.pp { display: grid; gap: .9rem; }
.pp-lead { margin: 0; line-height: 1.55; }
.pp-h { margin: .2rem 0 0; font-size: 1.05rem; }
.pp-routes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pp-route {
  display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; align-items: start;
  padding: .8rem; border-radius: var(--r-lg);
  background: var(--sunk); border: 2px solid var(--line);
}
.pp-ico {
  width: 2.6rem; height: 2.6rem; border-radius: .9rem;
  display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold);
}
.pp-ico svg { width: 1.4rem; height: 1.4rem; }
.pp-txt { display: grid; gap: .15rem; font-size: .92rem; color: var(--ink-soft); }
.pp-txt strong { color: var(--ink); font-size: 1rem; }
.pp-go { grid-column: 2; justify-self: start; }