/* Timmacy Growth Labs: phone fixes (2026-10-16, owner: "do it mobile friendly")
   Loaded last on every page, partner-profile.html included. Desktop is untouched: everything here sits
   inside phone-width media queries or (pointer: coarse).
   1. Long card stacks become swipe rows on phones: one card fills most of the screen, the next one peeks in.
      Our own stores (projects.html, the profile's "Featured work") stay stacked on purpose.
   2. No text under 12px.  3. Tap targets at least ~40px. */

/* ---- 1. swipe rows */
@media (max-width: 767.98px) {
  :is(#what-we-do, #partner-services, #packages, #blog, #notes) .row.gy-4,
  .tgl-work-band .tgl-adm-grid,
  #admired .tgl-adm-grid {
    display: flex !important; flex-wrap: nowrap; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-inline: 12px;
    margin: 0 -12px !important; padding: 6px 12px 18px; scrollbar-width: none;
  }
  #admired .tgl-adm-grid { margin: 0 -16px !important; padding-inline: 16px; scroll-padding-inline: 16px; }
  :is(#what-we-do, #partner-services, #packages, #blog, #notes) .row.gy-4::-webkit-scrollbar,
  .tgl-work-band .tgl-adm-grid::-webkit-scrollbar,
  #admired .tgl-adm-grid::-webkit-scrollbar { display: none; }
  :is(#what-we-do, #partner-services, #packages, #blog, #notes) .row.gy-4 > [class*="col-"] {
    flex: 0 0 84%; max-width: 84%; padding: 0; margin-top: 0; scroll-snap-align: start;
  }
  .tgl-work-band .tgl-adm-grid > *, #admired .tgl-adm-grid > * { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
  /* plans: the featured badge sits above the card, so leave room for it */
  #packages .row.gy-4 { padding-top: 20px; }

  .tgl-swipe-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--tgl-muted, #5F5F5F); }
  .tgl-swipe-hint i { color: var(--tgl-klein-deep, #0B837F); font-size: 1.1rem; animation: tgl-swipe-nudge 1.6s ease-in-out infinite; }
  @keyframes tgl-swipe-nudge { 50% { transform: translateX(6px); } }
}
@media (min-width: 768px) { .tgl-swipe-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .tgl-swipe-hint i { animation: none; } }

/* ---- 2. readable text on phones: nothing under 12px */
@media (max-width: 767.98px) {
  .tgl-ls__badge { font-size: 0.75rem; }
  .tgl-ls__facts dt, .show-meta dt { font-size: 0.75rem; }
  .tgl-ls__tags span, .tgl-ls--card .tgl-ls__tags span { font-size: 0.8rem; }
  .tgl-ls__url { font-size: 12px; }
  .tgl-why__num { font-size: 0.78rem; }
  .tgl-inbox__when { font-size: 0.75rem; }
  .tgl-plan__from, .tgl-plan__per { font-size: 0.8rem; }
  main small, section small, footer small { font-size: max(12px, 0.875em); }
  .tgl-label, .tgl-tag { font-size: 0.75rem; }
}

/* ---- 3. tap targets on touch screens */
@media (pointer: coarse) {
  .tgl-ls__toggle { width: 38px; height: 38px; }
  .tgl-ls__toggle svg { width: 14px; height: 14px; }
  .mobile-menu .close-button { width: 44px !important; height: 44px !important; }
}

/* the profile's one-column layout must not grow to fit a swipe row (that caused sideways scroll) */
@media (max-width: 900px) { .layout > main, .layout > aside { min-width: 0; } }

/* the last few labels under 12px on phones: hero card tiles and rows, plan badges, blog sidebar, About badges */
@media (max-width: 767.98px) {
  small { font-size: max(12px, 0.875em) !important; }
  .tgl-tile span, .tgl-loop em, .tgl-card__list li span:last-child, .tgl-plan__badge, .tgl-side-list__cat, .tgl-hero-check__hint, .tgl-live { font-size: 0.75rem !important; }
}

/* section headings that sit straight in a band (not inside .container) still need side padding on phones */
@media (max-width: 767.98px) { section > .section-heading { padding-inline: 16px; } }