/* Homepage trade-show rows.
   Three SEPARATE sections with three different jobs, so they must not read as one card wall:

     ROW 1  Our Work at Trade Shows  - our Projects at a show. A typographic index: name +
                                       project count. No photography, so it never looks like
                                       an event listing.
     ROW 2  Upcoming Trade Shows     - the show itself, from Trade Show Guides. Editorial
                                       cards led by a date and a picture.
     ROW 3  Trade Show Cities        - a US city guide. Tall portrait cards led by the city.

   Palette and type come entirely from the accepted homepage tokens; no new colour is
   introduced and the existing sections are untouched. */

.ts-row { padding: var(--section-y, 110px) 0; border-bottom: 1px solid var(--border-subtle); }
.ts-row[hidden] { display: none; }
.ts-row .container { position: relative; }

.ts-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.ts-row-head .ts-row-titles { max-width: 62ch; }
.ts-row-head h2 { margin: 14px 0 0; }
.ts-row-head p { color: var(--text-secondary); font-size: var(--text-lead, 1.1rem); margin: 14px 0 0; text-wrap: pretty; }
.ts-row-nav { display: flex; gap: 8px; flex: none; }
.ts-row-nav button {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-primary); border: 1px solid var(--border-subtle);
  cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.ts-row-nav button:hover:not(:disabled), .ts-row-nav button:focus-visible { border-color: var(--accent); color: var(--accent); }
.ts-row-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ts-row-nav button:disabled { opacity: .35; cursor: default; }

/* One scroller mechanic shared by the three rows; only the card inside it differs. */
.ts-scroller {
  display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; padding-bottom: 6px;
  overscroll-behavior-x: contain;
  /* The native horizontal bar stays VISIBLE, on the owner's decision of 2026-09-16, which
     supersedes the earlier suppression that stood here (a none-valued scrollbar-width plus a
     display:none webkit pseudo-element). It is not a defect: it is the one
     affordance that tells a visitor the row scrolls and lets them drag straight to any position,
     including at phone widths and on the <=560px breakpoint where the arrows step aside. It is
     left at the browser default deliberately - restoring what TEST already showed, not
     introducing a new custom bar. */
}
.ts-scroller:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.ts-scroller > * { scroll-snap-align: start; flex: none; }
.ts-empty { color: var(--text-secondary); padding: 28px 0; }

/* ---- ROW 1: Our Work at Trade Shows -------------------------------------------------- */
/* Was deliberately text-only, on the reasoning that the number was the point. Changed on the
   owner's instruction 2026-09-13: the card leads with a real photograph of our work at that
   show, taken from the Cases themselves, and the count stays underneath it. For a booth
   builder the picture is the evidence; the number qualifies it. The image is the same 16/9
   crop as the Guide row so the three rows still read as one family. */
.ts-case-card {
  width: 260px; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-subtle); background: var(--bg-card);
  color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.ts-case-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-elevated); overflow: hidden; }
.ts-case-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-case-body { display: flex; flex-direction: column; justify-content: space-between; flex: 1; padding: 18px 20px 20px; }
.ts-case-card:hover, .ts-case-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.ts-case-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ts-case-name { font-size: var(--text-h4, 1.2rem); font-weight: var(--weight-semibold, 600); line-height: 1.3; overflow-wrap: anywhere; }
/* Show / city / year under the case title. This replaced the big-number tally rule that existed
   when a card was a Trade Show showing how many projects sat under it; a card is now one Case, so
   a tally has no meaning. (The old rule's name is not written here: a guard asserts it is gone
   from this file, and naming it in a comment would keep the guard red forever.)
   Two lines maximum so a long show name cannot change the card's height and break the row. */
.ts-case-meta { margin-top: 8px; color: var(--text-secondary); font-size: var(--text-xs, .85rem); line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-case-go { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--text-xs, .85rem); }
.ts-case-card:hover .ts-case-go, .ts-case-card:focus-visible .ts-case-go { color: var(--accent); }

/* ---- ROW 2: Upcoming Trade Shows ----------------------------------------------------- */
/* Picture-led and dated, so it reads as an event, not as our portfolio. */
.ts-guide-card {
  width: 330px; display: flex; flex-direction: column; border: 1px solid var(--border-subtle);
  background: var(--bg-card); color: inherit; text-decoration: none; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.ts-guide-card:hover, .ts-guide-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.ts-guide-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ts-guide-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-elevated); overflow: hidden; }
.ts-guide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-guide-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--accent-tint, rgba(255,107,74,.04));
  font-size: 2.4rem; font-weight: var(--weight-semibold, 600); letter-spacing: var(--tracking-wide, .5px);
}
.ts-guide-date {
  position: absolute; left: 0; bottom: 0; padding: 7px 12px; background: var(--charcoal-900, #06080A);
  color: var(--text-primary); font-size: var(--text-xs, .85rem); letter-spacing: var(--tracking-wide, .5px);
  border-top: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle);
}
.ts-guide-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ts-guide-name { font-size: var(--text-h4, 1.2rem); font-weight: var(--weight-semibold, 600); line-height: 1.3; overflow-wrap: anywhere; }
.ts-guide-meta { color: var(--text-secondary); font-size: var(--text-sm, .9rem); line-height: 1.6; overflow-wrap: anywhere; }
.ts-guide-chip {
  align-self: flex-start; padding: 4px 10px; border: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-size: var(--text-caps, .7rem);
  letter-spacing: var(--tracking-wider, 1px); text-transform: uppercase;
}
.ts-guide-go { margin-top: auto; padding-top: 14px; color: var(--text-secondary); font-size: var(--text-xs, .85rem); }
.ts-guide-card:hover .ts-guide-go, .ts-guide-card:focus-visible .ts-guide-go { color: var(--accent); }

/* ---- ROW 3: Trade Show Cities -------------------------------------------------------- */
/* Tall portrait format, city name over the image: a place, not an event and not a project. */
.ts-city-card {
  /* 232px showed ~5 cards at 1440 and ~1.6 on a phone. 320 lands inside the intended
     3-4 / 2-3 / 1.1-1.3 bands without changing the card's proportions or styling. */
  width: 320px; position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid var(--border-subtle); background: var(--bg-card); color: inherit;
  text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.ts-city-card:hover, .ts-city-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.ts-city-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ts-city-media { position: absolute; inset: 0; background: var(--bg-elevated); }
.ts-city-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-city-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,10,.15) 0%, rgba(6,8,10,.55) 52%, rgba(6,8,10,.92) 100%); }
.ts-city-body { position: absolute; inset: auto 0 0 0; padding: 18px; display: flex; flex-direction: column; gap: 5px; }
.ts-city-name { font-size: var(--text-h4, 1.2rem); font-weight: var(--weight-semibold, 600); line-height: 1.25; overflow-wrap: anywhere; }
.ts-city-state { color: var(--text-secondary); font-size: var(--text-xs, .85rem); letter-spacing: var(--tracking-wide, .5px); text-transform: uppercase; }
.ts-city-intro { color: var(--text-secondary); font-size: var(--text-xs, .85rem); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-city-go { margin-top: 8px; color: var(--text-secondary); font-size: var(--text-xs, .85rem); }
.ts-city-card:hover .ts-city-go, .ts-city-card:focus-visible .ts-city-go { color: var(--accent); }

@media (max-width: 900px) {
  .ts-row-head { flex-direction: column; align-items: flex-start; }
}
/* Arrows stay down to phone widths. They used to disappear below 900px, leaving a 768px non-touch
   browser with no affordance at all while the bar was hidden. The bar is visible again, but the
   arrows stay: two affordances beat one. Phones keep swipe and the bar, so the arrows step aside. */
@media (max-width: 560px) {
  .ts-row-nav { display: none; }
}
@media (max-width: 560px) {
  .ts-case-card { width: 232px; }
  .ts-guide-card { width: 280px; }
  .ts-city-card { width: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-case-card, .ts-guide-card, .ts-city-card { transition: border-color .2s ease; }
  .ts-case-card:hover, .ts-guide-card:hover, .ts-city-card:hover { transform: none; }
}