/* !This CSS is SPECIFICALLY for PROJECTS PAGE */

/*!GLOBAL*/
:root { --headerH: 72px; } /* adjust to your real header height */

body {
  background-color: #f9f9f9;
  overflow-x: hidden;
}

/*!GALLERY*/

:root{
  --marg:1.2dvh;
  --gh:calc(100dvh - 2rem);
  --vh:calc(2*var(--gh)/3 - var(--marg));
  --hh:calc(var(--gh)/3 - var(--marg))
}
.projects-gallery {
  position: fixed;
  top: 0; left: 0;
  column-count: 4;
  column-gap: var(--marg);
  -webkit-column-gap: var(--marg);/*ios problem solver*/
  padding: 1rem 2rem;
  height: calc(var(--gh) + 8*var(--marg));
  width: 100vw;
  column-fill: auto;
  z-index: -10;
  overflow-x: auto;
}
.projects-gallery,
.projects-gallery * { box-sizing: border-box; }

.project {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: var(--marg);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.project.fade-out { opacity: 0; }

.project img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.image-wrapper.vertical::before {
  content: '';
  display: block;
  height: var(--vh) ;
  aspect-ratio: 2/3;
}
.image-wrapper.horizontal::before {
  content: '';
  display: block;
  height: var(--hh);
}
.image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.image-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes zoomInReveal {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

.project.anim .image-wrapper img {
  transform: scale(1.05);
  will-change: transform;
}

.project.anim.in .image-wrapper img {
  animation: zoomInReveal 1s ease-out forwards;
}

/* optional: text blocks also fade/slide in */
@keyframes fadeSlideIn {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}
.project.text-block.anim { transform: translateY(8px); }
.project.text-block.anim.in { animation: fadeSlideIn .8s ease-out forwards; }

/* Accessibility: disable if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .project.anim .image-wrapper img,
  .project.text-block.anim { transform: none; animation: none !important; }
}


/*!OVERLAY DESCRIPTION*/
.image-wrapper .overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
  z-index: 2; /* above image */
  pointer-events: auto;
  cursor: pointer;    
}

.overlay-arrows, .overlay-arrows .arrow { pointer-events: auto; }

.image-wrapper:hover .overlay { opacity: 1; }

.overlay-text { margin-top: auto; }

.project-title {
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  font-family: 'Halyard-Display', sans-serif;
  font-weight: 200;
}
.project-desc {
  font-size: 1rem;
  margin: 0;
  line-height: 1.2;
  padding-right: 5rem;
}

/*!OVERLAY — ARROWS*/
.overlay-arrows {
  z-index: 3;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  gap: 1rem;
}
.arrow {
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease;
}
.arrow:hover { transform: scale(1.2); }

.image-link {
  position: absolute;
  inset: 0;
  display: block; /* ensures link fills wrapper */
  z-index: 1;
}

/*!BLACK TEXT BLOCKS*/
.project.text-block {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  padding: 2rem;
  background-color: #111;
  color: white;
  margin-bottom: 1rem;
  box-sizing: border-box;
}
.project.text-block h3 {
  margin-bottom: 2rem;
  padding-right: 3rem;
}
.project.text-block p {
  line-height: 1.6;
  padding: 0.5rem 0;
}

/*!RESPONSIVE — GALLERY & OVERLAY*/
@media (max-width: 1200px) {
  .projects-gallery { column-count: 3; }
  .project-desc { font-size: 0.8rem; }
}

@media (max-width: 768px) {
  .projects-gallery {
    column-count: 2;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 600px) {
  .projects-gallery { column-count: 1; }
}

@media (max-width: 480px){
  .projects-gallery{
    position: static;
    top: 0;
    height: auto;
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    column-count: 1;
    column-gap: 0.5rem;
    padding: 0;
  }
  .project-title { font-size: 2rem; margin: 0 0 0.5rem 0; }
}

/*!RESPONSIVE — TEXT BLOCKS*/
@media (max-width: 1200px) {
  .project.text-block { padding: 1rem; }
  .project.text-block h3 { padding-right: 1rem; }
  .project.text-block p {
    line-height: 1.2;
    padding: 0.5rem 0;
  }
}
@media (max-width: 768px) {
  .project.text-block { padding: 1rem; }
  .project.text-block h3 { padding-right: 1rem; }
}


/*!LANDSCAPE MOBILE*/
/* Landscape on mobile-ish devices only (html gets this class from the detector) */
html.mobile-rotated .projects-gallery {
  position: static;
  height: auto;
  width: 100vw;
  overflow-y: auto;
  overflow-x: hidden;
  column-count: 1;                 /* single column */
  -webkit-column-gap: var(--marg); /* keep your spacing */
  column-gap: var(--marg);
  padding: 0 1rem;
  z-index: auto;
}

/* Make ALL cards the vertical size */
html.mobile-rotated .image-wrapper::before {
  content: '';
  display: block;
  height: var(--tileH);  /* computed in JS above */
  aspect-ratio: 2 / 3;   /* vertical card shape */
}

/* (Your absolute-positioned img/video already fill the wrapper) */
html.mobile-rotated .image-wrapper img,
html.mobile-rotated .image-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*--------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/



:root{
  --headerH: 72px;        /* adjust if your header height differs */
  --fabSize: 52px;        /* mobile floating button size */
  --fabGap: 16px;         /* distance from screen edges */
}

/*!FILTERS — TOGGLE BUTTON*/
.filters-toggle {
  display: block;
  margin: 0 2rem 0.75rem auto; /* right-aligned */
  padding: 0.5rem 0.9rem;
  background: #000;
  color: #fff;
  border:none;
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  z-index: 20;
  align-items: center;
}

/*!FILTERS — DROPDOWN (DRAWER UNDER BUTTON)*/
#filtersDrawer {
  position: absolute;            
  width: 220px; 
  padding: .5rem .6rem;
  background: #fff;
  border-radius: 12px;
  z-index: 20;
  opacity: 0;
  transform: scale(.98) translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#filtersDrawer.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/*!FILTERS — CLOSE BUTTON*/
#filtersClose {
  position: absolute;
  top: 6px; right: 6px;                                         
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-size: 16px;
  cursor: pointer;
}

/*!FILTERS — PANEL LAYOUT + WORD-ONLY ITEMS*/
#filtersPanel.filter-bar {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
}

#filtersPanel .category-menu {
  display: grid;
  gap: .2rem;
}

#filtersPanel .filter-btn {
  all: unset;                    /* plain word */
  display: block;
  cursor: pointer;
  font-size: .98rem;
  line-height: 1.3;
  color: #7a7a7a;                /* inactive grey */
  padding: .15rem .2rem;
  background: transparent;
  border: 0;
  outline: none;
}

#filtersPanel .filter-btn:hover { color: #111; }
#filtersPanel .filter-btn.active {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/*!FILTERS — LOCATION SUBMENU*/

#filtersPanel .location-dropdown { position: relative; }
#filtersPanel #locationToggle {
  all: unset;
  display: block;
  cursor: pointer;
  font-size: .98rem;
  outline: none;
  background: #000;
  color: #fff;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  display: inline-flex;
  align-items: center;
  width: calc(220px - 1.8rem)           /* looks clean inside the drawer */
}

#filtersPanel #locationToggle.active{
  color: #fff;
  text-decoration: none;
}


#filtersPanel #locationMenu.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  width: 100%;
  background: #fff;
  border: 0;
  padding: .25rem .4rem;
  z-index: 21;
  color:#7a7a7a;
  padding:.35rem .2rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: max-height .25s ease, opacity .18s ease, transform .18s ease;
}

#filtersPanel #locationMenu.dropdown.show {
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#filtersPanel #locationMenu li {
  list-style: none;
  padding: .35rem .2rem;
  color: #444;
  cursor: pointer;
}

#filtersPanel #locationMenu li:hover { color: #111; }

#filtersPanel .location-dropdown{ position: relative; right: auto; }
#filtersPanel #locationMenu.dropdown{
  left: 0; right: 0; width: 100%; padding: 0 .75rem;
}

/** Accessibility: show focus without browser outlines */

#filtersPanel .filter-btn:focus-visible,
#filtersPanel #locationToggle:focus-visible,
#filtersPanel #locationMenu li:focus-visible{
  outline: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}



/*!RESPONSIVE — FILTERS*/

@media (max-width: 1000px){
  /* Make sure the FAB is bottom-right */
  .filters-toggle{
    position: fixed;
    top: 52px;
    left:  var(--fabGap,16px);
    margin: 0;
    width: var(--fabSize,52px);
    height: var(--fabSize,52px);
    padding: 0;
    border-radius: 999px ;
    display: inline-flex;
    align-items: center; justify-content: center;
    z-index: 20;
  }

  .filters-drawer{
    position: fixed !important;
    bottom: auto !important;  
    right: auto !important;
    left: var(--fabGap,16px) !important;
    top: calc(52px + var(--fabSize,52px) + 10px); /* sits above button */
    height: auto !important;
    transform: translateY(8px) scale(.98) !important;
    will-change: transform, opacity;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  #filtersPanel #locationMenu.dropdown{
    position: absolute !important;
    inset: auto 0 100% 0;
    width: 100% !important;
    transform: none !important;
    margin-bottom: .5rem;
    background: #fff;
  }

  .filters-drawer::after{
    border: 0 !important;
  }
}

/*!FILTERS — INLINE SWAP MODE (minimal helpers)-------------------------------------------------------------- */
#filtersPanel { position: relative; }

#filtersPanel .inline-filters{
  display: none;
  gap: .2rem;
}

#filtersPanel.swap-mode .category-menu{ display: none; }
#filtersPanel.swap-mode .inline-filters{ display: grid; }

/* word-only “chips” to match your buttons */
#filtersPanel .inline-filters .chip{
  all: unset;
  display: block;
  cursor: pointer;
  font-size: .98rem;
  line-height: 1.3;
  color: #7a7a7a;
  padding: .15rem .2rem;
}
#filtersPanel .inline-filters .chip:hover{ color:#111; }
#filtersPanel .inline-filters .chip.active{
  color:#111;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* tiny fade helper */
.fade { transition: opacity .22s ease, transform .22s ease; }
.fade.out { opacity: 0; transform: translateY(-4px); }
.fade.in  { opacity: 1; transform: translateY(0); }


/*! SCROLL HINT PILL !*/
.scroll-hint{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(1.05);
  z-index: 20;
  padding: .6rem 1rem;
  border-radius: 999px;
  font-size: 1rem;
  font-family: 'Halyard-Display', sans-serif;
  letter-spacing: .02em;
  color: #111;
  background: rgba(255,255,255,.50);
  pointer-events: none;
  opacity: 0;
  animation: hintZoomIn 1.5s ease-out forwards;
  animation-delay: 0.5s;
}

.scroll-hint--hidden{
  animation: hintZoomOut 1.5s ease-out forwards;
}

/* initial pop-in */
@keyframes hintZoomIn{
  from{ transform: translate(-50%,-50%) scale(1.05); opacity: 0; }
  to  { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
}

@keyframes hintZoomOut {
  from {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-50%,-50%) scale(0.95);
    opacity: 0;
  }
}

/* desktop copy shows left/right, mobile shows up/down */
.scroll-hint__desk{ display: inline; }
.scroll-hint__mob { display: none;  }

@media (max-width: 480px){
  .scroll-hint__desk{ display: none; }
  .scroll-hint__mob { display: inline; }
}

/* When phone is flipped (vertical scrolling), switch hint direction */
html.mobile-rotated .scroll-hint__desk {
  display: none !important;
}

html.mobile-rotated .scroll-hint__mob {
  display: inline !important;
}

/* Optional: tweak its position for vertical scroll */
html.mobile-rotated .scroll-hint {
  top: 80%;            /* move lower on the screen if you want */
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}