/**
 * Image Logo Attribution System
 * 
 * Automatically places Spiel-Raum logo below content images
 * for brand recognition and content attribution.
 * 
 * Specification: 003-image-logo
 * Design System: Botanical (sage greens, calm luxury)
 * 
 * Usage:
 *   <figure class="image-with-logo">
 *     <img src="photo.jpg" alt="Description">
 *   </figure>
 * 
 * Disable logo:
 *   <figure class="image-with-logo" data-no-logo>
 *     <img src="icon.svg" alt="Icon">
 *   </figure>
 */

/* ============================================
   Logo Configuration Tokens
   ============================================ */

:root {
  /* Logo sizing */
  --logo-width-desktop: 125px;        /* Medium size: 100-150px range */
  --logo-width-mobile: 100px;         /* Smaller for mobile devices */
  
  /* Logo spacing (using design system tokens) */
  --logo-spacing-above: var(--spacing-xl, 48px);       /* Large spacing: 32-48px */
  --logo-spacing-below: var(--spacing-2xl, 64px);      /* Space after logo */
  
  /* Logo appearance */
  --logo-opacity: 0.7;                /* Subtle, non-intrusive (60-80%) */
  --logo-alignment: left;             /* Left-aligned by default */
  
  /* Logo asset path */
  --logo-path: url('/assets/images/logo-simple.svg');
}


/* ============================================
   Primary Logo Placement (CSS-Only)
   ============================================ */

.image-with-logo {
  position: relative;
  display: block;
  margin-bottom: var(--logo-spacing-below);
}

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

/**
 * CSS ::after pseudo-element for automatic logo insertion
 * 
 * - Uses content: url() to insert logo SVG
 * - Displays as block element below image
 * - Left-aligned with generous spacing
 * - Subtle opacity to avoid overpowering content
 */
.image-with-logo::after {
  content: var(--logo-path);
  display: block;
  width: var(--logo-width-desktop);
  height: auto;
  margin-top: var(--logo-spacing-above);
  margin-left: 0;  /* Left-aligned */
  opacity: var(--logo-opacity);
  transition: opacity var(--duration-normal, 250ms) ease;
}

/* Optional hover effect - make logo more prominent on hover */
.image-with-logo:hover::after {
  opacity: 0.9;
}


/* ============================================
   Responsive Logo Sizing
   ============================================ */

/* Mobile devices - smaller logo */
@media (max-width: 640px) {
  .image-with-logo::after {
    width: var(--logo-width-mobile);
  }
}


/* ============================================
   Logo Disable Mechanism
   ============================================ */

/**
 * Disable logo on specific images using data-no-logo attribute
 * 
 * Usage: <figure class="image-with-logo" data-no-logo>
 */
.image-with-logo[data-no-logo]::after {
  content: none;
  display: none;
}

/* Alternative: CSS class for disabling */
.image-with-logo.no-logo::after {
  content: none;
  display: none;
}


/* ============================================
   Alternative Alignment Options
   ============================================ */

/* Center-aligned logo (use class modifier) */
.image-with-logo.logo-center::after {
  margin-left: auto;
  margin-right: auto;
}

/* Right-aligned logo (use class modifier) */
.image-with-logo.logo-right::after {
  margin-left: auto;
  margin-right: 0;
}


/* ============================================
   Logo Size Variants (Optional)
   ============================================ */

/* Small logo variant */
.image-with-logo.logo-small::after {
  width: 100px;
}

@media (max-width: 640px) {
  .image-with-logo.logo-small::after {
    width: 80px;
  }
}

/* Large logo variant */
.image-with-logo.logo-large::after {
  width: 150px;
}

@media (max-width: 640px) {
  .image-with-logo.logo-large::after {
    width: 120px;
  }
}


/* ============================================
   Explicit HTML Logo (Alternative Pattern)
   ============================================ */

/**
 * For cases where CSS ::after is not suitable
 * Use explicit <img> tag for logo in HTML
 */
.image-logo {
  display: block;
  width: var(--logo-width-desktop);
  height: auto;
  margin-top: var(--logo-spacing-above);
  margin-left: 0;
  opacity: var(--logo-opacity);
  transition: opacity var(--duration-normal, 250ms) ease;
}

@media (max-width: 640px) {
  .image-logo {
    width: var(--logo-width-mobile);
  }
}

/* Make logo more prominent on container hover */
.image-container:hover .image-logo {
  opacity: 0.9;
}


/* ============================================
   Image Container Styling
   ============================================ */

/**
 * Container for image + logo with explicit HTML markup
 */
.image-container {
  position: relative;
  display: block;
  margin-bottom: var(--logo-spacing-below);
}

.image-container img:not(.image-logo) {
  display: block;
  width: 100%;
  height: auto;
}


/* ============================================
   Integration with Card Components
   ============================================ */

/**
 * Logo within card components
 * Ensures logo aligns with card padding
 */
.card .image-with-logo::after {
  margin-left: 0;  /* Align to card left edge */
}

.card .image-logo {
  margin-left: 0;
}


/* ============================================
   Grid Layout Support
   ============================================ */

/**
 * Multiple images in grid - each gets own logo
 */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--grid-gap-lg, 32px);
}

.image-grid .image-with-logo {
  margin-bottom: var(--spacing-8, 32px);
}


/* ============================================
   Print Styles
   ============================================ */

@media print {
  /* Show logo in print for attribution */
  .image-with-logo::after {
    opacity: 1;  /* Full opacity in print */
  }
  
  .image-logo {
    opacity: 1;
  }
}


/* ============================================
   Accessibility Enhancements
   ============================================ */

/**
 * Ensure logo doesn't interfere with assistive technology
 * CSS ::after is automatically decorative (ignored by screen readers)
 * For HTML markup, use aria-hidden="true"
 */

/* Skip logo in reduced motion mode */
@media (prefers-reduced-motion: reduce) {
  .image-with-logo::after,
  .image-logo {
    transition: none;
  }
}


/* ============================================
   Dark Mode Support (Future)
   ============================================ */

/**
 * For future dark mode implementation
 * Logo can invert colors or use alternative logo file
 */
@media (prefers-color-scheme: dark) {
  .image-with-logo::after,
  .image-logo {
    /* Future: Use light-colored logo for dark backgrounds */
    /* filter: invert(1); or content: url('/assets/images/logo-light.svg'); */
  }
}


/* ============================================
   Debug Helpers (Remove in Production)
   ============================================ */

/**
 * Uncomment for debugging logo placement
 */
/*
.image-with-logo {
  outline: 2px dashed blue;
}

.image-with-logo::after {
  outline: 2px dashed red;
}

.image-with-logo[data-no-logo] {
  outline: 2px dashed green;
}
*/