/*
 * "Why choose ALFIDAONE?" on the home page (.why > .why-grid > li > .why-card). Loaded on the home page only.
 * Each card: a portrait 4:5 picture (no lettering in the pictures; width and height are set on the <img>, so nothing shifts) and the title and the text as HTML.
 * Phone (under 560px): 1 column, picture on top. From 560px the picture sits beside the text (so the portrait picture keeps its sharpness):
 * tablet 1 column of wide cards, desktop (900px and up) 2 columns x 2 rows. Motion: 200-300 ms, transform / shadow only; off under prefers-reduced-motion.
 */
.why .container { max-inline-size: 1180px; }
.why .section-head { margin-block-end: 8px; }
.why-grid { display: grid; gap: 28px; margin-block-start: 36px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why-grid > li { display: flex; min-inline-size: 0; }
.why-card {
  display: flex; flex-direction: column; inline-size: 100%; overflow: hidden; background: #fff; border: 1px solid #dbe6f6; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(11, 31, 68, .05), 0 10px 28px rgba(11, 31, 68, .08);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, border-color .28s ease;
}
.why-card:hover, .why-card:focus-within { transform: translateY(-4px); border-color: rgba(22, 119, 255, .4); box-shadow: 0 2px 4px rgba(11, 31, 68, .06), 0 20px 44px rgba(22, 119, 255, .16); }
.why-pic { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #e8eef8; }
.why-pic img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; object-position: 50% 30%; transform: scale(1); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.why-card:hover .why-pic img, .why-card:focus-within .why-pic img { transform: scale(1.04); }
.why-pic::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 4px; background: linear-gradient(90deg, var(--blue), var(--sky)); }
.why-body { display: grid; gap: 8px; align-content: center; padding: 24px 28px 28px; min-inline-size: 0; }
.why-body h3 { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; color: var(--navy-900); text-wrap: balance; overflow-wrap: anywhere; }
.why-body p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
@media (min-width: 560px) {
  .why-card { flex-direction: row; align-items: stretch; }
  .why-pic { flex: 0 0 40%; aspect-ratio: 4 / 5; }
  .why-body { padding: 24px 28px; }
}
@media (max-width: 559px) {
  .why-grid { gap: 22px; margin-block-start: 28px; }
  .why-card { border-radius: 20px; }
  .why-body { padding: 20px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .why-card, .why-pic img { transition: none; }
  .why-card:hover, .why-card:focus-within { transform: none; }
  .why-card:hover .why-pic img, .why-card:focus-within .why-pic img { transform: none; }
}