/**
 * Text Content Section Component
 * Flexible text content block with comprehensive typography controls
 * 
 * AVAILABLE FONT CONTROLS:
 * 
 * SUBTITLE MODIFIERS:
 * - Font Weight: text-content-section__subtitle--weight-[300|400|500|600|700|800|900]
 * - Font Size: text-content-section__subtitle--size-[xs|sm|md|lg]
 * - Letter Spacing: text-content-section__subtitle--spacing-[tight|normal|wide|wider]
 * - Text Align: text-content-section__subtitle--align-[left|center|right]
 * 
 * TITLE MODIFIERS:
 * - Font Weight: text-content-section__title--weight-[300|400|500|600|700|800|900]
 * - Font Size: text-content-section__title--size-[sm|md|lg|xl|xxl]
 * - Line Height: text-content-section__title--lh-[tighter|tight|normal|relaxed]
 * - Letter Spacing: text-content-section__title--spacing-[tight|normal|wide]
 * - Text Align: text-content-section__title--align-[left|center|right]
 * 
 * CONTENT MODIFIERS:
 * - Font Size: text-content-section__content--size-[xs|small|default|medium|large|xlarge|xxlarge]
 * - Font Weight: text-content-section__content--weight-[300|400|500|600|700]
 * - Line Height: text-content-section__content--lh-[tight|normal|relaxed|loose]
 * - Letter Spacing: text-content-section__content--spacing-[tight|normal|wide]
 * - Text Align: text-content-section__content--align-[left|center|right|justify]
 * 
 * USAGE EXAMPLE:
 * <div class="text-content-section__title text-content-section__title--weight-800 text-content-section__title--size-xl">
 */

.text-content-section {
  padding-top: var(--space-80);
  padding-bottom: var(--space-80);
}

@media (min-width: 1024px) {
  .text-content-section {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
  }
}

/* Background Color Modifiers */
.text-content-section--bg-white {
  background-color: #fff;
}

.text-content-section--bg-light {
  background-color: #f5f5f5;
}

.text-content-section--bg-gray {
  background-color: #e8e8e8;
}

/* Section Inner */
.text-content-section__inner {
  width: 100%;
}

/* Max Width Modifiers */
.text-content-section__inner--max-small {
  max-width: 800px;
}

.text-content-section__inner--max-default {
  max-width: 1000px;
}

.text-content-section__inner--max-large {
  max-width: 1200px;
}

.text-content-section__inner--max-full {
  max-width: 100%;
}

/* Alignment Modifiers */
.text-content-section__inner--align-left {
  margin-left: 0;
  margin-right: auto;
}

.text-content-section__inner--align-center {
  margin-left: auto;
  margin-right: auto;
}

.text-content-section__inner--align-right {
  margin-left: auto;
  margin-right: 0;
}

/* Subtitle */
.text-content-section__subtitle {
  font-size: var(--fs-200);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  opacity: 0.7;
  margin-bottom: var(--space-16);
}

/* Subtitle Font Weight Modifiers */
.text-content-section__subtitle--weight-300 { font-weight: 300; }
.text-content-section__subtitle--weight-400 { font-weight: 400; }
.text-content-section__subtitle--weight-500 { font-weight: 500; }
.text-content-section__subtitle--weight-600 { font-weight: 600; }
.text-content-section__subtitle--weight-700 { font-weight: 700; }
.text-content-section__subtitle--weight-800 { font-weight: 800; }
.text-content-section__subtitle--weight-900 { font-weight: 900; }

/* Subtitle Font Size Modifiers */
.text-content-section__subtitle--size-xs { font-size: var(--fs-100); }
.text-content-section__subtitle--size-sm { font-size: var(--fs-200); }
.text-content-section__subtitle--size-md { font-size: var(--fs-300); }
.text-content-section__subtitle--size-lg { font-size: var(--fs-400); }

/* Subtitle Letter Spacing Modifiers */
.text-content-section__subtitle--spacing-tight { letter-spacing: 0.05em; }
.text-content-section__subtitle--spacing-normal { letter-spacing: 0.1em; }
.text-content-section__subtitle--spacing-wide { letter-spacing: 0.15em; }
.text-content-section__subtitle--spacing-wider { letter-spacing: 0.2em; }

/* Subtitle Text Alignment Modifiers */
.text-content-section__subtitle--align-left { text-align: left; }
.text-content-section__subtitle--align-center { text-align: center; }
.text-content-section__subtitle--align-right { text-align: right; }

/* Title */
.text-content-section__title {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin-bottom: var(--space-32);
}

@media (min-width: 768px) {
  .text-content-section__title {
    font-size: clamp(1.75rem, 3vw, 3rem);
  }
}

@media (min-width: 1024px) {
  .text-content-section__title {
    font-size: clamp(2rem, 3.5vw, 3.5rem);
  }
}

/* Title Font Weight Modifiers */
.text-content-section__title--weight-300 { font-weight: 300; }
.text-content-section__title--weight-400 { font-weight: 400; }
.text-content-section__title--weight-500 { font-weight: 500; }
.text-content-section__title--weight-600 { font-weight: 600; }
.text-content-section__title--weight-700 { font-weight: 700; }
.text-content-section__title--weight-800 { font-weight: 800; }
.text-content-section__title--weight-900 { font-weight: 900; }

/* Title Font Size Modifiers */
.text-content-section__title--size-sm {
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.text-content-section__title--size-md {
  font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
}

.text-content-section__title--size-lg {
  font-size: clamp(2.5rem, 4vw, 4.5rem) !important;
}

.text-content-section__title--size-xl {
  font-size: clamp(3rem, 5vw, 6rem) !important;
}

.text-content-section__title--size-xxl {
  font-size: clamp(3.5rem, 6vw, 7rem) !important;
}

/* Title Line Height Modifiers */
.text-content-section__title--lh-tighter { line-height: 1; }
.text-content-section__title--lh-tight { line-height: var(--lh-tight); }
.text-content-section__title--lh-normal { line-height: var(--lh-normal); }
.text-content-section__title--lh-relaxed { line-height: var(--lh-relaxed); }

/* Title Letter Spacing Modifiers */
.text-content-section__title--spacing-tight { letter-spacing: -0.02em; }
.text-content-section__title--spacing-normal { letter-spacing: 0; }
.text-content-section__title--spacing-wide { letter-spacing: 0.02em; }

/* Title Text Alignment Modifiers */
.text-content-section__title--align-left { text-align: left; }
.text-content-section__title--align-center { text-align: center; }
.text-content-section__title--align-right { text-align: right; }

/* Content */
.text-content-section__content {
  color: var(--color-text);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-48);
}

/* Content Size Modifiers */
.text-content-section__content--size-xs {
  font-size: var(--fs-100);
}

.text-content-section__content--size-small {
  font-size: var(--fs-200);
}

.text-content-section__content--size-default {
  font-size: var(--fs-300);
}

.text-content-section__content--size-medium {
  font-size: var(--fs-400);
}

.text-content-section__content--size-large {
  font-size: var(--fs-500);
}

.text-content-section__content--size-xlarge {
  font-size: var(--fs-600);
}

.text-content-section__content--size-xxlarge {
  font-size: var(--fs-700);
}

/* Content Font Weight Modifiers */
.text-content-section__content--weight-300 { font-weight: 300; }
.text-content-section__content--weight-400 { font-weight: 400; }
.text-content-section__content--weight-500 { font-weight: 500; }
.text-content-section__content--weight-600 { font-weight: 600; }
.text-content-section__content--weight-700 { font-weight: 700; }

/* Content Line Height Modifiers */
.text-content-section__content--lh-tight { line-height: var(--lh-tight); }
.text-content-section__content--lh-normal { line-height: var(--lh-normal); }
.text-content-section__content--lh-relaxed { line-height: var(--lh-relaxed); }
.text-content-section__content--lh-loose { line-height: 2; }

/* Content Text Alignment Modifiers */
.text-content-section__content--align-left { text-align: left; }
.text-content-section__content--align-center { text-align: center; }
.text-content-section__content--align-right { text-align: right; }
.text-content-section__content--align-justify { text-align: justify; }

/* Content Letter Spacing Modifiers */
.text-content-section__content--spacing-tight { letter-spacing: -0.01em; }
.text-content-section__content--spacing-normal { letter-spacing: 0; }
.text-content-section__content--spacing-wide { letter-spacing: 0.02em; }

/* Content Typography */
.text-content-section__content p {
  margin-bottom: var(--space-24);
  line-height: var(--lh-normal);
}

.text-content-section__content p:last-child {
  margin-bottom: 0;
}

.text-content-section__content h1,
.text-content-section__content h2,
.text-content-section__content h3,
.text-content-section__content h4,
.text-content-section__content h5,
.text-content-section__content h6 {
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin-bottom: var(--space-16);
  margin-top: var(--space-32);
}

.text-content-section__content h1:first-child,
.text-content-section__content h2:first-child,
.text-content-section__content h3:first-child,
.text-content-section__content h4:first-child,
.text-content-section__content h5:first-child,
.text-content-section__content h6:first-child {
  margin-top: 0;
}

.text-content-section__content h1 { font-size: var(--fs-800); }
.text-content-section__content h2 { font-size: var(--fs-700); }
.text-content-section__content h3 { font-size: var(--fs-600); }
.text-content-section__content h4 { font-size: var(--fs-500); }
.text-content-section__content h5 { font-size: var(--fs-400); }
.text-content-section__content h6 { font-size: var(--fs-300); }

.text-content-section__content strong,
.text-content-section__content b {
  font-weight: 700;
}

.text-content-section__content em,
.text-content-section__content i {
  font-style: italic;
}

.text-content-section__content a {
  color: var(--color-text);
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.text-content-section__content a:hover,
.text-content-section__content a:focus {
  opacity: 0.7;
}

.text-content-section__content ul,
.text-content-section__content ol {
  margin-bottom: var(--space-24);
  padding-left: var(--space-32);
}

.text-content-section__content ul {
  list-style-type: disc;
}

.text-content-section__content ol {
  list-style-type: decimal;
}

.text-content-section__content li {
  margin-bottom: var(--space-12);
  line-height: var(--lh-normal);
}

/* Button Action */
.text-content-section__action {
  display: flex;
  margin-top: var(--space-48);
}

.text-content-section__action--left {
  justify-content: flex-start;
}

.text-content-section__action--center {
  justify-content: center;
}

.text-content-section__action--right {
  justify-content: flex-end;
}

.text-content-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-32);
  font-size: var(--fs-200);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  background-color: var(--color-text);
  color: var(--color-text-light);
  border-radius: 50px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.text-content-section__button:hover,
.text-content-section__button:focus {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.text-content-section__button svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.text-content-section__button:hover svg {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .text-content-section__button {
    padding: var(--space-20) var(--space-40);
    font-size: var(--fs-200);
  }
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .text-content-section {
    padding-top: var(--space-48);
    padding-bottom: var(--space-48);
  }
  
  .text-content-section__content--size-large {
    font-size: var(--fs-400);
  }
  
  .text-content-section__content--size-xlarge {
    font-size: var(--fs-500);
  }
  
  .text-content-section__button {
    width: 100%;
  }
}