/* ===== DCM Learning – Hub Sections (shared CSS for On-Demand, Bite-size, Wellness) ===== */
/* Theme knobs (you can override per-section via data-theme) */
:root{
  --dcm-primary: #0E1031;
  --dcm-secondary: #020423;
  --dcm-navy: #0C2139;
  --dcm-accent: #d02033;      /* CTA red */
  --panel-bg: #1E2D45;        /* booking panel */
  --bg-soft: #EEF7FF;         /* includes card bg */
  --bg-soft-border: #D9EAFB;  /* includes card border */
  --border: #e6edf3;          /* subtle border */
  --text: #111;
  --muted: #555;

  /* "Explore All" pill color – default blue; override with data-theme */
  --viewall: #12aaec;
}
/* Set per-section colors using data-theme (optional) */
.popular-section[data-theme="red"]  { --viewall:#d02033; }
.popular-section[data-theme="blue"] { --viewall:#12aaec; }

/* ===== Section & typography ===== */
.popular-section{
  background:#fff; color:var(--text);
  padding:60px 20px 80px; font-family:'Poppins',sans-serif;
}
.popular-inner{ max-width:1170px; margin:0 auto; }
.popular-title{ font-size:2.2rem; text-align:center; margin:0 0 16px; }
.popular-subheading{
  font-size:1.125rem; line-height:1.5; max-width:800px; margin:0 auto 1.5rem;
  text-align:center; color:var(--muted);
}
@media (max-width:768px){
  .popular-title{ font-size:28px; }
  .popular-subheading{ font-size:1rem; }
}

/* ===== Filter pills ===== */
.filters{
  display:flex; gap:1rem; align-items:center; justify-content:center;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:8px; margin-bottom:24px; white-space:nowrap;
}
.filters::-webkit-scrollbar{ display:none; }
.filter-pill{
  flex-shrink:0; white-space:nowrap; cursor:pointer;
  padding:8px 20px; border:2px solid #cbd6e2; border-radius:999px;
  font-weight:500; background:#f2f5f9; color:var(--dcm-navy); text-decoration:none; transition:.2s;
}
.filter-pill:hover,
.filter-pill.active{ background:var(--dcm-navy); border-color:var(--dcm-navy); color:#fff; }

/* "Explore All" pill – themed via --viewall */
.popular-section .view-all-pill{
  flex-shrink:0; white-space:nowrap; padding:8px 20px;
  border:2px solid var(--viewall); border-radius:999px;
  background:var(--viewall); color:#fff; font-weight:500; font-size:.95rem; line-height:1;
  text-decoration:none; transition:.2s;
}
.view-all-pill:hover{ filter:brightness(.95); }
.view-all-pill:focus-visible{ outline:3px solid rgba(208,32,51,.35); outline-offset:2px; }

/* Mobile: collapse long filter lists – show only "Explore All" */
@media (max-width:768px){
  .popular-section .filter-pill{ display:none !important; }
  .popular-section .view-all-pill{ display:inline-flex !important; }
}

/* ===== Card grid & cards ===== */
.class-card-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:60px 20px;
}
@media (max-width:992px){ .class-card-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

.class-card-link{ display:flex; flex-direction:column; position:relative; color:inherit; cursor:pointer; }
.class-card{
  background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 4px 8px rgba(0,0,0,.2);
  display:flex; flex-direction:column; transition:.3s; flex:1;
}
.class-card:hover{ box-shadow:0 6px 12px rgba(0,0,0,.25); }

.class-card-image{ position:relative; width:100%; padding-top:56.25%; }
@media (min-width:993px){ .class-card-image{ padding-top:42%; } }
.class-card-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.class-card-badge{
  position:absolute; top:10px; left:10px; background:var(--dcm-accent); color:#fff;
  padding:6px 12px; border-radius:20px; font-size:.8rem; font-weight:500; z-index:1;
}

.class-card-content{ padding:16px; display:flex; flex-direction:column; flex:1; }
.class-card-content h3{ margin:0 0 6px; font-size:1.1rem; line-height:1.3; font-weight:600; }
.class-card-excerpt{
  margin:0 0 10px; font-size:.95rem; line-height:1.5; color:#344054;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:480px){ .class-card-excerpt{ -webkit-line-clamp:2; } }
@media (max-width:640px){ .class-card-excerpt{ display:none !important; } }
.class-card-subtitle{ margin-top:auto; font-size:.8rem; color:#d02033; font-weight:300; }

/* NEW: Meta row under title (the missing bit causing huge icons) */
.class-card-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:.85rem; color:#d02033; margin:6px 0 10px; font-weight:600;
}
.class-card-meta .meta-item{ display:flex; align-items:center; gap:6px; }
.class-card-meta img.icon{ width:16px; height:16px; flex-shrink:0; display:inline-block; }
@media (max-width:640px){ .class-card-meta .meta-item{ display:none !important; } }

/* Overlay data stays hidden; JS reads from it */
.class-card-overlay{ display:none !important; }

/* ===== Results meta line ===== */
.results-meta{
  display:flex; gap:8px; align-items:baseline; justify-content:center;
  margin:40px 0 0; font-size:.95rem; color:var(--dcm-navy);
}
.results-meta .meta-strong{ font-weight:700; }
.results-meta a{
  color:var(--dcm-accent); font-weight:600; text-decoration:none; border-bottom:1px dotted currentColor;
}
.results-meta a:hover{ opacity:.85; }

/* ===== Modal (popup) ===== */
.modal-open{ overflow:hidden; }
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0);
  display:none; align-items:flex-start; justify-content:center;
  padding:24px; z-index:10000;
}
.modal-backdrop.show{ display:flex; animation:backdropFadeIn .3s ease forwards; }
@keyframes backdropFadeIn{ from{ background:rgba(0,0,0,0);} to{ background:rgba(0,0,0,.45);} }

.modal{
  background:#fff; width:min(1020px, 100%); border-radius:14px;
  padding:28px 28px 22px; margin-top:15vh; box-shadow:0 20px 40px rgba(0,0,0,.25); position:relative;
  transform:translateY(40vh) scale(.985); opacity:0;
  max-height:calc(100vh - 48px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.modal-backdrop.show .modal{ animation:slideUpIn .38s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes slideUpIn{ from{ transform:translateY(40vh) scale(.985); opacity:0;} to{ transform:translateY(0) scale(1); opacity:1;} }
@media (prefers-reduced-motion:reduce){
  .modal-backdrop.show{ animation:none; background:rgba(0,0,0,.45); }
  .modal-backdrop.show .modal{ animation:none; transform:translateY(0) scale(1); opacity:1; }
}

.modal-close{
  position:absolute; top:-36px; right:-36px; width:56px; height:56px;
  border:0; border-radius:999px; background:transparent; color:#fff;
  font-size:32px; line-height:1; cursor:pointer; text-shadow:0 2px 4px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
}
.modal-close:focus-visible{ outline:3px solid rgba(255,255,255,.7); outline-offset:2px; }
@media (max-width:640px){
  .modal{ margin-top:0 !important; width:calc(100% - 24px); border-radius:14px;
          max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px)); }
  .modal-close{
    top:8px !important; right:8px !important; width:44px; height:44px;
    background:rgba(255,255,255,.95); color:#333; text-shadow:none; box-shadow:0 2px 8px rgba(0,0,0,.15);
  }
}

/* ===== Modal content layout ===== */
.course-modal{ display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:start; }
@media (max-width:960px){ .course-modal{ grid-template-columns:1fr; gap:14px; } }

.cm-topline{ display:flex; align-items:center; gap:20px; margin-bottom:14px; }
.cm-badge{ display:inline-block; background:#12aaec; color:#fff; padding:10px 15px; border-radius:8px; font-weight:500; font-size:.9rem; }
.cm-updated{ color:#555; font-weight:600; font-size:.9rem; }
.cm-title{ margin:0 0 16px; font-size:clamp(24px, 4vw, 46px); line-height:1.1; font-weight:800; color:#333; }

/* Paragraphs sourced from overlay */
.modal-content .overlay-desc{
  margin:0 0 14px; font-size:1.1rem; line-height:1.5; color:#333;
}
/* Mobile: show only first paragraph; hide subheaders/bullets */
@media (max-width:640px){
  .modal .cm-left .overlay-desc{ display:none !important; }
  .modal .cm-left .overlay-desc:first-of-type{
    display:block !important; margin:8px 0 6px !important; font-size:1rem; line-height:1.45;
  }
  .modal .cm-subheader, .modal .cm-list{ display:none !important; }
}

.cm-subheader{ font-size:1.4rem; font-weight:800; margin:16px 0 14px; color:#333; }
.cm-list{ list-style:none; padding:0; margin:0; }
.cm-list li{
  display:flex; gap:12px; align-items:flex-start; margin:12px 0; font-size:1.05rem; color:#333;
}
.cm-list li::before{
  content:''; width:12px; height:12px; border-radius:50%; background:var(--dcm-accent); margin-top:.45em; flex:0 0 12px;
}

.cm-right{ position:relative; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.cm-image img{ width:100%; height:auto; border-radius:12px; display:block; object-fit:cover; }

/* “This course includes” card */
.cm-sidebar{
  background:var(--bg-soft);
  border:1.5px solid var(--bg-soft-border);
  border-radius:18px; padding:20px 20px 18px;
  box-shadow:0 1px 3px rgba(16,24,40,.06);
}
.cm-sidebar h5{
  margin:0 0 15px; font-size:1.4rem; line-height:1.15; font-weight:700; letter-spacing:-.02em; color:#2b2b2b;
}
.includes{ list-style:none; padding:0; margin:0; }
.includes li{
  display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start;
  margin:10px 0; font-size:1.05rem; line-height:1.35; color:#2b2b2b;
}
.includes img.icon{ width:20px; height:20px; display:inline-block; vertical-align:middle; flex-shrink:0; }

.cm-side-actions{ display:flex; align-items:center; gap:16px; margin-top:14px; }
.book-link{ font-weight:600; text-decoration:none; color:#333; font-size:1rem; }
.book-link:hover{ opacity:.85; }

.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--dcm-accent); color:#fff; border:0; border-radius:8px; padding:16px 24px; font-weight:700; cursor:pointer;
  transition:transform .02s ease, filter .2s ease;
}
.btn-primary:hover{ filter:brightness(.95); }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary:focus-visible{ outline:3px solid rgba(208,32,51,.35); outline-offset:2px; }

/* ===== Booking panel (slides over right column) ===== */
.booking-panel{
  position:absolute; inset:0; background:var(--panel-bg); color:#fff; border-radius:12px;
  padding:20px 20px 18px; transform:translateX(100%); opacity:0;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  display:flex; flex-direction:column; gap:10px; z-index:10;
}
.booking-panel.show{ transform:translateX(0); opacity:1; }
.modal.panel-open{ overflow:hidden; } /* lock modal when panel is open */

.booking-close{
  align-self:flex-end; background:rgba(255,255,255,.12); color:#fff;
  border:2px solid rgba(255,255,255,.7); border-radius:8px; padding:6px 12px; font-weight:700; cursor:pointer;
}
.bp-title{ margin:6px 0 6px; font-size:1.35rem; font-weight:800; }
.bp-sub{ margin:0 0 10px; opacity:.95; }

.booking-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.booking-form .form-field{ display:flex; flex-direction:column; }
.booking-form .form-field label{ font-weight:600; margin-bottom:6px; color:#fff; }
.booking-form input, .booking-form select, .booking-form textarea{
  border:0; border-radius:10px; padding:12px 14px; font:inherit; background:#fff; color:#111;
}
.booking-form textarea{ grid-column:1 / -1; min-height:90px; }
@media (max-width:960px){ .booking-form{ grid-template-columns:1fr; } }

.booking-meta{ display:grid; grid-template-columns:1fr; gap:6px; margin:4px 0 8px; }
.booking-meta-item{ display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:center; font-weight:600; }
.booking-meta-item img.icon{ width:20px; height:20px; }

.booking-actions{ margin-top:auto; display:flex; gap:10px; justify-content:flex-end; }
.btn-light{ background:#fff; color:var(--panel-bg); border:0; border-radius:8px; padding:12px 18px; font-weight:700; cursor:pointer; }
.btn-outline-light{ background:transparent; color:#fff; border:2px solid #fff; border-radius:8px; padding:10px 16px; cursor:pointer; }

.bp-success{ flex:1; display:grid; place-items:center; text-align:center; padding:10px; }
.bp-success h4{ font-size:1.4rem; margin:0 0 8px; }
.bp-success p{ margin:0 0 12px; }

/* Booking panel full-bleed on phones; hide outer X while open */
@media (max-width:640px){
  .cm-right{ position:static !important; }
  .booking-panel{ position:absolute; inset:0; border-radius:14px; padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .modal.panel-open .modal-close{ display:none; }
}

/* ===== Close animations ===== */
.modal-backdrop.closing{ animation:backdropFadeOut .28s ease forwards; }
.modal-backdrop.closing .modal{ animation:slideDownOut .28s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes slideDownOut{ from{ transform:translateY(0) scale(1); opacity:1; } to{ transform:translateY(32px) scale(.985); opacity:0; } }
@keyframes backdropFadeOut{ from{ background:rgba(0,0,0,.45);} to{ background:rgba(0,0,0,0);} }
@media (prefers-reduced-motion:reduce){
  .modal-backdrop.closing, .modal-backdrop.closing .modal{ animation:none !important; }
}

/* Small mobile tweak: hide first two "includes" rows to save space */
@media (max-width:640px){
  .includes li:nth-child(1),
  .includes li:nth-child(2){ display:none !important; }
}

/* Global reduced-motion guard (perf + a11y) */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ===== Optional per-section oddities (leave commented unless needed) ===== */
/* Example: hide a specific pill on On-Demand only */
/* #on-demand .filter-pill[data-category="Soft Skills"]{ display:none !important; } */

/* ===== Hub patches: force hub red where the theme overrides to green ===== */

/* 1) Card "Course Details" link – make red, not theme green */
.popular-section .class-card-content a,
.popular-section .class-card-content p a,
.popular-section .class-card-content a:visited,
.popular-section .class-card-content a:active,
.popular-section .class-card-content a span{
  color:#d02033 !important;
  text-decoration:none;
  font-weight:600;
}
.popular-section .class-card-content a:hover{ opacity:.85; text-decoration:underline; }

/* 2) Modal bullets – red dots */
.modal .cm-list li::before{
  background:#d02033 !important;
}

/* 3) Modal primary CTA (Start Learning) – make red regardless of global .btn rules */
.modal .cm-side-actions .btn-primary,
.modal .cm-side-actions button.start-learning,
.modal .cm-side-actions button,
.modal .cm-side-actions .btn,
.modal .cm-side-actions [type="button"]{
  background:#d02033 !important;
  border-color:#d02033 !important;
  color:#fff !important;
  box-shadow:none !important;
}
.modal .cm-side-actions .btn-primary:hover,
.modal .cm-side-actions button:hover,
.modal .cm-side-actions .btn:hover{ filter:brightness(.95); }

/* 4) Keep desktop close "X" visible (prevents clipping) */
@media (min-width:641px){
  .modal{ overflow:visible !important; max-height:none !important; }
  .modal .modal-content{ max-height:calc(100vh - 48px); overflow-y:auto; }
}

/* ===== Force "Course Details" link to hub red inside cards ===== */
.popular-section .class-card .class-card-content a:not(.btn):not(.button),
.popular-section .class-card .class-card-content a:not(.btn):not(.button):link,
.popular-section .class-card .class-card-content a:not(.btn):not(.button):visited,
.popular-section .class-card .class-card-content p a,
.popular-section .class-card .class-card-content a * {
  color:#d02033 !important;
  text-decoration-color:#d02033 !important;
  font-weight:600;
}

.popular-section .class-card .class-card-content a:hover,
.popular-section .class-card .class-card-content a:focus {
  color:#b61b28 !important;
  text-decoration-color:#b61b28 !important;
  text-decoration:underline;
}

/* ===== Fix: mobile summary should not show on desktop ===== */
@media (min-width: 641px){
  .cm-desc--mobile{ display:none !important; }
}

/* Optional: on phones show only the short summary (avoid duplicate paragraph) */
@media (max-width: 640px){
  .cm-desc--mobile{
    display:block !important;
    margin:8px 0 6px !important;
    font-size:1rem; line-height:1.45;
  }
  .modal .cm-left .overlay-desc{ display:none !important; } /* hide full paragraphs on mobile */
}