/* Filename: css/all_webinars.css */

.all-webinars-paragraph {
  margin-bottom: 2em;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 2em 20px;
}

/* List of webinar items */
.all-webinars__list {
  display: grid;
  gap: 2em; /* Space between stacked items */
  margin-bottom: 2em; /* Space before pager */
}

/* Individual webinar item card */
.all-webinars__item {
  display: grid;
  grid-template-columns: 1fr; /* Default mobile: stack */
  gap: 1.5em;
  background-color: #fff; /* White background for the card content */
  overflow: hidden; /* Contain elements */
  font-family: Poppins;
  font-weight: 600;
  font-size: 27px;
  line-height: 100%;
}

/* Two columns layout on wider screens */
@media (min-width: 768px) {
  .all-webinars__item {
    /* Content | Image */
    grid-template-columns: 1.5fr 1fr; /* Adjust ratio as needed */
    gap: 2em;
  }
}

.all-webinars__text-content {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 5rem;
}

.all-webinars__item-title {
  font-size: 1.4em;
  margin: 0 0 0.2em 0;
  line-height: 1.3;
  color: #000;
}

.all-webinars__item-meta {
  margin-bottom: 0.5em;
}

.all-webinars__item-date {
  font-size: 12px;
  color: #AAAAAA;
  display: flex;
  align-items: center;
  gap:
    0.4em;
  padding: 5px 10px;
  background-color: #F8F9FA;
  font-weight: 600;
  max-width: 126px;
}

.all-webinars__clock-icon {
  width: 15px;
  height: 15px;
  color: #6B778C;
  flex-shrink: 0;
}

.all-webinars__summary {
  color: #6F7079;
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
}
.all-webinars__summary p:last-child {
  margin-bottom: 0;
}

.all-webinars__buttons {
  margin-top: 1em; /* Use auto for pushing to bottom? No, fixed space looks better */
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;
}

.all-webinars__buttons .button {
  display: inline-flex; /* Use flex for icon alignment */
  align-items: center;
  gap: 0.5em; /* Space between icon and text */
  padding: 0.7em 1.4em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 0.9em;
  text-align: center;
  line-height: 1; /* Ensure consistent vertical alignment */
}

.all-webinars__buttons .button--view-more {
  background-color: #95c11f; /* Green */
  color: #fff;
  font-family: Poppins;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  border: 1px solid;
}
.all-webinars__buttons .button--view-more:hover {
  background-color: #ffffff !important;
  border-color: #95c11f !important;
  color: #95c11f !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid;
  font-size: 16px;
}

.all-webinars__buttons .button--replay {
  background-color: #95c11f; /* Same Green */
  color: #fff;
  font-family: Poppins;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  border: 1px solid;
}
.all-webinars__buttons .button--replay:hover {
  background-color: #ffffff !important;
  border-color: #95c11f !important;
  color: #95c11f !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid;
  font-size: 16px;
}

.all-webinars__play-icon {
  width: 10px;
  height: auto;
  color: inherit; /* Inherit color from button */
}


.all-webinars__image {
  line-height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
}

.all-webinars__image img {
  display: block;
  width: 100%;
  height: 100% !important; /* Fill container height */
  object-fit: cover; /* Cover looks better for consistent grid */
  object-position: center;
}

/* Stack image above text on mobile */
@media (max-width: 767px) {
  .all-webinars__text-content {
    padding: 1rem 0rem;
    order: 2; /* Text comes after image in source order */
  }
  .all-webinars__image {
    order: 1; /* Image comes first */
    max-height: 250px; /* Slightly smaller max height */
  }
  .all-webinars__item {
  }
}


/* --- Pager Styling --- */
/* Based on Drupal core pager styles (may need adjustment based on theme) */
.pager {
  margin-top: 2em;
  text-align: center; /* Center pager */
}

.pager__items {
  display: inline-block; /* Allow centering */
  padding-left: 0;
  margin: 1rem 0;
  list-style: none;
}

.pager__item {
  display: inline-block; /* Horizontal list */
  margin: 0 0.25rem; /* Spacing between items */
}

.pager__link {
  display: inline-block;
  padding: 0.5em 0.8em;
  text-decoration: none;
  background-color: #fff;
  color: #0052cc; /* Blue links */
  border: 1px solid #dfe1e6;
  border-radius: 3px;
}

.pager__link:hover,
.pager__link:focus {
  background-color: #f4f5f7; /* Light hover */
  border-color: #c1c7d0;
}

.pager__item.is-active .pager__link {
  background-color: #0052cc; /* Active background */
  color: #fff; /* Active text */
  border-color: #0052cc;
  font-weight: bold;
  pointer-events: none; /* Not clickable */
}

/* Style "Next" link like the pager image (optional, overrides core pager) */
/* This is a simplified approach; core pager has first/prev/next/last */
/* You might need more specific selectors depending on your theme's pager output */
.pager__item--next .pager__link,
.pager__item--previous .pager__link { /* Style prev too for consistency */
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 0.6em 1.2em;
}
.pager__item--next .pager__link:hover,
.pager__item--previous .pager__link:hover {
  background-color: #eee;
}

.button--view-more svg{
  padding-left: 4px;
}


.page-link.active, .active > .page-link{
  color: #000 !important;
  background-color: #fff !important;
  border-color:
    #8A8A8A !important;
  font-weight: 600 !important;
}

.page-link{
  color: #000 !important;
  background-color: #fff !important;
  border-color:
    #D9E0E6 !important;
  font-weight: unset !important;
}

nav[aria-label="pagination-heading"] {
  float:right;
}

.pager{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}


/* --- Pager Styling --- */

/* New wrapper for flex layout */
.pager-wrapper {
  display: flex;
  justify-content: space-between; /* Pushes summary and nav apart */
  align-items: center; /* Vertically aligns items */
  margin-top: 2em;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  gap: 1em; /* Space between items when wrapped */
  padding: 2em;
}

/* Style for the "Page X of Y" text */
.pager__summary {
  color: #6F7079;
  font-size: 0.9em;
  /* Flex properties aren't strictly needed here as it's a direct child */
  /* Adjust margin if needed for alignment */
  margin: 0;
}

/* Container for the actual pager rendered by Drupal */
.pager__nav {
  /* Let flexbox handle positioning */
}


/* Responsive adjustments for the pager wrapper */
@media (max-width: 500px) { /* Example breakpoint */
  .pager-wrapper {
    justify-content: center; /* Center items when they wrap */
  }
  .pager__summary {
    width: 100%; /* Take full width */
    text-align: center; /* Center text */
    margin-bottom: 0.5em; /* Add space below when wrapped */
  }
  .pager__nav {
    width: 100%; /* Take full width */
    text-align: center; /* Center the pager items */
  }
  .pager__nav .pager {
    text-align: center; /* Ensure inner alignment is center too */
  }
}