/* --- Featured Publications Module Styles --- */

/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/* Scoped wrapper */
.custom-featured-publications {
  padding: 0px 15px;
  font-family: 'Montserrat', sans-serif; /* Apply Montserrat */
}

/* Title styling */
.featured-publications-title {
  font-size: 2.5rem; /* Adjust size as needed */
  font-weight: 700; /* Use Montserrat bold weight */
  text-align: center;
  margin-bottom: 40px; /* Increased margin */
  color: #1a1a1a; /* Dark color for title */
}

/* Button wrapper for centering */
.featured-publications-cta-wrapper {
  text-align: center;
  margin-bottom: 50px; /* Increased margin */
}

/* Base Button styling */
.custom-featured-publications .cta-button {
  display: inline-flex; /* Use flex for centering content and arrow */
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  font-family: 'Montserrat', sans-serif; /* Apply Montserrat */
  font-weight: 700; /* Use Montserrat bold weight */
  text-decoration: none;
  border-radius: 50px; /* Pill shape */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transitions for hover effects */
  min-width: 150px; /* Ensure a minimum button width */
}

/* Filled Gradient Button (Main CTA) */
.custom-featured-publications .cta-button--filled-gradient {
  color: #ffffff;
  /* Gradient from image (approximate) */
  background: linear-gradient(to right, #a044ff, #008cff);
  border: none; /* No border for filled button */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.custom-featured-publications .cta-button--filled-gradient:hover,
.custom-featured-publications .cta-button--filled-gradient:focus {
  opacity: 0.9; /* Slight opacity change on hover */
  transform: translateY(-3px); /* Slight lift on hover */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

/* Outlined Gradient Button ("Read More") */
.custom-featured-publications .cta-button--outlined-gradient {
    position: relative; /* Needed for pseudo-element */
    color: #333333; /* Default text color */
    background-color: transparent; /* Transparent background */
    border: none; /* Remove default border */
    padding: 10px 25px; /* Slightly adjusted padding for outlined */
    font-weight: 500; /* Slightly less bold for outlined */
    overflow: hidden; /* Hide gradient overflow */
}

/* Pseudo-element for the gradient border effect */
.custom-featured-publications .cta-button--outlined-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px; /* Match button border-radius */
    padding: 2px; /* Thickness of the gradient border */
    background: linear-gradient(to right, var(--gradient-start, #a044ff), var(--gradient-end, #008cff)); /* Use CSS variables from card */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    /* Ensure the pseudo-element is behind the text */
    z-index: 0;
    transition: padding 0.3s ease; /* Animate border thickness on hover */
}

.custom-featured-publications .cta-button--outlined-gradient:hover::before {
    padding: 3px; /* Increase border thickness on hover */
}

/* Style for the button text container if needed to ensure it's above pseudo-element */
.custom-featured-publications .cta-button--outlined-gradient span:not(.read-more-arrow) {
    position: relative;
    z-index: 1; /* Ensure text is above the pseudo-element */
}

.custom-featured-publications .cta-button--outlined-gradient:hover {
    color: #000; /* Darken text on hover for contrast */
    transform: translateY(-2px); /* Slight lift */
}


/* Arrow icon styling */
.custom-featured-publications .read-more-arrow {
  display: inline-block;
  margin-left: 8px; /* Space between text and arrow */
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor; /* Use current text color */
  border-right: 2px solid currentColor; /* Use current text color */
  transform: rotate(45deg); /* Rotate to make an arrow */
  transition: transform 0.3s ease; /* Smooth transition for arrow movement */
}

.custom-featured-publications .cta-button--outlined-gradient:hover .read-more-arrow {
  transform: rotate(45deg) translateX(3px); /* Move arrow slightly on hover */
}


/* Grid container */
.publications-grid {
  display: grid;
  /* Responsive columns: try to fit 300px wide cards, otherwise adjust */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px; /* Space between cards */
}

/* Individual card styling */
.publication-card {
  background-color: #ffffff;
  border: none; /* Remove default border */
  border-radius: 16px; /* Rounded corners */
  position: relative; /* Needed for positioning the label and gradient pseudo-element */
  display: flex;
  flex-direction: column; /* Stack content vertically */
  min-height: 250px; /* Ensure cards have some minimum height and space for button */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1; /* Ensure card content is above the pseudo-element border */
  overflow: hidden;
}
.publication-card--resource {
  border: 3px solid white;
}

{#/* Pseudo-element for the gradient border on the card */
.publication-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px; /* Match card border-radius */
    padding: 3px; /* Thickness of the gradient border */
    background: linear-gradient(to right, var(--gradient-start, #a044ff), var(--gradient-end, #008cff)); /* Use CSS variables */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    /* Ensure the pseudo-element is behind the card content */
    z-index: 0;
    opacity: 0.7; /* Initial opacity for the border */
    transition: opacity 0.3s ease, padding 0.3s ease; /* Animate opacity and padding */
}#}

.publication-card:hover {
   transform: translateY(-8px); /* Lift card higher on hover */
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

{#.publication-card:hover::before {
    opacity: 1; /* Full opacity on hover */
    padding: 4px; /* Slightly thicker border on hover */
}#}


/* Static "Publication" label inside card */
.publication-label-static {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif; /* Apply Montserrat */
}
.publication-card--resource .publication-label-static {
  top: 30px;
  right: 30px;
}

/* Rich text content area */
.publication-content {
  flex-grow: 1; /* Allows content to push meta down */
  margin-bottom: 20px; /* Space before category and button */
  color: #333333;
  line-height: 1.6;
  font-family: 'Montserrat', sans-serif; /* Apply Montserrat */
  font-weight: 400; /* Use regular Montserrat weight */
  background-position: center;
  background-size: cover;
  padding: 40px 25px 25px 25px; /* More padding top due to label */
}
.publication-card--resource .publication-content {
  padding: 60px 30px 30px 30px;
}

/* Ensure paragraphs inside rich text have spacing */
.publication-content p {
  margin-bottom: 1em;
}
.publication-content p:last-child {
  margin-bottom: 0;
}
.publication-content strong {
    font-weight: 700; /* Ensure bold works with Montserrat */
}

/* Category and Button container at the bottom */
.publication-meta {
    display: flex;
    justify-content: space-between; /* Space out category and button */
    align-items: center;
    margin-top: auto; /* Pushes to the bottom if content is short */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 10px; /* Space between items when wrapped */
    padding: 0px 25px 25px 25px;
}

/* Category section */
.publication-category {
  display: flex;
  align-items: center;
}

/* Colored dot */
.category-dot {
  width: 14px; /* Slightly smaller dot */
  height: 14px; /* Slightly smaller dot */
  border-radius: 50%; /* Perfect circle */
  margin-right: 8px; /* Slightly less space */
  /* Background color set inline via HubL */
  flex-shrink: 0; /* Prevent shrinking if category name is long */
}

/* Category name text */
.category-name {
  font-size: 0.9rem; /* Slightly smaller text */
  font-weight: 700; /* Use Montserrat bold weight */
  color: #333333;
  font-family: 'Montserrat', sans-serif; /* Apply Montserrat */
}

.read-more-button {
  display: flex;
  align-items: center;
}
.publication-card {
  position: relative;
}
.publication-card .tile-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .featured-publications-title {
    font-size: 2rem;
  }

  /* Stack cards on smaller screens if auto-fit doesn't handle it */
  .publications-grid {
     /* If you prefer stacking explicitly */
     /* grid-template-columns: 1fr; */
  }

  .publication-card {
    min-height: 220px; /* Adjust min height */
  }
  
  .publication-content {
    padding: 30px 20px 20px 20px;
    font-size: 16px;
  }
  .publication-card--resource .publication-content {
    padding: 36px 20px 20px 20px;
  }

  .publication-meta {
      padding: 0px 20px 20px 20px;
  }

    .read-more-button {
        text-align: center;
        justify-content: center; /* Center button text and arrow */
    }
  
  .resource-feed .scope__cta {
    flex-direction: column;
  }
  
  .publication-card--resource .publication-label-static {
    top: 18px;
    right: 20px;
  }
}

@media (max-width: 480px) {
    .featured-publications-title {
        font-size: 1.8rem;
    }
     .custom-featured-publications .cta-button {
         padding: 10px 25px;
         font-size: 0.9rem;
     }
     .publication-content {
         padding: 25px 15px 15px 15px;
     }
     .publication-meta {
         padding: 0px 15px 15px 15px;
     }
    .publication-label-static {
        top: 10px;
        right: 15px;
    }
}