/* Project Post Styles - EXACTLY like Teaching Page */
.post-template-project-post {
  --grid-gap-mobile: 1.5rem;
  --grid-gap-desktop: 2rem;
  --text-font-size: 18px;
  --media-max-height: 400px;
}

/* --- GENERAL STYLING --- */
.post-template-project-post h1 {
  padding: 3rem 0 2rem 0;
}

/* Create 2 columns for text - Apply to ALL paragraphs */
.post-template-project-post p {
  -moz-column-count: 2;
  column-count: 2;
  -moz-column-gap: 2rem;
  column-gap: 2rem;
  max-width: 100%;
  font-size: var(--text-font-size);
  line-height: 1.5;
  /* Prevent awkward breaks within paragraphs */
  -moz-column-break-inside: avoid;
  break-inside: avoid-column;
  page-break-inside: avoid;
}

/* Force single column for any paragraph with links */
.post-template-project-post p:has(a) {
  -moz-column-count: 1 !important;
  column-count: 1 !important;
  -moz-column-span: all;
  column-span: all;
  width: 100%;
}

/* Make links display as blocks to prevent breaking */
.post-template-project-post p a {
  display: block;
  width: 100%;
  font-size: var(--text-font-size);
  line-height: 1.5;
}

/* Target short paragraphs by adding a class in WordPress */
.post-template-project-post p.short-paragraph,
.post-template-project-post p.link-paragraph {
  -moz-column-count: 1 !important;
  column-count: 1 !important;
  width: 100%;
}

/* padding on the page so content is less wide */
.post-template-project-post .wp-block-columns.project-column-container[class*='wp-container-core-columns-is-layout'] {
  padding: 0 10rem !important;
  margin: 0;
}

/* Method 3: Target specific sections that have shorter paragraphs */
.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-3 p,
.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-4 p {
  -moz-column-count: 1 !important;
  column-count: 1 !important;
  width: 100%;
}

/* Bio paragraph styling */
.post-template-project-post .bio-paragraph {
  max-width: 100%;
}

/* For single bio paragraphs */
.post-template-project-post p.bio-paragraph-part {
  -moz-column-count: 2 !important;
  column-count: 2 !important;
  -moz-column-gap: 2rem !important;
  column-gap: 2rem !important;
}

/* --- COLUMNS IMAGE + TEXT STYLING --- */
.post-template-project-post .text-image-pattern {
  align-items: stretch;
  gap: var(--grid-gap-desktop);
  padding-left: 5rem;
  padding-right: 5rem;
}

/* Make each column stretch */
.post-template-project-post .text-image-pattern .wp-block-column {
  display: flex;
  flex-direction: column;
}

/* Make image container fill column */
.post-template-project-post .text-image-pattern .wp-block-image {
  flex: 1;
  display: flex;
}

/* ---- COMBINED IMAGE STYLING ---- */
/* Basic image styling with positioning */
.post-template-project-post img {
  width: 100% !important;
  height: auto !important;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  padding-top: 0;
  border-radius: .5rem;
  margin: 1rem 0;
}

/* Remove height restrictions */
.post-template-project-post img,
.post-template-project-post .wp-block-image img,
.post-template-project-post .entry-content img {
  min-height: unset !important; /* Remove any min-height restrictions */
  max-height: none !important; /* Remove any max-height restrictions */
}

/* Style adjustments for specific image locations */
.post-template-project-post .text-image-column img {
  padding: 0;
  margin: 1rem 0;
}

/* Global image tweaks */
.post-template-project-post img:nth-of-type(n+2) {
  width: 100%;
  padding-top: 2rem;
}

/* Make sure figure containers don't restrict height */
.post-template-project-post figure.wp-block-image,
.post-template-project-post figure {
  height: auto !important;
  max-height: none !important;
}

/* --- ENHANCED YOUTUBE EMBED STYLING --- */
.post-template-project-post .wp-block-embed {
  width: 100% !important;
  margin: 2rem 0 !important;
  display: block !important;
  position: relative !important;
}

.post-template-project-post .wp-block-embed .wp-block-embed__wrapper {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important; /* 16:9 Aspect Ratio */
  height: 0 !important;
  overflow: hidden !important;
}

.post-template-project-post .wp-block-embed iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
}

/* Fix for YouTube embed wrapper before pseudo element */
.post-template-project-post .wp-block-embed-youtube .wp-block-embed__wrapper::before {
  content: none !important;
  display: none !important;
}

/* --- HEADINGS --- */
.post-template-project-post .entry-content h2 {
  padding: 1rem 0 0.5rem 0;
  max-width: 100%;
}

/* --- REMOVE EXTRA MARGINS FROM BLOCKS --- */
.post-template-project-post :where(.is-layout-flow)>* {
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
}

/* --- RESPONSIVE STYLES --- */
@media (max-width: 1150px) and (min-width: 1025px) {
  .post-template-project-post .text-image-pattern {
    flex-direction: column;
    gap: var(--grid-gap-desktop);
  }

  /* Remove column count for medium screens */
  .post-template-project-post p {
    -moz-column-count: 1 !important;
    column-count: 1 !important;
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  
  /* Make sure bio paragraphs also use single column */
  .post-template-project-post .bio-paragraph-part {
    -moz-column-count: 1 !important;
    column-count: 1 !important;
  }

  .post-template-project-post .text-image-pattern .wp-block-column {
    flex: 1 1 100%;
  }
}

@media (max-width: 1024px) {
  /* Container padding */
  .wp-block-columns.project-column-container.is-layout-flex[class*='wp-container-core-columns-is-layout'] {
    padding: 0 1.5rem !important;
    margin: 0;
  }

  /* Pattern layout */
  .post-template-project-post .text-image-pattern {
    flex-direction: column;
    gap: var(--grid-gap-mobile);
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .post-template-project-post .text-image-pattern .wp-block-column {
    flex: 1 1 100%;
  }

  /* Image handling */
  .post-template-project-post .text-image-pattern .wp-block-image img {
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
  }

  /* MOBILE VIEW - Single column text */
  .post-template-project-post p,
  .post-template-project-post p.bio-paragraph-part,
  .post-template-project-post p.two-column-paragraph,
  .post-template-project-post p.mobile-view {
    -moz-column-count: 1 !important;
    column-count: 1 !important;
    -moz-column-gap: 0 !important; 
    column-gap: 0 !important;
    width: 100% !important;
  }

  /* Bio paragraphs wrapper should also be single column */
  .post-template-project-post .bio-paragraphs-wrapper.two-column-flow {
    -moz-column-count: 1 !important;
    column-count: 1 !important;
  }
}