/* =========================================================
   דף הבית – Ravid Aharon
   נבנה לפי העיצוב ב-Figma (1440, תוכן 1280, שוליים 80).
   כל הערכים נמדדו מהאתר המקורי. צבעים וגדלים מרכזיים מוגדרים כמשתנים.
   ========================================================= */

:root {
  --bg: #FAF8F5;            /* רקע הדף */
  --ink: #421F1C;           /* צבע טקסט וקווים ראשי */
  --header-ink: #3D1F1F;    /* טקסט כפתורי ההדר */
  --header-pill: #F2ECE6;   /* רקע כפתורי ההדר */
  --content: 1280px;        /* רוחב התוכן המקסימלי */
  --side-min: 40px;         /* שוליים מינימליים במסך צר (Laptop) */
  /* שוליים בצדדים: 80 ב-1440, גדלים במסך רחב, יורדים עד 24 במסך צר */
  --side: max(var(--side-min), calc((100% - var(--content)) / 2));

  --f-display: "Faculty Glyphic", serif;
  --f-body: "Inter", sans-serif;
}
/* בווינדוס פס הגלילה (כ-15) משאיר רוחב אי-זוגי → שוליים של חצי פיקסל וכל הדף מטושטש. מעגלים לפיקסל שלם */
@supports (width: round(down, 1.5px, 1px)) {
  :root { --side: round(down, max(var(--side-min), calc((100% - var(--content)) / 2)), 1px); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* סמן עכבר בעיצוב האתר (וקטורי; גרסת 2x למסכי Retina). נקודת הלחיצה בקצה החץ.
   קישורים וכפתורים שומרים על סמן היד הרגיל, כדי שיהיה ברור מה לחיץ */
html {
  cursor: url("../assets/img/cursor.svg") 1 1, auto;
  cursor: image-set(url("../assets/img/cursor.svg") 1x, url("../assets/img/cursor@2x.svg") 2x) 1 1, auto;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter:Regular", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, video, iframe { display: block; }
.w300 { font-family: "Inter:Light", sans-serif; font-weight: 300; }
.w600 { font-family: "Inter:Semi Bold", sans-serif; font-weight: 600; }
.w700 { font-family: "Inter:Bold", sans-serif; font-weight: 700; }
.fs16 { font-size: 16px; line-height: 20px; }
.w400 { font-family: "Inter:Regular", sans-serif; font-weight: 400; }

.page { position: relative; overflow-x: clip; }

/* תוכן ממורכז עד 1280 */
.wrap {
  position: relative;
  width: 100%;
  padding-inline: var(--side);
}

/* פסקה עם שבירות מכוונות: הרווח בין השורות זהה ל-Gap שבעיצוב */
p.lines {
  line-height: calc(var(--lh) + var(--gap));
  margin-block: calc(var(--gap) / -2);
  white-space: nowrap;
}

/* כותרת סקשן: קו + טקסט */
.section-title { display: flex; align-items: center; gap: 16px; }
.section-title img { width: 48px; height: 29px; }
.section-title h2 {
  font: 400 24px/31px "Faculty Glyphic:Regular", serif;
  white-space: nowrap;
}

/* ריבועי פינה (16) */
.sq {
  position: absolute;
  z-index: 2;
  width: 16px; height: 16px;
  background: var(--bg);
  border: 1px solid var(--ink);
}
.sq--tl { left: 0; top: 0; }
.sq--tr { right: 0; top: 0; }
.sq--bl { left: 0; bottom: 0; }
.sq--br { right: 0; bottom: 0; }

/* ================= הדר ================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: 72px;
  padding-inline: var(--side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: transform .35s ease, background .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled {
  background: rgba(250, 248, 245, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__nav { display: flex; gap: 24px; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--header-pill);
  color: var(--header-ink);
  font: 400 20px/24px "Inter:Regular", sans-serif;
  transition: background-image .2s ease;
}
.pill:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)); }

/* ================= Hero ================= */
.hero { position: relative; padding-bottom: 76px; }
.hero .wrap { padding-top: 120px; }
.hero__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 532px;
}
.hero__text {
  width: 648px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.hero__name { font: 400 40px/51px "Faculty Glyphic:Regular", serif; } /* 40 כמו שמות הפרויקטים (גובה שורה כמו Floral) */
.hero__role { font: 400 24px/31px "Faculty Glyphic:Regular", serif; white-space: pre; }
/* שורה 24 + רווח 16 */
.hero__intro { --lh: 24px; --gap: 16px; font: 400 20px "Inter:Regular", sans-serif; }
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 164px;
  height: 40px;
  border-radius: 8px;
  background: var(--ink);
  color: rgb(251, 248, 253);
  font: 400 20px/24px "Inter:Regular", sans-serif;
}
.hero__embed { flex: none; width: 537px; height: 532px; border: 0; } /* גודל אמיתי בכל מסך (js/fit.js), בלי zoom */
.hero__arrow {
  position: absolute;
  left: var(--side);
  top: 523px;
  width: 164px;
  height: 47px;
}

/* Design Skills */
.skills { margin-top: -2px; container-type: inline-size; } /* שלושת הכרטיסים כל עוד יש 1280 */
.skills__title { height: 103px; padding: 24px 0 32px; }
.skills__row { display: flex; gap: 36px; height: 149px; }
.skill { position: relative; flex: 1 1 0; min-width: 0; height: 149px; }
.skill__box {
  position: absolute;
  inset: 8px;
  border: 1px solid var(--ink);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.skill__title { font: 700 18px/21px "Inter:Bold", sans-serif; white-space: nowrap; }
/* שורה 20 + רווח 8 */
.skill__desc { --lh: 20px; --gap: 8px; font: 400 16px "Inter:Regular", sans-serif; }

/* ================= Projects ================= */
.project { position: relative; min-height: 800px; overflow: hidden; }
.project__tint { position: absolute; inset: 0; }
.project__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project__video--flip { transform: scaleX(-1); } /* כמו ב-Figma: היפוך לרוחב */
/* גובה 393 (אי-זוגי) ממורכז ב-800 נותן 203.5 → חצי פיקסל ומסגרות מטושטשות. פיקסל שקוף מתחת מעגל ל-203 */
.project-card, .sf-mockup, .rd-preview { margin-bottom: 1px; }
.project__row {
  position: relative;
  z-index: 1;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* כרטיס פרויקט */
.project-card {
  flex: 0 0 616px;
  width: 616px;
  height: 393px;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.project-card > * { flex-shrink: 0; }
.project-card__tags { font: 500 24px/29px "Inter:Medium", sans-serif; white-space: pre; }
/* שורה 20 + רווח 16 */
.project-card__desc { --lh: 20px; --gap: 16px; font-size: 20px; }
.project-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 40px;
  border-radius: 8px;
  font: 500 16px/20px "Inter:Medium", sans-serif;
}

/* StudioFlow */
.project--studioflow .project__tint { background: rgba(94, 113, 200, .4); }
.project--studioflow .project__video { opacity: .4; }
/* מוקאפ StudioFlow: המסכים מוקטנים, המסגרות אחידות בעובי 5 (כמו בכל הפרויקטים).
   ראש מסגרת המחשב מיושר לראש הכרטיס, ותחתית מסגרת הטלפון לתחתית הכרטיס:
   5 + 436.5 × קנה מידה + 5 = 393  →  קנה מידה = 383 / 436.5 */
.project--studioflow { --sf: 0.877434; }
/* כל המידות מעוגלות לפיקסל שלם כדי שהמסגרות והמסכים יהיו חדים (חצי פיקסל = טשטוש) */
.sf-mockup {
  position: relative;
  flex: 0 0 585px;                 /* 655.7 × קנה מידה + 10 */
  height: 393px;
}
/* מחשב: מסך 594×393 בקנה מידה, מסגרת 5 מבחוץ */
.sf-mockup__laptop {
  position: absolute; left: 0; top: 0;
  width: 531px;                    /* 594 × קנה מידה + 10 */
  height: 355px;                   /* 393 × קנה מידה + 10 */
  border: 5px solid rgb(33, 43, 89);
  border-radius: calc(16px * var(--sf) + 5px);
  overflow: hidden;
}
.sf-mockup__laptop img { width: 100%; height: 100%; }
/* טלפון: מסך 136×303 בקנה מידה, מסגרת 5 מבחוץ */
.sf-mockup__phone {
  position: absolute;
  left: 456px;                     /* 519.7 × קנה מידה */
  top: 117px;                      /* 393 − 276: תחתית הטלפון בתחתית הכרטיס */
  width: 129px;                    /* 136 × קנה מידה + 10 */
  height: 276px;                   /* 303 × קנה מידה + 10 */
  border: 5px solid rgb(50, 38, 94);
  border-radius: calc(16px * var(--sf) + 5px);
  background: rgb(33, 43, 89);
  overflow: hidden;
}
.sf-mockup__phone video { width: 100%; height: 100%; object-fit: cover; }
.project-card--studioflow { background: rgba(251, 248, 253, .72); color: rgb(50, 38, 94); }
.sf-name { font: 700 40px/50px "Google Sans Code:Bold", sans-serif; white-space: nowrap; }
.sf-name__a { color: rgb(50, 38, 94); }
.sf-name__b { color: rgb(94, 113, 200); }
.project-card--studioflow .project-card__tags { color: rgb(94, 113, 200); }
.project-card--studioflow .project-card__desc { font-family: "Inter:Regular", sans-serif; font-weight: 400; color: rgb(50, 38, 94); }
.project-card--studioflow .project-card__btn { background: #5869C2; color: rgb(245, 247, 254); }

/* Floral */
.project--floral .project__tint { background: rgba(234, 219, 212, .6); }
.project--floral .project__video { opacity: .5; }
/* במסך צר רק השטח הריק סביב הטלפון מצטמצם (הטלפון נשאר באותו גודל, באותו מיקום יחסי) */
.fl-phone-wrap { position: relative; flex: 0 1 588px; min-width: 409px; height: 516px; }
/* טלפון Floral: מסך 231×517, מסגרת 5 מבחוץ (אחידה עם שאר הפרויקטים) */
.fl-phone {
  position: absolute; left: 28.5714%; top: -6px; /* 168 מתוך 588 */ width: 241px; height: 527px;
  border: 5px solid rgb(89, 33, 40);
  border-radius: 39px; background: rgb(89, 33, 40); overflow: hidden;
}
.fl-phone video { width: 100%; height: 100%; object-fit: cover; }
.project-card--floral { background: rgba(255, 255, 255, .72); color: var(--ink); }
.fl-name { font: 400 40px/51px "Faculty Glyphic:Regular", serif; }
.project-card--floral .project-card__tags { color: rgb(183, 24, 50); }
.project-card--floral .project-card__desc { font-family: "Inter:Light", sans-serif; font-weight: 300; color: var(--ink); }
.project-card--floral .project-card__btn { background: rgb(183, 24, 50); color: rgb(242, 233, 226); }

/* RaviD.esign */
.project--ravidesign .project__video { opacity: .8; }
.project--ravidesign .project__tint { background: rgba(193, 187, 174, .35); z-index: 0; }
/* המסך עם המסגרת בגובה הכרטיס שלידו: 393 × קנה מידה + 10 = 393. מסגרת 5 (אחידה) */
.project--ravidesign { --rd: 0.974555; }
.rd-preview {
  position: relative;
  flex: 0 0 589px;                 /* 594 × קנה מידה + 10, מעוגל לפיקסל שלם */
  height: 393px;
  border: 5px solid rgb(178, 150, 128);
  border-radius: calc(16px * var(--rd) + 5px);
  background: rgb(243, 237, 234);
  overflow: hidden;
}
/* תוכן המסך (תמונה + באנר) בקנה מידה; טקסט נשאר וקטורי */
/* השכבה הירוקה ממלאת את כל המסך עד המסגרת; רק הטקסט בקנה מידה */
.rd-preview__scale { position: absolute; inset: 0; }
.rd-preview img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5;
  filter: blur(3px);
  transform: scale(1.04); /* קצוות הטשטוש (שקופים) יוצאים מחוץ למסגרת, בלי פס בהיר */
}
/* השכבה הירוקה מכסה את כל המסך */
.rd-preview__banner {
  position: absolute; inset: 0;
  background: rgba(235, 227, 211, .5);
  display: flex; align-items: center; justify-content: center;
}
.rd-preview__banner::before {
  content: ""; position: absolute; inset: 0; background: rgba(152, 167, 150, .4);
}
.rd-preview__banner span {
  position: relative;
  transform: scale(var(--rd));
  font: italic 300 48px/58px "Inter:Light Italic", sans-serif; /* לפי הדוגמה: כ-66% מרוחב המסך */
  text-transform: uppercase;
  color: rgb(67, 81, 65);
  white-space: nowrap;
}
.project-card--ravidesign { background: rgba(255, 255, 255, .72); color: rgb(44, 66, 42); }
.rd-name { font: 400 32px/38px "Bruno Ace SC:Regular", sans-serif; }
.project-card--ravidesign .project-card__desc { font-family: "Inter:Light", sans-serif; font-weight: 300; }
.project-card__btn--soon {
  background: rgba(192, 201, 191, .7);
  border: 1px solid rgba(44, 66, 42, .31);
  font: italic 500 16px/20px "Inter:Medium Italic", sans-serif;
  color: rgba(44, 66, 42, .65); /* מעט כהה יותר, עדיין נראה לא פעיל */
  white-space: nowrap;
}

/* קווים מפרידים */
.divider {
  position: relative;
  z-index: 5;
  height: 0;
  pointer-events: none;
}
.divider::before,
.divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(var(--side) + 48px);
  top: -1px;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--ink) 0 8px, transparent 8px 16px);
}
/* המשך הקו מימין לעיגול, ברוחב השוליים (80 ב-1440) */
.divider::after {
  left: auto;
  right: 0;
  width: var(--side);
}
.divider__dot {
  position: absolute;
  right: var(--side);
  top: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  /* כפתור: לחיצה גוללת לסקשן שמתחת (js/header.js) */
  pointer-events: auto;
  border: 0;
  padding: 0;
  transition: background-image .2s ease;
}
/* מעבר עכבר / לחיצה: בדיוק הגוון של כפתורי ההדר (About) במעבר עכבר – F2ECE6 + הכהיה 4% */
.divider__dot:hover, .divider__dot:active {
  background-color: var(--header-pill);
  background-image: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
}
.divider__dot img { width: 11.073px; height: 19.3075px; transform: rotate(90deg); }

/* ================= About ================= */
.about { position: relative; padding-block: 64px; }
.about__row {
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.about__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 56px; margin-bottom: 1px; } /* גובה 479 ממורכז ב-480 → חצי פיקסל; מעגל לשלם */
.about__paras { display: flex; flex-direction: column; gap: 32px; }
/* שורה 24 + רווח 8 */
.about__para { --lh: 24px; --gap: 8px; font: 400 20px "Inter:Regular", sans-serif; }
/* האוסף מעוגן מימין (471 מהקצה). במסך צר מצטמצם רק השטח הריק שמשמאלו (132 ב-1440) */
.about__hobbies { position: relative; flex: 0 1 603px; min-width: 471px; height: 480px; }
.hobbies__title { padding-left: calc(100% - 471px); }
.hobbies { position: absolute; left: calc(100% - 471px); top: 71px; width: 508px; height: 410px; }
.polaroid {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: rotate(var(--r));
}
.polaroid__clip { position: absolute; inset: 0; overflow: hidden; opacity: .8; }
.polaroid__clip img {
  position: absolute;
  left: var(--ix);
  top: var(--iy);
  width: var(--iw);
  height: var(--ih);
  max-width: none;
}
.polaroid::after {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); pointer-events: none;
}
.hobby-sq {
  position: absolute; z-index: 1;
  width: 12px; height: 12px;
  background: var(--bg);
  border: 1px solid var(--ink);
}

/* ================= Let's Talk + Footer ================= */
.contact { position: relative; }
.contact__card { position: relative; height: 255px; padding: 8px; }
.contact__card .sq--tl, .contact__card .sq--tr { top: 1px; }
.contact__box {
  height: 239px;
  display: flex;
  justify-content: space-between;
  padding: 32px 32px 32px 33px;
  border: 1px solid var(--ink);
  background: rgba(242, 233, 226, .7);
}
.contact__col { width: 599px; display: flex; flex-direction: column; gap: 32px; }
.contact__text { display: flex; flex-direction: column; gap: 24px; }
/* שורה 24 + רווח 8 */
.contact__text p.contact__lines { --lh: 24px; --gap: 8px; line-height: calc(var(--lh) + var(--gap)); }
.contact__text p { font: 400 20px/24px "Inter:Regular", sans-serif; white-space: nowrap; }
.contact__text p.w600 { font-family: "Inter:Semi Bold", sans-serif; font-weight: 600; }
.contact__list {
  /* מיושרת לקצה השמאלי של הקו ליד Hobbies: 471 מהקצה הימני של התוכן, פחות 41 של המסגרת והריווח */
  width: 430px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* האייקונים ממורכזים על ציר אחד; הטקסט 8 מהאייקון הרחב (Profile: 20 בתוך מסגרת 24, כלומר 2 מכל צד) → 8 − 2 = 6 */
.contact__list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 20px/24px "Inter:Regular", sans-serif;
}
.contact__list li > :last-child { flex: 1 1 auto; }
.contact__list img { width: 24px; height: 24px; }

.pill-h, .pill-v {
  position: absolute; z-index: 2;
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 8px;
}
.pill-h { width: 32px; height: 16px; left: calc(50% - 17px); }
@supports (width: round(down, 1.5px, 1px)) { .pill-h { left: round(down, calc(50% - 17px), 1px); } } /* פיקסל שלם = קו חד */
.pill-h--top { top: 1px; }
.pill-h--bottom { bottom: 0; }
.pill-v { width: 16px; height: 32px; top: 112px; }
.pill-v--left { left: 0; }
.pill-v--right { right: 0; }

.footer { padding-block: 64px 24px; }
.footer__row { display: flex; align-items: center; gap: 8px; height: 24px; }
.footer__row img { width: 24px; height: 24px; }
.footer__row p { font: 300 16px/20px "Inter:Light", sans-serif; white-space: pre-wrap; }

/* =========================================================
   נגישות (WCAG 2.2 AA) – בלי שינוי בעיצוב הרגיל
   ========================================================= */

/* פוקוס גלוי רק בניווט במקלדת (לא בלחיצת עכבר) */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* יעדי גלילה (הסקשנים) מקבלים פוקוס בלי מסגרת */
[tabindex="-1"]:focus { outline: none; }

/* "דלג לתוכן": מוסתר, ומופיע רק בלחיצת Tab הראשונה */
.skip-link {
  position: fixed; z-index: 1100; left: 16px; top: 16px;
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  border-radius: 6px; background: var(--header-pill); color: var(--header-ink);
  font: 400 20px/24px "Inter:Regular", sans-serif;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* אלמנט שמקבל פוקוס לא נכנס מתחת להדר */
html { scroll-padding-top: 96px; }

/* כפתור השהיה לסרטונים: קטן, עדין, באותה פינה בכל הפרויקטים */
.video-toggle {
  position: absolute; z-index: 2;
  left: var(--side); bottom: 24px;
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(250, 248, 245, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--ink);
  transition: background-image .2s ease;
}
.video-toggle:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)); }
.video-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.video-toggle__play { display: none; }
.video-toggle.is-paused .video-toggle__play { display: block; }
.video-toggle.is-paused .video-toggle__pause { display: none; }

/* הפחתת תנועה: בלי גלילה חלקה ובלי אנימציות (הסרטונים נעצרים ב-media.js) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* סמן: החץ של האתר בכל מקום, גם על כפתורים וקישורים */
a[href], button { cursor: inherit; }
/* היד מופיעה רק על המסכים (המחשב והטלפונים), שמובילים לפרויקט. נקודת הלחיצה בקצה האצבע */
a.sf-mockup__laptop, a.sf-mockup__phone, a.fl-phone {
  cursor: url("../assets/img/cursor-hand.svg") 9 1, pointer;
  cursor: image-set(url("../assets/img/cursor-hand.svg") 1x, url("../assets/img/cursor-hand@2x.svg") 2x) 9 1, pointer;
}

/* מעבר עכבר: הכפתור עצמו מתכהה מעט, כמו כפתורי ההדר.
   בכרטיס פרויקט: עמידה בכל מקום בכרטיס מכהה את הכפתור שבו. על המסכים אין הכהיה */
.btn-dark, .project-card__btn { transition: background-image .2s ease; }
/* ההכהיה רק ברקע (שכבה שקופה מעליו), הטקסט נשאר באותו גוון. הכהיה יחסית:  צבע כהה מאבד פחות בהירות בפועל, לכן בכפתורים בצבע מכהים יותר כדי שזה יורגש כמו בהדר */
.project-card:hover .project-card__btn,
.project-card:focus-visible .project-card__btn { background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)); }
.btn-dark:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); }
.project-card__btn--soon { background-image: none !important; } /* לא פעיל: בלי תגובה */

/* =========================================================
   Laptop (עד 1439): שוליים יורדים עד 40, מסגרת אחת ל-Design Skills כשאין מקום,
   ורווח של 40 לפחות בין מדיה לטקסט (ההקטנות עצמן ב-js/fit.js)
   ========================================================= */
.skills__deco { display: none; }
.project__row { column-gap: 40px; }
/* מסגרת אחת רק כששלושת הכרטיסים כבר לא נכנסים (תוכן צר מ-1280) */
@media (min-width: 1260px) {
@container (max-width: 1279.5px) {
  .skills__row {
    position: relative;
    height: 149px;
    padding: 8px;
    gap: 0;
  }
  /* המסגרת האחת, באותו מרחק מהריבועים כמו בכרטיסים המקוריים */
  .skills__row::before {
    content: ""; position: absolute; inset: 8px;
    border: 1px solid var(--ink); pointer-events: none;
  }
  .skills__deco { display: block; }
  .skills__row .pill-v { top: calc(50% - 16px); }
  /* שלושת הכישורים בתוך המסגרת, מופרדים ברווח בלבד */
  .skills__row { display: flex; justify-content: space-between; }
  .skill { flex: 0 0 auto; height: auto; }
  .skill > .sq { display: none; }
  .skill__box { position: static; inset: auto; border: 0; padding: 25px 17px; } /* 8 + 1 + 24 / 16 כמו במקור */
}
}

/* =========================================================
   Tablet (744–1259): מה שהיה זה לצד זה עובר אחד מתחת לשני, בגודל המקורי.
   טקסטים, כרטיסים ומסגרות לא משתנים. סקשנים של טקסט מיושרים לשמאל,
   ובפרויקטים המדיה והכרטיס ממורכזים מעל סרטון שממלא את כל הסקשן
   ========================================================= */
@media (max-width: 1259px) {
  /* Hero: טקסט, מתחתיו האיור, ומתחתיו החץ */
  .hero__row { flex-direction: column; height: auto; gap: 64px; }
  .hero__embed { flex: none; }
  .hero__arrow { position: static; display: block; margin-top: 40px; }

  /* Design Skills: שלושת הכרטיסים המקוריים אחד מתחת לשני */
  .skills__row { flex-direction: column; height: auto; gap: 24px; }
  .skill { flex: none; height: 149px; }

  /* פרויקטים: מדיה למעלה, כרטיס מתחת, ממורכזים. הסרטון ממלא את כל הגובה */
  .project__row { flex-direction: column; justify-content: center; align-items: center; row-gap: 40px; padding-block: 96px; }
  .project__row > * { flex: none; }
  .sf-mockup { width: 585px; }
  .rd-preview { width: 589px; }
  .fl-phone-wrap { width: 588px; }
  .fl-phone { left: calc(50% - 121px); } /* הטלפון (241 + מסגרת) בדיוק במרכז, על פיקסל שלם */

  /* About: טקסט, ומתחתיו התחביבים, מיושרים לשמאל */
  .about__row { flex-direction: column; align-items: flex-start; gap: 64px; }
  .about__text { flex: none; margin-bottom: 0; }
  .about__hobbies { flex: none; width: 508px; min-width: 0; height: 481px; }
  .hobbies__title { padding-left: 0; }
  .hobbies { left: 0; }

  /* Let's Talk: באותה מסגרת, טקסט ומתחתיו פרטי הקשר */
  .contact__card { height: auto; }
  .contact__box { height: auto; flex-direction: column; gap: 40px; }
  .pill-v { top: calc(50% - 16px); }
}

/* =========================================================
   Mobile (עד 743, עיצוב ב-375): שוליים 20, טקסט גוף 16, שבירת שורות אוטומטית.
   הסדר כמו בטאבלט; המדיה מוקטנת בפרופורציות לרוחב המסך (js/fit.js)
   ========================================================= */
@media (max-width: 743px) {
  :root { --side-min: 20px; }
  html { scroll-padding-top: 80px; }

  /* שבירת השורות הידנית לא נכנסת ב-335: הטקסט נשבר לרוחב המסך, גובה שורה 1.5 */
  p.lines, .contact__text p.contact__lines { white-space: normal; margin-block: 0; line-height: 24px; }
  p.lines br { display: none; }

  /* הדר: 56, כפתורים 44 (מינימום מגע של Apple), טקסט 16 */
  .site-header { height: 56px; }
  .pill { height: 44px; font-size: 16px; line-height: 20px; }

  /* Hero */
  .hero { padding-bottom: 48px; }
  .hero .wrap { padding-top: 96px; }
  .hero__row { gap: 40px; }
  .hero__text { width: auto; gap: 24px; }
  .hero__role { font-size: 20px; line-height: 26px; white-space: normal; }
  .hero__intro { font-size: 16px; }
  .btn-dark { height: 44px; font-size: 16px; line-height: 20px; }
  .hero__arrow { margin-top: 32px; }

  /* Design Skills: כרטיסים ברוחב מלא, גובה לפי התוכן */
  .skills__title { height: auto; padding: 48px 0 24px; }
  .skills__row { gap: 16px; }
  .skill { height: auto; padding: 8px; }
  .skill__box { position: static; inset: auto; border: 1px solid var(--ink); padding: 24px 16px; }
  .skill__desc { font-size: 16px; }

  /* פרויקטים */
  .project__row { padding-block: 64px; row-gap: 32px; }
  .fl-phone-wrap { min-width: 0; } /* 588 בקנה מידה כמו שאר המסכים (js/fit.js) */
  .project-card { width: 100%; height: auto; padding: 24px; gap: 24px; margin-bottom: 0; }
  .project-card__tags { font-size: 14px; line-height: 20px; }
  p.project-card__desc { font-size: 14px; line-height: 21px; } /* 14 × 1.5 */
  .project-card__btn { height: 44px; }

  /* About */
  .about { padding-block: 48px; }
  .about__row { gap: 48px; }
  .about__text { gap: 24px; }
  .about__paras { gap: 16px; }
  .about__para { font-size: 16px; }
  .about__hobbies { width: 100%; height: auto; }
  .hobbies { position: relative; left: 0; top: 0; margin-top: 24px; }

  /* Let's Talk */
  .contact__box { padding: 24px 20px; gap: 32px; }
  .contact__col { width: auto; gap: 24px; }
  .contact__text p { font-size: 16px; white-space: normal; }
  .contact__list { width: auto; gap: 16px; }
  .contact__list li { font-size: 16px; line-height: 24px; }

  /* פוטר */
  .footer { padding-block: 48px 24px; }
  .footer__row { height: auto; align-items: flex-start; }
  .footer__row p { font-size: 14px; line-height: 20px; white-space: normal; }

  /* כפתור השהיה: נראה 32, אזור לחיצה 44 */
  .video-toggle { bottom: 16px; }
  .video-toggle::before { content: ""; position: absolute; inset: -6px; }
}

/* Mobile בלבד: שם בראש הדף 32, שמות הפרויקטים 20 (גובה שורה באותו יחס כמו בדסקטופ) */
@media (max-width: 743px) {
  .hero__name { font-size: 32px; line-height: 41px; }
  .sf-name { font-size: 20px; line-height: 25px; }
  .fl-name { font-size: 20px; line-height: 26px; }
  .rd-name { font-size: 20px; line-height: 24px; }
}

/* Mobile בלבד: כפתורי ההדר צמודים לשמאל, 8 ביניהם */
@media (max-width: 743px) {
  .site-header { justify-content: flex-start; gap: 8px; }
  .site-header__nav { gap: 8px; }
}

/* מסכים צרים במיוחד (360 ומטה): "Let's design / something together (:" נשבר באמצע ולא משאיר מילה תלויה */
@media (max-width: 374px) {
  .contact__text p.w600 { text-wrap: balance; }
}

/* Mobile בלבד: הדפדפן מאזן את השורות האחרונות בכל פסקה, כך שלא נשאר רווח גדול בסוף שורה לפני הסיום */
@media (max-width: 743px) {
  main p, footer p { text-wrap: pretty; }
}

/* Mobile בלבד: Design Skills במסגרת אחת לאורך (כמו המסגרת האחת ב-Laptop),
   ריבועים בפינות וקפסולות באמצע כל צלע, שלושת הכישורים בלי קווים ביניהם */
@media (max-width: 743px) {
  .skills__row { position: relative; padding: 8px; gap: 0; }
  .skills__row::before {
    content: ""; position: absolute; inset: 8px;
    border: 1px solid var(--ink); pointer-events: none;
  }
  .skills__deco { display: block; }
  .skills__row .pill-v { top: calc(50% - 16px); }
  .skill { padding: 0; }
  .skill > .sq { display: none; }
  .skill__box { border: 0; padding: 12px 17px; }
  .skill:first-of-type .skill__box { padding-top: 25px; }
  .skill:last-of-type .skill__box { padding-bottom: 25px; }
}

/* Mobile בלבד: בלי החץ למטה ב-Hero */
@media (max-width: 743px) {
  .hero__arrow { display: none; }
}

/* Mobile בלבד: תגיות StudioFlow ב-14 צריכות ניגודיות 4.5:1 (טקסט רגיל) – אותו כחול, כהה יותר */
@media (max-width: 743px) {
  .project-card--studioflow .project-card__tags { color: #4251A3; }
}

/* כרטיס/מסך של פרויקט שהדף שלו עוד לא קיים: נראה אותו דבר, לא לחיץ ובלי תגובת מעבר עכבר */
a.is-disabled { pointer-events: none; }

/* Tablet (iPad) בלבד: האיור ממורכז ברוחב התוכן. בנייד הוא נשאר כפי שאושר */
@media (min-width: 744px) and (max-width: 1259px) {
  .hero__embed { align-self: center; }
}

/* Tablet (iPad) בלבד: שלושת סקשני הפרויקטים באותו גובה, לפי הגבוה (Floral: 96 + 516 + 40 + 393 + 96).
   התוכן נשאר ממורכז, וסרטוני הרקע בגודל זהה */
@media (min-width: 744px) and (max-width: 1259px) {
  .project, .project__row { min-height: 1142px; }
  /* מרווחים בפיקסלים שלמים (בלי חצי פיקסל שמטשטש מסגרות): 1142 − 826 = 316, ו-1142 − 950 = 192 */
  .project-card, .sf-mockup, .rd-preview { margin-bottom: 0; }
  .fl-phone-wrap { height: 517px; }
  /* מרכוז לרוחב בפיקסל שלם גם כשרוחב המסך אי-זוגי */
  .project__row { align-items: flex-start; }
  .sf-mockup { --w: 585px; } .rd-preview { --w: 589px; } .fl-phone-wrap { --w: 588px; } .project-card { --w: 616px; }
  .project__row > :not(.video-toggle) { margin-left: calc((100% - var(--w)) / 2); }
}
@supports (width: round(down, 1.5px, 1px)) {
  @media (min-width: 744px) and (max-width: 1259px) {
    .project__row > :not(.video-toggle) { margin-left: round(down, calc((100% - var(--w)) / 2), 1px); }
  }
}

/* דסקטופ ו-Laptop: כל סקשן פרויקט בגובה המסך, כך שרואים גם את הקו המקווקו העליון וגם את התחתון
   עם העיגולים (רדיוס 24): גובה החלון פחות 64. לכל היותר 800 (כמו בעיצוב), לכל הפחות 560.
   גובה זוגי – כדי שהתוכן הממורכז ייפול על פיקסל שלם */
@media (min-width: 1260px) {
  .project, .project__row { min-height: clamp(560px, calc(100vh - 64px), 800px); }
}
@supports (height: round(down, 1.5px, 2px)) {
  @media (min-width: 1260px) {
    .project, .project__row { min-height: clamp(560px, round(down, calc(100svh - 64px), 2px), 800px); }
  }
}