/* =====================================================================
   Mobile navigation: section bar, back button, swipe hint, section pager
   + compact A–Z "All countries" list (Explore page).
   Loaded after theme.css from base.html.
   ===================================================================== */

/* ---- Back button (phones, inner pages) ---- */
.tc-back { display: none; }
@media (max-width: 767.98px) {
  .tc-back { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -6px;
    border-radius: 12px; color: #fff; background: rgba(255,255,255,.08); text-decoration: none; font-size: 1rem; flex: 0 0 auto; }
  .tc-back:active { background: rgba(255,255,255,.2); }
}

/* ---- Section bar (phones) ---- */
.tc-secbar { display: none; }
@media (max-width: 767.98px) {
  /* let the top bar and the section bar stick to the screen while scrolling */
  .tc-header { display: contents; }
  .tc-topbar { transition: transform .25s ease; }
  .tc-secbar { display: block; position: sticky; top: 52px; z-index: 1029; background: #fff; border-bottom: 1px solid var(--tc-line, #e6e8ec);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06); transition: transform .25s ease; }
  .tc-secbar-in { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding: .45rem 12px; scroll-snap-type: x proximity; }
  .tc-secbar-in::-webkit-scrollbar { display: none; }
  .tc-sec { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: 999px;
    font-size: .84rem; font-weight: 600; color: #3b4452; text-decoration: none; background: #f2f4f7; scroll-snap-align: center;
    border: 1px solid transparent; white-space: nowrap; }
  .tc-sec i { font-size: .82rem; opacity: .8; }
  .tc-sec i { color: var(--tc-teal); }
  /* each .sec-* class (theme.css) sets that section's colour in --tc-teal */
  .tc-sec.active { background: var(--tc-teal); color: #fff; box-shadow: 0 3px 10px rgba(var(--sec-rgb, 0,0,0), .3); }
  .tc-sec.active i { color: #fff; opacity: 1; }
  .tc-sec.sec-home.active { background: #1b2330; }
  .tc-sec.sec-drivers.active, .tc-sec.sec-drivers.active i { color: #3d2c00; }

  /* hide both bars while scrolling down, show again on scroll up */
  body.tc-bars-hidden .tc-topbar { transform: translateY(-100%); }
  body.tc-bars-hidden .tc-secbar { transform: translateY(calc(-100% - 52px)); }
  body.tc-menu-open .tc-topbar, body.tc-menu-open .tc-secbar { transform: none; }
}

/* ---- Swipe hint (follows the finger) ---- */
.tc-swipe-hint { position: fixed; top: 50%; z-index: 1060; transform: translateY(-50%); display: flex; align-items: center; gap: .45rem;
  background: rgba(27, 35, 48, .92); color: #fff; font-weight: 600; font-size: .9rem; padding: .55rem .9rem; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); pointer-events: none; opacity: 0; transition: opacity .12s; white-space: nowrap; }
.tc-swipe-hint.left { left: 12px; }
.tc-swipe-hint.right { right: 12px; }
.tc-swipe-hint.show { opacity: .55; }
.tc-swipe-hint.ready { opacity: 1; background: var(--tc-teal, #0f766e); }
body.tc-leaving main { transition: transform .18s ease, opacity .18s ease; opacity: .35; }
body.tc-leaving.to-left main { transform: translateX(-28px); }
body.tc-leaving.to-right main { transform: translateX(28px); }

/* one-time tip */
.tc-swipe-tip { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 1060;
  display: flex; align-items: center; gap: .7rem; background: #1b2330; color: #fff; border-radius: 16px; padding: .75rem .9rem;
  font-size: .86rem; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: tcTipIn .3s ease; }
.tc-swipe-tip i.fa-hand-pointer { font-size: 1.2rem; animation: tcTipHand 1.6s ease-in-out infinite; }
.tc-swipe-tip button { margin-left: auto; background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: 10px; padding: .35rem .7rem; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.tc-mbar ~ .tc-swipe-tip, body:has(.tc-mbar) .tc-swipe-tip, body:has(.tc-mobile-cta) .tc-swipe-tip { bottom: calc(96px + env(safe-area-inset-bottom)); }
@keyframes tcTipIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tcTipHand { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }

/* ---- Previous / next section buttons (bottom of main section pages, phones) ---- */
.tc-pager { display: none; }
@media (max-width: 767.98px) {
  .tc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .5rem 0 1.4rem; }
  .tc-pager a { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; border-radius: 14px; background: #fff;
    border: 1px solid var(--tc-line, #e6e8ec); text-decoration: none; color: var(--tc-ink, #1b2330); box-shadow: 0 2px 8px rgba(15,23,42,.04); min-width: 0; }
  .tc-pager a small { color: #6b7280; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  .tc-pager a strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tc-pager a.next { text-align: right; align-items: flex-end; }
  .tc-pager a:only-child.next { grid-column: 2; }
}

/* ---- All countries: compact A–Z list ---- */
.tc-az { background: #fff; border: 1px solid var(--tc-line, #e6e8ec); border-radius: 18px; padding: .3rem .9rem .2rem; position: relative; }
.tc-az-letters { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding: .55rem 0 .5rem; border-bottom: 1px solid var(--tc-line, #e6e8ec);
  margin-bottom: .3rem; }
.tc-az-letters::-webkit-scrollbar { display: none; }
.tc-az-letters a { flex: 0 0 auto; min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px;
  font-size: .8rem; font-weight: 700; color: var(--tc-ink, #1b2330); background: #f2f4f7; text-decoration: none; }
.tc-az-letters a:active, .tc-az-letters a:hover { background: var(--tc-teal, #0f766e); color: #fff; }
.tc-az-list { column-count: 2; column-gap: 1.2rem; }
@media (min-width: 768px) { .tc-az-list { column-count: 3; } }
@media (min-width: 1200px) { .tc-az-list { column-count: 4; } }
.tc-az-group { break-inside: avoid; padding-bottom: .35rem; }
.tc-az-head { font-size: .72rem; font-weight: 800; color: var(--tc-teal, #0f766e); letter-spacing: .08em; padding: .45rem 0 .1rem; scroll-margin-top: 140px; }
.tc-az-item { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; padding: .3rem 0; font-size: .88rem;
  color: var(--tc-ink, #1b2330); text-decoration: none; border-bottom: 1px dashed #edf0f3; line-height: 1.25; }
.tc-az-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tc-az-item small { flex: 0 0 auto; font-size: .7rem; font-weight: 700; color: var(--tc-teal, #0f766e); background: #ecfdf5; border-radius: 999px; padding: 0 .4rem; }
.tc-az-item small.s { color: #6b7280; background: #f2f4f7; }
.tc-az-item:hover span { color: var(--tc-teal, #0f766e); }
.tc-az-more { display: none; }
@media (max-width: 767.98px) {
  .tc-az.is-collapsed .tc-az-list { max-height: 330px; overflow: hidden; }
  .tc-az.is-collapsed::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: 54px; height: 70px; pointer-events: none;
    background: linear-gradient(rgba(255,255,255,0), #fff); }
  .tc-az-more { display: block; width: 100%; margin: .5rem 0 .6rem; border: 0; border-radius: 12px; padding: .6rem; font-weight: 700; font-size: .9rem;
    background: #f2f4f7; color: var(--tc-ink, #1b2330); }
  .tc-az:not(.is-collapsed) .tc-az-more { display: none; }
}
.tc-az-empty { padding: .8rem 0; color: #6b7280; font-size: .88rem; }

/* =====================================================================
   Swipeable photo-card rows (Discover countries on Explore, Represent
   places on Home): one row, same-size cards, text on the photo, next
   card peeks in. No arrows, no auto-rotation.
   ===================================================================== */
.tc-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2px; padding: 4px 2px 12px; margin: 0 -2px;
  scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.tc-strip > * { scroll-snap-align: start; }
@media (max-width: 991.98px) { .tc-strip { grid-auto-columns: calc((100% - 2 * 12px) / 3.3); gap: 12px; } }
@media (max-width: 575.98px) {
  .tc-strip { grid-auto-columns: 43%; gap: 10px; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 12px; scroll-padding-left: 16px; }
  .tc-strip::-webkit-scrollbar { display: none; }
}
.tc-strip-hint { display: none; }
@media (max-width: 767.98px) { .tc-strip-hint { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--tc-muted, #6b7280); font-weight: 600; } }

.tc-pcard2 { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #dfe5ea; color: #fff;
  text-decoration: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .12); isolation: isolate; }
.tc-pcard2 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .4s ease; }
.tc-pcard2::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%); }
.tc-pcard2:hover { color: #fff; }
.tc-pcard2:hover > img { transform: scale(1.05); }
.tc-pcard2-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; gap: .35rem; }
.tc-pcard2-chip { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; background: rgba(255,255,255,.92); color: var(--tc-ink, #1b2330);
  font-size: .7rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-pcard2-chip.live { background: #dc2626; color: #fff; }
.tc-pcard2-body { position: absolute; left: 0; right: 0; bottom: 0; padding: .65rem .7rem .7rem; }
.tc-pcard2-title { font-family: var(--tc-font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.15; text-shadow: 0 1px 6px rgba(0,0,0,.35);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-pcard2-sub { margin-top: .2rem; font-size: .74rem; opacity: .92; display: flex; align-items: center; gap: .55rem; white-space: nowrap; overflow: hidden; }
.tc-pcard2-sub span { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tc-pcard2-who { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; font-size: .74rem; font-weight: 600; min-width: 0; }
.tc-pcard2-who img, .tc-pcard2-who .tc-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; flex: 0 0 auto;
  background: #2f9e44; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 800; }
.tc-pcard2-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .tc-pcard2-title { font-size: .98rem; } }

/* "See all" tile at the end of a row */
.tc-pcard2-more { aspect-ratio: 3 / 4; border-radius: 16px; border: 2px dashed var(--tc-line, #dee2e6); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .4rem; text-align: center; text-decoration: none; color: var(--tc-teal); font-weight: 700; padding: 1rem; background: #fff; }
.tc-pcard2-more i { font-size: 1.4rem; }
.tc-pcard2-more small { color: var(--tc-muted, #6b7280); font-weight: 500; }