@use "../variables" as *;
@use "../mixins" as *;
@use "sass:color";

/**
 * @name Retro Card
 * @group components
 * @description
 * Card component for grouping content. Includes header, content, and variants.
 * @example scss
 *   <div class="retro-card" role="region" aria-label="Card title">
 *     <div class="retro-card-header">Title</div>
 *     <div class="retro-card-content">Content</div>
 *   </div>
 */

/* Retro Card - Win9x Style Only */

// Local variable definitions for $retro-card-* have been moved to _variables.scss

.retro-card {
  background: var(--retro-card-bg);
  // Win9x raised panel: light on the top/left edges, dark on the bottom/right,
  // with an inner second tone. This was inverted -- grey top-left and white
  // bottom-right reads as sunken, which is why cards looked like flat boxes
  // rather than raised windows.
  border: $retro-border-width-thick solid;
  border-color:
    var(--retro-border-light) var(--retro-border-dark)
    var(--retro-border-dark) var(--retro-border-light);
  box-shadow:
    inset 1px 1px 0 var(--retro-bg),
    inset -1px -1px 0 var(--retro-border-medium);
  // border-radius: 0 !important; // Redundant, handled by global reset
  font-family: var(--retro-font);
  // box-shadow: none; // Redundant, handled by global reset
  margin-bottom: $retro-spacing-lg; // Used SASS Variable (approx 1.5em)
  border-radius: var(--retro-border-radius);
  position: relative;
  // overflow: visible; // Default, can be removed

  &-header {
  // Corner nesting: the card owns the radius and its bands take the matching
  // half, so a rounded card does not show square header/footer corners
  // poking through. All of these resolve to 0 by default.
    border-radius: var(--retro-border-radius) var(--retro-border-radius) 0 0;
    background: var(--retro-card-header-bg);
    color: var(--retro-card-header-text);

    // A heading used as the header's text must take the header's colour.
    h1, h2, h3, h4, h5, h6 {
      margin: 0;
      font-size: inherit;
      color: inherit;
      background: none;
      border: none;
      padding: 0;
    }

    border-bottom: $retro-border-width-thick solid var(--retro-card-header-bg);
    // border-radius: 0; // Redundant
    font-family: inherit;
    text-shadow: none;
    padding: $retro-spacing-sm $retro-spacing-md; // Approx 0.4em and 1em
    font-weight: bold; // Consider $retro-font-weight-bold if defined
    font-size: $retro-font-size-base; // Approx 1em
    user-select: none;
    display: block;
    text-align: start;
    min-height: unset;
  }

  &-content {
    padding: $retro-spacing-md $retro-spacing-md; // Approx 1em
    // Only the last band gets the bottom corners; a footer takes them otherwise.
    &:last-child { border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius); }
    background: var(--retro-card-content-bg);
    border-top: $retro-border-width-thick solid var(--retro-card-content-bg);
    font-size: $retro-font-size-base; // Approx 1em
    color: var(--retro-card-content-text);
    min-height: 2em; // Consider if this needs to be variable
    text-align: start;
  }
}

.retro-card-footer {
  background: var(--retro-card-footer-bg);
  border-top: $retro-border-width-thick solid var(--retro-card-footer-bg);
  color: var(--retro-card-footer-text);
  padding: $retro-spacing-sm $retro-spacing-md; // Approx 0.4em and 1em
  font-size: $retro-font-size-sm; // Approx 0.95em
  border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius);
  text-align: start;
}

.retro-card-image {
  width: 100%;
  display: block;
  border-bottom: $retro-border-width-thick solid var(--retro-border-medium);
  max-height: $retro-card-image-max-height;
  object-fit: cover;
}

.retro-card-compact .retro-card-content {
  padding: $retro-spacing-xs $retro-spacing-sm; // Approx 0.5em and 1em
  font-size: $retro-font-size-sm; // Approx 0.97em, map to closest like sm
}