/* Design 3, package 3 (3.11.2026): the old card patterns still left on service pages and the blog.
   Loaded only with ?tomaso_pkg=3 until Tomer approves the cards. Copy stays word for word, only the form changes:
   - service hub cards (emoji in a rounded square, three equal boxes) -> numbered hairline rows like the home list
   - restaurant feature boxes (emoji in a box) -> two-column hairline rows, no emoji
   - blog cards -> a list with hierarchy: real photo, title, excerpt; generated icon placeholders are dropped
   - client logo strips in boxes -> the home page wall of names (template swap, styles below) */

/* ------------------------------------------------------------ service hub cards -> rows */
html body.v3-pkg3 .ts-hub-grid { display: block !important; counter-reset: v3hub; border-top: 1px solid var(--v3-line); gap: 0 !important; grid-template-columns: none !important; }
html body.v3-pkg3 .ts-hub-card {
  counter-increment: v3hub; position: relative; display: grid !important; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.1fr) auto !important; grid-template-rows: auto !important;
  gap: 40px !important; align-items: center; padding: 30px 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--v3-line) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  color: #fff; text-decoration: none; text-align: right;
}
html body.v3-pkg3 .ts-hub-card::before { content: counter(v3hub, decimal-leading-zero); font: 400 22px/1 'Bebas Neue', var(--v3-display); letter-spacing: .04em; color: var(--v3-faint, rgba(255, 255, 255, .45)); transition: color .3s; }
html body.v3-pkg3 .ts-hub-card-glow, html body.v3-pkg3 .ts-hub-card-icon { display: none !important; }
html body.v3-pkg3 .ts-hub-card-title { grid-row: auto !important; margin: 0 !important; font: 700 clamp(36px, 3.6vw, 58px)/1 var(--v3-display) !important; color: #fff !important; text-align: right !important; transition: color .3s, transform .5s var(--v3-ease, ease); }
html body.v3-pkg3 .ts-hub-card-desc { margin: 0 !important; max-width: 52ch; font-size: 17px !important; line-height: 1.7 !important; color: var(--v3-mute) !important; text-align: right !important; }
html body.v3-pkg3 .ts-hub-card-link { margin: 0 !important; justify-self: end; white-space: nowrap; font-size: 15px !important; font-weight: 700; color: var(--v3-faint, rgba(255, 255, 255, .45)) !important; transition: color .3s; }
html body.v3-pkg3 .ts-hub-card:is(:hover, :focus-visible) { background: none !important; }
html body.v3-pkg3 .ts-hub-card:is(:hover, :focus-visible)::before,
html body.v3-pkg3 .ts-hub-card:is(:hover, :focus-visible) .ts-hub-card-title { color: var(--v3-cyan) !important; }
html body.v3-pkg3 .ts-hub-card:is(:hover, :focus-visible) .ts-hub-card-title { transform: translateX(-10px); }
html body.v3-pkg3 .ts-hub-card:is(:hover, :focus-visible) .ts-hub-card-link { color: #fff !important; }

/* ------------------------------------------------------------ restaurant feature boxes -> rows */
html body.v3-pkg3 .tr-features-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: clamp(32px, 4vw, 72px) !important; row-gap: 0 !important; gap: 0 clamp(32px, 4vw, 72px) !important; }
html body.v3-pkg3 .tr-feature {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: baseline;
  padding: 26px 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-top: 1px solid var(--v3-line) !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important; text-align: right !important;
}
html body.v3-pkg3 .tr-feature-icon { display: none !important; }
html body.v3-pkg3 .tr-feature h3 { margin: 0 !important; font: 700 clamp(28px, 2.4vw, 38px)/1.05 var(--v3-display) !important; color: #fff !important; text-align: right !important; }
html body.v3-pkg3 .tr-feature p { margin: 0 !important; font-size: 16.5px !important; line-height: 1.7 !important; color: var(--v3-mute) !important; text-align: right !important; }
html body.v3-pkg3 .tr-feature:hover { background: none !important; transform: none !important; }
/* the process steps in the ads page keep their real step number as the row lead */
html body.v3-pkg3 .tr-feature > div:first-child:not(.tr-feature-icon) { grid-column: 1 / -1; margin: 0 0 4px !important; font-size: 28px !important; opacity: .55 !important; line-height: 1 !important; }

/* ------------------------------------------------------------ blog cards -> list with hierarchy */
html body.v3-pkg3 .tb-grid { display: block !important; border-top: 1px solid var(--v3-line); }
html body.v3-pkg3 .tb-card { background: none !important; border: 0 !important; border-bottom: 1px solid var(--v3-line) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; overflow: visible; }
html body.v3-pkg3 .tb-card-link { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; padding: 30px 0; }
html body.v3-pkg3 .tb-card-media { order: 2; aspect-ratio: 16 / 10; border-radius: 4px; }
html body.v3-pkg3 .tb-card-media:has(.tb-media-fallback) { display: none; }
html body.v3-pkg3 .tb-card-link:has(.tb-media-fallback) { grid-template-columns: minmax(0, 1fr); }
html body.v3-pkg3 .tb-card-body { order: 1; padding: 0 !important; gap: 12px; }
html body.v3-pkg3 .tb-card-title { font: 700 clamp(32px, 3vw, 48px)/1.02 var(--v3-display) !important; color: #fff !important; transition: color .3s; }
html body.v3-pkg3 .tb-card-excerpt { max-width: 62ch; color: var(--v3-mute) !important; opacity: 1 !important; }
html body.v3-pkg3 .tb-card-more { color: var(--v3-faint, rgba(255, 255, 255, .45)) !important; transition: color .3s; }
html body.v3-pkg3 .tb-card:hover .tb-card-title { color: var(--v3-cyan) !important; }
html body.v3-pkg3 .tb-card:hover .tb-card-more { color: #fff !important; }
html body.v3-pkg3 .tb-card--featured .tb-card-link { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) !important; flex-direction: initial !important; gap: 56px; padding: 0 0 44px; }
html body.v3-pkg3 .tb-card--featured .tb-card-media { min-height: 0 !important; aspect-ratio: 16 / 10; flex: none !important; }
html body.v3-pkg3 .tb-card--featured .tb-card-body { padding: 0 !important; justify-content: center; }
html body.v3-pkg3 .tb-card--featured .tb-card-title { font-size: clamp(46px, 5vw, 80px) !important; line-height: .95 !important; }

/* ------------------------------------------------------------ client wall (same as the home page) */
html body.v3-pkg3 .v3-pkg3-wall { padding: 0 0 8px; }
.v3-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v3-wall { display: grid; gap: clamp(6px, 1vw, 14px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.v3-wall-row { overflow: hidden; }
.v3-wall-track { display: flex; width: max-content; animation: v3-wall 120s linear infinite; }
.v3-wall-row--1 .v3-wall-track { animation-direction: reverse; animation-duration: 140s; }
.v3-wall-row--2 .v3-wall-track { animation-duration: 110s; }
.v3-wall:hover .v3-wall-track { animation-play-state: paused; }
@keyframes v3-wall { to { transform: translateX(-50%); } }
.v3-wall-item { display: inline-flex; align-items: center; gap: .32em; padding-inline: .5em; font-family: var(--v3-display); font-weight: 700; font-size: clamp(46px, 5.6vw, 86px); line-height: 1.12; color: #fff; white-space: nowrap; }
.v3-wall-item::after { content: ""; width: .12em; height: .12em; margin-inline-start: .5em; border-radius: 50%; background: var(--v3-cyan); opacity: .8; }
.v3-wall-item.is-outline b { color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, .62); }
.v3-wall-item b { font-weight: 700; transition: color .25s, -webkit-text-stroke-color .25s; }
.v3-wall-item:hover b { color: var(--v3-cyan); -webkit-text-stroke-color: var(--v3-cyan); }
.v3-logo { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--bg, #fff); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.v3-logo img { display: block; width: var(--lw); height: var(--lh); max-width: none; object-fit: contain; object-position: center; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; filter: none; opacity: 1; }
.v3-logo--wall { width: .74em; height: .74em; }
.v3-logo.is-soft img { -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); }

/* ------------------------------------------------------------ phone */
@media (max-width: 820px) {
  html body.v3-pkg3 .ts-hub-card { grid-template-columns: 34px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 14px !important; row-gap: 6px !important; align-items: start; padding: 20px 0 !important; }
  html body.v3-pkg3 .ts-hub-card::before { grid-row: 1 / span 2; padding-top: 4px; font-size: 18px; }
  html body.v3-pkg3 .ts-hub-card-title { grid-column: 2; font: 700 19px/1.3 var(--v3-body, 'Assistant'), sans-serif !important; }
  html body.v3-pkg3 .ts-hub-card-desc { grid-column: 2; font-size: 15px !important; line-height: 1.55 !important; }
  html body.v3-pkg3 .ts-hub-card-link { display: none !important; }
  html body.v3-pkg3 .ts-hub-card:is(:hover, :focus-visible) .ts-hub-card-title { transform: none; }

  html body.v3-pkg3 .tr-features-grid { grid-template-columns: 1fr !important; }
  html body.v3-pkg3 .tr-feature { grid-template-columns: 1fr; gap: 6px; padding: 18px 0 !important; }
  html body.v3-pkg3 .tr-feature h3 { font: 700 19px/1.3 var(--v3-body, 'Assistant'), sans-serif !important; }
  html body.v3-pkg3 .tr-feature p { font-size: 15.5px !important; line-height: 1.6 !important; }

  html body.v3-pkg3 .tb-card-link { grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; align-items: start; padding: 20px 0; }
  html body.v3-pkg3 .tb-card-media { aspect-ratio: 1; }
  html body.v3-pkg3 .tb-card-title { font: 700 18.5px/1.35 var(--v3-body, 'Assistant'), sans-serif !important; }
  html body.v3-pkg3 .tb-card-excerpt { font-size: 15px !important; line-height: 1.55 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  html body.v3-pkg3 .tb-card-more { display: none; }
  html body.v3-pkg3 .tb-card--featured .tb-card-link { grid-template-columns: 1fr !important; gap: 18px; padding: 0 0 28px; }
  html body.v3-pkg3 .tb-card--featured .tb-card-media { order: 0; aspect-ratio: 16 / 10; }
  html body.v3-pkg3 .tb-card--featured .tb-card-title { font: 700 clamp(38px, 10vw, 48px)/1 var(--v3-display) !important; }

  .v3-wall { gap: 4px; }
  .v3-wall-item { font-size: 40px; }
  .v3-wall-item.is-outline b { -webkit-text-stroke-width: 1px; }
  .v3-wall-track { animation-duration: 90s; }
  .v3-wall-row--1 .v3-wall-track { animation-duration: 105s; }
  .v3-wall-row--2 .v3-wall-track { animation-duration: 80s; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-wall-track { animation: none; }
  .v3-wall-row { overflow-x: auto; }
}

/* Client wall sections: the header lines up with the page container, the wall stays full bleed. */
html body.v3-pkg3 section:has(> .v3-pkg3-wall) > .tr-section-header { width: min(1280px, calc(100% - 64px)); max-width: none; margin-inline: auto !important; padding: 0 !important; }
@media (max-width: 820px) {
	html body.v3-pkg3 section:has(> .v3-pkg3-wall) > .tr-section-header { width: calc(100% - 40px); }
}