/* acec-listing-base.css — the card system the two listing pages share.
   Carried over verbatim from LMSPortalEducationAndEventsstylesEducationAndEvents.css,
   which drew the Conferences & Events, My Events and Online Education cards
   from one .education-card rule set. Splitting the pages did not split that
   rule set: both listings still draw the same card, so it lives here rather
   than in two files that would drift apart.

   Loaded by:
     EventPortalEventListEventList.html
     LMSPortalEducationListEducationList.html

   THIS IS AN INTERFACE. A change here changes both pages — check the other
   one before editing, and move the ?v= on both <link> tags so members do not
   keep a stale copy.

   The old file's responsive meta rules grouped .pdh-credits with .date-text
   and .pdh-icon with .date-icon. Those two selectors are NOT here — they are
   in EducationList.css. In one file the group sat after the .pdh-* base
   rules and won; with this file loading first it would have lost, and PDH
   text would have kept its desktop size on every phone. Same declarations,
   split so each still follows its own base rule. */
/* CSS Variables */
:root {
  /* Colors */
  --acec-gold: #F7C95D;
  --acec-gold-dark: #e09a10;
  --acec-navy: #213138;
  --acec-gray: #4a575d;
  --acec-light-gray: #e9ecef;
  --acec-warning: #e09a10;
  --acec-danger: #dc3545;
  --acec-success: #28a745;
  --acec-info: #17a2b8;
  --acec-muted: #adb5bd;
  --acec-bg: #fff;
  --acec-border: #dee2e6;
  --acec-border-dark: #cb8b11;
  --acec-border-light: #DED9CC;
  --acec-placeholder: #adb5bd;
  --acec-btn-hover-bg: #FFD579;
  --acec-nav-link: #6c757d;

  /* Font families */
  --font-main: 'Inter', Arial, sans-serif;
  --font-title: 'Playfair Display', serif;
  --font-btn: 'Raleway', sans-serif;

  /* Font sizes */
  --fs-xs: 0.7rem;
  --fs-50: 0.75rem;
  --fs-100: 0.875rem;
  --fs-200: 0.9rem;
  --fs-base: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.25rem;
  --fs-lg: 1.5rem;
  --fs-xl: 3rem;

  /* Font weights */
  --fw-normal: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing and Padding */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;

  /* Borders and Radius */
  --radius-xs: 0.15rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --border-width: 1.5px;
  --border-width-thin: 1px;

  /* Shadows */
  --acec-shadow: 0 2px 8px rgba(33,49,56,0.06);
  --acec-shadow-hover: 0 6px 24px rgba(33,49,56,0.13);
  --acec-shadow-card: 0 2px 5px rgba(0, 0, 0, 0.05);
  --acec-shadow-card-hover: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Container */
.container.max-w-\[1200px\] {
  max-width: 1200px !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Utility Classes */
.border-b {
  border-bottom: 1px solid;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.text-gray-500 {
  color: var(--acec-nav-link);
}

.mb-6 {
  margin-bottom: 1.5rem;
}

/* Tab Pane Content */
.tab-pane-content {
  display: block;
}

/* Education Card */
.education-card {
  background: white;
  border: var(--border-width) solid var(--acec-light-gray);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: var(--acec-shadow);
  color: var(--acec-navy);
  font-family: var(--font-main);
  cursor: pointer;
}

.education-card:hover {
  box-shadow: var(--acec-shadow-hover);
  transform: translateY(-4px);
}

/* Card Image Container */
.card-image-container {
  width: 100%;
  height: 170px;
  overflow: hidden;
  position: relative;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  transition: transform 0.3s ease;
}

.education-card:hover .card-image {
  transform: scale(1.05);
}

/* Gradient shows whenever the img is missing or fails to load */
.card-image-container--gradient {
  background: linear-gradient(to right, var(--acec-dark), var(--acec-dark-80));
}

.badge-type {
  margin-left: auto;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--acec-gold-dark);
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  padding: 0.25em 0.5em 0.25em 0.5em;
  box-shadow: 0 2px 8px rgba(33, 49, 56, 0.10);
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}


/* Card Body Section */
.card-body-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Card Body Top - Title, Description, Series */
.card-body-top {
  padding: 2rem 1.5rem 0 1.5rem;
}

/* Card Body Bottom - Date/PDH and Pricing */
.card-body-bottom {
  padding: 0 1.5rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  margin-top: 1rem;
}

.card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.card-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--acec-navy);
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  transition: color .2s ease;
  flex: 1;
  min-width: 0;
}

.education-card:hover .card-title {
  color: var(--acec-gold-dark);
}

.card-description {
  font-family: var(--font-main);
  font-size: 0.9rem;
  line-height: 1.25rem;
  color: #4B5563;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* Date and PDH Row */
.date-pdh-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--acec-gray);
  font-family: var(--font-main);
  margin-bottom: 0.3rem;
}

.date-info {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.date-icon {
  color: var(--acec-gold-dark);
  flex-shrink: 0;
}

.date-text {
  font-weight: var(--fw-normal);
  color: var(--acec-gray);
  font-family: var(--font-main);
  font-size: 0.9rem;
  letter-spacing: normal;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Card Footer Section */
.card-footer-section {
  padding: 1rem 1.5rem 0.75rem 1.5rem;
  border-top: 1px solid var(--acec-border);
  margin-top: auto;
}

.card-footer-section .d-grid {
  grid-template-columns: 1fr 1fr;
  display: grid;
  gap: 0.5rem;
  margin-top: 0;
  align-items: stretch;
}

.education-card .btn {
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 0.2s, color 0.2s, border 0.2s;
  text-decoration: none;
  font-family: var(--font-btn);
  gap: 0.25rem;
}

/* View button - outline style matching committee cards exactly */
.education-card .view-btn {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1.5px solid var(--acec-gold) !important;
  color: var(--acec-navy) !important;
  font-weight: 400;
}

.education-card .view-btn:hover {
  border: 1.5px solid var(--acec-gold) !important;
  background-color: var(--acec-gold) !important;
  color: var(--acec-navy) !important;
}

/* Purchase button - gold filled matching committee join btn exactly */
.education-card .purchase-btn {
  background-color: var(--acec-gold) !important;
  border: 1.5px solid var(--acec-gold) !important;
  color: var(--acec-navy) !important;
  font-weight: 700 !important;
}

.education-card .purchase-btn:hover {
  background-color: var(--acec-gold) !important;
  border: 1.5px solid var(--acec-gold) !important;
  color: var(--acec-navy) !important;
  opacity: 0.85;
}

.education-card .purchase-btn--disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.education-card .btn i {
  font-size: 1rem;
  margin-right: 0;
}

/* Loading Spinner */
#loading-spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--acec-border);
  border-top-color: var(--acec-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 991.98px) {
  .card-title {
    font-size: 1.05rem;
  }
  
  /* Education card description - responsive font size */
  .card-description {
    font-size: 0.85rem;
    line-height: 1.2rem;
  }
  
  /* Meta sections (date) - responsive font size */
  .date-text,
  .date-pdh-row {
    font-size: 0.85rem;
  }

  .date-icon {
    font-size: 0.9rem;
  }
  
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .card-body-top {
    padding: 2rem 1.5rem 0 1.5rem;
  }
}

@media (max-width: 768px) {
  .card-title {
    font-size: 1rem;
  }
  
  /* Education card description - smaller font size */
  .card-description {
    font-size: 0.8rem;
    line-height: 1.15rem;
  }
  
  /* Meta sections (date) - responsive font size */
  .date-text,
  .date-pdh-row {
    font-size: 0.8rem;
  }

  .date-icon {
    font-size: 0.85rem;
  }
  
  .card-body-top {
    padding: 2rem 1.5rem 0 1.5rem;
  }

  .card-body-bottom {
    padding: 0 1.5rem 1rem 1.5rem;
  }

  .card-footer-section {
    padding: 0.75rem 1.5rem 0.75rem 1.5rem;
  }
}

@media only screen and (max-width: 480px) {
  .education-card .btn {
    font-size: 0.8rem;
  }
  .card-title {
    font-size: 0.95rem;
  }
  
  /* Education card description - smallest font size */
  .card-description {
    font-size: 0.75rem;
    line-height: 1.1rem;
  }
  
  /* Meta sections (date) - responsive font size */
  .date-text,
  .date-pdh-row {
    font-size: 0.75rem;
  }

  .date-icon {
    font-size: 0.8rem;
  }
  
}