SCSS Pokročilé mixiny pro responzivní design

// Responzivní breakpointy
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// Mixin pro media queries
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Neznámý breakpoint: #{$breakpoint}.";
  }
}

// Flexbox center mixin
@mixin flex-center($direction: row) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: $direction;
}

// Gradient text mixin
@mixin gradient-text($gradient) {
  background: $gradient;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

// Hover transition mixin
@mixin hover-transition($property: all, $duration: 0.3s, $easing: ease) {
  transition: $property $duration $easing;
  
  &:hover {
    @content;
  }
}

// Použití:
.card {
  @include hover-transition {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }
  
  @include respond-to(md) {
    padding: 2rem;
  }
}

.hero-title {
  @include gradient-text(linear-gradient(45deg, #667eea 0%, #764ba2 100%));
}