/* The template's layout rendered as static pages: what React decided with a
   media query (useIsPhone, max-width 1099px) is decided here in CSS instead.
   Adapted from portfolio-template by BrewedOps (MIT) — see LICENSE. */

/* Home has a different composition on phones; both ship, one shows. */
@media (min-width: 1100px) {
  .only-phone,
  .tabbar,
  .theme-btn--float,
  .pfilter { display: none !important; }
}
@media (max-width: 1099px) {
  .only-desk { display: none !important; }
}

/* Testimonials: four clients don't fit a laptop-height viewport with their tag
   rows, and the list scrolled inside its card with no hint that it did. The
   tags repeat the role pill above them, so short desktop screens drop them. */
@media (min-width: 1100px) and (max-height: 1000px) {
  .tgrid__client-tags { display: none; }
}


/* Testimonials: every client's words in the left panel. Phones stack all four;
   desktop shows one at a time (js/testimonials.js), with arrows and dots. */
.tgrid__reel { gap: clamp(14px, 2vh, 22px); }
.tgrid__quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.8vh, 20px);
  margin: 0;
}
.tgrid__quote-stars {
  font-size: 17px;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--orange);
}
.tgrid__quote-text { margin: 0; }
.tgrid__quote-text p {
  margin: 0;
  font-size: clamp(16px, min(1.2vw, 2.25vh), 21px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: -.005em;
  color: var(--navy);
  text-wrap: pretty;
}
.tgrid__quote-by { display: flex; flex-direction: column; gap: 3px; }
.tgrid__quote-name {
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 700;
  color: var(--navy);
}
.tgrid__quote-role {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tgrid__quote-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tgrid__reel-nav { display: none; }

@media (max-width: 1099px) {
  .tgrid__quote + .tgrid__quote { padding-top: 22px; border-top: 1px solid var(--line); }
}

@media (min-width: 1100px) {
  .tgrid__reel { justify-content: flex-start; }
  .tgrid__quote { flex: 1 1 auto; min-height: 0; }
  .tgrid__quote[hidden] { display: none; }
  .tgrid__quote.is-entering { animation: tq-in .34s var(--ease-out) both; }
  .tgrid__reel-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
  }
}
@keyframes tq-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tgrid__quote.is-entering { animation: none; }
}
html[data-a11y-motion="true"] .tgrid__quote.is-entering { animation: none; }

.tgrid__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--navy);
  cursor: pointer;
  transition: color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.tgrid__arrow--next svg { transform: scaleX(-1); }
.tgrid__arrow:hover { color: var(--orange-ink); box-shadow: inset 0 0 0 1px var(--orange); }
.tgrid__arrow:focus-visible,
.tgrid__dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.tgrid__dots { display: flex; align-items: center; }
.tgrid__dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.tgrid__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width .25s var(--ease-out), background-color .25s var(--ease-out);
}
.tgrid__dot:hover::before { background: var(--muted); }
.tgrid__dot[aria-selected="true"]::before { width: 22px; background: var(--orange); }
@media (min-width: 1100px) {
  .tgrid__client[data-quote] { cursor: pointer; }
  .tgrid__client.is-quoted { background: color-mix(in srgb, var(--orange) 6%, transparent); }
}

/* Contact / Book a call: the enquiry form and the booking calendar share the
   right-hand side, one at a time, behind a switch (js/contact.js). The
   switch is the template's picker, as on Services. */
.cgrid__reach {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
}
.cgrid__reach > .cgrid__panel { flex: 1 1 auto; min-height: 0; }
.cgrid__reach > .cgrid__panel[hidden] { display: none; }
/* Two short options: side by side at every width (the template stacks its
   picker on phones). */
.cgrid__switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cgrid__switch-tab { justify-content: center; padding: 11px 14px; }
.cgrid__switch-tab svg { flex: none; }
.cgrid__switch-tab .tgrid__pick-kicker { font-size: 14px; }
.cgrid__switch-tab.is-active svg { color: var(--orange-ink); }
@media (max-width: 1099px) {
  /* The template lifts the form above the FAQs on phones (order: -1 on the
     panel); lift the whole switch-and-panels block instead, switch first. */
  .cgrid__reach { order: -1; }
  .cgrid__reach > .cgrid__panel { order: 0; }
  .cgrid__switch-tab { gap: 7px; padding: 11px 8px; }
  .cgrid__switch-tab .tgrid__pick-kicker { white-space: normal; text-overflow: clip; line-height: 1.25; }
}

/* Projects: Zapier and Templates sit at the end of the drum's row, so the
   grid stays two rows and one screen. */
@media (min-width: 1100px) {
  .bento--projects .bento__card[data-id="funnels"] { grid-column: span 2; }
}
/* Template links in the Templates window: the arrow rides on the label. */
.wpanel__shot--link { text-decoration: none; color: inherit; }
.wpanel__shot--link .wpanel__shot-label { display: inline-flex; align-items: center; gap: 6px; }
.wpanel__shot--link:hover .wpanel__shot-label { color: var(--orange-ink); }
/* Zapier window: a line under each Zap saying what it does. */
.wpanel__shot-desc { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; font-weight: 400; color: var(--muted); text-align: left; }
.wpanel__shot-tag { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* The Zap screenshots are small (960 wide); in the full-size viewer they
   scale to the window instead of sitting at their own size in a corner. */
.funnels__modal-img--fit { display: block; width: 100%; height: auto; }