/* Post Card Block Styles */

/* CSS Custom Properties */
.post-card {

   /* Post Card */
   --bd-postcard-background: #fff;
   --bd-postcard-border: 1px solid var(--wp--preset--color--border);
   --bd-postcard-border-radius: 0;
   --bd-postcard-padding: 1.5rem;
   --bd-postcard-shadow: 0 1px 3px rgba(139, 115, 85, 0.08);
   --bd-postcard-shadow-hover: 0 6px 24px rgba(107, 93, 79, 0.15), 0 2px 4px rgba(139, 115, 85, 0.1);
   --bd-postcard-transform-hover: translateY(-2px);

   /* Post Card Image */
   --bd-postcard-image-height: 200px;
   --bd-postcard-image-width: 100%;
   --bd-postcard-image-display: block;

   /* Post Card Header */
   --bd-postcard-header-link-color: var(--wp--preset--color--accent);
   --bd-postcard-header-link-hover-color: var(--wp--preset--color--ink);
   --bd-postcard-header-link-text-decoration: underline;
   --bd-postcard-header-link-text-decoration-color: rgba(112, 31, 31, 0.151);
   --bd-postcard-header-link-text-decoration-thickness: 1px;
   --bd-postcard-header-link-text-decoration-underline-offset: 0.15em;
   --bd-postcard-header-link-hover-text-decoration: none;

   /* Post Card Footer */
   --bd-postcard-footer-text-transform: uppercase;
   --bd-postcard-footer-font-size: 0.85rem;
   --bd-postcard-footer-font-weight: 500;
   --bd-postcard-footer-letter-spacing: 0.05em;
   --bd-postcard-footer-color: var(--wp--preset--color--ink-light);
   --bd-postcard-footer-hover-color: var(--wp--preset--color--ink);
   --bd-postcard-footer-readmore-after-content: var(--bd-arrow-right);

   /* Post Card Meta */
   --bd-postcard-meta-font-size: 0.85rem;
   --bd-postcard-meta-color: var(--wp--preset--color--ink-light);
   --bd-postcard-meta-font-style: italic;
   --bd-postcard-meta-margin-bottom: 0.5rem;

}

/* Base Post Card Styles */

.post-card-content {
   padding: var(--bd-postcard-padding);
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}

.post-card {
   img {
      width: var(--bd-postcard-image-width);
      height: var(--bd-postcard-image-height);
      object-fit: cover;
      margin-bottom: 0;
      object-position: left;
   }

   h3 {
      margin-top: 0;
   }
}

.postcard__header a {
   display: block;
   color: var(--bd-postcard-header-link-color);
   text-decoration: var(--bd-postcard-header-link-text-decoration);
   text-decoration-color: var(--bd-postcard-header-link-text-decoration-color);
   text-decoration-thickness: var(--bd-postcard-header-link-text-decoration-thickness);
   text-underline-offset: var(--bd-postcard-header-link-text-decoration-underline-offset);
   transition: color var(--transition-base), text-decoration var(--transition-base);
}

.postcard__header a.external:after {
   display: inline-block;
   content: var(--bd-external-link-icon);
   margin-left: 0.25em;
   width: 0.5em;
   height: 0.5em;
   opacity: 0.4;
}

.postcard__header a:hover {
   color: var(--bd-postcard-header-link-hover-color);
   text-decoration: var(--bd-postcard-header-link-hover-text-decoration);
}

.postcard__meta {
   font-size: var(--bd-postcard-meta-font-size);
   color: var(--bd-postcard-meta-color);
   font-style: var(--bd-postcard-meta-font-style);
   margin-bottom: var(--bd-postcard-meta-margin-bottom);
}

.postcard__footer {
   text-transform: var(--bd-postcard-footer-text-transform);
   font-size: var(--bd-postcard-footer-font-size);
   font-weight: var(--bd-postcard-footer-font-weight);
   letter-spacing: var(--bd-postcard-footer-letter-spacing);
   color: var(--bd-postcard-footer-color);
}

.postcard__footer:hover {
   color: var(--bd-postcard-footer-hover-color);
}

.readmore-link:after {
   content: var(--bd-postcard-footer-readmore-after-content);
}

/* Post Type Variations */

.post-card.post-type--book {
   --bd-postcard-height: auto;
   --bd-postcard-image-height: auto;
}

/* Context-Specific Variations */

.posts__wrapper--not-featured {
   --bd-postcard-background: unset;
   --bd-postcard-border: unset;
   --bd-postcard-shadow: unset;
   --bd-postcard-shadow-hover: unset;
   --bd-postcard-transform-hover: unset;
   --bd-postcard-image-height: auto;
   --bd-postcard-image-width: auto;
}

/* CSS for Not Featured Posts */

.post-card.context--not-featured-posts {

   .postcard__image img {
      margin-bottom: 0.75rem;
      filter: grayscale(100%);
      opacity: 0.7;
      transition: filter 0.2s ease, opacity 0.2s ease;
      max-width: 140px;
      max-height: 73px;
   }

   &:hover .postcard__image img {
      filter: grayscale(0%);
      opacity: 1;
   }

   .postcard__header {
      font-size: 0.9rem;
      color: var(--color-ink-light);
      font-weight: 500;
      opacity: 0;
      transition: opacity 0.2s ease;
      margin-top: 0.5rem;
   }

   &:hover .postcard__header {
      opacity: 1;
   }
}

/* Grid Layout variations */

.posts__wrapper--layout-grid {
   .post-card {
      background: var(--bd-postcard-background);
      border: var(--bd-postcard-border);
      border-radius: var(--bd-postcard-border-radius);
      box-shadow: var(--bd-postcard-shadow);
      display: flex;
      flex-direction: column;
      transition: box-shadow var(--transition-base), transform var(--transition-base);

      &:hover {
         box-shadow: var(--bd-postcard-shadow-hover);
         transform: var(--bd-postcard-transform-hover);
      }
   }
}

/* Stacked Layout */

.posts__wrapper--layout-stacked {
   .post-card {
      --bd-postcard-image-width: 300px;
      display: flex;
      flex-direction: row;
      padding-bottom: 2.5rem;
      border-bottom: 1px solid var(--color-border);
      gap: 2rem;

      &:last-child {
         border: none;
      }

      .wp-block-post-featured-image {
         flex: 0 0 var(--bd-postcard-image-width);
      }
   }
}

/* Featured Posts - Home Page - Recent Writing */

.recent-writing-featured-home {
   .post-meta {
      --bd-postcard-meta-margin-bottom: 1rem;

      .client {
         display: none;
      }
   }
}

/* Featured Posts - Speaking Page - Selected Talks & Interviews */

.writing-selected-articles .post-card,
.featured-posts--speaking-page--talks .post-card,
.featured-posts--speaking-page--interviews .post-card {
   --bd-postcard-padding: 0;
}

.writing-selected-articles .post-card h3,
.featured-posts--speaking-page--talks .post-card h3,
.featured-posts--speaking-page--interviews .post-card h3 {
   font-size: 1.75rem !important;
}

.featured-posts--speaking-page--talks .postcard__excerpt,
.featured-posts--speaking-page--interviews .postcard__excerpt,
.featured-posts--speaking-page--talks .postcard__footer,
.featured-posts--speaking-page--interviews .postcard__footer {
   display: none;
}

/* Featured Posts - Speaking Page */

.featured-posts--speaking-page {
   .post-card {
      padding-bottom: 1.5rem;
   }

   .postcard__meta {
      display: flex;
      gap: 1rem;
      margin-bottom: 0.75rem;
      font-size: 0.95rem;
      color: var(--color-ink-light);
      flex-wrap: wrap;
      align-items: center;

      time {
         color: var(--wp--preset--color--ink-light);
      }

      .client {
         font-style: normal;
         font-weight: 600;

         &:not(:last-child)::after {
            content: "|";
            margin-left: 1rem;
            font-style: normal;
         }
      }
   }

   .postcard__header {
      margin-bottom: 0.5rem !important;
      line-height: 1.2 !important;
   }

   .postcard__image {
      display: none;
   }


}

/* Featured Posts - Writing Page - Selected Articles */

.writing-selected-articles {
   .post-card {
      gap: 2rem;
   }

   .postcard__meta {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      align-items: center;

      time {
         font-style: normal;
         color: var(--wp--preset--color--ink-light);
      }

      .client {
         font-weight: 500;

         &:not(:last-child)::after {
            content: "|";
            margin-left: 0.5rem;
            font-style: normal;
            color: var(--wp--preset--color--border);
         }
      }
   }

   .wp-block-post-excerpt {
      font-size: 1rem !important;
   }

   .postcard__image {
      flex: 0 0 300px;

      img {
         border-radius: 4px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
         filter: var(--image-filter);
         backface-visibility: hidden;
         transform: translateZ(0);

         &:hover {
            box-shadow: var(--bd-postcard-shadow-hover);
            transform: var(--bd-postcard-transform-hover);
            filter: var(--image-filter-hover) !important;
            transform: translateZ(0) translateY(-2px) !important;
         }
      }
   }
}

/* Featured Posts - Projects Page - Older Projects */

.featured-posts--projects-page--older-projects {

   .post-card {
      --bd-postcard-background: unset;
      --bd-postcard-border: unset;
      --bd-postcard-shadow: unset;
      --bd-postcard-shadow-hover: unset;
      --bd-postcard-transform-hover: unset;
      --bd-postcard-image-height: 73px;
      --bd-postcard-image-width: 140px;
      align-items: center;
      text-align: center;

      &:hover {
         img {
            filter: grayscale(0%);
            opacity: 1;
         }

         .postcard__header {
            opacity: 1;
         }
      }

      img {
         filter: grayscale(100%);
         opacity: 0.7;
         transition: filter var(--transition-base), opacity var(--transition-base);
      }

      .postcard__meta {
         display: none;
      }

      .postcard__header {
         font-family: var(--wp--preset--font-family--source-sans-pro);
         font-size: 0.9rem !important;
         font-weight: 500 !important;
         opacity: 0;
         transition: opacity var(--transition-base);
         margin-top: 0.5rem;
      }

      .postcard__content {
         --bd-postcard-padding: 0;
      }

      .postcard__footer,
      .postcard__meta,
      .postcard__excerpt {
         display: none;
      }
   }
}

.featured-posts--projects {
   .post-card {
      background: #fff;
      border: 1px solid rgba(216, 209, 200, 0.3);
      border-radius: 8px;

      .post-card-content {
         padding-top: 0;
      }

      .postcard__image {
         text-align: center;
         height: 140px;
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 1.5rem;
         padding-bottom: 0;
         margin-bottom: 1.5rem;
      }

      img {
         width: 100%;
         height: auto;
         max-height: 120px;
         max-width: 100%;
         object-fit: contain;
         object-position: center;

      }

      .postcard__excerpt {
         font-size: 0.95rem !important;
         line-height: 1.6 !important;
         color: var(--color-ink-light, #666) !important;
         margin-bottom: 1rem;
         flex-grow: 1;
      }

      h3.postcard__header {
         font-size: 1.5rem !important;
      }
   }

}

/* Media Queries */

@media (min-width: 480px) {

   /* Books */
   .post-card.post-type--book {
      display: flex;
      flex-direction: row;

      .postcard__image {
         flex: 0 0 200px;
      }
   }
}

@media (min-width: 768px) {



   /* Books */

   .post-card.post-type--book {
      --bd-postcard-height: 400px;
      --bd-postcard-image-height: 400px;
      --bd-postcard-border-radius: 8px;
      --bd-postcard-scrollbar-width: 4px;
      --bd-postcard-scrollbar-track-bg: transparent;
      --bd-postcard-scrollbar-thumb-bg: rgba(139, 115, 85, 0.25);
      --bd-postcard-scrollbar-thumb-hover-bg: rgba(139, 115, 85, 0.3);
      position: relative;
      width: 100%;
      max-width: var(--book-max-width);
      display: block;
      outline: none;
      margin: 0;
      overflow: hidden;

      &:hover {
         .postcard__image {
            transform: translateZ(0) scale(1.05);
         }

         .post-card-content {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
         }
      }

      .postcard__header {
         font-size: 1.75rem !important;
         margin-bottom: 0.5rem !important;
         line-height: 1.2 !important;
      }

      .postcard__meta {
         display: none;
      }

      .postcard__image {
         height: var(--bd-postcard-image-height);
         display: block;
         width: auto;
         max-width: 100%;
         object-fit: contain;
         will-change: transform;
         backface-visibility: hidden;
         transform: translateZ(0);
         transition: transform var(--transition-transform);
      }

      .postcard__excerpt {
         line-height: 1.6 !important;
      }

      .post-card-content {
         position: absolute;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         overflow-y: auto;
         overflow-x: hidden;
         opacity: 0;
         transform: translateY(8px);
         will-change: opacity, transform;
         pointer-events: none;
         backdrop-filter: blur(2px);
         inset: 0;
         background: rgba(245, 241, 234, 0.85);
         padding: 24px 20px;
         transition: opacity var(--transition-transform), transform var(--transition-transform);

         /* Webkit Scrollbar Styling */
         &::-webkit-scrollbar {
            width: var(--bd-postcard-scrollbar-width);
         }

         &::-webkit-scrollbar-track {
            background: var(--bd-postcard-scrollbar-track-bg);
         }

         &::-webkit-scrollbar-thumb {
            background: var(--bd-postcard-scrollbar-thumb-bg);
            border-radius: calc(var(--bd-postcard-scrollbar-width) / 2);
            transition: background var(--transition-base);
         }

         &::-webkit-scrollbar-thumb:hover {
            background: var(--bd-postcard-scrollbar-thumb-hover-bg);
         }

         /* Firefox Scrollbar Styling */
         scrollbar-width: thin;
         scrollbar-color: var(--bd-postcard-scrollbar-thumb-bg) var(--bd-postcard-scrollbar-track-bg);
      }

      .postcard__footer {
         --bd-postcard-footer-text-transform: none;
         --bd-postcard-footer-letter-spacing: normal;
         display: flex;
         flex-direction: column;
         gap: 0.75rem;

         .wp-block-button__link {
            --bd-button-text-transform: none;
            --bd-button-letter-spacing: normal;
            --bd-button-bg-color: var(--wp--preset--color--accent);
            --bd-button-bg-color-hover: var(--wp--preset--color--ink);
            --bd-button-border-color: var(--wp--preset--color--accent);
            --bd-button-border-color-hover: var(--wp--preset--color--ink);
            --bd-button-border-radius: 4px;
            width: 100%;
            padding-inline: 1.5rem;

            &:hover {
               outline: 2px solid var(--wp--preset--color--accent);
               outline-offset: 2px;
            }

            &:after {
               content: none;
            }
         }
      }

      .book-link {
         margin-top: auto;
         align-self: flex-start;
      }

      .wp-block-button__link.buy-button {
         /* Ghost button style */
         --bd-button-text-color: var(--wp--preset--color--accent);
         --bd-button-bg-color: none;
         --bd-button-bg-color-hover: var(--wp--preset--color--accent);
         --bd-button-border-color: var(--wp--preset--color--accent);
         --bd-button-border-color-hover: var(--wp--preset--color--accent);
      }
   }
}

@media (max-width: 767px) {
   .featured-posts--projects {
      & .post-card {
         .postcard__image {
            img {
               max-width: 100%;
            }
         }
      }
   }
}

@media (max-width: 600px) {
   .writing-selected-articles {
      .posts__wrapper--layout-stacked {
         .postcard__image {
            flex: 0 0 150px;

            img {
               height: auto;
               width: 100%;
            }
         }
      }
   }
}

@media (max-width: 450px) {
   .posts__wrapper--layout-stacked {
      .post-card {
         flex-direction: column;
      }
   }
}