/* ============================================================================
   ANANYA SHANKAR — PORTFOLIO  |  LXD (WORK) PAGE STYLES
   Extends css/styles.css for learning-experience-design.html (and reusable
   on future work pages such as user-experience-design.html).
   ----------------------------------------------------------------------------
   1. Work-page hero
   2. Toolkit + Certifications reference strip
   3. Case study card  (.case-card, .case-grid)
   4. Responsive
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. WORK-PAGE HERO
-------------------------------------------------------------------------- */
.work-hero {
  padding-top: clamp(80px, 10vw, 120px);
}

.work-hero__inner {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.work-hero__text {
  display: flex;
  flex-direction: column;
}

.work-hero__title {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  letter-spacing: -.03em;
  line-height: 1.2;
  font-weight: 800;
  color: var(--ink);
  margin-top: 16px;
  margin-bottom: 0;
}

.work-hero__tagline {
  margin-top: clamp(22px, 3vw, 36px);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -.01em;
  max-width: 1010px;
}

.work-hero__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  max-width: 1000px;
}

.work-hero__body p {
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.7;
}

.work-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* Hero illustration */
.work-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-hero__visual img {
  width: 100%;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(14, 26, 64, .10));
}

/* --------------------------------------------------------------------------
   2. TOOLKIT + CERTIFICATIONS  (reference strip)
-------------------------------------------------------------------------- */
.lxd-reference {
  padding-block: clamp(20px, 6vw, 20px);
}

.lxd-reference__grid {
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: clamp(20px, 3vw, 40px);
}

.ref-card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--hairline);
}

.ref-card__heading {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.ref-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ref-card__list li {
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.5;
}

.ref-card__list strong {
  color: var(--ink);
  font-weight: 700;
}

/* Certifications variant */
.ref-card__list--certs {
  gap: 14px;
}

.ref-card__list--certs li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ref-card__cert-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
}

.ref-card__cert-src {
  font-size: .8rem;
  color: var(--ink);
  display: block;
}

/* --------------------------------------------------------------------------
   3. CASE STUDY CARDS
-------------------------------------------------------------------------- */
.projects {
  padding-top: 0;
}

.projects__intro {
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* Single-column vertical stack */
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
}

/* Individual card — horizontal strip (30% image | 70% content) */
.case-card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gold);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Image strip — 30% */
.case-card__media {
  flex: 0 0 30%;
  min-width: 0;
  overflow: hidden;
  background: var(--panel);
}

.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content body — 70% */
.case-card__body {
  /* flex: 1; */
  min-width: 0;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
}

/* CTA button right-aligned within the card body */
.case-card__body .btn {
  /* align-self: flex-end; */
  margin-top: auto;
}

/* Card header row: kicker + date | faded number */
.case-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.case-card__kicker {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}

.case-card__date {
  font-size: .8rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
}

/* Large faded ordinal number */
.case-card__num {
  font-size: 2.4rem;
  font-weight: 800;
  /* color: rgba(14, 26, 64, .07); */
  color: var(--gold-light);
  line-height: 1;
  letter-spacing: -.04em;
  user-select: none;
  flex-shrink: 0;
  margin-top: -4px;
}

/* Project title */
.case-card__title {
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--gold);
}

/* Description */
.case-card__desc {
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.65;
  font-weight: 500;
  flex: 1;
}

/* ── Role / Learners / Stakeholders / Action detail list ── */
.case-card__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin: 0;
  /* padding: clamp(16px, 2vw, 22px);
  background: var(--panel); */
  /* border-radius: var(--r-md); */
}

/* Action row spans both columns */
.case-card__detail--full {
  grid-column: 1 / -1;
}

.case-card__detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-card__detail-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

.case-card__detail-value {
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

.case-card__action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.case-card__action-list li {
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}

.case-card__action-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* Stats row — gold left border accent */
.case-card__stats {
  display: flex;
  flex-direction: row;
  padding: 18px;
  /* background: var(--gold-light); */
  border-radius: var(--r-md);
  flex-wrap: wrap;
}

.case-card__stat {
  display: flex;
  width: 33.33%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 5px;
}

.case-card__stat-val {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1;
}

.case-card__stat-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
  max-width: 140px;
}

/* Tag pills — outline style */
.case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid var(--hairline);
  background: transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

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

/* --------------------------------------------------------------------------
   4. LEARNING SERVICES TABS  (.lxd-tabs)
-------------------------------------------------------------------------- */
.lxd-services {
  padding-block: clamp(20px, 6vw, 20px);
}

/* Outer wrapper — white card */
.lxd-tabs {
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Tab button strip */
.lxd-tabs__list {
  display: flex;
  flex-wrap: wrap;
  background: var(--panel);
  border-bottom: 2px solid var(--hairline);
  padding: 0 clamp(16px, 2.5vw, 32px);
  gap: 0;
}

/* Individual tab button */
.lxd-tabs__btn {
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 18px clamp(12px, 1.8vw, 22px) 15px;
  margin-bottom: -2px;
  /* sits flush on the strip bottom-border */
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.lxd-tabs__btn:hover {
  color: var(--ink);
}

/* Active state — gold underline + ink text */
.lxd-tabs__btn[aria-selected="true"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Keyboard focus ring */
.lxd-tabs__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 2px;
}

/* Tab panels */
.lxd-tabs__panel {
  padding: clamp(28px, 4vw, 48px);
}

.lxd-tabs__panel[aria-hidden="true"] {
  display: none;
}

/* Panel reveal animation */
@keyframes lxdFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lxd-tabs__panel[aria-hidden="false"] {
  animation: lxdFadeIn .25s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .lxd-tabs__panel[aria-hidden="false"] {
    animation: none;
  }
}

/* Panel typography */
.lxd-tabs__panel p {
  font-size: .97rem;
  color: var(--ink);
  line-height: 1.72;
  margin: 0 0 14px;
}

.lxd-tabs__panel p:last-child {
  margin-bottom: 0;
}

.lxd-tabs__panel strong {
  color: var(--ink);
  font-weight: 700;
}

/* Bullet list inside panels — matches case-card action list style */
.lxd-tabs__panel ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lxd-tabs__panel ul:last-child {
  margin-bottom: 0;
}

.lxd-tabs__panel ul li {
  font-size: .93rem;
  color: var(--ink);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
}

.lxd-tabs__panel ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .work-hero__inner {
    grid-template-columns: 1fr;
  }

  .work-hero__visual {
    max-width: 360px;
    order: -1;
    /* illustration above text on tablet */
  }

  .lxd-reference__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .work-hero__title {
    white-space: normal;
  }

  .work-hero__tagline,
  .work-hero__body {
    max-width: 100%;
  }

  /* Stack image above content on mobile */
  .case-card {
    flex-direction: column;
  }

  .case-card__media {
    flex: none;
    height: 180px;
  }

  .case-card__num {
    font-size: 2.4rem;
  }

  .case-card__stats {
    gap: 14px;
  }
}