/* Shared styles for expandable cards (hover panel, tap-to-open modal, project illustrations).
   Linked from every page so it stays loaded when swup swaps page content. */

/* --- Card expand / modal system --- */

.project-card[data-expandable] p,
.feed-post[data-expandable] .post-content p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-card[data-expandable],
.feed-post[data-expandable] {
  cursor: pointer;
  transition: border-color .18s, transform .25s cubic-bezier(.22,1,.36,1), background .18s, box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.project-card[data-expandable]:hover,
.feed-post[data-expandable]:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* html (not body) is the page scroller here, because the main stylesheet sets overflow-x on it.
   cards.js toggles .cards-lock while a modal is open, and pads the page by the scrollbar width
   so the content behind does not jump sideways when the scrollbar disappears. */
html.cards-lock { overflow: hidden; }

.card-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
}
.card-modal.is-open {
  display: flex;
  opacity: 1;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-container {
  position: relative;
  z-index: 1;
  background: var(--steel-surface);
  border: 1px solid #6f8fa966;
  border-radius: 16px;
  max-width: 780px;
  width: 90vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px) scale(.97);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.card-modal.is-open .modal-container {
  transform: translateY(0) scale(1);
}
/* The header stays put while the body scrolls, so the back arrow is always reachable */
.modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid #6f8fa924;
}
.modal-header h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}
.modal-back {
  background: none;
  border: 1px solid #6f8fa933;
  border-radius: 8px;
  color: var(--text-muted);
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
  flex-shrink: 0;
}
.modal-back svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.modal-back:hover,
.modal-back:focus-visible {
  color: var(--text-main);
  border-color: #6f8fa9b8;
  background: #6f8fa91f;
  transform: translateX(-2px);
  outline: none;
}
.modal-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #6f8fa966 transparent;
  padding: 1.5rem 2rem 2rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 1.05rem;
}
/* Pinned under the scrolling text so the card's link is always one click away */
.modal-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  border-top: 1px solid #6f8fa924;
}
.modal-footer[hidden] { display: none; }
.modal-footer .project-link { align-self: center; }

.modal-body p { margin: 0 0 1rem; color: inherit; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-body .tech-stack { margin-top: 1.25rem; }
.modal-body strong { color: var(--text-main); }
.modal-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  color: var(--steel-accent);
  background: #6f8fa91f;
  border: 1px solid #6f8fa933;
  border-radius: 5px;
  padding: .1em .38em;
  overflow-wrap: anywhere;
}

/* --- Project card illustrations --- */

.project-visual {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.project-visual .pv-s,
.project-visual .pv-d,
.project-visual .pv-hi {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.project-visual .pv-s { stroke: var(--steel-accent); stroke-width: 1.5; }
.project-visual .pv-d { stroke: #6f8fa966; stroke-width: 1.25; }
.project-visual .pv-f { fill: #6f8fa91a; stroke: #6f8fa957; stroke-width: 1.25; stroke-linejoin: round; }
.project-visual .pv-hi { fill: #6f8fa933; stroke: var(--steel-accent); stroke-width: 1.5; }
.project-visual .pv-a { fill: var(--steel-accent); stroke: none; }
.project-visual .pv-bg { fill: #0a0d146b; stroke: #6f8fa933; stroke-width: 1; }
.project-visual .pv-txt {
  fill: var(--text-main);
  font: 700 24px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: .8;
}
.project-visual .pv-glow { opacity: .6; transition: opacity .25s ease; }
.project-card:hover .project-visual .pv-glow { opacity: 1; }

@media (width <= 560px) {
  .modal-container { width: 95vw; }
  .modal-header { padding: 1rem 1.1rem; gap: .75rem; }
  .modal-header h2 { font-size: 1.15rem; }
  .modal-body { padding: 1.1rem 1.25rem 1.5rem; }
  .modal-footer { padding: .9rem 1.25rem; }
}

/* --- Hover details panel (mouse devices only) ---
   cards.js adds a .card-pop to every .project-card[data-expandable]. It is hidden
   everywhere except on devices whose primary input can hover; touch devices skip it
   and just tap to open the modal above. On mouse devices, clicking the card (or its
   panel) opens that same modal, centred on screen. */

.project-card[data-expandable] { position: relative; }

.card-pop { display: none; }

/* cards.js sets this when the modal closes, so the panel doesn't spring straight back
   under a cursor that hasn't moved; it is cleared as soon as the pointer moves again. */
.cards-quiet .card-pop {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .project-card[data-expandable]:hover,
  .project-card[data-expandable]:focus-within { z-index: 40; }

  .card-pop {
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    min-height: calc(100% + 2px);
    box-sizing: border-box;
    z-index: 2;
    padding: 1.5rem;
    background: var(--steel-surface);
    border: 1px solid #6f8fa9b8;
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(0,0,0,.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility 0s linear .15s;
  }
  .project-card[data-expandable]:hover > .card-pop,
  .project-card[data-expandable]:focus-within > .card-pop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .22s ease .14s, visibility 0s linear .14s;
  }

  .card-pop .project-meta { margin-bottom: 1rem; }
  .card-pop h2 { margin: 0 0 1rem; font-size: 1.6rem; line-height: 1.15; }
  .card-pop .pop-body { color: var(--text-muted); }
  /* beat the 3-line teaser clamp that applies to every <p> inside the card */
  .project-card[data-expandable] .card-pop .pop-body p {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    flex: none;
    margin: 0 0 .85rem;
    color: var(--text-muted);
    font-size: .95rem;
    line-height: 1.65;
  }
  .card-pop .pop-body strong { color: var(--text-main); }
  .card-pop .pop-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    color: var(--steel-accent);
    background: #6f8fa91f;
    border: 1px solid #6f8fa933;
    border-radius: 5px;
    padding: .1em .38em;
    overflow-wrap: anywhere;
  }
  .card-pop .pop-body .tech-stack { margin: 1.1rem 0 1.25rem; }
  .card-pop .project-link { margin-top: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card-pop, .project-card[data-expandable]:hover > .card-pop,
  .project-card[data-expandable]:focus-within > .card-pop { transition: none; }
}