/*
 * LogiCh Media – gallery and file list below the article. Neutral on any template; a template can tune it with
 * these variables (the LogiCh template sets them from its colours):
 *   --lc-media-accent   links, focus, download icon      --lc-media-border   lines and card borders
 *   --lc-media-muted    secondary text                   --lc-media-surface  card and button background
 *   --lc-media-tint     image placeholder background     --lc-media-radius   corner radius
 *   --lc-media-gap      space between gallery images
 */
.lc-media {
  --_accent: var(--lc-media-accent, #0060a8);
  --_border: var(--lc-media-border, #dde3e8);
  --_muted: var(--lc-media-muted, #4c5663);
  --_surface: var(--lc-media-surface, #fff);
  --_tint: var(--lc-media-tint, #f1f4f7);
  --_radius: var(--lc-media-radius, 8px);
  --_gap: var(--lc-media-gap, 10px);
  display: grid; gap: 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--_border);
}
.lc-media__title { font-size: 1.25rem; margin: 0 0 14px; }
.lc-media__count { color: var(--_muted); font-weight: 400; }

/* gallery */
.lc-media__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--_gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}
.lc-media__cell { margin: 0; }
.lc-media__cell[hidden] { display: none; }
.lc-media__link { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--_radius); background: var(--_tint); }
.lc-media__link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.lc-media__link:hover img { transform: scale(1.04); }
.lc-media__link:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }
.lc-media__more { margin: 14px 0 0; }
.lc-media__button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; cursor: pointer;
  border: 1px solid var(--_border); border-radius: var(--_radius);
  background: var(--_surface); color: var(--_accent); font: inherit; font-weight: 600;
}
.lc-media__button:hover { border-color: var(--_accent); }
.lc-media__button:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }

/* files */
.lc-media__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-media__file { margin: 0; }
.lc-media__file-link {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; gap: 14px; align-items: center;
  padding: 12px 14px; text-decoration: none; color: inherit;
  border: 1px solid var(--_border); border-radius: var(--_radius); background: var(--_surface);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.lc-media__file-link:hover { border-color: var(--_accent); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .4); color: inherit; }
.lc-media__file-link:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }
.lc-media__ext {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px;
  font: 700 .75rem/1 system-ui, sans-serif; letter-spacing: .04em; color: #fff; background: #5a6470;
}
.lc-media__ext--pdf { background: #b3261e; }
.lc-media__ext--doc, .lc-media__ext--docx, .lc-media__ext--odt, .lc-media__ext--rtf { background: #2b5797; }
.lc-media__ext--xls, .lc-media__ext--xlsx, .lc-media__ext--ods, .lc-media__ext--csv { background: #1e7145; }
.lc-media__ext--ppt, .lc-media__ext--pptx, .lc-media__ext--odp { background: #b4500f; }
.lc-media__file-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-media__file-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.lc-media__file-link:hover .lc-media__file-title { color: var(--_accent); text-decoration: underline; }
.lc-media__file-meta { font-size: .875rem; color: var(--_muted); }
.lc-media__download {
  width: 20px; height: 20px; background: var(--_accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M7 11l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M7 11l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lc-media__file-description { display: inline-block; max-width: 100%; font-weight: 600; }   /* in the meta line, after the date */

/* full-screen viewer */
.lc-media-viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(8, 12, 16, .94); color: #fff;
}
.lc-media-viewer::backdrop { background: rgba(8, 12, 16, .94); }
.lc-media-viewer__frame { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; }
.lc-media-viewer__stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 56px 64px 8px; min-height: 0; }
.lc-media-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; border-radius: 4px; }
.lc-media-viewer__bar { display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px 18px; font-size: .95rem; }
.lc-media-viewer__caption { color: #e7eef5; }
.lc-media-viewer__counter { color: #9fb8ce; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-media-viewer button {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; line-height: 1;
}
.lc-media-viewer button:hover, .lc-media-viewer button:focus-visible { background: rgba(255, 255, 255, .26); outline: none; }
.lc-media-viewer button:focus-visible { box-shadow: 0 0 0 3px #fff; }
.lc-media-viewer__close { top: 12px; right: 12px; }
.lc-media-viewer__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lc-media-viewer__next { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lc-media-viewer__stage { padding: 56px 0 8px; }
  .lc-media-viewer__prev, .lc-media-viewer__next { top: auto; bottom: 64px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-media__link img { transition: none; }
}