/* ═══════════════════════════════════════════════════════════════════════════
   LUXURY NOIR + GOLD EDITORIAL DESIGN SYSTEM
   Inspired by Felix Haas, Awwwards Winners
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ═══════════════════════════════════════════════════════════════════════════
   BASE LAYER - CSS VARIABLES
   ═══════════════════════════════════════════════════════════════════════════ */

@layer base {
  :root {
    /* Noir Luxury Palette */
    --background: 0 0% 4%;
    --foreground: 45 20% 95%;

    --card: 0 0% 7%;
    --card-foreground: 45 20% 95%;

    --popover: 0 0% 7%;
    --popover-foreground: 45 20% 95%;

    /* Warm Amber Gold - Primary */
    --primary: 38 92% 50%;
    --primary-foreground: 0 0% 4%;

    --secondary: 0 0% 12%;
    --secondary-foreground: 45 20% 85%;

    --muted: 0 0% 15%;
    --muted-foreground: 45 10% 55%;

    --accent: 38 80% 45%;
    --accent-foreground: 0 0% 4%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 18%;
    --input: 0 0% 18%;
    --ring: 38 92% 50%;

    --radius: 0.75rem;
    
    /* Custom Luxury Tokens */
    --gold: 38 92% 50%;
    --gold-soft: 38 70% 60%;
    --gold-glow: 38 100% 65%;
    --cream: 45 30% 92%;
    --noir: 0 0% 4%;
    --noir-light: 0 0% 8%;
    --noir-lighter: 0 0% 12%;
    --noir-medium: 0 0% 12%;

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, hsl(38, 92%, 50%) 0%, hsl(28, 85%, 45%) 100%);

    /* Sidebar (for compatibility) */
    --sidebar-background: 0 0% 7%;
    --sidebar-foreground: 45 20% 95%;
    --sidebar-primary: 38 92% 50%;
    --sidebar-primary-foreground: 0 0% 4%;
    --sidebar-accent: 0 0% 12%;
    --sidebar-accent-foreground: 45 20% 95%;
    --sidebar-border: 0 0% 18%;
    --sidebar-ring: 38 92% 50%;
  }

  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    @apply font-bold tracking-tight;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTS LAYER - REUSABLE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@layer components {
  /* Glass Effect */
  .glass {
    @apply bg-secondary/40 backdrop-blur-xl border border-border/50;
  }

  .glass-card {
    background: hsl(0, 0%, 7%, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid hsl(0, 0%, 18%, 0.4);
    box-shadow: 0 8px 32px hsl(0, 0%, 0%, 0.3);
  }

  /* Gold Glow Effects */
  .glow-gold {
    box-shadow: 0 0 60px hsl(38, 92%, 50%, 0.3);
  }

  .glow-gold-subtle {
    box-shadow: 0 0 40px hsl(38, 92%, 50%, 0.15);
  }

  .glow-gold-intense {
    box-shadow: 0 0 80px hsl(38, 92%, 50%, 0.4);
  }

  /* Gold Gradient Text */
  .text-gradient-gold {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, hsl(38, 92%, 50%) 0%, hsl(28, 85%, 45%) 100%);
  }

  /* Link Underline Animation */
  .link-underline {
    @apply relative;
  }

  .link-underline::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-px bg-primary scale-x-0 origin-right;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .link-underline:hover::after {
    @apply scale-x-100 origin-left;
  }

  /* Magnetic Hover Effect */
  .magnetic {
    @apply transition-transform duration-300;
  }

  .magnetic:hover {
    transform: translateY(-4px);
  }

  /* Container */
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Section Padding */
  .section-padding {
    @apply py-20 lg:py-32 px-4 sm:px-8;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     BUTTON VARIANTS
     ═══════════════════════════════════════════════════════════════════════ */
  
  .btn-gold {
    @apply bg-primary text-primary-foreground px-6 py-3 rounded-lg font-semibold 
           transition-all duration-300 hover:shadow-[0_0_30px_hsl(38,92%,50%,0.4)]
           hover:-translate-y-1 hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-primary/50;
  }

  .btn-noir {
    @apply bg-secondary text-foreground px-6 py-3 rounded-lg font-medium 
           border border-border transition-all duration-300 
           hover:bg-muted hover:-translate-y-1 hover:border-primary/30;
  }

  .btn-outline-gold {
    @apply border-2 border-primary/50 text-primary px-6 py-3 rounded-lg 
           font-medium transition-all duration-300 bg-transparent
           hover:bg-primary/10 hover:-translate-y-1;
  }

  .btn-glass {
    @apply bg-transparent backdrop-blur-xl border border-border/50 text-foreground
           px-6 py-3 rounded-lg font-medium transition-all duration-300
           hover:bg-secondary/40 hover:-translate-y-1;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     BADGE & CARD STYLES
     ═══════════════════════════════════════════════════════════════════════ */
  
  .badge-gold {
    @apply inline-flex items-center gap-2 bg-primary/10 border border-primary/20 
           text-primary py-2 px-5 rounded-full text-sm font-medium backdrop-blur-sm;
  }

  .card-luxury {
    @apply bg-card rounded-2xl border border-border/50 p-6 md:p-8
           transition-all duration-500 hover:border-primary/30
           hover:shadow-[0_20px_60px_-15px_hsl(38,92%,50%,0.15)];
  }

  .card-feature {
    @apply bg-card/50 rounded-2xl border border-border/30 p-6
           transition-all duration-300 hover:bg-card hover:border-primary/20
           cursor-default;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     LEGACY COMPONENT SUPPORT
     ═══════════════════════════════════════════════════════════════════════ */
  
  .hero-gradient {
    @apply bg-gradient-to-b from-background to-noir-light;
  }
  
  .card-glass {
    @apply glass;
  }
  
  .promo-tag {
    @apply text-xs uppercase tracking-wider bg-primary text-primary-foreground 
           px-2 py-0.5 rounded-full font-semibold;
  }
  
  .animate-on-scroll {
    @apply opacity-0 transition-all duration-700 ease-out;
  }
  
  .animate-on-scroll.animated {
    @apply opacity-100;
  }
  
  .btn-primary {
    @apply btn-gold;
  }
  
  .btn-secondary {
    @apply btn-noir;
  }
  
  .btn-outline {
    @apply btn-outline-gold;
  }

  .tariff-card {
    @apply card-luxury;
  }
  
  .tariff-header {
    @apply px-6 py-4 bg-gradient-to-r from-primary to-gold-soft text-primary-foreground rounded-t-2xl;
  }

  .text-highlight-poda {
    @apply text-primary;
  }
  
  .text-highlight-pripojeni {
    @apply text-primary;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     EDITORIAL INDEX NUMBERS (01, 02, 03...)
     ═══════════════════════════════════════════════════════════════════════ */
  
  .editorial-index {
    @apply text-[5rem] sm:text-[8rem] md:text-[12rem] font-display font-bold text-foreground/5 
           absolute -top-4 sm:-top-8 md:-top-12 left-0 leading-none select-none pointer-events-none;
  }

  /* Safe text overflow */
  .break-words-safe {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  /* Responsive text sizing utility */
  .text-responsive-sm {
    @apply text-sm sm:text-base;
  }

  .text-responsive-base {
    @apply text-base sm:text-lg md:text-xl;
  }

  .text-responsive-lg {
    @apply text-lg sm:text-xl md:text-2xl;
  }

  .text-responsive-xl {
    @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl;
  }

  .text-responsive-2xl {
    @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl;
  }

  .text-responsive-hero {
    @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATION KEYFRAMES
   Simple, elegant - fade + translateY + scale only
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes fade-up {
  from { 
    opacity: 0; 
    transform: translateY(40px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ken-burns {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.08) translate(-1%, -0.5%); }
  100% { transform: scale(1) translate(0, 0); }
}

.animate-ken-burns {
  animation: ken-burns 25s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { 
    box-shadow: 0 0 20px hsl(38, 92%, 50%, 0.3); 
  }
  50% { 
    box-shadow: 0 0 40px hsl(38, 92%, 50%, 0.5); 
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-dot {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1); 
  }
  50% { 
    opacity: 0.5; 
    transform: scale(1.5); 
  }
}

/* Reveal Animation */
.reveal-animation {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-animation.active {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Animation Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR & SELECTION
   ═══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { 
  width: 8px; 
}

::-webkit-scrollbar-track { 
  background: hsl(0, 0%, 7%); 
}

::-webkit-scrollbar-thumb { 
  background: hsl(0, 0%, 20%); 
  border-radius: 4px; 
}

::-webkit-scrollbar-thumb:hover { 
  background: hsl(38, 92%, 50%); 
}

::selection {
  background: hsl(38, 92%, 50%, 0.3);
  color: hsl(45, 20%, 95%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE LINK OPTIMIZATIONS (Mobile Touch)
   ═══════════════════════════════════════════════════════════════════════════ */

.phone-link {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

.phone-link:active {
  transform: scale(0.95);
}

@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  
  .phone-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  }
  
  /* Mobile touch targets */
  button, 
  a[role="button"],
  .btn-gold,
  .btn-noir,
  .btn-outline-gold {
    min-height: 44px;
  }

@media (hover: none) and (pointer: coarse) {
  .phone-link:hover {
    background-color: transparent;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION SUPPORT
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG CONTENT - NOIR THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-content {
  @apply text-foreground/90;
}

.blog-content h1 {
  @apply text-foreground font-serif text-3xl md:text-4xl mt-8 mb-4 font-bold;
}

.blog-content h2 {
  @apply text-foreground font-serif text-2xl md:text-3xl mt-8 mb-4 font-semibold;
}

.blog-content h3 {
  @apply text-foreground font-serif text-xl md:text-2xl mt-6 mb-3 font-semibold;
}

.blog-content h4 {
  @apply text-foreground font-serif text-lg md:text-xl mt-6 mb-3 font-medium;
}

.blog-content p {
  @apply mb-4 leading-relaxed text-foreground/90;
}

.blog-content a {
  @apply text-primary hover:underline transition-colors;
}

.blog-content strong,
.blog-content b {
  @apply text-foreground font-semibold;
}

.blog-content ul,
.blog-content ol {
  @apply my-4 ml-6 text-foreground/90;
}

.blog-content ul {
  @apply list-disc;
}

.blog-content ol {
  @apply list-decimal;
}

.blog-content li {
  @apply mb-2;
}

.blog-content li::marker {
  @apply text-primary;
}

.blog-content blockquote {
  @apply border-l-4 border-primary pl-4 italic text-muted-foreground my-6 bg-card/50 py-3 pr-4 rounded-r-lg;
}

.blog-content code {
  @apply bg-secondary px-2 py-1 rounded text-primary text-sm;
}

.blog-content pre {
  @apply bg-card p-4 rounded-lg overflow-x-auto my-6 border border-border/30;
}

.blog-content pre code {
  @apply bg-transparent p-0;
}

.blog-content table {
  @apply w-full border-collapse my-6;
}

.blog-content th {
  @apply bg-secondary text-foreground px-4 py-2 text-left border border-border font-serif;
}

.blog-content td {
  @apply px-4 py-2 border border-border text-foreground/90;
}

.blog-content img {
  @apply rounded-lg my-6 border border-border/30;
}

.blog-content hr {
  @apply border-border my-8;
}

/* CTA box a tip box v článkoch */
.blog-content .tip-box,
.blog-content .cta-box,
.blog-content .info-box {
  @apply bg-card border-l-4 border-primary p-6 rounded-r-lg my-6;
}

.blog-content .warning-box {
  @apply bg-card border-l-4 border-destructive p-6 rounded-r-lg my-6;
}

/* Fix white/light background boxes - force noir theme */
.blog-content div[style*="background"],
.blog-content div[class*="bg-white"],
.blog-content div[class*="bg-gray"],
.blog-content div[class*="bg-blue"],
.blog-content div[class*="bg-slate"],
.blog-content .bg-white,
.blog-content .bg-gray-50,
.blog-content .bg-gray-100,
.blog-content .bg-blue-50,
.blog-content .bg-blue-100,
.blog-content .bg-slate-50,
.blog-content .bg-slate-100 {
  @apply !bg-card !text-foreground border border-border/30 rounded-lg;
}

.blog-content div[style*="background"] *,
.blog-content div[class*="bg-white"] *,
.blog-content div[class*="bg-gray"] *,
.blog-content div[class*="bg-blue"] *,
.blog-content div[class*="bg-slate"] * {
  @apply !text-foreground;
}

.blog-content div[style*="background"] strong,
.blog-content div[class*="bg-white"] strong,
.blog-content div[class*="bg-gray"] strong,
.blog-content div[class*="bg-blue"] strong,
.blog-content div[class*="bg-slate"] strong {
  @apply !text-primary;
}

.blog-content div[style*="background"] li::marker,
.blog-content div[class*="bg-white"] li::marker,
.blog-content div[class*="bg-gray"] li::marker,
.blog-content div[class*="bg-blue"] li::marker,
.blog-content div[class*="bg-slate"] li::marker {
  @apply !text-primary;
}