/* Features Section - Consolidated Styles
 * Combines: features-complete-fix, features-proportion-adjustment,
 * features-hover-video, features-top-alignment, features-video-fill-fix,
 * features-final-uniform, features-full-width, features-video-uniform,
 * features-video-position-fix
 */

/* ==========================================================================
   BASE DESKTOP STYLES (768px+)
   ========================================================================== */

@media screen and (min-width: 768px) {
  /* Container - Full width */
  .interactive-features {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .interactive-features .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Feature list - Grid container */
  .feature-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: max-content !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Feature item - Grid layout */
  a.feature-item,
  .feature-item {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    overflow: visible !important;
    border-bottom: 1px solid #e0e0e0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: background-color 0.3s ease !important;
  }

  /* Hover background */
  a.feature-item:hover,
  .feature-item:hover {
    background-color: #f8f8f8 !important;
  }

  /* Column order: Description (1) | Video (2) | Title (3) */
  .feature-description {
    order: 1 !important;
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .feature-description p {
    margin: 0 0 0.75rem 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
    text-overflow: initial !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    max-height: none !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    letter-spacing: -0.01em !important;
  }

  .feature-number {
    margin-top: auto !important;
    padding-top: 1rem !important;
    opacity: 0.6 !important;
    font-family: monospace !important;
  }

  /* Video container */
  .feature-video-container {
    order: 2 !important;
    grid-column: 2 !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: #f0f0f0 !important;
    z-index: 1 !important;
    /* Hidden by default, shown on hover */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
    pointer-events: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* Placeholder gradient when video hidden */
  .feature-video-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 8px;
    z-index: -1;
  }

  /* Show video on hover */
  a.feature-item:hover .feature-video-container,
  .feature-item:hover .feature-video-container {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Video element - NO transforms, use inset */
  .feature-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    -webkit-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transition: transform 0.3s ease !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  /* Subtle scale on video hover */
  a.feature-item:hover .feature-video,
  .feature-item:hover .feature-video {
    transform: scale(1.02) !important;
  }

  /* Title column */
  .feature-title {
    order: 3 !important;
    grid-column: 3 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    z-index: 2 !important;
  }

  .feature-title h3 {
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    line-height: 0.9 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    transition: transform 0.3s ease !important;
  }

  /* Title shift on hover */
  a.feature-item:hover .feature-title h3,
  .feature-item:hover .feature-title h3 {
    transform: translateX(16px) !important;
  }
}

/* ==========================================================================
   SMALL LAPTOPS (768px - 1023px)
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  a.feature-item,
  .feature-item {
    grid-template-columns: 0.7fr 1.3fr 2fr !important;
    padding: 1.5rem 20px !important;
    gap: 1.5rem !important;
    min-height: 200px !important;
  }

  .feature-description {
    padding-right: 0.5rem !important;
  }

  .feature-description p {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }

  .feature-number {
    font-size: 0.7rem !important;
  }

  .feature-video-container {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }

  .feature-title {
    padding-left: 1rem !important;
  }

  .feature-title h3 {
    font-size: 2.2rem !important;
    line-height: 0.92 !important;
    margin-top: -0.08rem !important;
  }
}

/* ==========================================================================
   MEDIUM LAPTOPS (1024px - 1279px)
   ========================================================================== */

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .interactive-features .container {
    padding: 0 40px !important;
  }

  .feature-list {
    margin: 0 -40px !important;
  }

  a.feature-item,
  .feature-item {
    grid-template-columns: 0.8fr 1.4fr 2.3fr !important;
    padding: 2rem 40px !important;
    gap: 2rem !important;
    min-height: 230px !important;
  }

  .feature-description {
    padding-right: 1rem !important;
  }

  .feature-description p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }

  .feature-number {
    font-size: 0.75rem !important;
  }

  .feature-video-container {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }

  .feature-title {
    padding-left: 1.5rem !important;
  }

  .feature-title h3 {
    font-size: 2.8rem !important;
    line-height: 0.9 !important;
    margin-top: -0.1rem !important;
  }
}

/* ==========================================================================
   LARGE LAPTOPS (1280px - 1439px)
   ========================================================================== */

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  a.feature-item,
  .feature-item {
    grid-template-columns: 1fr 1.6fr 2.4fr !important;
    padding: 2.5rem 80px !important;
    gap: 2.5rem !important;
    min-height: 260px !important;
  }

  .feature-description {
    padding-right: 1.5rem !important;
  }

  .feature-description p {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }

  .feature-number {
    font-size: 0.8rem !important;
  }

  .feature-video-container {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }

  .feature-title {
    padding-left: 2rem !important;
  }

  .feature-title h3 {
    font-size: 3.5rem !important;
    line-height: 0.88 !important;
    margin-top: -0.12rem !important;
  }
}

/* ==========================================================================
   EXTRA LARGE SCREENS (1440px+)
   ========================================================================== */

@media screen and (min-width: 1440px) {
  a.feature-item,
  .feature-item {
    grid-template-columns: 1.2fr 1.8fr 2.5fr !important;
    padding: 3rem 160px !important;
    gap: 3rem !important;
    min-height: 300px !important;
  }

  .feature-description {
    padding-right: 2rem !important;
  }

  .feature-description p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  .feature-number {
    font-size: 0.85rem !important;
  }

  .feature-video-container {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
  }

  .feature-title {
    padding-left: 2rem !important;
  }

  .feature-title h3 {
    font-size: 4rem !important;
    line-height: 0.85 !important;
    margin-top: -0.15rem !important;
  }
}

/* ==========================================================================
   TOUCH DEVICE SUPPORT
   ========================================================================== */

@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
  /* Show video on tap/focus for touch devices */
  a.feature-item:active .feature-video-container,
  .feature-item:active .feature-video-container,
  a.feature-item:focus .feature-video-container,
  .feature-item:focus .feature-video-container {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}

/* ==========================================================================
   MOBILE (below 768px) - Videos always visible
   ========================================================================== */

@media screen and (max-width: 767px) {
  .feature-video-container {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* ==========================================================================
   HIGH SPECIFICITY OVERRIDES
   ========================================================================== */

/* Ensure full width at all sizes */
body .interactive-features .container .feature-list a.feature-item,
body .interactive-features .container .feature-list .feature-item {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure video fills container correctly */
.interactive-features .feature-list .feature-item .feature-video-container .feature-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Feature list margins */
.interactive-features .feature-list {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Uniform heights via CSS variable (if JS sets it) */
@media screen and (min-width: 768px) {
  .features-uniform .feature-item {
    min-height: var(--features-height, 300px) !important;
  }

  .features-video-synced .feature-video-container {
    height: var(--video-height, 220px) !important;
    min-height: var(--video-height, 220px) !important;
    max-height: var(--video-height, 220px) !important;
  }
}

/* ==========================================================================
   FALLBACK FOR BROWSERS WITHOUT GRID
   ========================================================================== */

@supports not (display: grid) {
  @media screen and (min-width: 768px) {
    a.feature-item,
    .feature-item {
      display: flex !important;
      min-height: 300px !important;
    }
  }
}
/* Feature Titles - Much Bigger Size */

/* Default - Make titles slightly smaller */
@media screen and (min-width: 768px) {
  .feature-title h3 {
    font-size: 5rem !important; /* Slightly smaller */
    font-weight: 400 !important; /* Thinner text */
    line-height: 0.8 !important;
  }
}

/* Extra large screens */
@media screen and (min-width: 1920px) {
  .feature-title h3 {
    font-size: 7.5rem !important; /* Slightly smaller */
    font-weight: 400 !important;
    line-height: 0.8 !important;
  }
}

/* Large desktops */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .feature-title h3 {
    font-size: 6.5rem !important; /* Slightly smaller */
    font-weight: 400 !important;
    line-height: 0.8 !important;
  }
}

/* Standard desktops */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .feature-title h3 {
    font-size: 5.75rem !important; /* Slightly smaller */
    font-weight: 400 !important;
    line-height: 0.8 !important;
  }
}

/* Small desktops */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .feature-title h3 {
    font-size: 4.75rem !important; /* Slightly smaller */
    font-weight: 400 !important;
    line-height: 0.8 !important;
  }
}

/* Tablets landscape */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .feature-title h3 {
    font-size: 4rem !important; /* Slightly smaller */
    font-weight: 400 !important;
    line-height: 0.8 !important;
  }
}

/* Small screens */
@media screen and (min-width: 640px) and (max-width: 767px) {
  .feature-title h3 {
    font-size: 3rem !important; /* Slightly smaller */
    font-weight: 400 !important;
    line-height: 0.8 !important;
  }
}

/* Mobile screens */
@media screen and (max-width: 639px) {
  .feature-title h3 {
    font-size: 2.25rem !important; /* Slightly smaller */
    font-weight: 400 !important;
    line-height: 0.8 !important;
  }
}

/* Ensure the title fits properly */
@media screen and (min-width: 768px) {
  .feature-title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 2rem !important;
  }

  /* Adjust container if text overflows */
  .feature-title h3 {
    white-space: nowrap !important;
    overflow: visible !important;
  }
}

/* Scale smoothly between breakpoints */
@media screen and (min-width: 768px) and (max-width: 1920px) {
  .feature-title h3 {
    /* Smooth scaling from 5rem to 8.5rem */
    font-size: clamp(5rem, 5vw + 3rem, 8.5rem) !important;
    line-height: 0.8 !important;
  }
}

/* Ensure visibility and no cutoff */
.feature-title {
  overflow: visible !important;
  z-index: 10 !important;
}

.feature-title h3 {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
/* Feature Description Text - Smaller Size, Good Boldness */

/* Default - Make description text smaller but keep bold */
@media screen and (min-width: 768px) {
  .feature-description p {
    font-size: 1rem !important; /* A little less big */
    font-weight: 500 !important; /* Medium weight - kept */
    line-height: 1.35 !important;
  }
}

/* Extra large screens */
@media screen and (min-width: 1920px) {
  .feature-description p {
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }
}

/* Large desktops */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .feature-description p {
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }
}

/* Standard desktops */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .feature-description p {
    font-size: 1.03125rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }
}

/* Small desktops */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .feature-description p {
    font-size: 0.9375rem !important; /* More decrease */
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }
}

/* Tablets landscape */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .feature-description p {
    font-size: 0.875rem !important; /* More decrease */
    font-weight: 500 !important;
    line-height: 1.28 !important;
  }
}

/* Small screens */
@media screen and (min-width: 640px) and (max-width: 767px) {
  .feature-description p {
    font-size: 0.8125rem !important; /* More decrease */
    font-weight: 500 !important;
    line-height: 1.25 !important;
  }
}

/* Mobile screens */
@media screen and (max-width: 639px) {
  .feature-description p {
    font-size: 0.75rem !important; /* More decrease */
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }
}

/* Smooth scaling between breakpoints */
@media screen and (min-width: 768px) and (max-width: 1920px) {
  .feature-description p {
    font-size: clamp(0.875rem, 0.4vw + 0.6rem, 1.125rem) !important;
    line-height: clamp(1.25, 0.1vw + 1.2, 1.35) !important;
  }
}

/* Ensure readability */
.feature-description {
  color: #333 !important;
}

.feature-description p {
  margin-bottom: 1rem !important;
  letter-spacing: 0.01em !important;
}/* Feature Section - FINAL Grid Override with Maximum Specificity */
/* This file MUST be loaded LAST to override all other grid settings */

/* Force grid proportions: left -10%, middle -20%, right gets more space */
body .features-section .feature-item,
body .interactive-features .feature-item,
.features-section .feature-item,
.interactive-features .feature-item,
.feature-item {
  /* Default - Left smaller, middle much smaller, title much bigger */
  grid-template-columns: 1.15fr 1.45fr 2.1fr !important;
}

/* Medium screens */
@media screen and (min-width: 1024px) {
  body .features-section .feature-item,
  body .interactive-features .feature-item,
  .features-section .feature-item,
  .interactive-features .feature-item,
  .feature-item {
    grid-template-columns: 1.2fr 1.5fr 2.2fr !important;
  }
}

/* Large screens */
@media screen and (min-width: 1280px) {
  body .features-section .feature-item,
  body .interactive-features .feature-item,
  .features-section .feature-item,
  .interactive-features .feature-item,
  .feature-item {
    grid-template-columns: 1.25fr 1.55fr 2.3fr !important;
  }
}

/* XL screens */
@media screen and (min-width: 1440px) {
  body .features-section .feature-item,
  body .interactive-features .feature-item,
  .features-section .feature-item,
  .interactive-features .feature-item,
  .feature-item {
    grid-template-columns: 1.3fr 1.6fr 2.4fr !important;
  }
}

/* XXL screens */
@media screen and (min-width: 1920px) {
  body .features-section .feature-item,
  body .interactive-features .feature-item,
  .features-section .feature-item,
  .interactive-features .feature-item,
  .feature-item {
    grid-template-columns: 1.35fr 1.65fr 2.5fr !important;
  }
}

/* Tablet screens */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  body .features-section .feature-item,
  body .interactive-features .feature-item,
  .features-section .feature-item,
  .interactive-features .feature-item,
  .feature-item {
    grid-template-columns: 1.1fr 1.4fr 2fr !important;
  }
}

/* Ensure this overrides ALL other grid settings */
@media screen and (min-width: 768px) {
  html body .features-section .feature-item,
  html body .interactive-features .feature-item {
    grid-template-columns: 1.15fr 1.45fr 2.1fr !important;
  }
}

@media screen and (min-width: 1024px) {
  html body .features-section .feature-item,
  html body .interactive-features .feature-item {
    grid-template-columns: 1.2fr 1.5fr 2.2fr !important;
  }
}

@media screen and (min-width: 1280px) {
  html body .features-section .feature-item,
  html body .interactive-features .feature-item {
    grid-template-columns: 1.25fr 1.55fr 2.3fr !important;
  }
}

@media screen and (min-width: 1440px) {
  html body .features-section .feature-item,
  html body .interactive-features .feature-item {
    grid-template-columns: 1.3fr 1.6fr 2.4fr !important;
  }
}

@media screen and (min-width: 1920px) {
  html body .features-section .feature-item,
  html body .interactive-features .feature-item {
    grid-template-columns: 1.35fr 1.65fr 2.5fr !important;
  }
}

/* Visual verification - you can see the change clearly */
/* Left text column is now ~10% smaller than before */
/* Video column is now ~20% smaller than before */
/* Title column is now much bigger, getting the extra space *//* Feature Section - Text Size Increased by 10% total */

/* Make the text in the left div 10% bigger total (5% + 5%) */
@media screen and (min-width: 768px) {
  .feature-description p {
    font-size: 1.05rem !important; /* 1rem + 5% = 1.05rem */
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }
}

/* Extra large screens */
@media screen and (min-width: 1920px) {
  .feature-description p {
    font-size: 1.155rem !important; /* 1.1rem + 5% = ~1.155rem */
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }
}

/* Large desktops */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .feature-description p {
    font-size: 1.1rem !important; /* 1.05rem + 5% = ~1.1rem */
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }
}

/* Standard desktops */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .feature-description p {
    font-size: 1.075rem !important; /* 1.025rem + 5% = ~1.075rem */
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }
}

/* Small desktops */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .feature-description p {
    font-size: 1.02rem !important; /* 0.97rem + 5% = ~1.02rem */
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }
}

/* Tablets landscape */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .feature-description p {
    font-size: 0.966rem !important; /* 0.92rem + 5% = ~0.966rem */
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }
}

/* Small screens */
@media screen and (min-width: 640px) and (max-width: 767px) {
  .feature-description p {
    font-size: 0.882rem !important; /* 0.84rem + 5% = 0.882rem */
    font-weight: 500 !important;
    line-height: 1.25 !important;
  }
}

/* Mobile screens */
@media screen and (max-width: 639px) {
  .feature-description p {
    font-size: 0.83rem !important; /* 0.79rem + 5% = ~0.83rem */
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }
}

/* Smooth scaling between breakpoints */
@media screen and (min-width: 768px) and (max-width: 1920px) {
  .feature-description p {
    font-size: clamp(0.966rem, 0.44vw + 0.66rem, 1.155rem) !important;
    line-height: clamp(1.25, 0.1vw + 1.2, 1.35) !important;
  }
}