/*
  Card Component Styling for Portfolio Application
  ===============================================
  
  Custom card hover and animation styles for cards.html component.
  
  Card Behavior:
  - Default state: Dark grey background (#111214) with subtle shadow
  - Hover/Focus state: Background image covers entire card including logo area
  - Interactive feedback: Thicker light grey border and stronger shadow
  - Logo area: Transparent background to allow card background to show through
  - Responsive: Adjusts size based on viewport with defined min/max widths
  
  Design Philosophy:
  Cards provide visual feedback on interaction while maintaining
  accessibility and consistent visual hierarchy across the portfolio.
*/

/* === CARD FOUNDATION STYLES === */

/* Default card background color */
.card-background {
  background-color: #111214;            /* Dark grey background for inactive state */
}

/* Responsive card dimensions with constraints */
.card-dimensions {
  max-width: 320px;                     /* Maximum width for larger screens */
  min-width: 220px;                     /* Minimum width for smaller screens */
  margin-left: auto;                    /* Center horizontally */
  margin-right: auto;                   /* Center horizontally */
}

/* Logo container styling */
.card-logo-container {
  height: 96px;                         /* Fixed height for logo area consistency */
  background-color: transparent;        /* Transparent to show card background */
}

/* Logo image constraints and positioning */
.card-logo {
  max-height: 60px;                     /* Limit logo height for consistency */
  object-fit: contain;                  /* Preserve logo aspect ratio */
}

/* === ERROR PAGE STYLING === */

/* Error page image dimensions and responsive behavior */
.error-image {
  width: 600px;                         /* Default width for error images */
  height: auto;                         /* Maintain aspect ratio */
  max-width: 90vw;                      /* Responsive width limit */
  display: block;                       /* Block display for proper centering */
  margin: 0 auto 2rem auto;             /* Center with bottom margin */
}

/* === CAROUSEL DIMENSIONS === */

/* Carousel container sizing with responsive constraints */
.carousel-container {
  height: 60vh;                         /* 60% of viewport height */
  min-height: 350px;                    /* Minimum height for usability */
  max-height: 600px;                    /* Maximum height to prevent oversizing */
}

/* === CARD HOVER EFFECTS & INTERACTIONS === */

/* Base card styling with smooth transitions */
.hover-shadow {
  /* Default shadow - subtle and dark for inactive state */
  box-shadow: 0 2px 8px 0 rgba(30,30,30,0.18);
  
  /* Smooth transitions for all interactive properties */
  transition: box-shadow 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.2s cubic-bezier(.4,0,.2,1),
              background 0.2s cubic-bezier(.4,0,.2,1),
              border-color 0.2s cubic-bezier(.4,0,.2,1),
              outline 0.2s cubic-bezier(.4,0,.2,1);
  
  /* Border and outline setup for hover effects */
  border: 2.5px solid transparent;      /* Transparent border for hover state */
  outline: 2.5px solid transparent;     /* Transparent outline for focus state */
  outline-offset: 0px;                  /* No outline offset */
  
  /* Force dark background in inactive state */
  background-color: #111214 !important;
}

/* Hover and focus states - enhanced visual feedback */
.hover-shadow:hover, 
.hover-shadow:focus {
  /* Enhanced shadow with light grey tones for depth */
  box-shadow: 0 0.5rem 2rem 0 rgba(224,224,224,0.35), 
              0 0.25rem 1rem 0 rgba(224,224,224,0.18);
  
  /* Transform effects - lift and subtle scale */
  transform: translateY(-2px) scale(1.03);
  z-index: 2;                           /* Bring to front during interaction */
  
  /* Background image overlay on hover */
  /* Background image overlay on hover */
  background-image: url('/static/images/content/card-backgrounds.gif');
  background-size: cover;               /* Cover entire card area */
  background-position: center;          /* Center background image */
  background-color: #111214;            /* Fallback background color */
  
  /* Border and outline effects for hover state */
  border-color: transparent;            /* Keep border transparent */
  outline: 3px solid #e0e0e0;           /* Light grey outline for visibility */
  outline-offset: 2px;                  /* Small offset for outline */
}

/* === CHILD ELEMENT TRANSPARENCY === */

/* Ensure child elements don't block card background on hover */
.hover-shadow .rounded-top-4,
.hover-shadow .card-body {
  background: transparent;              /* Remove any background */
  background-color: transparent;        /* Force transparency */
}

/* === CARD BORDER STYLING === */

/* Default card border styling */
.card {
  border: 2.5px solid #222121;          /* Visible dark border for definition */
  box-sizing: border-box;               /* Include border in sizing calculations */
}

/* Borderless card variation */
.card.border-0 {
  border: none;                         /* Remove border completely */
  box-sizing: border-box;               /* Maintain consistent box sizing */
}

/* === IMAGE UTILITIES === */

/* Card image cover utility for maintaining aspect ratio */
.card-img-cover {
  object-fit: cover;                    /* Crop image to fit container */
}