/* Blogs module (20 Oct 2026).
   Loaded on a page that carries the module (the layout's render style). Until now this file duplicated the
   blog rules in style.css and was never loaded, so the grid's rules still live there; this holds only what is
   new: the featured post. A chosen post leads the grid in a tile two columns wide and two rows tall on a wide
   screen (four posts stack beside it), the full width of the grid on a tablet or a phone, with a Featured tag
   on its picture. Nothing here touches a grid without a featured post. */

.blog-content-wrapper .blog-item.featured-post-item {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .blog-content-wrapper .blog-item.featured-post-item {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
  }
}
/* The picture takes whatever height the two rows beside it leave, so the tile is exactly as tall as them. */
.blog-item.featured-post-item .thumbnail {
  flex: 1 1 auto;
  min-height: 360px;
}
.blog-item.featured-post-item .thumbnail a {
  height: 100%;
  min-height: 360px;
}
.blog-item.featured-post-item .contents-wrap {
  flex: 0 0 auto;
}
.blog-item.featured-post-item .contents-wrap .title a {
  font-size: 36px;
  -webkit-line-clamp: 3;
}
.blog-item.featured-post-item .contents-wrap .excerpt {
  -webkit-line-clamp: 4;
}
/* The tag sits on the picture, dark on every club's colors; the picture's link is under it. */
.blog-item .featured-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  background-color: #1c1c1c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 38px;
  pointer-events: none;
}
@media screen and (max-width: 1399px) {
  .blog-item.featured-post-item .contents-wrap .title a {
    font-size: 30px;
  }
}

/* The banner look (Brian, 20 Oct): the featured post as a wide card above the filter bar, picture left and words
   right, its own row outside what the filter's AJAX call replaces, so it stays while people filter. The picture is
   wide (16 by 9), so a post's own near-square picture is cropped round its focal point; the Featured image field
   is for when that does not do. */
.blog-content-wrapper .blog-item.featured-post-item.featured-banner,
.blog-item.featured-post-item.featured-banner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-column: auto;
  grid-row: auto;
  align-items: center;
  column-gap: 40px;
}
.blog-item.featured-post-item.featured-banner .thumbnail,
.blog-item.featured-post-item.featured-banner .thumbnail a {
  min-height: 0;
  flex: none;
}
.blog-item.featured-post-item.featured-banner .thumbnail a {
  height: auto;
  aspect-ratio: 16 / 9;
}
.blog-item.featured-post-item.featured-banner .contents-wrap {
  padding: 30px 30px 30px 0;
}
.blog-item.featured-post-item.featured-banner .contents-wrap .title a {
  font-size: 40px;
}
@media screen and (max-width: 1399px) {
  .blog-item.featured-post-item.featured-banner .contents-wrap .title a {
    font-size: 32px;
  }
}
@media screen and (max-width: 1023px) {
  .blog-item.featured-post-item.featured-banner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 30px;
  }
  .blog-item.featured-post-item.featured-banner .contents-wrap .title a {
    font-size: 28px;
  }
}
@media screen and (max-width: 767px) {
  .blog-item.featured-post-item.featured-banner {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-item.featured-post-item.featured-banner .contents-wrap {
    padding: 20px 0 0;
  }
  .blog-item.featured-post-item.featured-banner .contents-wrap .title a {
    font-size: 26px;
  }
}
@media screen and (max-width: 767px) {
  .blog-item.featured-post-item .thumbnail,
  .blog-item.featured-post-item .thumbnail a {
    min-height: 240px;
  }
  .blog-item.featured-post-item .contents-wrap .title a {
    font-size: 26px;
  }
}

/* Page numbers (Brian, 20 Oct): centered under the grid, with the words Previous and Next and a "Page 1 of 3" line,
   instead of pinned to the bottom-right corner of the grid (style.css, position absolute). The pagination is a grid
   item now, so it takes a row of its own; the status line is its first, full-width flex child. */
.blogs-module .filter-blogs-content:has(.blog-pagination) {
  padding-bottom: 0;
}
.blogs-module .filter-blogs-content .blog-pagination {
  grid-column: 1 / -1;
  position: static;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin-top: 18px;
}
.blogs-module .filter-blogs-content .blog-pagination .blog-pagination-status {
  flex: 0 0 100%;
  margin: 0 0 6px;
  text-align: center;
  font-size: 15px;
  color: #1c1c1c;
  opacity: 0.72;
}
.blogs-module .filter-blogs-content .blog-pagination .page-numbers.prev,
.blogs-module .filter-blogs-content .blog-pagination .page-numbers.next {
  position: relative;
  width: auto;
  padding: 0 22px;
  border-radius: 38px;
  gap: 10px;
  font-size: 16px;
}
.blogs-module .filter-blogs-content .blog-pagination .page-numbers.prev {
  margin-right: 10px;
}
.blogs-module .filter-blogs-content .blog-pagination .page-numbers.next {
  margin-left: 10px;
}
/* A narrow phone keeps the chevrons; the words stay for screen readers. */
@media screen and (max-width: 479px) {
  .blogs-module .filter-blogs-content .blog-pagination .page-numbers.prev,
  .blogs-module .filter-blogs-content .blog-pagination .page-numbers.next {
    width: 49px;
    padding: 0;
    margin: 0;
  }
  .blogs-module .filter-blogs-content .blog-pagination .page-numbers .word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}