/* ==========================================================================
   Online Exhibition - Hope Train Style Sheet
   Painted White Card Design with Home Page Illustration Background Artwork
   ========================================================================== */

:root {
  --ccf-primary: #FFC714;
  --ccf-primary-hover: #e5b00d;
  --ccf-yellow-btn: #FDD900;
  --ccf-primary-light: #FFF9E6;
  --ccf-dark: #0f172a;
  --ccf-dark-slate: #1e293b;
  --ccf-text-main: #334155;
  --ccf-text-muted: #64748b;
  --ccf-card-radius: 22px;
  --ccf-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --------------------------------------------------------------------------
   Hide Page Titlebar & Breadcrumbs on Exhibition Page
   -------------------------------------------------------------------------- */
.page-id-8448 .lqd-page-title-wrap,
.page-id-8448 .lqd-breadcrumb,
.page-id-8448 .breadcrumb,
.page-id-8448 .breadcrumbs,
.page-id-8448 .titlebar,
.page-id-8448 .titlebar-inner,
.page-id-8448 .entry-header,
.page-template-default.page-id-8448 header.entry-header {
  display: none !important;
}

.ccf-online-exhibition-wrap {
  width: 100%;
  position: relative;
  font-family: inherit;
  color: var(--ccf-text-main);
  box-sizing: border-box;
}

.ccf-online-exhibition-wrap * {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Exhibition Section Container
   -------------------------------------------------------------------------- */
.ccf-exhibition-section {
  padding: 20px 0 85px;
  max-width: 1280px;
  margin: 0 auto;
}

.ccf-exhibition-container {
  padding: 0 16px;
}

.ccf-btn.ccf-btn-secondary#ccf-modal-share-btn {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Gallery Controls: Filters & Live Search (Matching Website Design System)
   -------------------------------------------------------------------------- */
.ccf-gallery-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  padding-bottom: 26px;
  border-bottom: 1.5px solid #F0E8DC;
}

.ccf-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Base Inactive Filter Button (High Specificity to override Elementor kit) */
.elementor-kit-9 button.ccf-filter-btn,
.ccf-online-exhibition-wrap button.ccf-filter-btn,
button.ccf-filter-btn,
.ccf-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  color: #3F4C51 !important;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
  border: 1.5px solid #E6D6C7 !important;
  padding: 11px 24px !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  text-transform: none !important;
  outline: none !important;
}

.elementor-kit-9 button.ccf-filter-btn svg,
.ccf-filter-btn svg {
  color: #FDD900;
  transition: color 0.3s ease;
}

/* Hover state on inactive button: transforms to website dark slate hover with white text */
.elementor-kit-9 button.ccf-filter-btn:hover,
.ccf-online-exhibition-wrap button.ccf-filter-btn:hover,
button.ccf-filter-btn:hover,
.ccf-filter-btn:hover {
  background: #3F4C51 !important;
  color: #ffffff !important;
  border-color: #3F4C51 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(63, 76, 81, 0.22) !important;
}

.elementor-kit-9 button.ccf-filter-btn:hover svg,
.ccf-filter-btn:hover svg {
  color: #FDD900 !important;
}

.elementor-kit-9 button.ccf-filter-btn:hover .ccf-count-badge,
.ccf-filter-btn:hover .ccf-count-badge {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Active Filter Button: The Website's Signature Yellow Pill Button */
.elementor-kit-9 button.ccf-filter-btn.active,
.ccf-online-exhibition-wrap button.ccf-filter-btn.active,
button.ccf-filter-btn.active,
.ccf-filter-btn.active {
  background: #FDD900 !important;
  color: #3F4C51 !important;
  border-color: #FDD900 !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 14px rgba(253, 217, 0, 0.45) !important;
  transform: translateY(-2px) !important;
}

.elementor-kit-9 button.ccf-filter-btn.active svg,
.ccf-filter-btn.active svg {
  color: #3F4C51 !important;
}

.elementor-kit-9 button.ccf-filter-btn.active .ccf-count-badge,
.ccf-filter-btn.active .ccf-count-badge {
  background: #3F4C51 !important;
  color: #ffffff !important;
}

/* Hover on active button: smooth dark inversion just like the site's buttons */
.elementor-kit-9 button.ccf-filter-btn.active:hover,
.ccf-online-exhibition-wrap button.ccf-filter-btn.active:hover,
button.ccf-filter-btn.active:hover,
.ccf-filter-btn.active:hover {
  background: #3F4C51 !important;
  color: #ffffff !important;
  border-color: #3F4C51 !important;
  box-shadow: 0 10px 24px rgba(63, 76, 81, 0.25) !important;
}

.elementor-kit-9 button.ccf-filter-btn.active:hover svg,
.ccf-filter-btn.active:hover svg {
  color: #FDD900 !important;
}

.elementor-kit-9 button.ccf-filter-btn.active:hover .ccf-count-badge,
.ccf-filter-btn.active:hover .ccf-count-badge {
  background: #FDD900 !important;
  color: #3F4C51 !important;
}

/* Count Badge */
.ccf-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F5EFEB !important;
  color: #3F4C51 !important;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 50px !important;
  padding: 0 7px !important;
  transition: all 0.3s ease !important;
}

/* Search Bar (Matching Website Style) */
.ccf-search-wrapper {
  position: relative;
  min-width: 280px;
}

.ccf-search-icon {
  position: absolute;
  left: 16px;
  top: 22px;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

#ccf-story-search {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #E6D6C7;
  border-radius: 50px;
  padding: 11px 38px 11px 44px;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: #3F4C51;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

#ccf-story-search:focus {
  border-color: #FDD900;
  box-shadow: 0 0 0 3px rgba(253, 217, 0, 0.3);
}

#ccf-search-clear {
  position: absolute;
  right: 14px;
  top: 22px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  display: none;
  padding: 0;
  line-height: 1;
}

#ccf-search-clear:hover {
  color: #3F4C51;
}

#ccf-search-empty .ccf-btn.ccf-btn-secondary {
    background-color: #fdd900;
    margin-top: 20px;
    border: none;
    font-weight: 600;
}
#ccf-search-empty .ccf-btn.ccf-btn-secondary:hover {
    background-color: #3f4c51;
    color: white !important;
}
.ccf-search-error-msg {
  display: none;
  color: #DC2626;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 8px;
  padding: 6px 14px;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.08);
  animation: ccfErrorFadeIn 0.25s ease;
}
#ccf-story-search.has-error {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}
@keyframes ccfErrorFadeIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Painted White Card Grid Layout
   -------------------------------------------------------------------------- */
.ccf-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: 30px;
  row-gap: 58px;
  position: relative;
  padding-bottom: 24px;
}

/* The Hope page shortcode always presents its three selected stories together.
   Its parent container is narrower than the full exhibition page, so the
   standard 350px minimum would otherwise place the third card on a new row. */
.ccf-hope-exhibition-wrap .ccf-exhibition-section {
  max-width: none;
  padding-bottom: 20px;
}

/* Home page special 4-column section (#home-four-item) */
#home-four-item .ccf-stories-grid,
.home-four-item .ccf-stories-grid,
[id*="home-four-item"] .ccf-stories-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  column-gap: 20px;
  row-gap: 58px;
}

@media (max-width: 1200px) and (min-width: 992px) {
  #home-four-item .ccf-stories-grid,
  .home-four-item .ccf-stories-grid,
  [id*="home-four-item"] .ccf-stories-grid {
    column-gap: 15px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  #home-four-item .ccf-stories-grid,
  .home-four-item .ccf-stories-grid,
  [id*="home-four-item"] .ccf-stories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 20px;
    row-gap: 52px;
  }
}

@media (max-width: 767px) {
  .ccf-hope-exhibition-wrap .ccf-stories-grid,
  #home-four-item .ccf-stories-grid,
  .home-four-item .ccf-stories-grid,
  [id*="home-four-item"] .ccf-stories-grid {
    grid-template-columns: 1fr !important;
    row-gap: 40px;
  }
	button.ccf-modal-nav, .ccf-online-exhibition-wrap button.ccf-modal-nav, button.ccf-modal-nav, .ccf-modal-nav {
		top: 25% !important;
	}
}

/* Card Container */
.ccf-story-card.ccf-card-painted-white {
  background-color: #ffffff;
  border-radius: var(--ccf-card-radius);
  border: 1.5px solid #F0E8DC;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 28px -6px rgba(63, 76, 81, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Subtle modern train carriage top panel accent */
.ccf-story-card.ccf-train-carriage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 3px;
  background: linear-gradient(90deg, #FDD900 0%, #FFC714 50%, #FDD900 100%);
  border-radius: 0 0 3px 3px;
  z-index: 3;
  pointer-events: none;
}

.ccf-story-card.ccf-card-painted-white:hover {
  box-shadow: 0 20px 42px -10px rgba(253, 217, 0, 0.28), 0 8px 18px -4px rgba(63, 76, 81, 0.08);
  border-color: #FFC714;
}

/* --------------------------------------------------------------------------
   Card Background Art (Removed per request)
   -------------------------------------------------------------------------- */
.ccf-card-bg-artwork {
  display: none !important;
}

/* Soft Canvas Painterly Grain & Warm Vignette */
.ccf-card-bg-grain {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, rgba(255, 235, 170, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 0% 0%, rgba(255, 252, 245, 0.85) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
  border-radius: var(--ccf-card-radius);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Framed Story Photo Box (Carriage Window)
   -------------------------------------------------------------------------- */
.ccf-card-frame {
  position: relative;
  z-index: 2;
  padding: 16px 16px 0;
}

.ccf-card-photo-box {
  position: relative;
  width: 100%;
  padding-top: 65%;
  /* 3:2 landscape painting format */
  border-radius: 16px;
  overflow: hidden;
  background-color: #f8fafc;
  box-shadow: 0 4px 14px -2px rgba(63, 76, 81, 0.08);
  border: 2px solid #F0E8DC;
  transition: border-color 0.35s ease;
}

.ccf-story-card:hover .ccf-card-photo-box {
  border-color: #E2D7C8;
}

/* Delicate diagonal glass reflection sheen */
.ccf-card-photo-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 28%, transparent 30%);
  pointer-events: none;
  z-index: 2;
  border-radius: 14px;
}

.ccf-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
height: 100% !important;
  object-fit: cover;
  transition: opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1), transform 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Before Image (Default state) */
.ccf-card-img.ccf-img-before {
  opacity: 1;
  z-index: 1;
  transform: scale(1);
}

/* After Image (Hidden by default, ready for hover crossfade) */
.ccf-card-img.ccf-img-after {
  opacity: 0;
  z-index: 2;
  transform: scale(1.04);
}

/* Default hover on cards without after image */
.ccf-story-card.ccf-card-painted-white:hover .ccf-card-photo-box:not(.has-hover-reveal) .ccf-card-img {
  transform: scale(1.06);
}

/* Before & After Hover Crossfade Interaction */
.ccf-story-card.ccf-card-painted-white:hover .ccf-card-photo-box.has-hover-reveal .ccf-img-before {
  opacity: 0;
  transform: scale(1.04);
}

.ccf-story-card.ccf-card-painted-white:hover .ccf-card-photo-box.has-hover-reveal .ccf-img-after {
  opacity: 1;
  transform: scale(1);
}

.ccf-card-placeholder-art {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
}

/* Floating Category Tag on Photo */
.ccf-card-category-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.94);
  color: #92400e;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   Before & After Transformation Badge on Photo
   -------------------------------------------------------------------------- */
.ccf-card-transformation-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 5px 12px 5px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.ccf-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFC714;
  transition: transform 0.45s ease, color 0.3s ease;
}

.ccf-badge-state-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 15px;
  line-height: 15px;
}

.ccf-badge-state {
  display: block;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s ease;
}

.ccf-badge-state.ccf-state-before {
  transform: translateY(0);
  opacity: 1;
  color: #f8fafc;
}

.ccf-badge-state.ccf-state-after {
  transform: translateY(15px);
  opacity: 0;
  color: #1c1917;
  font-weight: 800;
}

/* Badge active state on card hover */
.ccf-story-card.ccf-card-painted-white:hover .ccf-card-transformation-badge {
  background: #FFC714;
  border-color: #FDD900;
  box-shadow: 0 6px 18px rgba(255, 199, 20, 0.5);
  transform: scale(1.05);
}

.ccf-story-card.ccf-card-painted-white:hover .ccf-badge-icon {
  color: #1c1917;
  transform: rotate(180deg);
}

.ccf-story-card.ccf-card-painted-white:hover .ccf-badge-state.ccf-state-before {
  transform: translateY(-15px);
  opacity: 0;
}

.ccf-story-card.ccf-card-painted-white:hover .ccf-badge-state.ccf-state-after {
  transform: translateY(-15px);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Card Body Content (White Painted Surface)
   -------------------------------------------------------------------------- */
.ccf-card-body {
  position: relative;
  z-index: 2;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Diagnosis / Role Subtitle */
.ccf-card-subtitle {
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #d97706;
  /* warm amber */
  margin-bottom: 6px;
  line-height: 1.3;
}

/* Story Title (Survivor Name) */
.ccf-card-title {
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--ccf-dark-slate);
  margin: 0 0 10px;
  line-height: 1.3;
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
}

.ccf-story-card.ccf-card-painted-white:hover .ccf-card-title {
  color: #b45309;
}

/* Short Story Excerpt */
.ccf-card-excerpt {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ccf-text-muted);
  margin: 0 0 18px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card Footer */
.ccf-card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(226, 232, 240, 0.9);
}

/* Handcrafted Yellow Action Button matching Home Page */
.ccf-card-button {
  background: var(--ccf-yellow-btn);
  color: #1c1917;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 22px;
  border-radius: 50px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 8px rgba(253, 217, 0, 0.35);
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.ccf-story-card.ccf-card-painted-white:hover .ccf-card-button {
  background: #FFC714;
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(255, 199, 20, 0.55);
}

.ccf-btn-arrow {
  transition: transform 0.3s ease;
}

.ccf-story-card.ccf-card-painted-white:hover .ccf-btn-arrow {
  transform: translateX(4px);
}

/* Empty State */
.ccf-no-stories,
.ccf-search-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
  border-radius: var(--ccf-card-radius);
  border: 2px dashed #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.ccf-no-stories-icon,
.ccf-empty-icon {
  font-size: 44px;
  margin-bottom: 12px;
}

.ccf-no-stories h3,
.ccf-search-empty-state h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ccf-dark-slate);
  margin-bottom: 8px;
}

.ccf-no-stories p,
.ccf-search-empty-state p {
  color: var(--ccf-text-muted);
  max-width: 500px;
  margin: 0 auto;
}

/* Generic Button */
.ccf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 9999px;
  text-decoration: none !important;
  cursor: pointer;
  transition: var(--ccf-transition);
  border: 2px solid transparent;
}

.ccf-btn-primary {
  background-color: var(--ccf-yellow-btn);
  color: #1c1917 !important;
  box-shadow: 0 4px 14px rgba(253, 217, 0, 0.4);
}

.ccf-btn-primary:hover {
  background-color: var(--ccf-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 199, 20, 0.5);
}

.ccf-btn-secondary {
  background-color: #f1f5f9;
  color: var(--ccf-dark-slate) !important;
  border-color: #cbd5e1;
}

.ccf-btn-secondary:hover {
  background-color: #e2e8f0;
}

/* --------------------------------------------------------------------------
   Enlarged Story Modal (Painted White Canvas Lightbox)
   -------------------------------------------------------------------------- */
.ccf-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

.ccf-modal.is-open {
  opacity: 1;
  visibility: visible;
  display: flex !important;
}

/* Warm Dark Backdrop - completely covers site header */
.ccf-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 1 !important;
}

/* Modal Outer Container: Holds the stationary close button and the scrolling dialog */
.ccf-modal-container {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 860px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  transform: scale(0.94) translateY(18px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ccf-modal.is-open .ccf-modal-container {
  transform: scale(1) translateY(0);
}

/* Modal Close Button: Stationed on the outer container & never scrolls away */
button.ccf-modal-close,
.ccf-online-exhibition-wrap button.ccf-modal-close,
button.ccf-modal-close,
.ccf-modal-close {
  position: absolute !important;
  top: -16px !important;
  right: -16px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #ffffff63 !important;
  color: #3F4C51 !important;
  border: 2px solid #E6D6C7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  padding: 0 !important;
  outline: none !important;
}

.elementor-kit-9 button.ccf-modal-close:hover,
.ccf-online-exhibition-wrap button.ccf-modal-close:hover,
button.ccf-modal-close:hover,
.ccf-modal-close:hover {
  background: #FDD900 !important;
  color: #3F4C51 !important;
  border-color: #FDD900 !important;
  transform: rotate(90deg) scale(1.1) !important;
  box-shadow: 0 10px 28px rgba(253, 217, 0, 0.55) !important;
}

/* Modal Dialog Box: Painted White Art Canvas */
.ccf-modal-dialog {
  position: relative;
  width: 100%;
  max-height: 90vh;
  background-color: #ffffff;
  border: 1.5px solid #f1ece4;
  border-radius: 26px;
  box-shadow: 0 25px 70px -12px rgba(63, 76, 81, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #E6D6C7 #FAF6F0;
}

.ccf-modal-dialog::-webkit-scrollbar {
  width: 7px;
}

.ccf-modal-dialog::-webkit-scrollbar-track {
  background: #FAF6F0;
}

.ccf-modal-dialog::-webkit-scrollbar-thumb {
  background-color: #E6D6C7;
  border-radius: 10px;
}

.ccf-modal-content {
  position: relative;
  width: 100%;
}

/* Painted Home Page Background Artwork Layer in Modal */
.ccf-modal-bg-artwork {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 480px;
  height: 380px;
  background-size: contain;
  background-position: bottom right;
  background-repeat: no-repeat;
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  transition: opacity 0.5s ease;
}

.ccf-modal-bg-grain {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, rgba(253, 217, 0, 0.06) 0%, transparent 60%),
    radial-gradient(circle at 0% 0%, rgba(255, 248, 235, 0.7) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Prev / Next Navigation Controls: Floating circular pills on screen edges */
.elementor-kit-9 button.ccf-modal-nav,
.ccf-online-exhibition-wrap button.ccf-modal-nav,
button.ccf-modal-nav,
.ccf-modal-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #ffffff42 !important;
  color: #3F4C51 !important;
  border: 1.5px solid #E6D6C7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  padding: 0 !important;
  outline: none !important;
}

.ccf-nav-prev {
  left: 32px !important;
}

.ccf-nav-next {
  right: 32px !important;
}

.elementor-kit-9 button.ccf-modal-nav:hover,
.ccf-online-exhibition-wrap button.ccf-modal-nav:hover,
button.ccf-modal-nav:hover,
.ccf-modal-nav:hover {
  background: #FDD900 !important;
  color: #3F4C51 !important;
  border-color: #FDD900 !important;
  transform: translateY(-50%) scale(1.12) !important;
  box-shadow: 0 12px 30px rgba(253, 217, 0, 0.55) !important;
}

/* Modal Media Area: Framed top container */
.ccf-modal-media {
  position: relative;
  z-index: 2;
  width: 100%;
  background: #1e293b;
  min-height: 280px;
  max-height: 480px;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

.ccf-modal-media img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  display: block;
  transition: opacity 0.3s ease;
}

/* Modal Before/After Treatment Image Switcher Pill */
.ccf-modal-compare-nav {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.ccf-compare-btn {
  background: transparent !important;
  color: #e2e8f0 !important;
  border: none !important;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  line-height: 1.2 !important;
  outline: none !important;
}

.ccf-compare-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.ccf-compare-btn.active {
  background: #FDD900 !important;
  color: #1c1917 !important;
  font-weight: 750 !important;
  box-shadow: 0 2px 8px rgba(253, 217, 0, 0.45) !important;
}

/* Photo Thumbnails Switcher Strip */
.ccf-modal-thumbs {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
  padding: 14px 32px;
  background: #FAF6F0;
  border-bottom: 1.5px solid #EFE6DA;
  overflow-x: auto;
}

.ccf-thumb-item {
  position: relative;
  width: 72px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #E6D6C7;
  flex-shrink: 0;
  transition: all 0.3s ease;
  opacity: 0.75;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ccf-thumb-item.active,
.ccf-thumb-item:hover {
  border-color: #FDD900;
  opacity: 1;
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(253, 217, 0, 0.4);
}

.ccf-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ccf-thumb-label {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  border-radius: 4px;
  padding: 1px 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Modal Body */
.ccf-modal-body {
  position: relative;
  z-index: 2;
  padding: 34px 40px 38px;
}

.ccf-modal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Modal Category Tag (Matching Card Pill Tag) */
.ccf-modal-category {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: #3F4C51;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 5px 14px;
  border-radius: 50px;
  border: 1.2px solid #E6D6C7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ccf-modal-subtitle {
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #c2410c;
  text-transform: uppercase;
}

.ccf-modal-title {
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.22;
  color: #3F4C51;
  margin: 0 0 20px;
  letter-spacing: -0.2px;
}

/* Modal Pull Quote: Painted Art Callout */
.ccf-modal-quote {
  position: relative;
  background: #FFFDF5;
  border-left: 4px solid #FDD900;
  border-top: 1.5px solid #FAF0D7;
  border-right: 1.5px solid #FAF0D7;
  border-bottom: 1.5px solid #FAF0D7;
  border-radius: 0 16px 16px 0;
  padding: 18px 44px 18px 44px;
  margin: 22px 0 26px;
  box-shadow: 0 4px 14px rgba(253, 217, 0, 0.08);
}

.ccf-quote-icon {
  position: absolute;
  top: 6px;
  left: 14px;
  font-size: 40px;
  line-height: 1;
  color: #FDD900;
  font-family: Georgia, serif;
  user-select: none;
  pointer-events: none;
}

.ccf-quote-icon.ccf-quote-close {
  top: auto;
  bottom: 4px;
  right: 14px;
  left: auto;
  line-height: 0.8;
}

.ccf-modal-quote p {
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15.5px;
  font-style: italic;
  font-weight: 500;
  color: #3F4C51;
  line-height: 1.6;
  margin: 0;
}

/* Modal Full Narrative Text */
.ccf-modal-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 32px;
}

.ccf-modal-text p {
  margin-bottom: 16px;
}

.ccf-modal-text h3,
.ccf-modal-text h4 {
  font-family: 'Fredoka', sans-serif;
  color: #3F4C51;
  font-weight: 600;
  margin: 20px 0 10px;
}

/* Modal Actions Footer */
.ccf-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
  border-top: 1.5px solid #F0E8DC;
}

.ccf-modal-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.ccf-modal-footer-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.elementor-kit-9 button.ccf-footer-nav-btn,
.ccf-online-exhibition-wrap button.ccf-footer-nav-btn,
button.ccf-footer-nav-btn,
.ccf-footer-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FAF6F0 !important;
  color: #3F4C51 !important;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
  border: 1.5px solid #E6D6C7 !important;
  padding: 11px 20px !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.elementor-kit-9 button.ccf-footer-nav-btn:hover,
.ccf-online-exhibition-wrap button.ccf-footer-nav-btn:hover,
button.ccf-footer-nav-btn:hover,
.ccf-footer-nav-btn:hover {
  background: #FDD900 !important;
  color: #3F4C51 !important;
  border-color: #FDD900 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(253, 217, 0, 0.38) !important;
}

.elementor-kit-9 button.ccf-footer-nav-btn svg,
button.ccf-footer-nav-btn svg {
  color: #3F4C51 !important;
  transition: transform 0.3s ease !important;
}

.elementor-kit-9 button.ccf-footer-prev:hover svg,
button.ccf-footer-prev:hover svg {
  transform: translateX(-3px) !important;
}

.elementor-kit-9 button.ccf-footer-next:hover svg,
button.ccf-footer-next:hover svg {
  transform: translateX(3px) !important;
}

/* Primary Modal CTA (Support This Journey): The Website's Signature Yellow Pill Button */
.elementor-kit-9 #ccf-modal-cta,
.ccf-online-exhibition-wrap #ccf-modal-cta,
#ccf-modal-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FDD900 !important;
  color: #3F4C51 !important;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
  border: 1.5px solid #FDD900 !important;
  padding: 12px 28px !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(253, 217, 0, 0.45) !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  text-decoration: none !important;
}

.elementor-kit-9 #ccf-modal-cta svg,
#ccf-modal-cta svg {
  color: #3F4C51 !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.elementor-kit-9 #ccf-modal-cta:hover,
.ccf-online-exhibition-wrap #ccf-modal-cta:hover,
#ccf-modal-cta:hover {
  background: #3F4C51 !important;
  color: #ffffff !important;
  border-color: #3F4C51 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(63, 76, 81, 0.25) !important;
}

.elementor-kit-9 #ccf-modal-cta:hover svg,
#ccf-modal-cta:hover svg {
  color: #FDD900 !important;
  transform: scale(1.15) !important;
}

/* Secondary Modal Share Button: Clean Website Pill Button */
.elementor-kit-9 button#ccf-modal-share-btn,
.ccf-online-exhibition-wrap button#ccf-modal-share-btn,
button#ccf-modal-share-btn,
#ccf-modal-share-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  color: #3F4C51 !important;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
  border: 1.5px solid #E6D6C7 !important;
  padding: 12px 24px !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  outline: none !important;
}

.elementor-kit-9 button#ccf-modal-share-btn svg,
#ccf-modal-share-btn svg {
  color: #FDD900 !important;
  transition: color 0.3s ease !important;
}

.elementor-kit-9 button#ccf-modal-share-btn:hover,
.ccf-online-exhibition-wrap button#ccf-modal-share-btn:hover,
button#ccf-modal-share-btn:hover,
#ccf-modal-share-btn:hover {
  background: #3F4C51 !important;
  color: #ffffff !important;
  border-color: #3F4C51 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(63, 76, 81, 0.22) !important;
}

.elementor-kit-9 button#ccf-modal-share-btn:hover svg,
#ccf-modal-share-btn:hover svg {
  color: #FDD900 !important;
}

/* Link Copied Notification */
#ccf-share-copied {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #3F4C51 !important;
  background: #FEF3C7 !important;
  border: 1.5px solid #FDD900 !important;
  padding: 7px 16px !important;
  border-radius: 50px !important;
  box-shadow: 0 2px 8px rgba(253, 217, 0, 0.25) !important;
  animation: ccfFadeIn 0.25s ease !important;
}

@keyframes ccfFadeIn {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------.ccf-exhibition-section 
   Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .ccf-modal-nav {
    display: none !important;
  }

  .ccf-modal-close {
    top: -12px !important;
    right: 6px !important;
  }
}

@media (max-width: 640px) {
  .ccf-stories-grid {
    grid-template-columns: 1fr;
    row-gap: 46px;
    column-gap: 24px;
  }

  .ccf-gallery-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .ccf-search-wrapper {
    width: 100%;
    min-width: unset;
  }

  .ccf-modal {
    padding: 10px;
  }

  .ccf-modal-body {
    padding: 22px 18px 24px;
  }

  .ccf-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   CCF Hope Train Carriage Elements: Connectors, Wheels & Track
   Clean, warm, modern, child-focused styling matching the homepage
   ========================================================================== */

/* 1. Subtle Train Carriage Connector (Desktop Links Adjacent Cards) */
.ccf-carriage-connector {
  position: absolute;
  right: -26px;
  top: 58%;
  width: 30px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

#stories .ccf-carriage-connector {
  right: -31px;
}

.ccf-connector-bar {
  width: 24px;
  height: 3px;
  background: #E2D7C8;
  border-radius: 2px;
  position: relative;
}

#stories .ccf-connector-bar {
  width: 32px;
}

/* Connector sizing for 4-column section (#home-four-item) */
#home-four-item .ccf-carriage-connector,
.home-four-item .ccf-carriage-connector,
[id*="home-four-item"] .ccf-carriage-connector {
  right: -20px;
  width: 20px;
}

#home-four-item .ccf-connector-bar,
.home-four-item .ccf-connector-bar,
[id*="home-four-item"] .ccf-connector-bar {
  width: 14px;
}

@media (max-width: 1200px) and (min-width: 992px) {
  #home-four-item .ccf-carriage-connector,
  .home-four-item .ccf-carriage-connector,
  [id*="home-four-item"] .ccf-carriage-connector {
    right: -15px;
    width: 15px;
  }
  #home-four-item .ccf-connector-bar,
  .home-four-item .ccf-connector-bar,
  [id*="home-four-item"] .ccf-connector-bar {
    width: 11px;
  }
}

.ccf-connector-bar::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3F4C51;
  border: 1.5px solid #FFC714;
  box-shadow: 0 1px 3px rgba(63, 76, 81, 0.2);
}

/* Connectors are hidden on the last card in each row on desktop */
@media (min-width: 992px) {
  /* Default 3-column rows and #stories: hide connector on every 3rd card */
  .ccf-stories-grid > .ccf-story-card:nth-child(3n) .ccf-carriage-connector {
    display: none;
  }

  /* 4-column section (#home-four-item):
     Card 3 connects to Card 4, so override 3n and keep connector visible */
  #home-four-item .ccf-stories-grid > .ccf-story-card:nth-child(3n) .ccf-carriage-connector,
  .home-four-item .ccf-stories-grid > .ccf-story-card:nth-child(3n) .ccf-carriage-connector,
  [id*="home-four-item"] .ccf-stories-grid > .ccf-story-card:nth-child(3n) .ccf-carriage-connector {
    display: flex !important;
  }

  /* 4-column section (#home-four-item):
     Hide connector on the 4th card (every 4n / last card in 4-column row) */
  #home-four-item .ccf-stories-grid > .ccf-story-card:nth-child(4n) .ccf-carriage-connector,
  .home-four-item .ccf-stories-grid > .ccf-story-card:nth-child(4n) .ccf-carriage-connector,
  [id*="home-four-item"] .ccf-stories-grid > .ccf-story-card:nth-child(4n) .ccf-carriage-connector {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ccf-stories-grid > .ccf-story-card:nth-child(2n) .ccf-carriage-connector {
    display: none;
  }

  #home-four-item .ccf-stories-grid > .ccf-story-card:nth-child(2n) .ccf-carriage-connector,
  .home-four-item .ccf-stories-grid > .ccf-story-card:nth-child(2n) .ccf-carriage-connector,
  [id*="home-four-item"] .ccf-stories-grid > .ccf-story-card:nth-child(2n) .ccf-carriage-connector {
    display: none !important;
  }

  #home-four-item .ccf-stories-grid > .ccf-story-card:nth-child(2n+1) .ccf-carriage-connector,
  .home-four-item .ccf-stories-grid > .ccf-story-card:nth-child(2n+1) .ccf-carriage-connector,
  [id*="home-four-item"] .ccf-stories-grid > .ccf-story-card:nth-child(2n+1) .ccf-carriage-connector {
    display: flex !important;
    right: -20px;
    width: 20px;
  }
}

.ccf-stories-grid > .ccf-story-card:last-child .ccf-carriage-connector {
  display: none !important;
}

/* 2. Decorative Wheels & Track Beneath Each Card */
.ccf-carriage-undercarriage {
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 2;
}

/* Wheels Pair */
.ccf-carriage-wheels {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Connecting Axle between wheels */
.ccf-carriage-axle {
  position: absolute;
  left: calc(18% + 12px);
  right: calc(18% + 12px);
  top: 50%;
  transform: translateY(-50%);
  height: 2.5px;
  background: #E6D6C7;
  border-radius: 2px;
  z-index: 1;
}

/* Small, graphic decorative train wheel */
.ccf-carriage-wheel {
  position: absolute;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #3F4C51;
  /* Dark navy / charcoal */
  box-shadow: 0 2px 6px rgba(63, 76, 81, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.ccf-carriage-wheel.ccf-wheel-left {
  left: 18%;
}

.ccf-carriage-wheel.ccf-wheel-right {
  right: 18%;
}

/* Wheel Center Hub (Soft yellow / muted gold) */
.ccf-wheel-hub {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFC714;
  border: 1.5px solid #3F4C51;
  display: block;
}

/* Subtle Wheel Rotation on Card Hover */
.ccf-story-card:hover .ccf-carriage-wheel {
  transform: rotate(25deg);
}

/* 3. Subtle Decorative Railway Track (Soft beige / muted gold / pale grey) */
.ccf-carriage-track {
  position: absolute;
  bottom: -4px;
  left: -16px;
  right: -16px;
  height: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  z-index: 0;
}

.ccf-track-rail-top {
  width: 100%;
  height: 2px;
  background: #E2D7C8;
  border-radius: 1px;
}

.ccf-track-ties {
  width: 100%;
  height: 4px;
  background: repeating-linear-gradient(90deg,
      #EADFCF 0px,
      #EADFCF 4px,
      transparent 4px,
      transparent 22px);
  opacity: 0.85;
}

.ccf-track-rail-bottom {
  width: 100%;
  height: 2px;
  background: #E8DFC8;
  border-radius: 1px;
}

@media (max-width:1200px) {
  .ccf-exhibition-container .ccf-card-body {
    padding: 18px 18px 18px;
  }

  .ccf-hope-exhibition-wrap .ccf-stories-grid {
    column-gap: 15px;
  }

  .ccf-carriage-connector {
    right: -22px;
    width: 28px;
  }

  .ccf-connector-bar {
    width: 18px;
  }

  .ccf-connector-bar::after {
    width: 5px;
    height: 5px;
  }
}

/* 4. Responsive Rules */
@media (max-width: 991px) {
  .ccf-stories-grid {
    row-gap: 52px;
  }
}

@media (max-width: 767px) {
  .ccf-carriage-connector {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .ccf-carriage-track {
    display: none !important;
  }

  .ccf-carriage-wheel.ccf-wheel-left {
    left: 22%;
  }

  .ccf-carriage-wheel.ccf-wheel-right {
    right: 22%;
  }
}