/* channels.css — Αρχική · «Πώς συνεργαζόμαστε» (review #4: ελαφρύ 3-card design) */
.channels { background: var(--bg); padding-block: var(--space-2xl); }
.channels-head { text-align: center; margin-bottom: var(--space-xl); }
.channels-head h2 { margin-top: var(--space-2xs); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-700); }

.channels-cards {
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
}
@media (min-width: 48em) { .channels-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }

/* ΔΙΟΡΘΩΣΗ MOBILE: carousel με swipe (left/right) αντί για 3 κάρτες
   στοιβαγμένες κάθετα. Ίδιο scroll-snap pattern με το products.css,
   για συνέπεια στο πώς "καρουζελάρει" το site σε mobile. */
@media (max-width: 47.999em) {
  .channels-cards {
    grid-template-columns: none;
    display: flex; gap: var(--space-sm);
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-xs); /* χώρος για τυχόν scrollbar */
  }
  .ch-card {
    flex: 0 0 min(74%, 280px); scroll-snap-align: center;
    padding: var(--space-md) var(--space-md) var(--space-sm);
  }
  .ch-ic { width: 42px; height: 42px; margin-bottom: var(--space-sm); }
  .ch-ic svg { width: 20px; height: 20px; }
  .ch-name { font-size: var(--fs-500); }
  .ch-desc { font-size: var(--fs-200); margin-top: 4px; }
  .ch-cta { margin-top: var(--space-sm); }
}

.ch-card {
  position: relative; display: flex; flex-direction: column;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ch-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.ch-card:hover { transform: translateY(-6px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-alt)); }
.ch-card:hover::before { transform: scaleX(1); }

.ch-num {
  position: absolute; top: var(--space-md); right: var(--space-lg);
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--fs-500); color: var(--line); line-height: 1;
}
.ch-ic {
  width: 52px; height: 52px; display: grid; place-items: center;
  color: var(--accent); border: 1px solid var(--line); border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  margin-bottom: var(--space-md);
}
.ch-ic svg { width: 26px; height: 26px; }
.ch-name { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-600); line-height: 1.1; }
.ch-desc { color: var(--text-muted); font-size: var(--fs-300); margin-top: var(--space-xs); flex: 1; }
.ch-cta {
  margin-top: var(--space-lg); color: var(--accent);
  font-weight: var(--weight-medium); font-size: var(--fs-300);
  letter-spacing: 0.02em; transition: color var(--dur-fast) var(--ease);
}
.ch-card:hover .ch-cta { color: var(--accent-bright); }

@media (prefers-reduced-motion: reduce) {
  .ch-card, .ch-card::before { transition: none; }
  .ch-card:hover { transform: none; }
}