.epg-guide {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  max-width: var(--page-width);
  margin-inline: auto;
}

.epg-introduction {
  max-width: 800px;
}

.epg-eyebrow {
  margin-block-end: 8px;
  color: var(--color-brand-deep);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

[lang="ar"] .epg-eyebrow {
  letter-spacing: normal;
}

.epg-title {
  color: var(--color-ink);
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1.16;
  text-wrap: balance;
}

[lang="ar"] .epg-title,
[lang="fr"] .epg-title {
  letter-spacing: normal;
}

.epg-intro-copy {
  max-width: 65ch;
  margin-block-start: 12px;
  color: var(--color-muted-strong);
  font-size: 1rem;
  line-height: 1.75;
}

.epg-schedule-note {
  padding: 14px 17px;
  border: 1px solid #cce9ed;
  border-radius: var(--radius-medium);
  color: #245663;
  background: #effafb;
  font-size: 0.92rem;
  font-weight: 620;
  line-height: 1.65;
}

.epg-controls {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 14px 18px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.epg-date-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.epg-date-label,
.epg-time-zone-label {
  color: var(--color-ink-soft);
  font-size: 0.86rem;
  font-weight: 700;
}

.epg-date-input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 8px 11px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  color: var(--color-ink);
  background: var(--color-surface);
}

.epg-date-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.epg-control-button,
.epg-refresh-button,
.epg-retry-button,
.epg-page-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  color: var(--color-ink-soft);
  background: var(--color-surface);
  font-size: 0.88rem;
  font-weight: 680;
  line-height: 1.35;
  text-align: center;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.epg-control-button:hover:not(:disabled),
.epg-refresh-button:hover:not(:disabled),
.epg-retry-button:hover:not(:disabled),
.epg-page-button:hover:not(:disabled) {
  border-color: #b9cae5;
  color: var(--color-brand-deep);
  background: var(--color-brand-soft);
}

.epg-today-button,
.epg-refresh-button,
.epg-retry-button {
  border-color: var(--color-brand-dark);
  color: #fff;
  background: var(--color-brand-dark);
}

.epg-today-button:hover:not(:disabled),
.epg-refresh-button:hover:not(:disabled),
.epg-retry-button:hover:not(:disabled) {
  border-color: var(--color-brand-deep);
  color: #fff;
  background: var(--color-brand-deep);
}

.epg-control-button:disabled,
.epg-refresh-button:disabled,
.epg-retry-button:disabled,
.epg-page-button:disabled {
  color: #7d8998;
  background: var(--color-surface-tint);
  cursor: wait;
}

.epg-date-readout {
  grid-column: 1 / 3;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 740;
}

.epg-window-readout,
.epg-current-time {
  grid-column: 1 / 3;
  color: var(--color-muted-strong);
  font-size: 0.86rem;
  line-height: 1.55;
}

.epg-window-readout {
  overflow-wrap: anywhere;
}

.epg-controls-footer {
  display: flex;
  grid-column: 3;
  grid-row: 1 / span 3;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.epg-time-zone {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--color-muted-strong);
  font-size: 0.84rem;
  line-height: 1.45;
}

.epg-time-zone-value {
  color: var(--color-ink);
  font-size: 0.9rem;
}

.epg-results {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.epg-results-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.epg-results-title {
  color: var(--color-ink);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 760;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

[lang="ar"] .epg-results-title,
[lang="fr"] .epg-results-title {
  letter-spacing: normal;
}

.epg-result-count,
.epg-status,
.epg-page-status {
  color: var(--color-muted-strong);
  font-size: 0.88rem;
  line-height: 1.55;
}

.epg-notices {
  display: grid;
  gap: 8px;
}

.epg-notice,
.epg-overlap-notice,
.epg-gap-notice {
  padding: 11px 14px;
  border: 1px solid #d6e3f0;
  border-radius: 12px;
  color: #334f6e;
  background: #f4f8fd;
  font-size: 0.88rem;
  line-height: 1.6;
}

.epg-warning {
  border-color: #ecd8a6;
  color: #644c15;
  background: #fff9e8;
}

.epg-synthetic-notice {
  border-color: #cce9ed;
  color: #245663;
  background: #effafb;
}

.epg-state {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
}

.epg-state[hidden],
.epg-pagination[hidden] {
  display: none;
}

.epg-error-state {
  border-color: #f0c9c6;
  background: #fff8f7;
}

.epg-state-title {
  color: var(--color-ink);
  font-size: 1.18rem;
  font-weight: 750;
  line-height: 1.35;
}

.epg-state-description {
  max-width: 70ch;
  color: var(--color-muted-strong);
  line-height: 1.65;
}

.epg-channel-groups {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.epg-channel-group {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.epg-channel-header {
  min-width: 0;
  padding-block-end: 11px;
  border-block-end: 1px solid var(--color-border);
}

.epg-channel-title {
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 760;
  line-height: 1.3;
}

.epg-program-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
  gap: 12px;
  min-width: 0;
  padding: 0;
  list-style: none;
}

.epg-program-item {
  min-width: 0;
}

.epg-program-card {
  display: grid;
  height: 100%;
  align-content: start;
  gap: 11px;
  padding: 16px;
  border: 1px solid #dce5ef;
  border-radius: 15px;
  background: var(--color-surface-tint);
}

.epg-program-title {
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-size: 1.02rem;
  font-weight: 720;
  line-height: 1.45;
}

.epg-synthetic-badge,
.epg-scheduled-badge {
  justify-self: start;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid #cce9ed;
  border-radius: 999px;
  color: #245663;
  background: #effafb;
  font-size: 0.75rem;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.epg-scheduled-badge {
  border-color: #cdddfb;
  color: var(--color-brand-deep);
  background: var(--color-brand-soft);
}

.epg-program-times {
  display: grid;
  gap: 6px;
  margin: 0;
}

.epg-program-time-row {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.epg-program-time-label {
  color: var(--color-muted);
  font-size: 0.81rem;
  font-weight: 650;
}

.epg-program-time-value {
  min-width: 0;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  font-weight: 650;
}

.epg-time {
  direction: ltr;
  unicode-bidi: isolate;
}

.epg-program-description {
  color: var(--color-muted-strong);
  font-size: 0.89rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.epg-channel-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-block-start: 2px;
}

.epg-summary-column {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: #fbfcfe;
}

.epg-summary-heading {
  color: var(--color-ink-soft);
  font-size: 0.83rem;
  font-weight: 740;
  line-height: 1.45;
}

.epg-summary-program {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.epg-summary-status {
  color: var(--color-brand-deep);
  font-size: 0.77rem;
  font-weight: 760;
}

.epg-summary-title {
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.45;
}

.epg-summary-time,
.epg-summary-empty {
  color: var(--color-muted-strong);
  font-size: 0.84rem;
  line-height: 1.5;
}

.epg-gap-notice {
  margin-block-start: 4px;
  padding: 8px 10px;
  font-size: 0.82rem;
}

.epg-overlap-notice {
  border-color: #ecd8a6;
  color: #644c15;
  background: #fff9e8;
}

.epg-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  padding-block-start: 4px;
}

.epg-page-status {
  min-width: 100px;
  text-align: center;
}

@media (max-width: 760px) {
  .epg-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .epg-date-navigation {
    justify-content: flex-start;
  }

  .epg-date-readout,
  .epg-window-readout,
  .epg-current-time,
  .epg-controls-footer {
    grid-column: 1;
    grid-row: auto;
  }

  .epg-controls-footer {
    justify-content: space-between;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--color-border);
  }
}

@media (max-width: 520px) {
  .epg-channel-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .epg-date-navigation > button {
    flex: 1 1 auto;
  }

  .epg-controls-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .epg-refresh-button {
    width: 100%;
  }

  .epg-results-header {
    align-items: flex-start;
    flex-direction: column;
  }
}