/*
 * The collections (plan 12, stage 4, work package D; Figma 52:1097, 54:2848 and 56:2279): the
 * list's cards, a collection's head and its ordered items, and the «احفظ اللحظة» sheet. The
 * kit's sheets stay as they were; what the collections add is here (D12.99).
 */

/* A collection's card: no chrome, as the video card; the mosaic carries the shape. */
.lq-ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lq-ccard__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
}

/* The first items' pictures in one 16:9 box: one fills it, two side by side, three and four tiled. */
.lq-ccard__mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--ink-700) 14%, var(--ink-950) 86%);
}

.lq-ccard__mosaic img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.lq-ccard__mosaic--2,
.lq-ccard__mosaic--3,
.lq-ccard__mosaic--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lq-ccard__mosaic--3,
.lq-ccard__mosaic--4 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.lq-ccard__mosaic--3 img:first-child {
  grid-row: 1 / -1;
}

/* No pictures yet: the bookmark, amber as the design's empty state draws it. */
.lq-ccard__blank {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-amber);
}

.lq-ccard__blank .lq-icon {
  width: 32px;
  height: 32px;
}

.lq-ccard__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lq-ccard__name {
  display: -webkit-box;
  overflow: hidden;
  font: 500 16px / 24px var(--font-ui);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.lq-ccard__meta {
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-ccard__by {
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-ccard:hover .lq-ccard__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Rename and delete sit on the mosaic, above the card's link, so they can be pressed. */
.lq-ccard__tools {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  z-index: 1;
  display: flex;
  gap: 4px;
}

/* «عرض المزيد» under the grid. */
.lq-collections-more {
  display: flex;
  justify-content: center;
  margin-block-start: 8px;
}

/* A collection's head: the name and what it is at the start, the actions at the end. */
.lq-chead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin-block-end: 24px;
}

.lq-chead__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: min(100%, 280px);
  max-width: 64ch;
}

.lq-chead__text h1:focus {
  outline: none;
}

.lq-chead__description {
  color: var(--color-text-secondary);
  font: 400 16px / 28px var(--font-ui);
  white-space: pre-line;
}

.lq-chead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

/*
 * The items: the kit's sortable list, each item a row as Figma's MomentRow and VideoRow, drawn
 * on the page with a line between them as 52:1097 does (stage 8, package I); the row taken by a
 * drag lifts into a box of its own.
 */
.lq-citems .lq-sortable {
  gap: 0;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-citems .lq-sortable__item {
  padding: 24px 0;
  padding-inline-start: 0;
  border: 0;
  border-block-end: 1px solid var(--color-border-default);
  border-radius: 0;
  background: transparent;
}

.lq-citems .lq-sortable__item[data-grabbed] {
  border: 1px solid var(--color-border-focus);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

.lq-citem {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.lq-citem > .lq-thumb,
.lq-citem__gone-icon {
  flex: none;
  width: 178px;
}

.lq-citem__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lq-citem__title {
  font: 600 18px / 28px var(--font-ui);
  overflow-wrap: anywhere;
}

.lq-citem--moment .lq-citem__title {
  font: 500 16px / 24px var(--font-ui);
}

.lq-citem__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.lq-citem__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/*
 * What is said in the moment (R10; Figma MomentRow's quote, 52:1228): in the transcript's style
 * (17 on 32, ink), the row's main words; the page's search words under the amber highlighter
 * inside it. The title above it steps down to name the video (below), as a search's moment does.
 */
.lq-citem__quote {
  margin: 0;
  color: var(--color-text-primary);
  font: 400 17px / 32px var(--font-ui);
  overflow-wrap: anywhere;
}

/* The member's own note on the item: set off by a line, not by amber, which is the moment's. */
.lq-citem__note {
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font: 400 15px / 26px var(--font-ui);
  overflow-wrap: anywhere;
}

.lq-citem__time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

/* The bounds read left to right, as time does. */
.lq-citem__range {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--color-text-secondary);
}

.lq-citem__dash {
  color: var(--color-text-muted);
}

.lq-citem__length {
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-citem__track {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  color: var(--color-text-muted);
}

.lq-citem__track .lq-track {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.lq-citem__kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-citem__kind .lq-icon {
  width: 14px;
  height: 14px;
}

.lq-citem__side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 168px;
}

.lq-citem__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* An item whose video went away: no picture, a plain word, and its own data kept. */
.lq-citem__gone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.lq-citem__gone-icon .lq-icon {
  width: 28px;
  height: 28px;
}

.lq-citem--gone .lq-citem__title {
  color: var(--color-text-secondary);
}

.lq-citem__hint {
  color: var(--color-text-muted);
  font: 400 14px / 24px var(--font-ui);
}

/* Focus moved to a row after a change stays clear of the sticky bars (WCAG 2.4.11). */
.lq-citems button,
.lq-citems a,
.lq-chead h1 {
  scroll-margin-block: calc(var(--topbar-height) + 16px) calc(var(--tabbar-height) + 16px);
}

/* A row with a quote (R10): the title steps down to name the video above what is said. */
.lq-citem--quoted .lq-citem__title {
  font: 400 14px / 22px var(--font-ui);
}

.lq-citem--quoted .lq-citem__title a {
  color: var(--color-text-secondary);
}

@media (max-width: 1023px) {
  /* On a tablet the row has no room for three columns: the handle and the move buttons on one
     line, the row under them at full width, and its side under its body. */
  .lq-citems .lq-sortable__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 12px;
  }

  .lq-citems .lq-sortable__handle {
    grid-column: 1;
    grid-row: 1;
  }

  .lq-citems .lq-sortable__moves {
    grid-column: 3;
    grid-row: 1;
    margin-inline-start: 0;
  }

  .lq-citem {
    flex-wrap: wrap;
  }

  .lq-citems .lq-citem {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .lq-citem__side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .lq-citem {
    flex-direction: column;
    gap: 12px;
  }

  .lq-citem > .lq-thumb,
  .lq-citem__gone-icon {
    width: 100%;
  }

  .lq-citem__title {
    font-size: 16px;
    line-height: 24px;
  }

  .lq-chead {
    margin-block-end: 16px;
  }
}

/* The «احفظ اللحظة» sheet: the video, the moment's bounds, a note, and the collections as chips. */
.lq-save-moment {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lq-save-moment__context {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lq-save-moment__context > .lq-thumb {
  flex: none;
  width: 72px;
  border-radius: 8px;
}

.lq-save-moment__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lq-save-moment__title {
  overflow: hidden;
  font: 500 14px / 20px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-save-moment__readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.lq-save-moment__kind {
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-save-moment__pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lq-save-moment__pick legend {
  padding: 0;
  margin-block-end: 8px;
}

/* No collection yet (54:2848): the drawn picture, larger words, and the other way in a box. */
.lq-cempty {
  gap: 16px;
  padding-block: 96px 48px;
}

.lq-cempty__art {
  width: 200px;
  height: auto;
  margin-block-end: 40px;
}

.lq-cempty__ink {
  fill: var(--color-text-primary);
}

.lq-cempty__amber {
  fill: var(--color-accent-amber);
}

.lq-cempty__line {
  fill: var(--color-border-strong);
}

.lq-cempty__live {
  fill: var(--color-status-live);
}

.lq-cempty__text {
  max-width: 60ch;
  font-size: 18px;
  line-height: 30px;
}

.lq-cempty > .lq-note {
  margin-block-start: 24px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

/*
 * «ابحث في المجموعات» over the cards (R10; the list pane's field in 52:1097, 52:1132): 36 high,
 * the 16 icon at its start. On the page's canvas it keeps the kit's light frame, where the
 * design's pane had a white ground to set its subtle field off.
 */
.lq-collections-tools {
  display: flex;
  justify-content: flex-start;
}

.lq-collections-tools > .lq-tsearch {
  flex: 0 1 320px;
}

.lq-collections-tools .lq-tsearch__input {
  min-height: 36px;
  padding-block: 5px;
  border-color: var(--color-border-default);
}

.lq-collections-tools .lq-tsearch__box > .lq-icon {
  width: 16px;
  height: 16px;
}

/* Hidden wins over the display these rules set: a box the module hides stays hidden. */
.lq-collections-tools[hidden],
.lq-collections-more[hidden],
.lq-chead .lq-cluster[hidden],
.lq-save-moment__context[hidden],
.lq-citem__track[hidden],
.lq-page .lq-btn[hidden] {
  display: none;
}