/* ==========================================================================
   פה ושם: "קצת עליי" עם לוח שעם (v6.4)
   הטקסט מיושר לשני הצדדים ותופס 2/3 מימין; בשליש השמאלי לוח שעם עם פולרואידים נעוצים.
   הלוח מוצג רק במסכים רחבים (מ-1024 פיקסלים), כמו שאר הפולרואידים באתר.
   ========================================================================== */
.about-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: stretch; margin-bottom: 2rem; }
.about-text { min-width: 0; }
.about-bio { max-width: none; margin-bottom: 0; text-align: justify; text-justify: inter-word; hyphens: auto; }
html[lang="en"] .about-bio { hyphens: auto; }

/* ---------- the board ---------- */
.corkboard {
  position: relative; min-height: 460px; border-radius: 10px; padding: 14px;
  background: linear-gradient(135deg, #8d5c35 0%, #6f4426 50%, #5e3920 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 24px -12px rgba(6, 23, 46, .45), 0 2px 4px rgba(6, 23, 46, .12);
}
.corkboard-surface {
  position: absolute; inset: 14px; border-radius: 3px; overflow: hidden;
  background: #c08c5a url("assets/cork.jpg") repeat;
  background-size: 300px 300px;
  box-shadow: inset 0 0 0 1px rgba(60, 30, 10, .35), inset 0 3px 12px rgba(50, 25, 8, .55), inset 0 -2px 8px rgba(50, 25, 8, .3);
}
.corkboard-surface::before { /* soft light falloff, like a board on a wall */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 235, 200, .18), transparent 55%), radial-gradient(ellipse at 80% 95%, rgba(40, 20, 5, .22), transparent 60%);
}

/* ---------- pinned polaroids ---------- */
.cork-card {
  position: absolute; margin: 0; width: var(--w, 46%); padding: 7px 7px 0; background: #fffdf8; border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 6px 14px -6px rgba(40, 20, 5, .55);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  animation: cork-pin .9s cubic-bezier(.2, .8, .25, 1) both;
}
.cork-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #e9e2d4; }
.cork-card figcaption {
  font-family: var(--cork-font, 'Caveat', cursive); color: var(--cork-ink, #4a2e18);
  font-size: clamp(.8rem, 1.05vw, 1rem); line-height: 1.15; text-align: center; padding: 0 .15rem; margin: .35rem 0 .45rem;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 2.3em;
}
/* the pushpin */
.cork-card::before {
  content: ''; position: absolute; top: -7px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fff 0 2px, var(--pin, #d23b30) 3px 62%, rgba(0, 0, 0, .25) 100%);
  box-shadow: 1px 3px 3px rgba(0, 0, 0, .35);
  animation: cork-pin-head .9s .55s both;
}
.cork-card::after { /* the pin's shadow on the photo */
  content: ''; position: absolute; top: 4px; left: 50%; width: 8px; height: 3px; margin-left: -1px; border-radius: 50%; background: rgba(0, 0, 0, .25); filter: blur(1px);
  animation: cork-pin-head .9s .55s both;
}
@keyframes cork-pin {
  0% { opacity: 0; transform: translate(-50%, -64%) rotate(calc(var(--r, 0deg) * 2.2)) scale(1.12); box-shadow: 0 22px 30px -10px rgba(40, 20, 5, .35); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); }
}
@keyframes cork-pin-head { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: scale(1); } }
.cork-card.is-buried { filter: brightness(.94); }

@media (prefers-reduced-motion: reduce) {
  .cork-card, .cork-card::before, .cork-card::after { animation: none; }
}

/* the board is decorative: only on wide screens, like the other polaroids */
@media (max-width: 1023px) {
  .about-main { grid-template-columns: 1fr; }
  .corkboard { display: none; }
}
@media (max-width: 640px) {
  .about-bio { text-align: start; }
}
body.high-contrast .corkboard, body.grayscale-mode .corkboard { filter: grayscale(.3); }