/* 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; } }


/* =====================================================================
   Second phone pass, 2026-10-22 (owner: "make it very looking good on mobile, most of my clients use mobile").
   tgl-mobile3.css = tgl-mobile.css + everything below; a new name because /assets/* is cached for 7 days (Cloudflare's edge too:
   tgl-mobile2.css was edited after its first publish and the edge kept serving the old copy, so any change needs a new name).
   ===================================================================== */

/* ---- 4. two more swipe rows on phones: "How we work" and "Why Timmacy" were long stacks of cards */
@media (max-width: 767.98px) {
  :is(#process, #why) .row.gy-4 {
    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;
  }
  :is(#process, #why) .row.gy-4::-webkit-scrollbar { display: none; }
  :is(#process, #why) .row.gy-4 > [class*="col-"] { flex: 0 0 84%; max-width: 84%; padding: 0; margin-top: 0; scroll-snap-align: start; }
}

/* ---- 5. hero on phones: full-width buttons, the two small cards side by side, store rows on one line */
@media (max-width: 575.98px) {
  :is(.banner-one, .tgl-page-hero) .tw-mt-12.d-flex.flex-wrap { gap: 12px !important; margin-top: 30px !important; }
  :is(.banner-one, .tgl-page-hero) .tw-mt-12.d-flex.flex-wrap > .btn { flex: 1 1 100%; justify-content: center; }
  .tgl-hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .tgl-hero-cards > .tgl-pos-main { grid-column: 1 / -1; }
  .tgl-hero-cards > .tgl-pos-tr, .tgl-hero-cards > .tgl-pos-bl { display: block; margin: 0; }
  .tgl-hero-cards .tgl-card--chip { min-width: 0; height: 100%; padding: 12px 14px; }
  .tgl-hero-cards .tgl-card--chip strong { font-size: 0.95rem; line-height: 1.3; }
  .tgl-card__rows li { padding: 9px 12px; font-size: 0.84rem; }
  .tgl-card__rows li b { white-space: nowrap; }
}

/* ---- 6. services picker: the two floating chips covered the panel's text on phones; give them their own room */
@media (max-width: 575.98px) {
  .tgl-st__stage { min-height: 0; padding: 30px 0 34px; }
  .tgl-st__chip--a { top: 0; left: 2px; }
  .tgl-st__chip--b { bottom: 0; right: 2px; }
}

/* ---- 7. proof videos: a darker fade under the caption so the figures read over busy screenshots; video labels at 12px */
@media (max-width: 767.98px) {
  .tgl-vcard__dur, .tgl-vcard__sound em { font-size: 12px; }
  .tgl-vids--proof .tgl-vcard::after { background: linear-gradient(180deg, rgba(13, 13, 16, 0) 26%, rgba(13, 13, 16, 0.82) 68%, rgba(13, 13, 16, 0.95) 100%); }
}

/* ---- 8. home contact panel: the email address and the Telegram name broke mid-word on phones */
@media (max-width: 575.98px) {
  .get-in-touch div.bg-main-600.tw-p-10 { padding: 28px 22px !important; }
  .get-in-touch div.bg-main-600 .animation-item { gap: 14px !important; }
  .get-in-touch div.bg-main-600 .animation-item > span.rounded-circle { width: 48px !important; height: 48px !important; font-size: 1.45rem !important; }
  .get-in-touch div.bg-main-600 .animation-item > span.rounded-circle img { max-width: 24px; height: auto; }
  .get-in-touch div.bg-main-600 a[href^="mailto:"] { font-size: 0.95rem !important; letter-spacing: -0.015em; word-break: normal; overflow-wrap: anywhere; }
  .get-in-touch div.bg-main-600 a[href*="t.me"] { font-size: 0.95rem; word-break: normal; overflow-wrap: anywhere; }
}

/* ---- 9. "Where we work" logo band: less empty space under the logos on phones */
@media (max-width: 767.98px) {
  .tgl-partners { padding-block: 40px 44px; }
  .tgl-partners .tgl-label { margin-bottom: 18px !important; }
}

/* ---- 10. motion on phones and tablets (classes added by assets/js/tgl-motion.js; nothing here moves the page itself) */
.tgl-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #0B837F, #33CBBF); }
@media (min-width: 992px) { .tgl-progress { display: none; } }

@media (max-width: 767.98px) {
  /* swipe rows: the card in view is full size, the ones peeking in are a little smaller and softer */
  html .tgl-swipe.is-live > * { transition: scale 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease, transform 0.45s ease; }
  html .tgl-swipe.is-live > *:not(.is-near) { scale: 0.93; opacity: 0.55; }
  /* the first time a row comes into view it slides a little to show that it moves */
  .tgl-swipe.tgl-nudge > * { animation: tgl-row-nudge 1.1s cubic-bezier(0.3, 0.7, 0.3, 1) 1; }
  @keyframes tgl-row-nudge { 0%, 100% { translate: 0 0; } 45% { translate: -40px 0; } }

  /* floating buttons wait for the first scroll, so they don't cover the hero's buttons */
  #tgl-dock, #tgl-ppf { transition: opacity 0.35s ease, translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  html.tgl-dock-wait #tgl-dock, html.tgl-dock-wait #tgl-ppf { opacity: 0; translate: 0 28px; pointer-events: none; }
}

@media (max-width: 991.98px) {
  /* photos settle from a slight zoom as they come into view */
  .tgl-settle { scale: 1.12; transition: scale 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .tgl-settle.is-seen { scale: 1; }
}

/* a pressed card or tab gives a little under the finger */
@media (hover: none) {
  .tgl-st__tab, .tgl-vcard, .tgl-post, .tgl-adm-card { -webkit-tap-highlight-color: transparent; transition: scale 0.15s ease; }
  .tgl-st__tab:active, .tgl-vcard:active, .tgl-post:active, .tgl-adm-card:active { scale: 0.97; }
}

@media (prefers-reduced-motion: reduce) {
  html .tgl-swipe.is-live > *:not(.is-near) { scale: 1; opacity: 1; }
  .tgl-swipe.tgl-nudge > * { animation: none; }
  .tgl-settle { scale: 1; transition: none; }
  .tgl-progress { display: none; }
}

/* ---- 11. first screen without waiting for scripts (all widths): the hero's text, buttons and store-check box
   used to stay invisible until every script had downloaded (they waited for the AOS library), which on a slow
   phone meant several seconds of a half-empty hero. They now rise in with plain CSS from the first paint. */
@keyframes tgl-hero-in { from { opacity: 0.01; transform: translateY(16px); } /* 0.01, not 0: Chrome only counts text as shown once it has been painted visible */ to { opacity: 1; transform: none; } }
:is(.banner-one, .tgl-page-hero) [data-aos]:not([class*="animation-"]):not(.left-right-animation) { animation: tgl-hero-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
:is(.banner-one, .tgl-page-hero) [data-aos][data-aos-delay="50"] { animation-delay: 0.04s; }
:is(.banner-one, .tgl-page-hero) [data-aos][data-aos-delay="100"] { animation-delay: 0.08s; }
:is(.banner-one, .tgl-page-hero) [data-aos][data-aos-delay="150"] { animation-delay: 0.1s; }
:is(.banner-one, .tgl-page-hero) [data-aos][data-aos-delay="200"] { animation-delay: 0.14s; }
:is(.banner-one, .tgl-page-hero) [data-aos][data-aos-delay="300"] { animation-delay: 0.2s; }
:is(.banner-one, .tgl-page-hero) [data-aos][data-aos-delay="400"] { animation-delay: 0.26s; }
:is(.banner-one, .tgl-page-hero) [data-aos][data-aos-delay="500"] { animation-delay: 0.32s; }
:is(.banner-one, .tgl-page-hero) [data-aos][data-aos-delay="550"] { animation-delay: 0.36s; }
:is(.banner-one, .tgl-page-hero) [data-aos][data-aos-delay="600"] { animation-delay: 0.4s; }
:is(.banner-one, .tgl-page-hero) [data-aos][data-aos-delay="650"] { animation-delay: 0.44s; }
@media (prefers-reduced-motion: reduce) { :is(.banner-one, .tgl-page-hero) [data-aos] { animation: none; opacity: 1; transform: none; } }