/**
 * Media Styled - Elegant image presentation
 * 
 * Usage:
 * <figure class="media-styled [media-rounded] [media-shadow] [title-style]">
 *   <drupal-media ...></drupal-media>
 *   <figcaption>
 *     <span class="media-title">Title</span>
 *     <span class="media-credit">Photo: © Name</span>
 *   </figcaption>
 * </figure>
 */

/* Base styled container */
.media-styled {
  margin: 1.75rem 0;
  padding: 0;
  display: block;
  width: 100%;
  position: relative;
}

.media-styled img,
.media-styled picture,
.media-styled drupal-media,
.media-styled .media,
.media-styled picture img,
.media-styled drupal-media img,
.media-styled .media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Caption container - positioned over image */
.media-styled figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem 0.5rem;
  line-height: 1.4;
}

/* Title - on image, white text */
.media-styled .media-title {
  display: block;
  font-size: 1.0625rem;
  color: #fff;
  font-weight: 500;
  margin-bottom: 0.125rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  text-wrap: balance;
}

/* Responsive title size */
@media (max-width: 768px) {
  .media-styled .media-title {
    font-size: 0.9375rem;
  }
}

/* Credit line - light, small */
.media-styled .media-credit {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   MODIFIERS
   ========================================================================== */

/* Rounded corners - 8px */
.media-styled.media-rounded img,
.media-styled.media-rounded picture img,
.media-styled.media-rounded drupal-media img,
.media-styled.media-rounded .media img {
  border-radius: 8px;
}

/* Subtle shadow */
.media-styled.media-shadow img,
.media-styled.media-shadow picture img,
.media-styled.media-shadow drupal-media img,
.media-styled.media-shadow .media img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   TITLE STYLE OPTIONS (choose one)
   ========================================================================== */

/* Option 1: Gradient overlay - subtle fade from bottom */
.media-styled.media-title-gradient figcaption {
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
  padding-top: 2rem;
}

/* Option 2: Solid semi-transparent overlay */
.media-styled.media-title-overlay figcaption {
  background: rgba(0, 0, 0, 0.5);
}

/* Option 3: Text shadow only (no background) */
.media-styled.media-title-shadow figcaption {
  background: none;
}

.media-styled.media-title-shadow .media-title {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.3);
}

.media-styled.media-title-shadow .media-credit {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Option 4: Title and credit below image (traditional) */
.media-styled.media-title-below figcaption {
  position: relative;
  background: none;
  padding: 6px 0 0 !important;
  margin: 0;
}

.media-styled.media-title-below img,
.media-styled.media-title-below drupal-media,
.media-styled.media-title-below drupal-media img,
.media-styled.media-title-below .media img {
  margin-bottom: 0;
}

.media-styled.media-title-below .media-title {
  color: #374151;
  text-shadow: none;
}

.media-styled.media-title-below .media-credit {
  color: #9ca3af;
  text-shadow: none;
}

/* ==========================================================================
   ALIGNMENT
   ========================================================================== */

.media-styled.media-center {
  text-align: center;
}

.media-styled.media-center figcaption {
  text-align: center;
}

.media-styled.media-right figcaption {
  text-align: right;
}