/**
 * Image source/credit overlay — SimCzech
 *
 * Displays "Zdroj: ..." at the bottom of every image that has
 * the field_image_source filled in. Works in:
 *   - Regular article/news images
 *   - Featured/title images
 *   - Lightbox / enlarged view
 *   - Gallery grids
 */

/* Wrapper must be relative for overlay positioning */
.sc-image-with-source {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  line-height: 0;
}

/* Centering: when wrapper is inside an alignment container, apply margin:auto */
.align-center .sc-image-with-source,
.image-style-align-center .sc-image-with-source,
.drupal-media-style-align-center .sc-image-with-source,
[data-align="center"] .sc-image-with-source {
  margin-left: auto;
  margin-right: auto;
}

.sc-image-with-source img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Source overlay bar at the bottom */
.sc-image-source {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  padding: 20px 12px 6px;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease;
}

.sc-image-source span {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.08em;
  margin-right: 4px;
}

/* In lightbox / modal context */
.media-library-item .sc-image-source,
.ui-dialog .sc-image-source,
.colorbox .sc-image-source,
[class*="lightbox"] .sc-image-source,
[class*="modal"] .sc-image-source {
  font-size: 12px;
  padding: 24px 16px 8px;
}

/* Gallery grid items */
.views-view-grid .sc-image-with-source,
.gallery-item .sc-image-with-source {
  width: 100%;
}

/* Featured / title image */
.field--name-field-featured-image .sc-image-with-source {
  width: 100%;
  display: block;
}

/* Prevent overlap with other elements */
.field--type-image .sc-image-with-source,
.media--type-image .sc-image-with-source {
  overflow: hidden;
  border-radius: inherit;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .sc-image-source {
    font-size: 10px;
    padding: 16px 8px 4px;
  }

  .sc-image-source span {
    font-size: 8px;
  }
}