/* =========================================================================
   CARD, CUSTOMER STORIES — Figma set 6417:57346 · 420 2135:19489
   · 1024 6417:57347 · 1440 2043:10596 · 1920 6417:57377
   One story on a Gray card: photo beside the logo and quote, then the
   story's title beside its summary and button. On the 420 frame the card
   is 360 wide and stacks photo, logo, quote and button.
   ========================================================================= */

.s-why-story :is(h2, h3, p, blockquote, figcaption)[class*="t-"] { margin-bottom: calc(round(nearest, 1cap, 1px) - 1cap); }
.s-why-story :is(blockquote, figure) { margin: 0; }

.s-why-story__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-stack-xl);            /* 420: stack-xl; wider: stack-l */
  width: 100%;
}
.s-why-story__eyebrow { gap: var(--spacing-inline-s); }
.s-why-story__title { width: 100%; max-width: 984px; }

/* ── the card: 420 ─────────────────────────────────────────────────── */
.s-why-story__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;                        /* Figma: fixed 360 on the 420 frame */
  padding-bottom: var(--spacing-stack-xl);
  border-radius: 4px;                      /* Figma: 4, no token */
  overflow: hidden;
  background: var(--color-gray);
}
.s-why-story__top { display: flex; flex-direction: column; }
.s-why-story__photo { position: relative; aspect-ratio: 1; }   /* Figma: 360 × 360 */
.s-why-story__photo img { width: 100%; height: 100%; object-fit: cover; }
.s-why-story__quote { display: flex; flex-direction: column; }
.s-why-story__logo {
  display: block;
  margin: var(--spacing-stack-xl) var(--spacing-page-margin) 0;
  width: 116px;                            /* Figma: 116 × 25, the logo cropped to its band */
  height: 25px;
  overflow: hidden;
}
.s-why-story__logo img { width: 100%; height: 100%; object-fit: cover; }
.s-why-story__said {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xl);
  padding: var(--spacing-stack-xl) var(--spacing-page-margin);
}
/* the opening quote mark hangs in the margin (Figma: indent −0.45 em) */
.s-why-story__said blockquote { text-indent: -.45em; }
.s-why-story__details { display: contents; }
.s-why-story__name,
.s-why-story__summary { display: none; }
.s-why-story__more { display: contents; }
.s-why-story__more .c-btn { align-self: flex-start; margin-inline: var(--spacing-page-margin); }

/* ── 1024 up: the full card ────────────────────────────────────────── */
@media (min-width: 1024px) {
  .s-why-story__head { gap: var(--spacing-stack-l); }

  .s-why-story__card {
    max-width: none;
    gap: var(--spacing-section-gap);
    padding: var(--spacing-section-gap);
  }
  .s-why-story__top,
  .s-why-story__details {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-section-gap);
  }
  .s-why-story__photo {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 4px;
    overflow: hidden;
  }
  .s-why-story__quote {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    justify-content: space-between;        /* logo at the top, quote at the foot */
  }
  .s-why-story__logo { margin: 0; width: 155px; height: 87px; }   /* Figma: 155 × 87 / 224 × 126 / 269 × 151 */
  .s-why-story__said { gap: var(--spacing-stack-l); padding: 0; }
  .s-why-story__said figcaption { max-width: 295px; }             /* Figma: fixed 295 / 426 / 511 */

  .s-why-story__name,
  .s-why-story__summary { display: block; }
  .s-why-story__name { flex: 1 1 0; min-width: 0; }
  .s-why-story__more {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-stack-m);
  }
  .s-why-story__more .c-btn { margin-inline: 0; }
}
@media (min-width: 1392px) {
  .s-why-story__logo { width: 224px; height: 126px; }
  .s-why-story__said figcaption { max-width: 426px; }
}
@media (min-width: 1920px) {
  .s-why-story__logo { width: 269px; height: 151px; }
  .s-why-story__said figcaption { max-width: 511px; }
}