.resources--columns-layout {
  display: flex;
  gap: 24px;
}
.left-col {
  width: 320px;
}
.right-col {
  flex: 1;
}

.resources--filters--top-menu {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  list-style: none;
}
.resources--filter--wrapper {
  border-bottom: 0 !important;
  padding: 10px 0;
}
#resources-filters .card .row .col-md-4::after {
  content: "";
  display: block;
  width: 95%;
  position: absolute;
  height: 1px;
  background: #e5e5e5;
  margin: 10px auto 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.resources--filter--wrapper .filter-title {
  display: block;
  cursor: pointer;
  font-weight: 600;
}
.resources--categories {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}
.resources--categories li {
  margin: 6px 0;
}

.resources--search {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resources--search input {
  padding: 8px 10px;
}

.resources-top-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.scope-buttons {
  display: flex;
  gap: 8px;
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.scope-buttons a {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
}
.scope-buttons a:hover {
  background: #f3f3f3;
}

.resources-items-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  list-style: none;
  padding-left: 0;
}
.resource-item-base {
  border: 1px solid #eee;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
}
.resource-item__type {
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 6px;
}
.resource__title {
  font-size: 18px;
  margin: 6px 0 8px;
}
.resource__excerpt {
  font-size: 14px;
  opacity: 0.9;
}

.m-pagination__list {
  display: flex;
  gap: 8px;
  list-style: none;
  padding-left: 0;
}
.m-pagination__link {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
}
.m-pagination__list .current .m-pagination__link,
.m-pagination__link:hover {
  background: #f3f3f3;
}
.dots.m-pagination__link {
  cursor: default;
}
.no-results {
  padding: 24px;
  border: 1px dashed #ddd;
  border-radius: 8px;
  text-align: center;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
/* #resources-grid carries Bootstrap's .row class, whose negative side
   margins shift the homepage blocks/headers left vs the dashboard blocks
   (which aren't in a .row). Cancel those gutters so they align uniformly. */
#resources-grid.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.course-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.resource-card-image {
  height: 150px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.star-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.resource-card-content {
  padding: 15px;
}

.resource-card-hover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 15px;
}

.course-card:hover .resource-card-hover {
  opacity: 1;
}

.hover-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.hero-card {
  max-width: 1300px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Equal 24px gap above AND below the hero on the catalog homepage — tightened
   to match the gap between the top bar and the first dashboard panel.
   These use an ID in the selector (#region-main) so their specificity beats
   the STALE cached styles.css that has been overriding the class-only rules.
     BELOW: filter-bar .container-fluid has inline padding-top:24px and the
            hero's bottom margin is 0  ->  bottom gap = 24px.
     ABOVE: the bar's own bottom margin is zeroed and a single, non-collapsing
            padding-top:24px on .main-content supplies the gap  ->  24px. */
.path-local-catalog #region-main .hero-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.path-local-catalog #region-main .secondary-navigation {
  margin-bottom: 0 !important;
}
.path-local-catalog #region-main .main-content {
  padding-top: 30px !important;
}
.path-local-catalog .wrapper-course {
  padding-top: 0 !important;
}
body {

  font-family: "Be vietnam", sans-serif !important;
}
.path-local-catalog > #page-wrapper > #page > .rui-breadcrumbs,
.path-local-catalog
  > #page-wrapper
  > #page
  > .main-inner
  > .page-content
  > .region-main-course-wrapper
  > .region-main-content
  > .rui-blocks-wrapper
  > .wrapper-course
  > .page-header-content {
  display: none !important;
}

/* =========================================================================
   GOYN LEARNING LAB — RESOURCE TILE STYLES (v2)
   Matches the "Recommended for you" reference exactly:
     - White rounded container wraps each section
     - Title appears at the TOP of each card (sans-serif, bold)
     - Category/type label appears at the BOTTOM
     - Cover image fills the card (no heavy gradient scrim)
     - Star + info icons in top corners
   Applies to .resource-tile markup used by:
     - block_starredcourses
     - block_recentlyaccessedcourses
     - block_assigned_resources
     - local_catalog
   ========================================================================= */

/* ---------- White section container ----------
   Wraps each block (Recently Accessed, Starred, Assigned, etc.) in a
   single white rounded panel like the "Recommended for you" reference.
   Targets every consumer of the .resource-tile pattern. */
/* White container — outer block wrapper only.
   Note: block_assigned_resources is NOT in this list because its template
   already renders an inner `.assigned_resources_container` that provides
   the white panel. Including both would double-stack the padding.

   The `.recommended_resources_container`, `.all_resources_container`, and
   `.featured_resources_container` here are the homepage's actual section
   wrappers rendered by `local/catalog/templates/cards.mustache`. Adding
   them to this rule is what gives the Recommended For You / All Resources
   headings their top breathing room and rounded panel look — earlier the
   rule only mentioned `.recommended-section` (hyphen), which is a class
   that doesn't exist in the rendered DOM, so nothing was matching. */
.assigned_resources_container,
.recommended_resources_container,
.all_resources_container,
.featured_resources_container,
.block_starredcourses,
.block_recentlyaccessedcourses,
.block_badges,
.block_calendar_month,
.recommended-section {
  background: #ffffff !important;
  border-radius: 16px !important;
  /* Standardised to match the Assigned Resources panel: 20px left/right padding
     leaves a 1260px inner area inside a 1300px panel, so a 4 x 297 + 3 x 24
     card grid fits exactly (cards stay 297px). 30px bottom margin for spacing. */
  padding: 32px 20px !important;
  margin: 0 0 30px !important;
  border: 0 !important;
  box-shadow: 0 1px 3px rgba(17, 19, 26, 0.04) !important;
}

/* Outer wrapper for assigned_resources block: keep it invisible so only
   the inner template container shows as the white panel. */
.block_assigned_resources {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* No bottom margin on the outer wrapper: the inner .assigned_resources_container
     already carries the standard 30px bottom margin. Keeping 24px here too made
     the two stack, leaving a larger gap below Assigned than below the Starred /
     Recently Accessed panels. */
  margin: 0 !important;
}

/* Flatten Moodle's inner .card so we don't double-stack white panels */
.block_starredcourses .card,
.block_recentlyaccessedcourses .card,
.block_assigned_resources .card,
.block_badges .card,
.block_calendar_month .card {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
.block_starredcourses .card-body,
.block_recentlyaccessedcourses .card-body,
.block_assigned_resources .card-body,
.block_badges .card-body,
.block_calendar_month .card-body {
  padding: 0 !important;
}

/* Hide the duplicate "ASSIGNED RESOURCES" heading rendered by Moodle's
   block chrome — the template inside (.assigned_resources_container > h2)
   already prints "Assigned Resources" as the section title, so the outer
   block-chrome heading would otherwise show up faded above it. */
.block_assigned_resources .block-header,
.block_assigned_resources > .header,
.block_assigned_resources .card-title,
.block_assigned_resources h5.card-title,
.block_assigned_resources > h5,
.block_assigned_resources .block_title {
  display: none !important;
}

/* ---------- Section title — unified across all blocks ---------- */
.sectionTitles,
.assigned_resources_container h2,
.assigned_resources_container > h2.sectionTitles,
.block_starredcourses .card-title,
.block_starredcourses h5,
.block_starredcourses h3.title,
.block_recentlyaccessedcourses .card-title,
.block_recentlyaccessedcourses h5,
.block_recentlyaccessedcourses h3.title,
.block_badges .card-title,
.block_badges h5,
.block_badges h3.title,
.block_calendar_month .card-title,
.block_calendar_month h5,
.block_calendar_month h3.title,
.recommended-section h2 {
  font-family: "Be vietnam", sans-serif !important;
  font-weight: bold !important;
  font-size: 32px !important;
  color: #000 !important;
  text-transform: capitalize !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-style: normal !important;
}

/* Extra-specific override for Assigned Resources heading to beat
   any inherited body !important font rules. */
body .assigned_resources_container h2.sectionTitles,
html body .assigned_resources_container h2 {
  font-family: "Be vietnam", sans-serif !important;
  font-weight: bold !important;
  font-size: 32px !important;
  color: #000 !important;
  text-transform: capitalize !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
}

/* Assigned Resources header: align its first letter with the first card's
   left edge (8px optical nudge, same as homepage) and reduce the gap down
   to the cards. Most-specific so it wins over the rules above. */
html body .assigned_resources_container > h2.sectionTitles,
html body .assigned_resources_container h2 {
  padding-left: 8px !important;
  margin-bottom: 0 !important;
}

/* ---------- Grid ---------- */
.resources-tiles-container,
.block_starredcourses .dashboard-card-deck,
.block_recentlyaccessedcourses .dashboard-card-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Apply the same 4-column grid rhythm to every dashboard/homepage/related
   card section so they all look identical: Assigned Resources (dashboard),
   Recommended for you (homepage), All Resources (homepage), Featured row,
   AND Related Resources (resource view + course view pages).

   Uses repeat(4, minmax(0, 1fr)) — the minmax(0, …) lower bound is key:
   it allows grid columns to be smaller than the cards' intrinsic
   min-width. Without that, Grid would refuse to wrap properly when
   the cards' min-height × 3/4 aspect ratio demands more width than
   the column allows, and cards would overlap each other.

   The companion .resource-tile rule below releases min-width so cards
   actually shrink to fit. */
@media (min-width: 992px) {
  .resources-tiles-container,
  .resources-tiles-container.assigned,
  .resources-tiles-container.recommended,
  .resources-tiles-container.featured,
  .assigned_resources_container .resources-tiles-container,
  .recommended_resources_container .resources-tiles-container,
  .featured_resources_container .resources-tiles-container,
  .cardView_container,
  #related-courses-container,
  #related-courses-container.cardView_container,
  #related-courses-container.related-courses-carousel {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
  .resources-tiles-container > .resource-tile,
  .resources-tiles-container.assigned > .resource-tile,
  .resources-tiles-container.recommended > .resource-tile,
  .resources-tiles-container.featured > .resource-tile,
  .assigned_resources_container .resources-tiles-container > .resource-tile,
  .recommended_resources_container .resources-tiles-container > .resource-tile,
  .featured_resources_container .resources-tiles-container > .resource-tile,
  .cardView_container > .resource-tile,
  #related-courses-container > .resource-tile {
    width: 100% !important;
  }
}

/* Responsive: 3 cols at 768-991, 2 cols at 576-767, 1 col below */
@media (min-width: 768px) and (max-width: 991.98px) {
  .resources-tiles-container,
  .resources-tiles-container.assigned,
  .resources-tiles-container.recommended,
  .resources-tiles-container.featured,
  .assigned_resources_container .resources-tiles-container,
  .recommended_resources_container .resources-tiles-container,
  .featured_resources_container .resources-tiles-container,
  .cardView_container,
  #related-courses-container,
  #related-courses-container.cardView_container,
  #related-courses-container.related-courses-carousel {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .resources-tiles-container,
  .resources-tiles-container.assigned,
  .resources-tiles-container.recommended,
  .resources-tiles-container.featured,
  .assigned_resources_container .resources-tiles-container,
  .recommended_resources_container .resources-tiles-container,
  .featured_resources_container .resources-tiles-container,
  .cardView_container,
  #related-courses-container,
  #related-courses-container.cardView_container,
  #related-courses-container.related-courses-carousel {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* Assigned Resources (dashboard): match the Starred / Recently accessed
   card grid EXACTLY at every breakpoint — 4 cols >1024px, 2 cols 601-1024px,
   1 col <=600px, all with a 24px gap. Placed LAST so it overrides the
   catalog responsive rules above. Scoped to Assigned only. */
@media (min-width: 1025px) {
  .resources-tiles-container.assigned,
  .assigned_resources_container .resources-tiles-container {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}
@media (max-width: 1024px) and (min-width: 601px) {
  .resources-tiles-container.assigned,
  .assigned_resources_container .resources-tiles-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}
@media (max-width: 600px) {
  .resources-tiles-container.assigned,
  .assigned_resources_container .resources-tiles-container {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 24px !important;
  }
}

/* Homepage Recommended For You + All Resources: match the SAME responsive
   column counts and 20px gap as the Assigned Resources block. Placed LAST so it
   overrides the catalog responsive rules above. */
@media (min-width: 1025px) {
  .recommended_resources_container .resources-tiles-container,
  .recommended_resources_container .resources-tiles-container.recommended,
  .featured_resources_container .resources-tiles-container,
  .featured_resources_container .resources-tiles-container.featured,
  .all_resources_container .resources-tiles-container {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}
@media (max-width: 1024px) and (min-width: 601px) {
  .recommended_resources_container .resources-tiles-container,
  .recommended_resources_container .resources-tiles-container.recommended,
  .featured_resources_container .resources-tiles-container,
  .featured_resources_container .resources-tiles-container.featured,
  .all_resources_container .resources-tiles-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}
@media (max-width: 600px) {
  .recommended_resources_container .resources-tiles-container,
  .recommended_resources_container .resources-tiles-container.recommended,
  .featured_resources_container .resources-tiles-container,
  .featured_resources_container .resources-tiles-container.featured,
  .all_resources_container .resources-tiles-container {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 20px !important;
  }
}

/* =========================================================================
   THE TILE — full-bleed cover image, title at TOP, category at BOTTOM
   ========================================================================= */
.resource-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 297px;
  min-height: 400px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #e8e8e6;  /* neutral fallback — never dark */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  isolation: isolate;
  transition: transform 200ms ease, box-shadow 200ms ease;
  color: #fff;
}
.resource-tile a       { color: inherit; text-decoration: none; }
.resource-tile a:hover { color: inherit; text-decoration: none; }
.resource-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(17, 19, 26, 0.15);
}

/* =========================================================================
   CANONICAL CARD OVERLAY — applied to EVERY resource card site-wide.
   This is the single source of truth for the dark shadow on
   .resource-tile-background-image cards (Assigned Resources, Recommended
   For You, All Resources, Featured, Recently Accessed, Starred, Related).
   It matches the reference overlay exactly: two stacked rgba(0,0,0,0.4)
   layers (::before + ::after) that read as ~0.64 black, darkening the
   ::before to rgba(0,0,0,0.7) on hover.

   The old `.resource-tile::after` top-gradient was REMOVED here so it does
   not stack on top of these two layers and turn the cards near-black.
   ========================================================================= */
.resource-tile-background-image::before,
.resource-tile-background-image::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}
.resource-tile-background-image::before {
  z-index: 1;
}
.resource-tile-background-image::after {
  z-index: 0;
}
.resource-tile-background-image:hover::before {
  background: rgba(0, 0, 0, 0.7);
}

/* ---------- TITLE AT TOP (this is the key change) ---------- */
.resource-tile .hide-inner-information {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;             /* anchored to top, not bottom */
  bottom: 0;          /* still spans full card so category can sit at bottom */
  padding: 56px 20px 20px;  /* top padding leaves room for the icon row */
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* group title + theme together at the top */
  gap: 6px;
  transition: opacity 220ms ease;
}
.resource-tile .hide-inner-information .resource-tile__link {
  pointer-events: auto;
  display: block;
}
.resource-tile .resource-tile__content {
  display: flex;
  flex-direction: column;
  gap: 6px;  /* space between title and theme label */
}

.resource-tile__title {
  font-family: "Be vietnam", sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  /* Clamp long titles */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-self: flex-start;
  /* Hover underline — matches the "Recommended for you" reference */
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 150ms ease;
}

/* Title underlines on hover (works whether the <a> or the <h3> is hovered) */
.resource-tile .resource-tile__link:hover .resource-tile__title,
.resource-tile__title:hover {
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.9) !important;
}

.resource-tile__type {
  font-family: "Be vietnam", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  margin: 0 !important;
  align-self: flex-start;
}

/* =========================================================================
   CORNER ICONS — star (top-left), info (top-right)
   ========================================================================= */
.resource-tile__star,
.info-icon-style {
  position: absolute;
  top: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 3;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}
/* Hide the underlying <img> tags completely — we'll paint icons as
   CSS backgrounds on the button itself. This avoids any broken-image
   rectangles if /theme/alpha/images/*.svg fails to load. */
.resource-tile__star img,
.info-icon-style img {
  display: none;
}

/* STAR icon — bare outline by default */
.resource-tile__star {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* Filled white star when starred */
.resource-tile__star[data-is-starred="true"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}

/* INFO icon — white circle-i on a dark chip */
.info-icon-style {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-color: rgba(0, 0, 0, 0.55);
}
.resource-tile__star { left: 14px; }
.info-icon-style     { right: 14px; }

/* Star hover state */
.resource-tile__star:hover {
  background-color: rgba(0, 0, 0, 0.35);
  transform: scale(1.06);
}
/* When starred, hover keeps the filled look */
.resource-tile__star[data-is-starred="true"]:hover {
  background-color: rgba(0, 0, 0, 0.35);
}
/* Info hover state — darker chip */
.info-icon-style:hover {
  background-color: rgba(0, 0, 0, 0.78);
  transform: scale(1.06);
}

/* Starred state — keep star solid white, no chip */
.resource-tile__star[data-is-starred="true"] img {
  filter: brightness(0) invert(1);
}


/* =========================================================================
   INFO PANEL — hidden by default, revealed when info icon is clicked
   (JavaScript toggles .show-info on the .resource-tile). The panel is
   positioned absolutely over the card content. Styling of the panel
   internals (description, theme, footer, icons) is left to each
   template's own inline <style> block.
   ========================================================================= */
.resource-tile .resource-info-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  z-index: 4;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  background: rgba(0, 0, 0, 0.75);
  border-radius: inherit;
}

.resource-tile.show-info .resource-info-panel {
  opacity: 1;
  visibility: visible;
}

/* When the panel is open, hide the underlying card content */
.resource-tile.show-info .hide-inner-information,
.resource-tile.show-info .info-icon-style,
.resource-tile.show-info .star-course-style,
.resource-tile.show-info .resource-tile__star {
  opacity: 0;
  pointer-events: none;
}

/* Panel content layout — mirrors the Related Resources panel style:
   close X top-right, title at top, type+region below, author/date
   bottom-left with their inline icons, copy/download bottom-right. */
.resource-tile .panel-close-icon {
  /* margin-left:auto only pushes an element right when it has a
     constrained width — a plain block <div> defaults to full width,
     which is why the X was stuck on the left. Shrink it to its content
     so the auto left margin can absorb the free space and move it to
     the right edge of the panel, beside where the info icon sits. */
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
  cursor: pointer;
}
/* Belt-and-braces: make the .text-end wrapper that holds the close icon
   a flex row aligned to the end. This right-aligns the X even if the
   fit-content rule above is ever overridden, and doesn't depend on the
   Bootstrap text-end/text-right utility actually being present. */
.resource-tile .resource-info-panel-header-style .text-end {
  display: flex;
  justify-content: flex-end;
}
.resource-tile .panel-close-icon img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.resource-tile .resource-info-panel-description {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resource-tile .resource-info-panel-description-link {
  color: #fff;
  text-decoration: none;
  display: block;
}
.resource-tile .resource-info-panel-description-link:hover {
  color: #fff;
  text-decoration: none;
}

.resource-tile .resource-info-panel-theme {
  font-size: 13px;
  opacity: 0.85;
  color: #fff;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 4px 0;
}
.resource-tile .resource-info-panel-theme:empty,
.resource-tile .resource-info-panel-theme:blank {
  display: none;
}

.resource-tile .resource-footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.resource-tile .resource-panel-footer-style {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.resource-tile .panel-icon-new {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #fff;
}
.resource-tile .panel-icon-new img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.resource-tile .action-icons-style {
  display: flex;
  gap: 8px;
}
/* Copy + Download action icons — borderless passthroughs. The icon SVGs
   (copyIcon-newGn.svg / downloadIcon-newGn.svg) already include their own dark
   circular badge (28x28), so we render the wrappers with NO box, border,
   resize, or color filter. This matches the canonical look used by the
   All Resources / Recommended sections (cards.mustache) and the Starred block.
   Previously these had a 1px white border + 6px radius + brightness/invert
   filter, which drew an unwanted square box around the already-badged icons. */
.resource-tile .action-icon-share,
.resource-tile .action-icon-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.resource-tile .action-icon-share img,
.resource-tile .action-icon-download img {
  width: 28px;
  height: 28px;
  filter: none;
}
.resource-tile .action-icon-share .dropdown-item,
.resource-tile .action-icon-download .dropdown-item {
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================================
   Hide literal alt-text fallback for icon images (when src fails)
   ========================================================================= */
img[alt="Info Icon"],
img[alt="Close Icon"],
img[alt="Toggle Star"],
img[alt="Share Icon"],
img[alt="Download Icon"],
img[alt="Calendar Icon"],
img[alt="User Icon"] {
  font-size: 0 !important;
  color: transparent !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .assigned_resources_container,
  .block_starredcourses,
  .block_recentlyaccessedcourses,
  .block_assigned_resources,
  .recommended-section {
    padding: 20px 18px;
    border-radius: 12px;
  }
  .sectionTitles,
  .assigned_resources_container h2,
  .block_starredcourses .card-title,
  .block_recentlyaccessedcourses .card-title {
    font-size: 24px !important;
    margin-bottom: 16px !important;
  }
  .resources-tiles-container,
  .block_starredcourses .dashboard-card-deck,
  .block_recentlyaccessedcourses .dashboard-card-deck {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
  .resource-tile { min-height: 260px; }
  .resource-tile__title { font-size: 17px; }
  .resource-tile .hide-inner-information { padding: 48px 14px 14px; }
}

/* =========================================================================
   RELATED RESOURCES (course/view.php and mod/resource/view.php)
   The inline <style> block in course/view.php already defines the grid
   (4 cols, 24px gap) and card styling. We only need to:
     1. Wrap the section in a white panel matching the rest of the dashboard.
     2. Ensure tiles never get stray margins that break the grid's equal gaps.
   ========================================================================= */

/* White container wrapping the Related Resources section */
.related-courses-section {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 28px 32px !important;
  margin: 24px auto !important;
  max-width: 1300px !important;
  width: 100% !important;
  box-shadow: 0 1px 3px rgba(17, 19, 26, 0.04) !important;
  border: 0 !important;
}

/* Make sure no tile has a stray margin that pushes a card off-grid */
.related-courses-section .resource-tile,
.related-courses-section .course-card {
  margin: 0 !important;
}

/* View toggle row (Grid / List buttons) — breathing room above the grid */
.related-courses-section .view-buttons {
  margin-bottom: 20px !important;
}

/* =========================================================================
   Course secondary navigation visibility.
   For non-admin users, hide the entire secondary nav bar (Course /
   Participants / Grades / More) on course pages. Site admins keep full
   access — they get an `is-siteadmin` class (on <html> initially, then
   on <body> after DOMContentLoaded) from the alpha theme renderer.
   ========================================================================= */

/* Hide the secondary navigation by default (applies to all users) */
.secondary-navigation,
nav.secondary-navigation,
.path-course .secondary-navigation {
  display: none !important;
}

/* Restore it for site admins */
html.is-siteadmin .secondary-navigation,
html.is-siteadmin nav.secondary-navigation,
html.is-siteadmin .path-course .secondary-navigation,
body.is-siteadmin .secondary-navigation,
body.is-siteadmin nav.secondary-navigation,
body.is-siteadmin.path-course .secondary-navigation {
  display: block !important;
}

/* But always hide the Grades tab — even for admins. Target by data-key
   so it works regardless of language. */
.secondary-navigation [data-key="grades"],
.moremenu [data-key="grades"],
nav.moremenu li[data-key="grades"],
li.nav-item[data-key="grades"] {
  display: none !important;
}

/* =========================================================================
   Responsive layout fixes — breadcrumb alignment + general mobile fixes
   ========================================================================= */

/* Breadcrumb alignment — match the inner content card's horizontal start
   on every screen size. Without this, the breadcrumb (rendered outside the
   main content wrapper) sits flush against the page edge while the card
   content sits with substantial left padding, creating visual disconnect.
   NOTE: superseded by the breadcrumb-alignment block at the bottom of
   this file — kept here only as a marker for context. */

/* =========================================================================
   General responsive layout — make the whole app work on mobile
   ========================================================================= */

/* Ensure the dashboard blocks shrink gracefully on tablet sizes */
@media (max-width: 992px) {
  .assigned_resources_container,
  .block_starredcourses,
  .block_recentlyaccessedcourses,
  .recommended-section {
    padding: 22px 22px !important;
    border-radius: 14px !important;
  }
  .sectionTitles,
  .assigned_resources_container h2,
  .block_starredcourses .card-title,
  .block_recentlyaccessedcourses .card-title {
    font-size: 26px !important;
  }
}

/* Mobile breakpoint: single column, tighter padding */
@media (max-width: 576px) {
  .assigned_resources_container,
  .block_starredcourses,
  .block_recentlyaccessedcourses,
  .recommended-section {
    padding: 18px 16px !important;
    border-radius: 12px !important;
    margin: 0 0 16px !important;
  }
  .sectionTitles,
  .assigned_resources_container h2,
  .block_starredcourses .card-title,
  .block_recentlyaccessedcourses .card-title {
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }
  /* Card grid: 1 column on phones (was 160px-min auto-fill) */
  .resources-tiles-container,
  .block_starredcourses .dashboard-card-deck,
  .block_recentlyaccessedcourses .dashboard-card-deck {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Phone-sized tiles are shorter so they don't take a whole screen each */
  .resource-tile {
    min-height: 220px !important;
    aspect-ratio: 16 / 10 !important;
  }
  .resource-tile__title {
    font-size: 17px !important;
  }
  .resource-tile .hide-inner-information {
    /* Keep the 56px top clearance so the title drops BELOW the star/info
       icon row (icons sit at top:14px and are 32px tall) instead of
       overlapping it -- matches the desktop standard card. Sides/bottom
       stay tight for phones. */
    padding: 56px 14px 14px !important;
  }
}

/* Related Resources section — ensure it scales the same as dashboard */
@media (max-width: 992px) {
  .related-courses-section {
    padding: 22px 22px !important;
    border-radius: 14px !important;
    margin: 16px auto !important;
  }
}
@media (max-width: 576px) {
  .related-courses-section {
    padding: 18px 16px !important;
    border-radius: 12px !important;
  }
}

/* Course content page (the white card on mod/resource/view.php and
   course/view.php) — ensure it doesn't overflow viewport on mobile */
@media (max-width: 576px) {
  .wrapper-course,
  .custom_homepage,
  .custom-related-page,
  .custom-activity-wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Hero / page header readability on mobile */
@media (max-width: 720px) {
  .rui-page-header h1,
  .page-header-headings h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
}

/* Make sure horizontal scrollbars don't appear on mobile due to card grids */
body {
  overflow-x: hidden;
}

/* =========================================================================
   Wide-screen breakpoint (≥1600px / 1920px+ monitors)
   On large monitors, the 1300px max-width leaves wasted space on either
   side. This breakpoint expands the containers, increases padding for
   visual breathing room, and shows more cards per row.
   ========================================================================= */
@media (min-width: 1600px) {
  /* Breadcrumb handled by the authoritative block at the bottom of this
     file — width and padding follow the .wrapper-course (60px) at every
     size, so no override needed here. */

  /* Dashboard block containers: wider and more generously padded */
  .assigned_resources_container,
  .block_starredcourses,
  .block_recentlyaccessedcourses,
  .recommended-section {
    padding: 36px 44px !important;
    border-radius: 18px !important;
  }

  /* Bigger section titles on huge monitors */
  .sectionTitles,
  .assigned_resources_container h2,
  .block_starredcourses .card-title,
  .block_recentlyaccessedcourses .card-title {
    font-size: 36px !important;
    margin-bottom: 28px !important;
  }

  /* Keep 4 cards per row on large monitors (matches the reference layout) */
  .resources-tiles-container,
  .block_starredcourses .dashboard-card-deck,
  .block_recentlyaccessedcourses .dashboard-card-deck {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }

  /* Slightly taller card minimum on big monitors so they don't get
     stretched thin if the row has only 3–4 items */
  .resource-tile {
    min-height: 400px;
  }

  /* Card title can step up a hair to fill the bigger card */
  .resource-tile__title {
    font-size: 23px !important;
  }

  /* Related Resources section: more cards per row */
  .related-courses-section {
    max-width: 1600px !important;
    padding: 36px 44px !important;
    border-radius: 18px !important;
  }
  .related-courses-section .cardView_container,
  #related-courses-container,
  #related-courses-container.cardView_container,
  #related-courses-container.related-courses-carousel {
    gap: 28px !important;
  }
  /* 5 columns on Related Resources at this width */
  .cardView_container > .resource-tile,
  #related-courses-container > .resource-tile,
  #related-courses-container > .course-card {
    flex: 0 0 calc(25% - 21px) !important;
    max-width: calc(25% - 21px) !important;
  }
}

/* =========================================================================
   Ultra-wide breakpoint (≥1920px)
   On 4K-style displays, expand further to take real advantage of the
   horizontal real estate. Cards stay readable, layout doesn't stretch
   beyond what looks coherent.
   ========================================================================= */
@media (min-width: 1920px) {
  /* Breadcrumb handled by the authoritative block at the bottom of this
     file — width and padding follow .wrapper-course (60px) at every
     size, so no override needed here. */

  .assigned_resources_container,
  .block_starredcourses,
  .block_recentlyaccessedcourses,
  .recommended-section {
    padding: 44px 56px !important;
    max-width: 1800px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .sectionTitles,
  .assigned_resources_container h2,
  .block_starredcourses .card-title,
  .block_recentlyaccessedcourses .card-title {
    font-size: 40px !important;
    margin-bottom: 32px !important;
  }

  /* Keep 4 cards per row even on ultra-wide displays */
  .resources-tiles-container,
  .block_starredcourses .dashboard-card-deck,
  .block_recentlyaccessedcourses .dashboard-card-deck {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px !important;
  }

  .resource-tile {
    min-height: 440px;
  }

  .resource-tile__title {
    font-size: 24px !important;
  }

  /* Related Resources extends further on 4K */
  .related-courses-section {
    max-width: 1800px !important;
    padding: 44px 56px !important;
  }
  .related-courses-section .cardView_container,
  #related-courses-container,
  #related-courses-container.cardView_container,
  #related-courses-container.related-courses-carousel {
    gap: 32px !important;
  }
  /* Keep 5 columns at 1920px+; could go to 6 but visually 5 + bigger cards
     reads better than cramming 6 thin cards on screen */
  .cardView_container > .resource-tile,
  #related-courses-container > .resource-tile,
  #related-courses-container > .course-card {
    flex: 0 0 calc(25% - 21px) !important;
    max-width: calc(25% - 21px) !important;
  }
}

/* =========================================================================
   Breadcrumb alignment fix (JS-driven)
   Aligning the breadcrumb visually with the "Learning Lab Home / Dashboard"
   bar above it isn't reliable with hardcoded padding — the bar's left
   position changes based on screen size, drawer state, and which page
   layout is being rendered.

   The CSS below sets a baseline ZERO padding and full width. The actual
   left-padding is set by JS at the bottom of this file (see the script
   tag injected by theme/alpha/classes/output/core_renderer.php), which
   measures the white card's runtime position and applies it.
   ========================================================================= */
.rui-breadcrumbs {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: 16px !important;
  padding-bottom: 0 !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* Default fallback padding-left — if JS doesn't run for any reason, this
   keeps the breadcrumb readable rather than flush-left. JS will overwrite. */
.rui-breadcrumbs:not([style*="padding-left"]) {
  padding-left: 16px !important;
}

.rui-breadcrumbs .breadcrumbs-container,
.rui-breadcrumbs .breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 767.98px) {
  .rui-breadcrumbs {
    font-size: 13px;
    padding-top: 12px !important;
  }
  .rui-breadcrumbs .breadcrumb {
    flex-wrap: wrap !important;
  }
  .rui-breadcrumbs .breadcrumb-item {
    line-height: 1.6;
  }
}

/* ── Front-page catalog: center within the flex .rui-blocks-wrapper ──
   .rui-blocks-wrapper is display:flex and was left-aligning its children,
   and #resources-grid was only ~862px wide instead of full width. Make the
   grid fill the row and center its inner panels. */
.rui-blocks-wrapper {
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
}
.rui-blocks-wrapper > #resources-grid,
#resources-grid {
  flex: 1 1 100% !important;
  width: 100% !important;
  /* Match the top bar (.rui-topbar-wrapper, max-width: 1300px) so the
     Recommended For You / All Resources panels align vertically with it. */
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Break the homepage panels out of the .container-fluid 0 10px gutter so they
   reach the full 1300px top-bar width (1280px parent content + 2 x 10px), with
   26px side padding -> 1248px inner row = (297 x 4) + (20 x 3) = 297px cards,
   matching the Assigned Resources block. (box-sizing: border-box, so width
   includes padding; flex-shrink: 0 keeps the 1300px from collapsing if
   #resources-grid is a flex row.) The pagination keeps the normal 100% width.

   The `.container-fluid >` prefix is deliberate: it lifts specificity to (1,2,0)
   so this wins over the catalog's own `#resources-grid > .recommended_resources_container`
   rule (1,1,0) even when a STALE aggregated styles.css is still cached next to
   the live stylesheet -- that stale copy sets width:100% and would otherwise pin
   the panels back to 1280px (and the cards to 289/292px). */
.container-fluid > #resources-grid > .recommended_resources_container,
.container-fluid > #resources-grid > .all_resources_container,
.container-fluid > #resources-grid > .featured_resources_container {
  width: calc(100% + 20px) !important; /* 1280 + 20 = 1300px */
  max-width: none !important;
  flex-shrink: 0 !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
  padding-left: 26px !important;  /* 1300 - 52 = 1248px inner -> 297px cards */
  padding-right: 26px !important;
}
#resources-grid > .resources-pagination {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Gap override at (1,3,0): the Recommended grid is matched by a (0,3,0) rule
   (.recommended_resources_container .resources-tiles-container.recommended) that
   a stale cached styles.css can still set to 24px. This wins so BOTH grids use a
   20px gap -> (1248 - 3 x 20) / 4 = 297px cards. */
.container-fluid > #resources-grid > .recommended_resources_container > .resources-tiles-container,
.container-fluid > #resources-grid > .all_resources_container > .resources-tiles-container,
.container-fluid > #resources-grid > .featured_resources_container > .resources-tiles-container {
  gap: 20px !important;
}

/* Tighten the gap between the filter bar and the first homepage panel.
   The panels sat low because (a) the panel itself carried a top margin and
   (b) the generic `.sectionTitles { margin-top: 2rem }` rule leaked onto the
   panel heading, adding ~32px of dead space above "Recommended For You".
   Zero both on the homepage so the only gap above the panel is the 24px
   margin-bottom of the filter bar — matching the hero/top-bar rhythm. */
.path-local-catalog #resources-grid > .recommended_resources_container,
.path-local-catalog #resources-grid > .featured_resources_container,
.path-local-catalog #resources-grid > .all_resources_container {
  margin-top: 0 !important;
}
.path-local-catalog .recommended_resources_container > h2.sectionTitles,
.path-local-catalog .featured_resources_container > h2.sectionTitles,
.path-local-catalog .all_resources_container > h2.sectionTitles {
  margin-top: 0 !important;
}

/* Authoritative homepage top-gap control — kept in the CSS file (which loads
   directly) rather than the template-cached inline style, so the gaps are
   reliable: 24px above the filter bar (hero -> filter) and 24px below it
   (filter -> Recommended), matching the dashboard top-bar -> first-panel gap. */
.path-local-catalog #region-main .container-fluid {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
.path-local-catalog #resources-grid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Hero card carries no own vertical margin — the 30px gaps above and below it
   come from .main-content padding-top and the filter container padding-top. */
.path-local-catalog #region-main .hero-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Filter-bar row bottom margin — governs the filter -> Recommended gap when the
   grid renders inside the filter container; kept at 30px to match. */
.path-local-catalog #region-main .container-fluid > .row.mb-3 {
  margin-bottom: 30px !important;
}

/* =============================================================================
   RESOURCE BLOCK STANDARDISATION
   Make every resource block match the Assigned Resources block:
     - white panel : 1300px wide (= top-bar width), 32px/20px padding, 30px below
     - card grid    : 4 cols (2 on tablet, 1 on phone), 24px gap, 1260px inner
     - cards        : 297px wide, centred   ((1260 - 3*24) / 4 = 297)

   Panel background / radius / padding / bottom-margin come from the shared
   white-panel rule above (now padding 32px 20px, margin 0 0 30px). The homepage
   panels (.recommended_resources_container / .all_resources_container /
   .featured_resources_container) sit inside #resources-grid, which is capped at
   1280px by the .container-fluid 0 10px gutter, so they break that gutter out
   with -10px side margins (see the rule above) to reach the full 1300px. The dashboard blocks sit inside
   .custom_dashboard (1260px content + 20px side gutter), so they break that
   gutter out with -20px side margins to reach the full 1300px — exactly like
   blocks/assigned_resources/styles.css. Scoped to .pagelayout-mydashboard so
   these core blocks stay untouched on any other page.
   NOTE: the -20px matches the .custom_dashboard { padding: 0 20px } gutter in
   theme/alpha/templates/tmpl-dashboard.mustache — keep them in sync.
   ============================================================================= */

/* --- Dashboard panels: break out the 20px gutter so the panel spans 1300px --- */
.pagelayout-mydashboard .block_starredcourses,
.pagelayout-mydashboard .block_recentlyaccessedcourses,
.pagelayout-mydashboard .block_badges,
.pagelayout-mydashboard .block_calendar_month {
  margin-left: -20px !important;
  margin-right: -20px !important;
}

/* --- Card grid: 4 / 2 / 1 columns, 20px gap (matches the Recently Accessed
       deck), no side padding so the grid fills the panel's inner width --- */
.recommended_resources_container .resources-tiles-container,
.all_resources_container .resources-tiles-container,
.featured_resources_container .resources-tiles-container,
.block_starredcourses .resources-tiles-container,
.block_recentlyaccessedcourses .resources-tiles-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  padding: 24px 0 0 !important; /* 24px gap under the heading; 0 sides -> grid fills the panel */
}

@media (max-width: 1024px) and (min-width: 601px) {
  .recommended_resources_container .resources-tiles-container,
  .all_resources_container .resources-tiles-container,
  .featured_resources_container .resources-tiles-container,
  .block_starredcourses .resources-tiles-container,
  .block_recentlyaccessedcourses .resources-tiles-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .recommended_resources_container .resources-tiles-container,
  .all_resources_container .resources-tiles-container,
  .featured_resources_container .resources-tiles-container,
  .block_starredcourses .resources-tiles-container,
  .block_recentlyaccessedcourses .resources-tiles-container {
    grid-template-columns: 1fr !important;
  }
}

/* --- Cards stretch to fill their track — same as the Recently Accessed deck
       (width:100% / max-width:none). Height stays proportional from the global
       .resource-tile aspect-ratio 3/4, so they render at the same size as
       Recently Accessed at every breakpoint. --- */
.recommended_resources_container .resources-tiles-container > .resource-tile,
.all_resources_container .resources-tiles-container > .resource-tile,
.featured_resources_container .resources-tiles-container > .resource-tile,
.block_starredcourses .resources-tiles-container > .resource-tile,
.block_recentlyaccessedcourses .resources-tiles-container > .resource-tile {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* =========================================================================
   DARK MODE  (3-tone palette: page #010409 / container #151B23 / sidebar #0D1117)
   The alpha theme toggles dark mode via body.theme-dark / html.dark-mode.
   Its stock dark surfaces are bluish (#1e222e body, #1d202d cards). Per design
   we remap the visible surfaces to a 3-tone dark palette (page #010409,
   container #151B23, sidebar #0D1117), fix the custom panels/headings (which were hardcoded
   for light mode), and force readable light text on resource/activity content
   (the theme leaves some of it low-contrast). This file is bundled site-wide
   and is also linked directly on resource pages, so this covers home,
   dashboard, catalog and resource/related views.
   ========================================================================= */

/* --- PAGE base surfaces (body / .wrapper-course) -> #010409 --- */
body.theme-dark {
  background-color: #010409 !important;
}
body.theme-dark .wrapper-course,
body.theme-dark #region-main,
body.theme-dark #region-main-box,
body.theme-dark .rui-main,
body.theme-dark .rui-main-content,
body.theme-dark #region-main .card,
body.theme-dark .secondary-navigation {
  background-color: #010409 !important;
}

/* --- CONTAINER / block panels -> #151B23 with a hairline border so they stay
       visually separated from the equally-dark page behind them --- */
body.theme-dark .assigned_resources_container,
body.theme-dark .recommended_resources_container,
body.theme-dark .all_resources_container,
body.theme-dark .featured_resources_container,
body.theme-dark .block_starredcourses,
body.theme-dark .block_recentlyaccessedcourses,
body.theme-dark .block_badges,
body.theme-dark .block_calendar_month,
body.theme-dark .recommended-section,
body.theme-dark .related-courses-section {
  background: #151B23 !important;
  border: 1px solid #262b38 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
  color: #ebedf7;
}

/* --- Dashboard block cards: Recently Accessed / Starred / Calendar / Latest
       Badges are <section> elements that also carry the .card class, so the
       page rule (body.theme-dark #region-main .card -> #010409) outranked the
       .block_* panel rule above (its #id beats the plain classes) and painted
       them in the page tone. Re-assert the container tone with a selector that
       includes #region-main AND .card (specificity 1,3,1 > the page rule's
       1,2,1) so these blocks read as #151B23 panels. --- */
body.theme-dark #region-main .card.block_recentlyaccessedcourses,
body.theme-dark #region-main .card.block_starredcourses,
body.theme-dark #region-main .card.block_calendar_month,
body.theme-dark #region-main .card.block_badges {
  background: #151B23 !important;
  background-color: #151B23 !important;
}

/* --- Resource (.custom-activity-wrapper) and Course (.custom-related-page)
       main content wrappers are white content cards in light mode (see the
       theme alpha layout.scss: background-color #FFFFFF), so in dark mode they
       belong to the container tier -- not the page. The base .wrapper-course
       rule had pulled them to the #010409 page tone, leaving resource/course
       content sitting flat on the page. The extra class raises specificity over
       that rule (0,3,1 > 0,2,1) so the content reads as a #151B23 panel like
       the rest of the dark theme. --- */
body.theme-dark .wrapper-course.custom-activity-wrapper,
body.theme-dark .wrapper-course.custom-related-page {
  background-color: #151B23 !important;
}

/* --- Section headings / block titles -> near-white --- */
body.theme-dark .sectionTitles,
body.theme-dark .assigned_resources_container h2,
body.theme-dark .recommended_resources_container h2,
body.theme-dark .all_resources_container h2,
body.theme-dark .featured_resources_container h2,
body.theme-dark .recommended-section h2,
body.theme-dark .related-courses-section h2,
body.theme-dark .block_starredcourses .card-title,
body.theme-dark .block_recentlyaccessedcourses .card-title,
body.theme-dark .block_badges h5,
body.theme-dark .block_calendar_month h5,
body.theme-dark .block_calendar_month h3.title {
  color: #f9f9fa !important;
}

/* --- Card fallback backgrounds (shown only if a cover image is missing) --- */
body.theme-dark .course-card,
body.theme-dark .resource-item-base {
  background-color: #151B23 !important;
  border-color: #2a2f3d !important;
}

/* --- Resource tiles (Recommended, All, Assigned, Starred, Recently Accessed)
       inherit border: 1px solid #ddd from the base .resource-tile rule, which
       reads as a white outline in dark mode. The Related Resources tiles avoid
       this only because they also carry .course-card (darkened above). Match
       every resource tile to that look by darkening the border to the theme
       hairline #262b38 -- the same value the .course-card rule resolves to. --- */
body.theme-dark .resource-tile {
  border-color: #262b38 !important;
}

/* --- Latest Badges block: the badge-name labels were rendering in the dark
       base text color (#07011b) in dark mode -- the block's own inline
       .block_badges .badge-name rule plus an empty theme dark override left
       them dark, so they were nearly invisible on the dark block. Force the
       standard dark-mode text color (higher specificity + !important beats
       both). --- */
body.theme-dark .block_badges .badge-name {
  color: #ebedf7 !important;
}

/* --- Secondary-nav links (Learning Lab Home / Dashboard) --- */
body.theme-dark .secondary-navigation a,
body.theme-dark .secondary-navigation .nav-link,
body.theme-dark .secondary-navigation .navbar-nav .nav-link {
  color: #ebedf7 !important;
}
body.theme-dark .secondary-navigation a:hover,
body.theme-dark .secondary-navigation .nav-link:hover {
  color: #ffffff !important;
}

/* --- Resource / activity body text: force readable light on the dark card
       (description paragraphs, "Theme | Type | Region", dates, lists, tables).
       Links keep their own colour because <a> is not targeted here. Scoped to
       the main region so light pages are unaffected. --- */
body.theme-dark #region-main p,
body.theme-dark #region-main li,
body.theme-dark #region-main td,
body.theme-dark #region-main dt,
body.theme-dark #region-main dd,
body.theme-dark #region-main h4:not([class]),
body.theme-dark #region-main .activity-description,
body.theme-dark #region-main .box,
body.theme-dark #region-main .no-overflow {
  color: #ebedf7 !important;
}
body.theme-dark #region-main .text-muted,
body.theme-dark #region-main .dimmed_text,
body.theme-dark #region-main .text-secondary,
body.theme-dark #region-main small.text-muted {
  color: #b3b7cb !important;
}

/* --- Filter bar (catalog homepage): the .theme-courses-topbar container and
       its filter panel / course-card fallbacks are hardcoded white in
       filters.mustache. Override to #151B23 in dark mode. The (0,2,1)+!important
       specificity beats the template's inline (0,1,0) rule. --- */
body.theme-dark .theme-courses-topbar,
body.theme-dark .resources-filter-set,
body.theme-dark .resources--filter--wrapper,
body.theme-dark .filter-panel,
body.theme-dark .course-card {
  background-color: #151B23 !important;
  border-color: #262b38 !important;
  color: #ebedf7 !important;
}
body.theme-dark .filter-title,
body.theme-dark .theme-courses-topbar .filterBtn {
  color: #ebedf7 !important;
}

/* --- Pagination: kill the white chip around the current page number; use a
       dark surface with a light label so it reads on the #010409 page. --- */
body.theme-dark .m-pagination__link,
body.theme-dark .resources-pagination .page-link,
body.theme-dark #resources-grid .page-link {
  background: #151B23 !important;
  border-color: #262b38 !important;
  color: #ebedf7 !important;
}
body.theme-dark .m-pagination__list .current .m-pagination__link,
body.theme-dark .resources-pagination .page-item.active .page-link,
body.theme-dark #resources-grid .page-item.active .page-link {
  background: #262b38 !important;
  border-color: #3a4150 !important;
  color: #ffffff !important;
}

/* --- Grid gaps showing white: the card grid CONTAINERS (.resources-tiles-
       container on the catalog + .view-cards / the starred view-content div in
       the dashboard blocks) are hardcoded #fff, so their background shows
       through the gap between cards. Make them transparent in dark mode so the
       #151B23 panel behind shows through instead. This does NOT touch the cards
       themselves, so cover images are unaffected. --- */
body.theme-dark .resources-tiles-container,
body.theme-dark .view-cards,
body.theme-dark .block-starredcourses .resources-tiles-container,
body.theme-dark .block-starredcourses .view-cards,
body.theme-dark .block-starredcourses [data-region="starred-courses-view-content"] > div:not([data-region]),
body.theme-dark .assigned_resources_container .resources-tiles-container {
  background-color: transparent !important;
}

/* --- Secondary-nav "pill": the inner nav container that wraps the
       Learning Lab Home / Dashboard tabs keeps a white background in dark mode,
       which hides the (now light) tab text. Make the pill + its tabs dark so the
       text is readable. Covers the theme's possible container class names. --- */
body.theme-dark .secondary-navigation .navigation,
body.theme-dark .secondary-navigation nav,
body.theme-dark .secondary-navigation .moremenu,
body.theme-dark .secondary-navigation ul.more-nav,
body.theme-dark .secondary-navigation .nav-tabs,
body.theme-dark .secondary-navigation .navbar-nav {
  background-color: #151B23 !important;
  border-color: #262b38 !important;
}
body.theme-dark .secondary-navigation .nav-link,
body.theme-dark .secondary-navigation .nav-tabs .nav-link,
body.theme-dark .secondary-navigation a {
  color: #ebedf7 !important;
}
body.theme-dark .secondary-navigation .nav-link.active,
body.theme-dark .secondary-navigation .nav-tabs .nav-link.active {
  color: #ffffff !important;
  background-color: #262b38 !important;
}

/* --- Topbar tabs pill (Learning Lab Home / Dashboard). The real markup is
       div.primary-navigation > nav.moremenu > ul#moremenu-topbar > li.nav-item
       (NOT .secondary-navigation), and #moremenu-topbar carries a white
       background that survived into dark mode, hiding the tab labels. Make the
       pill transparent so the dark topbar shows through, and force the labels
       to a readable light tone that matches the other topbar items. --- */
body.theme-dark .primary-navigation,
body.theme-dark nav.moremenu,
body.theme-dark .moremenu.navigation,
body.theme-dark #moremenu-topbar,
body.theme-dark #moremenu-topbar.more-nav,
body.theme-dark .primary-navigation .nav-item,
body.theme-dark #moremenu-topbar .nav-item {
  background-color: transparent !important;
  border-color: transparent !important;
}
body.theme-dark #moremenu-topbar .nav-link,
body.theme-dark #moremenu-topbar .nav-item a,
body.theme-dark .primary-navigation .nav-link,
body.theme-dark .moremenu .nav-link {
  color: #ebedf7 !important;
}
body.theme-dark #moremenu-topbar .nav-link:hover,
body.theme-dark #moremenu-topbar .nav-link.active,
body.theme-dark .primary-navigation .nav-link.active {
  background-color: #262b38 !important;
  color: #ffffff !important;
}

/* ============================ DRAWER + NOTIFICATIONS ====================== */

/* --- Primary slide-out drawer (hamburger menu). Make the panel + its menu
       items use the dark surface and readable text. The active item ("My
       Resources") was rendering as a white pill, hiding its label; give active
       items a dark highlight with light text instead. --- */
body.theme-dark .drawercontent,
body.theme-dark [data-region="drawer"],
body.theme-dark #theme_alpha-drawers-primary,
body.theme-dark .drawer.drawer-primary,
body.theme-dark #nav-drawer {
  background-color: #0D1117 !important;
}
body.theme-dark .drawercontent .list-group-item,
body.theme-dark #theme_alpha-drawers-primary .list-group-item,
body.theme-dark [data-region="drawer"] .list-group-item,
body.theme-dark .drawercontent .list-group-item a,
body.theme-dark .drawercontent .nav-link {
  background-color: transparent !important;
  color: #ebedf7 !important;
}
body.theme-dark .drawercontent .list-group-item.active,
body.theme-dark [data-region="drawer"] .list-group-item.active,
body.theme-dark .drawercontent .list-group-item[aria-current="true"],
body.theme-dark .drawercontent .list-group-item:hover {
  background-color: #262b38 !important;
  color: #ffffff !important;
}
body.theme-dark .drawercontent .list-group-item.active .badge,
body.theme-dark .drawercontent .list-group-item .badge {
  background-color: #3a4150 !important;
  color: #ebedf7 !important;
}

/* --- Notifications (and message) popover. The panel + its items are showing a
       white background in dark mode; force the dark surface and lift the
       low-contrast text. Teal action links/buttons keep their own colour. --- */
body.theme-dark .popover-region-container,
body.theme-dark .popover-region-content-container,
body.theme-dark .popover-region-content,
body.theme-dark .popover-region .content-item-container,
body.theme-dark .popover-region-notifications .popover-region-content,
body.theme-dark .notification-area,
body.theme-dark .notification-area .content,
body.theme-dark .notification-area .content-item-container,
body.theme-dark [data-region="popover-region-container"],
body.theme-dark [data-region="popover-region-content"] {
  background-color: #151B23 !important;
  border-color: #262b38 !important;
}
body.theme-dark .popover-region-container .content-item-container,
body.theme-dark .popover-region-container .name,
body.theme-dark .popover-region-header-container,
body.theme-dark .popover-region-container h5,
body.theme-dark .popover-region-container .title,
body.theme-dark .notification-area .preview {
  color: #ebedf7 !important;
}
body.theme-dark .popover-region-container .timestamp,
body.theme-dark .popover-region-container .text-muted,
body.theme-dark .notification-area .date,
body.theme-dark .popover-region-container small {
  color: #b3b7cb !important;
}
/* dividers between notification rows */
body.theme-dark .popover-region-container .content-item-container:after,
body.theme-dark .popover-region-container .content-item-container + .content-item-container {
  background-color: #262b38 !important;
  border-color: #262b38 !important;
}

/* ===== DRAWER + NOTIFICATIONS: text contrast (round 2) =================== */
/* The primary drawer is #nav-drawer (my earlier rules were scoped to
   .drawercontent and never reached it). Brighten every label and turn the
   white active "My Resources" pill into a dark highlight. */
body.theme-dark #nav-drawer,
body.theme-dark #nav-drawer .drawercontent {
  background-color: #0D1117 !important;
}
body.theme-dark #nav-drawer .list-group-item,
body.theme-dark #nav-drawer .list-group-item *:not(.badge),
body.theme-dark #nav-drawer a,
body.theme-dark #nav-drawer .nav-link,
body.theme-dark #nav-drawer span {
  color: #ebedf7 !important;
}
body.theme-dark #nav-drawer input,
body.theme-dark #nav-drawer input::placeholder {
  color: #ebedf7 !important;
}
/* Active / current / hover item -> dark highlight instead of white pill */
body.theme-dark #nav-drawer .list-group-item.active,
body.theme-dark #nav-drawer .list-group-item[aria-current="true"],
body.theme-dark #nav-drawer .list-group-item[aria-current="page"],
body.theme-dark #nav-drawer .list-group-item:hover,
body.theme-dark #nav-drawer .list-group-item:has(.badge) {
  background-color: #262b38 !important;
}
body.theme-dark #nav-drawer .list-group-item.active,
body.theme-dark #nav-drawer .list-group-item.active *,
body.theme-dark #nav-drawer .list-group-item:has(.badge),
body.theme-dark #nav-drawer .list-group-item:has(.badge) *:not(.badge) {
  color: #ffffff !important;
}
body.theme-dark #nav-drawer .list-group-item .badge {
  background-color: #3a4150 !important;
  color: #ebedf7 !important;
}
/* Drawer icons that are inline SVG follow currentColor; brighten image icons */
body.theme-dark #nav-drawer .list-group-item .icon {
  color: #ebedf7 !important;
}

/* Notifications popover: the item titles live in inner spans that override the
   container colour, so force all non-link text light (links/buttons keep their
   teal). Timestamps get a softer muted-light. */
body.theme-dark .popover-region-container,
body.theme-dark .popover-region-container *:not(a):not(.btn):not(button):not(.icon) {
  color: #ebedf7 !important;
}
body.theme-dark .popover-region-container .timestamp,
body.theme-dark .popover-region-container small,
body.theme-dark .popover-region-container .text-muted,
body.theme-dark .notification-area .date {
  color: #b3b7cb !important;
}

/* --- Notification icon chip: the .notification-image box stays white in dark
       mode. Make it blend into the dark panel and invert the (dark) icon so it
       stays visible on the dark surface. --- */
body.theme-dark .popover-region-container .notification-image,
body.theme-dark .content-item-container .notification-image,
body.theme-dark .notification-image,
body.theme-dark .notification-area .image-container,
body.theme-dark .notification-area .image-container img {
  background-color: transparent !important;
  border-color: #262b38 !important;
}
body.theme-dark .popover-region-container .notification-image img,
body.theme-dark .content-item-container .notification-image img,
body.theme-dark .notification-image img {
  filter: invert(1) brightness(1.7) !important;
}

/* --- Resource header meta-row (author / date): these spans carry an inline
       color:#333 in the markup, invisible on the dark page. Override to white
       in dark mode (a stylesheet !important rule beats the inline value). --- */
body.theme-dark .resource-extra-row span,
body.theme-dark .resource-author span,
body.theme-dark .resource-date span,
body.theme-dark .resource-copy span,
body.theme-dark .resource-download span,
body.theme-dark [id^="iconrow_activity"] span {
  color: #ffffff !important;
}

/* --- "Partner" visibility badge: it's a light pill (inline background:#f8f9fa)
       so the now-white label was invisible on it. Turn the pill into a dark
       chip in dark mode so its white label + lock icon read correctly. --- */
body.theme-dark .resource-visibility {
  background-color: #262b38 !important;
  border-color: #3a4150 !important;
  color: #ffffff !important;
}
body.theme-dark .resource-visibility .resource-visibility-label,
body.theme-dark .resource-visibility .icon,
body.theme-dark .resource-visibility i {
  color: #ffffff !important;
}

/* --- Light mode: the notification icon chip (.notification-image) keeps a
       white box that doesn't blend when a row is hovered (ash highlight).
       Make the chip transparent so it inherits the row background in both the
       normal and hovered states. (Dark mode already handles this above, with an
       inverted icon.) --- */
.popover-region-container .notification-image,
.content-item-container .notification-image,
.notification-area .notification-image,
.notification-image,
.notification-image img {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* ===== Dashboard: match Recently Accessed + Starred card width to Assigned ===
   Assigned uses .resources-tiles-container -> 4x(1fr) grid, 20px gap, cards at
   width:100% (~297px in the 1260px inner area). These two blocks instead use
   .rui-course-card-deck (Recently Accessed, fixed-width 279px cards) and a
   .resources-tiles-container that wasn't picking up the 4-col rhythm, so their
   cards came out 279px. Force the same grid + full-width cards on ONLY these
   two blocks (container width is already correct). */
@media (min-width: 992px) {
  .block_recentlyaccessedcourses .resources-tiles-container,
  .block_recentlyaccessedcourses .rui-course-card-deck,
  .block_recentlyaccessedcourses .view-cards,
  .block-recentlyaccessedcourses .resources-tiles-container,
  .block-recentlyaccessedcourses .rui-course-card-deck,
  .block-recentlyaccessedcourses .view-cards,
  .block_starredcourses .resources-tiles-container,
  .block_starredcourses .rui-course-card-deck,
  .block_starredcourses .view-cards,
  .block-starredcourses .resources-tiles-container,
  .block-starredcourses .rui-course-card-deck,
  .block-starredcourses .view-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    flex-flow: row wrap !important;
    overflow: visible !important;
  }
  .block_recentlyaccessedcourses .resources-tiles-container > .resource-tile,
  .block_recentlyaccessedcourses .rui-course-card-deck > .resource-tile,
  .block-recentlyaccessedcourses .resources-tiles-container > .resource-tile,
  .block-recentlyaccessedcourses .rui-course-card-deck > .resource-tile,
  .block_starredcourses .resources-tiles-container > .resource-tile,
  .block_starredcourses .rui-course-card-deck > .resource-tile,
  .block-starredcourses .resources-tiles-container > .resource-tile,
  .block-starredcourses .rui-course-card-deck > .resource-tile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}
/* Tablet: 3 columns, matching the Assigned breakpoint rhythm */
@media (min-width: 768px) and (max-width: 991.98px) {
  .block_recentlyaccessedcourses .resources-tiles-container,
  .block_recentlyaccessedcourses .rui-course-card-deck,
  .block-recentlyaccessedcourses .resources-tiles-container,
  .block-recentlyaccessedcourses .rui-course-card-deck,
  .block_starredcourses .resources-tiles-container,
  .block_starredcourses .rui-course-card-deck,
  .block-starredcourses .resources-tiles-container,
  .block-starredcourses .rui-course-card-deck {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    overflow: visible !important;
  }
}

/* Match Recently Accessed + Starred card HEIGHT to Assigned (400px). */
.block_recentlyaccessedcourses .resources-tiles-container > .resource-tile,
.block_recentlyaccessedcourses .rui-course-card-deck > .resource-tile,
.block-recentlyaccessedcourses .resources-tiles-container > .resource-tile,
.block-recentlyaccessedcourses .rui-course-card-deck > .resource-tile,
.block_starredcourses .resources-tiles-container > .resource-tile,
.block_starredcourses .rui-course-card-deck > .resource-tile,
.block-starredcourses .resources-tiles-container > .resource-tile,
.block-starredcourses .rui-course-card-deck > .resource-tile {
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
}

/* =========================================================================
   Dashboard (/my/) top spacing: make the gap between the secondary nav bar
   and the first panel 30px, matching the inter-panel gaps (and the homepage).
   Collapse the empty page-header / notifications spacers, then nudge the
   panel stack up so the top gap equals the 30px panel rhythm.
   ========================================================================= */
.wrapper-course.custom_dashboard > .page-header-content,
.wrapper-course.custom_dashboard > .notifications {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.wrapper-course.custom_dashboard .rui-dashboard-top {
  margin-top: -9px !important;
}