/* ================================
   PhotoByOre – Combined Stylesheet (with fallbacks)
   1) Lightbox styles  (fit-to-screen, no initial zoom)
   2) Core site styles
================================ */

/* ===== Lightbox (patched) ===== */
:root{
  --lb-bg: rgba(10,10,10,0.92);
  --lb-fg: #f6f6f3;
}

/* Backdrop */
.lightbox-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.lightbox-backdrop.is-open{ display: flex; }

/* Dialog sized to viewport (no initial zoom) */
.lightbox-dialog{
  position: relative;
  width: min(96vw, 1400px);
  height: min(88vh, 900px);
  height: 96dvh;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Perfect centering */
.lightbox-stage{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

/* HARD reset: ensure the image always fits screen and never starts zoomed */
.lightbox-stage > img,
.lightbox .lightbox-content{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 94vw !important;    /* tighter cap = fewer “oversized” looks */
  max-height: 90vh !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;     /* kill any inherited scale/translate */
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  border-radius: 8px;
  box-sizing: content-box !important;
}

/* Controls */
.lightbox-prev, .lightbox-next, .lightbox-close{
  position: absolute;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 999px;
  display: grid; place-items: center;
  cursor: pointer; user-select: none;
  z-index: 2;
  line-height: 0; font-size: 0;
  -webkit-tap-highlight-color: transparent;   /* nicer on mobile */
  touch-action: manipulation;
}
.lightbox-prev{ left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-close{ top: 12px; right: 12px; transform: none; }

.lightbox-prev:hover, .lightbox-next:hover, .lightbox-close:hover{ background: rgba(0,0,0,.6); }
.lightbox-prev:focus, .lightbox-next:focus, .lightbox-close:focus{ outline: 2px solid #fff; outline-offset: 2px; }

/* IMPORTANT: make SVGs ignore pointer events so the button gets the click (fixes “two taps” bug) */
.lightbox-prev svg,
.lightbox-next svg,
.lightbox-close svg{
  width: 22px; height: 22px; display: block;
  pointer-events: none;   /* <<< this ensures a single click closes */
}

/* UI (optional) */
.lightbox-ui{
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  color: var(--lb-fg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font: 14px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 0 12px;
}
.lightbox-caption{ opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75%; text-align: left; }
.lightbox-counter{ opacity: .9; letter-spacing: .02em; }

/* Mobile tweaks */
@media (max-width: 768px){
  .lightbox-stage > img,
  .lightbox .lightbox-content{
    max-width: 92vw !important;
    max-height: 84vh !important;
  }
  .lightbox-prev, .lightbox-next, .lightbox-close{ width: 52px; height: 52px; }
  .lightbox-prev svg, .lightbox-next svg, .lightbox-close svg{ width: 24px; height: 24px; }
  .lightbox-prev{ left: 10px; }
  .lightbox-next{ right: 10px; }
  .lightbox-close{ top: 10px; right: 10px; }
}

}

/* ===== Core Site Styles ===== */

/* Base reset */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ margin: 0; padding: 0; }

body{
  font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color: #f9f9f7;
  color: #111;
  line-height: 1.5;
}

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

/* Header / Nav */
header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #f9f9f7;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo a{
  font-family: 'Didot', Georgia, 'Times New Roman', serif; /* portfolio brand font */
  font-size: 24px;
  color: #111;
  letter-spacing: .02em;
}

/* Desktop nav */
.navbar ul{
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar a{
  position: relative;
  padding: 6px 0;
  transition: color .25s ease;
}
.navbar a::after{
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background-color: #c7a17a;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.navbar a:hover::after{ transform: scaleX(1); transform-origin: left; }

/* Hamburger (mobile) */
.hamburger{ display: none; font-size: 28px; cursor: pointer; }

@media (max-width: 768px){
  .navbar ul{
    display: none;
    position: absolute;
    right: 20px; top: 70px;
    background: #f9f9f7;
    flex-direction: column;
    width: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    padding: 10px 0;
  }
  .navbar ul.show{ display: flex; }
  .navbar ul li{ text-align: center; padding: 10px 0; }
  .hamburger{ display: block; }
}

/* Home hero */
.home{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  text-align: center;
  padding: 20px;
}
.home-content h1{
  font-family: 'Didot', Georgia, 'Times New Roman', serif;
  font-size: 40px;
  margin-bottom: 20px;
  color: #111;
}

/* Floating + shimmer effect */
.float-text{
  position: relative;
  background: linear-gradient(90deg, #111, #b08e68, #111);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: float 5s ease-in-out infinite, shimmer 3s linear infinite;
}
@keyframes float{
  0%, 100%{ transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes shimmer{
  0%{ background-position: 0% center; }
  100%{ background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce){
  .float-text{ animation: none; }
}
@media (max-width: 768px){
  .home-content h1{ font-size: 32px; }
}

/* Buttons */
.btn-workshop,
a.btn,
button.btn{
  display: inline-block;
  padding: 12px 24px;
  background-color: #c7a17a;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .3s, transform .2s;
}
.btn-workshop:hover,
a.btn:hover,
button.btn:hover{
  background-color: #b08e68;
  transform: translateY(-2px);
}

/* Utilities */
.fade-in{ opacity: 0; animation: fadeIn 1.2s ease forwards; }
@keyframes fadeIn{ to{ opacity: 1; } }

/* Sections */
section{ padding: 20px; }

/* Booking section tweaks */
#booking h2{
  font-family: 'Didot', Georgia, 'Times New Roman', serif;
  margin: 0 0 .5rem;
  color: #3E2C23;
}
#booking p{ color: #333; }
#booking a{
  background: #556B2F;
  color: #fff;
  border-radius: 5px;
}
#booking a:hover{ background: #445523; }

/* Optional: helps form elements look consistent */
input, select, textarea, button{ font: inherit; }

/* ===== Contact (modern/minimal) ===== */
.contact--modern{
  background:#f9f9f7;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(24px, 4vw, 48px) 16px;
}
.contact-shell{
  width:min(760px, 100%);
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:16px;
  padding: clamp(20px, 4vw, 36px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.contact-hero{
  text-align:center;
  margin-bottom: clamp(16px, 3vw, 28px);
}
.contact-hero h1{
  font-family:'Didot', Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 6px;
  letter-spacing: .01em;
}
.contact-hero p{
  color:#555;
  margin: 0;
  font-size: 15px;
}
.contact-form .hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.fields{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column: 1 / -1; }
.field label{ font-size: 13px; color:#444; }
.field input,
.field textarea{
  width:100%;
  padding: 12px 12px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  font: 15px 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder,
.field textarea::placeholder{ color:#999; }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:#c7a17a;
  box-shadow: 0 0 0 4px rgba(199,161,122,.18);
  background:#fff;
}
.actions{
  display:flex; align-items:center; gap:12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 18px;
  border-radius: 999px;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .15s, box-shadow .2s, background-color .2s, border-color .2s;
  font-weight: 600;
}
.btn--primary{
  background:#c7a17a; color:#fff;
  box-shadow: 0 6px 20px rgba(199,161,122,.28);
}
.btn--primary:hover{
  background:#b08e68;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(199,161,122,.32);
}
.btn:disabled{ opacity:.65; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-icon{ display:block; }
.form-message{ font-size: 14px; min-height: 20px; }
.form-message.is-info{ color:#444; }
.form-message.is-success{ color:#1f7a3b; }
.form-message.is-error{ color:#b3261e; }
@media (max-width: 720px){
  .fields{ grid-template-columns: 1fr; }
}
/* small polish for focus/keyboard users */
.contact-shell:focus-within{
  box-shadow: 0 10px 30px rgba(0,0,0,.06), 0 0 0 3px rgba(199,161,122,.18);
  transition: box-shadow .2s;
}

/* ===== About Modern ===== */
.about-modern {
  background: #f9f9f7;
  padding: clamp(40px, 6vw, 80px) 0;
}
.about-shell {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 50px);
  align-items: center;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; text-align: center; }
}
.about-media {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.about-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.about-panel {
  background: #fff;
  padding: clamp(20px, 4vw, 40px);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}
.about-title {
  font-family: 'Didot', Georgia, serif;
  font-size: clamp(28px, 5vw, 36px);
  margin: 0 0 20px;
  color: #111;
}
.about-panel p {
  margin: 0 0 1rem;
  color: #555;
  line-height: 1.6;
}
.about-quote {
  font-family: 'Didot', Georgia, serif;
  font-size: 20px;
  color: #333;
  font-style: italic;
  margin-top: 20px;
  padding-left: 15px;
  border-left: 3px solid #c7a17a;
}
@media (max-width: 900px) {
  .about-quote { border-left: none; padding-left: 0; }
}

/* ===== Workshop typography harmonized with Portfolio ===== */
.workshop-title{
  text-align:center;
  margin:36px 0 6px;
  font-family: 'Didot', Georgia, 'Times New Roman', serif; /* match portfolio */
  font-size: 36px;
  letter-spacing: .02em;
  color:#111;
}
/* (optional) keep CTA text sans for readability */
.workshop-cta a{
  font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}