/* ============================================
   JD APEX PRIVATE STUDIO — MAIN STYLESHEET
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Geist:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ── TOKENS ── */
:root {
  --background:              #0d141d;
  --surface:                 #0d141d;
  --surface-dim:             #0d141d;
  --surface-container-lowest:#080f17;
  --surface-container-low:   #151c25;
  --surface-container:       #192029;
  --surface-container-high:  #232a34;
  --surface-container-highest:#2e353f;
  --surface-variant:         #2e353f;
  --surface-bright:          #333a44;

  --on-background:           #dce3f0;
  --on-surface:              #dce3f0;
  --on-surface-variant:      #c4c7c7;

  --primary:                 #c9c6c5;
  --primary-fixed:           #e5e2e1;
  --primary-fixed-dim:       #c9c6c5;
  --on-primary:              #313030;
  --primary-container:       #0a0a0a;
  --on-primary-container:    #7b7979;
  --on-primary-fixed:        #1c1b1b;
  --on-primary-fixed-variant:#474646;
  --inverse-primary:         #5f5e5e;

  --secondary:               #c9c6c2;
  --secondary-fixed:         #e5e2dd;
  --secondary-fixed-dim:     #c9c6c2;
  --on-secondary:            #31302d;
  --secondary-container:     #474743;
  --on-secondary-container:  #b7b5b0;
  --on-secondary-fixed:      #1c1c19;
  --on-secondary-fixed-variant:#474743;

  --tertiary:                #ffb3b1;
  --tertiary-fixed:          #ffdad8;
  --tertiary-fixed-dim:      #ffb3b1;
  --on-tertiary:             #561e1f;
  --tertiary-container:      #200002;
  --on-tertiary-container:   #af6563;
  --on-tertiary-fixed:       #3a090c;
  --on-tertiary-fixed-variant:#723433;

  --outline:                 #8e9192;
  --outline-variant:         #444748;
  --inverse-surface:         #dce3f0;
  --inverse-on-surface:      #2a313b;
  --surface-tint:            #c9c6c5;

  --error:                   #ffb4ab;
  --error-container:         #93000a;
  --on-error:                #690005;
  --on-error-container:      #ffdad6;

  --oxblood:                 #6B2E2E;
  --oxblood-dark:            #5a2525;

  /* Spacing */
  --margin-mobile:  24px;
  --margin-desktop: 64px;
  --gutter:         24px;
  --section-gap:    160px;
  --unit:           8px;

  /* Typography */
  --font-display:   'Bodoni Moda', serif;
  --font-body:      'Geist', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

::selection {
  background: var(--primary);
  color: var(--on-primary);
}

a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }
img { display: block; max-width: 100%; }
input, textarea, select { font-family: inherit; }

/* ── TYPOGRAPHY CLASSES ── */
.font-display-lg    { font-family: var(--font-display); font-size: 80px;  line-height: 88px;  letter-spacing: -0.04em; font-weight: 700; }
.font-display-mob   { font-family: var(--font-display); font-size: 48px;  line-height: 52px;  letter-spacing: -0.02em; font-weight: 700; }
.font-headline-md   { font-family: var(--font-display); font-size: 40px;  line-height: 48px;  letter-spacing: -0.01em; font-weight: 500; }
.font-body-lg       { font-family: var(--font-body);    font-size: 18px;  line-height: 32px;  letter-spacing: 0;       font-weight: 300; }
.font-body-md       { font-family: var(--font-body);    font-size: 16px;  line-height: 28px;  letter-spacing: 0;       font-weight: 400; }
.font-ui-button     { font-family: var(--font-body);    font-size: 14px;  line-height: 20px;  letter-spacing: 0.05em;  font-weight: 500; text-transform: uppercase; }
.font-label-caps    { font-family: var(--font-body);    font-size: 12px;  line-height: 16px;  letter-spacing: 0.2em;   font-weight: 600; text-transform: uppercase; }

/* ── MATERIAL SYMBOLS ── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ── LAYOUT ── */
.px-mobile  { padding-left: var(--margin-mobile);  padding-right: var(--margin-mobile); }
.px-desktop { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }

.page-wrap {
  width: 100%;
  max-width: 100%;
  padding-left: var(--margin-mobile);
  padding-right: var(--margin-mobile);
}
@media (min-width: 768px) {
  .page-wrap {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}

/* ── TOP NAVBAR ── */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--margin-mobile);
  background: rgba(13, 20, 29, 0.80);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(68, 71, 72, 0.3);
}
@media (min-width: 768px) {
  .topnav { padding: 0 var(--margin-desktop); }
}

.topnav__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--on-surface);
  transition: opacity 0.3s;
}
.topnav__brand:hover { opacity: 0.7; }

@media (min-width: 768px) {
  .topnav__brand { font-size: 80px; }
}

.topnav__left,
.topnav__right { display: flex; align-items: center; gap: 24px; }

.topnav__nav-links { display: none; gap: 32px; align-items: center; }
@media (min-width: 768px) { .topnav__nav-links { display: flex; } }

.nav-link {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  transition: color 0.3s;
}
.nav-link:hover  { color: var(--primary); }
.nav-link.active { color: var(--on-surface); border-bottom: 1px solid var(--on-surface); padding-bottom: 2px; }

.lang-toggle { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; font-weight: 600; text-transform: uppercase; }
.lang-toggle a { color: var(--on-surface-variant); transition: color 0.3s; }
.lang-toggle a.active { color: var(--on-surface); border-bottom: 1px solid var(--on-surface); padding-bottom: 2px; }
.lang-toggle a:hover { color: var(--on-surface); }
.lang-toggle span { color: var(--outline-variant); }

/* Mobile menu */
.mobile-menu-btn { display: flex; color: var(--on-surface); }
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }
.topnav__left .lang-toggle { display: none; }
@media (min-width: 768px) { .topnav__left .lang-toggle { display: flex; } }

.mobile-overlay {
  position: fixed;
  inset: 0;
  background: var(--background);
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.mobile-overlay.open { display: flex; }
.mobile-overlay .close-btn {
  position: absolute;
  top: 24px;
  right: var(--margin-mobile);
  color: var(--on-surface);
}

/* ── FOOTER ── */
.site-footer {
  width: 100%;
  background: var(--surface-container-lowest);
  border-top: 1px solid rgba(68, 71, 72, 0.2);
  padding: var(--section-gap) var(--margin-mobile);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media (min-width: 768px) {
  .site-footer {
    padding: var(--section-gap) var(--margin-desktop);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
}
.footer-brand { font-family: var(--font-display); font-size: 40px; letter-spacing: -0.01em; font-weight: 500; color: var(--on-surface); }
.footer-copy  { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; color: var(--on-surface-variant); margin-top: 8px; }
.footer-links { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .footer-links { flex-direction: row; gap: 48px; } }
.footer-links a { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; font-weight: 600; text-transform: uppercase; color: var(--on-surface-variant); transition: color 0.3s; }
.footer-links a:hover   { color: var(--on-surface); }
.footer-links a.current { color: var(--primary); border-bottom: 1px solid rgba(201,198,197,0.3); padding-bottom: 2px; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--oxblood);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px; letter-spacing: 0.05em; font-weight: 500; text-transform: uppercase;
  padding: 16px 32px;
  transition: background 0.3s;
  border: none; cursor: pointer;
}
.btn-primary:hover { background: var(--oxblood-dark); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  font-family: var(--font-body);
  font-size: 14px; letter-spacing: 0.05em; font-weight: 500; text-transform: uppercase;
  padding: 16px 32px;
  transition: background 0.3s, border-color 0.3s;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--surface-variant); }

/* ── HAIRLINES ── */
.hairline   { border-top: 1px solid rgba(68,71,72,0.3); }
.hairline-b { border-bottom: 1px solid rgba(68,71,72,0.3); }
.hairline-all { border: 1px solid rgba(68,71,72,0.3); }

/* ── MASONRY GRID ── */
.masonry-grid { column-count: 1; column-gap: 24px; }
@media (min-width: 768px) { .masonry-grid { column-count: 2; } }
@media (min-width: 1024px) { .masonry-grid { column-count: 3; } }
.masonry-item { break-inside: avoid; margin-bottom: 24px; }

/* ── GALLERY ITEM ── */
.gallery-item { position: relative; overflow: hidden; background: var(--surface-container); cursor: pointer; }
.gallery-item img { width: 100%; height: auto; object-fit: cover; filter: grayscale(1); transition: transform 0.7s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__overlay {
  position: absolute; inset: 0;
  background: rgba(13,20,29,0.80);
  opacity: 0; transition: opacity 0.5s;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px;
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }

/* ── FORM FIELDS ── */
.field { position: relative; margin-bottom: 48px; }
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--outline-variant);
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--on-surface);
  outline: none;
  transition: border-color 0.3s;
  resize: none;
}
.field input:focus,
.field textarea:focus { border-bottom-color: var(--on-surface); }
.field label {
  position: absolute;
  left: 0; top: -16px;
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.2em; font-weight: 600; text-transform: uppercase;
  color: var(--on-surface-variant);
  transition: all 0.2s;
  pointer-events: none;
}

/* ── CALENDAR ── */
.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 16px;
  color: var(--on-surface-variant);
  position: relative;
}
.cal-day.available {
  background: var(--secondary);
  color: var(--on-secondary);
  cursor: pointer;
  border-radius: 2px;
}
.cal-day.full {
  border: 1px solid var(--outline-variant);
  cursor: not-allowed;
}
.cal-day.faded { opacity: 0.3; }

/* ── PROGRESS BAR ── */
.progress-wrap { display: flex; gap: 16px; }
.progress-step { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.progress-step__label { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; font-weight: 600; text-transform: uppercase; color: var(--on-surface-variant); }
.progress-step__label.active { color: var(--on-surface); }
.progress-step__bar { height: 1px; width: 100%; background: var(--outline-variant); }
.progress-step__bar.active { background: var(--on-surface); }

/* ── RADIO TILES ── */
.radio-tile input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-tile input[type="radio"]:checked + .tile {
  border-color: var(--on-surface);
  background: var(--surface-variant);
}
.tile {
  border: 1px solid var(--outline-variant);
  padding: 16px;
  display: flex; align-items: center; justify-content: center;
  height: 96px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: var(--font-body); font-size: 14px; letter-spacing: 0.05em; font-weight: 500; text-transform: uppercase;
  color: var(--on-surface);
  text-align: center;
}
.tile:hover { border-color: var(--on-surface-variant); }

/* ── SIZE TILE ── */
.size-tile input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.size-tile input[type="radio"]:checked + .stile { background: var(--on-surface); color: var(--background); }
.stile {
  width: 64px; height: 64px;
  border: 1px solid var(--outline-variant);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body); font-size: 16px; color: var(--on-surface);
}
.stile:hover { border-color: var(--on-surface); }

/* ── SCROLL FADE ── */
.fade-on-scroll { opacity: 0; transition: opacity 1s ease-in-out; }
.fade-on-scroll.visible { opacity: 1; }

/* ── UTILS ── */
.text-gradient {
  background: linear-gradient(to right, var(--on-surface), var(--on-surface-variant));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}