/* ============================================================
   projects.css — card system for the projects page
   All colour/font tokens come from base.css :root.
   This file only declares layout and component styles.
   ============================================================ */

/* ── Card-specific tokens ───────────────────────────────────── */
:root {
  --card-radius:       12px;
  --card-gap:          0.85rem;
  --card-pad:          0.85rem;
  --card-h:            210px;    /* locked height — every card identical */
  --card-media-w:      240px;    /* image column width */
  --card-shadow:       0 4px 24px rgba(0, 0, 0, 0.45);
  --card-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.65);
  --expanded-max-w:    720px;
  --expanded-media-w:  260px;
}

/* ── Page layout ────────────────────────────────────────────── */
/*
 * .projects sits inside .showcase as a <main>, positioned above
 * the overlay (z-index: 5) so content is interactive.
 */
.projects {
  position:       relative;
  z-index:        5;
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow-y:     auto;
  padding:        1.5rem 2rem 3rem;
}

.projects__container {
  max-width: 1200px;
  width:     100%;
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  gap:       2rem;
}

.projects__intro {
  padding-top: 0.25rem;
}

.projects__subtitle {
  font-family: var(--font-body);
  font-size:   0.9rem;
  color:       var(--clr-text-muted);
  letter-spacing: 0.03em;
}

.projects__error {
  color:      var(--clr-text-secondary);
  font-style: italic;
  padding:    1rem 0;
  font-size:  0.9rem;
}

/* ── Two-column grid ────────────────────────────────────────── */
.projects-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2rem;
  align-items:           start;
}

/* ── Column ─────────────────────────────────────────────────── */
.projects-column {
  display:        flex;
  flex-direction: column;
  gap:            var(--card-gap);
}

.column-head {
  padding-bottom: 0.5rem;
  border-bottom:  1px solid var(--clr-border);
  margin-bottom:  0.25rem;
}

.column-title {
  font-family:    var(--font-display);
  font-size:      1.8rem;
  font-weight:    400;
  letter-spacing: 0.08em;
  color:          var(--clr-text-primary);
  text-transform: uppercase;
  line-height:    1;
  margin-bottom:  0.3rem;
}

.column-subtitle {
  font-size:  0.78rem;
  color:      var(--clr-text-muted);
  letter-spacing: 0.02em;
}

/* ── Projects list ──────────────────────────────────────────── */
.projects-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--card-gap);
}

/* ── Card shell ─────────────────────────────────────────────── */
/*
 * STRUCTURE (always):
 *   <article.card>
 *     <div.card__body>   ← text content (left)
 *     <div.card__media>  ← fixed-width image (right)
 *   </article>
 *
 * Row layout + locked height keeps every card pixel-identical.
 */
.card {
  display:        flex;
  flex-direction: row;            /* image beside text */
  height:         var(--card-h); /* locked — all cards identical */
  background:     var(--clr-surface);
  border:         1px solid var(--clr-border);
  border-radius:  var(--card-radius);
  box-shadow:     var(--card-shadow);
  overflow:       hidden;
  width:          100%;
  box-sizing:     border-box;
  transition:
    background   220ms ease,
    border-color 220ms ease,
    box-shadow   220ms ease,
    transform    220ms ease;
}

.card--expandable {
  cursor: pointer;
}

.card--expandable:hover,
.card--expandable:focus-visible {
  background:   var(--clr-surface-hover);
  border-color: var(--clr-border-hover);
  box-shadow:   var(--card-shadow-hover);
  transform:    translateY(-2px);
  outline:      none;
}

.card--expandable:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

/* ── Card body ───────────────────────────────────────────────── */
.card__body {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
  padding:        var(--card-pad);
  flex:           1;
  min-width:      0;     /* prevent flex text overflow */
  overflow:       hidden;
}

.card__title {
  font-family:    var(--font-display);
  font-size:      1.3rem;
  font-weight:    400;
  letter-spacing: 0.04em;
  color:          var(--clr-text-primary);
  line-height:    1.15;
  text-transform: uppercase;
  margin:         0;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.card__meta {
  font-size:  0.76rem;
  color:      var(--clr-text-secondary);
  margin:     0;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.card__meta em {
  font-style: italic;
  color:      var(--clr-text-primary);
}

.card__desc {
  font-family:        var(--font-body);
  font-size:          0.84rem;
  color:              var(--clr-text-secondary);
  margin:             0;
  line-height:        1.6;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* Long details: hidden until card is expanded */
.card__details {
  font-family: var(--font-body);
  font-size:   0.82rem;
  color:       var(--clr-text-muted);
  margin:      0;
  line-height: 1.65;
  display:     none;
}

.card__actions {
  display:    none;    /* hidden in collapsed state; shown on expand */
  gap:        0.5rem;
  flex-wrap:  wrap;
  margin-top: 0.3rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.3rem;
  padding:         0.28rem 0.7rem;
  border-radius:   4px;
  font-family:     var(--font-display);
  font-size:       0.85rem;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  text-decoration: none;
  white-space:     nowrap;
  transition:
    border-color 150ms ease,
    color        150ms ease,
    background   150ms ease;
}

.btn--ghost {
  border:     1px solid rgba(255, 255, 255, 0.18);
  color:      var(--clr-text-secondary);
  background: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: rgba(255, 255, 255, 0.50);
  color:        var(--clr-text-primary);
  background:   rgba(255, 255, 255, 0.06);
  outline:      none;
}

/* ── Card media well ─────────────────────────────────────────── */
/*
 * Fixed-width column on the right of the card row.
 * object-fit:cover fills it at any aspect ratio without distortion.
 */
.card__media {
  width:       var(--card-media-w);
  flex-shrink: 0;
  overflow:    hidden;
  background:  rgba(0, 0, 0, 0.3);
}

.card__img {
  width:           100%;
  height:          100%;
  object-fit:      contain;
  object-position: center;
  display:         block;
  transition:      transform 400ms ease;
}

.card--expandable:hover .card__img {
  transform: scale(1.04);
}

/* ── Expanded state ──────────────────────────────────────────── */
.card-backdrop {
  position:  fixed;
  inset:     0;
  background: rgba(0, 0, 0, 0.75);
  z-index:   900;
  animation: backdropIn 200ms ease forwards;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.card--expanded {
  position:       fixed;
  top:            50% !important;
  left:           50% !important;
  transform:      translate(-50%, -50%) !important;
  flex-direction: row;              /* image stays on the right */
  align-items:    stretch;
  height:         auto;             /* override locked height */
  width:          min(var(--expanded-max-w), calc(100vw - 2rem));
  max-height:     calc(100dvh - 3rem);
  overflow-y:     auto;
  z-index:        901;
  background:     var(--clr-bg-mid);
  border-color:   var(--clr-border-hover);
  box-shadow:     0 24px 80px rgba(0, 0, 0, 0.85);
  animation:      cardExpand 280ms cubic-bezier(0.33, 1, 0.68, 1) forwards;
  cursor:         default;
}

@keyframes cardExpand {
  from {
    opacity:   0.4;
    transform: translate(-50%, -48%) scale(0.96) !important;
  }
  to {
    opacity:   1;
    transform: translate(-50%, -50%) scale(1) !important;
  }
}

/* Expanded hover/focus must not revert the opaque background or shift position */
.card--expanded:hover,
.card--expanded:focus-visible {
  background:  var(--clr-bg-mid);
  transform:   translate(-50%, -50%) !important;
  box-shadow:  0 24px 80px rgba(0, 0, 0, 0.85);
}

.card--expanded .card__body {
  overflow: visible;
  padding:  1.5rem;
  gap:      0.6rem;
}

.card--expanded .card__media {
  width:       var(--expanded-media-w);
  flex-shrink: 0;
  height:      auto;    /* stretches to match body content height */
}

.card--expanded .card__img {
  object-fit:      contain;
  object-position: center;
}

.card--expanded .card__title {
  font-size:     1.9rem;
  white-space:   normal;
  overflow:      visible;
  text-overflow: unset;
}

.card--expanded .card__meta {
  font-size:   0.9rem;
  line-height: 1.5;
}

.card--expanded .card__desc {
  font-size:          1rem;
  line-height:        1.7;
  display:            block;
  -webkit-line-clamp: unset;
  overflow:           visible;
}

.card--expanded .card__details {
  font-size:   0.92rem;
  line-height: 1.7;
  display:     block;
}

.card--expanded .card__actions {
  display:    flex;
  margin-top: 0.5rem;
}

body.has-expanded-card {
  overflow: hidden;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 540px) {
  :root {
    --card-h:           150px;
    --card-media-w:     160px;
    --expanded-media-w: 140px;
    --card-pad:         0.7rem;
  }

  .projects {
    padding: 1rem 1rem 2.5rem;
  }

  .card--expanded {
    width:      calc(100vw - 0.75rem);
    max-height: calc(100dvh - 1.5rem);
  }

  .column-title {
    font-size: 1.5rem;
  }
}