/* ==========================================================================
   Yak Express widget — Icon cards (.yak-cards)
   Layouts: --vertical (default), --horizontal, --compact, --vehicle, --chip, --emphasis.
   Card surface/tile/title/text come from theme.css (.yak-card, .yak-tile, .yak-card__title …).
   ========================================================================== */
.yak-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--yak-min, 260px)), 1fr)); gap: var(--yak-gap, 20px); }
.yak-cards__item { display: flex; flex-direction: column; gap: 14px; padding: 24px; margin: 0; min-width: 0; text-align: left; color: var(--ink-primary); }
a.yak-cards__item { text-decoration: none; cursor: pointer; }
a.yak-cards__item:hover, a.yak-cards__item:focus-visible { color: var(--ink-primary); text-decoration: none; }
.yak-cards__top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.yak-cards__arrow { color: var(--ink-secondary); margin-left: auto; }
.yak-cards__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.yak-cards__btn { display: flex; }
.yak-cards .yak-card__title, .yak-cards .yak-card__text { margin: 0; }
.yak-cards .yak-card__text a { font-weight: 600; }

/* Linked cards: keep the scroll-reveal transition (theme's .yak-card--hover would override it),
   then switch to the snappy hover transition once the card is visible and hovered. */
.yak-cards__item.yak-card--hover.yak-reveal { transition: opacity 700ms cubic-bezier(.2,.7,.2,1) var(--yak-reveal-delay, 0ms), transform 900ms cubic-bezier(.2,.7,.2,1) var(--yak-reveal-delay, 0ms), box-shadow 140ms ease; }
.yak-cards__item.yak-card--hover.yak-reveal.is-visible:hover { transition: box-shadow 140ms ease, transform 140ms ease; }

/* ---- Horizontal: tile left, copy right (add-ons) ---- */
.yak-cards--horizontal .yak-cards__item { flex-direction: row; align-items: flex-start; gap: 16px; }
.yak-cards--horizontal .yak-card__title { font-size: 17px; }

/* ---- Compact: tile + title in one row (pricing factors) ---- */
.yak-cards--compact .yak-cards__item { flex-direction: row; align-items: center; gap: 14px; padding: 22px 20px; }
.yak-cards--compact .yak-card__title { font-size: 16px; line-height: 1.5; }

/* ---- Vehicle: centred column with the round tile ---- */
.yak-cards--vehicle .yak-cards__item { align-items: center; text-align: center; gap: 14px; padding: 28px 20px; }
.yak-cards--vehicle .yak-card__title { font-size: 16px; line-height: 1.35; }

/* ---- Chip: .yak-chips.yak-chips--light row, items are .yak-chip ---- */
.yak-cards--chip { display: flex; flex-wrap: wrap; gap: var(--yak-gap, 12px); }
.yak-cards--chip .yak-chip .yak-icon { font-size: 20px; }

/* ---- Emphasis: cream card, primary tile + 20px h3, 17px ink copy (About vision/mission) ---- */
.yak-cards--emphasis .yak-cards__item { gap: 16px; padding: 32px; }
.yak-cards__head { display: flex; align-items: center; gap: 12px; }
.yak-cards__h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--ink-primary); }
.yak-cards--emphasis .yak-card__text { font-size: 17px; line-height: 1.7; color: var(--ink-primary); }

/* ---- H2 title variant (contact page support card): 22px title, 16px ink copy, 28px padding ---- */
.yak-cards--h2 .yak-cards__item { padding: 28px; border-radius: 18px; }
.yak-cards--h2 .yak-card__title { font-size: 22px; line-height: 1.3; font-weight: 700; }
.yak-cards--h2 .yak-card__text { font-size: 16px; line-height: 1.6; color: var(--ink-primary); }