/* =============================
   GLOBAL / VARIABLES
   =============================
   This stylesheet centralizes colors, sizing, and animations.
   Edit variables below to affect the entire site (e.g. theme color, spacing).
*/
:root{
  --bg: #0f0f0f;
  --panel: #181818;
  --muted: #9ca3af;           /* tailwind text-gray-400 equivalent */
  --text: #EAEAEA;
  --accent: #facc15;         /* yellow used for CTA */
  --card-radius: 12px;
  --reveal-duration: .8s;
  --reveal-ease: cubic-bezier(.2,.9,.2,1);
  --card-img-height: 20rem;  /* h-80 in tailwind ~ 20rem */
}

/* base body + font */
html,body{
  height:100%;
}
body{
  margin:0;
  background-color:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* preserve display font used in headings */
.font-display{ font-family:'Cormorant Garamond',serif; }

/* =============================
   HEADER / NAV
   (keeps original sticky translucent behavior)
   ============================= */
.sticky-header{
  position:sticky;
  top:0;
  z-index:50;
  background-color: rgba(17,17,17,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.3s ease;
}

/* nav-link active underline style preserved */
.nav-link.active{ color: #fff; font-weight:600; }
.nav-link.active::after{
  content:'';
  display:block;
  width:100%;
  height:2px;
  background:#FFFFFF;
  margin-top:2px;
}

/* mobile menu open/close transitions (unchanged concept) */
#mobile-menu{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
#mobile-menu.open{ max-height:500px; }

/* =============================
   HERO
   ============================= */
.hero{ position:relative; display:flex; align-items:center; justify-content:center; text-align:center; }
.hero-bg{ background-size:cover; background-position:center; }

/* =============================
   REVEAL ON SCROLL
   centralize transitions for reveal animations
   ============================= */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}
.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* =============================
   IMAGE GALLERY
   We use a responsive CSS Grid that adapts gracefully.
   Change the grid breakpoints below to control columns on tablet/desktop.
   ============================= */
.image-gallery{
  display:grid;
  gap:2rem;
  /* default mobile: 1 column */
  grid-template-columns: 1fr;
}

/* medium screens: 2 columns; large: 3 columns (same as original) */
@media(min-width:768px){ /* md */
  .image-gallery{ grid-template-columns: repeat(2,1fr); }
}
@media(min-width:1024px){ /* lg */
  .image-gallery{ grid-template-columns: repeat(3,1fr); }
}

/* card container used across all galleries (keeps original bg & overflow) */
.image-card{
  background:var(--panel);
  border-radius:var(--card-radius);
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  transition: transform .35s ease;
}
.image-card:focus{ outline:2px solid rgba(255,255,255,.08); }

/* image element: object-cover + preserved hover scale */
.image-card img{
  width:100%;
  height:var(--card-img-height);
  object-fit:cover;
  transition: transform .5s ease;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* zoom on hover (preserve original) */
.image-card:hover img{ transform:scale(1.05); }

/* content area */
.card-body{ padding:1.5rem; pointer-events:none; } /* keep pointer-events none so clicking the card still bubbles for modal */

/* title and caption */
.card-title{ font-family:var(--font-display, 'Cormorant Garamond'); font-size:1.125rem; color:#fff; margin:0; }
.card-caption{ color:var(--muted); margin-top:.5rem; font-size:.875rem; }

/* =============================
   MODAL / LIGHTBOX
   Centralized modal styling with simple enter/exit fade (JS toggles .open)
   ============================= */
#image-modal{
  align-items:center;
  justify-content:center;
  transition: opacity .25s ease, visibility .25s ease;
}
#image-modal.hidden{ display:none; }

#image-modal img{ border-radius:10px; }

/* modal nav buttons */
.modal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  color:white;
  font-size:3rem;
  border:none;
  cursor:pointer;
  padding:.25rem .5rem;
  opacity:.9;
}
.modal-nav.left-4{ left:0.5rem; }
.modal-nav.right-4{ right:0.5rem; }

/* responsive modal caption */
#modal-caption{ color:var(--muted); font-size:0.95rem; margin-top:.75rem; }

/* =============================
   UTILITY / SMALL ELEMENTS
   ============================= */
a{ color:inherit; text-decoration:none; }
button{ background:transparent; border:none; color:inherit; }

/* fallback image: small placeholder style (used by JS when image fails) */
.img-fallback{
  background:#181818;
  display:flex; align-items:center; justify-content:center;
  color:#404040; font-size:1rem; min-height:6rem;
}