/* Case cards "I'm not the only one" - Figma node 1:2184 (1920 x 1472, content 1140 wide). Navy #031926, teal #0f758c / #008aa9, font Noto Sans Hebrew.
   >=1280px: --u = viewport/1920 (1:1 at 1920). Below: stacked cards, text first, media last (phone rule). */
.c-cases { --u: calc(min(100vw, 1920px) / 1920); --navy: #031926; background: #fff; direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; color: var(--navy); overflow-x: clip; isolation: isolate; }
.c-cases :where(h2, h3, p) { margin: 0; padding: 0; }
.c-cases img { display: block; max-width: none; }

.c-cases__section { padding: 40px 16px; }
.c-cases__inner { display: flex; flex-direction: column; gap: 20px; width: min(1140px, 100%); margin-inline: auto; }

.c-cases__title { font-size: 25px; font-weight: 900; line-height: 1.3; text-align: right; color: var(--navy); }

.c-cases__card { display: flex; flex-direction: column; gap: 20px; padding: 16px; border: 1px solid var(--navy); border-radius: 12px; background: #fff; }
.c-cases__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.c-cases__name span { display: block; text-align: right; }
.c-cases__name-1 { font-size: 30px; font-weight: 400; line-height: 1.2; color: #0f758c; }
.c-cases__name-2 { font-size: 32px; font-weight: 900; line-height: 1.2; color: var(--navy); }
.c-cases__name-1--black { font-size: 32px; font-weight: 900; color: var(--navy); }
.c-cases__name-2--light { font-size: 30px; font-weight: 400; color: #008aa9; }
.c-cases__story { font-size: 17px; font-weight: 400; line-height: 1.75; text-align: right; color: var(--navy); }
.c-cases__br { display: none; }

.c-cases__more { position: relative; display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 400; line-height: 1.2; text-decoration: none; color: var(--navy); }
.c-cases__more:focus-visible { outline: 3px solid #0f758c; outline-offset: 3px; }
.c-cases__arrow { width: 70px; height: 70px; margin-block: -26px; }

.c-cases__media { order: 2; width: 100%; }
.c-cases__thumb { position: relative; width: 100%; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 15px; background: #222; }
.c-cases__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-cases__play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; padding: 0; transform: translate(-50%, -50%); border: 0; background: none; cursor: pointer; opacity: .8; filter: drop-shadow(1px 0 3px rgba(0, 0, 0, .3)); transition: opacity .2s; }
.c-cases__play:hover { opacity: 1; }
.c-cases__play img { width: 100%; height: 100%; }

@media (min-width: 1280px) {
  .c-cases__section { padding: 0 calc(240 * var(--u)); }
  .c-cases__inner { width: 100%; gap: calc(36 * var(--u)); padding-block: calc(70 * var(--u)); }

  .c-cases__head { height: calc(28 * var(--u)); margin-bottom: calc(24 * var(--u)); }
  .c-cases__title { position: relative; top: calc(-14.5 * var(--u)); font-size: calc(44 * var(--u)); line-height: calc(54 * var(--u)); white-space: nowrap; }

  .c-cases__card { flex-direction: row; direction: ltr; justify-content: center; align-items: flex-start; gap: calc(44 * var(--u)); padding: calc(24 * var(--u)); border-radius: calc(16 * var(--u)); }
  .c-cases__media { flex: none; order: 0; width: calc(620 * var(--u)); height: calc(700 * var(--u)); padding: 0; }
  .c-cases__thumb { height: calc(700 * var(--u)); aspect-ratio: auto; border-radius: calc(15 * var(--u)); }
  .c-cases__photo { inset: auto; top: 0; left: -34.25%; width: 168.51%; height: 100%; object-fit: fill; }
  .c-cases__play { top: 50%; left: 50%; width: calc(80 * var(--u)); height: calc(80 * var(--u)); transform: translate(-50%, -50%); }

  .c-cases__text { flex: 1 1 0; min-width: 0; direction: rtl; justify-content: center; align-items: flex-start; gap: calc(30 * var(--u)); height: calc(700 * var(--u)); padding-inline: calc(16 * var(--u)); }
  .c-cases__name { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
  .c-cases__name-1 { font-size: max(24px, calc(48 * var(--u))); line-height: 1.2; white-space: nowrap; }
  .c-cases__name-2 { margin-top: calc(-4 * var(--u)); margin-bottom: 0; font-size: max(26px, calc(50 * var(--u))); line-height: 1.2; white-space: nowrap; }
  .c-cases__name-1--black { margin-top: calc(-4 * var(--u)); font-size: max(26px, calc(50 * var(--u))); line-height: 1.2; }
  .c-cases__name-2--light { margin-top: calc(-4 * var(--u)); margin-bottom: 0; font-size: max(24px, calc(48 * var(--u))); line-height: 1.2; }
  .c-cases__story { width: 100%; padding-bottom: 0; font-size: max(16px, calc(23 * var(--u))); line-height: 1.75; white-space: normal; text-wrap: pretty; }
  .c-cases__br { display: none; }

  .c-cases__more { align-self: stretch; justify-content: flex-start; gap: calc(20 * var(--u)); padding: calc(4.89 * var(--u)) 0 calc(4.91 * var(--u)) calc(10 * var(--u)); font-size: max(16px, calc(22 * var(--u))); line-height: 1.2; }
  .c-cases__more-text { white-space: nowrap; font-weight: 400; }
  .c-cases__more--arrow-right { flex-direction: row-reverse; padding: calc(4.89 * var(--u)) calc(10 * var(--u)) calc(4.91 * var(--u)) 0; }
  .c-cases__arrow { width: calc(150 * var(--u)); height: calc(150 * var(--u)); margin-block: calc(-70 * var(--u)); }
}