/* ===========================
   WORK PAGE CSS
   Combines Ventures + Apps
   =========================== */

/* === PAGE HERO === */
.page-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  border-bottom: var(--gap) solid var(--dark);
  background: var(--dark);
}
.page-hero-left {
  background: var(--dark); color: var(--cream);
  padding: 80px 60px;
}
.page-hero-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--yellow); margin-bottom: 24px;
}
.page-hero-title {
  font-size: clamp(48px, 5vw, 72px); font-weight: 900;
  line-height: 0.92; letter-spacing: -0.03em;
  color: var(--cream); margin-bottom: 32px;
}
.page-hero-sub {
  font-size: 15px; line-height: 1.75; opacity: 0.55; color: var(--cream);
}
.page-hero-right {
  display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap);
  background: var(--dark);
}
.page-hero-stat {
  background: var(--yellow); color: var(--dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
}
.page-hero-stat-2 { background: var(--blue); color: var(--cream); }
.page-hero-stat-2 .stat-label { color: var(--cream); }

/* === SECTION LABELS === */
.work-section-label {
  background: var(--cream);
  border-bottom: var(--gap) solid var(--dark);
  border-top: var(--gap) solid var(--dark);
}
.work-section-label-dark { background: var(--dark); }
.work-section-label-inner {
  padding: 40px 60px;
  display: flex; align-items: baseline; gap: 40px;
}
.work-section-desc {
  font-size: 14px; line-height: 1.65; opacity: 0.6; max-width: 480px; margin: 0;
}

/* === VENTURES === */
.ventures-list { border-bottom: var(--gap) solid var(--dark); }
.venture-feature { border-bottom: var(--gap) solid var(--dark); }
.venture-feature:last-child { border-bottom: none; }

.venture-header { padding: 32px 60px; border-bottom: var(--gap) solid var(--dark); }
.venture-header-red { background: var(--red); color: var(--cream); }
.venture-header-blue { background: var(--blue); color: var(--cream); }
.venture-header-cream { background: var(--cream); color: var(--dark); }
.venture-header-dark { background: var(--dark); color: var(--cream); }

.venture-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; opacity: 0.55; margin-bottom: 8px;
}
.venture-name { font-size: 42px; font-weight: 900; line-height: 1; margin-bottom: 6px; }
.venture-role-url { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.venture-status {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 4px 12px; margin-top: 8px;
}
.venture-header-red .venture-status { background: var(--cream); color: var(--red); }
.venture-header-blue .venture-status { background: var(--cream); color: var(--blue); }
.venture-header-cream .venture-status { background: var(--dark); color: var(--cream); }
.venture-header-dark .venture-status { background: var(--yellow); color: var(--dark); }

.venture-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); background: var(--dark); }
.venture-story { background: var(--cream); padding: 52px; }
.venture-story-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--red); margin-bottom: 12px;
}
.venture-story-text { font-size: 15px; line-height: 1.75; opacity: 0.65; margin-bottom: 24px; }
.venture-built-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mid); margin-bottom: 12px;
}
.venture-built-list { font-size: 14px; line-height: 1.7; opacity: 0.6; }
.venture-link {
  display: inline-block; margin-top: 24px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--red);
}
.venture-mission {
  background: var(--darkalt); color: var(--cream); padding: 52px;
  display: flex; flex-direction: column; justify-content: center;
}
.venture-mission-quote {
  font-size: 22px; font-weight: 900; line-height: 1.25; letter-spacing: -0.01em;
  border-left: 4px solid var(--yellow); padding-left: 20px; margin-bottom: 32px;
}
.venture-stats-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); background: var(--dark);
}
.venture-stats-row-4 { grid-template-columns: repeat(4, 1fr); }
.venture-stat { padding: 24px 28px; display: flex; flex-direction: column; }
.venture-stat-red { background: var(--red); color: var(--cream); }
.venture-stat-blue { background: var(--blue); color: var(--cream); }
.venture-stat-yellow { background: var(--yellow); color: var(--dark); }
.venture-stat-dark { background: var(--dark); color: var(--cream); }
.venture-stat-num { font-size: 36px; font-weight: 900; line-height: 1; margin-bottom: 6px; }
.venture-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.65; }

/* === APPS HERO === */
.apps-hero {
  background: var(--dark); color: var(--cream);
  padding: 80px 60px; border-bottom: var(--gap) solid var(--dark);
  border-top: var(--gap) solid var(--dark);
}
.apps-hero h2 {
  font-size: 52px; font-weight: 900; line-height: 1;
  letter-spacing: -0.02em; margin-bottom: 16px;
}
.apps-hero p {
  font-size: 16px; line-height: 1.75; opacity: 0.5; max-width: 520px;
}

/* === APPS === */
.apps-list { border-bottom: var(--gap) solid var(--dark); }
.app-feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  border-bottom: var(--gap) solid var(--dark); background: var(--dark);
}
.app-feature:last-child { border-bottom: none; }
.app-feature:nth-child(even) { direction: rtl; }
.app-feature:nth-child(even) > * { direction: ltr; }

.app-feature-text {
  background: var(--cream); padding: 52px;
  position: relative; overflow: hidden;
}
.app-feature-text::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
}
.app-feature-accent-red .app-feature-text::before   { background: var(--red); }
.app-feature-accent-blue .app-feature-text::before  { background: var(--blue); }
.app-feature-accent-yellow .app-feature-text::before { background: var(--yellow); }
.app-feature-accent-dark .app-feature-text::before  { background: var(--mid); }

.app-feature-visual {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 52px;
}
.app-feature-accent-red .app-feature-visual    { background: var(--darkalt); }
.app-feature-accent-blue .app-feature-visual   { background: var(--darkalt); }
.app-feature-accent-yellow .app-feature-visual { background: var(--dark); }
.app-feature-accent-dark .app-feature-visual   { background: var(--darkalt); }

.app-feature-shape { width: 64px; height: 64px; }
.app-feature-shape-circle { border-radius: 50%; }
.app-feature-shape-triangle {
  width: 0; height: 0;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  border-bottom: 56px solid var(--yellow);
}

.app-name { font-size: 28px; font-weight: 900; margin-bottom: 8px; color: var(--dark); }
.app-problem-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--red); margin-bottom: 8px;
}
.app-problem { font-size: 14px; line-height: 1.7; opacity: 0.65; margin-bottom: 20px; color: var(--dark); }
.app-does-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mid); margin-bottom: 8px;
}
.app-does { font-size: 14px; line-height: 1.7; opacity: 0.65; margin-bottom: 20px; color: var(--dark); }
.app-impact {
  font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--dark); margin-bottom: 20px;
  border-left: 4px solid var(--yellow); padding-left: 12px;
}
.app-tech { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tech-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--dark); color: var(--cream); padding: 5px 12px;
}
.app-live-link {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--red);
}
.app-live-link:hover { opacity: 0.7; }

/* === CLOSING QUOTE === */
.ventures-closer {
  background: var(--dark); color: var(--cream);
  border-bottom: var(--gap) solid var(--dark);
  padding: 80px 60px;
}
.ventures-closer-text {
  font-size: 28px; font-weight: 900; line-height: 1.2;
  letter-spacing: -0.01em; max-width: 700px;
  border-left: 4px solid var(--yellow); padding-left: 24px;
}

/* === MOBILE === */
@media (max-width: 768px) {
  .page-hero { grid-template-columns: 1fr; }
  .page-hero-left { padding: 48px 24px; }
  .page-hero-right { grid-template-rows: auto auto; }
  .page-hero-stat { padding: 28px 24px; }

  .apps-hero { padding: 48px 24px; }
  .apps-hero h2 { font-size: 36px; }

  .work-section-label-inner { flex-direction: column; gap: 12px; padding: 28px 24px; }

  .venture-header { padding: 28px 24px; }
  .venture-name { font-size: 32px; }
  .venture-body { grid-template-columns: 1fr; }
  .venture-story { padding: 36px 24px; }
  .venture-mission { padding: 36px 24px; }
  .venture-stats-row { grid-template-columns: 1fr 1fr; }
  .venture-stats-row-4 { grid-template-columns: 1fr 1fr; }

  .app-feature { grid-template-columns: 1fr; direction: ltr; }
  .app-feature:nth-child(even) { direction: ltr; }
  .app-feature-visual { padding: 36px; min-height: 160px; }
  .app-feature-text { padding: 36px 24px; }
  .app-name { font-size: 22px; }

  .ventures-closer { padding: 48px 24px; }
  .ventures-closer-text { font-size: 20px; }
}

@media (max-width: 480px) {
  .venture-stats-row { grid-template-columns: 1fr; }
  .venture-stats-row-4 { grid-template-columns: 1fr 1fr; }
}