/* Tenant Mix Mobile Carousel - Optimized for mobile viewing */

/* Desktop: Hide mobile carousel completely */
@media (min-width: 768px) {
  .mobile-carousel-container {
    display: none !important;
  }
}

/* Mobile-only styles (applied when desktop styles are overridden) */
@media (max-width: 767px) {
  .tenant-mix-section {
    margin: 10rem 0;
  }

  .content-inner {
    margin: 0rem;
    padding-left: 0;
    padding-right: 0;
  }

  /* Section Layout - Flexible height that grows with content */
  .tenant-mix-section {
    padding: 0 0 20px 0;
    position: relative;
    overflow: visible;
    /* Allow both horizontal and vertical overflow */
    min-height: auto;
    /* Remove forced height constraints */
    height: auto;
    /* Let it size naturally to content */
    display: flex;
    flex-direction: column;
  }

  /* Override desktop container to stack vertically with flexible height */
  .tenant-mix-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Header - Compact design */
  .tenant-mix-headline {
    font-size: var(--section-header-size);
    font-weight: 700;
    color: var(--color-white);
    margin: 20px auto 16px;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.2;
    padding: 0 16px;
    max-width: 500px;
  }

  .header-tag.header-tag-centered {
    text-align: center;
    margin: 16px auto 8px;
    font-size: 0.875rem;
    color: #11c4d4;
  }

  /* Chart Section - Top portion, flexible height */
  .tenant-mix-chart-column {
    position: relative;
    flex: 0 0 auto;
    /* Don't grow, fixed size */
    width: 100%;
    height: 350px;
    /* Reduced from 400px to save space */
    max-height: 350px;
    max-width: 600px;
    padding: 0;
    display: flex;
    align-items: center;
    margin: 0 auto;
  }

  .chart-container {
    position: relative;
    height: 100%;
    width: 100%;
    background: var(--color-black);
    border-radius: 16px;
    padding: 20px;
    opacity: 1;
    visibility: visible;
    margin: 0 0 1rem;
  }

  .chart-container:hover {
    /* no pointer interaction */
    pointer-events: none;
  }

  /* Show desktop details column but modify for mobile carousel */
  .tenant-mix-details-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    height: auto;
    min-height: auto;
    /* Remove minimum height constraint */
    position: relative;
  }

  /* Hide desktop details, show mobile carousel */
  .tenant-mix-details {
    display: none;
  }

  /* Mobile Carousel Container - Bottom portion with fixed height to prevent jumping */
  .mobile-carousel-container {
    height: 320px;
    /* Fixed height matching active card height */
    min-height: 320px;
    /* Ensure minimum height matches active card */
    position: relative;
    display: none;
    /* Hidden by default - JavaScript will show it on mobile */
    flex-direction: column;
    width: 100%;
    /* Ensure container is ready before content loads */
    visibility: visible;
    opacity: 1;
  }

  /* When JavaScript activates the mobile carousel */
  .mobile-carousel-container.mobile-active {
    display: flex;
  }

  /* Gradient overlay for screens wider than 480px */
  .carousel-gradient-overlay {
    position: absolute;
    top: 0;
    left: -2rem;
    right: -2rem;
    bottom: 0;
    pointer-events: none;
    /* Don't interfere with carousel interactions */
    z-index: 10;
    /* Above carousel but below chevrons */
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.3s ease;
  }

  /* Loading state for carousel container */
  .mobile-carousel-container.loading {
    visibility: hidden;
    opacity: 0;
  }

  .mobile-carousel-container.loaded {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }

  /* Carousel Navigation Container - fixed height container */
  .carousel-nav-container {
    position: relative;
    height: 320px;
    /* Fixed height matching active card height */
    min-height: 320px;
    /* Ensure minimum height matches active card */
    display: flex;
    align-items: flex-end;
    /* Align all items to bottom */
    justify-content: center;
    /* Ensure proper initialization */
    contain: layout style;
    will-change: transform;
  }

  /* Pre-load state to prevent flash of unstyled content */
  .carousel-nav-container.pre-init {
    opacity: 0;
    pointer-events: none;
  }

  .carousel-nav-container.initialized {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease-in-out;
  }

  /* Carousel Scroll Container - align cards to bottom with smooth custom scrolling */
  .carousel-scroll-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    /* Disable smooth scrolling - we'll handle it with GSAP */
    align-items: flex-end;
    /* Bottom-align all cards */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    padding: 0 50%;
    min-width: 100vw;
    gap: 8px !important;

    /* Remove CSS Scroll Snap - we're using custom GSAP scroll animation */
    /* scroll-snap-type: x mandatory; */
    /* scroll-snap-stop: always; */
    /* scroll-padding: 0 calc(50% - 140px); */
  }

  .carousel-scroll-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
  }

  /* Ensure first card is properly positioned and sized */
  .carousel-card:first-child {
    margin-left: 0;
    /* Remove any left margin */
    transform-origin: center;
    /* Center the transform origin */
  }

  .carousel-card:first-child.active {
    transform-origin: center;
    /* Ensure centered scaling for first active card */
  }

  /* Carousel Card - Fixed width, only height changes for active/inactive */
  .carousel-card {
    background: rgba(255, 255, 255, 0.05);
    /* border-radius controlled by GSAP animation */
    padding: 24px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-width: 280px !important;
    max-width: 380px !important;
    width: 65vw !important;
    /* Fixed width - no change between active/inactive - IMPORTANT! */
    height: 60px;
    /* Short height for inactive cards */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align content to bottom for inactive cards */
    align-items: flex-start;
    /* Align content to left */
    gap: 16px;
    opacity: 0.6;
    border-radius: 12px;
    /* Default border radius */
    /* Remove CSS transitions - GSAP will handle animations */
    /* Remove CSS Scroll Snap - using custom GSAP scroll animation */
    /* scroll-snap-align: center; */
    flex-shrink: 0;
    /* Prevent cards from shrinking */
  }

  /* Active card styling - only height and visual properties change, NOT width */
  .carousel-card.active {
    opacity: 1;
    border: 2px solid transparent;
    border-radius: 16px;
    /* Larger border radius for active card */
    height: 320px;
    /* Full height for active cards */
    /* width stays the same - 65vw !important from base class */
    /* max-width stays the same - 380px !important from base class */
    /* min-width stays the same - 280px !important from base class */
    justify-content: space-between;
    /* Distribute content evenly for active cards */
    align-items: stretch;
    /* Stretch content to full width */
  }

  /* Card content - hidden by default for inactive cards */
  .carousel-card .card-content {
    height: 100%;
    width: 100% !important;
    /* Force content to stay within card bounds */
    max-width: 100% !important;
    /* Prevent content from expanding card */
    min-width: 0 !important;
    /* Allow content to shrink if needed */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    opacity: 0;
    /* Hidden by default - GSAP will animate */
    box-sizing: border-box !important;
    /* Ensure padding/borders don't affect width */
    /* Remove CSS transitions - GSAP handles animations */
  }

  /* Active card content - GSAP will animate this */
  .carousel-card.active .card-content {
    opacity: 1;
    /* Will be animated by GSAP timeline */
    width: 100% !important;
    /* Keep width constraints on active state */
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Adjust category text area and content layout */
  .carousel-card .category-text-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Card content layout - match desktop */
  .carousel-card .category-text-area {
    flex: 0.9;
  }

  .carousel-card .category-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    /* NO TRANSITIONS - GSAP handles animations */
  }

  .carousel-card .color-chip {
    width: 8px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
    /* GSAP handles scaling animations */
  }

  .carousel-card .color-chip.healthcare {
    background: #11c4d4;
  }

  .carousel-card .color-chip.retail {
    background: #4fe7af;
  }

  .carousel-card .color-chip.qsr {
    background: #a142f4;
  }

  .carousel-card .color-chip.banking {
    background: #e6427a;
  }

  .carousel-card .category-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    max-width: 100%;
    min-width: 0;
  }

  .carousel-card .category-label {
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0;
    /* GSAP handles scaling animations */
  }

  .carousel-card[data-category='healthcare'] .category-label {
    color: #11c4d4;
  }

  .carousel-card[data-category='retail'] .category-label {
    color: #4fe7af;
  }

  .carousel-card[data-category='qsr'] .category-label {
    color: #a142f4;
  }

  .carousel-card[data-category='banking'] .category-label {
    color: #e6427a;
  }

  .carousel-card .percent-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
    min-width: 48px;
    text-align: center;
    /* GSAP handles scaling animations */
  }

  .carousel-card .percent-badge.healthcare {
    background: rgba(17, 196, 212, 0.2);
  }

  .carousel-card .percent-badge.retail {
    background: rgba(79, 231, 175, 0.2);
  }

  .carousel-card .percent-badge.qsr {
    background: rgba(161, 66, 244, 0.2);
  }

  .carousel-card .percent-badge.banking {
    background: rgba(230, 66, 122, 0.2);
  }

  .carousel-card .category-subcopy {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin-bottom: 10px;
    max-width: 100%;
    word-wrap: break-word;
    max-height: 100px;
    /* Ensure it doesn't take too much space */
    overflow-y: visible;
    /* Allow scrolling if needed */
  }

  /* Logo strip in cards - fixed height container that hides wrapped logos */
  .carousel-card .logo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    /* Align to top so wrapped items fall below visible area */
    justify-content: space-around;
    /* single row if it fits, otherwise wrap but wrap is hidden */
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    max-height: min-content;
    /* Fixed height instead of max-height */
    overflow: hidden;
    /* Hide any wrapped content that goes below */
  }

  /* Logo item wrapper */
  .carousel-card .logo-strip > * {
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* distribute evenly */
    flex: 0 0 auto;
    /* don't stretch */
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 0px;
    min-height: 48px;
  }

  /* Logo image sizing: intrinsic with sensible caps */
  .carousel-card .tenant-logo {
    width: auto;
    height: auto;
    max-width: 56px;
    /* base cap for mobile */
    max-height: 56px;
    object-fit: contain;
    opacity: 0.9;
    filter: grayscale(100%) brightness(1.2) contrast(0.5);
    transition: transform 0.18s ease, opacity 0.18s ease;
    transform-origin: center center;
    padding: 0;
  }

  .carousel-card .tenant-logo:hover,
  .carousel-card .tenant-logo:focus {
    opacity: 1;
  }

  /* Wider mobile phones: slightly larger logo cap */
  @media (min-width: 481px) and (max-width: 767px) {
    .carousel-card .logo-strip > * {
      height: auto;
      /* no forced height */
    }

    .carousel-card .tenant-logo {
      max-width: 60px;
      max-height: 60px;
    }
  }

  /* Category rule border - GSAP handles border color and radius changes */
  .carousel-card .category-rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* border-radius controlled by GSAP animation */
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 1);
    /* Start with white border, GSAP will animate to category color */
    /* GSAP handles border-color and border-radius transitions */
  }

  /* Carousel Navigation Chevrons - positioned at center of fixed-height container */
  .carousel-chevron {
    position: absolute;
    top: calc(100% - 30px);
    /* Center vertically in the fixed-height container */
    transform: translateY(-50%);
    /* Center transform */
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    /* Above gradient overlay and carousel */
    opacity: 0.9;
  }

  /* Transitioning state - fade chevrons during slide transitions */
  .carousel-chevron.transitioning {
    opacity: 0.2;
    pointer-events: none;
  }

  .carousel-chevron.prev {
    left: calc(50% - 190px - 16px);
  }

  .carousel-chevron.next {
    right: calc(50% - 190px - 16px);
  }

  .carousel-chevron i {
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .carousel-chevron:hover i {
    color: var(--color-white);
  }

  /* Hide disabled chevrons gracefully */
  .carousel-chevron.disabled {
    opacity: 0;
    pointer-events: none;
  }

  /* Hide desktop mobile controls */
  .mobile-accordion-controls {
    display: none;
  }

  /* Screen reader only text */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Focus styles for accessibility */
  .carousel-card:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
  }

  .carousel-chevron:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
  }
}

/* Smaller mobile screens */
@media (max-width: 480px) {
  .tenant-mix-headline {
    font-size: var(--section-header-size);
  }

  .tenant-mix-chart-column {
    height: 300px;
    /* Smaller chart on small screens */
  }

  .mobile-carousel-container {
    height: 300px;
    /* Fixed height matching smaller active card height */
    min-height: 300px;
    /* Ensure minimum height matches smaller active card */
  }

  .carousel-nav-container {
    height: 300px;
    /* Fixed height matching smaller active card height */
    min-height: 300px;
    /* Ensure minimum height matches smaller active card */
  }

  .carousel-card {
    min-width: 260px;
    width: 80vw;
    padding: 20px;
    height: 30px;
    /* Inactive height on small screens */
  }

  /* Active card on small screens */
  .carousel-card.active {
    height: 300px;
    /* Slightly smaller active height on small screens */
    width: 65vw;
    /* 65% of viewport for active cards on small screens */
    max-width: none;
    /* Allow full viewport scaling on small screens */
  }

  .carousel-chevron.prev {
    left: calc(50% - 180px - 16px);
  }

  .carousel-chevron.next {
    right: calc(50% - 180px - 16px);
  }

  .carousel-chevron {
    width: 40px;
    height: 40px;
    /* top: 50% and transform: translateY(-50%) inherited from parent rule */
  }

  .carousel-card .category-label {
    font-size: 2rem;
  }

  .carousel-card .tenant-logo {
    max-height: 16px;
  }

  .carousel-card .logo-strip {
    gap: 10px;
  }

  .chart-container {
    padding: 0 0 32px;
  }

  /* Hide gradient overlay on small screens */
  .carousel-gradient-overlay {
    display: none;
  }

  #swish-dental {
    display: none;
  }
}

/* Gradient overlay for screens wider than 480px */
@media (min-width: 481px) {
  /* Left gradient overlay - 50vw width */
  .carousel-gradient-overlay-left {
    position: absolute;
    top: 0;
    left: -2rem;
    width: 50vw;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 1;
    background: linear-gradient(
      to right,
      rgba(12, 22, 33, 1) 0%,
      rgba(12, 22, 33, 0.8) calc((100vw - 480px) / 2),
      rgba(12, 22, 33, 0.4) calc((100vw - 480px) / 1.33),
      transparent 100%
    );
  }

  /* Right gradient overlay - 50vw width */
  .carousel-gradient-overlay-right {
    position: absolute;
    top: 0;
    right: -2rem;
    width: 50vw;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 1;
    background: linear-gradient(
      to left,
      rgba(12, 22, 33, 1) 0%,
      rgba(12, 22, 33, 0.8) calc((100vw - 480px) / 2),
      rgba(12, 22, 33, 0.4) calc((100vw - 480px) / 1.33),
      transparent 100%
    );
  }

  /* Hide old single overlay if it exists */
  .carousel-gradient-overlay {
    display: none;
  }
}

/* Reduced motion support - GSAP will respect this preference and use duration: 0 */
@media (prefers-reduced-motion: reduce) {
  /* GSAP animations will be automatically disabled */
}