/* TEMPORARY (Asset Injector) — UDS story/horizontal card styling for
   React-rendered cards. Mirrors src/components/cards/_react-cards.scss
   (story + horizontal subset). Remove this entry once the theme's Mix
   build ships the compiled CSS, or it will double up (harmlessly). */

.card.cards-components {
  --card-child-padding: 2rem;
  --card-child-margin: 0;
  isolation: isolate;
}
@media (max-width: 767.98px) {
  .card.cards-components {
    --card-child-padding: 1.5rem;
  }
}
.card.cards-components .card-content-wrapper {
  --card-content-wrapper-padding: 1.5rem;
  --card-child-padding: 0;
  --card-child-margin: 0;
  padding: var(--card-content-wrapper-padding);
  padding-bottom: 0 !important;
}
.card.cards-components .card-header {
  flex-grow: 1;
  margin-left: var(--card-child-margin);
  margin-right: var(--card-child-margin);
  padding: var(--card-child-padding) var(--card-child-padding) 16px var(--card-child-padding);
}
.card.cards-components .card-body {
  flex-grow: 100;
  margin-left: var(--card-child-margin);
  margin-right: var(--card-child-margin);
  padding: 0 var(--card-child-padding) 24px var(--card-child-padding);
}
.card.cards-components .card-link {
  margin-left: var(--card-child-margin);
  margin-right: var(--card-child-margin);
  padding: 0 var(--card-child-padding) 24px var(--card-child-padding);
}
.card.cards-components .card-footer,
.card.cards-components .card-tags {
  border-top: 0;
  margin-left: var(--card-child-margin);
  margin-right: var(--card-child-margin);
  padding: 0 var(--card-child-padding) 24px var(--card-child-padding);
}
.card.cards-components .card-button {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-left: var(--card-child-margin);
  margin-right: var(--card-child-margin);
  margin-top: auto;
  padding: 0 var(--card-child-padding) 24px var(--card-child-padding);
  row-gap: 1rem;
}
.card.cards-components > div:last-child {
  padding-bottom: var(--card-child-padding);
}
.card.cards-components .card-img-top {
  --card-img-top-height: 12.5rem;
  height: var(--card-img-top-height);
  max-width: var(--card-img-top-max-width, 100%);
  min-width: var(--card-img-top-min-width);
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .card.cards-components .card-img-top {
    --card-img-top-height: 160px;
  }
  .card.cards-components .card-buttons .card-button {
    display: inline;
    padding-right: 0;
  }
}
.card.cards-components.card-horizontal {
  flex-direction: row;
}
.card.cards-components.card-horizontal > a {
  --card-img-top-max-width: 100%;
  --card-img-top-min-width: 100%;
  min-width: 40%;
  overflow: hidden;
  width: 40%;
}
.card.cards-components.card-horizontal .card-img-top {
  aspect-ratio: 2/3;
  height: auto;
  max-height: 400px;
  max-width: var(--card-img-top-max-width, 40%);
  min-width: var(--card-img-top-min-width, 40%);
}
@media (max-width: 767.98px) {
  .card.cards-components.card-horizontal {
    flex-direction: column;
  }
  .card.cards-components.card-horizontal > a {
    width: 100% !important;
  }
  .card.cards-components.card-horizontal .card-img-top {
    --card-img-top-max-width: 100%;
    height: 160px !important;
  }
}
.card.cards-components.card-story {
  --card-child-margin: 1rem;
  --card-child-padding: 1rem;
}
.card.cards-components.card-story .card-body,
.card.cards-components.card-story .card-button,
.card.cards-components.card-story .card-footer,
.card.cards-components.card-story .card-header,
.card.cards-components.card-story .card-link,
.card.cards-components.card-story .card-tags {
  background-color: #fff;
}

.card.cards-components.card-story .card-footer {
  padding: 1rem 24px;
}
.card.cards-components.card-story .card-img-top {
  margin-bottom: -48px;
}
.card.cards-components.card-story.card-horizontal {
  --card-child-margin: 1rem;
  --card-child-padding: 1.5rem;
}
.card.cards-components.card-story.card-horizontal .card-img-top {
  margin-bottom: 0;
  margin-right: -32px;
  position: relative;
  z-index: 0;
  max-height: none;
}
.card.cards-components.card-story.card-horizontal .card-content-wrapper {
  background-color: #fff;
  margin-bottom: 16px;
  margin-top: 16px;
  position: relative;
  z-index: 100;
}
@media (max-width: 767.98px) {
  .card.cards-components.card-story.card-horizontal {
    --card-child-padding: 1rem;
  }
  .card.cards-components.card-story.card-horizontal .card-content-wrapper {
    margin: -24px 16px 0;
  }
}
@media (min-width: 992px) {
  .col-lg-6 .card.cards-components .card-img-top {
    --card-img-top-height: 240px;
  }
  .col-lg-6 .card.cards-components.card-horizontal > a {
    --card-img-top-max-width: 100%;
    --card-img-top-min-width: 100%;
    min-width: 40%;
    width: 40%;
  }
  .col-lg-6 .card.cards-components.card-horizontal .card-img-top {
    --card-img-top-height: auto;
  }
}
.uds-card-arrangement-card-container .card-wrapper {
  display: grid;
}

/*
 * TEMP FIX — mobile sidebar top divider.
 *
 * Renovation ships `@media (max-width: 767.98px) { .sidebar { border-top: 0 } }`
 * to prevent a doubled 1px line where .sidebar-toggler supplies the top edge.
 * Thunderbird sets `renovation/style: false` and pins the toggler to
 * `display: none`, so nothing draws that edge — the rule is orphaned dead code
 * that removes the sidebar's only top border below 768px.
 *
 * PERMANENT FIX: change `border-top: 0` to `border-top: 1px solid #d0d0d0`
 * in the subtheme's sidebar SCSS partial. Delete this injector once that ships.
 * If the toggler is ever restored on mobile, DO NOT keep this — the doubling
 * this rule was written to prevent comes back.
 */
@media (max-width: 767.98px) {
  nav.sidebar,
  nav.sidebar.collapse {
    border-top: 1px solid #d0d0d0;
  }
}