/* ============================================================
   MyEscritoire — Inner Pages Shared CSS
   Theme: Dark + Orange Gradient
   ============================================================ */

/* ── About Page ── */
.about-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.mission-img { position: relative; height: 480px; }
.mi-block { position: absolute; border-radius: var(--radius-lg); }
.mi-b1 { top: 0; left: 0; width: 80%; height: 75%; background: var(--gradient); opacity: 0.85; }
.mi-b2 {
  bottom: 0; right: 0; width: 65%; height: 60%;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}
.mi-tag {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dark);
  box-shadow: var(--shadow-orange);
  border: 1px solid var(--border);
  white-space: nowrap;
  z-index: 2;
}
.mission-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
  padding: 28px;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}
.ms-item { text-align: center; }
.ms-num {
  font-size: 2rem;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.ms-label { font-size: 0.8125rem; color: var(--text-muted); font-weight: 700; margin-top: 4px; }

/* Values Grid */
.values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.value-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  transition: var(--transition);
}
.value-card:hover { border-color: rgba(255,122,0,0.3); box-shadow: var(--shadow-orange); transform: translateY(-4px); }
.value-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  display: block;
}
.value-card h4 { margin-bottom: 8px; }
.value-card p { font-size: 0.9rem; color: var(--text-muted); }

/* Team Grid */
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.team-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.team-card:hover { box-shadow: var(--shadow-orange); transform: translateY(-4px); border-color: rgba(255,122,0,0.3); }
.team-photo {
  height: 220px;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
}
.team-info { padding: 24px; }
.team-info h4 { margin-bottom: 4px; }
.team-role { font-size: 0.875rem; color: var(--or-3); font-weight: 700; }
.team-bio { font-size: 0.875rem; color: var(--text-muted); margin-top: 8px; }

/* Process Timeline */
.process-timeline { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; }
.pt-item { display: flex; gap: 28px; align-items: flex-start; }
.pt-item h4 { margin-bottom: 8px; }
.pt-item p { color: var(--text-muted); font-size: 0.9375rem; }
.pt-connector { width: 48px; height: 32px; border-left: 2px dashed var(--border); margin-left: 23px; }

/* ── Services Page ── */
.services-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.service-section-head { margin-bottom: 48px; }
.service-platform-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.service-platform-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: var(--transition);
}
.service-platform-card:hover { border-color: rgba(255,122,0,0.3); box-shadow: var(--shadow-orange); transform: translateY(-4px); }
.sp-icon { font-size: 2rem; margin-bottom: 16px; }
.sp-title { font-weight: 700; font-size: 1.1rem; color: var(--text-dark); margin-bottom: 8px; }
.sp-desc { font-size: 0.9rem; color: var(--text-muted); }

.service-section-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 80px 0;
}

/* ── Single Service ── */
.single-service-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: start;
}
.service-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); }
.sidebar-cta-card {
  background: var(--gradient);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  color: white;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.sidebar-cta-card::before {
  content:''; position:absolute; top:-60px;right:-60px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,0.08);
}
.sidebar-cta-card h4 { color:white; margin-bottom:8px; }
.sidebar-cta-card p { color:rgba(255,255,255,0.8); font-size:0.9rem; margin-bottom:24px; }
.sidebar-nav {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.sidebar-nav h5 { font-size:0.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:16px; }
.sidebar-nav a {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--border-subtle);
  font-size:0.9375rem; color:var(--text-body); font-weight:700;
  transition:var(--transition);
}
.sidebar-nav a:last-child { border-bottom: none; }
.sidebar-nav a:hover { color: var(--or-3); padding-left: 4px; }
.sidebar-recent { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px; }
.sidebar-recent h5 { font-size:0.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:16px; }
.sidebar-project {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
}
.sidebar-project:last-child { border-bottom:none; }
.sp-thumb { width:52px; height:40px; border-radius:8px; background:var(--gradient); flex-shrink:0; opacity:0.8; }
.sp-name { font-size:0.875rem; font-weight:700; color:var(--text-dark); }
.sp-cat { font-size:0.75rem; color:var(--text-muted); }

/* Service content blocks */
.includes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0; }
.include-item {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:24px;
  display:flex; gap:14px; align-items:flex-start;
}
.ii-icon {
  width:36px; height:36px; border-radius:8px;
  background:var(--gradient); display:flex;
  align-items:center; justify-content:center;
  flex-shrink:0; font-size:1rem;
}
.ii-text h5 { font-size:0.9rem; margin-bottom:4px; }
.ii-text p { font-size:0.8125rem; color:var(--text-muted); }

/* ── Portfolio ── */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-btn {
  padding:8px 20px; border-radius:100px;
  border:1.5px solid var(--border-subtle);
  background:var(--surface-1);
  font-size:0.875rem; font-weight:700;
  color:var(--text-muted);
  cursor:pointer; transition:var(--transition);
}
.filter-btn:hover { border-color:rgba(255,122,0,0.4); color:var(--or-3); }
.filter-btn.active { background:var(--gradient); color:white; border-color:transparent; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ── Case Studies ── */
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ── Single Case Study ── */
.cs-hero {
  padding: calc(var(--nav-h) + 80px) 0 80px;
  background: var(--gradient);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cs-hero::before {
  content:''; position:absolute; inset:0;
  background: rgba(0,0,0,0.2);
}
.cs-hero .container { position:relative; z-index:1; }
.cs-hero h1 { color:white; margin-bottom:16px; }
.cs-hero p { color:rgba(255,255,255,0.8); max-width:640px; margin:0 auto; font-size:1.125rem; }
.cs-tags { display:flex; gap:8px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.cs-tag {
  background:rgba(255,255,255,0.2); color:white;
  border:1px solid rgba(255,255,255,0.3);
  padding:4px 14px; border-radius:100px;
  font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
}
.cs-meta-bar {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  margin: 48px 0;
}
.cs-meta-item {
  background: var(--surface-1);
  padding: 24px;
  text-align: center;
}
.cs-meta-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:6px; }
.cs-meta-val { font-size:1.1rem; font-weight:700; color:var(--text-dark); }

.cs-layout { display:grid; grid-template-columns:1fr 300px; gap:60px; align-items:start; }
.cs-sidebar { position:sticky; top:calc(var(--nav-h) + 24px); }
.cs-sidebar-card {
  background: var(--surface-1);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:28px;
}
.cs-sidebar-card h4 { margin-bottom:20px; font-size:1rem; }
.cs-stat-item { margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border-subtle); }
.cs-stat-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.cs-stat-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:4px; }
.cs-stat-val { font-size:1.1rem; font-weight:700; color:var(--text-dark); }

.cs-result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:40px 0; }
.cs-result {
  background: var(--surface-2);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:28px;
  text-align:center;
}
.cs-result-num {
  font-size:2.5rem; font-weight:700;
  background:var(--gradient);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1.1; margin-bottom:8px;
}
.cs-result-label { font-size:0.875rem; color:var(--text-muted); font-weight:700; }

.chart-bar-wrap { display:flex; align-items:flex-end; gap:12px; height:160px; margin:24px 0; }
.chart-bar-group { display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
.chart-bar { width:100%; border-radius:4px 4px 0 0; transition:height 1s ease; }
.chart-bar.before { background:var(--surface-4); }
.chart-bar.after { background:var(--gradient); }
.chart-label { font-size:0.75rem; color:var(--text-muted); font-weight:700; }
.chart-legend { display:flex; gap:20px; font-size:0.8125rem; color:var(--text-muted); }
.legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; }
.ld-before { background:var(--surface-4); }
.ld-after { background:var(--gradient); }

/* ── Contact ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:60px; align-items:start; }
.contact-info-card {
  background: var(--gradient);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  color: white;
  position: relative;
  overflow: hidden;
}
.contact-info-card::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:300px; height:300px; border-radius:50%;
  background:rgba(255,255,255,0.08);
}
.contact-info-card h3 { color:white; margin-bottom:12px; }
.contact-info-card > p { color:rgba(255,255,255,0.8); margin-bottom:40px; }
.ci-item { display:flex; gap:16px; margin-bottom:24px; align-items:flex-start; }
.ci-icon {
  width:40px; height:40px; border-radius:10px;
  background:rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:1.125rem;
}
.ci-text strong { display:block; color:white; font-size:0.875rem; margin-bottom:2px; }
.ci-text span { font-size:0.9375rem; color:rgba(255,255,255,0.75); }

/* ── Featured Case Study ── */
.featured-cs {
  display:grid; grid-template-columns:1fr 1fr;
  border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border-subtle); box-shadow:var(--shadow-orange);
}
.featured-cs-img { min-height:420px; background:var(--gradient); }
.featured-cs-content {
  padding:60px 48px; background:var(--surface-1);
  display:flex; flex-direction:column; justify-content:center;
}
.featured-results { display:flex; gap:32px; flex-wrap:wrap; }
.fr-item { display:flex; flex-direction:column; }
.fr-num {
  font-size:2rem; font-weight:700;
  background:var(--gradient);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.fr-label { font-size:0.8125rem; color:var(--text-muted); font-weight:700; }

/* ── Responsive adjustments ── */
@media (max-width:1024px) {
  .about-mission-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .services-hero-grid { grid-template-columns:1fr; }
  .single-service-layout { grid-template-columns:1fr; }
  .service-sidebar { position:static; }
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .case-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .cs-meta-bar { grid-template-columns:repeat(2,1fr); }
  .cs-result-grid { grid-template-columns:repeat(2,1fr); }
  .cs-layout { grid-template-columns:1fr; }
  .cs-sidebar { position:static; }
}
@media (max-width:768px) {
  .team-grid { grid-template-columns:1fr 1fr; }
  .portfolio-grid { grid-template-columns:1fr; }
  .case-grid { grid-template-columns:1fr; }
  .mission-img { height:280px; }
  .cs-meta-bar { grid-template-columns:1fr 1fr; }
  .featured-cs { grid-template-columns:1fr; }
  .featured-cs-content { padding:32px 24px; }
  .service-platform-grid { grid-template-columns:1fr; }
  .includes-grid { grid-template-columns:1fr; }
}