/* ========== Andres Portfolio — Global Styles ========== */
:root{
  --bg:#0a0a0a;
  --fg:#ffffff;
  --muted:#cfcfcf;
  --line:#1e1e1e;
  --accent:#ffffff;
  --purple-color:#5708ea; /* keep it white for strict B/W; swap if you want a color later */
  --maxw:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--fg);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header / Nav */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.9);backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;
}
.brand a{
  font-weight:700;letter-spacing:.06em; text-transform:uppercase; font-size:14px; padding:8px 10px; border:1px solid var(--line); border-radius:999px;
}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
nav a{padding:8px 10px;border-radius:10px;display:inline-block}
nav a[aria-current="page"], nav a.active{
  background:var(--purple-color); border:1px solid var(--line);
}

/* Socials */
.socials{display:flex;
gap:10px;align-items:center}

.icon{
width:32px;
height:32px;
display:inline-block;
line-height:0;border:1px solid var(--line);
border-radius:8px;
padding:6px}

.icon:hover{background:#5708ea}

/* Hero */
.hero{padding:80px 0;border-bottom:1px solid var(--line)}
.hero h1{font-size:42px;line-height:1.2;margin:0 0 10px}
.hero p{color:var(--muted);max-width:800px;margin:0}

/* Sections / Cards / Grids */
.section{padding:48px 0;border-bottom:1px solid var(--line)}
.section h2{font-size:24px;margin:0 0 16px}
.grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(12,1fr);
}
.grid-3 > *{grid-column:span 12}
.grid-4 > *{grid-column:span 12}

.card{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0d0d0d;
  display:flex;flex-direction:column;min-height:100%;
}
.card .thumb{aspect-ratio:16/9;background:#111;display:flex;align-items:center;justify-content:center}
.card .body{padding:16px}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:var(--muted)}
.card .meta{margin-top:auto;padding:14px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.btn{
  display:inline-block;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#0f0f0f
}
.btn:hover{background:#151515}

/* Gallery */
.gallery{
  display:grid;gap:12px;
  grid-template-columns:repeat(12,1fr);
}
.gallery figure{grid-column:span 12;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0e0e0e}
.gallery figcaption{padding:10px 12px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}

/* Contact form */
form{max-width:720px}
.field{margin-bottom:16px}
label{display:block;margin-bottom:8px;color:var(--muted);font-size:14px}
input,textarea{
  width:100%;padding:12px 14px;border-radius:12px;background:#0f0f0f;border:1px solid var(--line);color:var(--fg);
}
textarea{min-height:160px;resize:vertical}
form .actions{display:flex;gap:12px;align-items:center}
input[type=submit],button[type=submit]{cursor:pointer}

/* Footer */
footer{padding:28px 0;color:var(--muted)}
footer .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}

/* Responsive columns */
@media (min-width:640px){
  .grid-3 > *{grid-column:span 6}
  .grid-4 > *{grid-column:span 6}
  .gallery figure{grid-column:span 6}
}
@media (min-width:1024px){
  .grid-3 > *{grid-column:span 4}
  .grid-4 > *{grid-column:span 3}
  .gallery figure{grid-column:span 4}
}
/* Home hero full photo (contained) */
/* .hero-photo{
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#0f0f0f;
} */
.hero-photo img {
  width:100%;
  height:auto;
  max-height:600px;   /* limits how tall the image can get */
  object-fit:contain; /* keeps full photo visible */
}
/* ========== About Page Styles ========== */
.about-photo{
  margin:24px 0;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#0f0f0f;
}
.about-photo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  max-height:700px; /* adjust if too tall */
}

.resume-btn{
  margin:20px 0 40px;
  text-align:center;
}
.resume-btn .btn{
  padding:12px 28px;
  font-weight:600;
  letter-spacing:.05em;
}
.resume-btn .btn:hover{background:#5708ea}

.hero p {
  font-size: 1.15rem;      /* default is usually around 1rem (16px); this bumps it up */
  line-height: 1.8;        /* adds breathing room between lines */
  color: var(--fg);        /* keeps the clean white text */
  max-width: 850px;        /* keeps it from stretching too wide on desktop */
  margin-bottom: 1.5em;
  text-align: left;
  
}


.hero .container {
  display: flex;
  flex-direction: column;   /* stack items vertically */
  align-items: center;      /* centers them horizontally */
  text-align: center;       /* centers text */
}

/* Adjust paragraph width so it doesn’t stretch too wide */
.hero p {
  max-width: 800px;
  margin: 0 auto 1.5em;
  font-size: 1.2rem;
  line-height: 1.8;
}

/* ===== Case Study Modal ===== */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6);
}
.modal[aria-hidden="false"]{ display:flex; }

.modal-panel{
  background:#0d0d0d; color:var(--fg);
  border:1px solid var(--line); border-radius:18px;
  width:min(850px,95%); max-height:90vh; overflow:auto;
  padding:28px; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal-panel h2{ margin:0 48px 14px 0; font-size:24px; }
.modal-media{ margin:14px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.modal-media img{ width:100%; height:auto; display:block; }
.modal p{ color:var(--muted); line-height:1.8; }

.modal-close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line); background:#0f0f0f; color:var(--fg);
  font-size:24px; line-height:1; cursor:pointer;
}
.modal-close:hover{ background:#151515; }

body.modal-open{ overflow:hidden; }


/* ===== Fullscreen Photography Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.95); /* darker background for full immersion */
}

.modal[aria-hidden="false"] {
  display: flex;
}

.modal-panel.photo-only {
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pmImg {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* keeps full image visible, scaled to fit screen */
  display: block;
}

/* Close button */
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  font-size: 28px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.modal-close:hover {
  background: rgba(0,0,0,0.9);
}

body.modal-open {
  overflow: hidden;
}

/* ===== Footer "Top" button ===== */
.top-link {
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 14px;
  margin-left: 12px;
  transition: all 0.3s ease;
}

/* Hover color = yellow */
.top-link:hover {
  color: var(--purple-color);               /* yellow text */
  border-color: var(--purple-color);        /* yellow border */
  text-decoration: none;
}