/* Root */
.mm-tb{direction:rtl}

/* ---------- HERO (desktop/tablet stays as-is) ---------- */
.mm-tb-hero{
  width:100%;
  position:relative;
}
.mm-tb-hero-img{
  width:100%; max-height:80vh!important; display:block; object-fit:cover!important;
  opacity:1; transition:opacity .35s ease;
}
.mm-tb-hero.is-fading .mm-tb-hero-img{opacity:0;}
.mm-tb-hero-placeholder{width:100%; padding-top:42%; background:#f4f4f6;}

/* ---------- PANELS rail ---------- */
/* Desktop default: center within 1296px, gap 32 */
.mm-tb-panels{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:32px;
  margin-top:24px;
}
@media (min-width:1025px){
  .mm-tb-panels{
    max-width:1296px;
    margin-inline:auto;     /* center */
    padding-inline:0;
  }
}

/* Tablet: 700px container, gap 20, still grid (3 -> auto fits) */
@media (min-width:768px) and (max-width:1024px){
  .mm-tb-panels{
    max-width:700px;
    margin-inline:auto;
    gap:20px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Panel base ---------- */
.mm-tb-panel{ display:block; outline:none; cursor:pointer; }

/* Colors: INACTIVE default = #A7A7A7 */
.mm-tb-title{
  margin:0 0 8px 0;
  font-size:18px;      /* tablet/mobile requirement handled below too */
  line-height:1.4;
  color:#A7A7A7;
  transition:color .2s ease;
}
.mm-tb-content{
  max-width:410px;
  text-align:justify;
  font-size:15px;
  line-height:1.9;
  color:#A7A7A7;
  transition:color .2s ease;
}

/* Divider */
.mm-tb-divider{
  width:274px;
  height:2px;
  background:#A7A7A7;
  margin-top:32px;
  margin-bottom:12px;
  transition:background-color .2s ease, opacity .2s ease, width .2s ease;
}

/* ACTIVE state = #282828 */
.mm-tb-panel.is-active .mm-tb-divider{ background:#282828; }
.mm-tb-panel.is-active .mm-tb-title{ color:#282828; }
.mm-tb-panel.is-active .mm-tb-content{ color:#282828; }

/* Hover helps on desktop/tablet */
@media (min-width:768px){
  .mm-tb-panel:hover .mm-tb-divider{ background:#282828; }
  .mm-tb-panel:hover .mm-tb-title{ color:#282828; }
}
.mm-tb-panel:focus-visible{ outline:2px solid #bbb; outline-offset:2px; }

/* Panel inner image: hidden on desktop/tablet by default (hero handles image) */
.mm-tb-panel-img-wrap{ width:100%; display:none; }
.mm-tb-panel-img{ width:100%; height:auto; display:block; }

/* ---------- MOBILE MODE (<=767px) ---------- */
/* Your JS already toggles .is-mobile on root; we rely on that. */
.mm-tb.is-mobile .mm-tb-hero{ display:none; }

/* Make the tabs a horizontal scroller (titles-as-tabs row) */
.mm-tb.is-mobile .mm-tb-panels{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;            /* horizontal scroll */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  gap:12px;                   /* mobile gap (not specified; chosen small) */
  padding:0 16px;             /* breathing room */
  margin-top:8px;
}

/* Hide scrollbars (optional) */
.mm-tb.is-mobile .mm-tb-panels::-webkit-scrollbar{ display:none; }
.mm-tb.is-mobile .mm-tb-panels{ scrollbar-width:none; }

/* Each tab item becomes a pill/strip element */
.mm-tb.is-mobile .mm-tb-panel{
  flex:0 0 auto;              /* keep natural width, sit in a row */
  scroll-snap-align:start;
  min-width:max-content;      /* keep title on one line */
}

/* On mobile, show only the “tab” (divider + title). Hide long content & inner image in the scroller */
.mm-tb.is-mobile .mm-tb-content{ display:none !important; }
.mm-tb.is-mobile .mm-tb-panel-img-wrap{ display:none !important; }

/* Tweak divider for compact mobile tabs */
.mm-tb.is-mobile .mm-tb-divider{
  width:100%;
  margin-top:10px;
  margin-bottom:6px;
}

/* Active mobile tab color remains #282828 from the base active rules */

/* ---------- TYPE SCALE for tablet & mobile ---------- */
/* Titles 18px; descriptions 14px, only up to 1024px */
@media (max-width:1024px){
  .mm-tb-title{ font-size:18px; }
  .mm-tb-content{ font-size:14px; line-height:1.9; }
}

/* ---------- DESKTOP/TABLET IMAGE VISIBILITY (unchanged) ---------- */
/* Keep image hidden inside panels on desktop/tablet (hero swaps). If you want them visible, remove display:none above. */