/* Page: Homepage Specific Styles */

/* Module Background Overrides for Homepage */
.figma-module {
  background: var(--color-light-purple);
}

/* Method Image Specific for Homepage - Module 2 */
.method-image {
  width: 96px; /* Fixed width as per Figma */
  overflow: hidden; /* Hide overflow when image is larger */
  flex-shrink: 0; /* Prevent image from shrinking */
  align-self: stretch; /* Make image take full height of container */
  display: flex; /* Establish flex context for image */
  height: 100%; /* Explicitly set to 100% height */
}

.method-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures image covers the area while maintaining aspect ratio */
  object-position: center; /* Centers the image */
  flex-grow: 1; /* Allow image to grow to fill container */
}

/* Method Card Layout for Homepage */
.method-card-layout {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
  align-items: stretch; /* Make all items stretch to fill the container height */
  min-height: 200px; /* Provide minimum height to ensure there's enough space */
}

/* Method Details Container */
.method-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.method-details-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex-grow: 1;
}

/* Story Module */
.story-module-content {
  display: flex;
  flex-direction: column;
  min-height: auto;
  height: auto;
}

.story-summary {
  margin-bottom: 12px;
}

.tactics-container {
  display: flex;
  flex-direction: column;
}

/* Method Details Button Placement */
.method-details-button {
  margin-top: auto; /* Push button to bottom */
  display: flex;
  align-self: flex-end; /* Align to end of flex container */
  width: 100%; /* Take up full width */
}

/* Progress Bars */
.progress-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  color: var(--color-black);
}

.progress-container {
  background: var(--color-white);
  border: 2px solid var(--color-black);
  height: 12px;
  padding: 2px;
  width: 100%;
}

.progress-bar {
  background: var(--color-secondary);
  height: 8px;
}

.progress-bar.success {
  background: var(--color-success);
}

/* Red Text Links - No Underlines (per design requirements) */

/* Footer */
.footer {
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  padding: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  margin-bottom: -1.5px;
}

.footer__text {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  color: var(--color-secondary);
  line-height: 1;
}