/* ==========================================
   FEATURES LIST — Block-specific responsive
   Supplements FeaturesList.css base styles
   ========================================== */

/* ── Tablet portrait / smartphone (≤ 1023px) ───── */
/* Keeps the totem visible while the value cards scroll vertically. */
@media (max-width: 1023px) {
   .features-list {
      height: auto !important;
      overflow: visible !important;
   }

   .features-list .fl__grid {
      --fl-mobile-page-padding: clamp(1.25rem, 6vw, 2rem);
      --fl-mobile-sticky-top: calc(var(--header-height, 72px) + 0.75rem);
      --fl-mobile-totem-size: clamp(150px, 56vw, 220px);

      display: flex !important;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: clamp(1.5rem, 8vw, 2.5rem);
      height: auto;
      padding: clamp(4.5rem, 14vw, 7rem) var(--fl-mobile-page-padding) clamp(5rem, 16vw, 7rem);
      padding-top: 0px!important;
   }

   .features-list .fl__totem-column {
      display: flex !important;
      order: 1;
      position: sticky;
      top: var(--fl-mobile-sticky-top);
      align-self: stretch;
      justify-content: center;
      width: auto;
      max-width: none;
      min-height: var(--fl-mobile-totem-size);
      margin-inline: calc(var(--fl-mobile-page-padding) * -1);
      padding: 0 var(--fl-mobile-page-padding) clamp(1.25rem, 5vw, 2rem);
      background: var(--bg-color);
      box-shadow: 0 1.5rem 1.5rem var(--bg-color);
      z-index: 5;
      isolation: isolate;
      pointer-events: none;
      padding-top: 100px;
      top: 0px;
   }

   .admin-bar .features-list .fl__totem-column {
      top: calc(var(--header-height, 72px) + 46px + 0.75rem);
   }

   .features-list .fl__totem-shell {
      position: relative;
      z-index: 1;
      width: var(--fl-mobile-totem-size);
      min-width: 150px;
      width: 80%;
      opacity: 1 !important;
      transform: none !important;
      max-height: 230px;
   }

   .features-list .fl__copy-side {
      display: block !important;
      order: 2;
      width: 100%;
      max-width: none;
      margin-top: clamp(2.75rem, 12vh, 5.5rem);
   }

   .features-list .fl__intro {
      min-height: 62svh;
      margin-bottom: clamp(4rem, 18vh, 8rem);
      scroll-margin-top: calc(var(--fl-mobile-sticky-top) + var(--fl-mobile-totem-size) + 2rem);
   }

   .features-list .fl__value-stage {
      display: flex !important;
      flex-direction: column;
      gap: clamp(4rem, 22vh, 8rem);
      pointer-events: auto;
      align-items: stretch;
   }

   .features-list .fl__value {
      min-height: 68svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: clamp(2.5rem, 12vh, 5rem);
      padding-bottom: clamp(2.5rem, 12vh, 5rem);
      border-top: 1px solid rgba(var(--color-gold-rgb), 0.12);
      scroll-margin-top: calc(var(--fl-mobile-sticky-top) + var(--fl-mobile-totem-size) + 2rem);
   }

   .features-list .fl__seed-image {
      opacity: 0.28;
      transform: none;
   }
}

@media (min-width: 783px) and (max-width: 1023px) {
   .admin-bar .features-list .fl__totem-column {
      top: calc(var(--header-height, 72px) + 32px + 0.75rem);
   }
}