/* Modern Design System & Layout for Amelia Escalona Portfolio */

/* ================= CUSTOM VARIABLES & THEMES ================= */
:root {
  --color-text-gray: #4d4d4d; /* CMYK 70% */
  --color-name-light: #e6e6e6; /* CMYK 10% */
  --color-name-hover: #cccccc; /* CMYK 20% */
  --color-grid-line: #00b050; /* Exact bright green color of guide lines */
  
  /* Theme Colors */
  --theme-color-red: #9a0000;    /* CMYK C30/M100/Y100/K14 */
  --theme-color-orange: #ffa626; /* CMYK C0/M35/Y85/K0 */
  --theme-color-blue: #001aff;   /* CMYK C100/M90/Y0/K0 */
  
  /* Active Theme (will be updated via body class) */
  --active-theme-color: var(--theme-color-red);

  /* Proportional Grid Coordinates (portfolio & project page defaults) */
  --grid-top: 14.153%;    /* 61mm / 431mm */
  --grid-bottom: 82.83%;  /* (61mm + 296mm) / 431mm */
}

body[data-theme="red"] {
  --active-theme-color: var(--theme-color-red);
}
body[data-theme="orange"] {
  --active-theme-color: var(--theme-color-orange);
}
body[data-theme="blue"] {
  --active-theme-color: var(--theme-color-blue);
}

/* Dynamic grid & aspect ratios based on page type */
body[data-page-type="home-contact"] {
  --grid-top: 11.213%;   /* 41.5mm / 370.1mm */
  --grid-bottom: 91.192%; /* (41.5mm + 296mm) / 370.1mm */
}

/* ================= BASIC RESET & FONTS ================= */
@font-face {
  font-family: 'Eurostile Extd';
  src: local('Eurostile Extd'), local('EurostileExtd'), local('Eurostile Extended'), local('Eurostile-Extended'), local('Eurostile-Extd'), local('Eurostile');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Eurostile Extd';
  src: local('Eurostile Extd Bold'), local('EurostileExtd-Bold'), local('Eurostile Extended Bold'), local('Eurostile-Extended-Bold'), local('Eurostile-Extd-Bold'), local('Eurostile Bold');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  background-color: #ffffff;
  color: var(--color-text-gray);
  font-family: 'Eurostile Extd', sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}

/* Hide inactive language texts dynamically */
body[data-current-lang="es"] .lang-text.en {
  display: none !important;
}
body[data-current-lang="en"] .lang-text.es {
  display: none !important;
}

/* ================= APP CONTAINER ================= */
#app-container {
  position: relative;
  background-color: #ffffff;
  width: 95vw;
  max-width: 1280px;
  container-type: inline-size; /* Enable container query sizing */
  transition: aspect-ratio 0.4s ease, height 0.4s ease, max-height 0.4s ease;
}

/* Home & Contact pages are designed in 16:9 equivalent proportions */
body[data-page-type="home-contact"] #app-container {
  aspect-ratio: 656.17 / 370.1;
  height: calc(95vw * 370.1 / 656.17);
  max-height: calc(1280px * 370.1 / 656.17);
}

/* Portfolio & Projects pages are designed in 3:2 equivalent proportions */
body[data-page-type="portfolio-project"] #app-container {
  aspect-ratio: 656.17 / 431;
  height: calc(95vw * 431 / 656.17);
  max-height: calc(1280px * 431 / 656.17);
}

/* Responsive aspect-ratio corrections for narrow/wide viewports */
@media (min-aspect-ratio: 656.17/431) {
  body[data-page-type="portfolio-project"] #app-container {
    height: 90vh;
    width: calc(90vh * 656.17 / 431);
  }
}
@media (min-aspect-ratio: 656.17/370.1) {
  body[data-page-type="home-contact"] #app-container {
    height: 90vh;
    width: calc(90vh * 656.17 / 370.1);
  }
}

/* ================= PERSISTENT NAVIGATION FRAME ================= */
.nav-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* Top Squares Container */
.squares-container {
  position: absolute;
  top: var(--grid-top);
  left: 0;
  width: 100%;
  display: flex;
  pointer-events: auto;
  transition: top 0.4s ease;
}

.nav-square {
  position: absolute;
  top: 0;
  width: 1.067%; /* 7mm / 656.17mm */
  aspect-ratio: 1 / 1;
  background-color: var(--active-theme-color);
  transform: translate(-50%, -50%);
  transition: background-color 0.4s ease;
  z-index: 15;
}

/* Absolute X placement for squares (aligned with vertical lines) */
#btn-sq-menu {
  left: 14.478%;
  transform: translateY(-50%);
}
#btn-sq-portfolio {
  left: 50.0%;
}
#btn-sq-contact {
  left: auto;
  right: 14.478%;
  transform: translateY(-50%);
}

/* Bottom Links Container */
.links-container {
  position: absolute;
  top: var(--grid-bottom);
  left: 0;
  width: 100%;
  pointer-events: auto;
  transition: top 0.4s ease;
}

.nav-link {
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  font-family: 'Eurostile Extd', sans-serif;
  font-size: 12px; /* Refined 13pt alternative (12px wide for elegance) */
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-gray);
  padding: 10px 20px;
  transition: opacity 0.3s ease;
  z-index: 15;
}

.nav-link:hover {
  opacity: 0.8;
}

/* Absolute X placement for links (aligned with vertical lines) */
#btn-txt-menu {
  left: 14.478%;
  transform: translateY(-50%);
  padding-left: 0;
}
#btn-txt-portfolio {
  left: 50.0%;
}
#btn-txt-contact {
  left: auto;
  right: 14.478%;
  transform: translateY(-50%);
  padding-right: 0;
}

/* ================= PAGE CONTAINER / VIEWS ================= */
#content-window {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 5;
}

.page-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  overflow: hidden;
}

.page-view.active {
  opacity: 1;
  visibility: visible;
}

/* ================= PAGE 1: HOME ================= */
.home-content {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-title {
  position: absolute;
  top: 50%;
  left: 14.478%; /* Start exactly on left guide line */
  width: 71.044%; /* Span exactly to right guide line (85.522% - 14.478%) */
  font-family: 'Eurostile Extd', sans-serif;
  font-size: 5.25cqw; /* Restored to original size, scaling with container width */
  font-weight: 700;
  color: var(--color-name-light);
  transform: translateY(-50%);
  transition: color 0.4s ease;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  
  /* Flex justification for perfect edge alignment with guide lines */
  display: flex;
  justify-content: space-between;
}

.home-title:hover {
  color: var(--color-name-hover);
}

.home-indicators {
  position: absolute;
  top: 68.22%; /* 85mm above bottom line: 91.192% - 22.97% */
  left: 0;
  width: 100%;
}

.indicator {
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  font-family: 'Eurostile Extd', sans-serif;
  font-size: 12px; /* Refined 13pt alternative */
  font-weight: 700;
  color: var(--color-text-gray);
  letter-spacing: 0.1em;
}

.indicator.vol {
  left: 14.478%;
  transform: translateY(-50%);
}

.indicator.num {
  left: auto;
  right: 14.478%;
  transform: translateY(-50%);
}

/* ================= PAGE 2: PORTFOLIO GRID ================= */
.portfolio-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.portfolio-grid {
  position: absolute;
  top: 28.3%; /* 14.15% (top line) + 14.15% (61mm offset) */
  left: 33.617%; /* Center alignment based on 215mm width */
  width: 32.766%; /* 215mm / 656.17mm */
  height: 37.35%; /* 161mm / 431mm */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 2.325%; /* 5mm / 215mm */
  row-gap: 15.5%; /* 25mm / 161mm */
}

.grid-item {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  background-color: #f5f5f5;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.grid-item:hover {
  transform: translateY(-2px);
}

.item-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

.grid-item:hover .item-image {
  filter: grayscale(0%);
}

.item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color 0.4s ease;
}

.grid-item:hover .item-overlay {
  background-color: rgba(255, 255, 255, 0);
}

.item-num {
  font-family: 'Eurostile Extd', sans-serif;
  font-size: 11px; /* Refined 13pt alternative */
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Language Selector */
.lang-selector {
  position: absolute;
  top: 86.5%; /* Shifted down to resolve overlapping with horizontal line (82.83%) */
  left: 85.522%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.lang-btn {
  font-family: 'Eurostile Extd', sans-serif;
  font-size: 12px; /* Refined 13pt alternative */
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-text-gray);
  opacity: 0.5;
  transition: opacity 0.3s ease, font-weight 0.3s ease;
  padding: 2px 0;
  text-align: left;
}

.lang-btn.active {
  font-weight: 700;
  opacity: 1;
}

.lang-btn:hover {
  opacity: 0.9;
}

/* ================= PROJECT PAGES ================= */
.project-page {
  width: 100%;
  height: 100%;
}

.project-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Exact Proportional coordinates for boxes: ALWAYS Centered, matching Project 001 */
.project-boxes {
  position: absolute;
  width: 32.309%;   /* 212mm / 656.17mm */
  height: 65.893%;  /* 284mm / 431mm */
  top: 19.721%;     /* y = (61mm + 24mm) / 431mm */
  left: 33.845%;    /* Centered horizontally: (50% - 32.309% / 2) */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 3;
}

.box {
  width: 100%;
  height: 47.887%;  /* 136mm / 284mm */
  overflow: hidden;
  position: relative;
  background-color: #f7f7f7;
}

.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Big Number Overlay on Plan box */
.project-large-num {
  position: absolute;
  font-family: 'Eurostile Extd', sans-serif;
  font-size: 40px; /* Refined 60pt alternative for elegance */
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 5;
}

/* Text descriptions */
.project-description {
  font-family: 'Eurostile Extd', sans-serif;
  font-size: 1.2vh;
  line-height: 1.7;
  color: var(--color-text-gray);
  text-align: justify;
  z-index: 2;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.project-description::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.lang-text {
  /* Visibility toggled dynamically via display:none on body lang attribute */
}

/* Project label at the bottom right, aligned with right guide line */
.project-title-label {
  position: absolute;
  top: 86.5%; /* Shifted down to resolve overlapping with bottom guide line (82.83%) */
  left: 85.522%;
  font-family: 'Eurostile Extd', sans-serif;
  font-size: 14px; /* Refined 16pt alternative */
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text-gray);
}

/* ---------------- LAYOUT 1: RIGHT TEXT / LEFT IMAGES (Projects 1 & 3) ---------------- */
.layout-right-text .project-description {
  position: absolute;
  left: 68.5%;     /* Placed to the right of the centered boxes (ending at 66.154%) */
  top: 19.721%;
  width: 17.022%;  /* Spans to the Right guide line (85.522%): 85.522% - 68.5% */
  height: 65.893%;
  overflow-y: auto;
  padding-right: 5px;
}

.layout-right-text .project-large-num {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---------------- LAYOUT 2: LEFT TEXT / RIGHT IMAGES (Projects 2 & 4) ---------------- */
.layout-left-text .project-description {
  position: absolute;
  left: 14.478%;   /* Placed to the left of the centered boxes */
  top: 19.721%;
  width: 17.022%;  /* Spans from Left guide line to boxes: 33.845% - 14.478% = 19.367% */
  height: 65.893%;
  overflow-y: auto;
  padding-right: 5px;
}

.layout-left-text .project-large-num {
  left: 20px;
  bottom: 10px;
  top: auto;
  transform: none;
}

/* ================= PAGE 9: CONTACT ================= */
.contact-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.contact-details {
  position: absolute;
  top: 68.22%; /* 85mm above bottom line: 91.192% - 22.97% */
  left: 0;
  width: 100%;
  display: flex;
  pointer-events: auto;
}

.contact-item {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'Eurostile Extd', sans-serif; /* Eurostile Extd supports lowercase */
  font-size: 11px; /* Refined 13pt alternative (11px for delicate look in lowercase) */
  font-weight: 400;
  color: var(--color-text-gray);
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.3s ease;
  pointer-events: auto;
  z-index: 15;
}

.contact-item:hover {
  opacity: 0.7;
}

.contact-item.phone {
  left: 14.478%;
  transform: translateY(-50%);
}

.contact-item.email {
  left: 50.0%;
  text-transform: lowercase;
}

.contact-item.instagram {
  left: auto;
  right: 14.478%;
  transform: translateY(-50%);
}

.contact-footer {
  position: absolute;
  left: auto;
  right: 14.478%;
  font-family: 'Eurostile Extd', sans-serif;
  font-size: 12px; /* Default unified 13pt alternative */
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-gray);
  white-space: nowrap;
  z-index: 15;
  text-align: right;
}

/* Relocate footer position on Home & Contact pages to prevent overlapping */
body[data-page-type="home-contact"] .contact-footer {
  top: 95.0%; /* Shifted down to resolve overlapping with bottom line (91.19%) */
}

/* Specific sizing override for Spanish Contact footer to prevent overflow of "DISEÑO DE INTERIORES" */
body[data-current-lang="es"] .contact-footer {
  font-size: 9px; /* Reduced size so "DISEÑO DE INTERIORES" fits within the 95mm margin */
  letter-spacing: 0.05em; /* Slightly tighter letter spacing to fit */
}

/* Custom Scrollbar for a premium look */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}



/* ================= CAROUSEL / GALLERY SYSTEM ================= */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #111111;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 15;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.carousel-btn:hover {
  background: var(--active-theme-color);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-50%) scale(1.1);
}

.carousel-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-btn.prev {
  left: 29.5%;
}

.carousel-btn.next {
  left: 67.5%;
}

.carousel-indicators {
  position: absolute;
  top: 88.5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 15;
}

.indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot:hover {
  background: rgba(0, 0, 0, 0.3);
}

.indicator-dot.active {
  background: var(--active-theme-color);
  transform: scale(1.25);
}

/* ================= MOBILE RESPONSIVE STYLES ================= */
@media (max-width: 768px) {

  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh;
    display: block;
  }

  #app-container {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  body[data-page-type="home-contact"] #app-container,
  body[data-page-type="portfolio-project"] #app-container {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  /* Rework navigation frame as a premium sticky bottom bar */
  .nav-frame {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1000 !important;
  }

  .squares-container {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50px !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    pointer-events: auto !important;
    z-index: 2000 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
  }

  .nav-square {
    width: 14px !important;
    height: 14px !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-color: var(--active-theme-color) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    border-radius: 0 !important;
  }

  .links-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 70px !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 10px;
    pointer-events: auto !important;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.03);
    z-index: 2000 !important;
  }

  .nav-link {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    padding: 15px 10px !important;
    color: var(--color-text-gray) !important;
    opacity: 0.5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .nav-link::before {
    content: '';
    display: none !important; /* Hide navigation dots on mobile */
  }

  .nav-link.active {
    opacity: 1 !important;
    color: var(--active-theme-color) !important;
    font-weight: bold;
  }

  #btn-txt-menu,
  #btn-txt-contact {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    padding: 15px 10px !important;
  }

  /* Content Window */
  #content-window {
    width: 100% !important;
    height: auto !important;
    flex-grow: 1;
    padding-bottom: 75px !important; /* Make room for the bottom bar */
  }

  .page-view {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 70px) !important;
    opacity: 0;
    visibility: hidden;
    display: none;
    transition: opacity 0.4s ease;
  }

  .page-view.active {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  /* ================= PAGE 1: HOME (MOBILE) ================= */
  .home-content {
    flex-direction: column !important;
    padding: 100px 24px 60px 24px !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: calc(100vh - 70px);
  }

  .home-title-container {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: auto !important;
  }

  .home-title {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important; /* Shrink-wrap to text width */
    font-size: 8.5vw !important; /* Fluid but legible size */
    color: var(--color-name-light) !important; /* Restore original light gray */
    white-space: nowrap !important; /* Prevent wrapping so width calculation is exact */
    text-align: center !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 25px !important;
    transition: color 0.4s ease;
    display: block !important; /* Override flex layout on mobile */
  }

  .home-title:hover, .home-title:active {
    color: var(--color-name-hover) !important; /* Darker gray on hover/touch */
  }

  .home-indicators {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important; /* Stretch to the exact width of the title container */
    max-width: none !important; /* Remove 280px limit */
    margin: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 15px;
  }

  .indicator {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important; /* Reset right shift on mobile */
    transform: none !important;
    font-size: 11px !important;
  }

  /* ================= PAGE 2: PORTFOLIO (MOBILE) ================= */
  .portfolio-content {
    padding: 90px 24px 20px 24px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto !important;
    min-height: calc(100vh - 70px);
  }

  .portfolio-content::before {
    content: "PORTAFOLIO";
    font-family: 'Eurostile Extd', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-text-gray);
    margin-bottom: 25px;
    align-self: flex-start;
    border-bottom: 2px solid var(--active-theme-color);
    padding-bottom: 6px;
  }

  .portfolio-grid {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
  }

  .grid-item {
    aspect-ratio: 1 / 1 !important;
    border-radius: 4px;
  }

  .item-image {
    filter: grayscale(0%) !important; /* Enable colors on mobile directly for better touch engagement */
  }

  .item-overlay {
    background-color: rgba(0, 0, 0, 0.15) !important;
  }

  .item-num {
    font-size: 14px !important;
  }

  .lang-selector {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 100% !important;
    margin-top: 25px !important;
    margin-bottom: 90px !important; /* Safe margin so it is not covered by fixed bottom navigation bar */
    padding: 5px 0 !important;
  }

  .lang-btn {
    font-size: 9px !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    background-color: #fafafa !important;
    letter-spacing: 0.05em !important;
  }

  .lang-btn.active {
    border-color: var(--active-theme-color) !important;
    color: var(--active-theme-color) !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
  }

  /* ================= PROJECT PAGES (MOBILE) ================= */
  .project-page {
    height: auto !important;
  }

  .project-container {
    position: relative !important;
    padding: 85px 20px 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    height: auto !important;
  }

  .project-boxes {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    transform: none !important;
  }

  .box {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  }

  .project-large-num {
    font-size: 28px !important;
    left: 15px !important;
    bottom: 12px !important;
    top: auto !important;
    transform: none !important;
  }

  .project-description {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: var(--color-text-gray) !important;
    opacity: 1 !important; /* Force legibility */
    pointer-events: auto !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    text-align: justify;
  }

  /* In layout 1, desktop had description extremely faint behind. On mobile we show it normally */
  #page-project-001 .project-description {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    opacity: 1 !important;
    z-index: 2 !important;
    padding: 10px 0 !important;
  }

  .project-title-label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    font-size: 12px !important;
    font-weight: 700;
    color: var(--active-theme-color) !important;
    text-align: right !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 12px;
    margin-top: 5px;
    width: 100%;
  }

  /* Hide project details absolute desktop layouts */
  .layout-right-text .project-description,
  .layout-left-text .project-description {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    width: 100% !important;
    overflow-y: visible !important;
  }

  /* ================= PAGE 9: CONTACT (MOBILE) ================= */
  #page-contact .contact-content {
    padding: 100px 24px 60px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: calc(100vh - 70px);
  }

  #page-contact .home-title {
    margin-bottom: 40px !important;
  }

  .contact-details {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
    transform: none !important;
  }

  .contact-item {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important; /* Reset right shift on mobile */
    transform: none !important;
    font-size: 13px !important;
    display: block !important;
    width: 100%;
    text-align: center;
    padding: 14px 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    background-color: #fafafa;
    transition: all 0.3s ease;
  }

  .contact-item:hover {
    border-color: var(--active-theme-color);
    background-color: rgba(0, 0, 0, 0.01);
    color: var(--active-theme-color);
  }

  .contact-footer {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important; /* Reset right shift on mobile */
    transform: none !important;
    width: 100%;
    text-align: center !important;
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 20px;
    margin-top: 10px;
  }

  body[data-page-type="home-contact"] .contact-footer {
    position: relative !important;
    top: auto !important;
  }

  /* Carousel Mobile Overrides */
  .carousel-btn {
    top: calc(85px + (100vw - 40px) * 0.3125) !important; /* Centered relative to the Render box */
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
  }
  .carousel-btn.prev {
    left: 10px !important;
  }
  .carousel-btn.next {
    left: auto !important;
    right: 10px !important;
  }
  .carousel-indicators {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    margin: 5px 0 10px 0 !important;
    z-index: 15 !important;
  }
}