/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.truncate-fade {
  line-clamp: 3;
  -webkit-line-clamp: 3;
  overflow: hidden;
  position: relative;
  max-height: 20em; /* Adjust based on line-height and number of lines */
}

.truncate-fade::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 7em;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(var(--color-bg)));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0), var(--color-bg) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-bg) 100%);
}

.font-family-fancy {
  font-family: var(--font-antique);
}

.backdrop-blur {
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

/* .backdrop-blur-lg { */
/*   backdrop-filter: var(--blur-lg); */
/*   -webkit-backdrop-filter: var(--blur-lg); */
/* } */

.logo {
  backdrop-filter: var(--brightness-125);
  -webkit-backdrop-filter: var(--brightness-125);
  background-color: var(--color-bg-translucent);
  border-radius: var(--rounded);
}

@media print {
  .print--hidden {
    display: none !important;
  }

  .print:not(:empty) {
    display: block !important;
  }
}