/* ============================================================
   BORG SITES, Explore (/explore): the ten kinds of site as large tiles

   On the public site's system (tokens, base, components, home, pages, and
   studio.css for the gallery under the tiles). Each tile: art in a soft
   brand wash, with the kind's line icon and a small picture of each
   template that fits it in that template's own colors, then the name, one
   line, the fitting templates as links, and "Start with this".

   Measured contrast: the name ink #0B1031 on white 18.54; the line #48527A
   on white 7.60; the small label #606783 on white 5.58; a template link
   #0B1031 on white 18.54; white on the deep gradient button 4.55 at its
   lightest stop; the template name on its picture is white with a dark
   veil under it (rgba(10,14,39,.72)), at least 7.7:1 even over pure white.
   Non-text: the icon #7B3FE4 on white 5.72.
   ============================================================ */

.xtypes { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.6rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }

.xtype { display: flex; flex-direction: column; padding: 0; }
.xtype__art {
  position: relative; aspect-ratio: 16 / 8.5; overflow: hidden; border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(46, 125, 246, .16), transparent 62%),
    radial-gradient(70% 120% at 100% 100%, rgba(224, 53, 158, .14), transparent 60%),
    var(--ink-2);
}
.xtype__icon {
  position: absolute; left: 1.1rem; top: 1.1rem; z-index: 3; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 15px; background: var(--ink-1); border: 1px solid var(--hairline);
  color: var(--brand-2); box-shadow: var(--shadow-sm);
}
.xtype__icon svg { width: 26px; height: 26px; }

/* the fitting templates, as little browser windows in their own colors */
.xtype__shots { position: absolute; right: -4%; bottom: -16%; width: 70%; height: 92%; }
.xtype__shot {
  position: absolute; right: 0; bottom: 0; width: 82%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .7);
  background:
    radial-gradient(120% 120% at 18% 12%, var(--thumb-m1, #5B8DEF) 0%, transparent 60%),
    radial-gradient(120% 120% at 88% 92%, var(--thumb-m2, #8B5CF6) 0%, transparent 55%),
    var(--thumb-bg, #0C1230);
  box-shadow: 0 22px 44px -20px rgba(20, 26, 60, .55);
  transition: transform .5s var(--ease-out);
}
.xtype__shots.is-pair .xtype__shot:first-child { right: 26%; bottom: 26%; width: 70%; opacity: .92; }
.xtype__shots.is-pair .xtype__shot:last-child { z-index: 2; }
.xtype:hover .xtype__shot:last-child { transform: translateY(-6px); }
.xtype:hover .xtype__shots.is-pair .xtype__shot:first-child { transform: translate(-6px, -3px); }
.xtype__shot-bar { display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 8px; background: rgba(255, 255, 255, .88); }
.xtype__shot-bar i { width: 5px; height: 5px; border-radius: 50%; background: #C9CFE3; }
.xtype__shot-name {
  position: absolute; left: 10px; bottom: 9px; padding: .2rem .55rem; border-radius: 999px;
  background: rgba(10, 14, 39, .72); color: #FFFFFF; font: 700 .72rem/1.3 var(--font-display); letter-spacing: .02em;
}

.xtype__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.3rem 1.4rem 1.45rem; }
.card .xtype__name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 0; }
.card .xtype__desc { margin-top: .4rem; color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.55; flex: 1 1 auto; }
.xtype__fit-label { margin-top: 1.05rem; font: 700 .7rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.xtype__tpls { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.1rem; margin-top: .55rem; }
.xtpl {
  display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .8rem .32rem .35rem; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--ink-1); color: var(--text);
  font: 600 .84rem/1.2 var(--font-display); transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.xtpl:hover { border-color: rgba(123, 63, 228, .45); box-shadow: var(--shadow-sm); }
.xtpl__dot {
  width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1px solid rgba(11, 16, 49, .12);
  background:
    radial-gradient(120% 120% at 18% 12%, var(--thumb-m1, #5B8DEF) 0%, transparent 60%),
    radial-gradient(120% 120% at 88% 92%, var(--thumb-m2, #8B5CF6) 0%, transparent 55%),
    var(--thumb-bg, #0C1230);
}
.xtype__go { align-self: flex-start; margin-top: 1.15rem; }

@media (prefers-reduced-motion: reduce) {
  .xtype__shot, .xtype:hover .xtype__shot, .xtype:hover .xtype__shots.is-pair .xtype__shot:first-child { transition: none; transform: none; }
}