/* ============================================
   Use Case — Modernization and Scaling (template instance 2 of 4).
   Page-specific bits that don't generalize yet:

     - .gs-uc-hero--centered   Centered hero with action buttons
                               below the lede (instead of the
                               2-col text+illustration on IIoT).
     - .gs-uc-cs-rows /
       .gs-uc-cs-row           Alternating challenge/solution rows:
                               card on one side, Challenge + Solution
                               text blocks on the other.
     - .gs-uc-feature-card--reverse
                               Modifier on the existing dark navy
                               feature card to flip the image to
                               the right + add a CTA button slot.
     - .gs-uc-partnership      3-up icon cards on muted bg (icon
                               + title + paragraph). Lighter than
                               the .gs-uc-challenges dark-bg cards.

   These may get folded into the use-case skill once we've built
   instance 3 and know what's truly shared.
   ============================================ */

/* ─── Centered hero ────────────────────────────────────────── */

.gs-uc-hero--centered {
  /* Top padding accounts for the fixed header overlap; bottom is
     lighter since there's no header to push away from below. */
  padding-top: 6rem;
  padding-bottom: 4rem;
  /* Custom hero bg — different illustration than the default
     dark-blue-waves used by `.gs-wgs-section--dark`. */
  background-image: url('https://www.giantswarm.io/hubfs/Illustrations/gs23-lp-background-1.svg');
}

/* Restore intro top margin here — the fixed main header overlays
   the dark hero, so the title needs breathing room or it reads
   as pinned to the header. Scoped to this hero only; the base
   .gs-wgs-section__intro rule deliberately leaves the top margin
   at 0 so it doesn't bleed into every other section that uses
   the same intro class (challenges, benefits, FAQs, etc.). */
.gs-uc-hero--centered .gs-wgs-section__intro {
  margin-top: 3.5rem;
}

/* Side-by-side CTAs are always equal width, sized to whichever label
   is longer - two buttons of different widths sitting next to each
   other read as two different kinds of thing.

   Grid rather than flex because equal width is what grid does for
   free: under `width: fit-content` the box shrinks to content, and
   `1fr` columns then all resolve to the widest column's max-content
   size. Flex can't do this - `flex: 1 1 0` would stretch both to fill
   the full section width, and a `min-width` would be a magic number
   that breaks the next time someone edits a label.

   Trade-off: grid has no equivalent of `flex-wrap`, so the narrow
   case needs the media query below rather than wrapping by itself. */
.gs-uc-hero__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 2rem auto 0;
  gap: 1rem;
}

/* Stacked below 480px, still equal width (auto-flow row + fit-content
   sizes every row to the widest). Grid can't wrap, so without this the
   pair would overflow a phone viewport instead of stacking. */
@media (max-width: 480px) {
  .gs-uc-hero__actions {
    grid-auto-flow: row;
  }
}

/* ─── Challenge/Solution rows ──────────────────────────────── */

.gs-uc-cs-rows {
  display: flex;
  flex-direction: column;
}

/* Alternating 2-col row matching the live giantswarm.io layout:
   blog-style card with image+title+intro on one side, plain
   Challenge/Solution text on the other side. Direction
   alternates per row via the --reverse modifier.

   Rows are separated by a grey hairline divider with generous
   padding above + below the line so the section reads as three
   distinct stories rather than one continuous block. */
.gs-uc-cs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.gs-uc-cs-row:first-child {
  padding-top: 0;
}

.gs-uc-cs-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.gs-uc-cs-row--reverse .gs-uc-cs-row__card {
  order: 2;
}

/* Card — image at top (flush, navy bg), title + intro below.
   No border (relies on the muted section bg for contrast).
   Capped width so the card doesn't stretch to fill the full 1fr
   column — keeps it visually compact next to the text block. */
.gs-uc-cs-row__card {
  background: var(--color-bg);
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 460px;
  width: 100%;
}

/* Card hugs the outer edge of its column. On standard rows
   (card in the left column) it sits flush with the section's
   left edge; on reversed rows (card in the right column) it
   sits flush with the right edge. The extra column width sits
   as whitespace between the card and the details block. */
.gs-uc-cs-row:not(.gs-uc-cs-row--reverse) .gs-uc-cs-row__card {
  margin-right: auto;
}

.gs-uc-cs-row--reverse .gs-uc-cs-row__card {
  margin-left: auto;
}

.gs-uc-cs-row__media {
  background: var(--color-bg-dark);
}

.gs-uc-cs-row__media img {
  width: 100%;
  height: auto;
  display: block;
}

.gs-uc-cs-row__card-body {
  padding: 1.5rem 1.75rem 1.75rem;
}

.gs-uc-cs-row__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.gs-uc-cs-row__intro {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0;
  text-wrap: pretty;
}

/* Details side — plain text, no card chrome. Challenge + Solution
   stacked vertically with their boxed icon + label headers. */
.gs-uc-cs-row__details {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.gs-uc-cs-row__block {
  /* No card chrome — just text. The icon + label is the framing. */
}

.gs-uc-cs-row__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 0.5rem;
}

/* Boxed icon — tiny version of the established 44×44 boxed-icon
   recipe used by .gs-uc-content-card / .gs-uc-challenge. Sized
   down to 28×28 so it sits inline with the label text without
   dominating. Light-tint bg picks up either coral or blue based
   on the parent label's challenge/solution modifier. */
.gs-uc-cs-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.gs-uc-cs-row__icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.gs-uc-cs-row__label--challenge .gs-uc-cs-row__icon {
  background: rgba(246, 89, 84, 0.15);
  color: var(--color-brand-accent);
}

.gs-uc-cs-row__label--solution .gs-uc-cs-row__icon {
  background: #e8f4ff;
  color: var(--color-accent);
}

.gs-uc-cs-row__copy {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0;
  text-wrap: pretty;
}

/* Inline links — inherit body color + thin underline, coral on
   hover (same recipe as the rest of the site's prose links). */
.gs-uc-cs-row__copy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.gs-uc-cs-row__copy a:hover {
  color: var(--color-brand-accent);
}

@media (max-width: 900px) {
  /* Single-column stack. Card always on top regardless of the
     desktop --reverse modifier so the image-first rhythm stays
     consistent across rows. */
  .gs-uc-cs-row,
  .gs-uc-cs-row--reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .gs-uc-cs-row--reverse .gs-uc-cs-row__card {
    order: 0;
  }
}

/* ─── Built for Your World — full-width dark band ──────────── */
/* Section bg is `.gs-wgs-section--dark` (navy + waves); this rule
   styles the inner 2-col content row. Text + CTA on the left,
   illustration on the right. */

.gs-uc-built__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.gs-uc-built__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gs-uc-built__title {
  font-size: var(--text-h2);
  color: #fff;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.gs-uc-built__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.75rem;
  text-wrap: pretty;
}

.gs-uc-built__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-uc-built__media img {
  width: 100%;
  height: auto;
  max-width: 480px;
  display: block;
  border-radius: 24px;
}

@media (max-width: 900px) {
  .gs-uc-built__row {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  /* Image first on mobile, content (title + desc + CTA) below.
     Source order is content → media, so flip with `order`. */
  .gs-uc-built__media {
    order: 0;
  }
  .gs-uc-built__content {
    order: 1;
    align-items: center;
  }
  .gs-uc-built__media img {
    max-width: 360px;
  }
}

/* ─── Partnership That Delivers — 3-up icon cards ──────────── */

.gs-uc-partnership {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.gs-uc-partnership__card {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* Hover — same recipe as .gs-uc-content-card on the IIoT page:
   blue border + inset blue hairline + soft navy shadow + lift.
   This is the established pattern for blue-icon cards. */
.gs-uc-partnership__card:hover {
  border-color: var(--color-accent);
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 0.5px var(--color-accent),
    0 12px 24px rgba(0, 38, 69, 0.1);
}

/* Boxed icon — 44×44 tinted square, blue Lucide icon inside.
   Same recipe as .gs-uc-content-card__icon on the IIoT page. */
.gs-uc-partnership__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #e8f4ff;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.gs-uc-partnership__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.gs-uc-partnership__title {
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 0.25rem;
  text-wrap: balance;
}

.gs-uc-partnership__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .gs-uc-partnership {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 480px;
    margin: 0 auto;
  }
}