/* ==========================================================================
   ALBI HOME — UNSERE LEISTUNGEN
   Almost nothing new: the grid mirrors .benefits and the card IS .benefit,
   reused whole. Only three things differ, and each gets one rule below.
   Depends on tokens.css + base.css + components.css + benefits.css.
   ========================================================================== */

.services-section { background-color: var(--bg-page); }

/* Same three-up grid as the Vorteile cards, including the equal rows that
   keep every photograph on the same line when one card's copy runs long. */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 30px;
  margin-top: var(--section-stack);
}

/* --- The three differences ------------------------------------------------
   1. The photograph leads the card. That is carried by the markup order
      alone — the card is already a flex column, so nothing needs reordering
      here, which also keeps the DOM order and the visual order identical for
      anyone reading with a screen reader or tabbing through.
   2. Its corners flip. The base card rounds the media's TOP corners because
      it sits at the bottom and the card's overflow clips the rest; on top,
      the card's own overflow does all the clipping and the media wants none.
   3. There is no numeral, so the heading gets the full width of the card. */
.benefit--media-top .benefit__media { border-radius: 0; }

/* The raised fill and hairline that lift these cards off the section now live
   on .benefit itself in benefits.css — both sections use the same treatment,
   so it is one rule rather than two.

   Gold headings, this section only. --text-accent already IS #E2B85C. */
.services .benefit__title { color: var(--text-accent); }

/* The description. The Vorteile card carries a short gold line here instead;
   this is running copy, so it takes the same size and colour every other card
   body on the site uses. */
.benefit__text {
  margin-top: 14px;
  color: var(--text-on-media);
  font-size: var(--fs-xs);          /* 13px, as on every other card */
  line-height: 1.62;
}

/* --- Breakpoints: identical to .benefits --------------------------------- */
@media (max-width: 1199.98px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 767.98px) {
  .services { gap: 16px; }
  .benefit--media-top .benefit__text {
    margin-top: 10px;
    font-size: clamp(0.75rem, 3vw, 0.8125rem);
    line-height: 1.6;
  }
}

@media (max-width: 479.98px) {
  .services { gap: 12px; }
}