/* ========================================
   CTA BUTTONS STYLES
   ======================================== */
/* 
   Використовується на всіх service сторінках:
   - digital-advertising.html
   - web-animations.html  
   - sound-design.html
   - explainer-videos.html
   - showreels.html
   
   Стилі для кнопок "Get Quote" та інших CTA елементів
*/

/* Контейнер для кнопок CTA */
.cta-buttons-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
  align-items: center;
}

/* Базова стилізація кнопок CTA - Brandbook Style */
.cta-button {
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  transition: var(--transition);
  border: none;
  display: inline-block;
  width: auto;
  min-width: 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Основна кнопка (рожева) - Brandbook gradient */
.cta-button.primary-btn {
  background: var(--gradient);
  color: white;
  box-shadow: var(--shadow-card);
}

/* Другорядна кнопка (зелена) - використовується тільки на showreels.html */
.cta-button.secondary-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  box-shadow: var(--shadow-card);
}

.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
  color: white;
  text-decoration: none;
}

.cta-button.primary-btn:hover {
  background: var(--gradient);
  box-shadow: 0 4px 15px rgba(254, 136, 135, 0.4);
}

.cta-button.secondary-btn:hover {
  background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.cta-button:active {
  transform: translateY(0);
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet (768px) - Brandbook responsive */
@media (max-width: 768px) {
  .cta-buttons-container {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  
  .cta-button {
    width: 100%;
    max-width: 300px;
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    margin: 0 auto;
  }
}

/* Mobile (480px) - Brandbook responsive */
@media (max-width: 480px) {
  .cta-buttons-container {
    padding: 0 0.75rem;
    gap: 0.75rem;
  }
  
  .cta-button {
    width: 100%;
    max-width: 280px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    min-width: 100px;
  }
}