/*
 | Site-wide phone and tablet fixes, loaded last by layouts/mainfrontend so
 | it wins over the page sheets. Nothing here applies above 991px, so the
 | desktop layout is untouched (the before/after clip below is the one
 | exception and draws nothing new).
 */

/* Before/after comparison sliders (twenty20): the handle's divider line is a
   9999px tall pseudo-element that relies on the container's overflow:hidden.
   Mobile Safari stops clipping it once a parent swiper slide is transformed,
   so the line ran down the page over the price cards. clip-path clips it in
   every browser and changes nothing else. */
.twentytwenty-container {
    clip-path: inset(0);
}

@media (max-width: 767.98px) {
    /* Live chat tab: on a phone it sat half way down the right edge, right
       on top of the swipeable price cards and their "next" arrow. It now sits
       in the bottom right corner, clear of the cards. The launcher keeps its
       translateY(-50%) (its shake animation uses it), hence the extra offset. */
    html body .tba-chat-launcher {
        top: auto;
        bottom: calc(var(--tbtk-chat-launcher-bottom, 18px) + env(safe-area-inset-bottom, 0px));
        margin-bottom: -23px;
    }
}

/* Printing pages: at tablet and desktop widths the chat tab sat half way down
   the right edge, right over the configurator's "Calculate Shipping" link. On
   any page with that link it now sits in the bottom right corner at every
   width, the same way it already does on phones (see above). */
html body:has(.bc-shipping-link) .tba-chat-launcher {
    top: auto;
    bottom: calc(var(--tbtk-chat-launcher-bottom, 18px) + env(safe-area-inset-bottom, 0px));
    margin-bottom: -23px;
}

/* Consultation page FAQ title: white on the light grey band in light mode,
   so it was invisible. Same near-black the other pages' FAQ titles use. */
html[data-tk-theme="light"] section.bgplaingrey.faq .main-title {
    color: #0A0D0F;
}

@media (max-width: 767.98px) {
    /* "See more" on review cards is a 13px tall text button; padding with a
       matching negative margin gives it a finger-sized touch area without
       moving anything. */
    html body .trustpilot-see-more {
        padding: 10px 12px 10px 0;
        margin: -10px -12px -10px 0;
    }

    /* Price swipe dots are 8px buttons; an invisible ring makes them easier
       to hit. */
    .tbtk-mps-dot {
        position: relative;
    }

    .tbtk-mps-dot::after {
        content: "";
        position: absolute;
        inset: -12px -4px;
    }

    /* "Verified Customer" badge on video reviews was 8.5px. */
    html body .testimonial-verified-badge {
        font-size: 10px;
    }
}

@media (max-width: 767.98px) {
    /* Long single words (Spanish "AUTOMATIZACIÓN", long emails, URLs) wrap
       instead of running off the edge of their card. */
    h1,
    h2,
    h3,
    h4,
    .main-title {
        overflow-wrap: break-word;
    }

    /* AI automation pages, consultation card: in Spanish the 34px title's
       longest word was wider than the card, which stretched the form column
       and cut the inputs and SUBMIT button off on the right. */
    .automation-consultation-form {
        min-width: 0;
    }

    .automation-consultation-form .main-title {
        font-size: clamp(24px, 7vw, 34px);
        line-height: 1.08;
    }
}

@media (max-width: 575.98px) {
    /* Web design page, "Built on infrastructure" pill: it was not allowed to
       shrink, so the longer Spanish label ran past the right edge. */
    html body #tk-webinfra .gd-headrow .gd-badge {
        flex: 0 1 auto;
        max-width: 100%;
        letter-spacing: .08em;
        line-height: 1.25;
    }

    /* Website service pages: the 32px all-caps title only just fit at 360px
       and spilled past the edge in Spanish ("PERFECTAMENTE"). */
    html body .service_desc > h1 {
        font-size: clamp(24px, 8vw, 32px) !important;
    }
}

@media (max-width: 575.98px) {
    /* Hero buttons on the digital marketing pages are nowrap; the longer
       Spanish labels ran past the button edge at 360px. */
    html body .tk-hero-cta {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    /* Long domain names in the AICES testimonial headings. */
    .test_head {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767.98px) {
    /* /bundle service picker: the list was capped at 270px and centred, so
       on a phone every card was a narrow column with names wrapping word by
       word. It now uses the full width. The /package swipe row is left alone. */
    html body .results-container.alert.alert-info.mt-3.row.row-logo-styles:not(.tbtk-mps-row) {
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }
}

/* /portfolio grid. Each tile carries an inline width of 20%, which beat the
   page's own 50% phone rule, so phones got five 70px columns. The caption
   overlay also lost its widget styles and sat under every image as a tall
   black block of text. Tiles now follow the page's breakpoints and the
   caption only appears on hover, over the image. */
#eapps-instagram-feed-1 .eapps-instagram-feed-posts-item {
    position: relative;
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-item-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-item-link:hover .eapps-instagram-feed-posts-item-overlay,
#eapps-instagram-feed-1 .eapps-instagram-feed-posts-item-link:focus-visible .eapps-instagram-feed-posts-item-overlay {
    opacity: 1;
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-item-text {
    font-size: 13px;
    line-height: 1.35;
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-item-text-clone {
    display: none;
}

@media (max-width: 1200px) {
    #eapps-instagram-feed-1 .eapps-instagram-feed-posts-item {
        width: 25% !important;
    }
}

@media (max-width: 991px) {
    #eapps-instagram-feed-1 .eapps-instagram-feed-posts-item {
        width: 33.3333% !important;
    }
}

@media (max-width: 767px) {
    #eapps-instagram-feed-1 .eapps-instagram-feed-posts-item {
        width: 50% !important;
    }
}

@media (hover: none) {
    #eapps-instagram-feed-1 .eapps-instagram-feed-posts-item-overlay {
        display: none;
    }
}

/* /portfolio on desktop: the fixed header covered the top of the title. */
@media (min-width: 768px) {
    .content-area:has(#eapps-instagram-feed-1) {
        padding-top: 40px;
    }
}

@media (max-width: 767.98px) {
    /* Price swipe rows: every card was stretched to the tallest one, which
       left a tall empty block under the shorter feature lists (about 500px
       on the logo design page). Each card now ends where its content does. */
    html body .tbtk-mps-row:not(#tbtk-mps-a):not(#tbtk-mps-b) {
        align-items: flex-start !important;
    }

    html body .tbtk-mps-row:not(#tbtk-mps-a):not(#tbtk-mps-b) > .tbtk-mps-slide > * {
        height: auto;
    }
}

/* Home page: the hero's bottom padding plus the packages section's top
   padding left a large empty band under the hero stats on desktop. */
@media (min-width: 992px) {
    html body section.bannersection.tk-hero {
        padding-bottom: 20px !important;
    }

    html body section#logodeal.logosection.minlogos {
        padding-top: 44px !important;
    }
}

/* ==========================================================================
   SECTION RHYTHM (all widths, Oct 2026 spacing audit)

   Measured on every public page at 1440px and 390px: the empty band between
   two sections ran 160-330px where a shared section stacked a large bottom
   padding on top of the next section's top padding. These cap the shared
   offenders so a section break reads as roughly 110-130px on desktop and
   70-90px on a phone. Page-specific sheets were tightened at the source
   (digital marketing, SEO, social media, printing configurator, automation).
   ========================================================================== */
html body .bgservicesection {
    padding-bottom: 64px;
}

html body section.customreviews.bgblack {
    padding-bottom: 24px;
}

html body .trustpilot-section {
    padding-bottom: 32px;
}

html body section.customreviews .trustpilot-section {
    padding-bottom: 16px;
}

@media (max-width: 767.98px) {
    html body .bgservicesection {
        padding-bottom: 44px;
    }

    html body .trustpilot-section {
        padding-bottom: 24px;
    }
}

/* ==========================================================================
   WEBSITE PAGE FAQ (light theme)
   In light mode each FAQ item is a white card, but the page's own sheet
   zeroes the button and answer padding, so questions and answers sat flush
   against the card's left edge. Same 24px / 16px inner edge the Mobile App
   page already uses. Dark mode has no card, so it is left as is.
   ========================================================================== */
html[data-tk-theme="light"] .tk-page-webdesign:not(.tk-page-mobileapp) .website-faq .accordion-button {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

html[data-tk-theme="light"] .tk-page-webdesign:not(.tk-page-mobileapp) .website-faq .accordion-body {
    padding: 0 24px 18px !important;
}

@media (max-width: 767.98px) {
    html[data-tk-theme="light"] .tk-page-webdesign:not(.tk-page-mobileapp) .website-faq .accordion-button {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html[data-tk-theme="light"] .tk-page-webdesign:not(.tk-page-mobileapp) .website-faq .accordion-body {
        padding: 0 16px 16px !important;
    }
}