/* ══════════════════════════════════════════
   PLM SERVICE TABS MODULE (IMAGINiT)
   Icon tabs across the top, one content panel below.
   Tabs: dark-blue cards, white labels; active tab light blue + arrow into the panel.
   Panels stack in one row so the box is always as tall as the
   tallest panel — no layout shift when tabs change.
   Flexbox only. Icon-only tabs at ≤1000px, mobile at ≤767px.
   Colors and fonts follow the IMAGINiT 2026 brand style guide.
   ══════════════════════════════════════════ */

.img-tabs {
  --blue: #0096D6;   /* brand light blue: accents, borders, active tab */
  --navy: #09476E;   /* brand dark blue: body text, headings, inactive tabs */
  --gold: #C5960C;   /* brand gold: focus ring */
  --gray: #c5c5c5;   /* brand light gray: borders and dividers */
  --note: rgba(0, 150, 214, .08);
  --font: "Galano Grotesque", Sans-Serif;
  --font-bold: "Galano Grotesque Bold", Sans-Serif;
  --radius: 0;       /* square corners on the tabs, tab photos and content box */
  font-family: var(--font);
  color: var(--navy);
  padding: 88px 0;
}

.img-tabs *,
.img-tabs *::before,
.img-tabs *::after {
  box-sizing: border-box;
}

.img-tabs .img-tabs--wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ~8% wider than the page container on desktop: spills evenly past both sides,
   capped so it never runs off-screen. */
@media (min-width: 1200px) {
  .img-tabs .img-tabs--wrap {
    --wide: min(108%, 1296px, 100vw - 48px);
    width: var(--wide);
    max-width: none;
    margin-left: calc((100% - var(--wide)) / 2);
    margin-right: 0;
  }
}

/* ── INTRO ── */
.img-tabs .img-tabs--intro {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

/* Font, size, color and spacing come from the site skin (h2.section-title); only undo any uppercase. */
.img-tabs h2.section-title {
  text-transform: none !important;
}

/* Links: light blue + Galano Grotesque Bold come from the site skin.
   Bold is its own font file, so weight stays 400 to avoid faux-bolding.
   The span rule keeps editor-wrapped link text the link color. */
.img-tabs a:not(.btn) {
  font-family: var(--font-bold);
  font-weight: 400;
}

body .inner-skin .section .content .img-tabs a:not(.btn) span {
  color: inherit !important;
}

/* ── TABS ── */
.img-tabs .img-tabs--tabs {
  display: flex;
  margin-top: 44px;
}

.img-tabs .img-tabs--tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  /* Stack icon + label from the top (buttons center content vertically by default),
     so icons line up and labels start at the same height. The row stretches every
     tab to the tallest one, so the cards stay equal size. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0 12px 0 0;
  background: var(--navy);
  border: 0;
  border-radius: var(--radius);
  padding: 20px 14px 18px;
  text-align: center;
  cursor: pointer;
  /* Dark-blue cards with white labels; the active tab goes light blue (below).
     !important beats any skin button color set with !important */
  font-family: var(--font-bold);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  text-transform: none;
  color: #fff !important;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}

/* Long selector beats the skin's .content span rules (color, weight, margin). */
body .inner-skin .section .content .img-tabs .img-tabs--tab .img-tabs--label {
  font: inherit;
  color: inherit !important;
  margin: 0;
}

.img-tabs .img-tabs--tab:last-child {
  margin-right: 0;
}

/* .img-tabs--tab in the selector beats the skin's .content img:not(.article-img)
   (width/height auto, margin 15px 0), which was blowing the icons up and left-aligning them. */
.img-tabs .img-tabs--tab .img-tabs--icon {
  display: block;
  width: 44px;
  height: 44px;
  max-width: none;
  object-fit: contain;
  margin: 0 auto 10px;
}

/* Tab photo (the tab's Panel Image) shown in place of the icon: runs edge to
   edge across the top of the tab, cropped to fill, with the tab's top corners.
   (Not overflow:hidden on the tab, which would clip the arrow below it.) */
.img-tabs .img-tabs--tab.has-thumb {
  padding: 0 14px 16px;
}

.img-tabs .img-tabs--tab .img-tabs--thumb {
  display: block;
  width: calc(100% + 28px);
  height: auto;
  aspect-ratio: 16 / 9; /* scales with the tab's width, so it holds its shape at any screen size */
  max-width: none;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  margin: 0 -14px 14px;
}

.img-tabs .img-tabs--tab:hover {
  background: #0b5a8a; /* a step lighter than brand dark blue */
}

.img-tabs .img-tabs--tab:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.img-tabs .img-tabs--tab[aria-selected="true"] {
  background: var(--blue);
  box-shadow: 0 14px 28px -16px rgba(0, 150, 214, .6);
}

/* arrow from the active tab down to the panel. It starts 2px up inside the tab
   (same color, so the overlap is invisible) to cover the hairline seam browsers
   draw at fractional pixel positions, and ends on the panel's 1px top border. */
.img-tabs .img-tabs--tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  border-style: solid;
  border-color: var(--blue) transparent transparent;
  border-width: 21px 18px 0;
  opacity: 0;
  transition: opacity .2s;
}

.img-tabs .img-tabs--tab[aria-selected="true"]::after {
  opacity: 1;
  z-index: 1;
}

/* ── PANELS ── */
.img-tabs .img-tabs--panels {
  display: flex;
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -26px rgba(9, 71, 110, .35);
  overflow: hidden;
}

/* every panel sits in the same spot; the row grows to the tallest one.
   The card inside holds the text and the points table side by side. */
.img-tabs .img-tabs--panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  width: 100%;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}

.img-tabs .img-tabs--panel + .img-tabs--panel {
  margin-left: -100%;
}

.img-tabs .img-tabs--panel.active {
  visibility: visible;
  opacity: 1;
}

/* ── CARD ──
   Holds the text column and the points table. flex:1 lets it fill the panel's
   height, so the table still stretches on shorter tabs. */
.img-tabs .img-tabs--card {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
}

.img-tabs .img-tabs--text {
  flex: 0 0 36%;
  padding: 40px 36px 32px 40px;
}

/* divider between the text column and the points table */
.img-tabs .img-tabs--text + .img-tabs--points {
  border-left: 1px solid var(--blue);
}

/* !important beats any skin heading color set with !important */
.img-tabs .img-tabs--text h3 {
  font-family: var(--font-bold);
  font-weight: 400;
  color: var(--navy) !important;
  font-size: 22px;
  line-height: 28px;
  text-transform: none;
  margin: 0 0 32px;
}

/* subtitle sits tight under the h3; the h3's bottom spacing moves below the subtitle */
.img-tabs .img-tabs--text h3:has(+ .img-tabs--subtitle) {
  margin-bottom: 8px;
}

.img-tabs .img-tabs--text .img-tabs--subtitle {
  font-family: var(--font-bold);
  font-weight: 400;
  color: var(--blue);
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 24px;
}

.img-tabs .img-tabs--note {
  background: var(--note);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 16px 20px;
  font-family: var(--font-bold);
  font-weight: 400;
  color: var(--navy);
  margin-top: 18px;
}
/* ── POINTS (title → detail rows, adapted from 2026-points-comparison) ──
   Fills the right side of the panel edge to edge: blue header bar on top,
   gray title column (optional icon + title) and white detail column below.
   Each point is one grid row, so a title and its detail always line up
   however long either side runs. */
/* Column flex so the grid can grow to the panel's full height: when this tab's
   rows are shorter than the tallest tab's, the grid's auto rows stretch to share
   the extra space evenly instead of leaving a blank gap under the table. */
.img-tabs .img-tabs--points {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.img-tabs .img-tabs--points-head {
  background: var(--blue);
  font-family: var(--font-bold);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: .5px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding: 26px 22px;
}

.img-tabs .img-tabs--points-grid {
  position: relative; /* anchors the arrow */
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-content: stretch;
}

/* the row wrapper drops out of layout so its two cells sit in the grid's columns */
.img-tabs .img-tabs--point {
  display: contents;
}

.img-tabs .img-tabs--point-title,
.img-tabs .img-tabs--point-detail {
  padding: 24px 32px;
  border-top: 1px solid var(--gray);
  transition: background-color .3s ease;
}

.img-tabs .img-tabs--point:first-child > * {
  border-top: 0;
}

.img-tabs .img-tabs--point-title {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f5f5f5;
}

/* !important on margin/padding: the site skin adds its own spacing to content
   images and spans, which pushed the icon and title out of line with each other. */
.img-tabs .img-tabs--point-title .img-tabs--point-icon {
  flex: 0 0 auto;
  display: block;
  width: 40px;
  height: 40px;
  max-width: none;
  object-fit: contain;
  margin: 0 !important;
  padding: 0 !important;
}

/* !important on the font: the site skin sets span { font-family: 'Galano Grotesque' },
   which was knocking the title back to the regular weight. */
body .inner-skin .section .content .img-tabs .img-tabs--point-name,
.img-tabs .img-tabs--point-name {
  display: block;
  font-family: var(--font-bold) !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  color: var(--navy) !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color .3s ease;
}

.img-tabs .img-tabs--point-detail {
  background: #fff;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.35;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.img-tabs .img-tabs--point-detail p {
  margin: 0 0 4px !important;
}

.img-tabs .img-tabs--point-detail p:last-child {
  margin-bottom: 0 !important;
}

.img-tabs .img-tabs--point-detail em {
  font-family: var(--font-bold);
  font-style: italic;
  color: var(--navy);
}

/* active row highlight: Template.js sets .is-active on the row nearest the
   middle of the screen while scrolling, or on the row under the mouse.
   Only the detail cell tints; the title cell keeps its gray. */
.img-tabs .img-tabs--point:hover .img-tabs--point-detail,
.img-tabs .img-tabs--point.is-active .img-tabs--point-detail {
  background: rgba(0, 150, 214, .06);
}

body .inner-skin .section .content .img-tabs .img-tabs--point:hover .img-tabs--point-name,
body .inner-skin .section .content .img-tabs .img-tabs--point.is-active .img-tabs--point-name,
.img-tabs .img-tabs--point:hover .img-tabs--point-name,
.img-tabs .img-tabs--point.is-active .img-tabs--point-name {
  color: var(--blue) !important;
}

/* ── ARROW (from 2026-points-comparison) ──
   Sits on the line between the title and detail columns (2fr of 5fr = 40%)
   and glides to the active row; Template.js sets its vertical position. */
.img-tabs .img-tabs--arrow {
  position: absolute;
  top: 0;
  left: 40%;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(9, 71, 110, .25);
  transform: translate(-50%, -50%);
  transition: transform .35s ease;
  will-change: transform;
  pointer-events: none;
  margin: 0 !important;  /* the skin's span spacing would knock it off the column line */
  padding: 0 !important;
}

.img-tabs .img-tabs--arrow svg {
  stroke: #fff; /* explicit, in case the skin recolors spans */
  display: block;
  width: 20px;
  height: 20px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  /* icon-only tabs, one row across the top */
  .img-tabs .img-tabs--tab {
    margin-right: 8px;
    padding: 14px 0;
  }

  .img-tabs .img-tabs--tab .img-tabs--icon {
    margin: 0 auto;
  }

  .img-tabs .img-tabs--label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .img-tabs .img-tabs--tab::after {
    bottom: -19px;
    border-width: 21px 14px 0;
  }

  /* photo tabs: image only, filling the whole tab; label hidden like the icon tabs.
     Font size is set here (the label inherits it) so the skin-override rule's
     font: inherit can't undo it. */
  .img-tabs .img-tabs--tab.has-thumb {
    padding: 0;
    font-size: 14px;
    line-height: 1.2;
  }

  .img-tabs .img-tabs--tab .img-tabs--thumb {
    width: 100%;
    border-radius: var(--radius);
    margin: 0;
  }

  /* photo tabs: on hover and on the active tab, the label comes back over the
     bottom half of the photo on a frosted-glass strip */
  .img-tabs .img-tabs--tab.has-thumb:hover .img-tabs--label,
  .img-tabs .img-tabs--tab.has-thumb[aria-selected="true"] .img-tabs--label {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 50%;
    margin: 0;
    padding: 4px 10px;
    overflow: hidden;
    clip: auto;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 71, 110, .45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .img-tabs .img-tabs--tab.has-thumb[aria-selected="true"] .img-tabs--label {
    background: rgba(0, 150, 214, .55);
  }

  /* stack text above points */
  .img-tabs .img-tabs--card {
    flex-direction: column;
  }

  .img-tabs .img-tabs--text {
    flex: 0 0 auto;
  }

  /* divider moves from the side to the top */
  .img-tabs .img-tabs--text + .img-tabs--points {
    border-left: 0;
    border-top: 1px solid var(--gray);
  }
}

@media (max-width: 767px) {
  .img-tabs {
    padding: 64px 0;
  }

  .img-tabs .img-tabs--wrap {
    padding: 0 16px;
  }

  .img-tabs .img-tabs--tab {
    margin-right: 6px;
    padding: 12px 0;
  }

  .img-tabs .img-tabs--tab .img-tabs--icon {
    width: 36px;
    height: 36px;
  }

  .img-tabs .img-tabs--text {
    padding: 30px 24px 20px;
  }

  .img-tabs .img-tabs--points-head {
    padding: 18px;
  }

  /* one column: each title sits directly above its detail */
  .img-tabs .img-tabs--points-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* no column line to sit on in one column; the row highlight still shows */
  .img-tabs .img-tabs--arrow {
    display: none;
  }

  .img-tabs .img-tabs--point-title,
  .img-tabs .img-tabs--point-detail {
    padding: 14px 18px;
  }

  .img-tabs .img-tabs--point-detail {
    border-top: 0;
  }

  .img-tabs .img-tabs--point-title .img-tabs--point-icon {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .img-tabs * {
    transition: none !important;
  }
}