/* =========================================================
   Aiju Photography — Luxury Monochrome Theme (Bootstrap 5.3)
   - Monochrome base with subtle pastel accent
   - Editorial typography (Cormorant Garamond + Inter)
   - Hero bottom→top gradient for readable white text
   - Premium hover, frames, and masonry collage
   ========================================================= */

   

   :root{
     /* Core palette */
     --bg: #0a0a0a;             /* near-black */
     --surface: #121212;         /* section bg */
     --frame: #1d1d1d;           /* hairline frame */
     --ink: #ffffff;             /* primary text (white) */
     --ink-dim: #cfcfcf;         /* muted text */
     --muted: #2a2a2a;
   
     /* Pastel luxury accent (you can tweak these) */
     --accent: #c2d3c7;          /* pastel sage */
     --accent-strong: #aebfb3;   /* slightly deeper sage */
   
     /* Type & radius */
     --radius: 20px;
     --shadow: 0 14px 42px rgba(0,0,0,.5);
   
     --tracking-wide: .12em;
     --tracking: .04em;
   }
   
   /* Base */
   html, body { height: 100%; }
   body.theme-luxe{
     background: var(--bg);
     color: var(--ink);
     font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   .heading-serif{
     font-family: "Cormorant Garamond","Times New Roman",serif;
     letter-spacing: .006em;
     font-weight: 600;
   }
   .text-ink-dim{ color: var(--ink-dim)!important; }
   
   /* Navbar */
   .navbar.bg-black { background:#000!important; }
   .navbar .navbar-brand{
     font-family:"Cormorant Garamond",serif;
     letter-spacing: var(--tracking-wide);
     text-transform: uppercase;
     font-weight: 600;
     font-size: 1rem;
   }
   .navbar .nav-link{
     color: var(--ink-dim);
     text-transform: uppercase;
     letter-spacing: var(--tracking);
     font-size: .85rem;
     position: relative;
     padding-bottom: .3rem;
   }
   .navbar .nav-link:hover{ color: var(--ink); }
   .navbar .nav-link::after{
     content:""; position:absolute; left:0; bottom:-2px;
     width:0; height:1px; background: var(--accent); transition: width .28s ease;
   }
   .navbar .nav-link:hover::after{ width:100%; }
   
   /* Current page “greyed out/disabled” */
   .navbar .nav-link[aria-current="page"],
   .navbar .nav-link.disabled {
     color: #9a9a9a !important;
     pointer-events: none;
     opacity: .8;
   }
   .luxury-shadow{ box-shadow: var(--shadow); }
   
   /* Hero */
   .hero{ min-height: 78svh; position: relative; }
   .hero-img{
     position: absolute; inset: 0;
     width: 100%; height: 100%;
     object-fit: cover;
     filter: contrast(.95) saturate(.9) brightness(.9);
   }
   .hero-gradient{
     /* Black at bottom (50%) → transparent at top (0%) */
     position: absolute; inset: 0;
     background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.0) 70%);
   }
   
   /* Navigation tiles (homepage) */
   .lux-card{
     background: var(--surface);
     border-radius: var(--radius);
     position: relative;
   }
   .lux-card img{ transition: transform .7s cubic-bezier(.2,.7,.2,1); }
   .lux-card::after{
     /* subtle inner frame */
     content:""; position:absolute; inset:10px;
     border-radius: calc(var(--radius) - 10px);
     box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
     pointer-events: none;
   }
   .lux-card .lux-overlay{
     position:absolute; inset:0;
     display:flex; flex-direction:column; justify-content:flex-end;
     background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0));
     transform: translateY(8%); opacity: .92; transition: all .35s ease;
     border-radius: inherit;
   }
   .lux-card:hover img{ transform: scale(1.06); }
   .lux-card:hover .lux-overlay{ transform: translateY(0); opacity: 1; }
   
   /* Figures / gallery */
   .object-cover{ object-fit: cover; }
   .gallery .gallery-item{ cursor: zoom-in; }
   .lux-figure{ position: relative; background: var(--surface); border-radius: 16px; }
   .lux-figure img{ display:block; width:100%; height:100%; object-fit:cover; transition: transform .5s ease; border-radius: inherit; }
   .lux-figure::after{
     content:""; position:absolute; inset:6px;
     border-radius: 12px;
     box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
     pointer-events:none;
   }
   .lux-figure:hover img{ transform: scale(1.03); }
   
   /* Hide captions per your request (kept in markup for optional future use) */
   .lux-caption{ display: none; }
   
   /* Uniform grid helpers */
   .grid-uniform .ratio{ background: var(--muted); }
   
   /* Masonry (CSS columns) for mixed portrait/landscape collages */
   .masonry{ column-count: 1; column-gap: 1rem; }
   @media (min-width: 576px){ .masonry{ column-count: 2; } }
   @media (min-width: 1200px){ .masonry{ column-count: 3; } }
   .masonry .lux-figure{ break-inside: avoid; }
   
   /* Accent buttons/links */
   .btn-accent{
     border-color: var(--accent);
     color: var(--accent);
   }
   .btn-accent:hover{
     background: var(--accent);
     color: #101010;
   }
   
   /* Breadcrumbs */
   .breadcrumb .breadcrumb-item a{ color: var(--ink-dim); }
   .breadcrumb .breadcrumb-item.active{ color: var(--ink); }
   
   /* Footer */
   footer{ background: #0b0b0b; }
   
   /* Reveal-on-scroll (class added by JS) */
   .reveal{ opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
   .reveal.in{ opacity: 1; transform: translateY(0); }
   
   /* Focus ring */
   :focus-visible{ outline: 2px dashed var(--accent); outline-offset: 3px; }
   
   /* Light theme (when toggled) — optional */
   body.theme-light{
     background: #f7f7f7;
     color: #141414;
   }
   body.theme-light .navbar.bg-black{ background: #ffffff !important; }
   body.theme-light .navbar .nav-link{ color: #555; }
   body.theme-light .navbar .nav-link:hover{ color: #111; }
   body.theme-light .hero-gradient{
     background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 70%);
   }
   body.theme-light .lux-card{ background: #ffffff; }
   body.theme-light .lux-figure{ background: #ffffff; }
   body.theme-light .btn-accent:hover{ color:#000; }
   /* ====== Home: centered hero text ====== */
.hero .hero-copy { color: var(--ink); }
.hero .btn { text-transform: none; }

/* Ensure links inherit neutral/white hues, not blue, in dark theme */
a { color: inherit; }
a:hover { color: inherit; }

/* ====== Tiles (gallery links) with full overlay on hover ======
   - default: overlay mostly hidden at bottom (subtle)
   - hover: overlay covers image, text centered
   - mouse out: overlay fades/slides down toward bottom */
.tile { background: var(--surface); }
.tile img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.tile:hover img { transform: scale(1.05); }

.tile-overlay{
  position: absolute; inset: 0;
  display: grid; place-items: end center; /* text near bottom when idle */
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.0) 65%);
  color: #fff;
  transform: translateY(65%); /* mostly hidden near bottom */
  opacity: 0.0;
  transition: transform .45s ease, opacity .45s ease, background .45s ease;
  border-radius: inherit;
  padding: 2rem 1.25rem;
}
.tile:hover .tile-overlay,
.tile:focus-visible .tile-overlay{
  transform: translateY(0);
  opacity: 1;
  display: grid;
  place-items: center;  /* center the text on hover */
  background: rgba(0,0,0,0.85); /* full black veil */
}
.tile-text{
  font-size: clamp(1.2rem, 1.6vw + .6rem, 1.75rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}

/* Small polish for the section headings */
#about .heading-serif, #galleries .heading-serif { letter-spacing: .02em; }

/* Make sure buttons don’t look blue/purple on focus/visited */
.btn, .btn:hover, .btn:focus, .btn:active, .btn:visited { color: inherit; }