/* Homepage "Mental health tools": the base homepage's App Store row
   (themes/orcounselors/partials/home/_apps.tpl.php, $recent_products: two
   admin-curated products) in Alder's materials: three cards across from
   921, one sideways snap row on phones; the "All tools" link sits in the
   section header row (.al-head--more, css/alder-compact.css) like the
   articles section's. Loaded from the section in homepage.tpl.php. */
.al-tools__row { display: grid; gap: 16px; }
.al-tools__row > li { display: flex; min-width: 0; }
.al-tool {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0;
  border: 1px solid var(--al-line); border-radius: var(--al-r); background: #fff;
  overflow: hidden; transition: border-color .18s;
}
@media (hover: hover) { .al-tool:hover { border-color: rgba(14, 42, 27, .36); } }
.al-tool__pic { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--al-sand); }
.al-tool__pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top center; } /* app screenshots keep their top (Eric, 10-14) */
/* No aspect-ratio (Safari 14.0): a padding strut holds the ratio under the
   absolutely positioned picture (see css/alder.css .al-phone). */
@supports not (aspect-ratio: 1) {
  .al-tool__pic::before { content: ""; display: block; padding-top: 62.5%; }
}
/* Flat-background screenshots sit whole inside the square on their own colour (homepage.tpl.php $alToolFit sets the class and the colour). */
.al-tool__pic--contain img { object-fit: contain; object-position: center; padding: 6%; }
.al-tool__mono { position: absolute; inset: 0; display: grid; place-items: center; color: var(--al-moss); font: 600 48px/1 var(--al-serif); background: var(--al-sand-2); }
.al-tool__body { display: grid; gap: 6px; align-content: start; flex: 1 1 auto; padding: 16px 18px 18px; }
.al-tool__kick { font: 600 11px/1.3 var(--al-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--al-moss); }
.al-tool__h { font: 600 19px/1.25 var(--al-serif); letter-spacing: -.005em; color: var(--al-ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.al-tool__h a { color: inherit; transition: color .18s; }
.al-tool__h a::after { content: ""; position: absolute; inset: 0; border-radius: var(--al-r); }
.al-tool__h a:focus-visible { outline: none; }
.al-tool__h a:focus-visible::after { outline: 2px solid var(--al-ink); outline-offset: 3px; }
@media (hover: hover) { .al-tool:hover .al-tool__h a { color: var(--al-moss); } }
.al-tool__co { font: 500 13px/1.4 var(--al-sans); color: var(--al-muted); }
.al-tool__ex { font: 400 14.5px/1.5 var(--al-sans); color: var(--al-body); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.al-tool__price { align-self: end; margin-top: 8px; font: 600 13.5px/1.3 var(--al-sans); color: var(--al-ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
@media (min-width: 921px) {
  .al-tools__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .al-tool__body { padding: 20px 22px 22px; }
}
/* Phone: the homepage card row (alder-compact.css tokens, the same row
   as the articles): one sideways snap row of 66vw cards with 24px gaps,
   bleeding to the screen edge from the gutter so the next card shows
   past the edge (Eric, 10-14: nothing cut off, a deliberate peek that
   says it scrolls). Each card is the cover as a square with 16px corners
   (cover from the top, or contained on its own background: see the base
   rule above), the name on up to two lines, then
   a 13px meta line: the category, and the price on its own line below,
   wrapping to two lines at most (a long price used to ellipsize).
   Company and tagline stay in the HTML for 921+. */
@media (max-width: 920px) {
  .al-tools__row {
    grid-auto-flow: column; grid-auto-columns: 66vw; gap: 24px;
    margin-inline: calc(-1 * var(--al-gutter)); padding: 4px var(--al-gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--al-gutter);
    touch-action: pan-x pan-y;
  }
  .al-tools__row::-webkit-scrollbar { display: none; }
  .al-tools__row > li { scroll-snap-align: start; }
  .al-tool { border: 0; border-radius: 0; background: none; overflow: visible; }
  .al-tool__pic { aspect-ratio: 1; border-radius: var(--al-r); overflow: hidden; }
  @supports not (aspect-ratio: 1) { .al-tool__pic::before { padding-top: 100%; } }
  .al-tool__mono { font-size: 48px; }
  .al-tool__body { display: flex; flex-wrap: wrap; align-content: start; column-gap: 6px; row-gap: 12px; padding: 16px 0 0; }
  .al-tool__h { flex: 0 0 100%; font-size: 17px; line-height: 1.3; letter-spacing: 0; }
  .al-tool__h a::after { border-radius: var(--al-r); }
  .al-tool__kick, .al-tool__price { order: 1; margin: 0; font: 500 13px/20px var(--al-sans); letter-spacing: 0; text-transform: none; color: var(--al-muted); white-space: nowrap; }
  .al-tool__kick { flex: 0 0 auto; }
  .al-tool__price { flex: 0 0 100%; min-width: 0; white-space: normal; }
  .al-tool__kick ~ .al-tool__price { margin-top: -10px; }
  .al-tool__co, .al-tool__ex { display: none; }
}