/* web/themes/techprosolutions/css/components/et-mobile-polish.css */
/**
 * ET Mobile Polish — user-directed mobile-only specs (2026-07-09 loop 3).
 * EVERYTHING in this file lives inside max-width:767px — desktop untouched.
 *
 * Audit findings the specs were checked against (headless, 360px + 390px):
 *   - Dark sheet already floats on mobile (16px margins / 24px radius /
 *     48px internal pad — et-depth.css) — no change needed here.
 *   - Section content never touches viewport edges (wrappers pad inside:
 *     hero ~20px, FAQ ~40px, articles 16px) — no change needed here.
 *   - REAL deltas fixed below: 16px card stack gaps → 24px; FAQ decorative
 *     hand still visible; footer fine print bottomed out at 12px.
 *
 * Doubled subject classes (0-3-0) so aggregate order can't flip winners.
 */

@media (max-width: 767px) {
  /* 3. Stacked-card rhythm: strict 24px between vertically stacked cards.
        (Bento grid already declares 24px at base — re-asserted here as the
        guaranteed mobile contract.) */
  .latest-articles .retool-grid-wrapper {
    gap: 24px;
  }

  .bento-features-wrapper .bento-features__grid {
    gap: 24px;
  }

  /* 4a. Decorative illustrations are desktop garnish — drop them on phones.
         (The FAQ hand was already capped to 176px; the owner's call is to
         remove it entirely on mobile.) */
  .faq-sidebar .faq-sidebar__media {
    display: none;
  }

  /* 4b. Readability floor: no footer text below 14px on mobile, and the
         loose 1.5 leading the small-type law wants. */
  .main-footer .item-list--linkicon .linkicon--svg .linkicon__fallback-text.linkicon__fallback-text {
    font-size: 0.875rem;  /* 14px */
    line-height: 1.5;
  }

  .footer-trust-badges .badge-subtitle.badge-subtitle {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  /* new.css pins EVERY <p> in the footerinfo block (copyright + the SEO
     prose) to 12px via a 1-4-1 selector — the real "microscopic footer
     text". The extra .block class here makes this 1-5-1, so it wins without
     !important, and covers all of those paragraphs at once. */
  .main-footer .footer-top .main-menu-wrapper .right-bottom-menus #block-techprosolutions-footerinfo.block p {
    font-size: 0.875rem;  /* 14px */
    line-height: 1.5;
  }

  /* Hero CTA pills: "Register for GST" was wrapping to two lines inside the
     pill. A short imperative CTA never wraps; tighter inline padding keeps
     it inside the card at 360px. */
  .hero-cta-card .hero-cta-card__btn {
    white-space: nowrap;
    padding-inline: 1rem;   /* 16px (was 24px) */
  }

  /* Persona floating cards read as accents on a phone, not panels — the
     previous mobile rule sized them UP (220px / scale .8); owner's call
     (2026-07-09) is the opposite: super small. */
  .persona-slider {
    --persona-card-scale: 0.6;
  }

  .persona-slider .floating-card {
    width: 144px;
    padding: 0.5rem;        /* 8px */
  }

  .persona-slider .floating-card--notification {
    width: 160px;
  }

  /* Articles sheet interior: __inner is 92vw — wider than the inset sheet,
     so the heading hugged the rounded corner. 24px breathing room inside. */
  .latest-articles .latest-articles__inner {
    width: calc(100% - 3rem);
  }

  /* ---- Compact card heights (owner: "every section's components are too
     tall on mobile"). Media areas shrink; text is untouched. ---- */

  /* Article cards: fixed 220px image band → 160px; tighter text padding.
     Card drops ~100px each (×3). */
  .latest-articles .retool-card--hero .retool-card__image-block,
  .latest-articles .retool-card--side .retool-card__image-block {
    height: 160px;
    flex: 0 0 160px;
  }

  .latest-articles .retool-card--hero .retool-card__text-block,
  .latest-articles .retool-card--side .retool-card__text-block {
    padding: 1.25rem;   /* 20px (was 24px) */
  }

  /* Expert-match bento card: EXEMPT from the compact-heights pass by owner
     decision (2026-07-09) — the card-shuffle Lottie renders at its natural
     designed size on mobile, tall card accepted. Do not cap its media slot
     or crop its composition. */

  /* GIF cards: 340px floors → 280px (cover media scales with the box). */
  .bento-features-wrapper .animated-feature-card--data-fetch,
  .bento-features-wrapper .animated-feature-card--cursor-click {
    min-height: 280px;
  }

  /* Bar-chart card: smaller media band + tighter internal gap. */
  .bento-features-wrapper .animated-feature-card--bar-chart {
    gap: 1.25rem;
  }

  .bento-features-wrapper .animated-feature-card--bar-chart .bento-media-layer-inline {
    min-height: 160px;
  }
}