/* Free-tool tiles (tools/includes/tool_cards.ftl): the /tools listing, "More free tools", the homepage
   teaser and the pSEO free_tools block. Its own file because three page families render the tiles and
   only the tool pages load tools.css — the homepage teaser rendered unstyled for exactly that reason.
   Load it AFTER main.purge.css: .tool-grid--wide>* has the same specificity as .lg\:child-cols-4>*. */

.tool-card { transition: transform .15s, box-shadow .15s; color: inherit; }
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(15,23,42,.08); text-decoration: none; }

/* A fixed circle. Not .vstack: the theme gives .vstack `flex: 1 1 auto`, which stretched the icon box
   across the whole tile (213px wide on a phone). overflow:hidden because the glyph is a ligature — until
   the icon font loads (or when it never does) the box would otherwise size itself to the word. */
.tool-card-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.tool-card-icon .material-symbols-rounded { font-size: 28px; line-height: 1; }

/* Pinned to the bottom, so the links of a row line up whatever the subtitle length. (The theme's
   .mt-auto was purged; the tiles relied on it and the links sat at three different heights.) */
.tool-card-link { margin-top: auto; }

/* The theme's sm: breakpoint is 459px; two tiles side by side need 576. */
@media (max-width: 575.98px) {
    .tool-grid > * { width: 100%; }
}

/* The listing's fourth column, and the room for it. The purged theme has no xxl utilities. The
   two-class selector is what beats xl:max-w-xl's !important. */
@media (min-width: 1600px) {
    .tool-grid--wide > * { flex: 0 0 auto; width: 25%; }
    .tool-listing-wrap.container { max-width: 1440px !important; }
}