/* ===================================================================
   IREU TECHNOLOGY & AI — page-specific components.
   Reuses the full .edu- editorial system (education.css) + these extras.
   Same tokens, fonts, dark/light theming, reveal-friendly.
   =================================================================== */

/* ============ FOUNDERS — two-up cards ============ */
.tech-founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 56px;
}
.tech-founder {
  background: rgba(252,249,242,0.04);
  border: 1px solid rgba(252,249,242,0.12);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s;
}
.tech-founder:hover { transform: translateY(-6px); border-color: var(--sand); }
.tech-founder .tf-media { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.tech-founder .tf-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(.2,.8,.2,1); }
.tech-founder:hover .tf-media img { transform: scale(1.06); }
.tech-founder .tf-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(14,27,48,0.55)); }
.tech-founder .tf-body { padding: 34px 32px 36px; display: flex; flex-direction: column; }
.tech-founder .tf-role {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-light); margin-bottom: 12px;
}
.tech-founder h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px,2.6vw,38px); color: var(--cream); margin: 0 0 16px; line-height: 1; }
.tech-founder .tf-body > p { font-size: 14.5px; line-height: 1.7; color: rgba(252,249,242,0.74); margin: 0 0 22px; }
.tech-founder .tf-tags { display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.tech-founder .tf-tags span {
  font-family: var(--font-sans); font-size: 12px; line-height: 1.4;
  color: rgba(252,249,242,0.82);
  padding: 9px 15px; border-radius: 8px;
  border: 1px solid rgba(199,165,117,0.28); background: rgba(199,165,117,0.05);
}

/* ============ THESIS rows on a LIGHT (paper) section ============ */
.tech-thesis-light .edu-thesis-row { border-top-color: var(--line); }
.tech-thesis-light .edu-thesis-row .tn { color: rgba(168,133,87,0.5); }
.tech-thesis-light .edu-thesis-row h4 { color: var(--ink); }
.tech-thesis-light .edu-thesis-row p { color: var(--mute-deep); }

/* ============ 8 MENTOR PILLARS — reuse pillars-6 grid, allow 8 cells ============ */
.tech-pillars-8 { grid-template-columns: repeat(4, 1fr); }

/* ============ 14 DOMAINS — editorial card grid ============ */
.tech-domains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 56px;
}
.tech-domain {
  background: var(--cream);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  transition: background .4s;
}
.tech-domain:hover { background: #fff; }
.tech-domain .dn {
  font-family: var(--font-serif); font-weight: 400; font-style: italic;
  font-size: 32px; color: var(--sand-deep); line-height: 1; margin-bottom: 16px;
}
.tech-domain h4 {
  font-family: var(--font-serif); font-weight: 400; font-size: 21px;
  line-height: 1.14; margin: 0 0 11px; color: var(--ink);
}
.tech-domain .dtags {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue-deep);
  margin-bottom: 15px; line-height: 1.5;
}
.tech-domain p {
  font-size: 13.5px; line-height: 1.62; color: var(--mute-deep); margin: 0 0 18px;
}
.tech-domain .dsub {
  margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line-soft);
  font-family: var(--font-sans); font-size: 11px; line-height: 1.55; color: var(--mute);
}
.tech-domain .dsub strong {
  display: block; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sand-deep); font-weight: 600; margin-bottom: 7px;
}

/* ============ PROGRAM LADDER — duration accent ============ */
.tech-dur {
  font-family: var(--font-sans); font-style: normal; font-size: 11.5px;
  font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sand-deep);
}

/* ============ CAREER OUTCOMES — clean editorial grid ============ */
.tech-careers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(252,249,242,0.1);
  border: 1px solid rgba(252,249,242,0.1);
  border-radius: 12px; overflow: hidden;
  margin-top: 56px;
}
.tech-career { background: #0E1B30; padding: 36px 30px; transition: background .4s; }
.tech-career:hover { background: #15243f; }
.tech-career h4 {
  font-family: var(--font-serif); font-weight: 400; font-size: 20px;
  line-height: 1.18; margin: 0 0 13px; color: var(--cream);
}
.tech-career p { font-size: 13.5px; line-height: 1.65; color: rgba(252,249,242,0.66); margin: 0; }

/* ============ COMPARISON CARD — light .old card inside a dark section ============ */
/* The dark section sets cream text; the light .old card needs dark text restored. */
.edu-compare-card.old,
.edu-compare-card.old .bar-label,
.edu-compare-card.old .edu-body { color: var(--ink); }
.edu-compare-card.old .label { color: var(--mute); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1040px) {
  .tech-founders { grid-template-columns: 1fr; }
  .tech-pillars-8 { grid-template-columns: 1fr 1fr; }
  .tech-domains { grid-template-columns: 1fr 1fr; }
  .tech-careers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .tech-pillars-8, .tech-domains, .tech-careers { grid-template-columns: 1fr; }
}