/* ============================================================
   BYDURAN.CO — Portfolio Page
   ============================================================ */

/* Hero */
.portfolio-hero {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--sp-24));
  padding-bottom: var(--sp-20);
  overflow: hidden;
}

.portfolio-hero__inner {
  position: relative;
  z-index: 2;
}

.portfolio-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.portfolio-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.25) saturate(0.6);
}

.portfolio-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(44,39,34,0.8) 0%, rgba(44,39,34,0.3) 100%);
}

/* Masonry Grid — CSS column-based */
.masonry-grid {
  column-count: 3;
  column-gap: 1.5rem;
}

/* Outer item: the column break container */
.masonry-item {
  break-inside: avoid;
  /* padding-bottom instead of margin-bottom — more reliable in
     CSS column layouts with break-inside: avoid across browsers */
  padding-bottom: 1.5rem;
  position: relative;
}

/* Wide item: spans all columns, needs its own bottom gap */
.masonry-item--wide {
  column-span: all;
  padding-bottom: 1.5rem;
  margin-bottom: 0;
}

.masonry-item__link {
  display: block;
  text-decoration: none;
  cursor: default;
}

.masonry-item__media {
  position: relative;
  overflow: hidden;
  background: var(--cream-dark);
  /* Visible border/gap between items comes from the padding on .masonry-item */
}

/* Default aspect ratio */
.masonry-item__media {
  aspect-ratio: 4 / 5;
}

/* Tall variant */
.masonry-item--tall .masonry-item__media {
  aspect-ratio: 2 / 3;
}

/* Video variant */
.masonry-item__media--video {
  aspect-ratio: 16 / 9;
}

.masonry-item--wide .masonry-item__media {
  aspect-ratio: 16 / 7;
}

.masonry-item__media img,
.masonry-item__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-luxury);
  display: block;
}

.masonry-item:hover .masonry-item__media img,
.masonry-item:hover .masonry-item__media video {
  transform: scale(1.04);
}

/* Overlay info */
.masonry-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(44, 39, 34, 0.8) 0%,
    rgba(44, 39, 34, 0) 55%
  );
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-luxury);
}

.masonry-item:hover .masonry-item__overlay {
  opacity: 1;
}

.masonry-item__info {
  padding: var(--sp-5);
  width: 100%;
  transform: translateY(8px);
  transition: transform var(--dur-mid) var(--ease-luxury);
}

.masonry-item:hover .masonry-item__info {
  transform: translateY(0);
}

.masonry-item__category {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--olive-light);
  margin-bottom: var(--sp-1);
}

.masonry-item__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  font-style: italic;
  color: var(--cream);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-1);
}

.masonry-item__year {
  font-size: var(--text-xs);
  color: rgba(245, 245, 235, 0.5);
}

/* Centered play button — video items only */
.masonry-item__play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  z-index: 3;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-luxury);
  pointer-events: none;
}

.masonry-item__play-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-mid) var(--ease-spring);
}

.masonry-item__play-btn svg {
  color: #fff;
  transform: translateX(2px);
}

.masonry-item__play-btn span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.masonry-item--video:hover .masonry-item__play-btn {
  opacity: 1;
}

.masonry-item--video:hover .masonry-item__play-circle {
  transform: scale(1.06);
}

/* Video badge */
.masonry-item__video-badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(44, 39, 34, 0.7);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--cream);
  z-index: 2;
}

/* Video item — clickable */
.masonry-item--video,
.masonry-item--video .masonry-item__link,
.masonry-item--video video {
  cursor: pointer;
}

/* ============================================================
   VIDEO LIGHTBOX MODAL
   ============================================================ */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 50);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease-luxury);
}

.video-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 39, 34, 0.95);
  cursor: pointer;
}

.video-modal__container {
  position: relative;
  width: 90%;
  max-width: 960px;
  transform: scale(0.95) translateY(12px);
  transition:
    transform var(--dur-mid) var(--ease-luxury),
    opacity var(--dur-mid) var(--ease-luxury);
  opacity: 0;
}

.video-modal.is-open .video-modal__container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.video-modal__close {
  position: absolute;
  top: calc(-1 * var(--sp-10));
  right: 0;
  background: none;
  border: none;
  color: rgba(245, 245, 235, 0.6);
  cursor: pointer;
  padding: var(--sp-2);
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-out);
}

.video-modal__close:hover {
  color: var(--cream);
}

.video-modal__player {
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.video-modal__player video {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   SIDEBAR LAYOUT
   ============================================================ */
.portfolio-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
}

.portfolio-sidebar {
  width: 148px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-10));
}

.portfolio-sidebar__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--sand-dark);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-border);
}

/* Override filter-bar inside sidebar — vertical stack */
.portfolio-sidebar .filter-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  padding-block: 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* Override filter buttons inside sidebar — editorial nav style */
.portfolio-sidebar .filter-btn {
  text-align: left;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--sand-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.portfolio-sidebar .filter-btn:hover {
  color: var(--olive-light);
  border-left-color: var(--olive-light);
  background: none;
}

.portfolio-sidebar .filter-btn--active {
  color: var(--olive-light);
  border-left-color: var(--olive-light);
  background: none;
  font-weight: var(--weight-medium);
}

.portfolio-main {
  flex: 1;
  min-width: 0;
}

/* Load more */
.portfolio-load-more {
  display: flex;
  justify-content: center;
  padding-top: var(--sp-12);
}

/* Corner wrapper — hugs the button edge */
.btn-corners {
  position: relative;
  display: inline-flex;
  padding: 6px;
}

.btn-corner {
  position: absolute;
  width: 50%;
  height: 50%;
  pointer-events: none;
}

.btn-corner::before,
.btn-corner::after {
  content: '';
  position: absolute;
  background: var(--espresso);
  opacity: 0.5;
}

.btn-corner::before { width: 1px; height: 100%; }
.btn-corner::after  { width: 100%; height: 1px; }

/* All fire at the same time */
.btn-corner--tl { top: 0; left: 0; }
.btn-corner--tl::before { top: 0; left: 0; animation: cornerPulseDown  2.2s var(--ease-luxury) infinite; }
.btn-corner--tl::after  { top: 0; left: 0; animation: cornerPulseRight 2.2s var(--ease-luxury) infinite; }

.btn-corner--tr { top: 0; right: 0; }
.btn-corner--tr::before { top: 0; right: 0; animation: cornerPulseDown  2.2s var(--ease-luxury) infinite; }
.btn-corner--tr::after  { top: 0; right: 0; animation: cornerPulseLeft  2.2s var(--ease-luxury) infinite; }

.btn-corner--bl { bottom: 0; left: 0; }
.btn-corner--bl::before { bottom: 0; left: 0; animation: cornerPulseUp    2.2s var(--ease-luxury) infinite; }
.btn-corner--bl::after  { bottom: 0; left: 0; animation: cornerPulseRight 2.2s var(--ease-luxury) infinite; }

.btn-corner--br { bottom: 0; right: 0; }
.btn-corner--br::before { bottom: 0; right: 0; animation: cornerPulseUp   2.2s var(--ease-luxury) infinite; }
.btn-corner--br::after  { bottom: 0; right: 0; animation: cornerPulseLeft 2.2s var(--ease-luxury) infinite; }

/* Filter functionality */
.masonry-item[data-hidden="true"] {
  display: none;
}

/* Load More — second batch hidden by default */
.masonry-item--hidden {
  display: none;
}

/* ── Responsive ──────────────────────────────────────────── */

/* Large tablet: 2-column masonry */
@media (max-width: 1024px) {
  .masonry-grid {
    column-count: 2;
  }
}

/* Tablet: narrow sidebar slightly */
@media (max-width: 900px) {
  .portfolio-layout {
    gap: var(--sp-8);
  }

  .portfolio-sidebar {
    width: 110px;
  }
}

/* Mobile ≤768px: sidebar becomes sticky horizontal pill bar */
@media (max-width: 768px) {
  /* Tighten section padding */
  .portfolio-section.section-pad {
    padding-block: var(--sp-8);
  }

  /* Stack sidebar above grid */
  .portfolio-layout {
    flex-direction: column;
    gap: 0;
  }

  /* Full-bleed sticky pill bar pinned under nav */
  .portfolio-sidebar {
    width: 100%;
    position: sticky;
    top: calc(var(--nav-height) - 1px);
    z-index: var(--z-raised);
    background: var(--cream);
    /* box-shadow fills bg + draws bottom border without touching layout */
    box-shadow:
      -100vw 0 0 0 var(--cream),
       100vw 0 0 0 var(--cream),
       0 1px 0 0 var(--color-border);
    padding: var(--sp-3) 0;
    margin-bottom: var(--sp-5);
  }

  .portfolio-sidebar__label {
    display: none;
  }

  /* Wrapping pill row — all categories visible, no scroll */
  .portfolio-sidebar .filter-bar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-block: 0;
    border-bottom: none;
    margin-bottom: 0;
    overflow-x: visible;
  }

  /* Compact pill buttons — fit all 6 on screen */
  .portfolio-sidebar .filter-btn {
    border: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 6px var(--sp-3);
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--taupe);
    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background: none;
  }

  .portfolio-sidebar .filter-btn:hover {
    color: var(--espresso);
    border-color: var(--espresso);
    border-left-color: var(--espresso);
    background: none;
  }

  .portfolio-sidebar .filter-btn--active {
    background: var(--espresso);
    color: var(--cream);
    border-color: var(--espresso);
    border-left-color: var(--espresso);
    font-weight: var(--weight-medium);
  }

  /* Strip desktop stagger offsets from masonry items */
  .masonry-item {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Small mobile ≤480px: 1-column masonry + tighter hero */
@media (max-width: 480px) {
  .portfolio-hero {
    padding-top: calc(var(--nav-height) + var(--sp-12));
    padding-bottom: var(--sp-10);
  }

  .masonry-grid {
    column-count: 1;
  }

  .masonry-item--wide .masonry-item__media {
    aspect-ratio: 4 / 3;
  }
}