/* SECTION / Tab gallery
   Desktop (Figma 1920 frame, content column 1440 => px / 19.2):
     1440x716 = Tab Bar 800x56 centred + cards-carousel 1312x680 pulled 20 up
     under it. Arrows 108x44 left, viewport 574 tall with 421x573 cards 24
     apart, bar indicator 138x14 centred 24 below.
   Mobile (Figma 402 frame, project convention => px / 3.75):
     402x652 = 16 padding, Feature Tabs 370x40, 16, one 320x536 card per view
     (step 336), 16, indicator 146x12. No arrows in the mobile frame. */

.mgal {
  padding: 0 3.3333vw; /* 64 */
  background: var(--page-bg);
  color: var(--page-ink);
}

/* ---------- chips ---------- */
.mgal__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4167vw; /* 8 */
}

.mgal__tab {
  margin: 0;
  padding: 0.8333vw 1.7188vw; /* 16 / 33 */
  border: 0.0521vw solid var(--hairline); /* 1 */
  border-radius: 900px;
  background: #fafafa;
  color: var(--muted-ink);
  font-family: var(--f-semibold);
  font-weight: 600;
  font-size: 0.9375vw; /* 18 */
  line-height: 1.3333; /* 24 */
  letter-spacing: 0.026vw; /* 0.5 */
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.mgal__tab.is-active {
  border-color: var(--brand-accent);
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
}

/* a chip no card claims has nothing to filter to — see model-gallery.php */
.mgal__tab[disabled] {
  cursor: default;
  opacity: 0.6;
}

.mgal__tab:not(.is-active):not([disabled]):hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ---------- carousel ---------- */
.mgal__carousel {
  margin-top: -1.0417vw; /* the Figma overlaps the row 20 into the Tab Bar */
}

.mgal__arrows {
  display: flex;
  justify-content: flex-end; /* RTL end = left, where the Figma pins them */
  gap: 1.0417vw; /* 20 */
  margin-bottom: 1.25vw; /* 24 */
}

.mgal__nav {
  width: 2.2917vw; /* 44 */
  height: 2.2917vw;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mgal__nav img {
  display: block;
  width: 1.25vw; /* 24 */
  height: 1.25vw;
}

/* icon-chevron.svg already points left and icon-chevron-2.svg right, which is
   what the Figma draws for next / prev in RTL — no mirroring. */

.mgal__nav:active {
  transform: scale(0.94);
}

/* Both buttons stay solid #1a1a1a at the ends of the row, the way the Figma
   draws them — an end-stop only takes the pointer away, it does not grey out. */
.mgal__nav[disabled] {
  cursor: default;
}

.mgal__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

/* campaign.js adds .is-draggable only while there is more than one page, so a
   filtered row that already fits does not advertise a drag that does nothing */
.mgal__viewport.is-draggable {
  cursor: grab;
}

.mgal__viewport.is-draggable.is-dragging {
  cursor: grabbing;
}

.mgal__track {
  display: flex;
  align-items: stretch;
  gap: 1.25vw; /* 24 */
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.mgal__track.is-instant {
  transition: none;
}

/* ---------- card ---------- */
/* a chip filters by taking the other groups out of the flex row entirely, so
   the remaining cards close up and the carousel maths sees only them */
.mgal__card.is-hidden {
  display: none;
}

.mgal__card {
  flex: 0 0 21.9271vw; /* 421 */
  width: 21.9271vw;
  height: 29.8438vw; /* 573 */
  display: flex;
  flex-direction: column;
  border: 0.0521vw solid var(--hairline); /* 1 */
  border-radius: 1px;
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
}

.mgal__media {
  flex: none;
  height: 15.2908vw; /* 293.58 */
  overflow: hidden;
}

.mgal__pic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mgal__txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL start = right, as in the Figma */
  gap: 0.4167vw; /* 8 */
  padding: 1.25vw 1.6667vw; /* 24 / 32 */
  text-align: right;
  box-sizing: border-box;
}

.mgal__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.1042vw; /* 2 */
  padding: 0.2083vw 0.2083vw 0.2083vw 0.4167vw; /* 4 / 4 / 4 / 8 */
  border: 0.0521vw solid #e8e8e6; /* 1 */
  border-radius: 0.2083vw; /* 4 */
  background: #fafaf8;
  color: #0087ef;
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 0.625vw; /* 12 */
  line-height: 1.3333; /* 16 */
  white-space: nowrap;
}

.mgal__badge img {
  display: block;
  width: 0.8333vw; /* 16 */
  height: 0.8333vw;
}

.mgal__name {
  margin: 0;
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 1.4583vw; /* 28 */
  line-height: 1.25;
  color: var(--ink);
}

.mgal__body {
  margin: 0;
  font-family: var(--f-regular);
  font-weight: 400;
  font-size: 1.1458vw; /* 22 */
  line-height: 1.25;
  color: var(--ink);
}

/* ---------- bar indicator — Figma 138x14 (node 1454:7737) ----------
   The track is one #f5f4f0 pill. The inactive stops carry NO fill — they only
   reserve the step — and the active stop is a yellow 32x20 thumb that stands
   3 proud of the 14 track. 8 padding + 3 gaps of 10 + 20+20+20+32 = 138. */
.mgal__bar {
  display: flex;
  align-items: center;
  gap: 0.5208vw; /* 10 */
  width: fit-content;
  height: 0.7292vw; /* 14 */
  margin: 1.25vw auto 0; /* 24 */
  padding: 0 0.4167vw; /* 8 */
  border-radius: 100px;
  background: #f5f4f0;
  box-sizing: border-box;
}

.mgal__seg {
  display: block;
  flex: none;
  width: 1.0417vw; /* 20 */
  height: 0.7292vw; /* 14 */
  border-radius: 100px;
  background: transparent;
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
}

.mgal__seg.is-active {
  width: 1.6667vw; /* 32 */
  height: 1.0417vw; /* 20 */
  background: var(--brand-accent);
}


/* ============================== MOBILE ============================== */
@media (max-width: 768px) {

  .mgal,
  .mobile .mgal {
    padding: 4.2667vw var(--gutter); /* 16 */
  }

  /* four chips never fit 370 — the row scrolls, the way it does on the hub */
  .mgal__tabs,
  .mobile .mgal__tabs {
    gap: 4.2667vw; /* 16 */
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mgal__tabs::-webkit-scrollbar,
  .mobile .mgal__tabs::-webkit-scrollbar {
    display: none;
  }

  .mgal__tab,
  .mobile .mgal__tab {
    flex: none;
    padding: 2.1333vw 4.2667vw; /* 8 / 16 */
    border-width: 0.2667vw; /* 1 */
    font-size: 3.7333vw; /* 14 */
    line-height: 1.7143; /* 24 */
    letter-spacing: 0.1333vw; /* 0.5 */
  }

  .mgal__carousel,
  .mobile .mgal__carousel {
    margin-top: 4.2667vw; /* 16 */
  }

  /* the mobile frame has no arrows row */
  .mgal__arrows,
  .mobile .mgal__arrows {
    display: none;
  }

  .mgal__track,
  .mobile .mgal__track {
    gap: 4.2667vw; /* 16 */
  }

  .mgal__card,
  .mobile .mgal__card {
    flex: 0 0 85.3333vw; /* 320 */
    width: 85.3333vw;
    height: auto;
    min-height: 142.9333vw; /* 536 */
    border-width: 0.2667vw; /* 1 */
  }

  .mgal__media,
  .mobile .mgal__media {
    height: 78.9333vw; /* 296 */
  }

  .mgal__txt,
  .mobile .mgal__txt {
    gap: 2.1333vw; /* 8 */
    padding: 4.2667vw; /* 16 */
  }

  .mgal__badge,
  .mobile .mgal__badge {
    gap: 0.5333vw; /* 2 */
    padding: 1.0667vw 1.0667vw 1.0667vw 2.1333vw; /* 4 / 4 / 4 / 8 */
    border-width: 0.2667vw;
    border-radius: 1.0667vw; /* 4 */
    font-size: 3.2vw; /* 12 */
    line-height: 1.3333; /* 16 */
  }

  .mgal__badge img,
  .mobile .mgal__badge img {
    width: 4.2667vw; /* 16 */
    height: 4.2667vw;
  }

  .mgal__name,
  .mobile .mgal__name {
    font-size: 6.4vw; /* 24 */
    line-height: 1.3333; /* 32 */
  }

  .mgal__body,
  .mobile .mgal__body {
    font-size: 4.8vw; /* 18 */
    line-height: 1.3333; /* 24 */
  }

  /* Figma mobile "Feature Indicators" 146x12 (node 846:1198) is a DOT row,
     not a track: six 12 circles 10 apart, grey with one yellow, no pill. */
  .mgal__bar,
  .mobile .mgal__bar {
    gap: 2.6667vw; /* 10 */
    height: auto;
    margin-top: 4.2667vw; /* 16 */
    padding: 0;
    background: none;
  }

  .mgal__seg,
  .mobile .mgal__seg {
    width: 3.2vw; /* 12 */
    height: 3.2vw;
    background: var(--hairline);
  }

  .mgal__seg.is-active,
  .mobile .mgal__seg.is-active {
    width: 3.2vw;
    height: 3.2vw;
    background: var(--brand-accent);
  }
}