/* ==========================================================================
   TRENDING — the one shared section (partials/trending-section.blade.php)

   The surrounding pieces (.what-we-do-box, .what-we-do-item,
   .what-do-item-image, .icon-box) are already styled globally by the layout,
   so this file only adds what the shared partial needs:

     - the media tile treatment that previously lived in index.blade.php as
       .home-business-card-showcase / .home-business-card-label, which made it
       homepage-only. Renamed and moved here so every page gets it.
     - the inline card icon for the business-cards column.
     - equal column rhythm now that two of the three columns carry an image
       AND a card.

   Scoped to .tk-trending so nothing else on any page is affected.
   ========================================================================== */

/* ---- Hold the shared presentation against legacy per-page CSS -----------
   The section keeps the `newarr` class so it inherits the band styling it has
   always had, but several pages still ship their own `.newarr …` overrides.
   /printing/3d-acrylic-signs, for instance, restyles `.newarr h2` into an
   absolutely positioned pill with a grey fill — measured there before this
   rule. Re-asserting the heading here keeps the section identical everywhere.
   `.tk-trending .main-title` (0,2,0) outranks `.newarr h2` (0,1,1). */
.tk-trending .main-title {
    position: static;
    bottom: auto;
    left: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    font-weight: 900;
    text-align: center;
}

.tk-trending .tk-trending-grid {
    align-items: stretch;
}

/* Each column is a full-height stack so the three line up whichever order the
   card and image appear in. */
.tk-trending .what-we-do-box {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}

.tk-trending .what-we-do-item {
    margin: 0;
}

/* ---- Media tiles --------------------------------------------------------
   Every column's media grows into whatever space its card leaves, so all three
   stacks finish level instead of the shorter one leaving a gap under it. */
.tk-trending .tk-trending-media {
    position: relative;
    flex: 1 1 auto;
    min-height: 220px;
    overflow: hidden;
    border-radius: 18px;
}

/* ---- Before/after comparison -------------------------------------------
   twentytwenty measures the "before" image and writes the container height and
   both clip rects from it. Pinning the whole chain to the tile's height gives
   it one deterministic number to measure, so it fills the tile exactly like
   the plain images in the other two columns. The resize nudge in the partial
   makes it recompute once the tile has its final size. */
/* The comparison keeps the images' own aspect — cropping it to fill the tile
   cut the logo off at both sides. It therefore does NOT grow; the card above
   it does (see the modifier below), which is what keeps this column level with
   the other two. */
.tk-trending .tk-trending-compare {
    flex: 0 0 auto;
    min-height: 0;
}

.tk-trending .tk-trending-compare > a,
.tk-trending .tk-trending-compare .twenty20,
.tk-trending .tk-trending-compare .twentytwenty-wrapper {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
}

.tk-trending .tk-trending-compare .twentytwenty-before,
.tk-trending .tk-trending-compare .twentytwenty-after {
    width: 100% !important;
    height: auto !important;
    object-fit: fill;
}

/* Column 1: the card absorbs the leftover height. */
.tk-trending .tk-trending-col--compare .what-we-do-item {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
}

/* the comparison is the one tile that must not zoom on hover — the handle
   tracks the pointer and a scaling image would drift under it */
.tk-trending .tk-trending-compare > a:hover img {
    transform: none;
}

.tk-trending .tk-trending-media > a {
    position: relative;
    display: block;
    height: 100%;
}

.tk-trending .tk-trending-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tk-trending .tk-trending-media-label {
    position: absolute;
    right: auto;
    bottom: 14px;
    left: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    font-family: var(--font-primary), "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* ---- Links -------------------------------------------------------------- */
/* The before/after comparison is hover-driven (twenty20 is initialised with
   move_slider_on_hover), so a click is free to navigate. */
.tk-trending .tk-trending-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.tk-trending .tk-trending-media > a img {
    transition: transform 0.35s ease;
}

.tk-trending .tk-trending-media > a:hover img {
    transform: scale(1.03);
}

/* ---- Drawn icon for the business-cards column --------------------------- */
/* The other two columns use existing PNG icons; this one is inline SVG so no
   new asset is introduced and it takes the brand colour directly. */
.tk-trending .tk-trending-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    color: var(--primary-color, #0073FC);
}

.tk-trending .tk-trending-icon svg {
    width: 44px;
    height: 44px;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 991px) {
    .tk-trending .what-we-do-box {
        gap: 14px;
        height: auto;
    }

    .tk-trending .tk-trending-media {
        flex: 0 0 auto;
    }

    .tk-trending .tk-trending-media img {
        height: auto;
    }
}

/* ==========================================================================
   LIGHT THEME
   ==========================================================================
   The band's ground, headings and cards are painted by the light block in
   tbtk-process-trending-redesign.css. Only this caption needs a value of its
   own: it is white type on a 28%-white pill, which reads over the dark page
   but washes out once the band is light, because the product photo behind it
   is pale too. A dark pill keeps the same white type legible on both. */
html[data-tk-theme="light"] .tk-trending .tk-trending-media-label {
    background: rgba(8, 10, 12, 0.72);
}