/* Two-column layout where the header spans the full width above the columns.
   This ensures the aside (hero) sits beside the main text row and aligns to the
   top of the text area (not the title/date). Links occupy a full-width row below. */
article.post-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
  background-color: var(--m3-color-surface);
  color: var(--m3-color-on-surface);
  display: grid;
  /* two equal columns (left text, right hero) */
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "header header"
    "main   aside"
    "links  links";
  gap: 2.4rem;
  align-items: start;
  box-sizing: border-box;
}

.post-header {
  /* Place header in its own full-width row above columns so aside cannot affect its height.
     Visually it's left-aligned to match the main content column. */
  grid-area: header;
  margin: 0 0 1.6rem 0;
  text-align: left;
  align-self: start;
  max-width: min(80ch, 100%);
}

.post-title {
  font-family: var(--m3-font-family-display);
  font-size: var(--m3-font-headline-large);
  color: var(--m3-color-primary);
  margin-bottom: 1.2rem;
  line-height: 1.2;
}

.publish-date {
  font-family: var(--m3-font-family-body);
  font-size: var(--m3-font-label-large);
  color: var(--m3-color-on-surface-variant);
  margin-bottom: 0.8rem;
}

.main-content {
  grid-area: main;
  min-width: 0;
  width: 100%;
}

.aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-self: start; /* keep aside aligned to the top of the main column */
  width: 100%; /* fill the aside column */
}

.hero {
  width: 100%;
  max-height: min(60vh, 480px); /* allow the hero to be visually prominent while staying constrained */
  background-color: var(--m3-color-surface-variant);
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  border: 1px solid color-mix(in oklab, var(--m3-color-outline) 55%, transparent);
  display: block;
}

/* Ensure the image fills the hero box without stretching the layout */
.hero-trigger img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-trigger {
  all: unset;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.hero-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  display: block;
}

.hero-trigger:hover img {
  transform: scale(1.02);
}

.project-links {
  grid-area: links;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--m3-color-outline);
  display: flex;
  justify-content: center;
}

.project-links .links-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  align-items: center;
  max-width: min(80ch, 900px);
  width: 100%;
  padding-inline: 0.8rem;
  box-sizing: border-box;
}

.aside-links {
  margin-top: 0;
}

.links-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: stretch;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  font-family: var(--m3-font-family-body);
  font-size: var(--m3-font-label-large);
  font-weight: 500;
  text-decoration: none;
  background-color: var(--m3-color-primary-container);
  color: var(--m3-color-on-primary-container);
  transition: background-color 0.18s, transform 0.12s;
  border: 1px solid transparent;
}

.project-link .link-label {
  display: inline-block;
}

.project-link .external-icon {
  width: 1.1rem;
  height: 1.1rem;
  color: currentColor;
  flex: 0 0 auto;
}

.project-link:hover {
  background-color: var(--m3-color-primary);
  color: var(--m3-color-on-primary);
  transform: translateY(-2px);
}

.project-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--m3-color-primary) 25%, transparent),
    0 0 0 6px color-mix(in oklab, var(--m3-color-primary) 12%, transparent);
  border-color: color-mix(in oklab, var(--m3-color-primary) 40%, transparent);
}

.prose {
  font-family: var(--m3-font-family-body);
  font-size: var(--m3-font-body-large);
  line-height: 1.7;
  color: var(--m3-color-on-surface);
  min-width: 0;
  max-width: none; /* allow the prose to fill the left 50% column */
  width: 100%;
  margin: 0; /* ensure left alignment within the left column */
}

.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--m3-font-family-display);
  color: var(--m3-color-on-surface);
  margin-top: 2.6rem;
  margin-bottom: 1.2rem;
}

.prose p {
  margin-bottom: 1.6rem;
}

.prose a {
  color: var(--m3-color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}

.prose a:hover {
  background-color: var(--m3-color-primary);
  color: var(--m3-color-on-primary);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
}
.lightbox.is-hidden {
  display: none;
}
.lightbox-content {
  position: relative;
  outline: none;
  max-width: min(95vw, 1400px);
  max-height: 90vh;
}
.lightbox-content img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background-color: var(--m3-color-surface);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--m3-color-outline);
  background-color: var(--m3-color-surface-variant);
  color: var(--m3-color-on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox-close:hover {
  background-color: var(--m3-color-primary);
  color: var(--m3-color-on-primary);
}

/* Mobile - single column, stacking order: Header → Image → Links → Text */
@media (max-width: 900px) {
  article.post-grid {
    grid-template-columns: 1fr;
    padding: 2.4rem 1.6rem;
    /* Mobile stacking order: Header → Image (aside) → Links → Text (main) */
    grid-template-areas:
      "header"
      "aside"
      "links"
      "main";
  }

  .post-header {
    grid-area: header;
    text-align: center;
  }

  /* Restore normal flow for mobile */
  .aside {
    position: static;
    width: auto;
    grid-area: aside;
    margin: 0 0 1.6rem 0;
    align-self: stretch;
  }

  .main-content {
    grid-area: main;
    margin-right: 0; /* remove desktop reserved space */
  }

  .project-links {
    grid-area: links;
    margin-top: 1.6rem;
  }

  .links-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
  }

  .project-link {
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
  }

  .post-title {
    font-size: var(--m3-font-headline-medium);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-trigger img,
  .project-link {
    transition: none !important;
  }
}