/* ==============================================
   Luxeciaga — Global Layout & Typography
   Mirrors home.html shared styles (fonts, colors,
   nav, hero, cards, buttons, forms, footer)
   ============================================== */

/* Theme Tokens */
:root{
  --bg:#140e0c;
  --brand:#e6450d;
  --text:#ffffff;
  --muted:#ffffffcc;
  --card:#1b1513;
  --ring:#ffffff22;
}

/* Fonts (self-hosted, same naming as home.html) */
@font-face{
  font-family:"Monument";
  src:url("fonts/MonumentExtended-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Monument";
  src:url("fonts/MonumentExtended-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Open Sauce";
  src:url("fonts/OpenSauceOne-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Open Sauce";
  src:url("fonts/OpenSauceOne-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* Base Reset */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Open Sauce",system-ui,-apple-system,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Layout helpers */
.container{width:min(1120px,92vw);margin-inline:auto}
.grid{display:grid;gap:1.2rem}
section{padding:70px 0}
.muted{color:var(--muted)}
.monument-font{font-family:"Monument","Open Sauce",sans-serif;letter-spacing:.02em;font-weight:700}

/* Typography (match home.html) */
h1,h2{
  font-family:"Monument","Open Sauce",sans-serif;
  letter-spacing:.02em;
  margin:0;
}
h1{
  font-size:clamp(2.2rem,1.4rem + 2.8vw,4rem);
  line-height:1.05;
}
h2{
  font-size:clamp(1.6rem,1.1rem + 1.2vw,2.4rem);
  margin:0 0 14px;
  font-weight:700;
}
/* Hero headline should be Regular (400), not Bold */
.hero h1{font-weight:400}

/* Buttons / Chips */
.btn{
  display:inline-block;
  padding:.85rem 1.2rem;
  border-radius:999px;
  background:var(--brand);
  color:#000;
  font-weight:800;
  text-decoration:none;
  border:2px solid transparent;
  transition:all .3s ease;
}
.btn:hover{filter:brightness(.95);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--text);border:2px solid var(--brand)}
.tag{
  display:inline-block;
  padding:.35rem .7rem;
  border-radius:999px;
  background:#ffffff14;
  border:1px solid var(--ring);
  font-size:.85rem;
  margin:.2rem;
}

/* Header / Navigation (same gradient + layout) */
header{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1500px 600px at -10% -10%, #000 0%, #1b1513 20%, #4a1f14 45%, var(--brand) 75%),
    radial-gradient(900px 500px at 110% 0%, #ff7a00 0%, #e6450d 30%, #b9320d 75%);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;
}
.logo{
  font-family:"Monument","Open Sauce",sans-serif;
  font-weight:700;
  font-size:1.8rem;
  display:flex;align-items:center;gap:.5rem;
  color:var(--text);
  text-decoration:none;
}
.nav-links{display:flex;gap:1.6rem;align-items:center}
.nav-links a{
  color:var(--text);text-decoration:none;font-weight:600;transition:all .3s;
}
.nav-links a:hover{color:var(--brand);transform:translateY(-2px)}

/* Hero */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;align-items:center;
  padding:3.8rem 0 3rem;
}
.hero p{color:var(--muted);margin:.8rem 0 1.2rem}
.hero-img{
  border-radius:22px;overflow:hidden;
  border:1px solid var(--ring);
  box-shadow:0 28px 60px #0006;
}
.hero-img img{width:100%;height:auto;display:block}

/* Slot counter pill (used on home) */
.slots{
  display:flex;align-items:center;gap:.6rem;
  margin:.8rem 0 1.1rem;background:#ffffff10;
  padding:.5rem .8rem;border:1px solid var(--ring);
  border-radius:999px;animation:pulse 2s infinite;
}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.counter{font-variant-numeric:tabular-nums;font-weight:800}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:20px;
  padding:1.2rem;
  transition:all .3s;
}
.card:hover{transform:translateY(-5px);border-color:var(--brand)}

/* Services grid / buttons (shared) */
.services-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(3,1fr)}
.services-grid a{
  display:block;text-align:center;font-weight:900;text-decoration:none;color:#000;
  border-radius:14px;padding:1rem 1.2rem;background:var(--brand);transition:all .3s;
}
.services-grid a:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(230,69,13,.4)}
.service-nav{background:var(--bg);padding:2rem 0;border-top:1px solid var(--ring);border-bottom:1px solid var(--ring)}
.service-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1200px;margin:0 auto;padding:0 2rem}
.service-btn{
  background:var(--brand);color:#000;padding:1rem 2rem;text-decoration:none;
  border-radius:14px;font-weight:900;text-align:center;transition:all .3s;transform:translateY(0);
}
.service-btn:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(230,69,13,.4)}

/* Forms (shared contact form styles) */
form{display:grid;gap:1rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
label{font-size:.92rem;color:var(--muted);display:block;margin-bottom:.5rem}
input,select,textarea{
  width:100%;padding:.9rem .95rem;border-radius:12px;
  background:#0f0b0a;color:var(--text);border:1px solid var(--ring);
  outline:none;font:inherit;transition:border-color .3s;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand)}
textarea{min-height:120px;resize:vertical}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.check{
  display:flex;gap:.55rem;align-items:flex-start;background:#0f0b0a;
  border:1px solid var(--ring);padding:.75rem .8rem;border-radius:12px;transition:border-color .3s;
}
.check:hover{border-color:var(--brand)}
.check input{width:1.1rem;height:1.1rem;margin-top:.15rem}
.submit-btn{
  background:var(--brand);color:#000;padding:1rem 3rem;border:none;
  border-radius:999px;font-size:1.1rem;font-weight:800;cursor:pointer;transition:all .3s;
}
.submit-btn:hover{filter:brightness(.95);transform:translateY(-2px)}

/* Footer */
footer{padding:50px 0 60px;border-top:1px solid var(--ring);color:var(--muted);background:var(--bg)}
.footer-content{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-info{text-align:right}
.footer-info a{color:var(--text);text-decoration:none}

/* Animations */
@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.animate-in{animation:slideInUp 1s ease forwards}

/* Responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .form-grid,.checks{grid-template-columns:1fr}
  .service-buttons{grid-template-columns:1fr}
  .footer-content{flex-direction:column;text-align:center}
  .footer-info{text-align:center}
}

/* ================================================
   LUXECIAGA MOBILE FIX PATCH
   Add this to the end of layout-styles.css
   or include as mobile-fix.css after layout-styles.css
   ================================================ */

/* Prevent horizontal overflow on all pages */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Force word wrapping on all text elements */
h1, h2, h3, h4, h5, h6, p, div, span, li, a, label {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Prevent long URLs or unbreaking strings */
a, .muted, .small {
  word-break: break-word;
}

/* Fix container to never exceed viewport */
.container {
  width: 100%;
  max-width: min(1120px, 92vw);
  padding-left: max(4vw, 16px);
  padding-right: max(4vw, 16px);
  box-sizing: border-box;
}

/* Responsive typography scaling */
h1 {
  font-size: clamp(1.75rem, 5vw, 4rem);
  line-height: 1.1;
  max-width: 100%;
}

h2 {
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  line-height: 1.2;
  max-width: 100%;
}

h3 {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  max-width: 100%;
}

p {
  max-width: 100%;
}

/* Fix hero section ONLY on mobile */
@media (max-width: 900px) {
  .hero {
    padding: 24px 0;
    gap: 1.2rem;
    grid-template-columns: 1fr;
  }

  .hero h1 {
    margin-bottom: 0.8rem;
  }
}

.hero h1 {
  margin-bottom: 0.8rem;
}

/* Ensure images never overflow */
img {
  max-width: 100%;
  height: auto;
}

.hero-img,
.hero-img img {
  width: 100%;
  max-width: 100%;
}

/* Fix navigation on mobile */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    gap: 1rem;
    padding: 12px 0;
  }
  
  .nav-links {
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
  }
  
  .nav-links a,
  .nav-links .btn {
    width: 100%;
    text-align: center;
  }
  
  .logo {
    font-size: 1.4rem;
  }
}

/* Fix button groups on mobile */
@media (max-width: 640px) {
  .hero > div > div[style*="display:flex"],
  .cta-bar {
    flex-direction: column;
    width: 100%;
  }
  
  .btn,
  .btn-outline {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Fix tag chips wrapping */
.chips,
.badges,
div[style*="display:flex"][style*="gap"] {
  max-width: 100%;
}

.tag,
.chip {
  font-size: clamp(0.75rem, 2.5vw, 0.85rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Fix forms on mobile */
@media (max-width: 768px) {
  .form-grid,
  .checks {
    grid-template-columns: 1fr !important;
  }
  
  input,
  select,
  textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* Fix grids on mobile */
@media (max-width: 900px) {
  .split,
  .grid-2,
  .booking {
    grid-template-columns: 1fr !important;
  }
  
  .methods,
  .services-grid,
  .service-buttons,
  .listings,
  .listing-grid,
  .features,
  .products {
    grid-template-columns: 1fr !important;
  }
}

/* Fix process grid specifically */
@media (max-width: 900px) {
  .process-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  .process-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Fix methods grid on renovation page */
@media (max-width: 980px) {
  .method {
    grid-template-columns: 1fr !important;
  }
  
  .pros-cons {
    grid-template-columns: 1fr !important;
  }
}

/* Fix footer on mobile */
@media (max-width: 768px) {
  footer .container {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .footer-content {
    flex-direction: column;
    align-items: center;
  }
  
  .footer-info {
    text-align: center !important;
  }
}

/* Fix slots counter */
.slots {
  max-width: 100%;
  font-size: clamp(0.85rem, 3vw, 1rem);
}

/* Ensure cards never overflow */
.card {
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix listing thumbnails */
.listing .thumb,
.hero-img {
  width: 100%;
  max-width: 100%;
}

/* Additional safety measures */
* {
  max-width: 100%;
  box-sizing: border-box;
}

/* Specific fix for the renovation page LED profile image section */
#process .process-row {
  grid-template-columns: 1fr !important;
}

#process .gallery {
  flex-wrap: wrap;
  justify-content: center;
}

#process .gallery img {
  width: calc(50% - 0.4rem);
  max-width: 200px;
  height: auto;
}

@media (max-width: 640px) {
  #process .gallery img {
    width: 100%;
    max-width: 100%;
  }
}