/**
 * @file
 * p_toolkit — Beauty "Digital Toolkit" tabbed paragraph.
 *
 * Ported from the legacy beauty.css toolkit cluster (3 Views displays + sync
 * JS). Now a single paragraph rendered with native Bootstrap pills: nav on top,
 * one pane per tab = intro (headline + lead, 2-col) then detail cards/photos.
 *
 * Loaded as its own library (bootstrap_subtheme/p-toolkit), auto-attached via
 * bootstrap_subtheme_preprocess_paragraph__p_toolkit — NOT @imported in
 * style.css.
 */

.p-toolkit {
  position: relative;
  padding-block: 100px;
}

/* Full-bleed light-gray band behind the whole section — opt-in via the
   "Dark background" toggle (field_dark → .p-toolkit--dark). Default is no
   band (transparent), matching p_rich_text / p_data_chart / p_advantages. */
.p-toolkit--dark::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-color: var(--grayMoreLight);
  z-index: 0;
}

.p-toolkit__inner {
  position: relative;
  z-index: 1;
}

.p-toolkit__title {
  text-align: center;
  color: var(--black);
  max-width: 796px;
  margin-inline: auto;
  margin-block-end: 48px;
}

.p-toolkit .rmaa-tabs__nav {
  margin-block-end: 56px;
}

/* =========================================================================
   Intro (per tab) — headline + lead, two columns with a divider below.
   ========================================================================= */

.p-toolkit__intro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 25px;
  row-gap: 16px;
  padding-block-end: 35px;
  margin-block-end: 80px;
  border-block-end: 1px solid rgba(0, 0, 0, .08);
}

.p-toolkit__intro-ttl {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--H3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  color: var(--black);
  margin: 0;
  max-width: 488px;
}

.p-toolkit__intro-txt {
  color: var(--black);
}

.p-toolkit__intro-txt p {
  margin: 0;
}

/* =========================================================================
   Detail items
   ========================================================================= */

.p-toolkit__pane > .beauty-toolkit-item + .beauty-toolkit-item {
  margin-block-start: 80px;
}

.p-toolkit .beauty-toolkit-name {
  margin-block-end: 40px;
}

.p-toolkit .beauty-toolkit-name h3 {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--H4);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight2);
  color: var(--black);
  margin: 0;
}

/* Info cards row (Role / Formats / Why). */
.p-toolkit .beauty-toolkit-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 380px;
  gap: 24px;
  margin-block-end: 68px;
}

/* Visual contract owned by .rmaa-card + .rmaa-card--pad-sm; the card surface
   adapts to the section background via the --rmaa-card-bg override. On the
   white canvas (default) cards are light-gray to read against white; on the
   dark/gray-band variant they flip to white so they pop on the band. */
.p-toolkit .beauty-toolkit-card {
  --rmaa-card-bg: var(--grayMoreLight);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.p-toolkit--dark .beauty-toolkit-card {
  --rmaa-card-bg: var(--white);
}

.p-toolkit .beauty-toolkit-card__name {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--H4);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight2);
  color: var(--blue);
}

.p-toolkit .beauty-toolkit-card__descr > ul {
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--BodyS);
  line-height: var(--lh-body);
  color: var(--black);
  padding-inline-start: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

/* =========================================================================
   Body photo rows — alternating image side (zigzag).
   ========================================================================= */

.p-toolkit .beauty-toolkit-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.p-toolkit .beauty-toolkit-body__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Even rows put the image column on the right. */
.p-toolkit .beauty-toolkit-body__row:nth-child(even) > .beauty-toolkit-body__col:first-child {
  order: 2;
}

.p-toolkit .beauty-toolkit-body__col {
  min-height: 100%;
}

.p-toolkit .beauty-toolkit-body__col picture,
.p-toolkit .beauty-toolkit-body__col img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* The <img> is a replaced element whose default `overflow: clip` does not
   reliably honour border-radius in Chromium, so the bottom corners render
   square. Clipping on the non-replaced <picture> wrapper rounds all four
   corners dependably. */
.p-toolkit .beauty-toolkit-body__col picture {
  overflow: hidden;
}

.p-toolkit .beauty-toolkit-body__col:not(:has(img)) {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.p-toolkit .beauty-toolkit-body__ttl {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--H5);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  color: var(--black);
}

.p-toolkit .beauty-toolkit-body__txt,
.p-toolkit .beauty-toolkit-body__txt p {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--BodyM);
  line-height: var(--lh-body);
  color: var(--black);
}

/* Native pill panes. */
.p-toolkit .tab-pane:not(.show) {
  display: none;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 991px) {
  .p-toolkit .beauty-toolkit-cards {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  /* Cards lose their fixed 380px height here, so space-between no longer
     separates the name from the list — add explicit spacing below the name. */
  .p-toolkit .beauty-toolkit-card__name {
    margin-block-end: 16px;
  }
}

@media (max-width: 768px) {
  .p-toolkit {
    padding-block: 60px;
  }

  .p-toolkit__intro {
    grid-template-columns: 1fr;
    margin-block-end: 48px;
  }

  .p-toolkit .beauty-toolkit-body__row {
    grid-template-columns: 1fr;
  }

  .p-toolkit .beauty-toolkit-body__row:nth-child(even) > .beauty-toolkit-body__col:first-child {
    order: 0;
  }
}