/* 
 * Sprout Advocates - Enhanced Practice Areas Styles
 * Implements animations, success metrics, and interactive elements
 */

/* Practice Areas Base Styles */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

/* Enhanced Practice Card */
.practice-card {
  background-color: var(--primary-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--light-gray);
  opacity: 0;
  transform: translateY(30px);
}

.practice-card.animate {
  opacity: 1;
  transform: translateY(0);
}

.practice-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--box-shadow-hover);
  border-color: var(--primary-green);
}

/* Practice Card Background Patterns */
.practice-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.03;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.practice-card:hover::before {
  opacity: 0.06;
}

.practice-card[data-category="corporate"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231e6642' d='M336 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm0 464H48V48h288v416zM144 112h96c8.8 0 16-7.2 16-16s-7.2-16-16-16h-96c-8.8 0-16 7.2-16 16s7.2 16 16 16zm0 64h96c8.8 0 16-7.2 16-16s-7.2-16-16-16h-96c-8.8 0-16 7.2-16 16s7.2 16 16 16zm0 64h96c8.8 0 16-7.2 16-16s-7.2-16-16-16h-96c-8.8 0-16 7.2-16 16s7.2 16 16 16zm0 64h96c8.8 0 16-7.2 16-16s-7.2-16-16-16h-96c-8.8 0-16 7.2-16 16s7.2 16 16 16zm-30.5 48h157c8.8 0 16-7.2 16-16s-7.2-16-16-16h-157c-8.8 0-16 7.2-16 16s7.2 16 16 16z'/%3E%3C/svg%3E");
}

.practice-card[data-category="litigation"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231e6642' d='M504.971 199.362l-22.627-22.627c-9.373-9.373-24.569-9.373-33.941 0l-5.657 5.657L329.608 69.255l5.657-5.657c9.373-9.373 9.373-24.569 0-33.941L312.638 7.029c-9.373-9.373-24.569-9.373-33.941 0L154.246 131.48c-9.373 9.373-9.373 24.569 0 33.941l22.627 22.627c9.373 9.373 24.569 9.373 33.941 0l5.657-5.657 39.598 39.598-81.04 81.04-5.657-5.657c-12.497-12.497-32.758-12.497-45.255 0L9.373 412.118c-12.497 12.497-12.497 32.758 0 45.255l45.255 45.255c12.497 12.497 32.758 12.497 45.255 0l114.745-114.745c12.497-12.497 12.497-32.758 0-45.255l-5.657-5.657 81.04-81.04 39.598 39.598-5.657 5.657c-9.373 9.373-9.373 24.569 0 33.941l22.627 22.627c9.373 9.373 24.569 9.373 33.941 0l124.451-124.451c9.372-9.372 9.372-24.568 0-33.941z'/%3E%3C/svg%3E");
}

.practice-card[data-category="real-estate"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%231e6642' d='M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z'/%3E%3C/svg%3E");
}

.practice-card[data-category="ip"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%231e6642' d='M544 224h-53.88c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8H544v64h-53.88c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8H544v48c0 26.51-21.49 48-48 48H144c-26.51 0-48-21.49-48-48v-48h53.88c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8H96v-64h53.88c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8H96v-48c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v48zm-448 64v128h32v-128H96zm160 0v128h32v-128h-32zm160 0v128h32v-128h-32zM64 128H32c-17.67 0-32 14.33-32 32v192c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V160c0-17.67-14.33-32-32-32zm544 0h-32c-17.67 0-32 14.33-32 32v192c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V160c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
}

.practice-card[data-category="employment"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%231e6642' d='M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z'/%3E%3C/svg%3E");
}

.practice-card[data-category="tax"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%231e6642' d='M336 0H48C21.49 0 0 21.49 0 48v416c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM192 128c35.35 0 64 28.65 64 64s-28.65 64-64 64-64-28.65-64-64 28.65-64 64-64zm112 236.8c0 10.61-10 19.2-22.4 19.2H102.4C90 384 80 375.41 80 364.8v-19.2c0-31.81 30.09-57.6 67.2-57.6h5.14c21.55 5.88 43.97 9.6 67.66 9.6 23.69 0 46.11-3.72 67.66-9.6h5.14c37.11 0 67.2 25.79 67.2 57.6v19.2z'/%3E%3C/svg%3E");
}

/* Practice Icon */
.practice-icon {
  font-size: 2.5rem;
  color: var(--primary-green);
  margin-bottom: var(--spacing-md);
  position: relative;
  z-index: 1;
}

.practice-card:hover .practice-icon {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Practice Card Content */
.practice-card h3 {
  color: var(--primary-blue);
  margin-bottom: var(--spacing-sm);
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.practice-card:hover h3 {
  color: var(--primary-green);
}

.practice-card p {
  color: var(--dark-gray);
  margin-bottom: var(--spacing-md);
  position: relative;
  z-index: 1;
}

/* Success Metrics */
.success-metric {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--primary-green);
  color: var(--primary-white);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  z-index: 2;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.practice-card:hover .success-metric {
  opacity: 1;
  transform: translateY(0);
}

/* Hover Content */
.card-hover-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-white);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 2;
  border-radius: var(--border-radius-md);
}

.practice-card:hover .card-hover-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.card-hover-content h3 {
  color: var(--primary-green);
  margin-bottom: var(--spacing-sm);
}

.card-hover-content ul {
  text-align: left;
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-md);
}

.card-hover-content ul li {
  margin-bottom: 5px;
  color: var(--dark-gray);
}

/* Practice Area Tabs for Mobile */
.practice-tabs {
  display: none;
  margin-bottom: var(--spacing-md);
}

.practice-tab-buttons {
  display: flex;
  overflow-x: auto;
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--light-gray);
}

.practice-tab-button {
  padding: 8px 16px;
  background: none;
  border: none;
  color: var(--dark-gray);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.practice-tab-button.active {
  color: var(--primary-green);
  border-bottom: 2px solid var(--primary-green);
}

/* Animation Delays for Cards */
.practice-card:nth-child(1) {
  transition-delay: 0.1s;
}

.practice-card:nth-child(2) {
  transition-delay: 0.2s;
}

.practice-card:nth-child(3) {
  transition-delay: 0.3s;
}

.practice-card:nth-child(4) {
  transition-delay: 0.4s;
}

.practice-card:nth-child(5) {
  transition-delay: 0.5s;
}

.practice-card:nth-child(6) {
  transition-delay: 0.6s;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .practice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .practice-tabs {
    display: block;
  }
  
  .practice-grid {
    display: none;
  }
  
  .practice-grid.active {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  .practice-card {
    min-height: auto;
    margin-bottom: var(--spacing-md);
  }
  
  .practice-card:hover .card-hover-content {
    display: none;
  }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  .practice-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  .practice-card:hover {
    transform: none !important;
  }
  
  .success-metric,
  .card-hover-content {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .practice-card {
    border: 2px solid currentColor;
  }
  
  .practice-icon {
    color: currentColor;
  }
}

/* Mobile Schedule Button */
.schedule-mobile {
  display: none;
}

@media (max-width: 768px) {
  .schedule-mobile {
    display: inline-block;
    margin-top: var(--spacing-sm);
  }
}