/* =========================================================================
   Pacewave — Trailer as a Service page (TRaaS.html)
   Loaded after styles.css and core-network.css (shared solution-page
   pieces: .cn-section, .cn-stats, .cn-table, .cn-conn, .cn-related, tokens).
   New classes are prefixed tr-.
   ========================================================================= */

/* ── Hero with photo ────────────────────────────────────────────────────── */
.tr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  align-items: center;
}
.tr-hero .cn-stats, .tr-hero .cn-back { grid-column: 1 / -1; }
.tr-hero .cn-stats { margin-top: .5rem; }
.tr-hero .cn-back { margin-top: 0; justify-self: start; }
.tr-hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.tr-photo {
  margin: 0;
  padding: .75rem;
  background: #f4f5f2;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -40px rgba(14,165,233,.45);
}
.tr-photo img { width: 100%; height: auto; border-radius: 12px; }
.tr-photo figcaption {
  margin-top: .45rem;
  font-size: .74rem;
  font-style: italic;
  text-align: center;
  color: #5b6470;
}

/* ── Trailer comparison table ───────────────────────────────────────────── */
.tr-compare th[scope="row"] { width: 180px; }
.tr-compare td { color: var(--text); }
.tr-compare td:last-child { font-family: var(--font-body); font-size: .93rem; color: var(--text); white-space: normal; }
.tr-compare thead th:not(:first-child) { color: var(--e2e-teal); }

/* ── WAN bonding ────────────────────────────────────────────────────────── */
.tr-kicker { font-weight: 600; color: var(--e2e-teal); font-size: 1.05rem; margin-bottom: 1.25rem; }
.tr-wan { display: flex; flex-direction: column; gap: 1.25rem; }
.tr-wan-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tr-wan-points li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.tr-wan-points strong { display: block; margin-bottom: .25rem; }
.tr-wan-points p { font-size: .9rem; color: var(--text-muted); }
.tr-wan-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
}
.tr-wan-ico .material-icons-outlined { font-size: 21px; }

.tr-wan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.25fr) 72px minmax(0, 1fr) 72px minmax(0, .9fr);
  grid-template-rows: auto auto;
  align-items: center;
}
.tr-wan-grid > * { position: relative; }
.tr-zone { grid-row: 1; padding-bottom: .9rem; font-size: .82rem; font-weight: 700; color: var(--e2e-teal); }
.tr-zone--remote { grid-column: 1 / 4; }
.tr-zone--proxy  { grid-column: 5 / 8; }
.tr-router { grid-column: 1; grid-row: 2; }
.tr-c1     { grid-column: 2; grid-row: 2; }
.tr-tunnel { grid-column: 3; grid-row: 2; }
.tr-c2     { grid-column: 4; grid-row: 2; }
.tr-server { grid-column: 5; grid-row: 2; }
.tr-c3     { grid-column: 6; grid-row: 2; }
.tr-dests  { grid-column: 7; grid-row: 2; }

.tr-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .2rem;
  padding: 1.1rem .75rem;
  border: 1.5px solid var(--e2e-teal);
  border-radius: 14px;
  background: var(--e2e-panel);
}
.tr-node .material-icons-outlined { color: var(--e2e-teal); font-size: 28px; }
.tr-node strong { font-size: .92rem; }
.tr-node small { font-size: .74rem; color: var(--text-muted); }

.tr-tunnel {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .8rem .8rem .55rem;
  border: 1.5px dashed rgba(20,163,184,.7);
  border-radius: 16px;
}
.tr-tunnel-l {
  order: 99;
  margin-top: .2rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--e2e-teal);
}
.tr-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  font-size: .84rem;
  background: var(--e2e-cell);
  border-radius: 8px;
}
.tr-link .material-icons-outlined { color: var(--e2e-teal); font-size: 20px; }

.tr-dests { display: flex; flex-direction: column; gap: 1.5rem; }
.tr-dest { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; font-size: .82rem; }
.tr-dest .material-icons-outlined { color: var(--e2e-teal); font-size: 30px; }

/* ── Options & support ──────────────────────────────────────────────────── */
.tr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.tr-col {
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.tr-col-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.tr-col-head h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
.tr-col-head small { display: block; font-size: .76rem; font-style: italic; color: var(--text-muted); }
.tr-list { display: flex; flex-direction: column; gap: .6rem; }
.tr-list li { position: relative; padding-left: 1.1rem; font-size: .93rem; color: var(--text); }
.tr-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--e2e-teal);
}

/* ── Tablet / phone ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .tr-hero { grid-template-columns: minmax(0, 1fr); }
  .tr-photo { max-width: 560px; }
  .tr-wan-points { grid-template-columns: minmax(0, 1fr); }
  .tr-wan-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .tr-wan-grid > * { grid-column: 1 !important; grid-row: auto !important; }
  .tr-zone--proxy { padding-top: 1rem; order: 5; }
  .tr-router { order: 1; }
  .tr-c1 { order: 2; }
  .tr-tunnel { order: 3; }
  .tr-c2 { order: 4; }
  .tr-server { order: 6; }
  .tr-c3 { order: 7; }
  .tr-dests { order: 8; flex-direction: row; justify-content: center; gap: 2.5rem; }
  .tr-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tr-hero-cta { flex-direction: column; }
  .tr-hero-cta .btn { width: 100%; }
  /* comparison table → card per feature */
  .tr-compare thead { display: none; }
  .tr-compare tr { display: block; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
  .tr-compare tbody tr:last-child { border-bottom: 0; }
  .tr-compare th, .tr-compare td { display: block; width: auto !important; padding: 0; border: 0; }
  .tr-compare th { margin-bottom: .35rem; }
  .tr-compare td { margin-top: .35rem; font-size: .9rem; }
  .tr-compare td::before {
    content: attr(data-label);
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--e2e-teal);
  }
}