/* ------------------------------------------------------------------
   listing.css - cards that list things in the pink / lavender design:
   projects, articles and business software as tiles, the tag pills, the
   pager and the row of links to other systems.

   A page asks for it with fr_modern_look( 'name', array( 'components',
   'listing' ) ). It loads after components.css and before the page's own sheet.
   ------------------------------------------------------------------ */

/* --- tag pills ------------------------------------------------------ */
.modern .tags{display:flex;flex-wrap:wrap;gap:7px}
.modern .tag{padding:5px 10px;border:0;border-radius:99px;background:#f2ecfa;color:#5a4a92;font-size:10.5px;font-weight:800;line-height:1.35;letter-spacing:.02em}

/* --- tiles ---------------------------------------------------------- */
.tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tile{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #e8e0ec;border-radius:21px;background:#fff;box-shadow:0 14px 40px rgba(59,28,73,.06)}
.modern .tile.reveal{transition:opacity .75s ease,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .3s}
.modern .tile.reveal.visible:hover{transform:translateY(-8px);border-color:#c9b6dc;box-shadow:0 26px 60px #4a28551c}
.tile-img{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#efe8f5}
.tile-img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile-img img{transform:scale(1.03)}
.tile-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.tile-kicker{color:#7a5bb0;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.tile h2,.tile h3{margin:7px 0 0;color:#1b1626;font-size:21px;font-weight:750;line-height:1.24;letter-spacing:-.04em}
.tile-text{margin:10px 0 0;color:#625b6b;font-size:13px;line-height:1.7}
.tile .tags{margin-top:16px}
.tile-foot{margin-top:auto;padding-top:20px}
/* The quiet underlined link, the same as on the service cards. */
.tile-more{display:inline-flex;gap:8px;padding-bottom:5px;border-bottom:1px solid #6e798a;color:#17192a;font-size:13px;font-weight:800;transition:color .25s,border-color .25s}
.tile-more:hover,a.tile:hover .tile-more{color:#7a3c6e;border-color:#7a3c6e}

/* A tile that is one link, with artwork instead of a screenshot. A system
   without artwork gets a lavender block with its first letter. */
a.tile{color:inherit}
.tile-art{background-color:#2a2038;background-image:var(--art);background-size:cover;background-position:center;background-repeat:no-repeat}
.tile-art:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,14,32,.3),transparent 55%)}
.tile-art{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
a.tile:hover .tile-art{transform:scale(1.03)}
.tile-letter{display:grid;place-items:center;background:linear-gradient(145deg,#2a1f3d,#3e2455)}
.tile-letter span{display:grid;place-items:center;width:74px;height:74px;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:rgba(255,255,255,.1);color:#fff;font-size:34px;font-weight:800}

/* --- the pager ------------------------------------------------------ */
.pager{margin-top:44px}
.pager-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pager .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 15px;border:1px solid #e1d8e9;border-radius:99px;background:#fff;color:#3a3045;font-size:13px;font-weight:750;transition:border-color .2s,color .2s}
.pager a.page-numbers:hover{border-color:#b9a4d1;color:#7a3c6e}
.pager .page-numbers.current{border-color:transparent;background:var(--grad-deep);color:#fff}
.pager .page-numbers.dots{border-color:transparent;background:none}

/* --- the other systems, as a row of links ---------------------------- */
.other-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.other-apps a{display:block;padding:19px 20px;border:1px solid #e8e0ec;border-radius:17px;background:#fff;color:#261f31;font-size:14px;font-weight:780;line-height:1.35;transition:border-color .25s,transform .25s,box-shadow .25s}
.other-apps a:hover{border-color:#c9b6dc;transform:translateY(-4px);box-shadow:0 16px 38px #4a285518}
.other-apps span{display:block;margin-top:6px;color:#6a6270;font-size:12px;font-weight:500;line-height:1.55}

/* --- smaller screens ------------------------------------------------ */
@media(max-width:1080px){
  .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .tile-grid{grid-template-columns:1fr;gap:17px}
  .tile-body{padding:20px 20px 22px}
}