/* ===== Site background (gradient instead of flat black) ===== */
:root{
  --bg-image: url("../assets//marquez/marquezChamp2.png"); /* ensure correct path */
  --text: #fff;
}

/* Page gradient */
html, body { height: 100%; }
body{
  margin: 0;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  /* deep red/indigo gradient across whole site */
  background:
    radial-gradient(1100px 600px at 85% -5%, rgba(255,45,45,.20), transparent 60%),
    linear-gradient(180deg, #0b0d13 0%, #10121a 45%, #0d0f17 100%);
}

/* ===== Fixed Top Nav (unchanged, included for completeness) ===== */
.nav{
  position: fixed; top:0; left:0; right:0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; z-index:10;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: rgba(10,10,14,.35);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.nav .brand{ font-weight:800; letter-spacing:.08em; text-decoration:none; color:#fff; }
.nav .links{ display:flex; gap: clamp(10px, 2vw, 24px); }
.nav .links a{ color:#fff; text-decoration:none; font-weight:600; opacity:.9; padding:.25rem .4rem; border-radius:8px; }
.nav .links a:hover{ opacity:1; }
.nav .links a.active{ background: rgba(255,45,45,.18); outline: 1px solid rgba(255,45,45,.45); }

/* Push content below fixed nav */
.hero, .wrap { padding-top: 64px; }

/* ===== Hero with image + gradient overlay ===== */
.hero.hero--contain{
  position: relative; min-height: 100svh;
  display: grid; place-items: center; text-align: center; color: #fff;
  padding: 72px 16px 40px;
  isolation: isolate;
  margin-bottom: 32px; /* equal spacing under hero */
}
.hero.hero--contain::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    /* soft red glow + subtle diagonal */
    radial-gradient(1200px 600px at 85% -5%, rgba(255,45,45,.22), transparent 60%),
    linear-gradient(180deg, rgba(4,6,10,.55), rgba(4,6,10,.75)),
    var(--bg-image) center / contain no-repeat;
  background-color: #090b10; /* letterbox behind contain */
}
@media (max-width: 640px){
  .hero.hero--contain::before{
    background:
      radial-gradient(1000px 500px at 85% -5%, rgba(255,45,45,.22), transparent 60%),
      linear-gradient(180deg, rgba(4,6,10,.45), rgba(4,6,10,.70)),
      var(--bg-image) center / cover no-repeat;
  }
}

/* ===== Entry card (same look as hero card) ===== */
.entry{
  width:min(92vw,680px); padding:32px 28px; border-radius:16px;
  background: rgba(10,12,18,.45);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.entry:hover{ transform: translateY(-2px); border-color: rgba(255,45,45,.35); box-shadow: 0 16px 50px rgba(0,0,0,.55); }
.entry .title{ margin:0 0 .25rem; font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight:800; }
.entry .sub{ margin:.3rem 0 1rem; opacity:.9 }
.entry .cta{
  display:inline-block; padding:.6rem .9rem; border-radius:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, #1b1f2c, #161a24);
  color:#fff; text-decoration:none;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.entry .cta:hover{ border-color: rgba(255,45,45,.55); }

/* ===== Projects grid (2 per row max, no overlap) ===== */
#gallery, #projects { /* either id you used */
  width: min(1100px, 92vw);
  margin: 0 auto 56px; /* equal bottom spacing for the section */
}

.cards-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr)); /* MAX TWO columns */
  gap: 18px 18px;        /* vertical, horizontal gaps */
  align-items: start;     /* prevent overlap by stretching rows as needed */
}

/* If you’re still using <section class="gallery wrap"> with direct .entry children */
.gallery.wrap{
  width: min(1100px, 92vw);
  margin: 0 auto 56px;
}
.gallery.wrap{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr)); /* force 2 per row */
  gap: 18px 18px;
  align-items: start;
}

/* Make card-blocks behave; no absolute/floats → no overlap */
.gallery .entry, .cards-grid .entry{
  display: block;
  width: 100%;
  position: relative;     /* default flow */
}

/* 1 column on small screens */
@media (max-width: 720px){
  .cards-grid, .gallery.wrap{
    grid-template-columns: 1fr;
  }
  .entry{ width: 100%; }
}


/* Global link reset: white, no underline */
a { color: #fff; text-decoration: none; }
a:hover { text-decoration: none; }

/* Nav: keep style + spacing */
.nav .links a { padding:.25rem .5rem; border-radius:8px; }
.nav .links a.active { background: rgba(255,45,45,.18); outline:1px solid rgba(255,45,45,.45); }

/* Space below hero so Projects aren’t glued to the fold */
.hero.hero--contain { margin-bottom: clamp(24px, 4vw, 40px); }

/* Projects section container: nearly full-width (small gap at edges) */
.projects{
  width: min(1400px, 96vw);
  margin: 0 auto;
  padding: 0 0 clamp(48px, 6vw, 80px);       /* bottom space even with few cards */
}

/* Center the section title */
.projects-title{
  text-align: center;
  margin: 0 0 16px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Grid: exactly 2 per row on desktop, wraps cleanly (no overlap) */
.cards-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 18px;
  align-items: start;
}

/* Make card links behave like blocks and fit the grid cells */
.link-card{
  display: block;
  width: 100%;
}

/* Prevent width constraints from the hero card style inside the grid */
.cards-grid .entry{
  width: 100%;
  max-width: none;
}

/* Buttons inside link-cards */
.btn-cta{
  display:inline-block; padding:.55rem .85rem; border-radius:10px; font-weight:700;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, #1b1f2c, #161a24);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Mobile: 1 card per row for readability */
@media (max-width: 900px){
  .cards-grid{ grid-template-columns: 1fr; }
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(12,13,18,.6), rgba(9,10,15,.9));
  padding: clamp(20px, 3vw, 28px) 0 clamp(36px, 4vw, 48px);
}
.footer-inner{
  width: min(1400px, 96vw);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.footer-inner a { opacity: .95; }
.footer-inner a:hover { opacity: 1; }
.muted{ color: #9aa3b2; }


/* ==== Projects grid: robust two-up, no overlap ==== */
.projects{
  width: min(1400px, 96vw);
  margin: 0 auto clamp(48px, 6vw, 80px);
}

/* 1 column by default (prevents squeeze on narrow viewports) */
.cards-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

/* 2 columns when there's room */
@media (min-width: 900px){
  .cards-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* CRITICAL: kill the hero width on cards inside the grid */
.cards-grid .entry{
  width: 100% !important;     /* override the hero's min(92vw,680px) */
  max-width: none !important;
  box-sizing: border-box;
}

/* Make the whole card a block link and white text */
.link-card{ display:block; color:#fff; text-decoration:none; }
.link-card:hover{ text-decoration:none; }

/* Optional: smaller headings inside grid so they never push width */
.cards-grid .entry .title{ font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.cards-grid .entry .sub{ margin:.35rem 0 .7rem; }


/* === Hero background fader (cross-fade next image) === */
.hero { position: relative; }
.hero .hero-fader{
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .6s ease;
  background: center / contain no-repeat;
  z-index: 0;           /* above ::before (-1), below content */
  pointer-events: none;
}
/* match mobile behavior (cover on small screens) */
@media (max-width: 640px){
  .hero .hero-fader{ background-size: cover; }
}