/*
 * Home's activities (v17, ActivityShelf.kt): every activity, the most used first. Two by two on a
 * phone, three on a tablet, as many as fit on a desktop.
 */

/* An activity's tile: its gradient, two soft bubbles and a glossy top edge. */
.act-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  height: 216px;
  padding: 8px 12px 12px 14px;
  border-radius: 24px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.28);
  container-type: inline-size;
}
.act-gloss::before, .act-gloss::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.act-gloss::before { width: 124%; aspect-ratio: 1; right: -62%; top: -62%; background: rgba(255, 255, 255, 0.12); }
.act-gloss::after { width: 60%; aspect-ratio: 1; left: -30%; bottom: -30%; background: rgba(255, 255, 255, 0.07); }

.act-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 20px; }
/* The icon, big, lifted off the tile by a soft shadow in its own shape. */
/* As big as the tile allows while clearing the stars (cqw is the tile inside its padding; Picture() sizes images inline, hence !important). */
.act-icon { flex: 0 0 auto; margin-left: -6px; width: min(104px, calc(100cqw - 45px)) !important; height: min(104px, calc(100cqw - 45px)) !important; filter: drop-shadow(0 6px 7px rgba(30, 27, 75, 0.32)); }
.act-stars { position: absolute; top: 14px; right: 12px; }
.act-title { margin-top: 2px; font-size: 17px; line-height: 21px; }
.skill-pill {
  align-self: flex-start;
  max-width: 100%;
  margin-top: 8px;
  padding: 3px 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 16px;
}
.skill-pill .t-caption { font-size: 12px; line-height: 16px; }

@media (hover: hover) {
  .act-tile { transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1), filter 0.15s; }
  .act-tile:hover { transform: translateY(-3px); }
}

/* A tablet: three across. */
@media (min-width: 680px) and (max-width: 899.98px) {
  .act-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .act-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 0; }
  .act-tile { height: 232px; padding: 8px 14px 14px 16px; }
  .act-icon { width: min(116px, calc(100cqw - 45px)) !important; height: min(116px, calc(100cqw - 45px)) !important; }
  .act-title { font-size: 18px; line-height: 22px; }
}

/* A big screen: Home grows past the usual page width, so the activities get more room. */
@media (min-width: 1500px) {
  .page.home-page { max-width: 1560px; }
}