/* ═══════════════════════════════════════════════════════════════════
   PSX MARKET PORTAL — Tablet CSS (769px - 1024px)
   Separate file — NO conflicts with any other CSS
   All selectors scoped with .psx- prefix
   ═══════════════════════════════════════════════════════════════════ */

.psx-portal {
  padding: 0 20px 50px;
}

/* ═══ HERO ═══ */
.psx-hero {
  border-radius: 14px;
  padding: 30px;
}

.psx-hero-title {
  font-size: 28px;
}

/* ═══ SUMMARY ═══ */
.psx-summary-inner {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.psx-summary-card {
  padding: 16px;
}

.psx-summary-val {
  font-size: 24px;
}

/* ═══ TOP MOVERS ═══ */
.psx-top-movers-inner {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.psx-mover-card {
  padding: 16px;
}

/* ═══ CONTROLS ═══ */
.psx-controls-bar {
  padding: 16px;
}

.psx-sector-filters {
  flex-wrap: wrap;
}

/* ═══ SECTORS VIEW ═══ */
.psx-sectors-view {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.psx-sector-stocks {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* ═══ INFO FOOTER ═══ */
.psx-info-inner {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.psx-info-card:last-child {
  grid-column: 1 / -1;
}

/* Hide volume column on tablet to save space */
.psx-th-vol,
.psx-td-vol {
  display: none;
}

.psx-market-cta { padding: 18px 20px; }


/* Hero — light background override */
.psx-hero {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e8edf4 100%) !important;
  border: 1px solid var(--psx-border);
}

.psx-hero-title {
  color: var(--psx-text) !important;
}

.psx-hero-sub {
  color: var(--psx-text2) !important;
}

.psx-hero-badge {
  background: rgba(214,168,79,0.1) !important;
}

.psx-timer-label {
  color: var(--psx-text2) !important;
}

.psx-timer-val {
  color: var(--psx-text) !important;
}

.psx-cta-title {
  color: var(--psx-text) !important;
}

.psx-cta-sub {
  color: var(--psx-text2) !important;
}

.psx-cta-arrow {
  color: var(--psx-text2) !important;
}

.psx-market-cta {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
  border: 1px solid var(--psx-border);
}


/* Logo image inside CTA icon */
.psx-cta-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}