/* ==========================================================================
   "Wer sind Sie?" — home-page user segmentation band.

   Palette, radii, spacing and motion tokens all come from style.css and
   sections.css; nothing is redeclared here. This band previously carried a
   note that the Brief's "#e8f5e9 cards on a #2c5f2d border" was a different
   green from the site's. The Brief's palette is now the site's palette, so
   the Brief's own specification is implemented literally: --mist cards
   (#e8f5e9) on a --sage border (#2c5f2d).
   ========================================================================== */

.seg{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
}

/* Four across at --maxw leaves 264px per card, over the Brief's 250px floor.
   Below that the row halves rather than dropping to three: four personas in a
   3+1 arrangement reads as one of them having been demoted. */
@media (max-width:1100px){.seg{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.seg{grid-template-columns:1fr}}

.seg-card{
  position:relative;min-width:0;
  display:flex;flex-direction:column;
  background:var(--mist);border:1px solid var(--sage);border-radius:var(--r-md);
  padding:var(--gap);
  overflow-wrap:anywhere;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.seg-card:hover,
.seg-card:focus-within{border-color:var(--sage);box-shadow:var(--e-2)}

.seg-icon{display:block;width:48px;height:48px;color:var(--sage);margin-bottom:var(--s-5)}
.seg-icon .en-icon{display:block;width:100%;height:100%}

.seg-role{
  margin:0 0 var(--s-2);
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--sage);
}

.seg-h{margin:0 0 var(--s-3);font-size:var(--fs-lede)}

/* The heading is the card's link and its ::after is the hit area, so the whole
   card is one 250px-plus target and there is exactly one tab stop per persona.
   The focus ring is drawn on that overlay, which puts it around the card rather
   than around three words of heading. */
.seg-link{color:inherit;text-decoration:none}
.seg-link::after{content:"";position:absolute;inset:0;border-radius:var(--r-md)}
.seg-link:focus-visible{outline:none}
.seg-link:focus-visible::after{outline:2px solid var(--focus);outline-offset:3px}

.seg-say{margin:0 0 var(--s-5);font-size:var(--fs-small);color:var(--muted)}

/* Bottom-anchored so the four buttons land on one line across the row even
   where a persona heading wraps to two. */
.seg-foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1)}

/* Not a button element and not focusable: the card's anchor already carries the
   destination. It is the affordance, not the control. */
.seg-btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:44px;padding:var(--s-3) var(--s-4);
  border:1px solid var(--sage-2);border-radius:var(--r-sm);
  background:var(--white);color:var(--sage);
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.seg-card:hover .seg-btn,
.seg-card:focus-within .seg-btn{background:var(--sage);border-color:var(--sage);color:var(--white)}

/* Raised above the stretched overlay so it stays clickable, and given the same
   44px height so it is a thumb target in its own right. */
.seg-alt{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-small);color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.seg-alt:hover,
.seg-alt:focus-visible{color:var(--ink);text-decoration-color:var(--sage)}

@media (max-width:560px){
  .seg-card{padding:15px}
  .seg-icon{width:40px;height:40px;margin-bottom:var(--s-4)}
}