{% require_css %}
    <style>
      {% scope_css %}
  
      .blog-post-grid-module {
        box-sizing: border-box;
        margin: 20px 0;
      }
  
      *, *:before, *:after {
        box-sizing: inherit;
      }
  
      .blog-post-grid-container {
        display: grid;
        gap: 20px;
      }
  
      /* Layout Modes */
      .blog-post-grid-module.manual-mode .blog-post-grid-container {
        grid-template-columns: 2fr 1fr 1fr;
      }
  
      .blog-post-grid-module.automatic-mode .blog-post-grid-container {
        grid-template-columns: repeat(3, 1fr);
      }
  
      /* Columns and Cards */
      .blog-post-column {
        display: flex;
      }
  
      .post-card {
        background-color: #ffffff;
        border-radius: 30px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
  
      .post-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
      }
  
      /* --- Image Styling (Equal Heights) --- */
      .post-image-wrapper { 
        position: relative;
        min-height: 200px; 
        background-color: #f0f0f0;
      }
  
      .featured-column .post-image-wrapper img { 
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-height: 300px; 
      }
  
      .post-image-bg { 
          width: 100%;
          height: 100%;
          background-size: cover;
          background-position: center center;
          min-height: 300px;
      }
      
  
      .no-image + .post-content-wrapper {
          margin-top: 0;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
      }
  
      /* Featured Badge */
      .featured-badge {
        position: absolute;
        text-align: center;
        top: 0;
        background-color: var(--main-color);
        color: #ffffff;
        padding: 5px 30px;
        font-size: 1.4em;
        font-weight: bold;
        border-radius: 0 0 20px 20px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
      }
  
      .no-image .featured-badge {
          position: static;
          display: inline-block;
          margin: 15px 0 0 15px;
          left: auto;
          top: auto;
          border-radius: 20px;
          transform: none;
      }
  
      /* Content Area */
      .post-content-wrapper {
        padding: 45px 40px 20px 20px;
        background-color: #ffffff;
        margin-top: -125px;
        position: relative;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        clip-path: ellipse(100% 60% at 15% 60%);
      }
  
      /* Typography */
      .post-title {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 1.4em;
        font-weight: bold;
        color: var(--dark-gray-color);
      }
      .featured-column .post-title{
        color: var(--main-color) !important;
      }
  
      .standard-column .post-title,
      .automatic-column .post-title {
        font-size: 1.15em;
        margin-bottom: auto; 
        margin-top: auto;
      }
  
      .post-title a {
        text-decoration: none;
        color: inherit;
        transition: color 0.3s ease;
      }
  
     
  
      .post-description {
        font-size: 0.95em;
        color: var(--dark-gray-color);
        line-height: 1.5;
        margin-bottom: 15px;
        flex-grow: 1; 
      }
  
      .standard-column .post-description,
      .automatic-column .post-description {
        display: none; 
      }
  
      /* Read More Link */
      .read-more-link {
        display: inline-block;
        font-weight: bold;
        color: var(--main-color);
        text-decoration: none;
        margin-top: auto; 
        padding-top: 10px; 
        transition: color 0.3s ease;
        text-align: right;
      }
  
      .read-more-link:hover {
        color: var(--main-color);
      }
  
      
        /* Make sure the parent link still sets the color */
        .read-more-link {
            display: inline-flex;
            align-items: center;
            font-weight: bold;
            color: var(--main-color); 
            text-decoration: none;
            margin-top: auto;
            padding-top: 10px;
            transition: color 0.3s ease;
            justify-content: flex-end;
        }
        .read-more-link:hover {
            color: var(--dark-gray-color);
        }
  
      /* --- Responsiveness --- */
      @media (max-width: 991px) { /* Tablet */
        .blog-post-grid-module.manual-mode .blog-post-grid-container,
        .blog-post-grid-module.automatic-mode .blog-post-grid-container {
          grid-template-columns: 1fr; 
        }
  
        .post-image-wrapper, 
        .featured-column .post-image-wrapper img,
        .post-image-bg {
          min-height: 300px
        }
  
        .post-content-wrapper {
            margin-top: -100px;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            clip-path: none;
            text-align: center;
            padding: 40px;
        }
        .read-more-link{
            justify-content: center;
        }
         .no-image + .post-content-wrapper { margin-top: 0; }
      }
  
      @media (max-width: 767px) { /* Mobile */
        .post-image-wrapper, 
        .featured-column .post-image-wrapper img,
        .post-image-bg {
           min-height: 200px; 
        }
        .featured-column .post-image-wrapper img{
            max-height: 200px;
        }
        .featured-badge{
            font-size: 1em;
        }
  
        .post-content-wrapper {
            margin-top: -50px;
            border-top-left-radius: 60px;
            border-top-right-radius: 60px;
        }
         .no-image + .post-content-wrapper { margin-top: 0; }
  
        .post-title { font-size: 1.2em; }
        .standard-column .post-title,
        .automatic-column .post-title { font-size: 1.1em; }

      }
  
      {% end_scope_css %}
    </style>
  {% end_require_css %}