/*
 * 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.
 */

/* Attachments
/* --------------------------------------------------------------------------
   Lexxy centres every attachment and underlines links inside content, which
   suits an image or a video but leaves a file card floating and stripy.
   `.lexxy-content .attachment--*` outranks Lexxy's `:where(.lexxy-content)`,
   which carries no specificity at all, so these win wherever they are loaded. */

.lexxy-content .attachment {
  margin-block: 1.5rem;
}

.lexxy-content .attachment--document,
.lexxy-content .attachment--video,
.lexxy-content .attachment--audio {
  inline-size: 100%;
  margin-inline: 0;
  text-align: left;
}

.lexxy-content .attachment__media {
  inline-size: 100%;
  border-radius: 0.5rem;
}

.lexxy-content .attachment--video video {
  max-block-size: 70vh;
  background: #000;
}

.lexxy-content .attachment__image {
  border-radius: 0.5rem;
}

/* Document cards ---------------------------------------------------------- */

.lexxy-content .attachment__card,
.lexxy-content .attachment__card:visited {
  display: block;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.lexxy-content .attachment__card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.08);
}

/* The preview panel. A PDF fills it with its first page; anything without a
   previewer gets ruled lines, which reads as "document" without pretending
   to show contents we cannot render. */
.lexxy-content .attachment__sheet {
  display: block;
  block-size: 11rem;
  background: #f8fafc;
  border-block-end: 1px solid #e2e8f0;
  overflow: hidden;
}

/* contain, not cover: a first page cropped to fill a wide panel shows an
   empty margin and reads as a broken image. */
.lexxy-content .attachment__page {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.75rem;
}

/* A spreadsheet has no previewer. Ruled rows with a tinted header read as
   "sheet" without pretending to show contents we cannot parse. */
.lexxy-content .attachment__sheet--ruled {
  block-size: 7rem;
  background-image:
    linear-gradient(#eef2f7 1.75rem, transparent 1.75rem),
    linear-gradient(#e2e8f0 1px, transparent 1px),
    linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
  background-size: 100% 100%, 100% 1.75rem, 8rem 100%;
}

.lexxy-content .attachment__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem;
}

.lexxy-content .attachment__card .attachment__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Carousels ---------------------------------------------------------------
   Shared by the galleries inside rich text and by a collection's own media. The
   chrome is the same for both; only the slide sizing differs, because one of
   them has to undo what Lexxy does to an attachment. */

.carousel {
  --swiper-theme-color: #0f172a;
  /* Swiper 14 injects an <svg class="swiper-navigation-icon"> rather than the
     ::after font glyph older versions used, so --swiper-navigation-size does
     nothing here; the icon is sized below instead. */
  --swiper-navigation-sides-offset: 0.75rem;
}

/* In flow rather than floated over the slide: a caption under a photo would
   otherwise have the dots running through the middle of it. */
.carousel .swiper-pagination {
  position: static;
  margin-block-start: 0.75rem;
}

.carousel .swiper-button-next,
.carousel .swiper-button-prev {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 9999px;
  color: #0f172a;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.12), 0 4px 12px rgb(15 23 42 / 0.12);
  backdrop-filter: blur(4px);
  transition: background-color 120ms ease, transform 120ms ease;
}

.carousel .swiper-button-next:hover,
.carousel .swiper-button-prev:hover {
  background: #fff;
  transform: scale(1.06);
}

/* The icon is 11x20 in its viewBox. Left to fill the button it stretches to a
   square and the chevron spills past the circle. */
.carousel .swiper-navigation-icon {
  inline-size: 0.55rem;
  block-size: 1rem;
}

/* Doubled up: swiper.css sorts after this file, so an override that only
   matches its specificity loses and a dead arrow sits at 35% instead. */
.carousel .swiper-button-next.swiper-button-disabled,
.carousel .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}

.carousel .swiper-pagination-bullet-active {
  background: #0f172a;
}

/* Rich text galleries ----------------------------------------------------- */

.lexxy-content .attachment-gallery {
  inline-size: 100%;
  margin-inline: 0;
}

/* Swiper's slides are the <action-text-attachment> wrappers, marked by the
   galleries controller. Lexxy sizes gallery attachments to a third of the row,
   which has to be undone or every slide shows three-up inside one slide. */
.lexxy-content .attachment-gallery .swiper-slide {
  display: block;
  inline-size: 100%;
  flex-shrink: 0;
  margin: 0;
}

.lexxy-content .attachment-gallery .attachment {
  display: block;
  inline-size: 100%;
  margin-block: 0;
  margin-inline: 0;
}

.lexxy-content .attachment-gallery .attachment__image {
  inline-size: 100%;
  block-size: 24rem;
  object-fit: cover;
}