/* Yuva Portfolio - Project-Specific Gallery Layouts */
/* Matching exact Figma designs */

/* ===== Bein Lebein Gallery Layout ===== */
/* Exact Figma layout: 4-column grid for posts, then popup posts, videos, mockups */

.gallery--bein-lebein {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 60px;
}

/* Section 1: Posts Grid - 4 columns x 3 rows */
.bein-lebein-posts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.bein-lebein-posts .gallery-item {
  aspect-ratio: 300 / 392;
  overflow: hidden;
}

.bein-lebein-posts .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section 2: Popup Posts - Overlapping layout */
.bein-lebein-popup-posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.bein-lebein-popup-posts .gallery-item:nth-child(1) {
  /* Post 13: 710x528 - right side, first row */
  grid-column: 2;
  grid-row: 1;
}

.bein-lebein-popup-posts .gallery-item:nth-child(2) {
  /* Post 14: 502x740 - left side, spans rows */
  grid-column: 1;
  grid-row: 1 / 3;
}

.bein-lebein-popup-posts .gallery-item:nth-child(3) {
  /* Post 15: 493x726 - right side, spans rows */
  grid-column: 2;
  grid-row: 2 / 4;
}

.bein-lebein-popup-posts .gallery-item:nth-child(4) {
  /* Post 16: 698x519 - left side, second row */
  grid-column: 1;
  grid-row: 3;
}

/* Section 3: Videos - 3 buttons in a row */
.bein-lebein-videos {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.bein-lebein-videos .video-play-btn {
  width: 100px;
  height: 100px;
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.bein-lebein-videos .video-play-btn:hover {
  opacity: 0.9;
}

.bein-lebein-videos .video-play-btn svg {
  width: 40px;
  height: 40px;
  stroke: var(--color-white);
}

/* Section 2: Street Mockups - Scattered overlapping browser windows matching Figma */
.bein-lebein-street-mockups {
  position: relative;
  width: 100%;
  height: 900px;
  margin: 60px 0;
}

/* Browser window frame for each mockup */
.bein-lebein-street-mockups .browser-frame {
  position: absolute;
  background: #fff;
  border: 1px solid #1a1a1a;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.bein-lebein-street-mockups .browser-frame__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #1a1a1a;
  background: #fff;
}

.bein-lebein-street-mockups .browser-frame__title {
  font-size: 12px;
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: 0.5px;
}

.bein-lebein-street-mockups .browser-frame__dots {
  font-size: 14px;
  color: #1a1a1a;
  letter-spacing: 2px;
}

.bein-lebein-street-mockups .browser-frame__content {
  overflow: hidden;
}

.bein-lebein-street-mockups .browser-frame__content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Position 1: Highway "2025" billboard - top-left */
.bein-lebein-street-mockups .browser-frame:nth-child(1) {
  top: 115px;
  left: 0;
  width: 494px;
  z-index: 1;
}

/* Position 2: Pink spray billboard - top-right */
.bein-lebein-street-mockups .browser-frame:nth-child(2) {
  top: 20px;
  right: 0;
  width: 705px;
  z-index: 2;
}

/* Position 3: Pink wall [בין לבין] - bottom-left, larger */
.bein-lebein-street-mockups .browser-frame:nth-child(3) {
  bottom: -195px;
  left: 50px;
  width: 705px;
  z-index: 4;
}

/* Position 4: Bus stop shelter - bottom-right */
.bein-lebein-street-mockups .browser-frame:nth-child(4) {
  bottom: -255px;
  right: 75px;
  width: 495px;
  z-index: 3;
}

/* Section 4: Screen Mockups - Full width */
.bein-lebein-screens {
  width: 100%;
}

.bein-lebein-screens .gallery-item {
  width: 100%;
}

.bein-lebein-screens .gallery-item img {
  width: 100%;
  height: auto;
}

/* Section 5: Merchandise Store - Full width */
.bein-lebein-merchandise {
  width: 100%;
}

.bein-lebein-merchandise .gallery-item {
  width: 100%;
}

.bein-lebein-merchandise .gallery-item img {
  width: 100%;
  height: auto;
}

/* Section 4: Screen Mockups - Full width (legacy) */
.bein-lebein-mockups {
  width: 100%;
}

.bein-lebein-mockups .gallery-item {
  width: 100%;
}

/* Section 5: Product Posts/Merchandise - Full width */
.bein-lebein-products {
  width: 100%;
}

.bein-lebein-products .gallery-item {
  width: 100%;
}

/* ===== Bat Galim Gallery Layout ===== */
/* Mixed vertical + 2-column layout */
.gallery--bat-galim {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 60px;
}

/* Full-width sections */
.bat-galim-full {
  width: 100%;
}

.bat-galim-full .gallery-item {
  width: 100%;
}

.bat-galim-full .gallery-item img {
  width: 100%;
  height: auto;
}

/* 3-column sections */
.bat-galim-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.bat-galim-3col .gallery-item {
  overflow: hidden;
}

.bat-galim-3col .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2-column sections */
.bat-galim-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.bat-galim-2col .gallery-item img {
  width: 100%;
  height: auto;
}

.gallery--bat-galim .gallery-item {
  width: 100%;
}

/* ===== Cafe Gallery Layout ===== */
/* Section-based layout matching Figma */
.gallery--cafe {
  display: flex;
  flex-direction: column;
  gap: 70px;  /* Figma: 70px between all sections */
  margin-top: 60px;
}

/* Full-width sections */
.cafe-full {
  width: 100%;
}

.cafe-full .gallery-item {
  width: 100%;
}

.cafe-full .gallery-item img {
  width: 100%;
  height: auto;
}

/* 2-column sections */
.cafe-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cafe-2col .gallery-item img {
  width: 100%;
  height: auto;
}

/* 2x2 grid section */
.cafe-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cafe-grid-2x2 .gallery-item img {
  width: 100%;
  height: auto;
}

/* Menu product grid - 3 columns */
.cafe-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cafe-menu-grid .gallery-item img {
  width: 100%;
  height: auto;
}

/* Lifestyle photos - 3 columns */
.cafe-lifestyle-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cafe-lifestyle-3col .gallery-item {
  overflow: hidden;
}

.cafe-lifestyle-3col .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Single centered video button */
.cafe-video-single {
  display: flex;
  justify-content: center;
}

/* Scattered Product Cards - Full width */
.cafe-scattered-section {
  width: 100%;
}

.cafe-scattered-section img {
  width: 100%;
  height: auto;
}

/* Instagram Mockup Section */
.cafe-instagram-mockup {
  width: 100%;
}

.cafe-instagram-mockup img {
  width: 100%;
  height: auto;
}

/* 5 Photos in Brown Decorative Frame */
.cafe-lifestyle-frame {
  width: 100%;
}

.cafe-lifestyle-frame img {
  width: 100%;
  height: auto;
}

/* ===== Video Container Styles ===== */
.video-container {
  position: relative;
  width: 397px;            /* Figma: 397px */
  max-width: 100%;
  aspect-ratio: 397 / 564; /* Figma: 397x564 */
  cursor: pointer;
  background: #000;
}

.video-player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

/* Play button overlay - shown only before first play */
.video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  transition: opacity 0.3s ease;
}

.video-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Bein-Lebein Video Container - 400x560px per Figma */
.video-container--bein-lebein {
  width: 400px;
  height: 560px;
  aspect-ratio: 400 / 560;
}

.video-container--bein-lebein .video-play-btn {
  width: 100px;
  height: 100px;
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
}

.video-container--bein-lebein .video-play-btn svg {
  width: 40px;
  height: 40px;
  stroke: var(--color-white);
}

/* ===== Tikotin Gallery Layout - Single Composite Image ===== */
.gallery--tikotin {
  width: 100%;
  margin-top: 60px;
}

.gallery--tikotin .gallery-item {
  width: 100%;
}

.gallery--tikotin .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: none; /* Remove animation */
}

.gallery--tikotin .gallery-item:hover img {
  transform: none; /* Remove hover scale */
}

/* ===== Book Gallery Layout - Single Composite Image ===== */
.gallery--book {
  width: 100%;
  margin-top: 60px;
}

.gallery--book .gallery-item {
  width: 100%;
}

.gallery--book .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: none; /* Remove animation */
}

.gallery--book .gallery-item:hover img {
  transform: none; /* Remove hover scale */
}

/* ===== App Gallery Layout ===== */
/* Full-width vertical stack for app presentation slides */
.gallery--app {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 60px;
}

.gallery--app .gallery-item {
  width: 100%;
}

.gallery--app .gallery-item img {
  width: 100%;
  height: auto;
}


/* ===== Common Gallery Item Styles ===== */
.gallery-item {
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.02);
}

/* ===== Video Play Button Row ===== */
.gallery-item--video-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 60px 0;
  background-color: var(--color-white);
}

.video-play-btn {
  width: 100px;
  height: 100px;
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-play-btn svg {
  width: 40px;
  height: 40px;
  stroke: var(--color-white);
}

.video-play-btn:hover {
  background-color: var(--color-primary);
  opacity: 0.9;
}

.video-play-btn:hover svg {
  stroke: var(--color-white);
}

/* Large single video play button */
.gallery-item--single-video {
  grid-column: 1 / -1;
  padding: 80px 0;
}

.video-play-btn--large {
  width: 117px;  /* Figma: 117px */
  height: 117px;
}

.video-play-btn--large svg {
  width: 48px;
  height: 48px;
}

/* ===== Gallery Visibility Override ===== */
/* Ensure galleries are always visible */
.gallery--bein-lebein,
.bein-lebein-posts,
.gallery--bat-galim,
.gallery--cafe,
.gallery--tikotin,
.gallery--book,
.gallery--app {
  opacity: 1 !important;
  transform: none !important;
}

/* Hide mobile composite by default (desktop/tablet) */
.bein-lebein-posts-mobile {
  display: none;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 1024px) {
  /* Bein Lebein: 4 columns -> 2 columns on tablet */
  .bein-lebein-posts {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Bein Lebein: Hide posts 9-12 on tablet (keep 8 posts in 2x4 grid) */
  .bein-lebein-posts .gallery-item:nth-child(n+9) {
    display: none !important;
  }

  .bein-lebein-videos .video-play-btn {
    width: 100px;
    height: 100px;
  }

  /* Bein Lebein video containers on tablet */
  .video-container--bein-lebein {
    width: 280px;
    height: 392px;
  }
}

@media (max-width: 810px) {
  /* Bein Lebein: Hide grid on mobile, show composite instead */
  .bein-lebein-posts {
    display: none !important;
  }

  /* Show mobile composite */
  .bein-lebein-posts-mobile {
    display: block;
    width: 100%;
    margin-top: 60px;
  }

  .bein-lebein-posts-mobile img {
    width: 100%;
    height: auto;
    display: block;
    transition: none;
  }

  .bein-lebein-posts-mobile:hover img {
    transform: none;
  }

  .bein-lebein-videos {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .bein-lebein-videos .video-play-btn {
    width: 80px;
    height: 80px;
  }

  /* Bein Lebein video containers on mobile */
  .video-container--bein-lebein {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 400 / 560;
  }

  /* Bein Lebein: Street mockups - stack vertically on mobile */
  .bein-lebein-street-mockups {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Bein Lebein: Hide street mockups 3 and 4 on mobile (keep only first 2) */
  .bein-lebein-street-mockups .browser-frame:nth-child(n+3) {
    display: none !important;
  }

  .bein-lebein-street-mockups .browser-frame {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
  }

  /* Bat Galim: Single column on mobile */
  .bat-galim-3col,
  .bat-galim-2col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Cafe: Single column on mobile */
  .cafe-2col,
  .cafe-grid-2x2,
  .cafe-menu-grid,
  .cafe-lifestyle-3col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cafe-video-single {
    padding: 40px 0;
  }

  /* Book Gallery: Single image scales naturally - no responsive adjustments needed */
  /* Tikotin Gallery: Single image scales naturally - no responsive adjustments needed */

  /* Reduce gap on mobile for other vertical stack galleries */
  .gallery--cafe,
  .gallery--app {
    gap: 24px;
  }

  .gallery-item--video-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 0;
  }
}

@media (max-width: 480px) {
  /* Book Gallery: Single image scales naturally - no mobile adjustments needed */
}