/* ANCHOR: folder_widget_styles */
/* REUSED: Folder widget specific styles with theme support */
/* SCALED FOR: Clean folder design with pink theme variant */

/* ANCHOR: folder_widget */
.folder-widget {
  width: 210px; /* UPDATED COMMENTS: 1.5x wider title block for longer project names */
  height: 194px; /* UPDATED COMMENTS: Increased height to accommodate labels */
  /* UPDATED COMMENTS: Fixed wrapper size with overflow visible */
  overflow: visible;
}

.folder-container {
  position: relative;
  width: 210px; /* UPDATED COMMENTS: Match widget width so the longer title remains fully contained */
  height: 194px; /* UPDATED COMMENTS: Increased height to accommodate labels (140px + 54px) */
  /* UPDATED COMMENTS: Fixed container size, content can overflow */
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ANCHOR: theme_variants */
/* REUSED: Theme-based styling for default and pink variants */
.folder-container--default {
  /* UPDATED COMMENTS: Default theme uses standard folder behavior */
}

.folder-container--pink {
  /* UPDATED COMMENTS: Pink theme with enhanced hover effects */
}

.folder-container--pink:hover .project-card {
  /* UPDATED COMMENTS: Pink theme has more pronounced hover animation */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ANCHOR: folder_icon_area */
.folder-icon-area {
  position: relative;
  width: 140px;
  height: 140px;
  /* UPDATED COMMENTS: Icon area contains all SVG layers and project cards */
}

/* ANCHOR: folder_back_svg */
.folder-back {
  position: absolute;
  width: auto;
  height: auto;
  left: 5px; /* UPDATED COMMENTS: Offset to center back layer */
  top: 4px;   /* UPDATED COMMENTS: Vertical offset for proper alignment */
  z-index: 1;
  /* CRITICAL: Base shadow applied directly - ensures shadow always visible */
  /* REUSED: Default widget shadow values for consistency */
  filter: drop-shadow(0px 32px 13px rgba(0, 0, 0, 0.01)) drop-shadow(0px 18px 11px rgba(0, 0, 0, 0.05)) drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.09)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
  /* CRITICAL: Transition for smooth shadow changes */
  transition: filter var(--transition-normal);
}

/* ANCHOR: folder_back_shadow */
.folder-back-shadow {
  position: absolute;
  width: auto;
  height: auto;
  left: 5px; /* UPDATED COMMENTS: 1px left from back layer (5px - 1px) */
  top: 4px;  /* UPDATED COMMENTS: 1px up from back layer (4px - 1px) */
  z-index: 4; /* UPDATED COMMENTS: Above project cards (2), below front layer (5) */
  /* UPDATED COMMENTS: Original SVG size, no scaling */
  pointer-events: none; /* CRITICAL: Don't interfere with interactions */
}

/* ANCHOR: project_previews */
.project-previews {
  position: absolute;
  width: 84px;
  height: 84px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(-8px, -12px); /* UPDATED COMMENTS: Additional offset: 10px left (6px + 4px), 14px up (8px + 6px) */
  z-index: 2; /* UPDATED COMMENTS: Above back (1), below shadow (4) and front (5) */
}

/* ANCHOR: project_cards */
.project-card {
  position: absolute;
  width: 84px;
  height: 84px;
  background: #FFFFFF; /* UPDATED COMMENTS: White placeholder color */
  border-radius: 4px; /* UPDATED COMMENTS: 4px border radius for rounded corners */
  border: 1px solid #E0E0E0; /* UPDATED COMMENTS: Light gray border for definition */
  /* UPDATED COMMENTS: Each card rotated with 3° additional left turn from base angles */
  transition: transform 0.3s ease; /* UPDATED COMMENTS: Smooth animation for hover spreading effect */
  /* REUSED: Small shadow variant for project cards - 50% reduced from widget shadow */
  box-shadow: var(--widget-shadow-small);
}

.project-card--1 {
  left: 0px;
  top: 0px;
  transform: rotate(-1deg); /* UPDATED COMMENTS: -4° + 3° left = -7° */
  z-index: 2;
}

.project-card--2 {
  left: 6px; /* UPDATED COMMENTS: 4px right from previous (2px + 2px increase) */
  top: 6px;  /* UPDATED COMMENTS: 4px down from previous (2px + 2px increase) */
  transform: rotate(4deg); /* UPDATED COMMENTS: -8° + 3° left = -11° */
  z-index: 2;
}

.project-card--3 {
  left: 12px; /* UPDATED COMMENTS: 4px right from previous (4px + 4px) */
  top: 12px;  /* UPDATED COMMENTS: 4px down from previous (4px + 4px) */
  transform: rotate(9deg); /* UPDATED COMMENTS: -12° + 3° left = -15° */
  z-index: 2;
}

/* ANCHOR: folder_front_svg */
.folder-front {
  position: absolute;
  width: auto;
  height: auto;
  left: 12px;   /* UPDATED COMMENTS: Offset to position front layer correctly */
  top: 42px;   /* UPDATED COMMENTS: Vertical offset for layering effect */
  z-index: 5;   /* UPDATED COMMENTS: Above shadow layer (4) and project cards (2) */
  /* UPDATED COMMENTS: No shadow on front layer */
}

/* ANCHOR: folder_labels */
.folder-labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 210px; /* UPDATED COMMENTS: Expanded label area to give longer folder names room before truncation */
  height: auto; /* UPDATED COMMENTS: Allow the title to wrap naturally without clipping */
  margin-top: 8px; /* UPDATED COMMENTS: 8px gap from folder icon, similar to resume widget */
  z-index: 6; /* UPDATED COMMENTS: Above all other layers for proper text visibility */
}

.folder-title {
  width: 210px; /* UPDATED COMMENTS: 1.5x title width so project names can stay readable longer */
  min-height: 19px;
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 500; /* UPDATED COMMENTS: Increased from 400 to 500 for better readability */
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  color: #FFFFFF;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  /* CRITICAL: No rotation - labels stay horizontal */
}

.folder-subtitle {
  width: 210px; /* UPDATED COMMENTS: Keep the subtitle aligned with the wider title block */
  min-height: 19px;
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px; /* UPDATED COMMENTS: Confirmed SF Pro 16px as requested */
  line-height: 1.3;
  text-align: center;
  color: #FFFFFF;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  /* CRITICAL: No rotation - labels stay horizontal */
}

.folder-subtitle:empty {
  display: none;
}

/* CRITICAL: Shadow states moved to shared styles/components.css for reusability */

/* ANCHOR: project_cards_hover */
/* UPDATED COMMENTS: Hover effect - cards spread out when hovering over folder container */
.folder-container:hover .project-card--1 {
  transform: rotate(-6deg) translate(-4px, -20px); /* UPDATED COMMENTS: Card 1: left -10px, up -8px */
}

.folder-container:hover .project-card--2 {
  transform: rotate(-1deg) translate(4px, -18px); /* UPDATED COMMENTS: Card 2: right +6px, up -8px */
}

.folder-container:hover .project-card--3 {
  transform: rotate(8deg) translate(4px, -6px); /* UPDATED COMMENTS: Card 3: left -8px, up -6px */
}