/* =========================================
   ZEN LANDSCAPES — Shared Styles
   ========================================= */

/* --- Backgrounds --- */
.fixed-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  z-index: -1;
  background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDlfEs-IyIny2iB9gq5pDWzQidDtNhdFHbO_BPnuAfKcPFNwu7RXl86JoAMOhMCY4E72LE6UCk_dcKb5XRr3AfrEmWDxs1Rk5vJKvl9HelbvuaL-KCXg1m09Wxu9lXJHWeSofL1LfCVrXl0bSbg2rGMXjJ7uOv1lFyGCmGQUe_H85KKTiIedxSL6mV6RYOXzu7dtNgoX0eNoaCHQrR7wNa0jH8ldJkq57R4xgOuObH_L-4HcYtsKXu71dCWMZGxXVK3nGaEQrvrmgA');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(8px) saturate(0.8) brightness(0.7);
  transform: scale(1.1);
}

.hero-bg {
  background-image: linear-gradient(rgba(26, 36, 33, 0.45), rgba(26, 36, 33, 0.45)),
    url('https://lh3.googleusercontent.com/aida-public/AB6AXuDY6DZpQjl_5D3XLMCPhAozpmBlYvbslg8ELBS7_sYWBj5SE_uzRKy7BAW0xEMkDDGtsjZOzbJzxiygz0FfbeLIrjWBeH2wqKPA5SaoI6ZprNhzhovUeWdLdtkRKLgxvLnM5c4CbAoqgOz_zf0yfxlKIBIAUMFSr15_J3OU3puKixiQ09PB7Usv8TZYsj_UNalME05VBCjc4LZdi2jrYaeVZGG1UnDNAXAp6Jk3AFNvYIe5YRvs2O6e7y5oCp0HPQvkhiHQx9Qg-ns');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.realisation-bg {
  background-image: linear-gradient(rgba(26, 36, 33, 0.4), rgba(26, 36, 33, 0.4)),
    url('https://lh3.googleusercontent.com/aida-public/AB6AXuAnir7h_U4v_zfjqqK7n6Z0QC9aEY3caaNbODdy_iVi3uJAM3DZ5mRl6bi-3dfDYwrYokjDGmbMWcokZ5hkKI630e-r15W0Ag6aD4IjHDmO9KRGJFXBIhy31_8RJd6OxgjASHFbGPmmXajlFdGiadyDdpszDg0FF5pVecNsExTqzDF4BtZGhrwnDdRSIHhY60a6pFUojQK5nMcJE6V4AOdwlMyrijPTx6H-rCNnuGg3AJUeg1po0hybvdL73BY4kDLn9LCW5_LzCEo');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* --- Glassmorphism --- */
.glass-header {
  background: rgba(26, 36, 33, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.frosted-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

.dark-frosted-card {
  background: rgba(26, 36, 33, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.glass-input {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.glass-input:focus {
  background: rgba(255, 255, 255, 1);
  border-color: #17cf54;
  box-shadow: 0 0 0 2px rgba(23, 207, 84, 0.2);
  outline: none;
}

/* --- Typography --- */
.luxury-underline {
  position: relative;
}

.luxury-underline::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 40px; height: 1px;
  background-color: #17cf54;
}

/* --- Layout helpers --- */
.dotted-line {
  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
  flex-grow: 1;
  margin: 0 10px;
  margin-bottom: 5px;
}

/* --- Masonry grid --- */
.masonry-grid { columns: 1; }
@media (min-width: 768px)  { .masonry-grid { columns: 2; } }
@media (min-width: 1024px) { .masonry-grid { columns: 3; } }

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

/* --- Hover zoom on cards --- */
.hover-zoom img {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-zoom:hover img {
  transform: scale(1.05);
}

/* --- Mobile nav --- */
#mobile-menu {
  display: none;
}

#mobile-menu.open {
  display: flex;
}