/* Services & Portfolio Page Redesign for MechLogic
   Designed for Enhanced Readability, White Matte Aesthetic, and Clean Typography */

/* === GLOBAL PAGE CONTAINER OVERRIDES === */
#services-page, #resume-page {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  
  /* Rich, stylized engineering blueprint backdrop for the services and projects pages:
     1. Large-scale structural FEM Truss blueprint SVG (mirrors the homepage interactive mesh in static form)
     2. Secondary smaller structural detail stamp
     3. Radial blue spotlight glow (brand engineering blue)
     4. Radial green highlight glow (validation green)
     5. Crisp 20px grid lines (simulates technical plotting graph paper)
  */
  background-image: 
    url('fem-blueprint-bg.svg'),
    url('fem-blueprint-bg.svg'),
    linear-gradient(to right, rgba(18, 20, 22, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 20, 22, 0.015) 1px, transparent 1px);
    
  background-size: 
    750px auto, /* Primary large truss schematic */
    380px auto, /* Secondary smaller structural detail stamp */
    20px 20px, 
    20px 20px;
    
  background-position: 
    right -100px top 40px,   /* Aligned in the right-side viewport gutter */
    left -80px bottom 100px, /* Offset in the lower-left-side viewport gutter */
    top left, 
    top left;
    
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-attachment: local; /* Scrolls smoothly with the content */
}

/* === SERVICES PAGE REDESIGN === */
.services-container {
  padding: var(--gap-large) 40px 40px 40px; /* Spacious margins */
  max-width: 1600px;
  width: 95%;
  margin: 0 auto;
}

/* Services Cards Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px; /* Increased gap for breathing room */
  margin-bottom: 48px;
}

.service-card {
  position: relative;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  padding: 32px; /* Extra padding */
  display: flex;
  flex-direction: column;
  box-shadow: 0px 4px 12px rgba(18, 20, 22, 0.02); /* Softer drop shadow */
  overflow: hidden; /* Cleanly clip pseudo-elements */
  
  /* Smooth transition for elevation and border accent colors */
  transition: 
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Precision corner crosshair decoration */
.service-card::after {
  content: "+";
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  color: var(--fg-muted);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-accent);
  box-shadow: 
    0px 12px 24px rgba(99, 102, 241, 0.06),
    0px 4px 12px rgba(18, 20, 22, 0.03); /* Rich matte/shadow hybrid */
}

.service-card:hover::after {
  color: var(--brand-accent);
  opacity: 1;
}

.card-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-muted);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.card-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.3rem; /* Slightly larger header */
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: 12px;
}

.card-desc {
  color: var(--fg-secondary);
  font-size: 0.95rem; /* Better readability size */
  line-height: 1.65;
  margin-bottom: 24px;
}

.card-bullets {
  list-style: none;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-bullets li {
  position: relative;
  padding-left: 16px;
  color: var(--fg-primary);
}

.card-bullets li::before {
  content: "→"; /* Clean modern arrow */
  position: absolute;
  left: 0;
  color: var(--fg-muted);
}

/* Featured Projects Section */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.project-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.project-card:hover {
  border-color: var(--border-primary);
  box-shadow: 0px 4px 12px rgba(18, 20, 22, 0.03);
}

.proj-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-muted);
  margin-bottom: 12px;
}

.proj-code {
  font-weight: 700;
  color: var(--fg-primary);
  background-color: var(--bg-tertiary);
  padding: 2px 6px;
  border: 1px solid var(--border-secondary);
}

.proj-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.proj-desc {
  font-size: 0.92rem;
  color: var(--fg-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.tag-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  padding: 2px 8px;
  font-weight: 500;
  color: var(--fg-secondary);
}

/* Cost Estimator Widget */
#service-calculator-widget {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  margin-bottom: 24px;
}

.widget-body {
  padding: 32px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
}

/* === PORTFOLIO RESUME REDESIGN === */

/* Locked Access Panel */
.lock-panel-wrapper {
  padding: 48px 24px;
}

.lock-card {
  max-width: 480px;
  padding: 40px;
  border: 1px solid var(--border-primary);
  box-shadow: 6px 6px 0px rgba(18, 20, 22, 0.08); /* More defined retro-matte shadow */
}

.lock-title {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.lock-desc {
  font-size: 0.95rem;
  color: var(--fg-secondary);
  line-height: 1.55;
  margin-bottom: 24px;
}

.lock-keypad {
  max-width: 240px;
  gap: 10px;
}

.keypad-btn {
  font-size: 16px;
  padding: 12px;
}

/* Unlocked Portfolio Content */
.unlocked-content-wrapper {
  padding: 40px;
  max-width: 1600px;
  width: 95%;
  margin: 0 auto;
}

.unlocked-alert {
  padding: 12px 20px;
  font-size: 11px;
  margin-bottom: 32px;
  border-radius: 0px;
}

/* Layout: Asymmetrical split columns */
.resume-columns {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr; /* Clearer main-to-sidebar ratio */
  gap: 48px; /* Increased gap */
}

.resume-sec {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  padding: 32px; /* Increased inner padding */
  margin-bottom: 32px;
}

.resume-sec:last-child {
  margin-bottom: 0;
}

.sec-header {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--fg-primary);
  border-bottom: 2px solid var(--border-primary);
  padding-bottom: 10px;
  margin-bottom: 24px;
  text-transform: uppercase;
}

/* Work Experience Timeline Blocks */
.job-block {
  position: relative;
  padding-left: 28px;
  border-left: 1px solid var(--border-primary);
  margin-bottom: 36px;
}

.job-block::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 50%;
}

.job-block:last-child {
  margin-bottom: 0;
  border-left: 1px dotted var(--border-secondary); /* fades out */
}

.job-block:last-child::before {
  background-color: var(--fg-muted);
}

.job-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 8px;
}

.job-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}

.job-date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-secondary);
  background-color: var(--bg-tertiary);
  padding: 2px 8px;
  border: 1px solid var(--border-secondary);
}

.job-company {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.job-body {
  font-size: 0.95rem; /* Larger font size for reading */
  color: var(--fg-secondary);
  line-height: 1.65;
}

.job-list {
  margin-top: 14px;
  list-style: none;
  font-size: 0.9rem;
  color: var(--fg-secondary);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.job-list li {
  position: relative;
  padding-left: 16px;
}

.job-list li::before {
  content: "↳";
  position: absolute;
  left: 0;
  color: var(--fg-muted);
  font-weight: bold;
}

/* Skills & Tags Sidebar */
.skill-group {
  margin-bottom: 24px;
}

.skill-group:last-child {
  margin-bottom: 0;
}

.skill-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  color: var(--fg-primary);
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  transition: border-color 0.15s ease;
}

.tag:hover {
  border-color: var(--border-primary);
}

/* Portfolio Resume Featured Project Cards */
.portfolio-card {
  border: 1px solid var(--border-secondary);
  background-color: var(--bg-primary);
  padding: 20px;
  margin-bottom: 16px;
}

.portfolio-card:last-child {
  margin-bottom: 0;
}

.portfolio-card:hover {
  border-color: var(--border-primary);
  box-shadow: 0px 2px 8px rgba(18, 20, 22, 0.02);
}

.p-num {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-muted);
}

.p-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 6px 0 10px 0;
}

.p-desc {
  font-size: 0.9rem;
  color: var(--fg-secondary);
  line-height: 1.6;
}

/* Media Query Responsive Adjustments */
@media (max-width: 990px) {
  .services-container, .unlocked-content-wrapper {
    padding: 24px;
  }
  .resume-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .widget-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}