/* DEBUG: uncomment to confirm overrides.css is actually loading */
/* html { outline: 3px solid lime !important; } */

/* 1) Tiles and labels: ensure correct positioning and sizing */
.image-grid a.tile,
.image-grid .tile {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border-radius: 16px;
}

.image-grid .tile img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.image-grid .tile .label {
  position: absolute !important;
  left: 12px !important;
  bottom: 12px !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 2 !important;
  pointer-events: none;
}

.image-grid li { text-align: initial !important; }

/* 2) Feature toggles (References visibility) */
:root{
  --projects-display: none;              /* show the section */
  --projects-link-display: none;   /* show the nav link */
}
#projects { display: var(--projects-display) !important; }
.main-nav a[href="#projects"],
nav a[href="#projects"] { display: var(--projects-link-display) !important; }

/* About visibility toggle (hidden by default for now) */
:root{
  --about-display: none; /* show the About section when set to block */
  --about-link-display: none; /* show the About nav link when set to inline-block */
}
#about { display: var(--about-display) !important; }
.main-nav a[href="#about"],
nav a[href="#about"] { display: var(--about-link-display) !important; }

/* 3) Logo and hero controls */
:root{
  /* Logo size */
  --logo-height: 60px;
  --logo-height-lg: 96px;

  /* Hero (use none to hide, or tweak height) */
  --hero-display: block;
  /* valid clamp: min <= preferred <= max */
  /* increased for a more impactful hero: min / preferred (vw-based) / max */
  --hero-height: clamp(360px, 52vh, 760px);
}

/* Bigger logo */
.site-header .logo img,
.logo img { height: var(--logo-height) !important; }

@media (min-width: 1200px) {
  .site-header .logo img,
  .logo img { height: var(--logo-height-lg) !important; }
}

/* Hero sizing */
.hero { display: var(--hero-display) !important; }
.hero-slide { height: var(--hero-height) !important; aspect-ratio: auto !important; }
.hero-caption {
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: clamp(14px, 1.6vw, 18px) !important;
  background: rgba(11,14,35,0.55) !important;
}

/* Tighten nav padding slightly if the large logo crowds it */
.main-nav a { padding: 4px 10px !important; }

/* References (formerly Projects) — card layout with text */
.references-grid {
  --min: 280px;
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
}

.ref-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--panel, #2f3360);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 16px;
  box-shadow: var(--shadow, 0 10px 32px rgba(0,0,0,0.35));
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ref-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }

.ref-media { position: relative; aspect-ratio: 16/10; background: #0b0e23; }
.ref-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ref-body { padding: 14px; display: grid; gap: 8px; }
.ref-title { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.ref-meta { font-size: 13px; color: var(--muted, #b9c1ef); }
.ref-location::before { content: "• "; opacity: .6; margin-right: 2px; }

.ref-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text, var(--text-light)); }

.ref-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 4px 0 0 0; list-style: none; }
.ref-tags li {
  font-size: 12px; font-weight: 600; color: #cfe4ff;
  background: rgba(111,177,252,0.12);
  border: 1px solid rgba(111,177,252,0.22);
  padding: 4px 8px; border-radius: 999px;
}

/* Optional: show partner logos in full color (remove grayscale) */
.brands-grid .brand img,
.brand img {
  filter: none !important;
  opacity: 1 !important;
}

/* Make Brands section clear (same look as Solutions) */
#brands.section-muted {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Bigger navigation buttons + consistent touch targets */
:root{
  --nav-font-size: 15px;
  --nav-font-size-lg: 16px;
  --nav-pad-y: 8px;
  --nav-pad-x: 12px;
  --nav-gap: 45px;
}

.main-nav { gap: var(--nav-gap) !important; }
.main-nav a {
  display: inline-flex !important;
  align-items: center !important;
  font-size: var(--nav-font-size) !important;
  font-weight: 600 !important;
  padding: var(--nav-pad-y) var(--nav-pad-x) !important;
  min-height: 40px;
  line-height: 1 !important;
  border-radius: 10px !important;
}

/* Scale up slightly on large screens to match a big logo */
@media (min-width: 1200px) {
  .main-nav a {
    font-size: var(--nav-font-size-lg) !important;
    padding: 10px 14px !important;
  }
}

/* Keep language buttons visually in step */
.lang-btn {
  font-size: var(--nav-font-size) !important;
  padding: 8px 12px !important;
}
@media (min-width: 1200px) {
  .lang-btn { font-size: var(--nav-font-size-lg) !important; padding: 10px 14px !important; }
}

/* Slight header padding so taller buttons don’t feel cramped */
.site-header { padding-block: 14px !important; }

/* Center the nav in the header regardless of logo/lang widths */
.site-header {
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
}

/* Place logo on the far left, nav dead center, language on the far right */
.site-header .logo { justify-self: start !important; }
.main-nav { justify-self: center !important; align-items: center !important; }
.lang-switch { justify-self: end !important; }

/* Optional: tiny optical baseline nudge */
:root { --nav-baseline-nudge: -0.5px; }
.main-nav a { transform: translateY(var(--nav-baseline-nudge)); }
@media (min-width: 1200px) {
  .main-nav a { transform: translateY(var(--nav-baseline-nudge)); }
}

/* Mobile polish (≤760px) */
@media (max-width: 760px) {
  :root{
    --logo-height: 36px;
    --nav-font-size: 14px;
    --nav-pad-y: 6px;
    --nav-pad-x: 10px;
    --nav-gap: 12px;
    /* slightly larger mobile hero to retain visual weight on phones */
    --hero-height: clamp(260px, 42vh, 520px);
  }

  .site-header {
    grid-template-columns: auto 1fr auto !important;
    padding-block: 12px !important;
  }
  .main-nav { justify-self: center !important; flex-wrap: wrap; }
  .main-nav a {
    min-height: 36px;
    font-size: var(--nav-font-size) !important;
    padding: var(--nav-pad-y) var(--nav-pad-x) !important;
  }
  .lang-btn { font-size: 14px !important; padding: 6px 10px !important; }

  .image-grid { --min: 220px; }
  .image-grid-3 { --min: 260px; }
  .brands-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .brand img { max-width: 100px; max-height: 44px; }

  .ref-body { padding: 12px; }
  .ref-title { font-size: 16px; }
  .ref-desc { font-size: 13px; }
}

/* Safety: prevent accidental horizontal scrolling */
html, body { overflow-x: hidden; }