/**
 * th_usps Frontend Styles
 * Responsive USP section styling with th_themeconfig integration
 */

/* CSS Variables with fallbacks for th_themeconfig integration */
:root {
  --th-primary-color: var(--primary-color, #007cba);
  --th-secondary-color: var(--secondary-color, #666666);
  --th-text-color: var(--text-color, #333333);
  --th-background-color: var(--background-color, #ffffff);
  --th-border-color: var(--border-color, #e0e0e0);
  --th-border-radius: var(--border-radius, 8px);
  --th-font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --th-spacing-xs: var(--spacing-xs, 0.5rem);
  --th-spacing-sm: var(--spacing-sm, 1rem);
  --th-spacing-md: var(--spacing-md, 1.5rem);
  --th-spacing-lg: var(--spacing-lg, 2rem);
  --th-spacing-xl: var(--spacing-xl, 3rem);
}

/* Fallback styles when th_themeconfig is not available */
.th-usp-section:not([style*="--primary-color"]) {
  --th-primary-color: #007cba;
  --th-secondary-color: #666666;
  --th-text-color: #333333;
  --th-background-color: #ffffff;
  --th-border-color: #e0e0e0;
  --th-border-radius: 8px;
  --th-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --th-spacing-xs: 0.5rem;
  --th-spacing-sm: 1rem;
  --th-spacing-md: 1.5rem;
  --th-spacing-lg: 2rem;
  --th-spacing-xl: 3rem;
}

/* USP Section Container */
.th-usp-section {
  margin: var(--th-spacing-lg) 0;
  padding: var(--th-spacing-md);
  font-family: var(--th-font-family);
  opacity: 1;
}

.th-usp-section.th-usp-visible {
  opacity: 1;
}

/* Section Title */
.th-usp-section-title {
  text-align: center;
  margin: 0 0 var(--th-spacing-lg) 0;
  padding: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--th-primary-color);
  line-height: 1.3;
}

/* USP Grid Layout */
.th-usp-grid {
  display: grid;
  gap: var(--th-spacing-md);
}

/* Grid Column Configurations */
.th-usp-grid-1-cols {
  grid-template-columns: 1fr;
}

.th-usp-grid-2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.th-usp-grid-3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.th-usp-grid-4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.th-usp-grid-5-cols {
  grid-template-columns: repeat(5, 1fr);
}

.th-usp-grid-6-cols {
  grid-template-columns: repeat(6, 1fr);
}

/* USP Item Container */
.th-usp-item {
  background: var(--th-background-color);
  border: 1px solid var(--th-border-color);
  border-radius: var(--th-border-radius);
  padding: var(--th-spacing-md);
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 1;
}

.th-usp-item.th-usp-item-animated {
  opacity: 1;
}

.th-usp-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--th-primary-color);
}

/* USP Content Layout */
.th-usp-content {
  display: flex;
  height: 100%;
  align-items: center;
}

/* Horizontal Layout (icon-left/right) */
.th-usp-content.th-usp-horizontal {
  flex-direction: row;
  gap: var(--th-spacing-sm);
}

.th-usp-content.th-usp-horizontal.th-usp-reverse {
  flex-direction: row-reverse;
}

/* Vertical Layout (icon-top/bottom) */
.th-usp-content.th-usp-vertical {
  flex-direction: column;
  text-align: center;
  gap: var(--th-spacing-sm);
}

.th-usp-content.th-usp-vertical.th-usp-reverse {
  flex-direction: column-reverse;
}

/* Icon Styling */
.th-usp-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-usp-icon img {
  max-width: 64px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Icon Position Specific Styles */
.th-usp-icon-left,
.th-usp-icon-right {
  width: 64px;
  height: 64px;
}

.th-usp-icon-top,
.th-usp-icon-bottom {
  width: 80px;
  height: 80px;
}

.th-usp-icon-top img,
.th-usp-icon-bottom img {
  max-width: 80px;
  max-height: 80px;
}

/* Text Content */
.th-usp-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.th-usp-text-left {
  text-align: left;
}

.th-usp-text-right {
  text-align: left;
}

.th-usp-text-top,
.th-usp-text-bottom {
  text-align: center;
}

/* Title Styling */
.th-usp-title {
  margin: 0 0 var(--th-spacing-xs) 0;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--th-text-color);
  line-height: 1.4;
}

/* Description Styling */
.th-usp-description {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--th-secondary-color);
  line-height: 1.5;
}

/* Template Specific Adjustments */

/* Icon Left - Text Right */
.th-usp-template-icon-left-text-right .th-usp-text {
  padding-left: var(--th-spacing-xs);
}

/* Figma Design Specific Styles */
.th-usp-item.figma-design {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  height: auto;
  opacity: 1;
}

.th-usp-item.figma-design:hover {
  box-shadow: none;
  border-color: transparent;
}

.th-usp-item.figma-design .th-usp-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: auto;
}

.th-usp-item.figma-design .th-usp-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-usp-item.figma-design .th-usp-icon img {
  width: 50px;
  height: 50px;
  max-width: 50px;
  max-height: 50px;
  opacity: 1;
  padding: 7px;
}

.th-usp-item.figma-design .th-usp-text {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 0;
}

.th-usp-item.figma-design .th-usp-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #00181C;
  margin: 0;
  white-space: pre-line;
  font-variation-settings: 'wdth' 100;
  max-width: 75px;
}

.th-usp-item.figma-design .th-usp-description {
  display: none;
}

/* Icon Right - Text Left */
.th-usp-template-icon-right-text-left .th-usp-text {
  padding-right: var(--th-spacing-xs);
}

/* Icon Top - Text Bottom */
.th-usp-template-icon-top-text-bottom .th-usp-text {
  padding-top: var(--th-spacing-xs);
}

/* Icon Bottom - Text Top */
.th-usp-template-icon-bottom-text-top .th-usp-text {
  padding-bottom: var(--th-spacing-xs);
}

/* Responsive Design */

/* Large tablets and small desktops */
@media (max-width: 1024px) {
  .th-usp-grid-6-cols {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .th-usp-grid-5-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets */
@media (max-width: 768px) {
  .th-usp-section {
    margin: var(--th-spacing-md) 0;
    padding: var(--th-spacing-sm);
  }
  
  .th-usp-section-title {
    font-size: 1.5rem;
    margin-bottom: var(--th-spacing-md);
  }
  
  .th-usp-grid {
    gap: var(--th-spacing-sm);
  }
  
  .th-usp-grid-6-cols,
  .th-usp-grid-5-cols,
  .th-usp-grid-4-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .th-usp-grid-3-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .th-usp-item {
    padding: var(--th-spacing-sm);
  }
  
  /* Convert horizontal layouts to vertical on tablets */
  .th-usp-content.th-usp-horizontal {
    flex-direction: column;
    text-align: center;
  }
  
  .th-usp-content.th-usp-horizontal.th-usp-reverse {
    flex-direction: column;
  }
  
  .th-usp-text-left,
  .th-usp-text-right {
    text-align: center;
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  .th-usp-section {
    margin: var(--th-spacing-sm) 0;
    padding: var(--th-spacing-xs);
  }
  
  .th-usp-section-title {
    font-size: 1.25rem;
    margin-bottom: var(--th-spacing-sm);
  }
  
  .th-usp-grid {
    gap: var(--th-spacing-xs);
  }
  
  /* All grids become single column on mobile */
  .th-usp-grid-6-cols,
  .th-usp-grid-5-cols,
  .th-usp-grid-4-cols,
  .th-usp-grid-3-cols,
  .th-usp-grid-2-cols {
    grid-template-columns: 1fr 1fr;
  }
  
  .th-usp-item {
    padding: var(--th-spacing-sm);
  }
  
  .th-usp-title {
    font-size: 1rem;
  }
  
  .th-usp-description {
    font-size: 0.8125rem;
  }
  
  .th-usp-icon img {
    max-width: 48px;
    max-height: 48px;
  }
  
  .th-usp-icon-top img,
  .th-usp-icon-bottom img {
    max-width: 56px;
    max-height: 56px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .th-usp-item {
    border-width: 2px;
  }
  
  .th-usp-item:hover {
    border-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .th-usp-item {
    /* No transitions needed */
  }
  
  .th-usp-item:hover {
    /* No transform needed */
  }
}

/* Icon Loading */
.th-usp-icon img {
  opacity: 1;
}

.th-usp-icon img.th-usp-icon-loaded {
  opacity: 1;
}

/* Focus Styles for Accessibility */
/*.th-usp-item:focus {*/
/*  outline: 2px solid var(--th-primary-color);*/
/*  outline-offset: 2px;*/
/*  box-shadow: 0 0 0 4px rgba(0, 124, 186, 0.1);*/
/*}*/

/* Skip animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .th-usp-section,
  .th-usp-item,
  .th-usp-icon img {
    opacity: 1;
  }
}

/* USP overlay link (full-item clickable) */
.th-usp-item { position: relative; }
.nx-usp-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-decoration: none;
}
.th-usp-item:has(a.nx-usp-overlay-link) { cursor: pointer; }
.th-usp-item .th-usp-title,
.th-usp-item .th-usp-text { transition: color .25s ease; }
.th-usp-icon img { transition: transform .25s ease; }
.th-usp-item:has(a.nx-usp-overlay-link):hover .th-usp-title,
.th-usp-item:has(a.nx-usp-overlay-link):hover .th-usp-text {
  color: rgb(30, 195, 164);
}
.th-usp-item:has(a.nx-usp-overlay-link):hover .th-usp-icon img {
  transform: scale(1.08);
}

/* Print styles */
@media print {
  .th-usp-section {
    break-inside: avoid;
    margin: 1rem 0;
    opacity: 1;
  }
  
  .th-usp-item {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
    opacity: 1;
  }
  
  .th-usp-item:hover {
    box-shadow: none;
  }
}