/* ===========================
   Gold Detailing — Part 3 (author-tuned)
   Layouts, Motion, Form Controls, Utilities
   =========================== */

/* 0) Root motion & control tokens */
:root{
  --motion-distance-sm: 6px;
  --motion-distance-md: 12px;
  --motion-distance-lg: 20px;

  --ring-color: color-mix(in oklab, var(--gdt-gold-500) 70%, white 30%);
  --ring-offset: 2px;

  --input-bg: rgba(255,255,255,.035);
  --input-border: rgba(255,255,255,.12);
  --input-border-hover: rgba(255,255,255,.2);
  --input-border-focus: color-mix(in oklab, var(--gdt-gold-500) 55%, white 45%);
  --input-text: #e9ecf2;
  --input-muted: var(--gdt-muted);
  --input-radius: 12px;

  --switch-on: var(--gdt-gold-500);
  --switch-off: rgba(255,255,255,.25);
}

/* =========================================================
   1) Global layout helpers
   ========================================================= */
.wrapper{ max-width: var(--gdt-grid); padding-inline: var(--gdt-grid-pad); margin-inline: auto }
.stack{ display:flex; flex-direction:column; gap: var(--gdt-gap) }
.stack-sm{ gap: 12px } .stack-lg{ gap: var(--gdt-gap-lg) }

.cluster{ display:flex; flex-wrap:wrap; gap: clamp(8px, 1.2vw, 14px); align-items:center }

.grid{ display:grid; gap: clamp(14px, 2vw, 24px) }
.grid-2{ grid-template-columns: repeat(2, 1fr) }
.grid-3{ grid-template-columns: repeat(3, 1fr) }
.grid-4{ grid-template-columns: repeat(4, 1fr) }
.grid-auto{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }

.media-fluid{ width:100%; height:auto; display:block }

/* Section dividers (variants) */
.section.edge-soft::before, .section.edge-soft::after{ height:56px; transform: skewY(-1.6deg) }
.section.edge-deep::before, .section.edge-deep::after{ height:110px; transform: skewY(-3deg) }

/* Extra subtle textures (opt‑in) */
.pattern.dots{
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.045) 0 1.2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,.045) 0 1.2px, transparent 2px);
  background-size: 20px 20px, 20px 20px;
  background-position: 0 0, 10px 10px;
}
.pattern.diag{
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 8px, transparent 9px 16px);
}
.pattern.gold-faint{
  background-image:
    radial-gradient(1200px 600px at -10% -30%, rgba(210,180,108,.10), transparent 60%),
    radial-gradient(800px 400px at 110% -20%, rgba(210,180,108,.07), transparent 70%);
}

/* =========================================================
   2) Motion: micro‑interactions & reveals
   ========================================================= */
.reveal-up{ opacity:0; transform: translateY(16px); transition: opacity var(--gdt-mid) var(--gdt-ease), transform var(--gdt-mid) var(--gdt-ease) }
.reveal-up.revealed{ opacity:1; transform:none }

.reveal-right{ opacity:0; transform: translateX(16px); transition: opacity var(--gdt-mid) var(--gdt-ease), transform var(--gdt-mid) var(--gdt-ease) }
.reveal-right.revealed{ opacity:1; transform:none }

.reveal-pop{ opacity:0; transform: scale(.96); transition: opacity var(--gdt-mid) var(--gdt-ease), transform var(--gdt-mid) var(--gdt-ease) }
.reveal-pop.revealed{ opacity:1; transform: none }

/* Micro‑hover */
.hover-raise{ transition: transform var(--gdt-mid) var(--gdt-ease), box-shadow var(--gdt-mid) var(--gdt-ease) }
.hover-raise:hover{ transform: translateY(-4px); box-shadow: var(--gdt-shadow-2) }

.hover-tilt{ transform-style: preserve-3d; perspective: 600px; transition: transform var(--gdt-mid) var(--gdt-ease) }
.hover-tilt:hover{ transform: rotateX(2deg) rotateY(-2deg) }

/* Shimmer utility */
.shimmer{
  position:relative; overflow:hidden;
  background: linear-gradient(110deg, rgba(255,255,255,.04) 8%, rgba(255,255,255,.08) 18%, rgba(255,255,255,.04) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.8s var(--gdt-ease) infinite;
}
@keyframes shimmer{ 0%{ background-position: 200% 0 } 100%{ background-position: -200% 0 } }

/* Glow utility (brass aura) */
.glow-gold{ box-shadow: 0 0 0 2px rgba(210,180,108,.28), 0 0 24px rgba(210,180,108,.18) }

/* Parallax-lite (decorative) */
.hero.parallax .hero-image, .hero.parallax .hero-video{ transform: translateY(-2.5%); will-change: transform }
@media (prefers-reduced-motion: no-preference){
  .hero.parallax .hero-image, .hero.parallax .hero-video{ animation: parallaxHero 14s ease-in-out infinite alternate }
}
@keyframes parallaxHero{ 0%{ transform: translateY(-2.5%) scale(1.02) } 100%{ transform: translateY(2.5%) scale(1.02) } }

/* Button ripple (optional) */
.btn.ripple{ overflow:hidden; position:relative }
.btn.ripple:after{
  content:""; position:absolute; inset:auto; width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.25);
  transform: scale(0); opacity:0;
}
.btn.ripple:active:after{
  left:50%; top:50%; transform: translate(-50%,-50%) scale(16);
  transition: transform 600ms var(--gdt-ease), opacity 600ms var(--gdt-ease);
  opacity:.25;
}

/* =========================================================
   3) Form controls (dark-friendly, brass focus rings)
   ========================================================= */
.form{ display:grid; gap: 12px }
.form-row{ display:grid; gap:10px; grid-template-columns: 1fr 1fr }
.form-row > .field, .field{ display:grid; gap:6px }
.field label{ font-size:.95rem; color:#eaeff5 }
.field .help{ font-size:.9rem; color: var(--gdt-muted) }

.input, .select, .textarea{
  width:100%; color: var(--input-text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: 12px 14px;
  transition: border-color var(--gdt-fast) var(--gdt-ease), box-shadow var(--gdt-fast) var(--gdt-ease), background var(--gdt-fast) var(--gdt-ease);
}
.input::placeholder, .textarea::placeholder{ color: color-mix(in oklab, var(--gdt-muted) 85%, white 15%) }
.input:hover, .select:hover, .textarea:hover{ border-color: var(--input-border-hover) }
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 var(--ring-offset) rgba(0,0,0,.65), 0 0 0 calc(var(--ring-offset) + 2px) var(--ring-color);
  outline: none;
}
.textarea{ min-height: 120px; resize: vertical }

/* Select caret */
.select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-repeat: no-repeat; background-size: 6px 6px, 6px 6px;
}

/* Checkboxes & radios */
.control{ display:flex; align-items:center; gap:8px; user-select:none; cursor:pointer }
.control input{ position:absolute; opacity:0; width:0; height:0 }
.checkbox, .radio{
  width:18px; height:18px; border-radius:6px; border:1px solid var(--input-border);
  background: var(--input-bg); display:inline-grid; place-items:center; transition: all var(--gdt-fast) var(--gdt-ease)
}
.radio{ border-radius:50% }
.control input:focus + .checkbox, .control input:focus + .radio{
  outline:2px solid transparent; box-shadow: 0 0 0 var(--ring-offset) rgba(0,0,0,.65), 0 0 0 calc(var(--ring-offset) + 2px) var(--ring-color);
  border-color: var(--input-border-focus);
}
.control input:checked + .checkbox{ border-color: var(--gdt-gold-500); background: linear-gradient(180deg, rgba(210,180,108,.25), rgba(210,180,108,.12)) }
.control input:checked + .checkbox::after{ content:""; width:9px; height:9px; background: var(--gdt-gold-500); border-radius:2px }
.control input:checked + .radio{ border-color: var(--gdt-gold-500); background: rgba(210,180,108,.1) }
.control input:checked + .radio::after{ content:""; width:8px; height:8px; background: var(--gdt-gold-500); border-radius:50% }

/* Switch */
.switch{ display:inline-flex; align-items:center; gap:10px }
.switch .track{ width:38px; height:22px; background: var(--switch-off); border-radius:999px; position:relative; transition: background var(--gdt-fast) var(--gdt-ease) }
.switch .thumb{
  position:absolute; width:18px; height:18px; border-radius:50%; background:#0b0f15;
  border:2px solid #fff; left:2px; top:2px; transition: transform var(--gdt-fast) var(--gdt-ease), background var(--gdt-fast) var(--gdt-ease)
}
.switch input{ position:absolute; opacity:0; width:0; height:0 }
.switch input:checked + .track{ background: var(--switch-on) }
.switch input:checked + .track .thumb{ transform: translateX(16px) }

/* Range (non BA) */
.range{ width:100%; height:6px; border-radius:999px; background: rgba(255,255,255,.14); appearance:none }
.range::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background: var(--gdt-gold-500); border:2px solid #111; box-shadow:0 2px 6px rgba(0,0,0,.5)
}

/* Field states */
.is-error .input, .is-error .select, .is-error .textarea{ border-color: rgba(255,107,107,.7) }
.is-error .help{ color:#ff8a8a }
.is-success .input, .is-success .select, .is-success .textarea{ border-color: rgba(57,214,138,.7) }

/* Inline forms */
.inline-form{ display:flex; gap:8px; flex-wrap:wrap }
.inline-form .input{ min-width: 220px }
.inline-form .btn{ white-space:nowrap }

/* Booking placeholder */
.booking-embed .booking-placeholder{
  display:grid; place-items:center; padding: 30px; text-align:center; color: var(--gdt-muted);
  border: 1px dashed rgba(255,255,255,.12); border-radius: var(--gdt-radius); background: rgba(255,255,255,.02);
}
.booking-embed .booking-placeholder p{ margin:0 }

/* Comment form baseline */
.comments-area{ margin-top: 24px }
.comment-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.comment{
  background: var(--gdt-surface); border:1px solid rgba(255,255,255,.06); border-radius: var(--gdt-radius); padding:12px 14px
}
.comment .comment-meta{ font-size:.9rem; color: var(--gdt-muted); margin-bottom: 6px }
.comment .reply a{ color: var(--gdt-gold-400) }

/* =========================================================
   4) Tables, code, alerts, badges, chips
   ========================================================= */
.table{
  width:100%; border-collapse: collapse; border-spacing:0;
  background: var(--gdt-surface); border:1px solid rgba(255,255,255,.06); border-radius: var(--gdt-radius); overflow:hidden;
}
.table th, .table td{ padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06) }
.table th{ text-align:left; background: rgba(255,255,255,.028) }
.table tr:last-child td{ border-bottom:none }

.code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.95em; background: rgba(255,255,255,.06); padding:0 .35em; border-radius: 6px; border:1px solid rgba(255,255,255,.1) }
pre.code-block{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: var(--gdt-radius); padding: 14px; overflow:auto
}

.alert{ border-radius: var(--gdt-radius); padding: 12px 14px; border:1px solid transparent }
.alert.info{ background: rgba(100,149,237,.12); border-color: rgba(100,149,237,.4) }
.alert.success{ background: rgba(57,214,138,.12); border-color: rgba(57,214,138,.4) }
.alert.warn{ background: rgba(255,179,71,.12); border-color: rgba(255,179,71,.4) }
.alert.danger{ background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.4) }

.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
  border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)
}
.badge.gold{ background: rgba(210,180,108,.16); border-color: rgba(210,180,108,.35); color: var(--gdt-gold-300); font-weight:700 }

/* =========================================================
   5) Header/nav fine-tuning + mobile CTA bar
   ========================================================= */
.gdt-nav .container{ position:relative }
.mobile-nav{ box-shadow: 0 -12px 30px rgba(0,0,0,.5) }
body.nav-open{ overflow:hidden }
body.nav-open .mobile-nav{ animation: slideUp var(--gdt-mid) var(--gdt-ease) both }
@keyframes slideUp{ from{ transform: translateY(12px); opacity:.8 } to{ transform: none; opacity:1 } }

/* (Optional) Bottom mobile CTA bar */
.mobile-cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index: var(--z-overlay);
  display:none; background: color-mix(in oklab, var(--gdt-surface) 90%, black 10%);
  border-top:1px solid rgba(255,255,255,.08); padding: 8px var(--gdt-grid-pad);
}
.mobile-cta-bar .row{ display:flex; gap:8px; align-items:center; justify-content:space-between }
.mobile-cta-bar .btn{ flex:1 }
@media (max-width:780px){ .mobile-cta-bar{ display:block } }

/* =========================================================
   6) Footer polishing
   ========================================================= */
.gdt-footer .social-link{
  color:#fff; opacity:.92; transition: color var(--gdt-fast) var(--gdt-ease), transform var(--gdt-fast) var(--gdt-ease)
}
.gdt-footer .social-link:hover{ color: var(--gdt-accent-2); transform: translateY(-2px) }

/* =========================================================
   7) Page/service/blog extras
   ========================================================= */
.page-grid .section-head{ margin-bottom: 0 }
.service-side .card + .card{ margin-top: 12px }
.section.alt .section-head h1{ margin-bottom: 8px }

.article-content figure{
  margin: 1.1em 0; border-radius: var(--gdt-radius); overflow:hidden; border:1px solid rgba(255,255,255,.06)
}
.article-content figure img{ display:block; width:100%; height:auto }
.article-content figure figcaption{
  font-size:.9rem; padding: 8px 10px; color: var(--gdt-muted); background: rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.06)
}

/* =========================================================
   8) Utilities
   ========================================================= */
.m-0{ margin:0 !important }
.mt-1{ margin-top:6px !important } .mb-1{ margin-bottom:6px !important } .ms-1{ margin-left:6px !important } .me-1{ margin-right:6px !important }
.mt-2{ margin-top:10px !important } .mb-2{ margin-bottom:10px !important } .ms-2{ margin-left:10px !important } .me-2{ margin-right:10px !important }
.mt-3{ margin-top:14px !important } .mb-3{ margin-bottom:14px !important } .ms-3{ margin-left:14px !important } .me-3{ margin-right:14px !important }
.mt-4{ margin-top:18px !important } .mb-4{ margin-bottom:18px !important } .ms-4{ margin-left:18px !important } .me-4{ margin-right:18px !important }
.p-0{ padding:0 !important }

.d-none{ display:none !important } .d-inline{ display:inline !important } .d-block{ display:block !important }
.d-flex{ display:flex !important } .d-grid{ display:grid !important }

.flex-1{ flex:1 1 0 }
.items-center{ align-items:center } .items-start{ align-items:flex-start } .items-end{ align-items:flex-end }
.justify-center{ justify-content:center } .justify-between{ justify-content:space-between }
.flex-wrap{ flex-wrap:wrap }

.cols-2{ grid-template-columns: repeat(2, 1fr) }
.cols-3{ grid-template-columns: repeat(3, 1fr) }
.cols-4{ grid-template-columns: repeat(4, 1fr) }

.text-center{ text-align:center } .text-right{ text-align:right }
.text-muted{ color: var(--gdt-muted) } .text-gold{ color: var(--gdt-gold-400) } .text-strong{ font-weight:800 }

.round{ border-radius: var(--gdt-radius) } .round-sm{ border-radius: var(--gdt-radius-sm) } .round-lg{ border-radius: var(--gdt-radius-lg) }
.border{ border:1px solid rgba(255,255,255,.1) } .border-gold{ border:1px solid rgba(210,180,108,.35) }

.shadow-1{ box-shadow: var(--gdt-shadow-1) } .shadow-2{ box-shadow: var(--gdt-shadow-2) }
.z-sticky{ z-index: var(--z-sticky) } .z-overlay{ z-index: var(--z-overlay) } .z-max{ z-index: var(--z-max) }

.w-100{ width:100% }
.maxw-40{ max-width:40ch } .maxw-60{ max-width:60ch } .maxw-80{ max-width:80ch }

/* Responsive helpers */
@media (max-width: 1200px){
  .grid-4{ grid-template-columns: repeat(3, 1fr) }
  .grid-3{ grid-template-columns: repeat(2, 1fr) }
  .grid-2{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 768px){
  .grid-4{ grid-template-columns: repeat(2, 1fr) }
  .grid-3{ grid-template-columns: 1fr 1fr }
  .grid-2{ grid-template-columns: 1fr }
  .form-row{ grid-template-columns: 1fr }
}

/* Print minimal baseline (Part 4 adds full print pack) */
@media print{
  .gdt-topbar, .gdt-nav, .mobile-nav, .gdt-footer, .btn, .burger, video, .hero-overlay{ display:none !important }
  .section{ padding: 16px 0 }
  a{ color:#000; text-decoration:underline }
}

/* Accessibility: focus rings & skip link */
:focus-visible{ outline: 2px solid var(--ring-color); outline-offset: 2px }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{
  position:fixed; left:14px; top:14px; width:auto; height:auto; padding:10px 12px; z-index: var(--z-max);
  background:#000; color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:10px;
}

/* Gold accents */
.gold-gradient{
  background: linear-gradient(180deg, color-mix(in oklab, var(--gdt-gold-500) 85%, white 15%), var(--gdt-gold-700));
  color:#0a0d12;
}
.stroke-gold{ -webkit-text-stroke: 1px var(--gdt-gold-500); color: transparent }
.hr-gold{ height:1px; background: linear-gradient(90deg, transparent, rgba(210,180,108,.45), transparent); border:none; margin: 12px 0 }

/* Global search form */
.search-form{ display:flex; gap:8px; align-items:center }
.search-form .search-field{
  width:100%; color: var(--input-text); background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: var(--input-radius); padding: 12px 14px;
}
.search-form .search-submit{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px; border-radius: var(--gdt-radius); border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); color:#fff;
}

/* Breadcrumbs polish */
.gdt-breadcrumbs li{ position:relative; padding-right:6px }
.gdt-breadcrumbs li a{ transition: color var(--gdt-fast) var(--gdt-ease) }
.gdt-breadcrumbs li a:focus-visible{
  outline:none; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 4px var(--ring-color); border-radius:8px
}

/* Compact variants */
.input.sm, .select.sm, .textarea.sm{ padding:8px 10px; border-radius:10px }
.btn.sm{ padding:8px 12px; border-radius:10px; font-size:.95rem }
.card.sm{ padding: 12px }

/* Toast/notice */
.toast{
  position:fixed; right: 14px; bottom: 14px; z-index: var(--z-max);
  display:grid; gap:8px; min-width: 240px; max-width: 360px;
}
.toast .note{
  background: var(--gdt-surface); border:1px solid rgba(255,255,255,.1);
  border-left: 3px solid var(--gdt-gold-500); border-radius: 10px; padding: 10px 12px; color:#fff;
  box-shadow: var(--gdt-shadow-1)
}

/* Booking embeds */
.booking-embed .btn + .btn{ margin-left: 8px }
.booking-embed iframe{ width:100%; min-height: 540px; border:none; border-radius: var(--gdt-radius); box-shadow: var(--gdt-shadow-1) }

/* Embeds safe area */
.map-embed, .responsive-embed{
  position:relative; width:100%; border-radius: var(--gdt-radius); overflow:hidden; border:1px solid rgba(255,255,255,.08)
}
.responsive-embed::before{ content:""; display:block; padding-top: 56.25% }
.responsive-embed > iframe, .responsive-embed > video{ position:absolute; inset:0; width:100%; height:100%; border:0 }