/* ============================
   Luis Portfolio – styles.css
   Clean, modern, recruiter-friendly
   ============================ */

:root{
  --bg: #0b0d12;
  --surface: #111522;
  --surface-2: #151a2a;
  --text: #e9edf5;
  --muted: rgba(233,237,245,.72);
  --muted-2: rgba(233,237,245,.55);
  --border: rgba(255,255,255,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.22);

  --accent: #5aa7ff;
  --accent-2: #7cf3d0;

  --radius: 18px;
  --radius-sm: 12px;

  --max: 980px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: radial-gradient(1200px 700px at 20% -10%, rgba(90,167,255,.18), transparent 60%),
              radial-gradient(1000px 600px at 90% 10%, rgba(124,243,208,.10), transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
a:hover{
  border-bottom-color: rgba(90,167,255,.85);
  color: #ffffff;
}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 44px 18px 72px;
}

/* ============================
   Top Header / Intro
   ============================ */

.header{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  align-items: center;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.header::after{
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(600px 240px at 25% 0%, rgba(90,167,255,.14), transparent 60%),
              radial-gradient(600px 260px at 90% 20%, rgba(124,243,208,.10), transparent 65%);
  pointer-events: none;
}

/* ============================
   Headshot / Avatar Fix
   ============================ */

.avatar {
  width: 96px;              /* slightly smaller for balance */
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;

  /* subtle framing */
  border: 2px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
}

/* The actual image */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* THIS is the key fix */
  object-position: center 40%; 
  /* pushes image up so chin isn't cut */

  display: block;
}

/* If you don't have a photo yet, put initials in the .avatar */
.avatar .initials{
  font-weight: 700;
  letter-spacing: .5px;
  color: rgba(233,237,245,.88);
}

.header-content{
  position: relative;
  z-index: 1;
}

.name{
  margin: 0;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -0.02em;
}

.role{
  margin: 6px 0 10px;
  font-size: 15px;
  color: var(--muted);
}

.summary{
  margin: 0;
  color: var(--text);
  max-width: 70ch;
}

.meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-size: 13px;
}

.pill strong{
  color: rgba(233,237,245,.92);
  font-weight: 600;
}

/* ============================
   Section Layout
   ============================ */

.section{
  margin-top: 34px;
}

.section-title{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
}

.section-title h2{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.section-title .hint{
  font-size: 13px;
  color: var(--muted-2);
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

/* ============================
   Skills
   ============================ */

.skills-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.skill{
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 14px;
}

.skill b{
  color: rgba(233,237,245,.95);
  font-weight: 600;
}

/* ============================
   Email Samples
   ============================ */

.sample{
  margin-top: 16px;
}

.sample + .sample{
  margin-top: 22px;
}

.sample-head{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.sample-title{
  margin: 0;
  font-size: 16px;
}

.sample-notes{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
}

.media{
  margin-top: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  background: rgba(255,255,255,.03);
}

.media img{
  width: 100%;
  display: block;
}

/* Optional: two-up desktop + mobile images */
.media-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  align-items: start;
}
.media-grid .media{
  margin-top: 0;
}

/* ============================
   Wireframes – Square Tiles (Less White Space)
   ============================ */

.wireframe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Square tile */
.wireframe {
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255,255,255,.12);
  background: #ffffff;
  overflow: hidden;
  display: block;
}

/* Fill the square and crop excess margins */
.wireframe img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* key change */
  object-position: center;    /* adjust if needed */
  display: block;
}

/* Responsive */
@media (max-width: 900px) {
  .wireframe-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================
   Footer
   ============================ */

.footer{
  margin-top: 54px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-size: 14px;
}

.footer a{
  color: rgba(233,237,245,.88);
}

/* ============================
   Responsive
   ============================ */

@media (max-width: 720px){
  .header{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .avatar{
    width: 92px;
    height: 92px;
  }
  .skills-grid{
    grid-template-columns: 1fr;
  }
  .media-grid{
    grid-template-columns: 1fr;
  }
}

/* ============================
   Email Development Grid Fix
   ============================ */

.email-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Reset list-style spacing that was meant for stacked layouts */
.email-grid .sample,
.email-grid .sample + .sample {
  margin-top: 0 !important;
}

/* Make each email item feel like a clean tile */
.email-grid .sample {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-soft);

  /* Remove the default link underline/border used for text links */
  border-bottom: none;
}

.email-grid .sample:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Tighten title spacing */
.email-grid .sample-head {
  display: block;     /* override any grid layout from other sections */
}
.email-grid .sample-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

/* Make thumbnails consistent so the row looks aligned */
.email-grid .media {
  margin-top: 0;
  height: 340px;               /* consistent tile height */
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

.email-grid .media img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* show full email screenshot */
  display: block;
}

/* Tablet */
@media (max-width: 1024px) {
  .email-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .email-grid .media {
    height: 320px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .email-grid {
    grid-template-columns: 1fr;
  }
  .email-grid .media {
    height: auto;              /* let it breathe on mobile */
  }
}

/* ============================
   Email Design: Cropped Preview + Modal
   ============================ */

/* Crop the email design preview to show only the top portion */
.email-design-grid .media {
  height: 260px;           /* adjust to taste */
  overflow: hidden;
  padding: 0;              /* remove inner padding so crop is clean */
  border-radius: var(--radius);
}

/* Show only a portion (top) of the image in the card */
.email-design-grid .media img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0); /* keep top visible */
}

/* Make email design tiles feel clickable */
.email-design-grid .sample {
  cursor: pointer;
}

/* Optional: subtle "View" affordance on hover */
.email-design-grid .sample .media {
  position: relative;
}

.email-design-grid .sample .media::after {
  content: "View full email";
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}

.email-design-grid .sample:hover .media::after {
  opacity: 1;
  transform: translateY(0);
}

/* ============================
   Disable card hover lift
   ============================ */

.sample {
  transform: none !important;
}

.sample:hover {
  transform: none !important;
  box-shadow: var(--shadow-soft) !important;
}

/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(6px);
}

.modal.is-open {
  display: flex;
}

.modal__dialog {
  width: min(920px, 100%);
  max-height: 90vh;
  overflow: hidden;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,18,18,.95);
  box-shadow: var(--shadow);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.modal__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.modal__close {
  appearance: none;
  border: 0;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.modal__close:hover {
  background: rgba(255,255,255,.12);
}

.modal__body {
  padding: 16px;
  max-height: calc(90vh - 54px);
  overflow: auto;
}

/* Full email image in modal */
.modal__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.email-design-grid .sample-title {
  color: #ffffff;
  letter-spacing: 0.2px;
}

/* ============================
   Websites & Apps: Split Layout
   ============================ */

/* Turn sample into a 2-column layout */
.split-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 32px;
  align-items: center;
}

/* Image column */
.split-layout .media,
.split-layout .media-grid {
  margin: 0;
}

/* Text column spacing */
.split-layout .sample-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Prevent images from getting too tall */
.split-layout .media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .split-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================
   Secondary Button
   ============================ */

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;

  margin-top: 8px;
  padding: 10px 16px;

  font-size: 14px;
  font-weight: 500;
  color: #ffffff;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;

  text-decoration: none;
  cursor: pointer;
}

.btn-secondary:hover {
  background: rgba(255,255,255,.12);
}

/* ============================
   Figma Embed (Responsive)
   ============================ */

.embed {
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

.embed--figma {
  width: 100%;
  height: 700px; /* desktop default */
}

@media (max-width: 900px) {
  .embed--figma {
    height: 560px;
  }
}

@media (max-width: 640px) {
  .embed--figma {
    height: 520px;
  }
}

/* ============================
   Rotate wireframe images
   ============================ */

.rotate-90 {
  transform: rotate(90deg);
}

.rotate--90 {
  transform: rotate(-90deg);
}