/* =========================================================================
   Pacewave — Television as a Service page (TVaaS.html)
   Loaded after styles.css and core-network.css (shared solution-page styles).
   New classes are prefixed tv-.
   ========================================================================= */

.tv-hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.tv-h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 2.25rem 0 1rem; }
.tv-cap sup { font-size: .65em; color: var(--e2e-teal); }

/* ── Architecture ───────────────────────────────────────────────────────── */
.tv-arch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) 96px minmax(0, 1fr);
  grid-template-rows: auto 48px auto 48px auto;
  align-items: center;
}
.tv-arch > * { position: relative; }
.tv-n-fta   { grid-column: 3; grid-row: 1; }
.tv-v1      { grid-column: 3; grid-row: 2; }
.tv-n-mgmt  { grid-column: 1; grid-row: 3; }
.tv-h1      { grid-column: 2; grid-row: 3; }
.tv-n-cache { grid-column: 3; grid-row: 3; }
.tv-h2      { grid-column: 4; grid-row: 3; }
.tv-n-home  { grid-column: 5; grid-row: 3; }
.tv-v2      { grid-column: 3; grid-row: 4; }
.tv-n-web   { grid-column: 3; grid-row: 5; }

.tv-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .2rem;
  padding: 1rem .9rem;
  border: 1px solid var(--e2e-line);
  border-radius: 14px;
  background: var(--e2e-cell);
}
.tv-node .material-icons-outlined { color: var(--e2e-teal); font-size: 28px; }
.tv-node strong { font-size: .92rem; }
.tv-node small { font-size: .75rem; color: var(--text-muted); }
.tv-n-cache {
  padding: 1.4rem 1rem;
  border: 1.5px solid var(--e2e-teal);
  border-radius: 999px / 70%;
  background: var(--e2e-teal-soft);
}

/* vertical bi-directional connector */
.tv-vconn {
  align-self: stretch;
  justify-self: center;
  width: 12px;
  background: linear-gradient(var(--e2e-teal), var(--e2e-teal)) center / 2px calc(100% - 12px) no-repeat;
}
.tv-vconn::before, .tv-vconn::after {
  content: '';
  position: absolute;
  left: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.tv-vconn::before { top: 0; border-bottom: 8px solid var(--e2e-teal); }
.tv-vconn::after  { bottom: 0; border-top: 8px solid var(--e2e-teal); }

/* ── Feature tabs ───────────────────────────────────────────────────────── */
.tv-tabset { margin-top: 1.25rem; }
.tv-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.tv-tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 42px;
  padding: .55rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.tv-tab .material-icons-outlined { font-size: 19px; }
.tv-tab:hover { color: var(--text); border-color: rgba(20,163,184,.6); }
.tv-tab[aria-selected="true"] {
  color: #fff;
  border-color: transparent;
  background: var(--gradient);
}
.tv-tab:focus-visible { outline: 2px solid var(--e2e-teal); outline-offset: 3px; }

.tv-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.5rem 2rem;
  align-items: start;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.tv-panel[hidden] { display: none; }
.tv-panel h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-bottom: .5rem; }
.tv-intro { color: var(--text-muted); margin-bottom: 1rem; }
.tv-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.tv-items li { display: flex; gap: .7rem; align-items: flex-start; }
.tv-items .material-icons-outlined { color: var(--e2e-teal); font-size: 22px; margin-top: 1px; }
.tv-items strong { display: block; font-size: .93rem; margin-bottom: .15rem; }
.tv-items p { font-size: .86rem; color: var(--text-muted); line-height: 1.5; }

.tv-visual { margin: 0; }
.tv-visual figcaption { margin-top: .5rem; font-size: .76rem; font-style: italic; text-align: center; color: var(--text-muted); }
.tv-shot {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.9);
}

.tv-tagline {
  grid-column: 1 / -1;
  padding: .85rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(90deg, #0e8ea1, #14a3b8);
}
.tv-tagline--wide { margin-top: 1rem; }

/* ── Mock TV screens (logo-free illustrations) ──────────────────────────── */
.tv-screen {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .9rem 1rem;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: radial-gradient(ellipse at 20% 0%, #13606f 0%, #0a2e38 55%, #071a21 100%);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.9);
  font-size: .7rem;
  color: #e6f4f6;
  container-type: inline-size;
}
.tv-bar { display: flex; align-items: center; gap: 1rem; }
.tv-brand { font-weight: 700; letter-spacing: .25em; font-size: .72rem; }
.tv-tabs { display: flex; gap: .8rem; opacity: .75; }
.tv-tabs b { font-weight: 500; }
.tv-time { margin-left: auto; opacity: .8; }

.tv-home { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .45rem; }
.tv-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  font-weight: 600;
}
.tv-tile .material-icons-outlined { font-size: 1.6rem; color: #7ee3f1; }
.tv-tile--hero { grid-row: 1 / 3; border: 2px solid #7ee3f1; background: rgba(20,163,184,.35); }
.tv-tile--hero .material-icons-outlined { font-size: 2.4rem; color: #fff; }
.tv-tile--ad { grid-column: 2 / 4; background: linear-gradient(90deg, rgba(91,124,240,.45), rgba(20,163,184,.45)); letter-spacing: .08em; text-transform: uppercase; }

.tv-epg-now { display: flex; align-items: center; gap: .75rem; padding: .45rem .6rem; border-radius: 6px; background: rgba(255,255,255,.08); }
.tv-epg-now span { opacity: .75; }
.tv-ctrls { margin-left: auto; display: flex; gap: .3rem; opacity: 1 !important; }
.tv-ctrls .material-icons-outlined { font-size: 1.05rem; color: #7ee3f1; }
.tv-epg { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: .3rem .5rem; align-content: start; }
.tv-ch { white-space: nowrap; opacity: .8; }
.tv-ch b { font-weight: 600; opacity: 1; }
.tv-progs { display: flex; gap: .25rem; min-width: 0; }
.tv-prog { min-width: 0; padding: .2rem .35rem; border-radius: 3px; background: rgba(255,255,255,.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-prog.is-on { background: #14a3b8; color: #fff; }

.tv-search { display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: 999px; background: rgba(255,255,255,.1); opacity: .85; }
.tv-search .material-icons-outlined { font-size: 1rem; }
.tv-vod { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.tv-poster { display: flex; align-items: flex-end; padding: .35rem; border-radius: 5px; font-size: .62rem; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.tv-poster--a { background: linear-gradient(160deg, #f59e0b, #9a3412); }
.tv-poster--b { background: linear-gradient(160deg, #1e3a8a, #0f172a); }
.tv-poster--c { background: linear-gradient(160deg, #dc2626, #7c2d12); }
.tv-poster--d { background: linear-gradient(160deg, #0d9488, #134e4a); }
.tv-poster--e { background: linear-gradient(160deg, #64748b, #1e293b); }
.tv-poster--f { background: linear-gradient(160deg, #7c3aed, #312e81); }
.tv-poster--g { background: linear-gradient(160deg, #ca8a04, #3f2d06); }
.tv-poster--h { background: linear-gradient(160deg, #0284c7, #082f49); }
.tv-poster--i { background: linear-gradient(160deg, #fb7185, #881337); }
.tv-poster--j { background: linear-gradient(160deg, #a16207, #451a03); }

.tv-pvr { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.tv-pvr-row { display: grid; grid-template-columns: 2.2rem minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .3rem .5rem; border-radius: 4px; background: rgba(255,255,255,.07); }
.tv-pvr-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-pvr-row span:nth-child(3) { opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-st { padding: .05rem .4rem; border-radius: 999px; font-size: .6rem; font-weight: 600; }
.tv-st--recorded { background: rgba(255,255,255,.15); }
.tv-st--recording { background: #dc2626; }
.tv-st--scheduled { background: rgba(20,163,184,.5); }
.tv-usage { display: flex; align-items: center; gap: .6rem; opacity: .9; }
.tv-usage i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.tv-usage b { display: block; height: 100%; background: #7ee3f1; }

/* ── Management & billing ───────────────────────────────────────────────── */
.tv-mgmt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.tv-mgmt-col { padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); }
.tv-mgmt-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.tv-mgmt-head h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.tv-ico { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gradient); color: #fff; }
.tv-ico .material-icons-outlined { font-size: 21px; }
.tv-list { display: flex; flex-direction: column; gap: .55rem; }
.tv-list li { position: relative; padding-left: 1.1rem; font-size: .93rem; }
.tv-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) {
  /* phones/tablets: the three inputs sit together, then one path to the viewers */
  .tv-arch {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "fta  web"
      "mgmt mgmt"
      "v1   v1"
      "cache cache"
      "h2   h2"
      "home home";
    gap: .6rem;
  }
  .tv-n-fta { grid-area: fta; }
  .tv-n-web { grid-area: web; }
  .tv-n-mgmt { grid-area: mgmt; }
  .tv-v1 { grid-area: v1; min-height: 44px; }
  .tv-n-cache { grid-area: cache; }
  .tv-h2 { grid-area: h2; }
  .tv-n-home { grid-area: home; }
  .tv-v2, .tv-h1 { display: none; }
  .tv-arch .tv-node { padding: .85rem .7rem; }
  .tv-n-cache { border-radius: 18px; }
  .tv-panel { grid-template-columns: minmax(0, 1fr); }
  .tv-mgmt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tv-hero-cta { flex-direction: column; }
  .tv-hero-cta .btn { width: 100%; }
  .tv-tablist { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem 1rem; padding: 0 1rem .25rem; scrollbar-width: none; }
  .tv-tablist::-webkit-scrollbar { display: none; }
  .tv-tab { flex-shrink: 0; }
  .tv-panel { padding: 1.1rem; }
  .tv-items { grid-template-columns: minmax(0, 1fr); }
  .tv-tagline { font-size: .74rem; letter-spacing: .06em; }
  .tv-screen { font-size: .58rem; padding: .6rem .7rem; gap: .4rem; }
  .tv-tabs { display: none; }
  .tv-tile .material-icons-outlined { font-size: 1.2rem; }
  .tv-tile--hero .material-icons-outlined { font-size: 1.8rem; }
  .tv-poster { font-size: .5rem; }
  .tv-epg { gap: .2rem .4rem; }
}