/* ============================================================================
   tools-worth-trying.css - "Tools Worth Trying" section on tool pages
   ============================================================================
   Loaded by:  Tool pages that render the recommended-tools section via
               partials/tools-worth-trying.php. Currently: text-cleaner/
               remove-duplicate-lines.php (planned to expand site-wide).
   Purpose:    The "Tools Worth Trying" cards grid (.twt-grid, .twt-card) with
               MeFancy-style hover effects (border glow, lift shadow, scaling
               decorative circle, title tint, "View Tool" CTA fade-in).
   Load order: Loaded AFTER tool-input.css via $extraCss on the tool page.
               Reuses the site's green accent (#198754) already used by
               .tool-icon and the bg-success banner.
   Opt-in:     Pages that set $twtFourColors = true in the partial get four
               card icons cycling through a four-color brand palette (green
               #34a853, red #ea4335, blue #4285f4, yellow #fbbc05) via the
               .twt-four-colors class on the .twt-grid.
   ============================================================================ */

/* ---------------- Cards grid (4 per row) ---------------- */
/* Aligns left/right exactly like the FAQ content: the grid uses the shared
   .text-content wrapper (margin: 10px auto; width: 96%) from templatemo.css. */
.twt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ---------------- Card ---------------- */
.twt-card {
    display: block;
    position: relative;
    text-decoration: none;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.twt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12);
    border-color: #198754;
}

/* ---------------- Decorative circle (scales on hover) ---------------- */
.twt-circle {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(25, 135, 84, 0.08);
    pointer-events: none;
    transition: transform .5s ease;
}

.twt-card:hover .twt-circle {
    transform: scale(1.5);
}

/* ---------------- Tool icon (reuses the .tool-icon look) ---------------- */
.twt-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #198754;
    color: #fff;
    font-size: 20px;
    margin-bottom: 14px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* ---------------- Four-color brand palette icons (opt-in) ----------------
   When the tool page sets $twtFourColors = true, the .twt-grid gets the
   .twt-four-colors class and the four card icons cycle through a four-color
   brand palette (green, red, blue, yellow). White #ffffff stays as the glyph
   color; cards after the fourth (e.g. none today) would repeat from green. */
.twt-four-colors .twt-card:nth-child(1) .twt-icon { background: #34a853; }
.twt-four-colors .twt-card:nth-child(2) .twt-icon { background: #ea4335; }
.twt-four-colors .twt-card:nth-child(3) .twt-icon { background: #4285f4; }
.twt-four-colors .twt-card:nth-child(4) .twt-icon { background: #fbbc05; }

/* ---------------- Card title ---------------- */
.twt-title {
    position: relative;
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: #1f2d3d;
    transition: color .3s ease;
}

.twt-card:hover .twt-title {
    color: #198754;
}

/* ---------------- Card description ---------------- */
.twt-desc {
    position: relative;
    margin: 0;
    color: #667085;
    font-size: 14.5px;
    line-height: 1.55;
}

/* ---------------- "View Tool" CTA (fades in on hover) ---------------- */
.twt-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #198754;
    opacity: 0;
    transition: opacity .3s ease;
}

.twt-card:hover .twt-cta {
    opacity: 1;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991px) {
    .twt-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .twt-grid { grid-template-columns: 1fr; }
}