// ==========================================================================
// CONTENT PATTERNS
// ==========================================================================
// Theme-agnostic content layout patterns and structures
// Visual styling handled by themes - includes component-specific classes
// ==========================================================================

// COMPONENT-SPECIFIC CONTENT PATTERNS
// These classes are used by our Angular components

// ARTICLE PATTERNS
.content-article {
  display: block;
  width: 100%;
  max-width: var(--article-max-width, #{$semantic-sizing-content-medium});
  margin: 0 auto;

  &.article-is-featured {
    max-width: var(--article-featured-max-width, #{$semantic-sizing-content-wide});
    
    .article-title {
      font-size: var(--article-featured-title-size, 3rem);
      line-height: var(--article-featured-title-line-height, 1.1);
    }
  }

  &.article-is-compact {
    max-width: var(--article-compact-max-width, #{$semantic-sizing-content-narrow});
    
    .article-header {
      margin-bottom: #{$semantic-spacing-component-padding-md};
    }
    
    .article-title {
      font-size: var(--article-compact-title-size, 1.5rem);
    }
  }

  &.article-has-lead-image {
    .article-lead-image {
      margin-bottom: #{$semantic-spacing-content-paragraph};
      
      img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: var(--article-image-border-radius, #{$semantic-border-card-radius});
      }
    }
  }

  // Article structure
  .article-header {
    margin-bottom: #{$semantic-spacing-layout-section-sm};
    
    .article-title {
      font-size: var(--article-title-size, 2.5rem);
      font-weight: var(--article-title-weight, 700);
      line-height: var(--article-title-line-height, 1.2);
      margin: 0 0 #{$semantic-spacing-component-padding-sm} 0;
    }
    
    .article-subtitle {
      font-size: var(--article-subtitle-size, 1.25rem);
      font-weight: var(--article-subtitle-weight, 400);
      line-height: var(--article-subtitle-line-height, 1.4);
      margin: 0 0 #{$semantic-spacing-component-padding-md} 0;
      color: var(--article-subtitle-color, rgba(0, 0, 0, 0.6));
    }
    
    .article-meta {
      display: flex;
      flex-wrap: wrap;
      gap: #{$semantic-spacing-component-padding-sm};
      align-items: center;
      font-size: var(--article-meta-size, 0.875rem);
      color: var(--article-meta-color, rgba(0, 0, 0, 0.5));
    }
  }
  
  .article-content {
    line-height: var(--article-content-line-height, 1.7);
    font-size: var(--article-content-size, 1rem);
    
    > * + * {
      margin-top: #{$semantic-spacing-content-paragraph};
    }
  }
  
  .article-footer {
    margin-top: #{$semantic-spacing-layout-section-sm};
    padding-top: #{$semantic-spacing-component-padding-md};
    border-top: #{$semantic-border-divider-width} solid var(--article-footer-border, transparent);
  }
}

// HERO PATTERNS
.content-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-min-height, 60vh);
  overflow: hidden;

  &.hero-is-fullscreen {
    min-height: 100vh;
    height: 100vh;
  }

  &.hero-content-centered {
    text-align: center;
    
    .hero-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  &.hero-has-background {
    .hero-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      
      .hero-bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
  }

  &.hero-has-overlay-effect {
    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--hero-overlay-color, rgba(0, 0, 0, 0.3));
      z-index: 2;
    }
  }

  .hero-content {
    position: relative;
    z-index: 3;
    padding: #{$semantic-spacing-layout-section-md};
    max-width: var(--hero-content-max-width, #{$semantic-sizing-content-medium});
    width: 100%;

    .hero-title {
      font-size: var(--hero-title-size, 3.5rem);
      font-weight: var(--hero-title-weight, 800);
      line-height: var(--hero-title-line-height, 1.1);
      margin: 0 0 #{$semantic-spacing-component-padding-lg} 0;
    }

    .hero-subtitle {
      font-size: var(--hero-subtitle-size, 1.5rem);
      font-weight: var(--hero-subtitle-weight, 400);
      line-height: var(--hero-subtitle-line-height, 1.3);
      margin: 0 0 #{$semantic-spacing-component-padding-md} 0;
      color: var(--hero-subtitle-color, rgba(0, 0, 0, 0.7));
    }

    .hero-description {
      font-size: var(--hero-description-size, 1.125rem);
      line-height: var(--hero-description-line-height, 1.6);
      margin: 0 0 #{$semantic-spacing-layout-section-sm} 0;
      color: var(--hero-description-color, rgba(0, 0, 0, 0.8));
    }

    .hero-actions {
      display: flex;
      gap: #{$semantic-spacing-component-padding-md};
      flex-wrap: wrap;
      align-items: center;
    }
  }

  // Responsive hero
  @media (max-width: #{$base-breakpoint-md}) {
    .hero-content {
      padding: #{$semantic-spacing-layout-section-sm};
      
      .hero-title {
        font-size: var(--hero-mobile-title-size, 2.5rem);
      }
      
      .hero-subtitle {
        font-size: var(--hero-mobile-subtitle-size, 1.25rem);
      }
    }
  }
}

// SECTION PATTERNS
.content-section {
  width: 100%;
  
  &.section-is-padded {
    padding: #{$semantic-spacing-layout-section-md} 0;
  }
  
  &.section-is-contained {
    max-width: var(--section-max-width, #{$semantic-sizing-content-medium});
    margin: 0 auto;
    padding-left: #{$semantic-spacing-component-padding-lg};
    padding-right: #{$semantic-spacing-component-padding-lg};
  }
  
  &.section-content-centered {
    text-align: center;
    
    .section-header,
    .section-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  
  &.section-is-highlighted {
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: #{$base-spacing-1};
      background: var(--section-highlight-color, currentColor);
      opacity: var(--section-highlight-opacity, 0.3);
    }
    
    padding-left: #{$semantic-spacing-component-padding-lg};
  }

  .section-header {
    margin-bottom: #{$semantic-spacing-layout-section-xs};
    
    .section-title {
      font-size: var(--section-title-size, 2rem);
      font-weight: var(--section-title-weight, 600);
      line-height: var(--section-title-line-height, 1.2);
      margin: 0 0 #{$semantic-spacing-component-padding-sm} 0;
    }
    
    .section-subtitle {
      font-size: var(--section-subtitle-size, 1.125rem);
      font-weight: var(--section-subtitle-weight, 400);
      line-height: var(--section-subtitle-line-height, 1.4);
      margin: 0;
      color: var(--section-subtitle-color, rgba(0, 0, 0, 0.6));
    }
  }
  
  .section-content {
    line-height: var(--section-content-line-height, 1.6);
  }
  
  .section-actions {
    margin-top: #{$semantic-spacing-layout-section-xs};
    display: flex;
    gap: #{$semantic-spacing-component-padding-sm};
    flex-wrap: wrap;
    align-items: center;
  }
}

// MEDIA PATTERNS
.content-media {
  display: block;
  width: 100%;
  
  &.media-is-responsive {
    .media-container {
      position: relative;
      width: 100%;
      
      img, video, audio {
        max-width: 100%;
        height: auto;
        display: block;
      }
    }
  }
  
  &.media-is-rounded {
    .media-container {
      border-radius: var(--media-border-radius, #{$semantic-border-card-radius});
      overflow: hidden;
    }
  }
  
  &.media-has-caption {
    .media-caption {
      padding: #{$semantic-spacing-component-padding-sm} 0;
      
      .caption-text {
        font-size: var(--media-caption-size, 0.875rem);
        line-height: var(--media-caption-line-height, 1.4);
        color: var(--media-caption-color, rgba(0, 0, 0, 0.6));
        margin: 0;
        font-style: var(--media-caption-style, italic);
      }
      
      &.media-caption-top {
        order: -1;
      }
      
      &.media-caption-bottom {
        order: 1;
      }
    }
  }
  
  &.media-has-overlay {
    .media-container {
      position: relative;
      
      .media-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--media-overlay-color, rgba(0, 0, 0, 0.3));
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity var(--transition-duration, 0.3s) var(--transition-easing, ease);
      }
      
      &:hover .media-overlay {
        opacity: 1;
      }
    }
  }

  // Media layouts
  &.media-layout-featured {
    .media-container {
      aspect-ratio: var(--media-featured-aspect-ratio, 16/9);
      
      img, video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  
  &.media-layout-thumbnail {
    max-width: var(--media-thumbnail-size, #{$base-sizing-width-32});
    
    .media-container {
      aspect-ratio: var(--media-thumbnail-aspect-ratio, 1);
      
      img, video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  
  &.media-layout-gallery {
    .media-container {
      aspect-ratio: var(--media-gallery-aspect-ratio, 4/3);
      
      img, video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  // Media types
  &.media-type-image {
    .media-image {
      &.media-cover {
        object-fit: cover;
      }
      
      &.media-contain {
        object-fit: contain;
      }
    }
  }
  
  &.media-type-video,
  &.media-type-audio {
    .media-video,
    .media-audio {
      width: 100%;
      background: var(--media-player-bg, #000);
    }
  }
  
  &.media-type-embed {
    .media-embed {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: var(--media-embed-aspect-ratio, 56.25%); // 16:9 default
      
      iframe,
      object,
      embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
}

// ==========================================================================
// LEGACY CONTENT PATTERNS - EXISTING PATTERNS BELOW
// ==========================================================================

// MEDIA OBJECT PATTERN
.media {
  display: flex;
  align-items: flex-start;
  gap: var(--media-gap, 16px);

  .media-object {
    flex-shrink: 0;
    width: var(--media-object-size, auto);
    height: var(--media-object-size, auto);
    border-radius: var(--media-object-border-radius, 4px);

    &.media-object-circle {
      border-radius: 50%;
    }

    &.media-object-sm {
      --media-object-size: 32px;
    }

    &.media-object-lg {
      --media-object-size: 64px;
    }
  }

  .media-body {
    flex: 1;
    min-width: 0; // Prevents flex item overflow

    .media-heading {
      margin: 0 0 var(--media-heading-margin, 8px) 0;
      font-size: var(--media-heading-size, 1rem);
      font-weight: var(--media-heading-weight, 600);
    }

    .media-content {
      margin: 0;
      line-height: var(--media-content-line-height, 1.5);
    }

    .media-meta {
      margin-top: var(--media-meta-margin, 8px);
      font-size: var(--media-meta-size, 0.875rem);
      opacity: var(--media-meta-opacity, 0.7);
    }
  }

  &.media-reverse {
    flex-direction: row-reverse;
  }

  &.media-top {
    align-items: flex-start;
  }

  &.media-middle {
    align-items: center;
  }

  &.media-bottom {
    align-items: flex-end;
  }

  // Nested media objects
  .media {
    margin-top: var(--media-nested-margin, 16px);
  }
}

@media (max-width: 576px) {
  .media {
    --media-gap: 12px;
    
    &.media-stack-mobile {
      flex-direction: column;
      
      .media-object {
        align-self: center;
      }
      
      .media-body {
        text-align: center;
      }
    }
  }
}

// HERO SECTIONS
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-min-height, 400px);
  padding: var(--hero-padding, 80px 24px);
  text-align: center;
  overflow: hidden;

  .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;

    &.hero-background-image {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    &.hero-background-video {
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    &.hero-background-overlay::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--hero-overlay, rgba(0, 0, 0, 0.4));
    }
  }

  .hero-content {
    position: relative;
    z-index: 1;
    max-width: var(--hero-content-max-width, 800px);
    width: 100%;

    .hero-title {
      margin: 0 0 var(--hero-title-margin, 24px) 0;
      font-size: var(--hero-title-size, 3rem);
      font-weight: var(--hero-title-weight, 700);
      line-height: var(--hero-title-line-height, 1.2);
    }

    .hero-subtitle {
      margin: 0 0 var(--hero-subtitle-margin, 32px) 0;
      font-size: var(--hero-subtitle-size, 1.25rem);
      line-height: var(--hero-subtitle-line-height, 1.5);
      opacity: var(--hero-subtitle-opacity, 0.9);
    }

    .hero-actions {
      display: flex;
      gap: var(--hero-actions-gap, 16px);
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  &.hero-left {
    text-align: left;
    justify-content: flex-start;

    .hero-actions {
      justify-content: flex-start;
    }
  }

  &.hero-right {
    text-align: right;
    justify-content: flex-end;

    .hero-actions {
      justify-content: flex-end;
    }
  }

  &.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hero-split-gap, 48px);
    text-align: left;

    .hero-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hero-media {
      display: flex;
      align-items: center;
      justify-content: center;

      img,
      video {
        max-width: 100%;
        height: auto;
        border-radius: var(--hero-media-border-radius, 8px);
      }
    }
  }
}

@media (max-width: 768px) {
  .hero {
    --hero-padding: 60px 16px;
    --hero-title-size: 2rem;
    --hero-subtitle-size: 1rem;

    &.hero-split {
      grid-template-columns: 1fr;
      text-align: center;

      .hero-media {
        order: -1;
      }

      .hero-actions {
        justify-content: center;
      }
    }

    .hero-actions {
      flex-direction: column;

      .btn {
        width: 100%;
      }
    }
  }
}

// FEATURE SECTIONS
.features {
  padding: var(--features-padding, 80px 0);

  .features-header {
    text-align: center;
    margin-bottom: var(--features-header-margin, 64px);

    .features-title {
      margin: 0 0 var(--features-title-margin, 16px) 0;
      font-size: var(--features-title-size, 2.5rem);
      font-weight: var(--features-title-weight, 700);
    }

    .features-subtitle {
      margin: 0;
      font-size: var(--features-subtitle-size, 1.125rem);
      opacity: var(--features-subtitle-opacity, 0.8);
      max-width: var(--features-subtitle-max-width, 600px);
      margin-left: auto;
      margin-right: auto;
    }
  }

  .features-grid {
    display: grid;
    gap: var(--features-grid-gap, 48px);
    grid-template-columns: 1fr;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 992px) {
      grid-template-columns: repeat(3, 1fr);
    }

    &.features-grid-2-col {
      @media (min-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    &.features-grid-4-col {
      @media (min-width: 1200px) {
        grid-template-columns: repeat(4, 1fr);
      }
    }
  }

  .feature-item {
    text-align: center;

    .feature-icon {
      width: var(--feature-icon-size, 64px);
      height: var(--feature-icon-size, 64px);
      margin: 0 auto var(--feature-icon-margin, 24px) auto;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--feature-icon-border-radius, 12px);
    }

    .feature-title {
      margin: 0 0 var(--feature-title-margin, 16px) 0;
      font-size: var(--feature-title-size, 1.25rem);
      font-weight: var(--feature-title-weight, 600);
    }

    .feature-description {
      margin: 0;
      line-height: var(--feature-description-line-height, 1.6);
      opacity: var(--feature-description-opacity, 0.8);
    }

    &.feature-item-left {
      text-align: left;

      .feature-icon {
        margin-left: 0;
        margin-right: auto;
      }
    }

    &.feature-item-horizontal {
      display: flex;
      gap: var(--feature-horizontal-gap, 24px);
      text-align: left;

      .feature-icon {
        flex-shrink: 0;
        margin: 0;
      }

      .feature-content {
        flex: 1;
      }
    }
  }
}

// TESTIMONIAL SECTIONS
.testimonials {
  padding: var(--testimonials-padding, 80px 0);

  .testimonials-header {
    text-align: center;
    margin-bottom: var(--testimonials-header-margin, 64px);

    .testimonials-title {
      margin: 0 0 var(--testimonials-title-margin, 16px) 0;
      font-size: var(--testimonials-title-size, 2.5rem);
      font-weight: var(--testimonials-title-weight, 700);
    }

    .testimonials-subtitle {
      margin: 0;
      font-size: var(--testimonials-subtitle-size, 1.125rem);
      opacity: var(--testimonials-subtitle-opacity, 0.8);
    }
  }

  .testimonials-grid {
    display: grid;
    gap: var(--testimonials-grid-gap, 32px);
    grid-template-columns: 1fr;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 992px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .testimonial-item {
    display: flex;
    flex-direction: column;
    padding: var(--testimonial-padding, 32px);
    border-radius: var(--testimonial-border-radius, 12px);
    border: var(--testimonial-border, 1px solid rgba(0, 0, 0, 0.1));

    .testimonial-content {
      flex: 1;
      margin-bottom: var(--testimonial-content-margin, 24px);
      font-size: var(--testimonial-content-size, 1rem);
      line-height: var(--testimonial-content-line-height, 1.6);
      font-style: italic;

      &::before {
        content: '"';
      }

      &::after {
        content: '"';
      }
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: var(--testimonial-author-gap, 16px);

      .author-avatar {
        width: var(--author-avatar-size, 48px);
        height: var(--author-avatar-size, 48px);
        border-radius: 50%;
        flex-shrink: 0;
      }

      .author-info {
        .author-name {
          margin: 0 0 var(--author-name-margin, 4px) 0;
          font-size: var(--author-name-size, 1rem);
          font-weight: var(--author-name-weight, 600);
        }

        .author-title {
          margin: 0;
          font-size: var(--author-title-size, 0.875rem);
          opacity: var(--author-title-opacity, 0.7);
        }
      }
    }
  }
}

// CALL TO ACTION SECTIONS
.cta {
  padding: var(--cta-padding, 80px 24px);
  text-align: center;
  position: relative;
  overflow: hidden;

  .cta-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
  }

  .cta-content {
    position: relative;
    z-index: 1;
    max-width: var(--cta-content-max-width, 600px);
    margin: 0 auto;

    .cta-title {
      margin: 0 0 var(--cta-title-margin, 24px) 0;
      font-size: var(--cta-title-size, 2.5rem);
      font-weight: var(--cta-title-weight, 700);
      line-height: var(--cta-title-line-height, 1.2);
    }

    .cta-subtitle {
      margin: 0 0 var(--cta-subtitle-margin, 32px) 0;
      font-size: var(--cta-subtitle-size, 1.125rem);
      line-height: var(--cta-subtitle-line-height, 1.5);
      opacity: var(--cta-subtitle-opacity, 0.9);
    }

    .cta-actions {
      display: flex;
      gap: var(--cta-actions-gap, 16px);
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  &.cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cta-split-gap, 48px);
    align-items: center;
    text-align: left;

    .cta-content {
      max-width: none;
      margin: 0;

      .cta-actions {
        justify-content: flex-start;
      }
    }

    .cta-visual {
      display: flex;
      align-items: center;
      justify-content: center;

      img,
      video {
        max-width: 100%;
        height: auto;
        border-radius: var(--cta-visual-border-radius, 8px);
      }
    }
  }
}

@media (max-width: 768px) {
  .cta {
    --cta-padding: 60px 16px;
    --cta-title-size: 2rem;
    --cta-subtitle-size: 1rem;

    &.cta-split {
      grid-template-columns: 1fr;
      text-align: center;

      .cta-visual {
        order: -1;
      }

      .cta-content .cta-actions {
        justify-content: center;
      }
    }

    .cta-actions {
      flex-direction: column;

      .btn {
        width: 100%;
      }
    }
  }
}

// STATS/METRICS SECTIONS
.stats {
  padding: var(--stats-padding, 80px 0);

  .stats-grid {
    display: grid;
    gap: var(--stats-grid-gap, 32px);
    grid-template-columns: 1fr;

    @media (min-width: 576px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 992px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .stat-item {
    text-align: center;

    .stat-number {
      display: block;
      font-size: var(--stat-number-size, 3rem);
      font-weight: var(--stat-number-weight, 700);
      line-height: var(--stat-number-line-height, 1);
      margin-bottom: var(--stat-number-margin, 8px);
    }

    .stat-label {
      font-size: var(--stat-label-size, 1rem);
      font-weight: var(--stat-label-weight, 500);
      opacity: var(--stat-label-opacity, 0.8);
      margin: 0;
    }

    .stat-description {
      margin-top: var(--stat-description-margin, 8px);
      font-size: var(--stat-description-size, 0.875rem);
      opacity: var(--stat-description-opacity, 0.6);
    }
  }
}