/**
 * TG Iwata Why
 * Intro column (kicker + headline + body + image) beside a grid of content
 * columns (yellow bar + heading + paragraph). Button lives at the bottom
 * via the bootstrap button position. Typography comes from the text settings.
 * Breakpoints: mobile = 1 col · tablet = intro top / blocks 2-col ·
 *              desktop = intro left / blocks 2-col right.
 */
/* ---- Layout: Shadows o-layout grid ----
   Structure comes from o-layout / o-layout__item / u-width in the markup:
     .tg-why           = o-layout o-layout--align-top o-layout--spaced
       .tg-why__intro    = o-layout__item u-width-12 u-width-4--l
       (wrapper)         = o-layout__item u-width-12 u-width-8--l
         .tg-why__columns  = o-layout o-layout--spaced   (2-up)
           .tg-why__col      = o-layout__item u-width-12 u-width-6--m
   Custom gaps are kept by scoping --default-spacing-unit (drives both the
   horizontal gutter and the --spaced vertical gutter — no flex overflow). */
.tg-why { --default-spacing-unit: 4rem; }          /* intro ↔ columns split */
.tg-why__columns { --default-spacing-unit: 3rem; } /* 2-up content columns */
@media (min-width: 60em) {
  .tg-why__columns { --default-spacing-unit: 5rem; } /* wider column gap on desktop */
  /* --spaced ties the vertical row gap to that same 5rem gutter; override it
     smaller so the rows (and the CTA in row 3) sit tighter vertically */
  .tg-why__columns.o-layout--spaced > .o-layout__item { margin-bottom: 3rem; }
}

/* CTA button renders as a grid item inside .tg-why__columns (see markup) so it
   flows to the bottom-left, under the first content column — matching Figma.
   Desktop-only via u-hidden u-flex--l on the item. Fill the column width. */
.tg-why__cta .c-button { width: 100%; }

/* ---- Intro column ---- */
/* heading / subheading / body use the bootstrap wrappers + text settings */
.tg-why__media { margin: 1.5rem 0 0; }
.tg-why__img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
}
/* Tablet & mobile: intro stacks above the content columns — add breathing room
   between the intro photo and the first content row (design notes #11/15).
   Desktop (≥60em) is intro-left / columns-right, so this is scoped below it. */
@media (max-width: 59.99em) {
  .tg-why__media { margin-bottom: 2.5rem; }
}

/* ---- Content column block ---- */
.tg-why__bar {
  display: block;
  width: 46px;
  height: 5px;
  background: var(--theme-primary-color, #F6EC23);
  margin-bottom: 1.1rem;
}
.tg-why__col-heading {
  margin: 0 0 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1rem;
}
.tg-why__col-body {
  margin: 0;
  line-height: 1.65;
  color: #6a6a6a;
}
.tg-why__col-body p { margin: 0; }