/* ==========================================================================
   Thaagam tweaks on top of the Edupls theme.
   Deliberately small: style.scoped.css / responsive.scoped.css do the work.
   Everything that targets theme markup is prefixed with .edupls-scope, to
   match the scoped theme build and stay clear of base.html's header/footer.
   ========================================================================== */

/* The theme was built as a full page; here it is one section inside the site
   chrome, so it must not add its own page-level gutters. Ensure full width
   layout - fix for content being pushed to left */
.edupls-scope {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

/* Ensure sections stretch full width */
.edupls-scope section {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Undo base.html's site-wide CSS where it reaches into the theme.

   base.html loads styles.min.css / responsive.min.css / mobile.min.css before
   this file, and four of their rules match generic class names the theme also
   uses. Each one below restores what the theme itself expects. This list was
   produced by testing every base selector against the rendered page, so it is
   exhaustive as of that check - re-run it if base's stylesheets change.
   -------------------------------------------------------------------------- */

/* styles.min.css: `.banner { height: 500px }` crushes the hero. The theme
   sets no height at all - the hero is sized by .banner-content.v1's padding. */
.edupls-scope .banner {
  height: auto;
}

/* responsive.min.css: `.counter { font-size: 40px }` overrides the counters in
   the hero and the award list. The theme gives them no size of their own; they
   are meant to inherit from their heading. */
.edupls-scope .counter {
  font-size: inherit;
  line-height: inherit;
}

/* mobile.min.css: `.tab-pane.fade.show` adds a slide-in animation intended for
   the site's own tabs. The causes grid is not one of those. */
.edupls-scope .tab-pane.fade.show {
  animation: none;
}

/* causes_category.min.css is loaded for the donation wizard and lands AFTER
   the theme CSS, so these two win on order. The wizard itself sits outside
   .edupls-scope, so neutralising them here costs the modal nothing. */

/* Its `.container { padding: 0 !important }` strips the theme's gutters, so
   the counter has to carry !important too. 0 10px is the theme's own value
   and it never changes it at any breakpoint. Ensure containers are centered. */
.edupls-scope .container,
.edupls-scope .container-fluid,
.edupls-scope .container-lg,
.edupls-scope .container-fluid-sm {
  padding: 0 10px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Its `.section-title` sets type styles the theme deliberately leaves to the
   children (.sub-title / .big-title / .title-para), so let them inherit
   again. Note: margin-bottom is intentionally NOT restated here - the theme
   sets it, and repeating it would outrank the responsive breakpoints. */
.edupls-scope .section-title {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Cause filtering hides cards with the `hidden` attribute, but Bootstrap's
   .col-* rules set `display:block` and win on specificity. */
.edupls-scope .cause-col[hidden] {
  display: none !important;
}

/* Empty state: a filter that matches nothing, or no published causes yet. */
.edupls-scope .no-cause-note {
  width: 100%;
  margin: 20px 0 0;
  padding: 48px 24px;
  border: 1px dashed var(--color-border, #dde0e9);
  border-radius: 8px;
  background: #fff;
  color: var(--color-paragraph, #7b7e86);
  font-size: 16px;
  text-align: center;
}

/* The theme's card title/image link to a course page; ours open the donation
   wizard, so give them the same affordance as the button. */
.edupls-scope .courses-cards-content .courses-title a,
.edupls-scope .courses-cards-content .courses-img a,
.edupls-scope .courses-cards .nav-tabs .nav-link {
  cursor: pointer;
}

/* Cause images come from the CMS at mixed aspect ratios; the demo's were all
   uniform. Crop rather than letterbox. */
.edupls-scope .courses-cards-content .courses-img {
  overflow: hidden;
}

.edupls-scope .courses-cards-content .courses-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.edupls-scope .courses-cards-content .admin-img img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* The donation wizard sits outside .edupls-scope, so it needs no theme
   overrides - only a stacking context above the site header. */
#education-modal-container .modal {
  z-index: 1090;
}

#education-modal-container .modal-backdrop {
  z-index: 1085;
}

@media (max-width: 767px) {
  .edupls-scope .courses-cards-content .courses-img img {
    height: 220px;
  }
}