/* ===== Global ===== */

html,
body {
  margin: 0;
  padding: 0;
  direction: rtl;
  background: #111;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
}

.full-height {
  height: 100vh;
}

/* ===== Navbar ===== */

.myNavBar {
  font-family: 'DM Sans', sans-serif;
  padding: 12px 24px;
}

.myNavBar .navbar-brand {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.myNavBar .navbar-nav {
  margin-left: auto;
  margin-right: 0;
  gap: 12px;
}

.myNavBar .nav-link {
  font-size: 1rem;
  font-weight: 500;
  color: #d0d0d0;
  transition: color 0.2s ease;
}

.myNavBar .nav-link:hover,
.myNavBar .nav-link.active {
  color: #ffffff;
  font-weight: 600;
}

/* ===== Typography ===== */

.h1-table {
  display: inline-block;
}

.about-text {
  white-space: pre-line;
}

.about-text {
  line-height: 1.5;
  max-height: calc(1.5em * 10);   /* 3 שורות */
  overflow-y: auto;
}

/* חשוב ל-iOS כדי לקבל גלילה עם אינרציה */
.about-text {
  -webkit-overflow-scrolling: touch;
}

.handwriting-hebrew {
  font-family: "Playpen Sans Hebrew", cursive;
  font-optical-sizing: auto;
  /* font-weight: 400; */
  font-style: normal;
}

.card-text {
  font-size: 1.3rem;
  color: #ffffff;
}  



/* ===== Carousel ===== */

.rb-carousel-item {
  text-align: center;
  padding: 20px 0;
}

/* keep default images constrained if you want */
.default-image {
  max-height: 75vh;
  max-width: 90%;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 1rem 0;
}

/* MAIN CAROUSEL: full-bleed */
#mainCarousel .carousel-image {
  display: block;
  max-width: 90%;
  max-height: 75vh;
  /* limit height relative to viewport */
  width: auto;
  height: auto;
  object-fit: contain;
  /* keep full image, no crop */
  margin: 0 auto;
}

#smallMainCarousel .carousel-image {
  display: block;
  max-width: 90%;
  max-height: 75vh;
  /* limit height relative to viewport */
  width: auto;
  height: auto;
  object-fit: contain;
  /* keep full image, no crop */
  margin: 0 auto;
}

#memberCarousel .carousel-image {
  display: block;
  max-width: 90%;
  max-height: 50vh;
  /* limit height relative to viewport */
  width: auto;
  height: auto;
  object-fit: contain;
  /* keep full image, no crop */
  margin: 0 auto;
}


/* ===== Main Carousel Frame ===== */

.main-carousel-frame {
  display: inline-block;
  /* shrink-wrap to image width */
}



/* ===== Carousel Controls To make arrows always visiable===== */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  /* רקע כהה חצי שקוף */
  border-radius: 50%;
  padding: 20px;
}




/* ===== Footer ===== */

footer {
  text-align: center;
  padding: 10px;
}
footer a {
  text-decoration: none;
  color: rgba(255,255,255,.65) !important;
}

footer a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* ===== Photo Boxes ===== */

.photo-box {
  width: 140px;
}

/*id unified square */

.photo-box-sqr {
  width: 280px;
  /* דסקטופ */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.5rem;
  margin: 0 auto;
}

.photo-box-sqr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin-top: 6px;
  border-radius: 0.5rem;
}

/* ===== Cards Hover Effect ===== */

.card {
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .4);
}


.card:hover .card-title {
  color: #0d6efd;        /* או לבן/אפור בהיר אם אתה רוצה יותר סולידי */
  text-decoration: underline;
}

/* ===== For Mobile so no Hovver ===== */

/* כשנכנסים לכרטיס עם מקלדת / פוקוס */
.col a:focus-visible .card,
.col a:focus .card {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .4);
}

/* שינוי הכותרת */
.col a:focus-visible .card-title,
.col a:focus .card-title {
  color: #0d6efd;
  text-decoration: underline;
}

/* בזמן לחיצה (טאצ' בפועל) */
.col a:active .card,
.col a:active .card-title {
  /* ב-active אפשר להשאיר אותו אפקט או אפילו חזק יותר */
}

/* Same effect as hover */
.card.in-view {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .4);
}

.card.in-view .card-title {
  color: #0d6efd;
  text-decoration: underline;
}

/* ===== Responsive ===== */

@media (max-width: 576px) {
  .carousel-image {
    max-width: 95%;
    max-height: 95%;
  }

  .photo-box-sqr {
    width: 220px;
    /* מובייל */
  }
}


/* ===== Exhibition Page Grid View ===== */
.rb-thumb.active img {
  outline: 3px solid #6c757d;
  /* אפור bootstrap-ish */
  outline-offset: 2px;
}


.rb-thumb img {
  cursor: pointer;
}

/* exhibition modal */

.rb-modal-90 {
  width: 90vw;
  max-width: 90vw;
}

#photoModal .modal-content {
  border: 0;
}

#photoModal .modal-body {
  height: 90vh;
}

#photoModal #modalImg {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

/* Fit travel and project photos to the viewport without cropping or stretching. */
#photoModal.project-photo-modal .modal-dialog {
  width: 96vw;
  max-width: 96vw;
  height: 96vh;
  height: 96dvh;
  margin: 2vh auto;
  margin: 2dvh auto;
  min-height: 0;
}

#photoModal.project-photo-modal .modal-content {
  height: 100%;
  max-height: 100%;
}

#photoModal.project-photo-modal .modal-body {
  flex: 1 1 0;
  overflow: hidden;
  padding: 0;
  height: auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#photoModal.project-photo-modal #modalImage {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#photoModal.project-photo-modal .modal-footer {
  flex-shrink: 0;
}

/* Optional: hover effect */
.rb-thumb img {
  transition: transform .15s ease, opacity .15s ease;
}

.rb-thumb:hover img {
  transform: scale(1.02);
}


/* exhibition page grid view */
/* Masonry via CSS columns (real masonry, no fake rows) */
.masonry-wrapper{
  width: 100%;
  display: flex;
  justify-content: center;
}

.masonry{
  display: inline-block;   /* הכי חשוב: שלא יתפוס 100% */
  width: auto;             /* לוודא שאין 100% בירושה */
  max-width: 100%;

  column-width: 260px;
  column-gap: 16px;

  /* אופציונלי: אם RTL “מבלגן” לך את תחילת העמודות */
  /* direction: ltr; */
}

/* ===== Few items: perfect centering ===== */
.masonry.few{
  display: grid;
  grid-template-columns: repeat(auto-fit, 260px);
  gap: 16px;
  justify-content: center;

  /* allow up to 3 centered columns */
  width: min(100%, calc(3 * 260px + 2 * 16px));
}


/* ===== Many items: real masonry ===== */

.masonry.many{
  display: inline-block;
  column-width: 260px;
  column-gap: 16px;
  max-width: 100%;
} 
/*
.masonry.many{
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;

  width: 100%;
  max-width: 1200px; /* optional limit *//*
}
*/

.masonry-item{
  break-inside: avoid;
  margin: 0 0 16px;
}

.masonry-item .rb-thumb{
  display: block;
  width: 100%;
}

.masonry-item img{
  display: block;
  width: 100%;
  height: auto;
}

/* Wrap biography text beside the portrait and continue below it. */
.about-page {
  max-width: 960px;
  text-align: start;
}

.about-contact {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  scroll-margin-top: 6rem;
}

.about-biography {
  display: flow-root;
  line-height: 1.7;
}

.about-portrait {
  float: right;
  width: min(40%, 360px);
  height: auto;
  margin: 0 0 2rem 3rem;
}

[dir="rtl"] .about-portrait {
  float: left;
  margin: 0 3rem 2rem 0;
}

@media (max-width: 575.98px) {
  .about-portrait,
  [dir="rtl"] .about-portrait {
    float: none;
    display: block;
    width: min(100%, 360px);
    margin: 0 auto 1.5rem;
  }
}

/* Home viewer uses the same contained image presentation as gallery modals. */
#mainCarousel.home-photo-viewer {
  width: 96vw;
  height: 96vh;
  height: 96dvh;
  margin: 0 auto 2rem;
  display: flex;
  flex-direction: column;
}

#mainCarousel.home-photo-viewer .carousel-inner {
  flex: 1 1 0;
  min-height: 0;
}

#mainCarousel.home-photo-viewer .carousel-item,
#mainCarousel.home-photo-viewer .carousel-item > div,
#mainCarousel.home-photo-viewer .main-carousel-frame {
  width: 100%;
  height: 100%;
}

#mainCarousel.home-photo-viewer .carousel-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.home-photo-controls {
  flex-shrink: 0;
  padding: 1rem;
}