/* =========================================================
   Training Resources — L&D Marketplace redesign
   Theme: demo-content (Demo_content/static/css/demo-content.css)
   - Primary blue  #126792 / dark #0a4e7b
   - Accent cyan   #48BEEC
   - Button grad   linear-gradient(90deg,#3bb8e8,#1b6085)
   - Banner grad   linear-gradient(135deg,#0a4e7b,#135d92 40%,#205f97 70%,#2a72c4)
   - Muted slate   #64748b · lines #e2e8f0 · ink #0f172a
   All custom classes are prefixed `tr-` to avoid Bootstrap /
   Tailwind collisions (.card-body, .badge, .tab, ...).
   Old page styles preserved at the bottom for rollback.
   ========================================================= */

:root {
  --tr-blue: #126792;
  --tr-blue-dark: #0a4e7b;
  --tr-blue-soft: #e8f4fb;
  --tr-accent: #48beec;
  --tr-ink: #0f172a;
  --tr-ink-soft: #64748b;
  --tr-line: #e2e8f0;
  --tr-radius: 16px;
  --tr-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --tr-shadow-lg: 0 8px 30px rgba(37, 99, 235, 0.15);
}

body {
  font-family: "Inter", sans-serif;
  background-color: #f8fafc;
  overflow-x: hidden;
}

/* Prevent all child elements from causing horizontal page overflow */
*,
*::before,
*::after {
  box-sizing: border-box;
}


.hero-gradient {
  background: linear-gradient(135deg, #0a4e7b 0%, #135d92 40%, #1b6085 70%, #2a72c4 100%);
}

.blog-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.1);
}

.workshop-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.workshop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 24px -8px rgba(10, 78, 123, 0.12);
}

.tr-heading {
  font-family: "Poppins", sans-serif;
}

/* Needed by base.html mobile-menu JS (adds .blur-active to #mainPage) */
.blur-active {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}

/* Active nav link highlight (current page in header menu) */
.nav-active {
  color: #48beec;
}

/* ---------- Page head ---------- */
.tr-pagehead {
  background: #fff;
  border: 1px solid var(--tr-line);
  border-radius: var(--tr-radius);
  box-shadow: var(--tr-shadow);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.tr-pagehead h1 {
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tr-blue);
  line-height: 1.2;
}

.tr-pagehead .tr-sub {
  font-size: 0.8rem;
  color: var(--tr-ink-soft);
  font-weight: 500;
  margin-top: 2px;
}

.tr-pagehead .tr-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Search */
.tr-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f8fafc;
  border: 1px solid var(--tr-line);
  border-radius: 12px;
  padding: 9px 14px;
  min-width: 260px;
  flex: 1;
  max-width: 420px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tr-search:focus-within {
  border-color: var(--tr-blue);
  box-shadow: 0 0 0 3px var(--tr-blue-soft);
}

.tr-search svg {
  flex-shrink: 0;
  color: var(--tr-ink-soft);
}

.tr-search input {
  border: 0;
  background: none;
  outline: 0;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--tr-ink);
}

.tr-search input::placeholder {
  color: #94a3b8;
}

/* Buttons */
.tr-btn-ghost {
  border: 1px solid var(--tr-line);
  background: #fff;
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tr-ink);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: 0.15s;
}

.tr-btn-ghost:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.tr-btn-primary {
  border: 0;
  background: linear-gradient(90deg, #3bb8e8 0%, #1b6085 100%);
  color: #fff;
  border-radius: 10px;
  padding: 10px 17px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.tr-btn-primary:hover {
  background: linear-gradient(90deg, #2da8d8 0%, #23719f 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59, 184, 232, 0.35);
}

.tr-btn-primary:active {
  transform: scale(0.98);
}

/* ---------- Category tabs ---------- */
.tr-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--tr-line);
  margin-top: 26px;
}

.tr-tabs::-webkit-scrollbar {
  display: none;
}

.tr-tab {
  position: relative;
  border: 0;
  background: none;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--tr-ink-soft);
  padding: 12px 14px 11px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.tr-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--tr-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.tr-tab:hover {
  color: var(--tr-ink);
}

.tr-tab:hover::after,
.tr-tab.active::after {
  transform: scaleX(1);
}

.tr-tab.active {
  color: var(--tr-blue);
}

.tr-badge-coming-soon {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 12px;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  pointer-events: none;
}

/* ---------- Layout shell ---------- */
.tr-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 26px;
  margin-top: 24px;
  width: 100%;
  max-width: 100%;
}

.tr-shell>section {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 980px) {
  .tr-shell {
    grid-template-columns: 1fr;
  }
}

/* ---------- Filter bar ---------- */
.tr-filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tr-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tr-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}

/* Categories are admin-managed, so the row has to take any number of them:
   scroll horizontally instead of wrapping, scrollbar hidden like .tr-tabs. */
.tr-chips-wrap {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tr-chips-wrap::-webkit-scrollbar {
  display: none;
}

.tr-chip {
  border: 1px solid var(--tr-line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tr-ink);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: 0.15s;
}

.tr-chip:hover {
  border-color: #9fd4ef;
  background: var(--tr-blue-soft);
}

.tr-chip.on {
  background: var(--tr-blue);
  border-color: var(--tr-blue);
  color: #fff;
}

.tr-filterbar .tr-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.tr-sort {
  border: 1px solid var(--tr-line);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--tr-ink);
  cursor: pointer;
}

.tr-count {
  font-size: 13px;
  color: var(--tr-ink-soft);
  font-weight: 500;
}

/* Paging control for the resource grid. Hidden by the template until the
   server reports another page, so it never shows on a complete result set. */
.tr-loadmore {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.tr-loadmore[hidden] {
  display: none;
}

/* ---------- Featured hero ---------- */
.tr-hero {
  position: relative;
  border-radius: var(--tr-radius);
  overflow: hidden;
  margin-bottom: 22px;
  display: flex;
  align-items: flex-start;
  background: linear-gradient(135deg, #0a4e7b 0%, #135d92 40%, #205f97 70%, #2a72c4 100%);
  box-shadow: var(--tr-shadow);
  color: #fff;
}

.tr-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 220px at 82% 18%, rgba(72, 190, 236, 0.35), transparent 70%),
    radial-gradient(360px 260px at 12% 95%, rgba(59, 184, 232, 0.25), transparent 70%);
}

.tr-hero-inner {
  position: relative;
  z-index: 2;
  padding: 28px 30px;
  /* Take the space the artwork frame does not. min-width:0 lets the text
     actually shrink — without it a flex child refuses to go below its content
     width and pushes the frame off the banner. */
  flex: 1 1 auto;
  min-width: 0;
}

/* The frame beside the copy: a small carousel of the pictures uploaded for a
   promotion, plus an author card, fading one into the next.

   It is NOT the banner background. The background is cropped to fill the panel
   under a scrim, which makes a book cover or a screenshot unreadable; these are
   shown whole with `object-fit: contain` so nothing is lost, letterboxed
   against a faint panel so the empty edges look deliberate. */
/* The frame and the share bar under it, as one column. The banner itself is a
   flex row (copy | aside), so without this wrapper a share row placed after
   the frame would become a third column and sit beside it instead of below. */
.tr-hero-aside {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 26px 24px 12px;
}

.tr-hero-figure {
  position: relative;
  z-index: 2;
  width: 268px;
  height: 210px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* Every slide sits in the same box so the frame keeps one height whichever is
   showing — the same reason the hero tabs on the landing page share a grid
   cell. Only `.is-on` is visible; the rest stay laid out but hidden. */
.tr-frame-slide {
  position: absolute;
  /* The bottom inset keeps the dots strip clear. Without it a tall image fills
     the box and pushes its caption down onto the dots — which only showed on
     portrait pictures, because a landscape one is limited by width and leaves
     spare height. */
  inset: 10px 10px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.tr-frame-slide.is-on {
  opacity: 1;
  visibility: visible;
}

.tr-frame-slide > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  /* A flex item will not shrink below its intrinsic size unless min-height is
     cleared. That default is what let a portrait image claim the whole slide
     and squeeze the caption out. */
  min-height: 0;
  flex: 0 1 auto;
}

.tr-frame-slide figcaption {
  flex: 0 0 auto;
  font-size: 11.5px;
  line-height: 1.35;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}

/* The author card — a face and a couple of lines, so the reader sees who is
   behind the thing being promoted and not only the product. */
.tr-frame-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 0 4px;
}

.tr-frame-author img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}

.tr-frame-author-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.tr-frame-author-title {
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
}

.tr-frame-author-detail {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.68);
}

.tr-frame-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.tr-frame-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.3s ease, width 0.3s ease;
}

.tr-frame-dots span.is-on {
  width: 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
}

/* Share row: WhatsApp, LinkedIn, and the device's own share sheet.
   It sits *below* the frame, centred, rather than inside it — the picture is
   the thing being looked at, and buttons floating over its corner competed
   with the caption for the same few pixels.
   One row per frame, not one per picture: what is being shared is the
   promotion, the same for every slide. Inside a figure it would be duplicated
   for each one and fade in and out with them. */
.tr-frame-share {
  /* Positioned so the "Link copied" note below anchors to this row and not to
     the aside, which would place it against the frame instead. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.tr-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.94);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.tr-share-btn svg {
  width: 16px;
  height: 16px;
}

.tr-share-btn:hover,
.tr-share-btn:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}

/* Momentary confirmation after the clipboard fallback, for browsers with no
   navigator.share. Anchored to the row so it cannot widen the frame. */
.tr-frame-share[data-copied]::after {
  content: 'Link copied';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 6px);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  pointer-events: none;
}

/* Side by side stops working once the banner is phone width — 210px of frame
   would leave the headline a sliver — so it stacks underneath instead. */
@media (max-width: 640px) {
  .tr-hero {
    flex-direction: column;
  }

  /* Stacked under the copy: the aside owns the spacing, and the frame inside
     it stretches to the full width it is given. */
  .tr-hero-aside {
    align-self: stretch;
    margin: 0 16px 18px;
  }

  .tr-hero-figure {
    width: 100%;
    height: 180px;
  }

  .tr-frame-author img {
    width: 64px;
    height: 64px;
  }
}

.tr-hero .tr-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.tr-live .tr-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tr-accent);
  box-shadow: 0 0 0 4px rgba(72, 190, 236, 0.35);
  animation: tr-pulse 1.6s infinite;
}

@keyframes tr-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.tr-hero h2 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(16px, 3vw, 27px);
  font-weight: 700;
  max-width: 560px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.tr-hero p {
  max-width: 520px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 18px;
  line-height: 1.5;
  /* Three lines, then ellipsis. Workshop descriptions are written by whoever
     posted the event and can run to paragraphs; unclamped, one long one
     stretches the banner and pushes the button out of view. The text is also
     trimmed server-side (hero_description in views.py) so the rest is never
     sent at all — this rule is what guarantees the shape. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tr-hero-meta {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  flex-wrap: wrap;
}

.tr-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tr-hero-meta svg {
  width: 15px;
  height: 15px;
}

.tr-hero .tr-btn-hero {
  margin-top: 20px;
  border: 0;
  background: #fff;
  color: var(--tr-blue);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: 0.15s;
}

.tr-hero .tr-btn-hero:hover {
  background: #eaf6fd;
  transform: translateY(-1px);
}

.tr-section-title {
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tr-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 14px;
}

/* ---------- Card grid ---------- */
.tr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 620px) {
  .tr-grid {
    grid-template-columns: 1fr;
  }
}

.tr-card {
  background: #fff;
  border: 1px solid var(--tr-line);
  border-radius: var(--tr-radius);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tr-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tr-shadow-lg);
}

.tr-thumb {
  height: 138px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.tr-thumb svg {
  width: 48px;
  height: 48px;
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
}

.tr-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 80px at 80% 20%, rgba(255, 255, 255, 0.22), transparent 70%);
}

/* Frosted type badge (demo-content .file-badge style) */
.tr-type-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.tr-card-body {
  padding: 16px 16px 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tr-card-body h3 {
  font-family: "Poppins", sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--tr-ink);
  line-height: 1.35;
  margin-bottom: 7px;
}

.tr-card-desc {
  font-size: 0.8rem;
  color: var(--tr-ink-soft);
  line-height: 1.5;
  flex: 1;
}

.tr-card-meta {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 13px;
  font-size: 0.75rem;
  color: #475569;
  font-weight: 600;
}

.tr-tag-row {
  display: flex;
  gap: 6px;
  margin-top: 11px;
  flex-wrap: wrap;
}

.tr-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--tr-blue);
  background: var(--tr-blue-soft);
  padding: 4px 9px;
  border-radius: 7px;
}

.tr-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.tr-price-bottom-right {
  display: inline-flex;
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: #01639B;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  padding: 3px 10px;
  border-radius: 8px;
}

.tr-card-action-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--tr-blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s ease;
}

.tr-card:hover .tr-card-action-text {
  transform: translateX(2px);
}

/* ---------- Card owner icon buttons (Edit / Delete) ---------- */
.tr-card-owner-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.tr-card:hover .tr-card-owner-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.tr-card-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.tr-card-icon-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

.tr-card-icon-btn.edit {
  background: linear-gradient(135deg, rgba(59,130,246,0.9), rgba(37,99,235,0.95));
  color: #fff;
}

.tr-card-icon-btn.delete {
  background: linear-gradient(135deg, rgba(239,68,68,0.9), rgba(220,38,38,0.95));
  color: #fff;
}

.tr-card-icon-btn svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  z-index: 2;
  color: #fff;
}

.tr-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--tr-ink-soft);
}

.tr-empty svg {
  width: 42px;
  height: 42px;
  color: #cbd5e1;
  margin: 0 auto 12px;
  display: block;
}

.tr-empty h3 {
  font-family: "Poppins", sans-serif;
  color: var(--tr-ink);
  font-size: 16px;
  margin-bottom: 5px;
}

/* ---------- Right rail ---------- */
.tr-rail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tr-panel {
  background: #fff;
  border: 1px solid var(--tr-line);
  border-radius: var(--tr-radius);
  box-shadow: var(--tr-shadow);
  overflow: hidden;
}

.tr-panel-head {
  padding: 16px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--tr-line);
}

.tr-panel-head h3 {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--tr-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tr-panel-head .tr-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0d5484, #2774cc);
}

.tr-see-all {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tr-blue);
  text-decoration: none;
  cursor: pointer;
}

.tr-see-all:hover {
  text-decoration: underline;
  color: var(--tr-blue);
}

/* Workshops */
.tr-workshop {
  display: flex;
  gap: 13px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--tr-line);
  cursor: pointer;
  transition: background 0.15s;
}

.tr-workshop:last-child {
  border-bottom: 0;
}

.tr-workshop:hover {
  background: #f8fbfe;
}

.tr-date-pill {
  flex-shrink: 0;
  width: 50px;
  text-align: center;
  border-radius: 11px;
  padding: 8px 0;
  background: var(--tr-blue-soft);
  border: 1px solid #d3e9f8;
}

.tr-date-pill .tr-m {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tr-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tr-date-pill .tr-d {
  font-size: 19px;
  font-weight: 700;
  color: var(--tr-ink);
  font-family: "Poppins", sans-serif;
  line-height: 1.1;
}

.tr-workshop .tr-info h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tr-ink);
  line-height: 1.3;
  margin-bottom: 4px;
}

.tr-workshop .tr-info .tr-ws-sub {
  font-size: 12px;
  color: var(--tr-ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tr-seats {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}

.tr-seats.few {
  color: #dc2626;
  background: #fef2f2;
}

.tr-seats.open {
  color: #16a34a;
  background: #f0fdf4;
}

/* News */
.tr-news-item {
  display: flex;
  gap: 13px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--tr-line);
  cursor: pointer;
  transition: background 0.15s;
  align-items: flex-start;
}

.tr-news-item:last-child {
  border-bottom: 0;
}

.tr-news-item:hover {
  background: #f8fbfe;
}

.tr-news-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  margin-top: 1px;
}

.tr-news-item h4 {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 5px;
  color: var(--tr-ink);
}

.tr-news-item:hover h4 {
  color: var(--tr-blue);
}

.tr-news-meta {
  font-size: 11.5px;
  color: var(--tr-ink-soft);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
}

.tr-news-meta .tr-src {
  font-weight: 700;
  color: var(--tr-ink);
}

/* CTA card (demo-content .cta-banner gradient) */
.tr-cta-card {
  background: linear-gradient(135deg, #0a4e7b 0%, #135d92 40%, #205f97 70%, #2a72c4 100%);
  color: #fff;
  padding: 22px;
  border-radius: var(--tr-radius);
  box-shadow: var(--tr-shadow);
}

.tr-cta-card h3 {
  font-family: "Poppins", sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 7px;
}

.tr-cta-card p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 15px;
}

.tr-cta-card button {
  width: 100%;
  background: #fff;
  color: var(--tr-blue-dark);
  border: 0;
  border-radius: 10px;
  padding: 11px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: 0.15s;
}

.tr-cta-card button:hover {
  background: #eaf6fd;
}

/* =========================================================
   ROLLBACK COPY — previous training-resources.css
   (inner comment markers converted to `--` lines so the
   whole block can live inside one CSS comment)
   =========================================================
body { font-family: 'Inter', sans-serif; }

-- Background blur effect
.blur-active {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}

-- Slide-in transition
.slide-menu {
    transform: translateX(-100%);
    transition: transform 0.35s ease;
}

.slide-menu.open {
    transform: translateX(0);
}

.wave-divider {
    background: linear-gradient(to right, #0F6B9A 0%, #0F6B9A 100%);
    position: relative;
    overflow: hidden;
}
.wave-divider::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    clip-path: polygon(0 50%, 1% 49%, 2% 48%, 3% 47%, 4% 46%, 5% 45%, 6% 44%, 7% 43%, 8% 42%, 9% 41%, 10% 40%, 11% 41%, 12% 42%, 13% 43%, 14% 44%, 15% 45%, 16% 46%, 17% 47%, 18% 48%, 19% 49%, 20% 50%, 21% 49%, 22% 48%, 23% 47%, 24% 46%, 25% 45%, 26% 44%, 27% 43%, 28% 42%, 29% 41%, 30% 40%, 31% 41%, 32% 42%, 33% 43%, 34% 44%, 35% 45%, 36% 46%, 37% 47%, 38% 48%, 39% 49%, 40% 50%, 41% 49%, 42% 48%, 43% 47%, 44% 46%, 45% 45%, 46% 44%, 47% 43%, 48% 42%, 49% 41%, 50% 40%, 51% 41%, 52% 42%, 53% 43%, 54% 44%, 55% 45%, 56% 46%, 57% 47%, 58% 48%, 59% 49%, 60% 50%, 61% 49%, 62% 48%, 63% 47%, 64% 46%, 65% 45%, 66% 44%, 67% 43%, 68% 42%, 69% 41%, 70% 40%, 71% 41%, 72% 42%, 73% 43%, 74% 44%, 75% 45%, 76% 46%, 77% 47%, 78% 48%, 79% 49%, 80% 50%, 81% 49%, 82% 48%, 83% 47%, 84% 46%, 85% 45%, 86% 44%, 87% 43%, 88% 42%, 89% 41%, 90% 40%, 91% 41%, 92% 42%, 93% 43%, 94% 44%, 95% 45%, 96% 46%, 97% 47%, 98% 48%, 99% 49%, 100% 50%);
}
.tab-btn {
    position: relative;
    padding-bottom: 0.5rem;
    transition: color 0.3s ease;
    cursor: pointer;
    color: #000;
    font-weight: 600;
}
.tab-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #48BEEC;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.tab-btn:hover::after {
    transform: scaleX(1);
}
.tab-btn.active::after {
    transform: scaleX(1);
}

.tab-nav:hover .tab-btn.active::after {
    transform: scaleX(0);
}

.tab-nav:hover .tab-btn.active:hover::after {
    transform: scaleX(1);
}

section[id] {
    scroll-margin-top: calc(var(--promo-height, 0px) + var(--header-height, 0px) + 16px);
}

-- Active nav link
.nav-active {
    color: #48BEEC;
}

-- Sticky header & progress card styles
-- Sticky header: sits on top with slight translucency and blur
#mainPage {
    position: fixed;
    top: var(--promo-height, 0px);
    left: 0;
    right: 0;
    z-index: 30;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 6px rgba(16,24,40,0.04);
}
========================================================= */

/* Responsive Breakpoints & Enhancements */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .tr-shell {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tr-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
}

/* Medium screens & Tablets (max-width: 768px) */
@media (max-width: 768px) {
  .tr-pagehead {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    gap: 14px;
  }

  .tr-pagehead .tr-head-actions {
    margin-left: 0;
    width: 100%;
    display: flex;
    gap: 10px;
  }

  .tr-pagehead .tr-head-actions button,
  .tr-pagehead .tr-head-actions a {
    flex: 1;
    justify-content: center;
    font-size: 13px;
    padding: 10px 14px;
  }

  .tr-search {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
  }

  .tr-rail {
    grid-template-columns: 1fr;
  }
}

/* Mobile Devices (max-width: 640px) */
@media (max-width: 640px) {

  /* === Page outer padding === */
  .max-w-7xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* === Page header: stack vertically === */
  .tr-pagehead {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 12px;
  }

  .tr-pagehead h1 {
    font-size: 1.2rem;
  }

  .tr-pagehead .tr-sub {
    font-size: 0.75rem;
  }

  .tr-pagehead .tr-head-actions {
    margin-left: 0;
    display: flex;
    gap: 8px;
  }

  .tr-pagehead .tr-head-actions button,
  .tr-pagehead .tr-head-actions a {
    flex: 1;
    justify-content: center;
    font-size: 12px;
    padding: 8px 10px;
  }

  .tr-search {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  /* === Category tabs: touch horizontal scroll === */
  .tr-tabs {
    -webkit-overflow-scrolling: touch;
    gap: 2px;
    margin-top: 14px;
  }

  .tr-tab {
    font-size: 12.5px;
    padding: 9px 12px;
    white-space: nowrap;
  }

  /* === Filter bar: chips wrap instead of stretching === */
  .tr-filterbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .tr-chips-wrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
  }

  .tr-chip {
    padding: 5px 11px;
    font-size: 11.5px;
    flex-shrink: 0;
  }

  .tr-filterbar .tr-right {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }

  /* === Resource card grid: 1 column === */
  .tr-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .tr-card-body {
    padding: 14px 14px 12px;
  }

  .tr-card-body h3 {
    font-size: 0.88rem;
  }

  .tr-card-desc {
    font-size: 0.78rem;
  }

  /* === Hero carousel: mobile optimised === */
  #trHeroCarousel {
    border-radius: 14px;
  }

  .tr-hero-inner {
    padding: 20px 16px;
  }

  .tr-hero .tr-live {
    font-size: 10.5px;
    padding: 4px 10px;
    margin-bottom: 10px;
  }

  .tr-hero h2 {
    font-size: 16px !important;
    line-height: 1.3;
    max-width: 100%;
  }

  .tr-hero p {
    font-size: 12.5px !important;
    max-width: 100%;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .tr-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 12px;
  }

  .tr-hero-meta span {
    font-size: 11px;
  }

  .tr-hero .tr-btn-hero {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 14px;
    font-size: 13px;
    padding: 9px 14px;
  }

  /* Chevron buttons hidden — swipe instead */
}

/* Card File Badge & Price Tag */
.tr-thumb {
  position: relative !important;
}

.tr-file-badge {
  /* position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  color: #38bdf8;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); */
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.tr-price-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #0d9488;
  background: #ccfbf1;
  border: 1px solid #99f6e4;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: auto;
}

/* Resource Submission Modal */
.tr-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tr-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.tr-modal-card {
  background: #ffffff;
  width: 100%;
  max-width: 580px;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.tr-modal-overlay.active .tr-modal-card {
  transform: translateY(0) scale(1);
}

.tr-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
}

.tr-modal-header h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.tr-modal-close {
  background: none;
  border: none;
  color: #64748b;
  font-size: 20px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tr-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.tr-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.tr-form-group {
  margin-bottom: 18px;
}

.tr-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.tr-form-control {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  transition: all 0.2s ease;
  outline: none;
}

.tr-form-control:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.tr-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

#prevBtn,
#nextBtn {
  display: none !important;
}

/* Larger tappable dot indicators */
.carousel-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px;
}

/* === Modal dialogs: constrain height === */
#detailModalContainer,
#formModalContainer,
#deleteModalContainer {
  max-height: 94vh;
  /* padding: 18px 14px; */
  border-radius: 20px;
}