/* ════════════════════════════════════════
   CITY TILES — 3D HERO CARDS FOR CITY PAGES
   Used by: city-fort-worth/dallas/san-antonio/houston/riverside
   ════════════════════════════════════════ */

.ct-section {
  padding: 56px 0 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ct-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 0 22px;
  gap: 20px;
  flex-wrap: wrap;
}

.ct-title-block { display: flex; flex-direction: column; gap: 6px; }

.ct-eyebrow {
  font-family: var(--f-mono);
  font-size: .5rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
}

.ct-h2 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.025em;
  color: var(--white);
}

.ct-h2 em { color: var(--orange); font-style: normal; }

.ct-tools { display: flex; gap: 8px; align-items: center; }

.ct-arrow {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--white);
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 900;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.ct-arrow:hover { border-color: var(--orange); color: var(--orange); }

.ct-wrap {
  position: relative;
  margin: 0 -24px;
  padding: 0 24px;
}

.ct-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.ct-rail::-webkit-scrollbar { height: 4px; }
.ct-rail::-webkit-scrollbar-track { background: transparent; }
.ct-rail::-webkit-scrollbar-thumb { background: var(--border2); }
.ct-rail::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* ── TILE ── */
.ct-tile {
  flex: 0 0 auto;
  width: clamp(300px, 36vw, 480px);
  aspect-ratio: 1013 / 675;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  background: var(--black2);
  border: 1px solid var(--border2);
  transition: transform .4s cubic-bezier(0.23, 1, 0.32, 1), border-color .25s;
}

.ct-tile:hover { border-color: var(--orange); transform: translateY(-3px); }

/* Variant 1: PAY hero — massive number center */
.ct-tile.v-pay { background: linear-gradient(135deg, var(--black) 0%, var(--black3) 60%, var(--black) 100%); }
.ct-tile.v-pay .v-bg-pay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--f-display); font-size: clamp(7rem, 16vw, 13rem);
  font-weight: 900; color: var(--orange); line-height: 1; letter-spacing: -.04em; opacity: .9;
  pointer-events: none;
}
.ct-tile.v-pay .v-bg-pay::after {
  content: '/DAY'; position: absolute; right: -8px; bottom: 8px;
  font-family: var(--f-mono); font-size: 1rem; letter-spacing: .15em; color: var(--white); opacity: .8;
}

/* Variant 2: STAMP — giant trade word as background */
.ct-tile.v-stamp .v-bg-text {
  position: absolute; bottom: -18%; left: -3%;
  font-family: var(--f-display); font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 900; text-transform: uppercase; color: rgba(255,255,255,.025);
  letter-spacing: -.05em; line-height: .8; white-space: nowrap; pointer-events: none;
}
.ct-tile.v-stamp .v-bg-pay {
  position: absolute; top: 32%; right: 6%;
  font-family: var(--f-display); font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 900; color: var(--orange); line-height: 1; letter-spacing: -.03em;
}

/* Variant 3: GRID — tactical lattice */
.ct-tile.v-grid {
  background-color: var(--black2);
  background-image:
    linear-gradient(rgba(249,99,2,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,99,2,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ct-tile.v-grid .v-cross {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60%; height: 60%; border: 1px solid rgba(249,99,2,.15); pointer-events: none;
}
.ct-tile.v-grid .v-cross::before,
.ct-tile.v-grid .v-cross::after { content: ''; position: absolute; background: rgba(249,99,2,.15); }
.ct-tile.v-grid .v-cross::before { top: 50%; left: -20px; right: -20px; height: 1px; }
.ct-tile.v-grid .v-cross::after  { left: 50%; top: -20px; bottom: -20px; width: 1px; }

/* Variant 4: DIAGONAL */
.ct-tile.v-diag { background: var(--black); }
.ct-tile.v-diag .v-stripe {
  position: absolute; top: 0; left: 0; width: 200%; height: 56px; background: var(--orange);
  transform: translateY(110px) rotate(-15deg); transform-origin: left top;
  display: flex; align-items: center; gap: 32px; overflow: hidden; padding-left: 24px;
}
.ct-tile.v-diag .v-stripe-text {
  font-family: var(--f-display); font-size: 1.8rem; font-weight: 900;
  text-transform: uppercase; color: #000; letter-spacing: -.02em; white-space: nowrap;
}

/* Variant 5: REVERSE — orange fill */
.ct-tile.v-reverse { background: var(--orange); }
.ct-tile.v-reverse .v-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  pointer-events: none;
}
.ct-tile.v-reverse .ct-overlay { background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 100%); }
.ct-tile.v-reverse .ct-tagline,
.ct-tile.v-reverse .ct-headline,
.ct-tile.v-reverse .ct-body { color: #000; }
.ct-tile.v-reverse .ct-cta { background: #000; color: var(--orange); }
.ct-tile.v-reverse .ct-cta:hover { background: var(--white); }

/* ── OVERLAY ── */
.ct-overlay {
  position: absolute; inset: 0; padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 30%, transparent 60%, rgba(0,0,0,.85) 100%);
  z-index: 2;
}

.ct-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}

.ct-tagline {
  font-family: var(--f-mono); font-size: .5rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--orange);
}

.ct-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; font-family: var(--f-mono);
  font-size: .42rem; letter-spacing: .12em; text-transform: uppercase;
}

.ct-badge.urgent { background: var(--red); color: #fff; animation: ct-pulse 1.4s infinite; }
.ct-badge.live   { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.4); color: var(--green); }

@keyframes ct-pulse { 0%,100%{opacity:1} 50%{opacity:.65} }

.ct-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.ct-bottom { display: flex; flex-direction: column; gap: 12px; }

.ct-headline {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 900; text-transform: uppercase; line-height: .92;
  letter-spacing: -.02em; color: var(--white);
}

.ct-headline em { color: var(--orange); font-style: normal; }

.ct-body {
  font-family: var(--f-mono); font-size: .52rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray2); line-height: 1.6;
}

.ct-body strong { color: var(--white); }

.ct-actions { display: flex; gap: 8px; }

.ct-cta {
  background: var(--orange); border: none; color: #000;
  font-family: var(--f-display); font-size: .95rem; font-weight: 900;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 18px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, transform .15s;
}

.ct-cta:hover { background: #ff7a1a; transform: translateX(2px); }

.ct-cta-ghost {
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-family: var(--f-mono); font-size: .5rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 10px 12px; text-decoration: none;
}

.ct-cta-ghost:hover { border-color: var(--orange); color: var(--orange); }

.ct-sheen {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at var(--mx, 50%) var(--my, 50%),
    rgba(249,99,2,.1) 0%, rgba(255,180,80,.04) 30%, transparent 60%);
  pointer-events: none; mix-blend-mode: screen; z-index: 1;
}

.ct-empty {
  padding: 40px 24px; text-align: center;
  font-family: var(--f-mono); font-size: .56rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gray3);
}

.ct-empty a { color: var(--orange); }

.ct-skel {
  display: flex; gap: 16px; padding-bottom: 12px;
}

.ct-skel-tile {
  flex: 0 0 clamp(300px, 36vw, 480px);
  aspect-ratio: 1013 / 675;
  background: linear-gradient(90deg, #0d0d0d 25%, #161616 50%, #0d0d0d 75%);
  background-size: 200% 100%;
  animation: ct-shimmer 1.4s infinite;
}

@keyframes ct-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

@media (max-width: 600px) {
  .ct-tile { width: 84vw; }
}