/**
 * Racetrck Infobox Block Styles
 * Version: 1.0.0
 * 
 * Using Design System Variables from css-variables.txt
 * Fallback-Werte werden direkt in var() definiert, um Theme-Variablen nicht zu überschreiben
 */

/* ==========================================================================
   Base Infobox Structure
   ========================================================================== */

.racetrck-infobox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m, 1.625rem);
  padding: var(--space-m, 2.375rem);
  margin: var(--space-m, 2.375rem) 0;
  border-radius: var(--border-radius-m, 0.4rem);
  border-left: 4px solid var(--color-grey-80, hsl(0, 0%, 20%));
  background: var(--color-grey-05, hsl(0, 0%, 95%));
  font-size: var(--fs-body-m, 1.6rem);
  line-height: 1.8;
}

/* Icon Container */
.racetrck-infobox__icon {
  flex-shrink: 0;
  width: var(--fs-icon-xxl, 2.4rem);
  height: var(--fs-icon-xxl, 2.4rem);
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 3px;
}

.racetrck-infobox__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Content Container */
.racetrck-infobox__content {
  flex: 1;
}

.racetrck-infobox__content p:first-child {
  margin-top: 0;
}

.racetrck-infobox__content p:last-child {
  margin-bottom: 0;
}

.racetrck-infobox__content strong {
  color: var(--color-text-dark, var(--color-grey-90, hsl(0, 0%, 10%)));
  font-weight: 600;
}

/* ==========================================================================
   Type Variants
   ========================================================================== */

/* Tip (Red - Primary Color) */
.racetrck-infobox--tip {
  border-color: var(--color-primary, #ba090a);
  background: var(--color-primary-tint-95, hsl(360, 22.75%, 95.6%));
  color: var(--color-primary-shade-40, hsl(360, 72.8%, 8%));
}

.racetrck-infobox--tip .racetrck-infobox__icon {
  color: var(--color-primary, #ba090a);
}

/* Warning (Orange) */
.racetrck-infobox--warning {
  border-color: hsl(30, 90%, 50%);
  background: hsl(30, 90%, 97%);
  color: hsl(30, 90%, 20%);
}

.racetrck-infobox--warning .racetrck-infobox__icon {
  color: hsl(30, 90%, 50%);
}

/* Summary (Grey - Neutral) */
.racetrck-infobox--summary {
  border-color: var(--color-grey-60, hsl(0, 0%, 40%));
  background: var(--color-grey-10, hsl(0, 0%, 90%));
  color: var(--color-grey-90, hsl(0, 0%, 10%));
}

.racetrck-infobox--summary .racetrck-infobox__icon {
  color: var(--color-grey-70, hsl(0, 0%, 30%));
}

/* Success (Green - aus Primary-Tint mit angepasstem Hue) */
.racetrck-infobox--success {
  border-color: hsl(142, 71%, 45%);
  background: hsl(142, 71%, 97%);
  color: hsl(142, 71%, 25%);
}

.racetrck-infobox--success .racetrck-infobox__icon {
  color: hsl(142, 71%, 45%);
}

/* Info (Light Blue - Secondary Tint) */
.racetrck-infobox--info {
  border-color: var(--color-secondary-shade-20, hsl(218, 100%, 41%));
  background: var(--color-secondary-tint-95, hsl(218, 100%, 98%));
  color: var(--color-secondary-shade-50, hsl(218, 100%, 11%));
}

.racetrck-infobox--info .racetrck-infobox__icon {
  color: var(--color-secondary-shade-20, hsl(218, 100%, 41%));
}

/* ==========================================================================
   Responsive: Mobile Layout
   ========================================================================== */

@media (max-width: 479px) {
  .racetrck-infobox {
    flex-direction: column;
  }
}

/* ==========================================================================
   Editor-Specific Styles
   ========================================================================== */

.racetrck-infobox--editor .racetrck-infobox__icon {
  width: 16px;
  height: 16px;
}

.racetrck-infobox--editor .racetrck-infobox__content {
  min-height: 6rem;
}

/* Placeholder styling in editor */
.racetrck-infobox--editor .racetrck-infobox__content:empty::before {
  content: "Infobox-Inhalt eingeben...";
  color: var(--color-grey-40, hsl(0, 0%, 60%));
  font-style: italic;
}