/* =========================================================
   Projects grid + cards
   ========================================================= */

.projects-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  grid-auto-flow: row dense;
  --project-thumb-h: 150px;
}

.projects-grid > *{ min-width:0; }

@media (max-width: 640px){
  .projects-grid{ --project-thumb-h: 140px; }
}

/* links + equal heights */
.projects-grid .card-link{ display:block; }
.projects-grid .card-link,
.projects-grid .project-card{ height:100%; }

.project-card{
  display:flex;
  flex-direction:column;
  height:100%;

  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;

  box-shadow:var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;

  position: relative;
}

.project-card img{
  display:block;
  width:100%;
  height: var(--project-thumb-h);
  object-fit:cover;
  flex: 0 0 auto;
}

/* ✅ KEY: body becomes flex column and fills remaining height */
.project-card .p-body{
  padding: 8px 14px;
  display:flex;
  flex-direction:column;
  gap:0;
  flex: 1 1 auto;     /* fill leftover height under image */
  min-height: 0;
}

.project-card .p-body h3{
  margin: 0 0 4px;
  font-size:18px;
}

.project-card .p-body p{
  color:var(--muted-ink);
  margin:0;

  font-size: var(--card-text-size);
  line-height: var(--card-text-leading);
}

.projects-grid .project-card p{
  font-size: calc(var(--card-text-size) * 0.94);
  line-height: var(--card-text-leading);
}

/* Hover */
@media (hover:hover) and (pointer:fine){
  .projects-grid .project-card:hover{
    transform: translateY(-4px);
    box-shadow:0 14px 30px rgba(15,23,42,.10);
  }
  .projects-grid .project-card img{
    transition: transform .35s ease;
    will-change: transform;
  }
  .projects-grid .project-card:hover img{
    transform: scale(1.02);
  }
}

/* Status pill */
.project-card[data-status]::before{
  content: attr(data-status);
  position: absolute;
  top:8px; left:8px;

  padding:6px 10px;
  font: 800 12px/1.1 Inter, system-ui, sans-serif;
  letter-spacing:.2px;
  text-transform:capitalize;

  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);

  pointer-events:none;
  z-index:2;
}

.project-card[data-status="complete"]::before{ color:#166534; background:#ecfdf5; border-color:#d1fae5; }
.project-card[data-status="inprogress"]::before{ color:#92400e; background:#fff7ed; border-color:#fed7aa; }
.project-card[data-status="in progress"]::before{ color:#92400e; background:#fff7ed; border-color:#fed7aa; }
.project-card[data-status="upcoming"]::before{ color:#374151; background:#f3f4f6; border-color:#e5e7eb; }


/* =========================================================
   Tags (shared)
   ========================================================= */

.tags,
.p-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px 0;
}

/* ✅ KEY: tags belong at the bottom inside flex cards */
.project-card .tags,
.article-card .tags{
  margin-top: auto;  /* pushes tags to bottom */
}

.tag{
  display:inline-flex;
  align-items:center;

  padding:4px 8px;
  font-size:12px;
  font-weight:700;
  line-height:1;

  color:var(--ink);
  background:var(--pill);
  border:1px solid var(--line);
  border-radius:999px;

  white-space:nowrap;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

@media (hover:hover) and (pointer:fine){
  .tag:hover{
    transform: translateY(-1px);
    box-shadow:0 6px 14px rgba(15,23,42,.06);
    border-color:#d1d5db;
  }
}


/* =========================================================
   Forced columns at breakpoints (Projects)
   ========================================================= */

@media (max-width: 639.98px){
  .projects-grid{ grid-template-columns:1fr !important; }
}

@media (min-width:640px) and (max-width:1023.98px){
  .projects-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}

@media (min-width:1024px){
  .projects-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}


/* =========================================================
   Articles grid + cards
   ========================================================= */

.articles-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}

/* links + equal heights */
.articles-grid .card-link,
.articles-grid .article-card{
  height: 100%;
}

.article-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);

  padding: 8px 14px;

  /* ✅ KEY: flex column so tags can pin to bottom */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-height: 0;

  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;

  position: relative;
  overflow: hidden;
}

/* Top accent bar */
.article-card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:12px;

  border-top-left-radius:16px;
  border-top-right-radius:16px;

  background:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--article-accent, var(--pop)) , white 15%),
      var(--article-accent, var(--pop))
    );
}

.article-meta{
  color:var(--muted-ink);
  font-size:14px;
  margin: 10px 0;
}

.article-card h3{
  margin: 0 0 4px;
  font-size:18px;
}

.article-card .lead{
  color:var(--muted-ink);
  font-size: calc(var(--card-text-size) * 0.94);
  line-height: var(--card-text-leading);
  margin: 0;
}

/* Hover */
@media (hover:hover) and (pointer:fine){
  .articles-grid .article-card:hover{
    transform: translateY(-4px);
    box-shadow:0 10px 24px rgba(15,23,42,.08);
  }
}

/* Clamp title & summary lines (still works in flex) */
.articles-grid .article-card h3,
.articles-grid .article-card .lead{
  --lines: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  overflow: hidden;
  text-overflow: ellipsis;
}
.articles-grid .article-card .lead{ --lines: 3; }


/* Focus parity */
.timeline .t-item:focus-visible,
.articles-grid .article-card:focus-visible{
  outline: 2px solid #111827;
  outline-offset: 2px;
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .timeline .t-item,
  .articles-grid .article-card,
  .projects-grid .project-card{
    transition:none;
  }
}


/* =========================================================
   See More reveal animation + locks
   ========================================================= */

.hidden-tile{ display:none; will-change: transform, opacity; contain:layout paint; }
.section.expanded .hidden-tile{ display:block; }

.hidden-tile.anim-in{ animation: slideFadeIn 360ms ease both; }
.hidden-tile.anim-out{ animation: slideFadeOut 300ms ease both; }

@keyframes slideFadeIn{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:translateY(0); }
}

@keyframes slideFadeOut{
  from{ opacity:1; transform:translateY(0); }
  to  { opacity:0; transform:translateY(12px); }
}

@media (prefers-reduced-motion: reduce){
  .hidden-tile.anim-in,
  .hidden-tile.anim-out{ animation:none !important; }
}

.see-more-wrap{ margin-top:16px; text-align:center; }

.section .hidden-tile.seq-guard{
  opacity:0;
  transform: translateY(12px);
  pointer-events:none;
}

[data-flip-lock]{ pointer-events:none; contain: paint; }
[data-flip-lock] .article-card,
[data-flip-lock] .project-card{ transition: none !important; }
[data-flip-lock] .article-card:hover,
[data-flip-lock] .project-card:hover{
  transform: none !important;
  box-shadow: var(--shadow) !important;
}

.section ~ *{ will-change: transform; }

/* Hide phantom grid rows when collapsed */
.section:not(.expanded) .projects-grid .card-link:has(> .hidden-tile){ display:none; }
.section.expanded .projects-grid .card-link:has(> .hidden-tile){ display:block; }


/* =========================================================
   Make clickable cards NOT look like links
   ========================================================= */

.card-link{
  color: inherit;
  text-decoration: none;
  display:block;
  height:100%;
}

.card-link:visited{ color: inherit; }
.card-link:hover{ text-decoration:none; }

.card-link *{
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   FIX: hidden tiles are the cards themselves → keep flex
   ========================================================= */

.section.expanded .article-card.hidden-tile{
  display: flex !important;
}

.section.expanded .project-card.hidden-tile{
  display: flex !important;
}