/*
 * FitClub Marketing — Mobile Polish Layer
 *
 * Loads AFTER fitclub-c188d8.webflow.css.  Adds targeted overrides
 * for gaps the Webflow export leaves incomplete on phones.
 * Desktop layout (≥992px) is never touched.
 *
 * Breakpoints mirror Webflow's grid:
 *   ≤ 991px  tablet
 *   ≤ 767px  large phone / small tablet
 *   ≤ 479px  phone
 *   ≤ 390px  small phone (iPhone SE, mini, Galaxy A-series)
 */

/* ── 0. Global: prevent horizontal scroll ─────────────────── */

html,
body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; /* prevent iOS auto font-scaling */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── 1. Tablet (≤ 991px) ───────────────────────────────────── */

@media screen and (max-width: 991px) {
  /* Service-top grid: collapse to single column sooner so the main
     card and the "realtime" card don't fight for space at mid-width. */
  .service-top-content {
    grid-template-columns: 1fr;
  }
}

/* ── 2. Large phone / small tablet (≤ 767px) ──────────────── */

@media screen and (max-width: 767px) {
  /* Consistent horizontal gutter on every container size */
  .main-container.w-container,
  .main-container.less-width.w-container,
  .main-container.width-min.w-container {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 100%;
  }

  /* Hero headline: clamp prevents over-wide display text on mid-range phones */
  .hero-section .display-header {
    font-size: clamp(1.9rem, 9vw, 2.8rem);
    line-height: 1.12;
  }

  /* Section headers on content pages */
  .section-header {
    font-size: clamp(1.4rem, 6.5vw, 1.85rem);
    line-height: 1.18;
  }

  /* Width-capped summery blocks: always let them fill the column */
  .summery-block,
  [class*="summery-block"] {
    max-width: 100% !important;
  }

  /* Service section: explicit 1-column stack */
  .service-top-content,
  .service-bottom-content {
    grid-template-columns: 1fr;
  }

  /* Footer top: centre the headline + sub-copy on phones */
  .footer-top-content {
    text-align: center;
    align-items: center;
  }

  .footer-top-content .header-block,
  .footer-top-content .summery-block {
    max-width: 100% !important;
    text-align: center;
  }

  /* Footer CTA button: stretch to column width */
  .footer-top-content .button-block {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Footer main row: stack brand logo below links */
  .footer-main-content {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .footer-brand-block {
    display: flex;
    justify-content: center;
  }

  /* Footer bottom row: stack copyright + legal links */
  .footer-bottom-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .footer-links-content.bottom {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* About page stats card: auto height so content never clips */
  .stats-card-block {
    height: auto;
    min-height: 260px;
  }

  /* FAQ: wrap copy; drop fixed min-height + top-align row (no tall empty band) */
  .faq-text {
    white-space: normal;
    flex: 1;
    padding-right: 12px;
    line-height: 1.35;
  }

  .faq-toggle,
  .faq-toggle.w--open {
    min-height: 0 !important;
    align-items: flex-start !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .faq-arrow-block {
    align-self: flex-start;
    flex-shrink: 0;
    margin-top: 3px;
  }

  /* Service highlight cards: left-align titles + body (was centred via .center) */
  .service-card-block.padding-less .service-card-content.center,
  .service-card-block.animted .service-card-content.center {
    align-items: flex-start !important;
    text-align: left;
  }

  .service-card-block.padding-less .service-text-content,
  .service-card-block.animted .service-text-content {
    width: 100%;
    max-width: 100%;
    text-align: left !important;
    align-items: flex-start;
  }

  .service-card-block.padding-less .service-text-content .header-block,
  .service-card-block.animted .service-text-content .header-block,
  .service-card-block.padding-less .service-text-content .summery-block,
  .service-card-block.animted .service-text-content .summery-block {
    text-align: left;
    max-width: 100% !important;
  }

  /* Webflow caps copy width here — let it use full card width on phones */
  .service-summery-block {
    max-width: 100% !important;
  }

  /* "Recursos que aceleram resultado": layout is driven by inline styles in
     index.html (sidebar + phone + copy). These rules only widen the copy column. */
  .feature-section .main-container.width-min.w-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .feature-section .feature-details-content {
    width: 100%;
    max-width: 100%;
  }

  .feature-section .feature-header-block {
    width: 100%;
    max-width: none !important;
  }

  .feature-section .feature-summery-block {
    width: 100%;
    max-width: none !important;
  }

  /* Testimonials: remove vertical space-between stretch; left-align quote stack */
  .testimonial-slide {
    text-align: left !important;
  }

  .testimonial-slide-content {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 10px;
  }

  .testimonial-quote-block {
    width: 52px !important;
    align-self: flex-start;
    order: 0;
  }

  .testimonial-text-block {
    max-width: 100% !important;
    text-align: left;
    order: 1;
    padding-top: 16px !important;
    padding-bottom: 20px !important;
  }

  .testimonial-text-block .text-large.weight-normal {
    font-size: 18px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    text-align: left;
  }

  .testimonial-text-block .text-large.weight-normal.testimonial {
    font-size: 18px !important;
  }

  .testimonial-client-info-block {
    margin-top: 0;
    margin-bottom: 0 !important;
    order: 2;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
  }

  .testimonial-client-image {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .client-info-text-block {
    align-items: flex-start;
    text-align: left;
  }

  /* Slider mask defaults to a fixed height — lets slides shrink to content */
  .testimonial-section .testimonial-slider.w-slider {
    height: auto !important;
    min-height: 0;
    background-color: transparent !important;
  }

  .testimonial-section .testimonial-mask.w-slider-mask {
    height: auto !important;
  }

  .testimonial-section .testimonial-slide.w-slide {
    height: auto !important;
    min-height: 0 !important;
  }

  /* OLD pricing tabs only — v3 badge layout for mobile is in §2b below */
  .pricing-section.old-pricing-section .pricing-v3-badge {
    position: relative !important;
    margin-left: 8px;
    transform: none !important;
  }

  .pricing-section.old-pricing-section .pricing-v3-badge::after {
    display: block !important;
    content: "\2199";
    position: absolute;
    left: -17px;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    color: #33d29a;
    font-size: 14px;
    line-height: 1;
  }
}

/* ── 2b. Pricing v3 — ≤768px (index + pricing): badge wraps full row;
        arrow sits to the right of “Economize 25%”, horizontally flipped;
        +10px padding above the badge row. ──────────────────────────── */

@media screen and (max-width: 768px) {
  .main-pricing-section .pricing-v3-toggle-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px 14px !important;
    row-gap: 14px !important;
    width: 100%;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }

  .main-pricing-section .pricing-v3-badge {
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
    padding-top: 10px;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    order: 5;
    display: inline-flex !important;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: normal;
  }

  /* Pseudo-element is first in DOM order; row-reverse places it on the right. */
  .main-pricing-section .pricing-v3-badge::before {
    display: inline-block !important;
    position: static !important;
    content: "\2199";
    color: #33d29a;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
    transform: scaleX(-1) scaleY(-1) rotate(-8deg);
    /* Space below the decorative arrow only (not extra padding on “Economize 25%” copy). */
    margin-bottom: 15px;
    box-sizing: content-box;
  }

  .main-pricing-section .pricing-v3-badge::after {
    display: none !important;
    content: none !important;
  }
}

/* ── 3. Phone (≤ 479px) ────────────────────────────────────── */

@media screen and (max-width: 479px) {
  /* Tightest safe side padding: prevents edge content from bleeding */
  .main-container.w-container,
  .main-container.less-width.w-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Feature strip: a touch narrower gutter than the global container
     so the headline + body under the mockup match perceived width
     of neighbouring sections. */
  .feature-section .main-container.width-min.w-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Navbar spacer: match the compact mobile navbar height */
  .navbar-spacer {
    height: 72px;
  }

  /* Hero section: tighter top padding on small screens */
  .hero-section {
    padding-top: 28px;
  }

  /* Hero CTA buttons: stack vertically, each full container width.
     On desktop / tablet they sit side-by-side in a flex row — here
     we collapse the row so neither button feels cramped. */
  .button-block.top-52px.flex-24px {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 22px;
    width: 100%;
  }

  .button-block.top-52px.flex-24px .primary-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Section header block: centre-align text and children on phones */
  .section-header-block.flex-verticle-center {
    align-items: center;
    text-align: center;
  }

  .section-header-block.flex-verticle-center .header-block,
  .section-header-block.flex-verticle-center .summery-block {
    text-align: center;
    max-width: 100% !important;
  }

  /* Changelog: the Webflow export hard-codes width:300px on
     .changelog-main-content at 479px which causes content to spill
     on 360–375px devices.  Allow full column width instead. */
  .changelog-main-content {
    width: 100% !important;
    max-width: 100%;
  }

  /* Changelog text: left-align for legibility (full-width block) */
  .changlog-release-text,
  .changelog-main-content {
    text-align: left;
  }

  /* Pricing card body: tighter horizontal padding on narrow screens */
  .pricing-v3-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Pricing tier title: extra padding below */
  .pricing-v3-tier {
    margin-bottom: 20px;
  }

  /* Pricing metadata row: centre the toggle + tax note */
  .pricing-v3-meta {
    align-items: center;
  }

  .pricing-v3-tax {
    text-align: center;
  }

  /* Pricing trusted logos: reduce gap on narrow screens */
  .pricing-v3-trusted-logos {
    gap: 16px;
  }

  /* Testimonial text: never overflow its card */
  .testimonial-text-block {
    max-width: 100%;
  }

  /* FAQ: slightly smaller font so questions don't truncate */
  .faq-text {
    font-size: 18px !important;
  }

  .faq-toggle {
    gap: 12px;
  }

  .faq-item-block {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Blog list card: compact padding on phone */
  .blog-card-block {
    padding: 14px;
  }

  /* Contact form block: reduce horizontal padding */
  .contact-form-block {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Universal word-break: prevent any text from causing
     horizontal overflow (long URLs, emails, untranslated strings) */
  h1, h2, h3, h4, h5, h6,
  .display-header,
  .section-header,
  .body-text-default,
  .body-text-small,
  .card-header {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ── 4. Small phone (≤ 390px — iPhone SE, Galaxy A-series) ── */

@media screen and (max-width: 390px) {
  /* Extra-aggressive headline scaling on the smallest viewports */
  .display-header {
    font-size: clamp(1.65rem, 10.5vw, 2rem) !important;
    line-height: 1.1 !important;
  }

  .section-header {
    font-size: clamp(1.2rem, 7.5vw, 1.55rem) !important;
    line-height: 1.18 !important;
  }

  /* Minimal side padding: give breathing room without cutting content */
  .main-container.w-container,
  .main-container.less-width.w-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .feature-section .main-container.width-min.w-container {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Pricing card: tightest layout */
  .pricing-v3-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Service images: scale height to match narrower card */
  .service-image-block {
    height: 180px !important;
  }

  /* Feature asset phone mockup: Recursos section only (avoid hitting other pages). */
  .feature-section .feature-asset-block {
    width: 240px;
  }
}

/* ── 5. Desktop-only polish ─────────────────────────────────── */

@media screen and (min-width: 992px) {
  /* Pricing v3 grid: expand cards to fill row */
  .pricing-v3-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
  }

  .pricing-v3-card {
    width: 100%;
  }

  /* Vertically align Básico price with other cards' prices.
     All `.pricing-v3-was` boxes use the same min-height so the price-row
     below them lands at the same y-position regardless of whether the
     strikethrough text is present. We pin the height in pixels — using
     em made `is-empty` taller than rendered text in non-empty boxes. */
  .pricing-v3-card .pricing-v3-was {
    min-height: 40px !important;
    height: 40px !important;
    box-sizing: border-box;
  }
  .pricing-v3-card .pricing-v3-was.is-empty {
    opacity: 0;
  }
}

/* ── 6. Touch-device affordances ──────────────────────────── */
/*
 * Apply only on pointer:coarse (touch) devices — hover:none guards
 * against desktop with a touchscreen where we still want hover
 * states.  The rules ensure tap targets are at least 44×44px per
 * Apple HIG / WCAG 2.5.5.
 */

@media (hover: none) and (pointer: coarse) {
  /* Ensure interactive elements are comfortably tappable */
  .primary-button,
  .secondary-button,
  .pricing-v3-cta {
    min-height: 44px;
  }

  /* FAQ: arrow chip stays the tap target; avoid forcing a tall toggle row */
  .faq-arrow-block {
    min-width: 44px;
    min-height: 44px;
  }

  .navbar-link-block {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .footer-link-block {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Remove hover transforms on touch: avoids sticky elevated state
     after a tap, which can make cards look "selected" on iOS. */
  .primary-button:hover,
  .secondary-button:hover,
  .pricing-v3-cta:hover,
  .feature-card:hover,
  .service-card-block:hover {
    transform: none !important;
  }
}