/* =====================
   m_features — "All you need in one app" section with 6-tab carousel.

   Source of truth:
     Desktop main:   Figma node 4201:4087 (UK Days variant)
     Desktop variants:
       Limits     → 4215:20027
       Planner    → 4215:17782
       Import     → 4215:19467
       Evidence   → 4215:19187
       Household  → 4215:18907
     Mobile:         Figma node 4215:27898

   Each tab panel is a real 2-column DOM block:
     - Left  : title + subtitle + 3 features list (proper HTML, selectable)
     - Right : phone visual (cropped variant PNG showing only phone area)
   Tabs reuse `.tabs_main` + JS `[data-tabs]` machinery from `tabs.css` /
   `init-scripts.js` (sliding indicator). 6 tabs, default = UK Days.

   Mobile breakpoint: <= 991px.
===================== */

.m_features { padding: 5rem 0; }                          /* 80px Y desktop */
@media (max-width: 991px) {
  .m_features { padding: 4rem 0; }                         /* 64px Y mobile */
}

.m_features > .u-container {
  align-items: center;                                     /* override Lumos stretch */
  gap: 4rem;                                               /* 64px header → content */
}
@media (max-width: 991px) {
  .m_features > .u-container { gap: 3rem; }                /* 48px mobile */
}

.m_features .m_feature_header {
  max-width: 40.625rem;                                    /* 650px (Figma) */
  gap: 2rem;                                               /* 32px between heading group and tabs row below */
}

/* ---- Tabs row ---------------------------------------------------- */

.m_features_tabs.tabs_main {
  width: 100%;
  max-width: 45.75rem;                                     /* 732px desktop */
  display: flex;
  align-items: stretch;
}

.m_features_tabs .tabs_main_btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.5rem 1.125rem;                                /* 8px 18px */
  height: 2.75rem;                                         /* 44px */
  font-size: 1rem;                                         /* 16px */
  line-height: 1.5;                                        /* 24/16 */
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}
.m_features_tabs .tabs_main_btn.is-active,
.m_features_tabs .tabs_main_btn[aria-selected="true"] {
  color: var(--color--main-green, #90F99C);
  font-weight: 600;
}

@media (max-width: 991px) {
  .m_features_tabs.tabs_main {
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 0.25rem;
    padding: 0.25rem;
  }
  .m_features_tabs .tabs_main_btn {
    flex: 0 1 calc(33.333% - 0.25rem);                     /* 3 per row */
    padding: 0.375rem 0.5rem;
    height: auto;
    font-size: 0.8125rem;                                  /* 13px */
    line-height: 1.4;
  }
  .m_features_tabs .tabs_main_indicator { display: none; }
  .m_features_tabs .tabs_main_btn.is-active,
  .m_features_tabs .tabs_main_btn[aria-selected="true"] {
    background-color: rgba(249, 245, 255, 0.15);
    border-radius: 0.375rem;
  }
}

/* ---- Panels — proper DOM 2-col layout ------------------------------ */

.m_features_panels {
  position: relative;
  width: 100%;
  max-width: 80rem;                                        /* 1280px */
  margin: 0 auto;
}

.m_features_panel {
  display: flex;
  align-items: stretch;
  gap: 3rem;                                               /* 48px between text col and phone col */
  width: 100%;
}
/* `[hidden]` only has attribute-specificity 0,1,0,0; our class rule above
   overrides it. Boost the [hidden] rule with class+attribute so the
   default UA `display: none` actually kicks in for inactive tab panels. */
.m_features_panel[hidden] { display: none; }
@media (max-width: 991px) {
  .m_features_panel {
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }
}

/* --- Left column (text + features) --- */

.m_features_text {
  flex: 1 1 0;
  max-width: 37.5rem;                                      /* 600px (Figma) */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                                             /* 24px between heading group and features list */
  padding-top: 0.625rem;                                   /* 10px Figma top inset */
}
@media (max-width: 991px) {
  .m_features_text {
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    align-items: stretch;
  }
}

.m_features_heading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                                             /* 8px between title and subtitle */
}

.m_features_title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;                                        /* Medium */
  font-size: 1.875rem;                                     /* 30px desktop */
  line-height: 1.2667;                                     /* 38/30 */
  color: var(--color--white, #ffffff);
}
@media (max-width: 991px) {
  .m_features_title {
    font-size: 1.5rem;                                     /* 24px mobile */
    line-height: 1.3333;                                   /* 32/24 */
  }
}

.m_features_subtitle {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1rem;                                         /* 16px */
  line-height: 1.5;                                        /* 24/16 */
  color: rgba(255, 255, 255, 0.7);
}

.m_features_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;                                               /* 16px between features */
}

.m_features_feature {
  display: flex;
  gap: 0.75rem;                                            /* 12px between icon and content */
  align-items: flex-start;
}

.m_features_feature_icon {
  flex-shrink: 0;
  width: 1.5rem;                                           /* 24px */
  height: 1.5rem;
  padding-top: 0.375rem;                                   /* py-6 inset to baseline-align with title */
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color--main-green, #90F99C);
}
.m_features_feature_icon svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  overflow: visible;
}

.m_features_feature_body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;                                           /* 6px between feature title and text */
}

.m_features_feature_title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 600;                                        /* SemiBold */
  font-size: 1.25rem;                                      /* 20px */
  line-height: 1.5;                                        /* 30/20 */
  color: var(--color--white, #ffffff);
}

.m_features_feature_text {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1rem;                                         /* 16px */
  line-height: 1.5;                                        /* 24/16 */
  color: rgba(255, 255, 255, 0.7);
}

/* --- Right column (phone visual via background image) --- */

.m_features_visual {
  flex: 0 0 33.5rem;                                       /* 536px (Figma) */
  height: 28.5625rem;                                      /* 457px (Figma) */
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media (max-width: 991px) {
  .m_features_visual {
    flex: 0 0 auto;
    width: 100%;
    max-width: 22rem;                                      /* 352px mobile */
    height: 24rem;                                         /* 384px mobile */
    background-size: contain;
  }
}

/* Per-variant phone image — these PNGs were cropped from the variant Figma
   renders to show only the phone area. */
.m_features_visual--uk-days   { background-image: url("../assets/features-phone-uk-days.png"); }
.m_features_visual--limits    { background-image: url("../assets/features-phone-limits.png"); }
.m_features_visual--planner   { background-image: url("../assets/features-phone-planner.png"); }
.m_features_visual--import    { background-image: url("../assets/features-phone-import.png"); }
.m_features_visual--evidence  { background-image: url("../assets/features-phone-evidence.png"); }
.m_features_visual--household { background-image: url("../assets/features-phone-household.png"); }