/**
 * Programme Tabs Widget Styles
 * Version: 3.0.0 - Refactored to use shared iabt-tabs-shell
 * Uses IABT project CSS variables for consistency
 *
 * Shell styles (section header, tab nav, tab panes, scroll arrows)
 * are now in iabt-tabs-shell.css. This file contains only
 * widget-specific styles: container, banner, grid, cards, and
 * responsive overrides for those elements.
 */

/* =================================
   CSS Variables
================================= */
:root {
  --programme-tabs-primary: var(--iabt-primary, #0b3b79);
  --programme-tabs-accent: var(--iabt-accent, #19c28d);
  --programme-tabs-bg-soft: var(--iabt-bg-soft, hsl(216, 45%, 98%));
  --programme-tabs-foreground: var(--iabt-text-primary, #0f1729);
  --programme-tabs-muted: #64748b;
  --programme-tabs-muted-foreground: #64748b;
  --programme-tabs-border: #e2e8f0;
  --programme-tabs-border-hover: #cbd5e1;
  --programme-tabs-card-bg: #ffffff;
  --programme-tabs-radius-sm: 6px;
  --programme-tabs-radius-md: 8px;
  --programme-tabs-radius-lg: 12px;
}

/* =================================
   Widget Container
================================= */
.programme-tabs-widget {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
}

/* =================================
   Banner
================================= */
.programme-tabs-banner {
  background: var(--programme-tabs-bg-soft);
  border: 1px solid var(--programme-tabs-border);
  border-radius: var(--programme-tabs-radius-lg);
  padding: 40px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.programme-tabs-banner-header {
  border-bottom: 1px solid var(--programme-tabs-border);
  padding-bottom: 24px;
}

.programme-tabs-banner-title {
  font-size: var(--iabt-h4);
  color: var(--programme-tabs-primary);
  margin: 0;
  font-weight: var(--iabt-font-semibold);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.programme-tabs-banner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.programme-tabs-banner-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--programme-tabs-foreground);
  font-weight: 500;
}

.programme-tabs-banner-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--iabt-accent);
  font-size: 20px;
  flex-shrink: 0;
}

.programme-tabs-banner-list-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
}

/* =================================
   Programme Grid
================================= */
.programme-tabs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* No Results Message */
.programme-tabs-no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--programme-tabs-muted-foreground);
  font-size: 16px;
}

/* =================================
   Programme Cards
================================= */
.programme-tabs-widget .iabt-course-card {
  height: 100%;
}

/* Card shell/content/meta/actions are handled by the shared course card component (iabt-course-card.css). */

/* =================================
   Responsive Adjustments
================================= */

/* Tablet - Large (1024px and below) */
@media (max-width: 1024px) {
  .programme-tabs-banner {
    padding: 32px;
  }

  .programme-tabs-banner-title {
    font-size: var(--iabt-h4);
  }

  .programme-tabs-banner-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .programme-tabs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Tablet - Small (768px and below) */
@media (max-width: 768px) {
  .programme-tabs-banner {
    padding: 24px;
    gap: 24px;
  }

  .programme-tabs-banner-title {
    font-size: var(--iabt-text-lg);
  }

  .programme-tabs-banner-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .programme-tabs-banner-list-item {
    font-size: 14px;
  }

  .programme-tabs-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Mobile - Small (480px and below) */
@media (max-width: 480px) {
  .programme-tabs-banner {
    padding: 20px;
  }

  .programme-tabs-banner-title {
    font-size: var(--iabt-text-base);
  }

  .programme-tabs-banner-list-item {
    font-size: 13px;
  }
}

/* =================================
   Accessibility
================================= */
.programme-tabs-widget .iabt-course-card:focus-visible {
  outline: 2px solid var(--programme-tabs-primary);
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .programme-tabs-widget .iabt-course-card,
  .programme-tabs-widget .iabt-course-card-image img,
  .programme-tabs-banner {
    transition: none;
    animation: none;
  }
}

/* =================================
   Print Styles
================================= */
@media print {
  .programme-tabs-widget .iabt-course-card {
    box-shadow: none;
    border: 1px solid var(--iabt-border);
    break-inside: avoid;
  }

  .programme-tabs-widget .iabt-course-card-actions {
    display: none;
  }
}